استفاده از جاوا اسکریپت
خوش اومدین به دومین جلسه از دوره آموزش جاوا اسکریپت. توی این بخش قراره که در مورد نحوه استفاده از جاوا اسکریپت صحبت کنیم. ما چند روش مختلف برای اضافه کردن جاوا اسکریپت و استفاده از اون در فایل های HTML داریم که در مورد همه اونها تو این جلسه صحبت میکنیم.
تگ script
قبل از اینکه با شیوه های استفاده از کدهای جاوا اسکریپت در فایل HTML آشنا بشیم لازم هست که با تگ script و کارکرد اون آشنا بشیم. ما قبلا در دوره آموزش HTML با این تگ آشنا شدیم. ما به وسیله این تگ میتونیم جاوا اسکریپت رو به صفحه وب خودمون اضافه کنیم. یعنی جدا از اینکه از چه روشی میخایم استفاده کنیم، استفاده از این تگ ضروری هست.
در زیر نمونه ای از نحوه استفاده از تگ script رو میبینیم:
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
همانطور که در قطعه کد بالا میبینید، کد جاوا اسکریپت رو داخل تگ script قرار دادم. ما با استفاده از صفت type تگ script میتونیم نوع زبان اسکریپت خودمون رو مشخص کنیم. از اونجایی که جاوا اسکریپت زبان برنامه نویسی پیش فرض توی HTML است، تعیین مقدار برای type ضروری نیست. اگر قصد داشتیم از این atribute استفاده کنیم، کد بالا به شکل زیر میشد:
<script type="text / javascript">
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
رویداد و تابع جاوا اسکریپت
تابع: به یه بخش کد جاوا اسکریپت که میتونیم اون رو فراخوانی کنیم و اجرا بشه تابع میگیم.
رویداد: اتفاق و لحظه خاصی که ما در اون لحظه کد جاوا اسکریپت یا به عبارتی تابعی رو فراخوانی و اجرا میکنیم.
به عنوان مثال ما میتونیم در لحظه رویداد کلیک کردن روی button تابعی رو فراخوانی و اجرا کنیم.
انواع روش های استفاده از جاوا اسکریپت در صفحه HTML
حالا که با مفاهیم تابع، رویداد و تگ script آشنا شدیم وقتشه که بریم سراغ روشهای استفاده از جاوا اسکریپت توی صفحه HTML. ما برای انجام این کار دو روش متداول داریم.
- روش داخلی
- روش خارجی
روش داخلی استفاده از جاوا اسکریپت
همانطور که توی مثال قبلی دیدید ما میتونیم کدهای جاوا اسکریپت رو در داخل تگ script قرار بدیم. ما میتونیم این کار رو هم داخل تگ body و هم داخل تگ head انجام بدیم. هیچ محدودیتی در تعداد اسکریپت ها وجود نداره.
در مثال زیر من از جاوا اسکریپت در داخل تگ head استفاده کردم:
<!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 هم استفاده کنیم. اگر بخوام این کار رو برای قطعه کد بالا انجام بدیم کد زیر رو خواهیم داشت:
<!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 بهترین انتخاب است. چرا که سرعت لود صفحه شما بیشتر میشه و عناصر HTML ابتدا نمایش داده میشن و و بعد کدهای جاوا اسکریپت. در نتیجه مخاطب ابتدا صفحه رو به طور کامل میبینه و منتظر خواندن کدهای جاوا اسکریپت نمیمونه.
روش خارجی استفاده از جاوا اسکریپت
ما میتونیم کدهای جاوا اسکریپت خودمون رو در داخل یک فایل جداگانه ذخیره کنیم و سپس بازهم با استفاده از تگ script اون رو به صفحه HTML خودمون اضافه کنیم.
<script src="myScript.js"></script>
در مثال بالا من با استفاده از صفت src فایل myScript.js رو به فایل HTML خودم اضافه کردم.
این شیوه بسیار کارآمد هست و زمانی که شما صفحات زیادی دارید، کمک زیادی به شما میکنه.
فایل های جاوا اسکریپت با پسوند js ذخیره میشن.
برای فراخوانی فایل های جاوا اسکریپت خارجی هم هیچ محدودیتی در تعداد و محل فراخوانی (داخل body یا داخل head) ندارید.
نکته مهم: در داخل فایل های اسکریپت خارجی نباید از تگ script استفاده کنیم. این تگ فقط در داخل فایل HTML استفاده میشه.
مزایای جاوا اسکریپت خارجی نسبت به جاوا اسکریپت داخلی
نوشتن کدهای جاوا اسکریپت در فایل خارجی مزایای زیادی داره از جمله:
- کدهای HTML و جاوا اسکریپت رو از هم جدا میکنه.
- این کار باعث میشه که کدهای HTML و جاوا اسکریپت خوانایی بهتری داشته باشن و نگهداری اونها آسانتر بشه.
- از یک فایل جاوا اسکریپت میتونیم در چندین صفحه HTML استفاده کنیم.
- و…
برای اینکه چند فایل جاوا اسکریپت رو به صفحه HTML خودمون اضافه کنیم باید از چند تگ script استفاده کنیم:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
شیوه های آدرس دهی برای فراخوانی فایل جاوا اسکریپت
ما میتونیم از دو روش برای آدرس دهی استفاده کنیم.
- روش relative یا نسبی
- روش absolute یا مطلق
در روش relative ما آدرس فایل رو نسبت به صفحه HTML خودمون میدیم. مثل نمونه های قبلی که مثلا فایل myScript.js در کنار فایل HTML ما بود و ما اون رو فراخوانی میکردیم.
توی روش absolute ما URL کامل یک فایل جاوا اسکریپت رو مینویسیم. مثل نمونه زیر:
<script src="https://www.mrebi.pro/js/myScript1.js"></script>
