فصل پنجم

گام های اول جاوا اسکریپت: راهنمای مقدماتی

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

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

جاوا اسکریپت چیست؟

جاوا اسکریپت یک زبان برنامه نویسی قدرتمند و سطح بالا است که عمدتاً برای توسعه وب استفاده می شود. این امکان را به شما می دهد تا ویژگی های پیچیده ای را در صفحات وب پیاده سازی کنید، از جمله نقشه های تعاملی، گرافیک های متحرک 2D/3D، اسکرول جوک باکس های ویدیویی و موارد دیگر. جاوا اسکریپت که در اصل برای زنده کردن صفحات وب طراحی شده بود، فراتر از ریشه های مبتنی بر مرورگر خود رشد کرده و تبدیل به یک زبان همه کاره شده است که در طیف وسیعی از محیط ها استفاده می شود.

کد جاوا اسکریپت شامل عبارات و دستورالعمل هایی است که به صورت سینتکس نوشته شده اند که موتور جاوا اسکریپت در مرورگر می تواند آن ها را تفسیر و اجرا کند. می توان آن را مستقیماً در صفحات HTML جاسازی کرد یا به عنوان فایل های جداگانه پیوند داد. یک مثال ساده جاوا اسکریپت ممکن است وقتی کاربر روی دکمه ای کلیک می کند، متن یک عنصر HTML را تغییر دهد.

نقش جاوا اسکریپت در توسعه وب

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

قبل از فرو رفتن در جاوا اسکریپت، باید با HTML و CSS راحت باشید، زیرا این فناوری‌ها از نزدیک با هم کار می‌کنند. آشنایی با موضوعات زیر باعث می شود تجربه یادگیری روان تری داشته باشید:

    • ساختار اساسی و عناصر اسناد HTML.
    • یک ظاهر طراحی با CSS، از جمله انتخابگرها، ویژگی‌ها و تکنیک‌های طرح‌بندی.

اگر با این مفاهیم تازه کار هستید، ماژول های ما در HTML و CSS را مجدداً بررسی کنید تا یک پایه محکم بسازید.


یک مثال ساده

بیایید تئوری را با یک مثال اساسی برای نشان دادن نقش جاوا اسکریپت عملی کنیم, من از ویرایشگر زیر به صورت آنلاین استفاده می کنم:

https://playcode.io/javascript
    1. ابتدا اجازه دهید فایل index.html خود را آماده کنیم.

<!DOCTYPE html>

<html lang=”en-US”>

 <head>

   <meta charset=”utf-8″ />

   <meta name=”viewport” content=”width=device-width” />

   <title>JavaScript label example</title>

   <link rel=”stylesheet” href=”src/style.css” />

 </head>

 <body>

 </body>

</html>

    1. ساختار HTML: یک دکمه ساده ایجاد کنید.

<button type=”button”>User 1: iMan</button>

    1. حالا کد زیر را در فایل style.css اضافه کنید.

 button {

 background-color: #4CAF50;

 color: white;

 padding: 15px 32px;

 text-align: center;

 display: inline-block;

 font-size: 16px;

 margin: 4px 2px;

 cursor: pointer;

}

    1. تعامل جاوا اسکریپت: کاری کنید که دکمه هنگام کلیک کردن، یک هشدار نمایش دهد. حالا کد جاوا اسکریپت زیر را در فایل های script.js اضافه کنید:

document.querySelector(“button”).addEventListener(“click”, function() {

 alert(“Button was clicked!”);

});

برای گنجاندن جاوا اسکریپت در سند HTML خود، می توانید از تگ <script> استفاده کنید. جاوا اسکریپت می تواند مستقیماً در فایل HTML شما (جاوا اسکریپت درون خطی) گنجانده شود یا به عنوان یک فایل خارجی برای سازماندهی کد پاک تر پیوند داده شود. در اینجا نحوه پیوند دادن یک فایل جاوا اسکریپت خارجی آورده شده است, کافی است که کد زیر را در متن فایل index.html خود اضافه کنید:

<script src=”src/script.js” defer></script>

ویژگی defer تضمین می کند که اسکریپت پس از تجزیه سند اجرا می شود و از خطاهای احتمالی ناشی از تلاش برای دستکاری عناصری که هنوز بارگذاری نشده اند جلوگیری می کند.

حالا با کلیک بر روی دکمه با پیغام زیر مواجه می شوید:

کد بالا چگونه کار می کند؟

    • HTML یک دکمه در صفحه تعریف می کند.
    • CSS از یک استایل طراحی استفاده می کند تا دکمه را از نظر بصری جذاب کند.
    • جاوا اسکریپت به یک رویداد کلیک روی دکمه گوش می دهد و هنگامی که رویداد رخ می دهد یک گفتگوی هشدار ایجاد می کند.

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

در توسعه وب، دو رویکرد اساسی برای ادغام جاوا اسکریپت در یک وب سایت وجود دارد: داخلی و خارجی. هر دو روش موارد استفاده خاص، مزایا و معایب خود را دارند. در اینجا خلاصه ای برای روشن شدن تفاوت ها و کاربردهای کد جاوا اسکریپت داخلی و خارجی آورده شده است:

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

تعریف: کد جاوا اسکریپت داخلی یا جاسازی شده مستقیماً در فایل HTML درون تگ های <script> نوشته می شود. این رویکرد معمولاً برای اسکریپت های کوچکتر یا کدهای جاوا اسکریپت که مختص یک صفحه است استفاده می شود.

<!DOCTYPE html>

<html>

<head>

   <title>Beispiel für internen JavaScript-Code</title>

</head>

<body>

   <h1>Willkommen</h1>

   <script>

       document.querySelector(‘h1’).textContent = ‘Hallo, Welt!’;

   </script>

</body>

</html>

مزایای کد داخلی:

    • سادگی: برای توابع کوچکتر جاوا اسکریپت یا زمانی که کد به طور محکم به نشانه گذاری یک صفحه خاص مرتبط است.
    • نمونه سازی سریع: برای آزمایش سریع و نمونه سازی ویژگی ها خوب است.

معایب کد داخلی:

    • تعمیر و نگهداری: ممکن است گیج کننده باشد، به خصوص با کدهای بزرگ.
    • قابلیت استفاده مجدد: کد را نمی توان به راحتی در صفحات دیگر استفاده مجدد کرد.
    • سرعت بارگذاری: اگر بلوک اسکریپت بزرگ باشد و قبل از بارگیری صفحه اجرا شود، ممکن است بر سرعت بارگذاری صفحه تأثیر بگذارد.

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

تعریف: کد خارجی جاوا اسکریپت در فایل های .js جداگانه ذخیره می شود و از طریق ویژگی src تگ <script> در صفحه HTML گنجانده می شود. این رویکرد برای برنامه های بزرگتر ایده آل است، اجازه استفاده مجدد از کد را می دهد و به ساختار و سازماندهی بهتر کد کمک می کند.

<!DOCTYPE html>

<html>

<head>

   <title>Beispiel für externen JavaScript-Code</title>

</head>

<body>

   <h1>Willkommen</h1>

   <script src=”script.js” defer></script>

</body>

</html>

در فایل script.js:

document.querySelector(‘h1’).textContent = ‘Hallo, Welt!’;

مزایای کد خارجی:

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

معایب کد خارجی:

    • درخواست HTTP اضافی: هر فایل خارجی به درخواست HTTP خود نیاز دارد، که در صورت نیاز به بارگیری بسیاری از اسکریپت های خارجی، می تواند بر زمان بارگذاری تأثیر بگذارد.
    • وابستگی به ترتیب: ترتیب بارگذاری اسکریپت ها می تواند مهم باشد، به خصوص زمانی که اسکریپت ها به یکدیگر وابسته باشند.

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

کنترل کننده های درون خطی جاوا اسکریپت – Inline Javascript

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

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

<button onclick=”alert(‘Hello, world!’)”>Click Me!</button>

در این مثال، ویژگی onclick در تگ <button> به عنوان کنترل کننده رویداد درون خطی استفاده می شود. هنگامی که دکمه کلیک می شود، کد جاوا اسکریپت در ویژگی onclick attribute اجرا می شود و یک جعبه هشدار را به کاربر نمایش می دهد.

onclick (alert(‘Hello, world!’))

!Best Practices!

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

<button id=”myButton”>Click Me!</button>

<script>

   document.getElementById(‘myButton’).addEventListener(‘click’, function() {

       alert(‘Hello, world!’);

   });

</script>

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

addEventListener به عنوان جایگزینی برای کنترل کننده های جاوا اسکریپت درون خطی

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

چرا addEventListener ترجیح داده می شود؟

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

نمونه ای از استفاده از addEventListener

در اینجا یک مثال ساده آورده شده است که نحوه استفاده از addEventListener را برای پیوست کردن رویداد کلیک به یک دکمه نشان می دهد:

<button id=”clickMeButton”>Click Me!</button>

<script>

   document.getElementById(‘clickMeButton’).addEventListener(‘click’, function() {

       alert(‘Button clicked!’);

   });

</script>

در این مثال، جاوا اسکریپت به طور کامل از ساختار HTML جدا شده است. شنونده رویداد با شناسه clickMeButton به دکمه متصل می شود و وقتی دکمه کلیک می شود، یک جعبه هشدار ظاهر می شود. این روش تمیزتر و قابل نگهداری تر است، به خصوص با افزایش پیچیدگی تعاملات.

استفاده از addEventListener برای مدیریت رویدادها در جاوا اسکریپت نه تنها توصیه می شود، بلکه سنگ بنای شیوه های مدرن و حرفه ای توسعه وب در نظر گرفته می شود. مزایای قابل توجهی از نظر قابلیت نگهداری، مقیاس پذیری و عملکرد نسبت به کنترل کننده های رویداد درون خطی ارائه می دهد. اتخاذ این رویکرد در مراحل اولیه توسعه می‌تواند به کد پاک‌تر، اشکال‌زدایی آسان‌تر و پایه‌ای بهتر برای رشد پروژه‌های شما منجر شود.

استراتژی های بارگذاری اسکریپت و بهترین روش

در توسعه وب، بارگیری و اجرای موثر جاوا اسکریپت برای بهینه سازی عملکرد و افزایش تجربه کاربر بسیار مهم است. استراتژی‌های بارگذاری اسکریپت مختلفی را می‌توان به کار گرفت که هر کدام دارای مزایا و موارد استفاده مناسب هستند. در اینجا یک مرور کلی از استراتژی های بارگذاری اسکریپت اولیه و بحثی در مورد بهترین شیوه ها وجود دارد.

1. بارگیری همزمان (برچسب اسکریپت استاندارد) / (Synchronous Loading (Standard Script Tag

به طور سنتی، اسکریپت ها به طور همزمان با استفاده از تگ <script> قرار داده شده در <head> یا <body> سند HTML بارگذاری می شوند.

<script src=”script.js”></script>

2. بارگیری ناهمزمان (ویژگی ناهمگام) / (Asynchronous Loading (async Attribute

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

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

3. بارگذاری معوق (به تعویق انداختن ویژگی) / Defer

ویژگی defer به مرورگر می گوید که اسکریپت را پس از تجزیه سند اما قبل از اجرای رویداد DOMContentLoaded اجرا کند. این راهی است برای اطمینان از اینکه اسکریپت تجزیه سند را مسدود نمی کند و در عین حال نظم اجرا را حفظ می کند.

<script defer src=”script.js”></script>

4. بارگذاری اسکریپت پویا – Dynamic Loading

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

let script = document.createElement(‘script’);

script.src = “script.js”;

document.head.appendChild(script);

بهترین روش بارگذاری اسکریپت – Best Practices

استراتژی “بهترین” به نیازها و محدودیت های خاص شما بستگی دارد. با این حال، ترکیبی از بهترین شیوه ها می تواند به عملکرد مطلوب منجر شود:

    • استفاده از defer به صورت پیش فرض: برای اکثر اسکریپت ها، به ویژه آنهایی که نیاز به تعامل یا تغییر DOM دارند، استفاده از defer تضمین می کند که اسکریپت ها تجزیه کننده HTML را مسدود نمی کنند و پس از تجزیه سند به ترتیب صحیح اجرا می شوند.
    • Reserve async برای اسکریپت‌های مستقل: برای اسکریپت‌هایی که کاملاً مستقل هستند – آنهایی که به آمادگی DOM یا سایر اسکریپت‌ها متکی نیستند – همگام‌سازی می‌تواند یک راه عالی برای کاهش زمان بارگذاری درک‌شده باشد.
    • بارگذاری پویا / dynamic اسکریپت ها در صورت لزوم: برای اسکریپت هایی که باید بر اساس تعامل کاربر یا سایر شرایط زمان اجرا بارگذاری شوند، بارگذاری پویا انعطاف لازم را ارائه می دهد.
    • به حداقل رساندن اسکریپت های درون خطی: اگرچه گاهی اوقات برای تعاملات سریع یا تزریق داده های اولیه ضروری است، استفاده از اسکریپت های درون خطی را به حداقل برسانید. برای تعاملات اساسی تر، به اسکریپت های خارجی با defer پیوند دهید.
    • اتخاذ این شیوه‌ها به حفظ تعادل بین بهینه‌سازی عملکرد و الزامات عملکردی کمک می‌کند و منجر به صفحات وب سریع‌تر و پاسخگوتر می‌شود.

نظرات (توضیحات) در جاوا اسکریپت – Comments

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

نظرات تک خطی

نظرات تک خطی با // شروع می شود. همه چیزهای زیر // در همان خط به عنوان یک نظر در نظر گرفته می شود و در هنگام اجرای کد نادیده گرفته می شود.

// This is a single-line comment

console.log(“Hello, world!”); // This is also a comment, after code on the same line

نظرات تک خطی معمولاً برای توضیحات کوتاه یا حاشیه نویسی در کد استفاده می شود.

نظرات چند خطی

نظرات چند خطی یا بلوکی با /* شروع و با */ ختم می شود. هر چیزی بین این دو نشانگر، صرف نظر از اینکه چند خط را در بر می گیرد، یک نظر در نظر گرفته می شود.

/*

 This is a multi-line comment.

 It can span over multiple lines.

*/

console.log(“Hello, world!”);

/* Block comments are also useful

for temporarily disabling parts

of your code */

// console.log(“This line of code is now a comment and won’t execute.”);

نظرات چند خطی برای توضیحات طولانی‌تر، کامنت گذاشتن بلوک‌های بزرگ کد در طول آزمایش یا اشکال‌زدایی، یا برای اهداف مستندسازی مفید هستند.

بهترین توصیه ها برای استفاده از نظرات:

    • وضوح: نظراتی واضح و مختصر بنویسید که “چرا” پشت منطق پیچیده را به جای “چی” توضیح دهد. خود کد باید توضیحی برای “چه” باشد.
    • تعمیر و نگهداری: نظرات را با تغییر کد به روز نگه دارید. نظرات منسوخ شده می توانند بیشتر از عدم اظهار نظر گمراه کننده باشند.
    • استفاده کم: اظهار نظر بیش از حد می تواند کد را به هم ریخته و خواندن آن را سخت تر کند. فقط در صورت لزوم برای توضیح منطق پیچیده، فرضیات یا تصمیمات مهم اظهار نظر کنید.
    • اجتناب از نظرات واضح: در مورد چیزی که قبلاً از کد مشخص است نظر ندهید. به عنوان مثال، از نظراتی مانند //افزایش i توسط 1 در کنار i++ اجتناب کنید.
    • مستندسازی: از نظرات برای ارائه مستندات برای توابع، کلاس‌ها و ماژول‌ها استفاده کنید. توضیح دهید که آنها چه کاری انجام می دهند، پارامترهای آنها و آنچه که آنها برمی گردند. این می تواند به ویژه در پروژه های بزرگ یا هنگام استفاده از ابزارهایی که اسناد را از نظرات ایجاد می کنند مفید باشد.

غیرفعال کردن کد برای اشکال زدایی

نظرات را می توان به سرعت اضافه یا حذف کرد تا بخش هایی از کد را برای اهداف آزمایش و اشکال زدایی فعال یا غیرفعال کند. این یک مورد استفاده رایج در توسعه است:

// console.log(“This won’t run while commented out”);

console.log(“This will run as normal”);

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

کدهای جاوا اسکریپت به چه ترتیبی اجرا می شوند؟

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

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

// Step 1: این خط ابتدا اجرا می شود

document.getElementById(“output”).innerHTML += “<p>Step 1: Initialized.</p>”;

// Step 2: یک کار (به عنوان مثال، فچ  داده) را با setTimeout شبیه سازی کنید

setTimeout(function () {

 document.getElementById(“output”).innerHTML += “<p>Step 3: Completed asynchronous task.</p>”;

}, 2000); // Waits 2 seconds before executing

// Step 3:این خط به دلیل ماهیت ناهمزمان آن قبل از فراخوانی setTimeout اجرا می شود.

document.getElementById(“output”).innerHTML += “<p>Step 2: Executed while waiting for a task to finish.</p>”;

در این مثال:

    1. اسکریپت ابتدا می نویسد “Step 1: Initialized”. به سند این بلافاصله زمانی که مرورگر جاوا اسکریپت را پردازش می کند، اتفاق می افتد.
    1. سپس، setTimeout برای شبیه‌سازی یک عملیات ناهمزمان، مانند فچ  داده‌ها از یک منبع خارجی، استفاده می‌شود. این عملیات قرار است پس از 2 ثانیه عملکرد بازگشت به تماس خود را اجرا کند، اما مرورگر قبل از رفتن به خطوط بعدی کد منتظر نمی ماند تا کامل شود. در عوض، کار را زمان بندی می کند و به اجرای کد بعدی ادامه می دهد.
    1. سپس اسکریپت می‌نویسد «مرحله 2: اجرا در حالی که منتظر پایان کار است». به سند اگرچه این خط بعد از setTimeout می‌آید، اما قبل از فراخوانی setTimeout اجرا می‌شود زیرا مرورگر رشته اصلی در انتظار setTimeout را مسدود نمی‌کند.
    1. پس از ۲ ثانیه، تابع callback setTimeout اجرا می‌شود و عبارت «Step 3: Completed task asynchronous» را می‌نویسد. به سند این نشان می‌دهد که چگونه عملیات ناهمزمان جاوا اسکریپت را می‌توان با یک ترتیب شروع کرد اما به ترتیبی دیگر کامل شد، بر اساس مدت زمان عملیات ناهمزمان.

این مثال به وضوح اجرای متوالی جاوا اسکریپت و نحوه رسیدگی به تماس‌های ناهمزمان را نشان می‌دهد و بینشی در مورد مدل اجرای جاوا اسکریپت در مرورگر ارائه می‌دهد.

کد تفسیر شده در مقابل کد کامپایل شده / Interpreted versus compiled code

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

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

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

هر دو نوع زبان مزایایی دارند، اما ما در حال حاضر در مورد آنها صحبت نمی کنیم.

کد سمت سرور Server-side در مقابل کد سمت سرویس گیرنده client-side 

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

از طرف دیگر کد سمت سرور بر روی سرور اجرا می شود، سپس نتایج آن دانلود و در مرورگر نمایش داده می شود. نمونه هایی از زبان های محبوب وب سمت سرور عبارتند از PHP، Python، Ruby، ASP.NET و حتی جاوا اسکریپت! جاوا اسکریپت همچنین می تواند به عنوان یک زبان سمت سرور استفاده شود، به عنوان مثال در محیط محبوب Node.js – می توانید در مورد جاوا اسکریپت سمت سرور در وب سایت های پویا – مبحث برنامه نویسی سمت سرور اطلاعات بیشتری کسب کنید.

کد پویا Dynamic در مقابل استاتیک Static

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

چرا API ها در جاوا اسکریپت مهم هستند؟

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

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

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

    1. عملکرد پیشرفته: APIها قابلیت‌های جاوا اسکریپت را گسترش می‌دهند و به آن اجازه می‌دهند بیشتر از آنچه می‌تواند به تنهایی انجام دهد. به عنوان مثال، جاوا اسکریپت می تواند محتوای صفحه وب را از طریق API Document Object Model یا DOM دستکاری کند، به ورودی های کاربر پاسخ دهد و حتی چند رسانه ای را کنترل کند.
    1. کارایی: توسعه‌دهندگان می‌توانند به‌جای کدنویسی عملیات پیچیده از ابتدا از APIها برای پیاده‌سازی سریع عملکرد، صرفه‌جویی در زمان و کاهش خطاها استفاده کنند. این اجازه می دهد تا تمرکز بیشتری بر ایجاد یک تجربه کاربری بهتر به جای پرداختن به جزئیات دقیق پیاده سازی شود.
    1. یکپارچه‌سازی: APIها به برنامه‌های جاوا اسکریپت اجازه می‌دهند با سرویس‌های خارجی و منابع داده به طور یکپارچه تعامل داشته باشند. این برای ساخت برنامه‌های کاربردی وب مدرن که بر داده‌های بلادرنگ تکیه می‌کنند، مانند فید رسانه‌های اجتماعی، نقشه‌ها یا داده‌های مالی بسیار مهم است.

دسته بندی API ها در جاوا اسکریپت

API های جاوا اسکریپت به طور کلی به دو دسته تقسیم می شوند: API های مرورگر و API های شخص ثالث.

APIهای مرورگر در مرورگر وب شما تعبیه شده اند و دسترسی به عملکردهای خاص مرورگر را فراهم می کنند. مثالها عبارتند از:

    • DOM API: HTML و CSS را دستکاری می کند و محتوا و سبک را به صورت پویا تغییر می دهد.
    • Geolocation API: موقعیت جغرافیایی را بازیابی می کند و خدمات مبتنی بر مکان را فعال می کند.
    • Canvas و WebGL API: گرافیک و انیمیشن ایجاد کنید و جذابیت بصری برنامه های وب را افزایش دهید.
    • APIهای صوتی و تصویری: مدیریت چند رسانه ای، امکان ادغام صدا و تصویر در صفحات وب را فراهم می کند.

API های شخص ثالث توسط سرویس های خارجی ارائه می شوند و باید در برنامه های شما ادغام شوند. مثالها عبارتند از:

    • Twitter API: توییت ها را نمایش می دهد یا با سرویس های توییتر تعامل دارد.
    • Google Maps API: نقشه ها و خدمات مکان را در صفحات وب شما جاسازی می کند.

این APIها به میزان قابل توجهی آنچه را که می توانید با جاوا اسکریپت به دست آورید افزایش می دهند و دنیایی از امکانات را برای برنامه های کاربردی وب تعاملی و پویا باز می کنند.

استفاده عملی از API ها در جاوا اسکریپت

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

fetch(‘https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=New York’)

 .then(response => response.json())

 .then(data => {

   document.getElementById(‘weather’).textContent = `The current temperature in New York is ${data.current.temp_c}°C`;

 });

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

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

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

جاوا اسکریپت چه کاری می تواند انجام دهد؟

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

کدهای HTML، CSS و جاوا اسکریپت برای ایجاد محتوا در برگه مرورگر هنگام بارگذاری صفحه با هم ترکیب می شوند. یک استفاده بسیار رایج از جاوا اسکریپت، تغییر پویا HTML و CSS برای به روز رسانی یک رابط کاربری، از طریق Document Object Model API است (همانطور که در بالا ذکر شد). توجه داشته باشید که کد موجود در اسناد وب شما معمولاً به ترتیبی که در صفحه ظاهر می شود بارگیری و اجرا می شود. اگر جاوا اسکریپت قبل از HTML و CSS که قرار است اصلاح شود، بارگیری و اجرا شود، ممکن است خطاهایی رخ دهد. در ادامه مقاله، در بخش استراتژی‌های بارگذاری اسکریپت، راه‌هایی برای رفع این مشکل خواهید آموخت.

جاوا اسکریپت صفحه وب شما را با معرفی تعاملی، به روز رسانی محتوای پویا و تجربیات کاربری پیشرفته که تنها با HTML و CSS قابل دستیابی نیستند، غنی می کند. هنگامی که جاوا اسکریپت در صفحه شما اجرا می شود، در اینجا نگاهی اجمالی به قابلیت ها و اقدامات آن داریم:

    • دستکاری DOM: جاوا اسکریپت به صورت پویا با Document Object Model در تعامل است و به شما امکان می دهد محتوا، ساختار و سبک ها را تغییر دهید. به عنوان مثال، می تواند عناصر و ویژگی ها را در پاسخ به اقدامات کاربر اضافه، حذف یا تغییر دهد.
    • مدیریت رویدادهای کاربر: به رویدادهای کاربر مانند کلیک، حرکت ماوس، فشار دادن کلید یا لمس گوش می دهد و به آنها پاسخ می دهد. این کار جاوا اسکریپت را قادر می سازد تا کد را در پاسخ به تعاملات کاربر اجرا کند و صفحه شما را تعاملی تر کند.
    • اعتبار سنجی فرم ها: جاوا اسکریپت اعتبار سنجی فرم سمت سرویس گیرنده را قبل از ارسال داده ها به سرور انجام می دهد. این بازخورد فوری می‌تواند تجربه کاربر را با تشخیص خطاها و درخواست اصلاحات در زمانی که کاربر فرم را پر می‌کند، افزایش دهد.
    • متحرک سازی عناصر: می تواند عناصر موجود در صفحه را متحرک کند و جلوه هایی مانند اسلایدها، محو شدن ها یا حرکات ایجاد کند. این انیمیشن ها می توانند توجه کاربران را هدایت کنند یا جذابیت بصری سایت شما را افزایش دهند.
    • ایجاد درخواست های ناهمزمان: با AJAX (جاوا اسکریپت ناهمزمان و XML) و API هایی مانند Fetch API، جاوا اسکریپت می تواند بدون بارگیری مجدد صفحه، داده ها را به صورت ناهمزمان از یک سرور درخواست کند. این در بارگذاری محتوای جدید به صورت پویا، مانند به روز رسانی فید خبری یا بارگذاری تصاویر جدید در یک گالری استفاده می شود.
    • ذخیره سازی داده ها به صورت محلی: جاوا اسکریپت می تواند از Web Storage API (localStorage و sessionStorage) برای ذخیره داده ها در رایانه مشتری استفاده کند. این می تواند تجربه کاربر را با به خاطر سپردن تنظیمات برگزیده کاربر یا ذخیره پیشرفت بازی بدون نیاز به برقراری ارتباط با سرور افزایش دهد.
    • ایجاد برنامه های کاربردی یک صفحه (SPA): این ستون فقرات SPA است که اکثر تعاملات در یک صفحه وب اتفاق می افتد. جاوا اسکریپت فچ  داده‌ها، مسیریابی و به‌روزرسانی‌های رابط کاربری را مدیریت می‌کند و تجربه‌ای روان‌تر و شبیه به برنامه را در مرورگر ارائه می‌دهد.

قابلیت های جاوا اسکریپت بسیار زیاد است و می تواند:

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

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