🍿 CornPop

JS Hello World

4 min read

في البداية، إحنا اتفقنا إننا هنكتب كود الـ JavaScript في ملف خارجي بامتداد .js ونربطه بملف الـ HTML. الـ “Script” ده ممكن يتربط في أي مكان: في الـ head أو في أول الـ body أو في آخره. لكن أفضل مكان نحط فيه الـ “Link” بتاع الـ “Script” هو آخر سطر في الـ body وهنفهم ليه بالتفصيل قدام.

Displaying Output in JavaScript

أول حاجة بنتعلمها في أي لغة برمجة هي إزاي نطبع جملة “Hello World”. في الـ JavaScript عندنا أكتر من طريقة:

1. The window.alert() Method

في الـ JavaScript عندنا حاجة اسمها window وده “Object” بيمثل الـ “Browser”. أي حاجة بنحتاجها من المتصفح بنستخدم الـ window. الـ “Browser” عنده وظيفة اسمها alert بتطلع “Box” فيه رسالة تحذير أو تنبيه لليوزر.

// Display an alert message
window.alert("Hello JavaScript");
  • ممكن تستخدم “Double Quotes” "" أو “Single Quotes” '' والاتنين صح.
  • الـ alert دايمًا ليه أولوية في الظهور، حتى لو كاتب كود قبله، هو اللي بيظهر الأول لأنه “Blocking action”.

2. The innerHTML Property

دي طريقة تانية بنعرض بيها البيانات جوه الـ HTML نفسه. لو عندنا عنصر في الـ HTML واخد “ID” معين، نقدر نوصله ونغير المحتوى اللي جواه.

HTML:

<h1 id="demo"></h1>

JavaScript:

// Target element by ID and change its content
document.getElementById("demo").innerHTML = "Hello JavaScript";
  • الـ document بتمثل كود الـ HTML بتاعك. أي تعامل مع الـ “Elements” بيكون من خلالها.
  • الـ getElementById بتدور على العنصر اللي واخد “ID” محدد.
  • الـ innerHTML بتدخل جوه العنصر (بين فتحة التاج وقفلته) وتكتب الكلام اللي إنت عايزه.

Why Use JavaScript to Write HTML?

ممكن حد يسأل: “ليه اللفة دي كلها؟ ما أنا ممكن أكتب الكلمة علطول في الـ HTML؟“. الإجابة هي إننا بنعمل صفحات “Dynamic”. زمان كانت الصفحات “Static” (ثابتة)، لكن دلوقتي الداتا بتجيلنا من “Database” أو “API”.

تخيل لو عندك موقع إخباري، الأخبار دي متخزنة في قاعدة بيانات. الـ JavaScript بيستلم الداتا دي (زي ما بنشوف في الـ JSON اللي جاي من الـ API) وهو اللي بيحقنها “Inject” في الـ HTML. إنت كمبرمج مش هتكتب 3000 خبر بإيدك، الـ JavaScript هو اللي هيعمل ده بالنيابة عنك.

The Developer Console

الـ “Console” هو دراعك اليمين كمطور JavaScript. بتفتحه بـ F12 أو “Inspect” وبعدين تختار “Console”.

في الـ “Console” بنشوف حاجات كتير:

  1. الـ Messages: رسايل إحنا بنطبعها لنفسنا.
  2. الـ Errors: لو الكود فيه مشكلة، الـ “Console” بيقولك السطر كام وإيه نوع الغلط.
  3. الـ Warnings: تحذيرات (مش غلط يوقف الكود، بس تنبيه إن فيه حاجة مش مظبوطة زي مسار صورة غلط).

Example: Handling Errors

لو حاولت تغير innerHTML لعنصر مش موجود (غلطت في الـ ID مثلاً)، الـ “Console” هيطلعلك رسالة: Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

ده معناه إن الـ JavaScript راح يدور على الـ “ID” مالقاش حاجة (رجع null) فبالتالي مش عارف يغير المحتوى بتاعه. اتعلم دايمًا تقرأ الـ “Error” لأنه هو اللي هيوصلك للحل.

Why Put Scripts at the Bottom of Body?

الـ “Browser” بيقرأ ملف الـ HTML سطر بسطر من فوق لتحت.

graph TD
    A[Start Parsing HTML] --> B[Read Head]
    B --> C{Found Script in Head?}
    C -- Yes --> D[Execute Script Immediately]
    D --> E[Error: Element not found yet]
    C -- No --> F[Read Body Elements]
    F --> G[Execute Script at Bottom]
    G --> H[Success: Elements are loaded]
  1. الـ DOM Readiness: لو حطيت الـ “Script” فوق، الـ JavaScript هيتنفذ قبل ما الـ “Browser” يشوف الـ HTML اللي تحت، فلو الكود بيعدل في عنصر، هيطلع “Error” لإنه لسه مشافش العنصر ده.
  2. الـ Performance: ملفات الـ JS ممكن تكون تقيلة وبتاخد وقت في التحميل. لو حطيتها فوق، الصفحة هتفضل بيضا لحد ما الـ “Script” يحمل. لكن لما تحطها تحت، الـ HTML والـ CSS بيظهروا لليوزر الأول وبعدين الـ JS يشتغل في الخلفية.
  3. الـ SEO: محركات البحث بتفضل إن محتوى الصفحة يظهر بسرعة.

Debugging with console.log()

أخر طريقة لعرض البيانات هي الـ console.log(). دي مش بتظهر لليوزر العادي، دي لينا إحنا كـ “Developers”.

// Log data to the console for debugging
console.log("Hello Console");

بنستخدمها لما نكون بنعمل عمليات حسابية أو بنجيب داتا من الـ “Database” وعايزين نتأكد إن الداتا واصلة صح قبل ما نعرضها في الـ HTML. هي أداة تجريبية مش أكتر.

Notes

  • الـ window هو الـ “Global Object”، يعني ممكن تكتب alert() مباشرة وهتشتغل عادي لأن الـ “Browser” بيفهم إنها تابعة للـ window.
  • الـ innerHTML مش بس بتكتب نصوص، دي ممكن تكتب “HTML Tags” كاملة (زي <div> أو <span>) جوه العنصر.
  • الـ Advanced Topics: مع التطور، بقا فيه “Attributes” زي defer و async بتتحط في تاج الـ script عشان تسمح لنا نحط الكود في الـ head من غير ما يعطل تحميل الصفحة أو يسبب مشاكل مع الـ DOM، ودي حاجة متقدمة بنستخدمها في المشاريع الكبيرة.

Graph View

Backlinks