آموزش استفاده از جاوا اسکریپت در کدها

Ratings
(0)

آموزش استفاده از تگ <script>

در HTML، کدهای جاوا اسکریپت را باید در بین تگ های <script> و <script/> قرار دهیم. به مثال زیر توجه کنید:

مثال شماره 1

 <script>
document.getElementById("demo").innerHTML = "اولین کد جاوا اسکریپت من";
</script>
امتحان کنید

نکته: در کدهای قدیمی جاوا اسکریپت از خصوصیت type به صورت زیر استفاده می شد:

<script type="text/javascript">

اما امروزه استفاده از خصوصیت type ضروری نیست. زیرا جاوا اسکریپت بعنوان زبان اسکریپت نویسی پیش فرض html محسوب می شود.

توابع و رویدادهای جاوا اسکریپت

تابع یا function  در جاوا اسکریپت به یک قطعه کد گفته می شود که می تواند در زمان مناسب فراخوانی و اجرا شود. بعنوان مثال یک تابع می تواند وقتی که یک رویداد اتفاق می افتد فراخوانی شود. مثلا وقتی که کاربر بر روی یک دکمه کلیک می کند، یک تابع می تواند فراخوانی شود. در فصل های بعدی، بیشتر در مورد تابع ها صحبت خواهیم نمود.

 استفاده از جاوا اسکریپت در تگ <head> یا در <body>

ما می توانیم به هر تعداد اسکریپت که بخواهیم در یک سند html قرار دهیم. این اسکریپت ها می توانند در داخل تگ <body> یا در داخل تگ <head> از صفحه ی html قرار گیرند و یا اینکه می توانند در هردو مورد قرار گیرند.

 استفاده از جاوا اسکریپت در <head>

 در مثال زیر، یک تابع جاوا اسکریپت در داخل تگ <head> از صفحه ی html قرار گرفته است. و وقتی که بر روی یک دکمه کلیک می شود، این تابع فراخوانی می شود:

مثال شماره 2

<!DOCTYPE html>
<html>
<head>
<script>
 function myFunction() {
  document.getElementById("demo").innerHTML = "پاراگراف تغییر کرد";
 }
</script>
</head>
<body>

 <h2>head استفاده از جاوا اسکریپت در</h2>

 <p id="demo">این یک پاراگراف است</p>

<button type="button" onclick="myFunction()">اینجا کلیک کنید</button>

</body>
</html>
امتحان کنید

 

 استفاده از جاوا اسکریپت در <body>

در مثال زیر، یک تابع جاوا اسکریپت در داخل تگ <body> از صفحه ی html قرار گرفته است. و وقتی که بر روی یک دکمه کلیک می شود، این تابع اجرا می شود:

مثال شماره 3

<!DOCTYPE html>
<html>
<body>

<h2>body استفاده از جاوا اسکریپت در</h2>

<p id="demo">این یک پاراگراف است</p>

<button type="button" onclick="myFunction()">اینجا کلیک کنید</button>

<script>
 function myFunction() {
  document.getElementById("demo").innerHTML = "پاراگراف تغییر کرد";
 }
</script>

</body>
</html>
امتحان کنید

اگر اسکریپت ها را در انتهای تگ <body> قرار دهیم، سرعت  صفحه بیشتر می شود، زیرا تفسیر اسکریپت ها می تواند سرعت صفحه را کمتر کند.

کدهای جاوا اسکریپت اکسترنال

اسکریپت ها را همچنین می توانیم در داخل فایل های اکسترنال قرار دهیم:

فایل اکسترنال myScript.js :

function myFunction() {
  document.getElementById("demo").innerHTML = "پاراگراف تغییر کرد";
}

 اسکریپت های اکسترنال وقتی مفید هستند که این کدهای مشابه، در صفحات وب فراوانی مورد استفاده قرار گرفته باشد. فایل های جاوا اسکریپت دارای پسوند js. هستند. برای استفاده از یک اسکریپت اکسترنال، نام فایل اسکریپت را در داخل ویژگی src از تگ <script> قرار دهید. src مخفف کلمه ی source است:

مثال شماره 4

<html>
<body>

<h2>استفاده از جاوا اسکریپت اکسترنال</h2>

<p id="demo">یک پاراگراف</p>

<button type="button" onclick="myFunction()">امتحان کنید</button>

<p>این مقال به این فایل لینک دارد "myScript.js".</p>
<p>(myFucntion در این فایل قرار دارد: "myScript.js")</p>

<script src="/myScript.js"></script>

</body>
</html>
امتحان کنید

ما می توانیم یک اسکریپت اکسترنال را در تگ <head> یا <body> قرار دهیم. این اسکریپت طوری رفتار می کند که گویی دقیقاً در جایی که تگ <script> قرار دارد واقع شده است.

نکته: اسکریپت های اکسترنال نمی توانند حاوی تگ های <script> باشند.

مزیت های اسکریپت اکسترنال در جاوا اسکریپت

 قرار دادن اسکریپت ها در فایل های اکسترنال، از مزیت هایی برخوردار است:

  • باعث می شود کدهای جاوا اسکریپت و کدهای HTML از یکدیگر جدا شوند.
  • باعث می شود خواندن و نگهداری کدها در HTML و جاوا اسکریپت ساده تر شود.
  • اگر فایل های جاوا اسکریپت به صورت پنهانی ذخیره(Cached) شوند، می توان باعث پر سرعت تر شدن بارگذاری صفحه شود.

برای اضافه کردن چند فایل اسکریپت در یک صفحه، می توانید از چند تگ script استفاده کنید:

<script src="/myScript1.js"></script>
<script src="/myScript2.js"></script>

 

ارجاعات اکسترنال در جاوا اسکریپت

یک اسکریپت اکسترنال، به سه طریق می تواند مورد رجوع قرار گیرد:

1. با استفاده از یک آدرس URL کامل.

2. با استفاده از یک مسیر(مانند /js/).

3. بدون استفاده از هیچ مسیری.

در مثال زیر، از یک آدرس URL کامل برای لینک به اسکریپت اکسترنال myScript.js استفاده می کنیم:

مثال شماره 5

<script src="https://sina2.ir/tryit/myScript.js"></script>
امتحان کنید

در مثال زیر، از یک مسیر فایل، برای لینک به فایل اکسترنال myScript.js استفاده شده است:

مثال شماره 6

<script src="/other/myScript.js"></script>
امتحان کنید

 

 در مثال زیر، از هیچ مسیری برای لینک به اسکریپت اکسترنال myScript.js استفاده نشده است:

مثال شماره 7

<script src="/myScript.js"></script>

برای مطالعه ی بیشتر در مورد مسیرهای فایل ها، به این مقاله مراجعه کنید.

  • بازدید: 598

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال