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

بواسطة /



بدايتك لتعلم JavaScript

تُعد لغة JavaScript (جافا سكريبت) هي العصب الرئيسي لشبكة الإنترنت الحديثة. إذا كان HTML هو الهيكل العظمي للموقع، و CSS هو المظهر والملابس، فإن JavaScript هي “الدماغ والعضلات” التي تمنح الموقع الحياة والحركة. في هذا الدرس الموجه للمبتدئين، سنغوص في أعماق هذه اللغة لنفهم ماهيتها بالتفصيل الممل، وأين تعمل تحديداً (الفرق بين المتصفح والسيرفر)، وكيفية كتابة الأكواد بطرقها المختلفة، مع شرح دقيق لكل سطر ولكل مفهوم لضمان الفهم الكامل.



ما هي JavaScript؟ (المفهوم والأهمية)

قبل كتابة أي سطر برمجي، يجب أن نفهم طبيعة هذه اللغة. JavaScript هي لغة برمجة “عالية المستوى” (High-Level)، مما يعني أنها قريبة من لغة البشر وسهلة الفهم مقارنة بلغة الآلة (Machine Code). وهي لغة “مفسرة” (Interpreted)، أي أن المتصفح يقرأ الكود وينفذه سطراً تلو الآخر فوراً دون الحاجة لعملية تجميع (Compile) مسبقة معقدة.

دور JavaScript في تطوير الويب

  • التفاعلية (Interactivity): هي الوظيفة الأساسية. بدون JS، صفحات الويب ستكون مجرد نصوص وصور ثابتة. JS هي المسؤولة عن ما يحدث عند الضغط على زر، أو تحريك الماوس، أو إرسال نموذج، أو ظهور القوائم المنسدلة.
  • التحكم في محتوى الصفحة (DOM Manipulation): تستطيع JavaScript تغيير النصوص، الصور، والألوان في الصفحة في الوقت الفعلي (Real-time) دون الحاجة لإعادة تحميل الصفحة من جديد.
  • معالجة البيانات: تقوم بالعمليات الحسابية، التحقق من صحة البيانات التي يدخلها المستخدم في النماذج (Validation) قبل إرسالها للسيرفر.
  • العلاقة مع HTML و CSS:
    • HTML: تبني الهيكل (العظام).
    • CSS: تعطي الجمال والتنسيق (الجلد والملابس).
    • JavaScript: تعطي الحركة والمنطق والتفكير (الأعصاب والدماغ).

معلومة تاريخية هامة

تم اختراع JavaScript في عام 1995 بواسطة “برندان آيش” (Brendan Eich) في 10 أيام فقط! وكان اسمها في البداية LiveScript ثم تحولت إلى JavaScript لأسباب تسويقية (لتستفيد من شهرة لغة Java في ذلك الوقت، رغم أنهما لغتان مختلفتان تماماً مثل الفرق بين “Car” و “Carpet”). الاسم الرسمي القياسي لها الآن هو ECMAScript، وسترى إصدارات مثل ES6, ES7، وهي مجرد تحديثات وتطويرات لنفس اللغة.

اختر – الوظيفة الأساسية للغة JavaScript في صفحات الويب هي:
(أ) تحديد هيكل الصفحة وعناوينها. (ب) تلوين النصوص وتنسيق الخلفيات. (ج) إضافة التفاعلية والمنطق والتحكم في العناصر. (د) تخزين البيانات بشكل دائم في قاعدة البيانات.

الإجابة: (ج) إضافة التفاعلية والمنطق والتحكم في العناصر. (لأن الهيكل وظيفة HTML، والتنسيق وظيفة CSS).

أين تعمل JavaScript؟ (بيئة التشغيل)

من أهم مميزات JavaScript أنها لغة “متعددة البيئات”. في الماضي كانت محصورة فقط داخل المتصفحات، ولكن الوضع تغير تماماً الآن. دعونا نفصل الأماكن التي تعمل فيها وكيف يتم ذلك تقنياً.

1. العمل داخل المتصفح (Client-Side)

  • محرك JavaScript (JS Engine): كل متصفح إنترنت (مثل Google Chrome, Firefox, Edge) يحتوي على برنامج صغير ومهم جداً يسمى “المحرك” (Engine). وظيفة هذا المحرك هي قراءة كود JavaScript وفهمه وتنفيذه.
  • أشهر المحركات:
    • محرك V8: هو الأشهر على الإطلاق، ويعمل داخل متصفح Google Chrome ومتصفح Edge.
    • محرك SpiderMonkey: يعمل داخل متصفح Firefox.
    • محرك JavaScriptCore: يعمل داخل متصفح Safari.
  • ماذا تفعل في المتصفح؟ تتعامل مع واجهة المستخدم، تستجيب للنقرات، تتحقق من الإدخالات، وتجلب البيانات من السيرفر في الخلفية (AJAX).

2. العمل على السيرفر (Server-Side)

  • بيئة Node.js: في عام 2009، قام مبرمج يدعى “رايان دال” بأخذ محرك V8 (الخاص بجوجل كروم) وإخراجه من المتصفح ليعمل بشكل مستقل على نظام التشغيل (ويندوز، لينكس، ماك). هذا الابتكار سُمي Node.js.
  • ماذا يعني هذا؟ أصبح بإمكاننا كتابة كود JavaScript ليعمل على “السيرفر” (الخادم) وليس فقط عند المستخدم.
  • ماذا تفعل في السيرفر؟ تستطيع JavaScript عبر Node.js التعامل مع الملفات (قراءة وكتابة)، الاتصال بقواعد البيانات (Database)، وبناء واجهات برمجية (APIs)، تماماً مثل لغات PHP أو Python.

اختر – المحرك المسؤول عن تشغيل كود JavaScript داخل متصفح Google Chrome يسمى:
(أ) SpiderMonkey. (ب) V8 Engine. (ج) Node.js. (د) React Engine.

الإجابة: (ب) V8 Engine. (وهو المحرك الأقوى الذي بُني عليه لاحقاً نظام Node.js).

طرق كتابة الكود (داخل الصفحة – Internal)

لكي يفهم المتصفح أننا نكتب كود JavaScript وليس نصاً عادياً أو HTML، يجب أن نستخدم الوسم <script>. هناك طريقتان لكتابة الكود داخل نفس ملف HTML.

الكتابة داخل وسم Script

يمكنك وضع وسم <script> في أي مكان داخل الصفحة (في <head> أو في <body>). ولكن الممارسة الأفضل والاحترافية هي وضعه في نهاية وسم <body> قبل إغلاقه مباشرة.

لماذا في النهاية؟ لأن المتصفح يقرأ الصفحة من الأعلى إلى الأسفل. إذا وضعت الكود في الأعلى وكان حجمه كبيراً، سيتوقف المتصفح لتحميله وتنفيذه قبل أن يظهر أي شيء للمستخدم، مما يجعل الموقع يبدو بطيئاً. وضعه في الأسفل يضمن ظهور محتوى الموقع (HTML/CSS) أولاً للمستخدم، ثم تحميل البرمجيات.

مثال كود داخلي (Internal)

مثال: كود JS داخل ملف HTML

<!DOCTYPE html>
<html>
<head>
    <title>صفحة جافا سكريبت الأولى</title>
</head>
<body>

    <h1>مرحباً بكم في عالم البرمجة</h1>
    <button onclick="sayHello()">اضغط هنا</button>

    <!-- نكتب الكود هنا في النهاية -->
    <script>
        // هذا كود جافا سكريبت
        function sayHello() {
            alert("مرحباً! لقد بدأت رحلة تعلم JS");
        }
    </script>

</body>
</html>

اختر – ما هو أفضل مكان لوضع وسم <script> لتحسين سرعة ظهور الصفحة للمستخدم؟
(أ) داخل وسم <head>. (ب) قبل وسم <html>. (ج) في نهاية وسم <body> قبل إغلاقه. (د) داخل ملف CSS.

الإجابة: (ج) في نهاية وسم <body> قبل إغلاقه. (لضمان تحميل عناصر HTML وعرضها أولاً).

طرق كتابة الكود (ملف خارجي – External)

هذه هي الطريقة الاحترافية والمستخدمة في جميع المشاريع الحقيقية. بدلاً من حشر الكود داخل ملف HTML، نقوم بإنشاء ملف منفصل بامتداد .js (مثلاً main.js)، ثم نربطه بملف HTML.

مميزات الملف الخارجي

  • التنظيم (Separation of Concerns): فصل هيكل الصفحة عن البرمجة يجعل الكود أسهل في القراءة والصيانة.
  • التخزين المؤقت (Caching): عندما يزور المستخدم موقعك، يقوم المتصفح بتحميل ملف JS مرة واحدة ويحفظه. عند الانتقال لصفحة أخرى تستخدم نفس الملف، لن يحتاج لتحميله مجدداً، مما يجعل الموقع أسرع بكثير.
  • إعادة الاستخدام: يمكنك استخدام نفس ملف JS في مئات الصفحات من موقعك دون تكرار الكود.

كيفية الربط

نستخدم نفس وسم <script> ولكن هذه المرة نستخدم خاصية src لتحديد مسار الملف. لاحظ أن الوسم يجب أن يُغلق، ولا نكتب أي كود بداخله عند استخدام src.

مثال: ربط ملف خارجي

<!-- داخل ملف HTML -->
<body>
    <h1>تجربة الملف الخارجي</h1>
    
    <!-- ربط الملف المسمى script.js الموجود في نفس المجلد -->
    <script src="script.js"></script>
</body>

محتوى ملف script.js

// هذا الملف يحتوي فقط على كود جافا سكريبت
// لا نحتاج لكتابة وسم script هنا

console.log("تم ربط الملف الخارجي بنجاح!");
alert("أهلاً بك من الملف الخارجي");

اختر – ما هي الخاصية (Attribute) المستخدمة داخل وسم <script> لتحديد مسار ملف JavaScript الخارجي؟
(أ) href. (ب) link. (ج) src. (د) rel.

الإجابة: (ج) src. (تذكر: src اختصار لـ Source، وتستخدم مع الصور والسكربتات، بينما href تستخدم مع الروابط وملفات CSS).

طرق إخراج البيانات (Output Methods)

للمبتدئين، أهم شيء هو رؤية نتيجة الكود. توفر JavaScript عدة طرق لعرض البيانات، كل طريقة لها استخدام خاص جداً.

1. الكتابة في وحدة تحكم المتصفح (console.log)

هذه هي أهم أداة للمبرمجين. لا يراها المستخدم العادي للموقع، بل تراها أنت فقط عند فتح “أدوات المطور” (Developer Tools) بالضغط على F12 في المتصفح واختيار تبويب Console. تستخدم لاكتشاف الأخطاء وتجربة الكود.

2. النوافذ المنبثقة (window.alert)

تظهر رسالة صغيرة للمستخدم في وسط الشاشة، ويتوقف المتصفح عن العمل حتى يضغط المستخدم على “موافق”. تستخدم للتنبيهات البسيطة، لكن كثرة استخدامها مزعجة للمستخدمين ولا يُنصح بها في المواقع الحديثة.

3. التعديل في محتوى الصفحة (innerHTML)

هذه هي الطريقة الأقوى لتغيير محتوى HTML. نستخدمها للوصول لعنصر معين عبر document.getElementById ثم تغيير محتواه.

أمثلة على طرق الإخراج

<p id="demo">النص الأصلي</p>

<script>
    // 1. الطباعة في الكونسول (للمبرمج فقط)
    console.log("هذه رسالة اختبار تظهر في الـ Console");

    // 2. نافذة تنبيه (للمستخدم)
    window.alert("انتبه! هذا تنبيه");

    // 3. تغيير محتوى الصفحة
    // سيتم استبدال عبارة "النص الأصلي" بعبارة "تم التغيير بواسطة JS"
    document.getElementById("demo").innerHTML = "تم التغيير بواسطة JS";
</script>

اختر – الطريقة الأفضل والمستخدمة من قبل المطورين لاكتشاف الأخطاء (Debugging) دون إزعاج المستخدم هي:
(أ) document.write(). (ب) window.alert(). (ج) console.log(). (د) innerHTML.

الإجابة: (ج) console.log(). (لأنها تظهر في أدوات المطور فقط ولا تؤثر على تجربة المستخدم).

بناء الجملة والتعليقات (Syntax & Comments)

كل لغة لها قواعد (Grammar)، وفي البرمجة نسميها (Syntax). يجب الالتزام بها بدقة لأن الكمبيوتر لا يفهم التلميحات، بل يفهم الأوامر المباشرة.

قواعد هامة جداً للمبتدئين

  • حساسية الأحرف (Case Sensitive): لغة JS تفرق بين الحروف الكبيرة والصغيرة. المتغير المسمى lastname يختلف تماماً عن lastName. كلمة Var (بحرف كبير) ستعطيك خطأ، الصحيح هو var.
  • الفاصلة المنقوطة (;): نضع ; في نهاية كل سطر برمجي. في الإصدارات الحديثة هي اختيارية (المتصفح يضيفها تلقائياً)، ولكن يُنصح بشدة بكتابتها دائماً لتجنب أخطاء غير متوقعة ولتنظيم الكود.
  • المسافات البيضاء: المتصفح يتجاهل المسافات الزائدة. يمكنك استخدام المسافات لجعل الكود مقروءاً وجميلاً دون القلق من تأثيرها على التنفيذ.

التعليقات (Comments)

التعليقات هي نصوص نكتبها داخل الكود لا ينفذها المتصفح أبداً. الهدف منها هو شرح الكود لك أو للمبرمجين الآخرين الذين سيعملون معك، أو لتعطيل جزء من الكود مؤقتاً.

  • تعليق سطر واحد: يبدأ بـ //. كل ما يأتي بعده في نفس السطر يتم تجاهله.
  • تعليق متعدد الأسطر: يبدأ بـ /* وينتهي بـ */. يمكن كتابة مقال كامل بينهما ولن يؤثر على الكود.
مثال على الـ Syntax والتعليقات

// هذا تعليق لسطر واحد: تعريف متغير
var x = 5; 

/*
  هذا تعليق متعدد الأسطر
  يمكنني كتابة شرح طويل هنا
  عن طريقة عمل المعادلة التالية
*/
var y = 6;

// لاحظ الفرق بين الحروف الكبيرة والصغيرة
var myName = "Ahmed"; 
// var MyName = "Ali"; // هذا متغير مختلف تماماً

// استخدام الفاصلة المنقوطة لإنهاء الجملة
console.log(x + y); // سيطبع 11

اختر – أي من الجمل التالية يعتبر تعليقاً صحيحاً في JavaScript ولن يتم تنفيذه؟
(أ) <!– تعليق –>. (ب) // هذا تعليق. (ج) * هذا تعليق *. (د) # هذا تعليق.

الإجابة: (ب) // هذا تعليق. (الخيار أ هو تعليق HTML، والخيار د هو تعليق في لغات مثل بايثون).




وظائف ذات صلة قد تهمك

وظائف شركة KONE السعودية 2026: فرص هندسية، مبيعات، وإدارة مشاريع لدعم قطاع البنية التحتية

الحدود السياسية (مفهومها وأهميتها ووظائفها) - جغرافيا ثالثه ثانوي

شرح درس قيام الحرب العالمية الأولى ومصير الدولة العثمانية | تاريخ 3 ثانوي

مأساة 15 أسرة تعرضوا للنصب الجماعي

النظام الرأسمالي | علم الاقتصاد

الدرس الثالث أثر الوجود الفرنسي في مصر - تاريخ 3 ث

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

تابع جديد الوظائف
Scroll to Top