Lesson 2 / الدرس 2

Running JavaScript, three ways / تشغيل JavaScript بثلاث طرق

Nothing to install. The console for trying one line, a script tag for a page, and a file for anything real — plus the one command that shows you what a program is thinking.

لا شيء يُثبَّت. السجل لتجربة سطر، ووسم script لصفحة، وملف لأي شيء حقيقي — وأمر واحد يريك ما يفكر فيه البرنامج.

1. THE CONSOLE  — one line, right now
   Open developer tools, Console tab, type:  2 + 2

2. IN A PAGE — at the end of the body
   <script>
     console.log('hello');
   </script>

3. FROM A FILE — how a real project does it
   <script src="app.js"></script>

Use the first for trying an idea, the third for anything you keep. The second is what the exercises in this course use, because the editor beside these lessons is one page.

console.log is how you see inside

let price = 20;
let quantity = 3;
console.log(price, quantity);        <- what are they right now?
let total = price * quantity;
console.log('total is', total);      <- and now?

A program is invisible while it runs. console.log is the window into it, and printing a value at the moment you are unsure is the single most useful debugging technique there is — more useful, for a beginner, than any tool. Run the demonstration.

والبرنامج خفي وهو يعمل. وconsole.log هو النافذة إليه، وطباعة قيمة في اللحظة التي لست واثقًا فيها أنفع أسلوب لتتبّع الأعطال على الإطلاق — أنفع لمبتدئ من أي أداة. شغّل العرض.

Comments, and why they are for later you

Anything after // on a line is ignored by JavaScript, and /* … */ spans several lines. Use them to say why, not what: // add the tax beside a line that obviously adds tax is noise, while // tax is 14% here, not 15% — the client is registered in a free zone is the thing nobody can reconstruct later.

وكل ما بعد // في سطر تتجاهله JavaScript، و/* … */ يمتد على أسطر. استخدمها لقول لماذا لا ماذا: فـ// أضف الضريبة بجانب سطر يضيف الضريبة بوضوح ضجيج، بينما // الضريبة 14% هنا لا 15% — العميل مسجّل في منطقة حرة هي الشيء الذي لا يستطيع أحد إعادة بنائه لاحقًا.

والنص في <head> يعمل قبل وجود الصفحة، فكل ما يحاول إيجاده فيها ليس موجودًا بعد — وهذا أشيع خطأ أول في JavaScript وينتج رسالة "null" محيّرة. ضع نصك في آخر المتن، أو استخدم سمة defer من الدرس 15 في دورة الويب، فتختفي المشكلة تمامًا.

One more thing to know exists before you meet it by accident: JavaScript files can be strict about certain mistakes, and modern code usually is. You do not need to do anything about this yet — it is mentioned only so that the phrase "strict mode" is not a surprise when you read it somewhere.

Try it live / جرّب بنفسك

<h1>My first script</h1>
<p id="answer"></p>

<script>
  let price = 0;
  console.log('price is', price);

  document.getElementById('answer').textContent = '…';
</script>

Preview / المعاينة

Check yourself / اختبر نفسك

1. What is console.log for?

ما وظيفة console.log؟

2. Why does a script in the <head> often fail?

لماذا يفشل نص في <head> غالبًا؟

3. What should a comment say?

Your task / مهمتك

Write a small script that works out something real — the total cost of a few items, how many days until a date, anything with two or three steps. Use console.log at every step so the working is visible, and also write the answer onto the page. Then deliberately move the script into the <head>, show the error you get, and explain it.

اكتب نصًا صغيرًا يحسب شيئًا حقيقيًا — تكلفة بضعة أصناف، أو كم يومًا حتى تاريخ، أو أي شيء بخطوتين أو ثلاث. واستخدم console.log في كل خطوة ليكون العمل مرئيًا، واكتب الجواب على الصفحة أيضًا. ثم انقل النص عمدًا إلى <head>، وأظهر الخطأ الذي تحصل عليه، واشرحه.

A script that computes something with two or more steps نص يحسب شيئًا بخطوتين أو أكثر
console.log at each step, with the output shown console.log عند كل خطوة، والمخرَج معروض
The answer written onto the page as well الجواب مكتوب على الصفحة أيضًا
The head error reproduced and explained خطأ الرأس مُعاد إنتاجه ومشروح