پیش‌تر به خلاصه‌ای از زبان برنامه‌نویسی JavaScript، در قسمت اول از این آموزش، پرداختیم. حال اصلی‌تر به سراغ این مبحث رفته تا به دقت مبانی این زبان برنامه‌نویسی پرطرفدار را بررسی کنیم.
کد‌نویسی JavaScript
استفاده از تگ script در HTML
تگ <script> یکی از مهم‌ترین تگ‌ها در HTML است که برای افزودن کدهای جاوااسکریپت به صفحات وب استفاده میشود. با استفاده از این تگ، می‌توانیم عملکرد و تعاملات صفحه وب را بهبود ببخشیم. در این مقاله، نحوه استفاده از تگ <script>، مکان‌های مناسب برای قرار دادن آن، و برخی نکات بهینه‌سازی را بررسی می‌کنیم.
ساختار تگ script
تگ <script> معمولاً به این شکل در کد HTML استفاده میشود.
<script>
// کدهای جاوااسکریپت در اینجا نوشته میشود
alert("Hello, World!");
</script>
نکته قابل توجهی که باید به آن دقت کنیم این است که تگ <script> می‌تواند هم کد جاوااسکریپت را به صورت مستقیم در خود جای دهد و هم به یک فایل خارجی لینک دهد.
قرار دادن JavaScript به صورت داخلی
زمانی که نیاز دارید کد جاوااسکریپت شما در همان صفحه HTML نوشته شود، میتوانید از تگ <script> به صورت داخلی، مانند کد زیر استفاده کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>صفحه HTML با کد جاوااسکریپت</title>
</head>
<body data-rsssl=1>
<h1>این یک صفحه HTML است</h1>
<script>
document.write("این متن توسط جاوااسکریپت اضافه شده است");
</script>
</body>
</html>
قرار دادن JavaScript از فایل خارجی
استفاده از فایل‌های خارجی برای کدهای جاوااسکریپت یکی از بهترین شیوه‌ها برای سازمان‌دهی و نگهداری کد است. این کار به شما کمک می‌کند تا کدهای جاوااسکریپت خود را از کد HTML جدا کنید و به فایل‌های جداگانه منتقل کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>صفحه HTML با فایل جاوااسکریپت</title>
</head>
<body data-rsssl=1>
<h1>این یک صفحه HTML است</h1>
<script src="script.js"></script>
</body>
</html>
در فایل script.js کدهای جاوااسکریپت خود را قرار دهید.
document.write("این متن توسط فایل جاوااسکریپت خارجی اضافه شده است");
کجا باید تگ script رو قرار بدیم؟
جاوااسکریپت می‌تواند در قسمت‌های مختلف صفحه HTML قرار بگیرد، اما بهترین مکان‌ها برای قرار دادن تگ <script> بهینه‌سازی عملکرد صفحه را تحت تأثیر قرار می‌دهد.
داخل تگ head
قراردادن تگ <script> در بخش <head> معمولاً باعث میشود که کد جاوااسکریپت قبل از بارگذاری محتوای صفحه اجرا شود. این روش ممکن است سرعت بارگذاری صفحه را کاهش دهد زیرا مرورگر ابتدا کد جاوااسکریپت را اجرا می‌کند.
<head>
<script src="script.js"></script>
</head>
در انتهای body
بهترین روش برای قرار دادن تگ <script> در پایین صفحه، درست قبل از بسته شدن تگ </body> است. این کار اطمینان می‌دهد که ابتدا محتوای صفحه بارگذاری شده و سپس کد جاوااسکریپت اجرا میشود. این روش باعث بهبود سرعت بارگذاری صفحه میشود.
<body data-rsssl=1>
<h1>این یک صفحه HTML است</h1>
<script src="script.js"></script>
</body>
استفاده از async یا defer
در صورتی که تگ <script> را در بخش <head> قرار دهید، میتوانید از ویژگی‌های async یا defer برای بهینه‌سازی بارگذاری جاوااسکریپت استفاده کنید.
async
فایل جاوااسکریپت به صورت ناهمزمان بارگذاری و اجرا میشود. این بدان معناست که مرورگر نیازی به متوقف کردن بارگذاری صفحه برای اجرای جاوااسکریپت ندارد.
<script src="script.js" async></script>
defer
فایل جاوااسکریپت بعد از بارگذاری کامل HTML اجرا میشود. این ویژگی زمانی مناسب است که کد جاوااسکریپت باید بعد از بارگذاری تمام محتوای صفحه اجرا شود.
<script src="script.js" defer></script>
نکات بهینه‌سازی استفاده از تگ script
استفاده از فایل‌های خارجی
برای مدیریت بهتر کد و نگهداری آسان‌تر، همیشه سعی کنید از فایل‌های جاوااسکریپت خارجی استفاده کنید.
کاهش تعداد فایل‌های JavaScript
به جای اینکه چندین فایل کوچک جاوااسکریپت داشته باشید، بهتر است فایل‌های خود را ترکیب کنید تا تعداد درخواست‌های HTTP کاهش یابد.
فشرده‌سازی کدهای JavaScript
استفاده از defer یا async
در صورتی که نیاز به اجرای فوری کد جاوااسکریپت ندارید، از ویژگی‌های defer یا async استفاده کنید تا سرعت بارگذاری صفحه بهتر شود.
ویدئوی یوتیوب
شما عزیزان برای آموزش دقیق‌تر میتوانید کانال یوتیوب عماد حجازیان را دنبال کنید.
