تعلم جافاسكريبت للمبتدئين

لماذا نستعمل جافاسكريبت أصلا؟

لما يحدث بعد أن تُفتح الصفحة. جافاسكريبت هي اللغة الوحيدة التي ينفذها كل متصفح أصلا، ومهمتها أن تحيي الصفحة التي بناها 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، وجافاسكريبت تعمل عليها لا على ملفك. ولهذا حين تغيّر شيئا بالشفرة تتغير الصفحة فورا ويبقى الملف على القرص كما هو؛ وإعادة تحميل واحدة تعيد كل شيء.

والعثور على عنصر يحتاج دالة واحدة، وواحدة تكفي. فـ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 فقط.