در فصل اوّل این سلسله آموزش‌ها قرار است خود زبان جاوااسکریپت را یاد بگیریم. فارغ از محیطی که کد در آن اجرا می‌شود.
ولی به هر حال برای این که بتوانیم همین کار را هم انجام بدهیم، باز هم به محیطی احتیاج داریم که بتوانیم کدمان را در آن اجرا کنیم. از آن جایی که آموزش ما تحت وب است، محیط مرورگر انتخاب خوبی به نظر می‌رسد. البته ما از دستوراتی که فقط مخصوص این محیط است (مثل alert) خیلی کم استفاده می‌کنیم یا اصلاً استفاده نمی‌کنیم تا دوستانی که هدفشان از یادگیری جاوااسکریپت محیط‌های دیگری همچون Node.js است مشکلی نداشته باشند. در فصل بعدی به طور اختصاصی در مورد کاربرد جاوااسکریپت در محیط مرورگر صحبت خواهیم کرد.
خوب حالا می‌خواهیم ببینیم که چه طور کد جاوااسکریپت به صفحه‌ی وب اضافه می‌شود. در محیط‌های غیر مرورگری این کار به سادگی با دستوری مثل «node my.js» انجام می‌شود.
تگ <script>
در هر جایی از صفحه‌ی html خود که دوست داشتید تگ script بنویسید و درون آن کدهای جاوااسکریپت‌تان را تایپ کنید. هر موقع مرورگر به این تگ می‌رسد و می‌خواهد آن را پردازش کند کد جاوااسکریپتی شما را هم اجرا می‌کند.
مثال:
<!DOCTYPE HTML>
<html>
<body>
<p>یک متن قبل از تگ اسکریپت</p>
<script>
alert( 'سلام دنیا' );
</script>
<p>متنی بعد از تگ اسکریپت</p>
</body>
</html>با کلیک روی دکمه‌ی «اجرا» در قسمت بالای این مثال، می‌توانید اسکریپت را اجرا کنید.
HTML جدید
تگ script چند صفت می‌پذیرد که امروزه به ندرت از آن‌ها استفاده می‌شود، ولی ممکن است در کدهای قدیمی به چشمتان بخورد. به همین دلیل اشاره‌ای به آن‌ها خواهیم داشت:
صفت type به صورت <script type=...>
در استاندارد قدیمی HTML یعنی نسخه‌ی ۴ آن، وجود صفت type روی تگ script ضروری بود. که معمولاً به صورت type="text/javascript" نوشته می‌شد. ولی امروزه دیگر نیازی به نوشتن آن نیست. جالب این‌جاست که در استاندارد جدید HTML کاربرد این صفت تغییر کرد، و اکنون این صفت برای فعّال کردن moduleها در جاوااسکریپت استفاده می‌شود. این موضوع بحث مفصّلی دارد که ان‌شاءالله در آینده به آن خواهیم پرداخت.
صفت language به صورت <script language=...>
این صفت زبان برنامه‌نویسی مورد استفاده را مشخّص می‌کند، که نوشتن آن لزومی ندارد، چرا که در صورت عدم استفاده باز هم زبان شما جاوااسکریپت در نظر گرفته می‌شود.
گذاشتن کامنت قبل و بعد از تگ script
شاید در کتاب‌ها و منابع خیلی قدیمی کامنت‌های html را درون تگ script به شکل زیر ببینید:
<script type="text/javascript"><!--
...
//--></script>در جاوااسکریپت جدیدی که ما کار می‌کنیم نیازی به این کارها نیست. زمانی که زبان جاوااسکریپت تازه متولّد شده بود، مرورگرها از آن پشتیبانی نمی‌کردند و تگ script را نمی‌فهمیدند. بنابراین مجبور بودیم چنین کامنت‌هایی بگذاریم تا مرورگری که تگ script را نمی‌شناسد کد اسکریپت ما را مثل متن معمولی در صفحه نمایش ندهد، و آن را به عنوان یک کامنت در نظر بگیرد. مرورگرهایی که در ۱۵ سال اخیر ساخته شده اند چنین مشکلی ندارند. بنابراین این نوع کامنت‌گذاری نشان می‌دهد کد عتیقه است!
اسکریپت خارج از HTML
اگر کد جاوااسکریپت‌مان طولانی است، جالب نیست که همه‌اش را درون فایل html بگنجانیم. به همین دلیل کدمان را در فایلی با پسوند .js نوشته و سپس این فایل را با صفت src به صفحه‌ی html متّصل می‌کنیم:
<script src="/path/to/script.js"></script>در اینجا آدرس /path/to/script مسیر مطلق فایل است که از ریشه‌ی سایت در نظر گرفته می‌شود. می‌شود آدرس فایل را به صورت نسبی هم داد، مثلاً بنویسیم src="script.js" که به این معناست که فایل script.js در همین پوشه‌ایست که فایل html درون آن قرار دارد.
می‌توانید برای آدرس فایل جاوااسکریپت یک URL کامل نیز بدهید، مثلاً:
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>برای متّصل کردن تعدادی فایل جاوااسکریپت به صفحه، به همان تعداد تگ script نیاز است:
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…بین برنامه‌نویسان قانونی هست که می‌گوید فقط اسکریپت‌های بسیار ساده را درون فایل HTML بنویسید، و بقیه را در فایل مجزا قرار دهید.
مزیّت فایل مجزّا این است که مرورگر آن را دانلود کرده و در حافظه‌ی Cache ذخیره می‌کند. حالا اگر کاربر مجدداً صفحه‌ی وب را باز کند، مروگر از همان فایل ذخیره شده استفاده می‌کند و دوباره دانلودش نمی‌کند.
حتّی اگر صفحه‌ی دیگری نیز آدرس این فایل را درون خود داده باشد، باز هم مرورگر فایل را از حافظه‌ی Cache می‌خواند و دوباره دانلودش نمی‌کند. این یعنی فایل در کل فقط یک مرتبه دانلود خواهد شد.
این قابلیت ترافیک را کاهش می‌دهد و صفحه را سریعتر می‌کند.
اگر به تگ script صفت src بدهید، محتوایش نادیده گرفته می‌شود.
نمی‌شود یک تگ script به تنهایی هم صفت src داشته باشد، و هم داخلش کد نوشته شده باشد.
مثلاً این کد درست کار نمی‌کند:
<script src="file.js">
alert(1); // این قسمت اجرا نمی‌شود، زیرا تگ اسکریپت src دارد
</script>شما باید تکلیف خودتان را مشخّص کنید که می‌خواهید از یک فایل خارجی استفاده کنید، یا یک تگ script عادی گذاشته و درونش کد بنویسید.
مثال بالا را می‌توانید به دو تگ script بشکنید تا نتیجه‌ی مورد انتظار را ببینید.
<script src="file.js"></script>
<script>
alert(1);
</script>خلاصه
- برای نوشتن کد جاوااسکریپت در صفحه‌ی وب از تگ script استفاده می‌کنیم.
- صفت‌های
typeوlanguageبرای تگ script لازم نیستند. - اگر اسکریپتی در فایلی مجزّا نوشته شده باشد، به این صورت می‌توان آن را به صفحه متّصل کرد:
<script src="path/to/script.js"></script>
هنوز نکات زیادی در مورد اجرای اسکریپت در محیط مرورگر و تعامل آن با اجزای صفحه هست که نگفتیم. زیرا در این فصل می‌خواستیم خود جاوااسکریپت را یاد بگیریم، بدون توجّه به اینکه در چه محیطی اجرا می‌شود. برای همین نمی‌خواهیم خودمان را با چیزهایی که مخصوص محیط مرورگر است گیج کنیم. ما فقط می‌خواستیم به نحوی بتوانیم کد جاوااسکریپت خود را اجرا کنیم که تا الآن به این هدف رسیدیم.