Table of Contents

فصل پنجم

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

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

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

Web Development TrioHTMLStructureساختارCSSStyleظاهرJavaScriptInteractivityتعاملHTML پایه+CSS ظاهر+JS = وب پویا

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

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

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

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

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

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

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

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

یک مثال ساده

بیایید تئوری را با یک مثال اساسی برای نشان دادن نقش جاوا اسکریپت عملی کنیم. ما یک دکمه HTML، CSS و جاوا اسکریپت ایجاد می کنیم:

<!-- HTML --> <button type="button">User 1: iMan</button>  /* CSS */ button {   background-color: #4CAF50;   color: white;   padding: 15px 32px;   text-align: center;   display: inline-block;   font-size: 16px;   margin: 4px 2px;   cursor: pointer; }  // JavaScript (script.js) document.querySelector("button").addEventListener("click", function() {   alert("Button was clicked!"); });

برای گنجاندن جاوا اسکریپت در سند HTML خود، می توانید از تگ <script> استفاده کنید:

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

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

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

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

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

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

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

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

<!DOCTYPE html> <html> <head><title>Internal JavaScript</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>External JavaScript</title></head> <body>   <h1>Willkommen</h1>   <script src="script.js" defer></script> </body> </html>

مزایای کد خارجی: قابلیت نگهداری، حافظه پنهان مرورگر، قابلیت استفاده مجدد.

معایب کد خارجی: درخواست HTTP اضافی، وابستگی به ترتیب بارگذاری.

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

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

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

<button onclick="alert('Hello, world!')">Click Me!</button>

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

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

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

<button id="clickMeButton">Click Me!</button> <script>   document.getElementById('clickMeButton').addEventListener('click', function() {     alert('Button clicked!');   }); </script>

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

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

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

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

۱. بارگیری همزمان (Standard Script Tag):

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

۲. بارگیری ناهمزمان (async): اسکریپت به محض دانلود اجرا می شود.

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

۳. بارگذاری معوق (defer): اسکریپت پس از تجزیه سند اما قبل از DOMContentLoaded اجرا می شود.

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

۴. بارگذاری اسکریپت پویا (Dynamic Loading): با استفاده از جاوا اسکریپت به صورت پویا.

let script = document.createElement('script'); script.src = "script.js"; document.head.appendChild(script);

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

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

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

نظرات در جاوا اسکریپت حاشیه نویسی در کد هستند که توسط مفسر نادیده گرفته می شوند. آنها برای توسعه دهندگان طراحی شده اند تا یادداشت ها یا توضیحاتی را در کد بنویسند تا درک آن آسان تر شود.

نظرات تک خطی

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

// This is a single-line comment console.log("Hello, world!"); // This is also a comment

نظرات چند خطی

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

/* 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 won't run while commented out"); console.log("This will run as normal");

بهترین توصیه‌ها: نظراتی واضح بنویسید که "چرا" را توضیح دهند. نظرات را به روز نگه دارید. از اظهار نظر بیش از حد خودداری کنید. از نظرات برای مستندسازی توابع و ماژول‌ها استفاده کنید.

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

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

// Step 1: This runs first document.getElementById("output").innerHTML += "<p>Step 1: Initialized.</p>";  // Step 2: Simulate an async task with setTimeout setTimeout(function () {   document.getElementById("output").innerHTML += "<p>Step 3: Async task completed.</p>"; }, 2000); // Waits 2 seconds  // Step 3: This runs before the setTimeout callback document.getElementById("output").innerHTML += "<p>Step 2: Running while waiting.</p>";

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

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

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

کد سمت کلاینت کدی است که بر روی رایانه کاربر اجرا می شود — وقتی یک صفحه وب مشاهده می شود، کد سمت مشتری آن صفحه دانلود می شود و توسط مرورگر نمایش داده می شود. کد سمت سرور بر روی سرور اجرا می شود. نمونه هایی از زبان های محبوب وب سمت سرور عبارتند از PHP، Python، Ruby، ASP.NET و حتی جاوا اسکریپت (Node.js).

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

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

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

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

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

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

APIهای مرورگر: در مرورگر وب شما تعبیه شده اند:

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

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

  • Twitter API: توییت ها را نمایش می دهد.
  • Google Maps 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ها در توسعه وب مدرن ضروری هستند و به عنوان بلوک های سازنده ای عمل می کنند که به توسعه دهندگان اجازه می‌دهند برنامه های کاربردی پویا و تعاملی بسازند.

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

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

  • دستکاری DOM: محتوا، ساختار و سبک ها را به صورت پویا تغییر می دهد.
  • مدیریت رویدادهای کاربر: به کلیک، حرکت ماوس، فشار کلید گوش می دهد.
  • اعتبار سنجی فرم ها: اعتبارسنجی سمت سرویس گیرنده قبل از ارسال به سرور.
  • متحرک سازی عناصر: انیمیشن هایی مانند اسلایدها، محو شدن یا حرکات.
  • درخواست های ناهمزمان: با AJAX و Fetch API داده ها را بدون بارگیری مجدد صفحه درخواست می کند.
  • ذخیره سازی داده ها: با Web Storage API داده ها در رایانه مشتری ذخیره می کند.
  • ایجاد SPA: ستون فقرات Single Page Applications.

جاوا اسکریپت می‌تواند:

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

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

نکات کلیدی / Key Takeaways

  • جاوا اسکریپت زبان تعامل در وب است — HTML (ساختار) + CSS (ظاهر) + JS (تعامل)
  • addEventListener() بهترین روش برای مدیریت رویدادها — نه inline handlers
  • defer برای اکثر اسکریپت‌ها، async برای اسکریپت‌های مستقل
  • Comments: // تک خطی, /* */ چند خطی
  • جاوا اسکریپت تفسیر شده، سمت کلاینت (و با Node.js سمت سرور)
  • API های مرورگر (DOM, Geolocation, Canvas) و API های شخص ثالث (Maps, Twitter)