آموزش جاوااسکریپت مقدماتی

جاوااسکریپت دقیقا برای چه کاری است؟

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

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

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

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

کد را کجا بنویسیم و چطور به صفحه وصلش کنیم؟

در یک فایل جدا با پسوند .js، و با یک خط در head به صفحه وصلش می کنید:

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

آن کلمه defer مهم ترین چیزی است که در این بخش یاد می گیرید. یعنی فایل را همزمان با خواندن HTML دانلود کن، ولی اجرایش را بگذار برای وقتی که کل صفحه ساخته شد. بدون آن، اسکریپتی که در head نشسته قبل از وجود داشتن عنصرها اجرا می شود و هر تلاشی برای پیدا کردن یک دکمه، null برمی گرداند. رایج ترین «چرا کار نمی کند» تازه کارها همین است و جوابش یک کلمه است.

ابزار دومتان کنسول مرورگر است. با F12 بازش کنید و باز نگهش دارید: هر خطای جاوااسکریپت با شماره خط همان جا چاپ می شود و console.log هم هر چیزی را که بخواهید همان جا نشانتان می دهد. تا وقتی کنسول را باز نکرده اید، دارید در تاریکی کد می زنید.

const title = document.querySelector("h1");
console.log(title.textContent);

و متغیرها: const بنویسید مگر بدانید مقدار باید عوض شود، آن وقت let. کلمه var از دوره قبل جاوااسکریپت مانده و در کد جدید دلیلی برای نوشتنش ندارید.

DOM چیست و چرا همه چیز از آن شروع می شود؟

مرورگر وقتی HTML شما را می خواند، از رویش یک درخت از اشیا در حافظه می سازد. اسم آن درخت DOM است و جاوااسکریپت با همان کار می کند، نه با فایل شما. برای همین وقتی چیزی را با کد عوض می کنید، صفحه فورا تغییر می کند و فایل روی دیسک دست نخورده می ماند؛ یک refresh همه چیز را برمی گرداند.

پیدا کردن یک عنصر یک تابع دارد و همان یکی کافی است. document.querySelector همان انتخابگرهای CSS را می گیرد:

const btn  = document.querySelector(".btn");
const rows = document.querySelectorAll(".row");

بعد از پیدا کردن، سه کار روزمره دارید. متن را با textContent عوض می کنید، کلاس را با classList اضافه و کم می کنید، و ویژگی ها را با setAttribute.

btn.textContent = "ذخیره شد";
btn.classList.add("is-done");

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

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

رویداد: وقتی کاربر کاری می کند

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

btn.addEventListener("click", function () {
  console.log("someone pressed it");
});

یک مثال کامل که واقعا کار می کند و در HTML و CSS شدنی نیست: شمارنده کاراکتر زیر یک فیلد متنی.

<label for="msg">متن پیام</label>
<textarea id="msg" maxlength="200"></textarea>
<p id="left">200</p>

const box  = document.querySelector("#msg");
const left = document.querySelector("#left");

box.addEventListener("input", function () {
  left.textContent = 200 - box.value.length;
});

پنج خط، و چند نکته که در پنج خط جا شده اند. رویداد input را انتخاب کرده ایم نه keyup، چون keyup فقط کیبورد را می شنود و چسباندن متن با ماوس یا با موبایل را از دست می دهد. value محتوای فعلی فیلد است و length طولش. و maxlength روی خود تگ کار محدود کردن را می کند؛ جاوااسکریپت فقط دارد عدد را نشان می دهد.

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

form.addEventListener("submit", function (event) {
  event.preventDefault();
});

شکل بعدی همین چرخه را قدم به قدم نشان می دهد. چیزی که در آن اهمیت دارد قدم آخر است: شما DOM را عوض می کنید و کشیدن دوباره صفحه کار مرورگر است، نه کار شما.

fetch: گرفتن داده بدون بارگذاری دوباره صفحه

تا اینجا هر چه بود داخل خود صفحه اتفاق می افتاد. fetch جایی است که صفحه با بیرون حرف می زند: یک آدرس را صدا می زنید، سرور جواب می دهد، و شما جواب را روی صفحه می گذارید. بدون اینکه صفحه دوباره بارگذاری شود.

async function loadPrice() {
  const res  = await fetch("/api/price.json");
  const data = await res.json();
  document.querySelector("#price").textContent = data.toman;
}

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

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

چقدر جاوااسکریپت واقعا لازم دارید؟

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

• باز و بسته شدن یک بخش با details و summary، بدون یک خط کد
• اعتبارسنجی اولیه فرم با required و type="email" روی خود فیلد
• بارگذاری تنبل تصویرها با loading="lazy"
• پنجره مودال با تگ dialog
• واکنش به حالت عنصر با hover و focus-visible و has در CSS
• اسلایدر افقی با scroll-snap، که با انگشت هم درست کار می کند

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

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

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