JavaScript Basics

<< مبحث قبلی مبحث بعدی >>

برچسب <script>

در HTML کد جاوا اسکریپت بین <script> و </script> قرار می‌گیرد.


<!DOCTYPE HTML>
<html>
  <body>
    <h2> JavaScript in Body </h2>
    <p id = "demo"> </p>
    <script>
      document.getElementById("demo").innerHTML = "My First JavaScript";
    </script>
  </body>
</html>

خروجی:

می‌توانید برچسب <script> را داخل قسمت <head> یا <body> و یا هر دو قرار دهید.

در مثال بالا آن را داخل قسمت <body> قرار داده‌ایم.

قرار دادن <script> در پایین قسمت <body> سرعت نمایش را بهبود می‌بخشد. زیرا تفسیر اسکریپت سرعت نمایش را پایین می‌آورد.

جاوا اسکریپت خارجی (external)

اسکریپت را می‌توان در یک فایل جداگانه ذخیره و از داخل سند HTML آن را فراخوانی کرد. در این حالت بعد از نوشتن اسکریپت داخل ویرایشگر متن دلخواه آن را با پسوند js. ذخیره کنید. سپس با استفاده از عبارت زیر آن را از داخل سند HTML فراخوانی کنید:

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

در مثال بالا اسکریپت را با اسم myScript.js ذخیره کرده‌ایم. دقت داشته باشید که فایل اسکریپت در همان محل فایل HTML باشد. در غیر این صورت آدرس فایل اسکریپت را به درستی وارد کنید. برای نحوه آدرس دهی در سند HTML اینجا را کلیک کنید.

فایل HTML:


<!DOCTYPE HTML>
<html>
  <body>
    <h2> External JavaScript </h2>
    <p id = "demo"> A Paragraph. </p>
    <button type="button" onclick="myFunction()"> Try it </button>
    <p> (myFunction is stored in an external file called "myScript.js") </p>
    <script src="myScript.js"></script>
  </body>
</html>

فایل JavaScript:


function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}

خروجی:

External JavaScript

A Paragraph.


(myFunction is stored in an external file called "myScript.js")

رفتار اسکریپت فراخوانی شده آنطور است که انگار دقیقاً در محل برچسب <script> قرار گرفته است. فقط توجه داشته باشید که فایل اسکریپت جداگانه نمی‌تواند شامل برچسب <script> باشد.

مزایای استفاده از جاوا اسکریپت جداگانه عبارتند از:

  • جدا کردن HTML از کد
  • آسانتر کردن خواندن و اعمال تغییرات در HTML و JavaScript
  • فایل‌های جاوا اسکریپت ذخیره شده (cached) می‌تواند باعث بالا رفتن سرعت بارگذاری صفحه شود.
<< مبحث قبلی مبحث بعدی >>