جاوا اسکریپت چیست؟ — به زبان ساده

۲۶۳ بازدید
آخرین به‌روزرسانی: ۱۷ اردیبهشت ۱۴۰۱
زمان مطالعه: ۱۵ دقیقه
جاوا اسکریپت چیست؟ — به زبان ساده

در این مقاله از یک منظر سطح بالا به بررسی جاوا اسکریپت می‌پردازیم و به سؤالاتی مانند زیر پاسخ می‌دهیم. جاوا اسکریپت چیست؟ با آن چه می‌توان کرد؟ و هدف از آن چیست؟ پیش‌نیازهای این مقاله آموزشی، دارا بودن سواد ابتدایی از رایانه و درکی مقدماتی از HTML و CSS است. هدف این نوشته آشنا کردن شما با ماهیت جاوا اسکریپت، کارهایی که می‌توان با آن کرد و چگونگی به‌کارگیری آن در یک وب‌سایت است.

تعریف سطح بالا

جاوا اسکریپت یک زبان اسکریپت‌نویسی یا برنامه‌نویسی است که امکان پیاده‌سازی چیزهای پیچیده را روی صفحات وب ممکن ساخته است. درواقع هر بار که یک صفحه وب، کاری بیش از لود شدن و نمایش اطلاعات استاتیک انجام می‌دهد و به اجرای کارهایی مانند به‌روزرسانی‌های مداوم سر زمان مقرر، ارائه نقشه‌های تعاملی، گرافیک 2 و 3 بعدی متحرک، فریم‌های پخش ویدئو و مواردی از این دست می‌پردازد، می‌توانید مطمئن باشید که از جاوا اسکریپت استفاده شده است. جاوا اسکریپت در لایه سوم از مجموعه لایه‌های فناوری وب قرار می‌گیرد که دو مورد دیگر HTML و CSS هستند.

JavaScript

  • HTML یک «زبان نشانه‌گذاری» (markup language) است که برای سازمان‌دهی استفاده می‌شود و به محتوای وب معنی می‌بخشد. برای نمونه به تعریف پاراگراف‌ها، عناوین و جدول داده یا جایگذاری تصاویر و ویدئوها در صفحه می‌پردازد.
  • CSS یک زبان سبک‌بندی است که از آن برای اعمال سبک‌بندی‌های مختلف روی محتوای HTML خود استفاده می‌کنیم. برای نمونه تعیین رنگ پس‌زمینه و فونت‌ها و طرح‌بندی محتوا در ستون‌های چندگانه به وسیله CSS صورت می‌پذیرد.
  • جاوا اسکریپت یک زبان اسکریپت‌نویسی است که امکان ایجاد محتوایی با به‌روزرسانی پویا، کنترل چندرسانه‌ای، متحرک‌سازی تصاویر، و تقریباً هر گونه کار دیگری را فراهم می‌سازد. شاید همه چیز کمی اغراق باشد؛ اما با چند خط کد جاوا اسکریپت می‌توان واقعاً کارهای خارق‌العاده‌ای در صفحه‌های وب صورت داد.

این سه لایه به خوبی روی هم قرار می‌گیرند. به عنوان نمونه یک برچسب متنی ساده را در نظر بگیرید. می‌توان آن را با استفاده از HTML نشانه‌گذاری کرد و ساختار و منظور آن را تعریف نمود:

<p>Player 1: Chris</p>

سپس می‌توانیم قدری CSS به آن اضافه کنیم تا ظاهر بهتری پیدا کند.

p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

و در نهایت می‌توانیم با کمی کدنویسی جاوا اسکریپت رفتار دینامیکی برای آن پیاده‌سازی کنیم:

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

دموی این آموزش را می‌توانید در این ریپو گیت‌هاب (+) ملاحظه کنید و روی این صفحه (+) به طور زنده آن را اجرا کنید. تلاش کنید روی آخرین نسخه از برچسب متنی کلیک کنید تا ببینید چه می‌شود. جاوا اسکریپت می‌تواند کارهای بسیار بیشتری انجام دهد که در ادامه بیشتر آن‌ها را بررسی می‌کنیم.

جاوا اسکریپت واقعاً چه می‌تواند بکند؟

زبان جاوا اسکریپت شامل چند ویژگی مشترک برنامه‌نویسی است که امکان اجرای کارهای زیر را فراهم ساخته است:

  • ذخیره‌سازی مقادیر مفید درون متغیرها. برای نمونه در مثال فوق ما یک نام جدید را می‌پرسیم تا کاربر وارد کند و سپس آن نام را در متغیری به نام name ذخیره می‌کنیم.
  • عملیات روی بخش‌های مختلف متن که در برنامه‌نویسی، «رشته» (String) نامیده می‌شوند. در مثال فوق رشته « :Player 1» را انتخاب کرده و آن را با متغیر name ترکیب می‌کنیم تا یک برچسب متنی کامل مانند «Player 1: Chris» ایجاد شود.
  • اجرای کد در پاسخ به رویدادهای خاصی که روی صفحه وب رخ می‌دهند. ما از رویداد کلیک در مثال فوق برای تشخیص این که چه زمانی دکمه کلیک شده استفاده کردیم. سپس کدی را برای به‌روزرسانی برچسب متنی نوشته‌ایم.
  • و موارد بسیار بیشتر دیگر.

با این حال کارکردهایی که بر روی این ویژگی‌های ابتدایی زبان برنامه‌نویسی جاوا اسکریپت ساخته می‌شوند بسیار هیچان انگیزتر هستند. API-ها به معنی «رابط‌های برنامه‌نویسی اپلیکیشن» (Application Programming Interfaces) توانایی‌های کدهای جاوا اسکریپت را تا حدود زیادی افزایش می‌دهند.

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

API-ها به طور کلی در دو دسته قرار می‌گیرند:

API-های مرورگر که درون مرورگر وب قرار دارند و می‌توانند داده‌ها را از محیط پیرامونی رایانه گردآوری کنند یا کارهای مفیدی مانند زیر انجام دهند:

  • API DOM که اختصاری برای عبارت «مدل شیء سند» (Document Object Model) است، امکان دستکاری HTML و CSS، ایجاد، حذف و تغییر HTML و به‌کارگیری سبک‌های جدید روی صفحه به صورت پویا و مواردی از این دست را فراهم ساخته است. هر بار که یک پنجره باز شونده را روی صفحه وب می‌بینید یا محتوای جدیدی را روی یک صفحه وب شاهد هستید، در واقع DOM این کار را می‌کند.
  • Geolocation API اطلاعات جغرافیایی را بازیابی می‌کند. برای نمونه سرویس نقشه گوگل به همین ترتیب می‌تواند مکان شما را تشخیص داده و روی نقشه نمایش دهد.
  • API-های Canvas و WebGL امکان ایجاد گرافیک‌های 2 و 3 بعدی متحرک را فراهم می‌سازند. از این فناوری‌ها برای انجام کارهای جالبی استفاده می‌شود.
  • API-های Audio و Video مانند HTMLMediaElement و WebRTC امکان انجام کارهای واقعاً جالبی با فایل‌های چندرسانه‌ای مانند پخش صدا و ویدئو در یک صفحه وب یا دریافت تصاویر از دوربین وب و نمایش آن را روی رایانه فرد دیگر را فراهم می‌کنند.

API-های شخص ثالث به طور پیش‌فرض درون مرورگر قرار ندارند و به طور کلی باید کد و اطلاعات آن‌ها را از فرد دیگری روی وب دریافت کنید. برای نمونه:

  • Twitter API امکان کارهایی مانند نمایش توییت‌های جدید روی وب‌سایت را فراهم ساخته است.
  • Google Maps API امکان جایگذاری نقشه‌های سفارشی درون وب‌سایت‌ها و دیگر کارکردهای از این دست را فراهم ساخته است.

API-های بسیار زیاد دیگری نیز وجود دارند؛ اما باید بدانید که صرفاً با مطالعه این راهنمای جاوا اسکریپت نمی‌توانید یک فیسبوک، یا نقشه گوگل یا اینستاگرام بسازید و موارد مقدماتی بسیار زیاد دیگری وجود دارند که باید مطالعه کنید. بنابراین در ادامه این نوشته با ما همراه باشید.

جاوا اسکریپت روی یک صفحه وب چه کارهایی انجام می‌دهد؟

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

در این بخش به اختصار بررسی می‌کنیم که وقتی یک صفحه وب روی مرورگر شما بارگذاری‌ می شود، در عمل چه اتفاقاتی رخ می‌دهد. زمانی که یک صفحه وب را در مرورگر خود لود می‌کنید، در واقع کد آن شامل HTML، CSS و جاوا اسکریپت را درون یک محیط اجرایی که برگه مرورگر است اجرا می‌کنید. این وضعیت شبیه کارخانه‌ای است که مواد خام (کد) وارد آن شده و محصول (صفحه وب) از آن خارج می‌شود.

کد جاوا اسکریپت پس از این که HTML و CSS مونتاژ شدند و کنار هم در صفحه وب قرار گرفتند، از سوی موتور جاوا اسکریپت مرورگر اجرا می‌شود. بدین ترتیب تضمین می‌شود که وقتی کد جاوا اسکریپت شروع به اجرا می‌کند، قبلاً ساختار و سبک صفحه بارگذاری شده است.

این وضعیت مناسبی است، زیرا استفاده رایج جاوا اسکریپت برای اصلاح دینامیک کدهای HTML و CSS جهت به‌روزرسانی رابط کاربری از طرق API مدل شیء سند است. اگر جاوا اسکریپت پیش از HTML و CSS لود شده و تلاش شود اجرا گردد، در این صورت خطاهایی بروز می‌یابد.

امنیت مرورگر

هر برگه مرورگر یک محیط مجزا برای اجرا کد است. این محیط‌ها به نام «محیط‌های اجرا» (execution environments) نامیده می‌شوند. این بدان معنی است که در اغلب موارد کدی که در یک برگه اجرا می‌شود کاملاً مستقل است و این کد نمی‌تواند در کد برگه دیگر مرورگر یا وب‌سایت دیگر تغییری ایجاد کند. این یک معیار امنیتی خوب است و اگر چنین امکانی وجود نمی‌داشت، سارقان می‌توانستند کدی بنویسند که اطلاعات را از وب‌سایت‌های دیگر سرقت کند و یا کارهای خرابکارانه دیگر انجام دهد.

ترتیب اجرایی جاوا اسکریپت

زمانی که مرورگر با یک بلوک کد جاوا اسکریپت مواجه می‌شود، به طور عمومی آن را از بالا به سمت پایین اجرا می‌کند. این بدان معنی است که باید مراقب باشید تا کدها را به ترتیب بنویسید. برای نمونه اگر به نمونه کد جاوا اسکریپت قبلی خود در مثال اول بازگردیم:

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

می‌بینیم که در این بخش یک پاراگراف متنی در خط 1 انتخاب شده و سپس تلاش می‌شود تا یک «شنونده رویداد» (event listener) در خط 3 به آن الحاق شود. بدین ترتیب وقتی روی پاراگراف کلیک کنیم، بلوک کد ()updateName یعنی خطوط 5 تا 8 اجرا می‌شود. به این نوع از بلوک‌های کد که قابلیت استفاده مجدد دارند تابع گفته می‌شود. بلوک کد ()updateName از کاربر می‌خواهد که نام جدیدی وارد کند و سپس آن را درون پاراگراف قرار داده و برای نمایش به‌روزرسانی می‌کند.

اگر ترتیب دو خط اول کد را با هم عوض کنیم، این کد دیگر کار نخواهد کرد و با خطایی مواجه می‌شویم که در کنسول توسعه‌دهنده مرورگر قابل مشاهده است:

TypeError: para is undefined

این بدان معنی است که شیء para هنوز وجود ندارد و از این رو نمی‌توان آن را به شنونده رویداد اضافه کرد. این خطای کاملاً رایجی است و باید مواظب باشید که شیءهای ارجاع شده در کد پیش از این که تلاش کنید از آن‌ها استفاده کنید وجود داشته باشند.

کد تفسیری در برابر کد کامپایل شونده

ممکن است با واژه‌های تفسیر شونده (interpreted) یا کامپایل شونده (compiled) در چارچوب برنامه‌نویسی مواجه شده باشید. در زبان‌های تفسیری، کد از بالا به پایین اجرا می‌شود و سپس نتیجه اجرای کد بی‌درنگ بازگشت می‌یابد. لازم نیست که کد پیش از اجرا از سوی مرورگر به چیز دیگری تبدیل شود.

از سوی دیگر زبان‌های کامپایل شونده پیش از آن که روی رایانه اجرا شوند، به شکل دیگری تبدیل (کامپایل) می‌شوند. برای نمونه ++C/C به زبان اسمبلی کامپایل می‌شوند که توسط رایانه اجرا می‌شود. جاوا اسکریپت یک زبان برنامه‌نویسی تفسیر شونده سبُک است. هر دو رویکرد فوق مزیت‌های مختلفی دارند و بحث در مورد آن‌ها موضوع این نوشته نیست.

کد سمت سرور در برابر کد سمت کلاینت

احتمالاً با عبارت‌های سمت سرور (server-side) و سمت کلاینت (client-side) به خصوص در زمینه توسعه وب آشنا هستید. کد سمت کلاینت کدی است که روی رایانه کاربر و هنگام بازدید از یک صفحه وب اجرا می‌شود. کد سمت کلاینت در هنگام بازدید کاربر روی رایانه وی دانلود و سپس اجرا شده و توسط مرورگر نمایش می‌یابد. در این نوشته ما به طور خاص در مورد جاوا اسکریپت سمت کلاینت صحبت خواهیم کرد.

در سوی دیگر کد سمت سرور چنان که از نامش بر می‌آید، روی سرور اجرا می‌شود و سپس نتایج آن در مرورگر دانلود شده و مورد اجرا قرار می‌گیرد. نمونه‌ای از زبان‌های وب سمت سرور شامل PHP، پایتون، روبی، ASP.NET و البته جاوا اسکریپت هستند. جاوا اسکریپت می‌تواند به عنوان یک زبان سمت سرور و برای نمونه در محیط محبوبی به نام Node.js اجرا شود.

کد دینامیک در برابر کد استاتیک

کلمه دینامیک برای توصیف هر دو زبان سمت سرور و سمت کلاینت جاوا اسکریپت استفاده می‌شود و به توانایی آن برای به‌روزرسانی یک صفحه وب یا وب اپلیکیشن برای نمایش چیزهای مختلف در شرایط متفاوت و ایجاد محتوای مورد نظر بنا به ضرورت اشاره دارد. کد سمت سرور به طور دینامیک محتوای جدیدی را مثلا از طریق دریافت داده‌ها از پایگاه داده روی سرور ارائه می‌کند، در حالی که کد جاوا اسکریپت در سمت کلاینت، به طور دینامیک محتوای جدیدی را درون مرورگر برای کاربر نمایش می‌دهد. برای مثال یک جدول جدید HTML ایجاد کرده و آن را با داده‌های دریافتی از سوی سرور پر می‌کند و سپس آن را در یک صفحه وب برای کاربر نمایش می‌دهد. بنابراین معنای این عبارت در این دو زمینه مختلف تا حدودی متفاوت است؛ اما بی ارتباط با هم نیز نیستند و هر دو رویکرد (سمت سرور و سمت کلاینت) معمولاً با هم کار می‌کنند.

یک صفحه وب که محتوای خود را به طور دینامیک به‌روزرسانی نکند، به نام صفحه استاتیک نامیده می‌شود و در هر زمان تنها محتوای ثابتی را نمایش می‌دهد.

چگونه جاوا اسکریپت را به صفحه وب اضافه کنیم؟

جاوا اسکریپت به روشی مشابه CSS به صفحه HTML اضافه می‌شود. با این که CSS از عنصرهای <link> برای به‌کارگیری استایل‌شیت‌های خارجی و از عنصرهای <style> برای اعمال استایل‌شیت‌های داخلی روی کد HTML استفاده می‌کند؛ اما جاوا اسکریپت تنها به یک روش یعنی با استفاده از تگ <script> روی کد HTML پیاده‌سازی می‌شود. در ادامه در مورد روش کار آن صحبت خواهیم کرد.

جاوا اسکریپت داخلی

پیش از هر چیز باید یک کپی محلی از فایل مثال به نام apply-javascript.html ایجاد کنید. آن را درون یک دایرکتوری مناسب در رایانه خود ذخیره کنید. فایل را در مرورگر وب خود و همچنین در یک ویرایشگر متنی باز کنید. می‌بینید که HTML یک صفحه وب ساده شامل یک دکمه قابل کلیک می‌سازد. سپس به نرم‌افزار ویرایشگر متنی خود رفته و کد زیر را در بخش head و درست پیش از تگ بستن <head/> وارد کنید:

<script>

// JavaScript goes here

</script>

اینک کد جاوا اسکریپت را درون عنصر <script> اضافه می‌کنیم تا صفحه ما حالت جذاب‌تری بیابد. کد زیر را درست زیر خط «JavaScript goes here//» اضافه کنید:

document.addEventListener("DOMContentLoaded", function() {
  function createParagraph() {
    let para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for(let i = 0; i < buttons.length ; i++) {
    buttons[i].addEventListener('click', createParagraph);
  }
});

فایل خود را ذخیره کرده و مرورگر را رفرش کنید. اینک شاهد هستیم که وقتی روی دکمه کلیک می‌کنیم یک پاراگراف جدید ایجاد شده و نمایش می‌یابد.

اگر کد شما کار نکرد باید به ابتدای مراحل رفته و همه موارد را بررسی کنید. آیا یک کپی محلی از فایل html. ایجاد کرده‌اید؟ آیا عنصر <script> را درست پیش از تگ <head/> وارد کرده‌اید؟ آیا کد جاوا اسکریپت را به درستی اضافه کرده‌اید؟ جاوا اسکریپت به حروف کوچک و بزرگ حساس است و باید ساختار کد را دقیقاً همان طور که آمده است وارد کنید، چون در غیر این صورت کار نمی‌کند. نسخه جدید مثال را می‌توانید در این صفحه گیت‌هاب (+) و فایل اجرایی آن را در این صفحه (+) مشاهده کنید.

جاوا اسکریپت خارجی

مثال قبلی ما به خوبی کار می‌کند؛ اما اگر بخواهیم کد جاوا اسکریپت خود را در فایل جداگانه‌ای قرار دهیم چطور؟ این وضعیت را در ادامه بررسی می‌کنیم. ابتدا یک فایل جدید در همان دایرکتوری که فایل HTML مثالمان قرار دارد، ایجاد کنید. نام آن را script.js تعیین کنید و مطمئن شوید که دارای پسوند js. است تا سیستم بتواند آن را به عنوان یک فایل جاوا اسکریپت تشخیص دهد. عنصر <script> کنونی را با عبارت زیر عوض کنید:

<script src="script.js" async></script>

درون فایل script.js، اسکریپت زیر را وارد کنید:

function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

const buttons = document.querySelectorAll('button');

for(let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

فایل را ذخیره کرده و مرورگر خود را رفرش کنید. در این هنگام شاهد همان کارکرد قبلی خواهید بود. این کد دقیقاً همانند کد قبل کار می‌کند؛ اما اینک کد جاوا اسکریپت در یک فایل خارجی قرار دارد. این رویه به منظور سازمان‌دهی کد و تنظیم آن با قابلیت استفاده مجدد در فایل‌های HTML مختلف، بسیار مناسب است. به علاوه بدین ترتیب خواندن فایل HTML بدون حجم بالایی از اسکریپت که درون آن وارد شده است، آسان‌تر می‌شود.

کد این نسخه از مثال را در این صفحه (+) و فایل اجرایی را در این لینک (+) می‌توانید مشاهده کنید.

دستگیره‌های درون‌خطی (Inline Handlers) جاوا اسکریپت

در برخی موارد با برخی کدهای جاوا اسکریپت مواجه می‌شوید که درون کدهای HTML قرار دارند. این کدها مانند زیر هستند:

function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}
<button onclick="createParagraph()">Click me!</button>

این وضعیت نیز دقیقاً همان کارکردی که دو بخش قبلی ارائه می‌کردند، در اختیار ما قرار می‌دهد؛ به جز این که عنصر <button> این بار شامل یک دستگیره (handler) درون‌خطی به نام onclick است که باعث می‌شود وقتی دکمه کلیک می‌شود ، تابع مربوط اجرا شود.

با این حال بهتر است از این رویه برنامه‌نویسی اجتناب کنید. این یک رویه نامناسب است و باعث آلودگی HTML به کدهای جاوا اسکریپت می‌شود و کارایی لازم را ندارد. شما باید خصوصیت "()onclick="createParagraph را هر بار که می‌خواهید کد جاوا اسکریپت را روی دکمه‌ای اعمال کنید قید نمایید.

استفاده از سازه‌های جاوا اسکریپت محض، امکان انتخاب همه دکمه‌ها با استفاده یک دستور را در اختیار ما قرار می‌دهد. کدی که در بخش فوق استفاده کردیم، به این روش به صورت زیر درمی‌آید:

const buttons = document.querySelectorAll('button');

for(let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

این وضعت ممکن است کمی طولانی‌تر از خصوصیت onclick باشد؛ اما روی همه دکمه‌ها کار می‌کند و مهم نیست که چند دکمه روی صفحه وجود داشته باشد و یا چه تعداد حذف یا اضافه شوند. در هر صورت نیازی به تغییر دادن کد جاوا اسکریپت وجود ندارد.

تلاش کنید کد نسخه apply-javascript.html را ویرایش کرده و چند دکمه به فایل اضافه کنید. وقتی که صفحه را مجدداً بارگذاری می‌کنید، خواهید دید که همه دکمه‌ها در هنگام کلیک شدن یک پاراگراف ایجاد می‌کنند.

راهبردهای بارگذاری اسکریپت

چند مشکل در زمینه بارگذاری به‌هنگام اسکریپت‌ها وجود دارند و مصداق این ضرب‌المثل است که هیچ چیز به آن سادگی که به نظر می‌رسد نیست. یک مشکل رایج زمانی است که همه کد HTML روی یک صفحه به ترتیبی که به نظر می‌رسد، بارگذاری می‌شود. اگر از کد جاوا اسکریپت برای دستکاری عناصر روی صفحه (یا به عبارت دقیق‌تر مدل شیء سند) استفاده کنید، در صورتی که جاوا اسکریپت پیش از HTML که قرار است روی آن کار کند، بارگذاری شده باشد، کد جاوا اسکریپت عمل نخواهد کرد.

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

document.addEventListener("DOMContentLoaded", function() {
...
});

این یک «شنونده رویداد» (event listener) است که منتظر شنیدن رویداد «DOMContentLoaded» است. رویداد فوق نشان می‌دهد که متن HTML صفحه بارگذاری و تحلیل شده است. کد جاوا اسکریپت درون این بلوک تا زمانی که این رویداد رخ ندهد، اجرا نخواهد شد و به این ترتیب از بروز خطا جلوگیری می‌شود.

در مثال خارجی صفحه وب از یک ویژگی مدرن‌تر جاوا اسکریپت برای حل مسئله استفاده کرده‌ایم که خصوصیت async است و به مرورگر می‌گوید که هنگامی که به تگ <script> رسید، اقدام به دانلود کردن محتوای HTML بکند.

<script src="script.js" async></script>

در این حالت هم اسکریپت و هم HTML به طور همزمان بارگذاری می‌شوند و کد کار می‌کند.

دقت کنید که در مثال کد خارجی، لازم نیست از رویداد DOMContentLoaded استفاده کنیم، چون رویداد دارای خصوصیت async است که مشکل را برای ما حل می‌کند. ما از راه‌حل async برای نمونه داخلی استفاده نکردیم، زیرا async تنها در اسکریپت‌های خارجی کاربرد دارد.

یک راه‌حل به سبک قدیمی برای این مسئله که پیش‌تر غالباً استفاده می‌شد، این است که عنصر script در بخش انتهایی body یعنی پیش از تگ بسته شدن <body/> قرار می‌گیرد. بدین ترتیب پس از این که همه کد HTML تحلیل شود بارگذاری خواهد شد. مشکل این راه‌حل آن است که بارگذاری/تحلیل اسکریپت تا زمانی که HTML DOM به طور کامل بارگذاری نشده است، متوقف خواهد شد. در سایت‌های بزرگ‌تر که کدهای جاوا اسکریپت زیادی دارند، این امر موجب می‌شود که مشکلات جدی عملکردی بروز یابند و سایت کُند شود. به همین دلیل خصوصیت async به مرورگرها اضافه شده است.

async و defer

دو روش برای دور زدن مشکل مسدود شدن اسکریپت وجود دارد که async و defer نام دارند. در ادامه تفاوت‌های این دو روش را بررسی می‌کنیم.

در روش Async اسکریپت بدون مسدودسازی رندر شدن صفحه بارگذاری می‌شود و به محض این که دانلود اسکریپت پایان یابد اجرا خواهد شد. در این روش تضمینی نیست که اسکریپت با ترتیب خاصی اجرا شود و تنها مطمئن هستیم که موجب متوقف شدن نمایش بخش‌های دیگر صفحه نمی‌شود. بهتر است زمانی از async استفاده شود که اسکریپت‌های یک صفحه به طور مستقل از هم اجرا می‌شوند و هیچ وابستگی به هم ندارند.

برای نمونه اگر عناصر اسکریپت زیر را در یک صفحه داشته باشیم:

<script async src="js/vendor/jquery.js"></script>

<script async src="js/script2.js"></script>

<script async src="js/script3.js"></script>

نمی‌توانیم روی ترتیب بارگذاری اسکریپت‌ها تکیه کنیم. jquery.js ممکن است پیش یا پس از script2.js و script3.js بارگذاری شود و در این صوت هر تابعی که در آن اسکریپت‌ها به jquery وابسته باشد، خطایی ایجاد خواهد کرد، زیرا jquery در زمان اجرای اسکریپت هنوز تعریف نشده است.

Defer باعث می‌شود که اسکریپت‌ها به همان ترتیبی که در صفحه ظاهر می‌شوند اجرا شوند و به محض این که اسکریپت و محتوا دانلود شوند، شروع به اجرای آن می‌کند.

<script defer src="js/vendor/jquery.js"></script>

<script defer src="js/script2.js"></script>

<script defer src="js/script3.js"></script>

همه اسکریپت‌های دارای خصوصیت defer به همان ترتیبی که روی صفحه ظاهر شده‌اند، بارگذاری می‌شوند. بدین ترتیب در مثال دوم می‌توانیم مطمئن باشیم که jquery.js پیش از script2.js و script3.js و script2.js پیش از script3.js بارگذاری خواهد شد.

اگر بخواهیم جمع‌بندی بکنیم:

  • اگر اسکریپت‌ها مستقل از هم اجرا می‌شوند و هیچ وابستگی به هم ندارند، می‌توان از async استفاده کرد.
  • اگر اسکریپت‌ها به همدیگر وابسته هستند آن‌ها را با استفاده از defer بارگذاری کنید و عنصر <script> پیرامون آن‌ها را به همان ترتیبی که می‌خواهید مرورگر اجرا کند، در صفحه وب درج کنید.

توضیحات کد (Comments)

برای کدهای جاوا اسکریپت نیز همانند HTML و CSS می‌توان توضیح یا کامنت نوشت که مرورگر آن‌ها را اجرا نمی‌کند و صرفاً به منظور توضیح کارکرد دستورها برای توسعه‌دهندگان (و همچنین خودتان در صورتی که پس از چند ماه به کد مراجعه کردید و به خاطر نیاوردید که متدها چه کار می‌کنند) کاربرد دارد. کامنت ها بسیار مفید هستند و باید از آن‌ها همیشه و به طور خاص در اپلیکیشن‌های بزرگ استفاده کرد. دو نوع کامنت وجود دارد:

کامنت در یک خط منفرد که پس از دو علامت ممیز (//) به صورت زیر درج می‌شود:

// I am a comment

یک کامنت چند خطی که بین دو رشته /* و */ مانند زیر درج می‌شود:

/*

I am also

a comment

*/

برای نمونه آخرین دموی کد جاوا اسکریپت ما با درج کامنت به شکل زیر درمی‌آید:

// Function: creates a new paragraph and append it to the bottom of the HTML body.

function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

/*
  1. Get references to all the buttons on the page in an array format.
  2. Loop through all the buttons and add a click event listener to each one.

  When any button is pressed, the createParagraph() function will be run.
*/

const buttons = document.querySelectorAll('button');

for (let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

سخن پایانی

بدین ترتیب به پایان این نوشته با موضوع معرفی مقدماتی جاوا اسکریپت می‌رسیم. در این مقاله با برخی توضیحات تئوریک آغاز کردیم و به توصیف اهمیت جاوا اسکریپت و دلیل استفاده از آن و نوع کارهایی که با آن می‌توان انجام داد پرداختیم. در این مسیر با برخی نمونه‌های کد جاوا اسکریپت آشنا شدیم و شیوه قرارگیری جاوا اسکریپت در کنار کدهای دیگر وب‌سایت را مشاهده کردیم.

کدهای جاوا اسکریپتی که در این نوشته استفاده کردیم تا حدودی خسته‌کننده بودند و کار خاصی انجام نمی‌دادند؛ اما اگر کمی بیشتر با آن آشنا شوید، می‌توانید کارهای بسیار بیشتری به وسیله آن انجام دهید.

اگر این مطلب برایتان مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۱۰ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
developer.mozilla
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *