جاوا اسکریپت در مرورگرها

سلام. اگه دو مقاله قبلی این دوره آموزشی با عنوان های آموزش جاوا اسکریپت برای مبتدی ها و راه اندازی محیط کد نویسی برای جاوا اسکریپت را دنبال کرده باشید، حالا دیگه همه چی برای اینکه بتونید اولین کد جاوا اسکریپتی خودتون رو بنویسید آماده و مهیاست. اگه یادتون باشه گفتیم که جاوا اسکریپت رو هم می شه در مرورگر اجرا کرد و هم خارج از اون در Node. در این مقاله به اجرای جاوا اسکریپت در مرورگرها خواهم پرداخت.

کاربرد اِلِمان یا عنصر script در html

در مقاله قبلی، تا آنجا پیش رفتیم که یک فایل میزبان (host) به نام index.html در پوشه js-basics ایجاد کردیم. برای اینکه بتونیم کدهای جاوا اسکریپت رو در این فایل میزبان قرار بدیم یا بنویسیم بایستی از المان script استفاده کنیم. این المان رو در دو جای سند html-مون می تونیم قرار بدیم:

1- قسمت head

2- قسمت body

به عنوان بهترین شیوه عمل (Best Practice) پیشنهاد می شود که المان script حاوی کدهای جاوا اسکریپت را در قسمت body بعد از همه المان های داخل آن و ما قبل تگ بسته <body/> قرار دهیم. دو دلیل برای اینکار وجود دارد:

الف- مرورگر کدهای درون سند html را از بالا به پایین خوانده و تجزیه-تحلیل می کند (Parsing).لذا اگر کدهای جاوا اسکریپت را در قسمت head قرار دهیم و احیانا میزان کدهای جاوا اسکریپتی که نوشته ایم زیاد باشد، وقتی مرورگر به آن قسمت می رسد مادامیکه مشغول خواندن و اجرا کردن آن قسمت از کدهاست، قادر نخواهد بود تا محتوای صفحه را تولید کرده (Rendering) و به کاربر نمایش دهد. در نتیجه یک تجربه کاربری (User Experience = UX) بدی برای کاربر در پی خواهد داشت و کاربر در طول زمانیکه مرورگر مشغول خواندن و اجرا کردن کدهای جاوا اسکریپت است با یک صفحه خالی سفید رنگ مواجه خواهد شد.

ب- تقریبا در اکثر مواقع کدهای جاوا اسکریپتی که می نویسیم نیاز دارند تا با المان ها یا عناصر صفحه (اصطلاحا DOM) صحبت کنند. به عنوان مثال فرض کنید که بخواهیم به کمک جاوا اسکریپت المانی از صفحه را مخفی کرده یا اینکه اگر مخفی هست، آن را نمایش دهیم. در صورتیکه کدهای جاوا اسکریپت را در قسمت body قرار داده باشیم می توانیم مطمئن باشیم که پیش ازین تمامی المان های محتوای صفحه توسط مرورگر تولید (Render) شده اند.

استثنائاتی هم هست که حتما کدهای جاوا اسکریپت باید در قسمت head سند html قرار گیرند تا عملکرد درستی داشته باشند مثلا بعضی از کتابخانه های جاوا اسکریپتی ثالث (Third-Party JS Libraries). به مرور که با جاوا اسکریپت بیشتر آشنا شده و کار کردید حتما با این موارد هم روبرو خواهید شد، پس عجله نکنید. اما این ها فقط استثناء هستند و همانطور که گفتم و دلایلش را توضیح دادم به عنوان بهترین شیوه عمل بایستی کدهای جاوا اسکریپت را در انتهای قسمت body قرار دهیم.

حالا همان کد جاوا اسکریپتی را که برای اولین بار در مقاله آموزش جاوا اسکریپت برای مبتدی ها مستقیما داخل کنسول جاوا اسکریپت مرورگر نوشتیم، اینجا به کمک المان script درون سند html می نویسیم. انتهای قسمت body و ما قبل تگ بسته آن کلمه script را بنویسید و کلید Tab را از صفحه کلید فشار دهید تا المان کامل script برایتان ایجاد شود و مطابق زیر کد جاوا اسکریپتی لازم برای نمایش عبارت Hello World در کنسول مرورگر را درون آن بنویسید:

با فشردن کلیدهای ترکیبی Ctrl + S تغییرات را ذخیره کنید. بر روی فایل index.html کلیک راست کرده و گزینه Open with Live Server را انتخاب کنید. مرورگر پیش فرض شما باز شده (برای اینکه با هم هماهنگ باشیم لطفا از مرورگر گوگل کروم استفاده کنید) و به طور خودکار به آدرس وب http://127.0.0.1:5500/index.html هدایت خواهد شد. داخل مرورگر بر روی یک فضای خالی کلیک راست کرده و گزینه Inspect را انتخاب کنید یا از دکمه های میانبر Ctrl + Shift + I (در ویندوز) استفاده نمائید. پنجره Developer Tools برایتان باز می شود. در پنجره باز شده بر روی تب Console کلیک نمائید. حالا مشاهده خواهید کرد که عبارت Hello World در خط فرمان برایتان ثبت (Log) شده است. تبریک می گم شما موفق شدید اولین کد جاوا اسکریپتی خودتون را بنویسید.

حالا یه کمی بیشتر راجع به جزئیات کدی که نوشتیم توضیح بدم:

• به console.log('Hello World') اصطلاحا یک statement می گویند.

هر statement در حقیقت یک قطعه کد است و عملیاتی را نشان می دهد که باید انجام شود.

مثلا در کد بالا statement-ایکه نوشتیم بایستی یک پیام را در کنسول ثبت کند.

• هر خط کد در جاوا اسکریپت بایستی با کاراکتر ; (نقطه ویرگول یا semicolon) تمام شود.
• آنچه مابین دو کاراکتر ' ' (نقل قول تک یا single quote) قرار می گیرند را اصطلاحا string (رشته) می نامند.

رشته یا string در حقیقت یک دنباله از کاراکترهاست.

در جاوا اسکریپت هم مثل همه زبان های برنامه نویسی دیگر برای کدهاییکه می نویسیم، می توانیم توضیحات (comment) درج کنیم. برای درج توضیحات از // (double forward slash) استفاده می کنیم. ویژگی ایکه توضیحات دارند آنست که موتور جاوا اسکریپت حین خواندن کدها آن ها را نادیده گرفته و اجرایشان نخواهد کرد.

کاربرد توضیحات برای مستندسازی کدهاست و برای آنست که به سایر توسعه دهندگان بگوییم چرا به این صورت کد نوشته ایم.

نکته مهمی که باید بدونیم اینه که در توضیحاتی که برای کدهامون درج می کنیم به لحاظ مفهومی و نه از لحاظ فنی و گرامری، باید «چرا (Why)» ها و «چگونگی (How)» ها را بیان کنیم و نباید بگوییم این قطعه کد چه کار می کند، چون آن عملیاتی که کد قرار است انجام دهد خودش باید از کدی که نوشته ایم به وضوح قابل درک و دریافت باشد. البته اگه اینطور هم عمل نکنیم مشکلی پیش نمیاد تنها ایرادش اینه که از فلسفه کاربرد توضیحات فاصله گرفتیم. بنابراین اگر بخواهیم برای قطعه کد جاوا اسکریپت بالا توضیحات درج کنیم نمونه توضیحات اشتباه و نمونه توضیحات صحیح می تواند به صورت زیر باشد:

• نمونه توضیحات اشتباه:

    
     //logging something on the console       
     console.log('Hello World');
 

• نمونه توضیحات صحیح:

         
      //This is my first javascript code             
      console.log('Hello World');  
 

در مقاله بعدی دوره آموزش جاوا اسکریپت برای مبتدی ها، به موضوع زیر خواهیم پرداخت :

• اصل SOC و جداسازی کدها