Link JS Code with HTML

دايماً أول حاجة بنتعلمها في أي لغة برمجة جديدة هي إحنا هنكتب الكود بتاعنا فين؟ وإزاي نربط ملف الـ JavaScript بملف الـ HTML؟ زي ما عملنا بالظبط في الـ CSS قبل كدة.

Project Setup

في البداية، هنعمل Folder جديد وليكن اسمه GS1 مثلاً، وهنفتحه باستخدام الـ Visual Studio Code. أول حاجة هنعملها هي ملف الـ HTML الأساسي بتاعنا:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Lesson 1</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

1. External JavaScript (The Best Way)

دي أفضل وأهم طريقة لكتابة الـ JavaScript، وهي إننا نعمل ملف منفصل.

هنعمل ملف جديد ونسميه main.js. (مش لازم “index” زي الـ HTML، بس أهم حاجة الـ Extension يكون .js).
هنكتب جواه سطر كود بسيط عشان نختبره:

// Show a simple alert message
window.alert("Hello JavaScript");

عشان نربط الملف ده بالـ HTML، هنستخدم الـ Script Tag جوه ملف الـ HTML:

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

بمجرد ما تفتح الـ HTML في الـ Browser، هتلاقي الـ Alert ظهرت لك، وده معناه إن الربط تم بنجاح.

2. Internal JavaScript

زي ما الـ CSS كان فيه Internal Style، الـ JavaScript كمان فيها نفس الحوار. بنستخدم الـ Script Tag بس من غير الـ src attribute، وبنكتب الكود جواه مباشرة:

<script>
    // Internal JavaScript code
    window.alert("Hello from Internal JS");
</script>

ملحوظة مهمة: الـ Internal CSS كان لازم يتحط في الـ Head، لكن الـ JavaScript ممكن تتحط في أي مكان (في الـ Head أو في الـ Body)، والـ Browser هيشغلها عادي. ومع ذلك، الطريقة دي مش Recommended ومش هنستخدمها كتير.

3. Inline JavaScript

الطريقة التالتة هي الـ Inline، ودي بنستخدمها مع الـ Event Attributes. مثلاً لو عندنا (Button) وعايزين لما نضغط عليه ينفذ كود معين:

<button onclick="window.alert('Hello JS')">Click Me!</button>

هنا استخدمنا الـ onclick attribute، وده معناه “عند الضغط”. الكود مش هيتنفذ غير لما المستخدم يضغط على الزرار فعلاً.

Separation of Concerns

أنا دايماً بقول إن لو لقيتوني بكتب لغتين في نفس الملف (زي JS جوه HTML) اعرفوا إني “عكاك”. الصح هو الـ Separation of Concerns (فصل المهام)، يعني:

ملف للـ HTML.
ملف للـ CSS.
ملف للـ JavaScript. كل واحد منفصل تماماً، وده اللي هنكمل بيه شغلنا إن شاء الله.

Why put scripts at the bottom of the Body?

فيه سؤال دايماً بيتسأل: ليه معظم الـ Scripts بتتحط في آخر الـ Body؟ الإجابة ببساطة هي عشان نضمن إن الـ HTML كُله حصل له Load الأول قبل ما الـ JavaScript تبدأ تشتغل وتدور على الـ Elements اللي هتعمل عليها Action. (هنشرح ده بالتفصيل قدام).

JavaScript Writing Methods Summary:

graph LR
    A[Methods to write JS] --> B[External]
    A --> C[Internal]
    A --> D[Inline]
    B --> B1[Separate .js file - Best Practice]
    C --> C1[Inside script tag in HTML]
    D --> D1[Inside HTML attributes like onclick]

Notes

Clarification

الـ window.alert(): دي (Function) بتخلي الـ Browser يظهر رسالة للمستخدم، وبمجرد ما تظهر، بتوقف تنفيذ أي حاجة تانية في الصفحة لحد ما المستخدم يدوس “OK”. عشان كدة بنسميها “Blocking UI”.

Advanced Topics

الـ async vs defer: لما بنربط ملف خارجي في الـ Head، ممكن نستخدم Keywords زي async أو defer. الـ defer بتخلي الـ Browser يحمل الملف في الخلفية ويشغله بس بعد ما الـ HTML يخلص تحميل بالكامل، ودا بديل عصري لفكرة وضع الـ Script في آخر الصفحة.

Relation to .NET

الـ Blazor Scripts: في الـ .NET (زي Blazor WebAssembly)، ملفات الـ JavaScript بيتم استدعاؤها غالباً في ملف الـ index.html أو App.razor.
الـ Razor Views: في الـ ASP.NET Core MVC، بنستخدم @section Scripts عشان نضمن إن الـ JavaScript بتاع صفحة معينة يتحط في المكان الصح (آخر الـ Layout) لضمان أفضل Performance.

🍿 CornPop

Explorer