در قسمت 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 بخوانید.
منابع:
