جاوااسکریپت در HTML

دسته بندی : آموزش Javascript سطح مقاله : متوسط زمان مطالعه : 4 دقیقه آخرین بروز رسانی: 20 اسفند 1399

پیوند دادن هر سه زبان جلویی – HTML ، CSS و JavaScript – باعث می شود وب سایت شما مرتب تر و صیقلی به نظر برسد. مراحل چگونگی قرار دادن Javascript در HTML در این مقاله آموزشی بحث خواهد شد.

با جاوااسکریپت در HTML شما نکات مفیدی دریافت خواهید کرد و درک خواهید کرد که در کجا باید JavaScript خود را در اسناد HTML اضافه کنید. ما همچنین به شما نشان خواهیم داد که چگونه می توانید فایلهای جاوا اسکریپت جداگانه را به فایلهای HTML خود پیوند دهید. اگرچه ممکن است نیاز به ایجاد پرونده های اضافی داشته باشید ، اما نمایش مرورگر برای آن آسان تر است. همچنین ، شما در صدها خط کد گم نخواهید شد.

نکات اصلی جاوااسکریپت در HTML:

شما باید کدهای طولانی جاوا اسکریپت را در پرونده های جداگانه بنویسید ، زیرا تقسیم کد به ترتیب باعث خوانایی بیشتر آن می شود.
در HTML ، باید کد خود را بین تگ <script> و </script> بنویسید. این تگ ها کد JavaScript را تعریف می کنند.
پیشنهاد می شود فقط کدهای کوتاه JavaScript را در داخل تگ <body> پیاده سازی کنید. در غیر این صورت ، خواندن کد دشوار می شود.
پسوند فایل JavaScript .js است.

جاوا اسکریپت درون خطی

دو روش وجود دارد که JavaScript را در سند HTML خود بگنجانید. اولین مورد با نوشتن کد جاوا اسکریپت در تگ <script> است. مورد دیگر با قرار دادن آن از طریق یک فایل خارجی است. مورد آخر در این آموزش بیشتر توضیح داده خواهد شد. حالا ، بیایید داخل جاوا اسکریپت درون خطی برویم!

در <head>

ابتدا می بینیم که چگونه می توانید JavaScript را در تگ <head> قرار دهید. مثال زیر یک تابع JavaScript myFunction را نشان می دهد که با کلیک کردن روی یک دکمه فراخوانی می شود و در قسمت <head> قرار می گیرد.

وقتی روی دکمه کلیک می کنید ، یک رویداد کلیک رخ می دهد که محتوای تعریف شده JavaScript را به صورت پویا در HTML قرار می دهد. این کار با تعیین شناسه پاراگراف و سپس هدف قرار دادن آن با جاوا اسکریپت بر روی کلیک انجام می شود:

<!DOCTYPE html>
<html>
<head>
   <script> 
      function myFunction() { 
         document.getElementById("example").innerHTML = "I love learning JavaScript!"; 
      } 
   </script> 
</head>
<body>
   <h1>A Web Page</h1>
   <p id="example">What do I love?</p>
   <button type="button" onclick="myFunction()">Answer!</button>
</body> 
</html>

در <body>

برای نوشتن JavaScript در تگ <body> می توانید همین کار را انجام دهید. مثال بعدی ما نحوه قرارگیری عملکرد JavaScript myFunction را که با کلیک یک دکمه فراخوانی می شود ، در بخش <body> قرار می دهد.

وقتی روی دکمه کلیک می کنید ، یک رویداد کلیک رخ می دهد و محتوای تعریف شده JavaScript را به صورت پویا در HTML قرار می دهد. این کار دوباره با تنظیم شناسه پاراگراف و سپس هدف قرار دادن آن با جاوا اسکریپت بر روی کلیک انجام می شود:

<!DOCTYPE html>
<html>
<body>
   <h1>A Web Page</h1>
   <p id="example">What do I love?</p>
   <button type="button" onclick="myFunction()">Answer!</button>
   <script>
      function myFunction() {
         document.getElementById("example").innerHTML = "I love learning JavaScript"; 
      }
   </script> 
</body>
</html>

جاوا اسکریپت خارجی

فقط هنگام نوشتن چند خط کد باید از JavaScript درون خطی استفاده کنید. در موارد دیگر ، باید کد JavaScript خود را در یک فایل جداگانه قرار دهید و آن را به پرونده HTML خود پیوند دهید. رفتار اسکریپت خارجی همان رفتاری را خواهد داشت که هنگام نوشتن در تگ <script> خواهد داشت. بیا یک نگاهی بیندازیم.

تصور کنید قطعه ای از کد جاوا اسکریپت مانند کد زیر دارید. باید آن را در یک پرونده جداگانه قرار دهید. نام فایل می تواند هر چیزی باشد که شما بخواهید ، اگرچه قرارداد نامگذاری آن به اسکریپت ها است. پسوند پرونده برای پرونده های JavaScript .js است. بیایید پرونده خارجی جاوا اسکریپت را برای این قطعه کد myScript.js نامگذاری کنیم.

function myFunction() {     
   document.getElementById("example").innerHTML = "I love JavaScript!";  
}

اکنون ، باید JavaScript را به HTML پیوند دهید. در سند HTML ، در بخش <head> ، یک تگ <script> بنویسید و یک ویژگی src اضافه کنید ، مقدار آن را برای فایل خارجی تنظیم کنید:

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

همچنین می توانید چندین فایل JavaScript را به پرونده HTML خود اضافه کنید:

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

مزایای استفاده از این قبیل

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

اگر پرونده های جاوا اسکریپت در صفحه وب ذخیره شوند ، بارگیری می تواند سرعت بیشتری داشته باشد.
مدیریت کد شما در بین پرونده های جداگانه آسان تر است.
اگر از اسکریپت های مشابه در پرونده های مختلف HTML استفاده می کنید ، از جمله یک فایل خارجی از کد تکراری جلوگیری می کند.
نگه داشتن کد HTML ، CSS و JavaScript در داخل پرونده های جداگانه ، این یک روش خوب در بین توسعه دهندگان محسوب می شود.

منابع خارجی

همانطور که قبلاً می دانید ، جاوااسکریپت در HTML می توانند با استفاده از مشخصه src و تنظیم مقدار آن بر روی نام فایل خارجی ، به صفحات وب مرتبط شوند:

<script src="https://www.bitdegree.org/js/exampleScript.js"></script>

اگر فایل خارجی JavaScript در یک پوشه متفاوت از فایل HTML قرار دارد ، شما باید یک مسیر کامل به فایل خارجی را نشان دهید. از slash (/) برای بالا یا خارج شدن از پوشه فعلی در پوشه اصلی آن استفاده می شود.

قطعه کد زیر نشان می دهد که پرونده exampleScript.js در پوشه ای به نام js است که در همان پوشه در کنار سند HTML قرار دارد.

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

حال نگاهی به مثال زیر بیندازید. اگر اسکریپت در همان پوشه فایل HTML قرار داشته باشد ، اینگونه به نظر می رسد:

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

خلاصه جاوااسکریپت در HTML:

می توانید کد JavaScript را در سند HTML خود یا با استفاده از روش های داخلی یا خارجی وارد کنید.
جاوا اسکریپت درون خطی یا در تگ <body> یا <head> قرار می گیرد.
جاوا اسکریپت خارجی در یک پرونده جداگانه .js نوشته شده است. مسیر رسیدن به آن در فایل HTML گنجانده شده است (با استفاده از ویژگی src در تگ <script> در بخش <head> قرار داده شده است).
قرار دادن اسکریپت های خود در یک پرونده جداگانه .js و پیوند دادن آن به فایل HTML خود ، روش خوبی است.

این مقاله چقدر براتون مفید بود؟

میانگین رتبه : 3/5 - تعداد رای : 1