آموزش JavaScript(قسمت 2):محل قرارگیری و نحوه فراخوانی جاوا اسکریپت

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

در قسمت 1(آموزش جاوا اسکریپت) به معرفی و آشنایی با مقدمات لازم پرداخیتم، پس با ما همراه باشید تا محل قرارگیری کدها و نحوه فراخوانی جاوا اسرکیپت های خارجی را بیاموزید.

برچسب <script>:

در HTML ، کد JavaScript بین برچسب و درج می شود.

مثال:

 <script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script> 

پیش نمایش آنلاین

نکته: نمونه های قدیمی جاوا اسکریپت ممکن است از یک ویژگی type استفاده کنند.

مثال:

<script type="text/javascript">

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

یک تابع JavaScript بلوکی از کد JavaScript است که می تواند در صورت “فراخوانی” اجرا شود.

به عنوان مثال ، هنگامی که یک رویداد رخ می دهد ، می توان یک عملکرد را فراخوانی کرد ، مانند زمانی که کاربر یک دکمه را کلیک می کند.

در پست های بعدی درباره عملکردها و رویدادها بسیار بیشتر خواهید آموخت.

جاوا اسکریپت <head> در یا <body>:

می توانید هر تعداد اسکریپت را در یک سند HTML قرار دهید.

می توانید اسکریپت ها را در <head> یا <body> یک صفحه HTML و یا هر دو قرار دهید.

جاوا اسکریپت در <head>:

در این مثال ، یک تابع JavaScript در بخش <head> صفحه HTML قرار داده شده است.

با کلیک روی دکمه ، عملکرد فراخوانی می شود :

 <!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

پیش نمایش آنلاین

جاوا اسکریپت در <body>:

در این مثال ، یک تابع JavaScript در بخش <body> صفحه HTML قرار داده شده است.

با کلیک روی دکمه ، عملکرد فراخوانی می شود :

 <!DOCTYPE html>
<html>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

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

</body>
</html> 

پیش نمایش آنلاین

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

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

اگر بخواهیم از یک کد چندیدن بار استفاده کنیم آن را در یک فایل js. ذخیره و سپس فراخوانی می کنیم.

مثال: پرونده خارجی: myScript.js

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

نکته: پرونده های جاوا اسکریپت دارای پسوند پرونده .js هستند.

برای استفاده از یک اسکریپت خارجی ، نام فایل اسکریپت را در ویژگی src (منبع) یک برچسب <script> قرار دهید.

مثال:

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

پیش نمایش آنلاین

هر طور که دوست دارید می توانید یک مرجع اسکریپت خارجی را در<head> یا <body> قرار دهید.

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

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

مزایای JavaScript خارجی:

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

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

برای افزودن چندین فایل اسکریپت به یک صفحه – از چندین برچسب اسکریپت استفاده کنید:

مثال فراخوانی جاوا اسکریپت:

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

منابع خارجی(نحوه فراخوانی جاوا اسکریپت های خارجی ):

اسکریپت های خارجی را می توان با یک URL کامل یا یک مسیر نسبت به صفحه وب فعلی ارجاع داد.

این مثال از یک URL کامل برای پیوند دادن به یک اسکریپت استفاده می کند:

 <script src="https://www.w3schools.com/js/myScript1.js"></script> 

پیش نمایش آنلاین

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

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

پیش نمایش آنلاین

این مثال به اسکریپتی که در همان پوشه صفحه فعلی قرار دارد پیوند می دهد:

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

پیش نمایش آنلاین

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

منابع:

W3School.com

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *