با سلام خدمت همراهان همیشگی وب سایت پرنیان طرح
مقاله امروز وب سایت پرنیان ، به معرفی محل استقرار کدهای جاوا اسکریپت می پردازد.
این زبان برنامه نویسی بسیار آسان برای یادگیری و در عین حال بسیار کاربردی و جذاب است.
شما می توانید با استفاده از این زبان برنامه نویسی ، افکت های بسیار جذابی به صفحات وب سایت خود اضافه کنید.
قصد داریم تا در سری آموزش های جاوا اسکریپت ، تمامی امکانات این زبان مهیج را از ابتدایی تا پیشرفته در کنار شما تمرین کنیم.
شما عزیزان می توانید با مراجعه به این لینک ، از تمامی مقالات وب سایت پرنیان طرح در خصوص JavaScript ، دیدن فرمایید.
همراه پرنیان باشید.
تگ <script>
در کد نویسی با زبان HTML ، کدهای JavaScript بین برچسب های <script> و </script> استقرار می یابند.
برای مثال ، کد زیر هیچ کاری انجام نمی دهد.
تنها برای اطلاع شما عزیزان از نحوه استقرار کدهای جاوا اسکریپت، بین کدهای html می باشد.
[php]
<script>
document.getElementById(“demo”).innerHTML = “My First JavaScript”;
</script>
[/php]
نتیجه را از این لینک ببینید و تمرین کنید.
توابع و رویدادهای JavaScript
به عنوان مثال هنگامی که یک رویداد اتفاق می افتد ، می توان یک تابع را فراخوانی کرد.
مانند وقتی که کاربر روی یک دکمه کلیک می کند.
کدهای جاوا اسکریپت در <head> یا <body>
می توانید هر تعداد اسکریپت که بخواهید را در یک سند HTML قرار دهید.
این اسکریپت ها را می توان در قسمت <body> یا در قسمت <head> یک صفحه HTML یا هر دو قرار داد.
کدهای جاوا اسکریپت در <head>
در این مثال ، یک تابع JavaScript در بخش <head> یک صفحه HTML قرار می گیرد.
با کلیک بر روی دکمه ، این تابع فراخوانی می شود:
[php]
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id=”demo”>A Paragraph.</p>
<button type=”button” onclick=”myFunction()”>Try it</button>
</body>
</html>
[/php]
نتیجه را از این لینک ببینید و تمرین کنید.
کدهای جاوا اسکریپت در <body>
در این مثال ، یک تابع JavaScript در بخش <body> یک صفحه HTML قرار می گیرد.
با کلیک بر روی دکمه ، این تابع فراخوانی می شود:
[php]
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<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>
[/php]
نتیجه را از این لینک ببینید و تمرین کنید.
جاوا اسکریپت های خارجی
جاوا اسکریپت ها همچنین می توانند در فایل های خارجی نیز جایگذاری شوند.
برای مثال فرض می کنیم فایل خارجی که کد های جاوا اسکریپت در آن قرار دارند، با نام myScript.js نامگذاری شده است.
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
اسکریپت های خارجی زمانی کاربرد دارند که بخواهید از یک کد تکراری در چندین صفحه وب استفاده کنید.
پرونده های JavaScript دارای پسوند js. هستند.
برای استفاده از یک اسکریپت خارجی ، نام فایل اسکریپت را در ویژگی src (منبع) یک برچسب <script> قرار دهید:
[php]
<script src=”myScript.js”></script>
[/php]
نتیجه را از این لینک ببینید و تمرین کنید.
شما می توانید لینک مرجع فایل جاوا اسکریپت را به دلخواه خود در تگ <head> یا <body> قرار دهید.
اسکریپت طوری رفتار می کند که گویا دقیقاً همان جا است که برچسب <script> در آن قرار دارد.
مزایای استفاده از جاوا اسکریپت های خارجی
- html و کد را از هم جدا می کند.
- باعث می شود خواندن و درک و نگهداری کد های html و جاوا اسکریپت راحت تر باشد.
- فایل های ذخیره شده جاوا اسکریپت می توانند سرعت بار گذاری صفحات وب را افزایش دهند.
برای اضافه کردن چندین فایل خارجی جاوا اسکریپت به یک صفحه وب ، باید برای هر یک از فایل های خارجی ، یک تگ جدا بنویسید:
<script src=”myScript1.js”></script>
<script src=”myScript2.js”></script>
منابع خارجی
External References
اسکریپت های خارجی را می توان با URL کامل یا مسیری مربوط به صفحه وب فعلی ارجاع داد.
در این مثال از یک URL کامل برای پیوند به یک اسکریپت استفاده می شود:
[php]
<script src=”https://www.w3schools.com/js/myScript.js”></script>
[/php]
نتیجه را از این لینک ببینید و تمرین کنید.
و این مثال از یک اسکریپت واقع در یک پوشه مشخص در وب سایت فعلی استفاده می کند:
[php]
<script src=”/js/myScript.js”></script>
[/php]
نتیجه را از این لینک ببینید و تمرین کنید.
و این مثال نیز به اسکریپتی که در همان پوشه همان صفحه فعلی قرار دارد پیوند دارد:
[php]
<script src=”myScript.js”></script>
[/php]
نتیجه را از این لینک ببینید و تمرین کنید.