مقدمة في JavaScript وكيف تعمل

ما هو JavaScript؟

JavaScript هو لغة البرمجة الخاصة بالويب. بينما يوفر HTML بنية صفحة الويب ويتحكم CSS في مظهرها البصري، فإن JavaScript يبث الحياة في الصفحات من خلال إضافة التفاعل والمنطق والسلوك الديناميكي. في كل مرة ترى فيها قائمة منسدلة تفتح، أو نموذجا يتحقق من إدخالك قبل الإرسال، أو خريطة تتحدث في الوقت الفعلي، أو تمريرا لا نهائيا يحمل المزيد من المحتوى عند وصولك إلى أسفل الصفحة، فإن JavaScript هو الذي يقوم بالعمل خلف الكواليس.

لم يعد JavaScript مقتصرا على المتصفحات فقط. بفضل بيئات مثل Node.js، يمكن لـ JavaScript أيضا العمل على الخوادم وبناء تطبيقات سطح المكتب وإنشاء تطبيقات الهاتف المحمول وحتى التحكم في الأجهزة. إنها واحدة من أكثر لغات البرمجة تنوعا واستخداما في العالم، وتحتل باستمرار المرتبة الأولى أو بالقرب منها في استطلاعات المطورين.

على الرغم من اسمها، لا علاقة لـ JavaScript بلغة Java. كان الاسم قرارا تسويقيا اتخذ في منتصف التسعينيات عندما كانت Java شائعة للغاية. JavaScript هي لغة مستقلة تماما بقواعدها وصيغتها ونظامها البيئي الخاص.

تاريخ موجز لـ JavaScript

فهم من أين جاء JavaScript يساعدك على تقدير لماذا يعمل بالطريقة التي يعمل بها اليوم. إليك المراحل الرئيسية:

• 1995 -- الولادة في Netscape: أنشأ بريندان آيك JavaScript في 10 أيام فقط أثناء عمله في شركة Netscape Communications. كان يسمى في الأصل Mocha ثم أعيدت تسميته إلى LiveScript وأخيرا إلى JavaScript. كان الهدف منح مصممي الويب لغة برمجة خفيفة لإضافة التفاعل إلى صفحات الويب دون الحاجة لكتابة تطبيقات Java.
• 1997 -- معيار ECMAScript: لمنع حروب المتصفحات من تجزئة اللغة، تم تقديم JavaScript إلى ECMA International للتوحيد. سميت المواصفة الرسمية ECMAScript (ES). هذا ضمن أن جميع المتصفحات ستنفذ نفس ميزات اللغة الأساسية.
• 2005 -- ثورة AJAX: سمح تقديم AJAX (JavaScript غير المتزامن و XML) لصفحات الويب بجلب البيانات من الخوادم دون إعادة التحميل. كان هذا الأساس لتطبيقات الصفحة الواحدة الحديثة. أظهرت خرائط Google و Gmail قوة هذا النهج.
• 2009 -- Node.js: أنشأ رايان دال Node.js الذي سمح لـ JavaScript بالعمل خارج المتصفح على الخوادم. كان هذا تحولا جذريا لأن المطورين يمكنهم الآن استخدام لغة واحدة لتطوير الواجهة الأمامية والخلفية معا.
• 2015 -- ES6 (ECMAScript 2015): كان هذا أكبر تحديث لـ JavaScript في تاريخها. قدم ES6 الفئات ودوال السهم وقوالب النصوص و let/const والتفكيك والوحدات والوعود وأكثر من ذلك بكثير. JavaScript الحديث مبني على ES6 وتحديثاته السنوية اللاحقة.
• 2016 حتى الآن -- تحديثات سنوية: منذ ES6 تتلقى اللغة تحديثات سنوية (ES2016 و ES2017 و ES2018 وهكذا)، يضيف كل منها ميزات وتحسينات جديدة. تستمر اللغة في التطور بسرعة.

كيف تنفذ المتصفحات JavaScript

لفهم JavaScript حقا تحتاج لمعرفة ما يحدث عندما يواجه المتصفح الكود الخاص بك. دعنا نمر بالعملية خطوة بخطوة.

كل متصفح حديث يحتوي على محرك JavaScript -- برنامج متخصص يقرأ كود JavaScript ويفسره وينفذه. إليك كيف يعمل تدفق التنفيذ:

1. التحليل: يقرأ المحرك كود JavaScript حرفا بحرف ويحوله إلى شجرة صيغة مجردة (AST) -- تمثيل منظم لكودك يمكن للمحرك فهمه. إذا كانت هناك أخطاء في الصيغة سيطرح المحرك خطأ في هذه المرحلة.
2. التجميع: تستخدم المحركات الحديثة تقنية تسمى التجميع في الوقت المناسب (JIT). بدلا من تفسير الكود سطرا بسطر (وهو بطيء) أو تجميع كل شيء مسبقا (مما يسبب تأخيرا قبل التنفيذ)، يقوم تجميع JIT بتجميع الكود إلى كود آلة أثناء التشغيل مع تحسين مسارات الكود المنفذة بشكل متكرر لأقصى أداء.
3. التنفيذ: يعمل كود الآلة المجمع على معالج جهازك. يدير المحرك تخصيص الذاكرة وجمع القمامة (تنظيف الذاكرة غير المستخدمة) ومكدس الاستدعاء (تتبع أي دالة قيد التشغيل حاليا).

محركات JavaScript: V8 و SpiderMonkey والمزيد

تستخدم المتصفحات المختلفة محركات JavaScript مختلفة لكنها جميعا تنفذ نفس معيار ECMAScript:

• V8 -- طورته Google ويستخدم في Chrome و Edge و Opera و Node.js. معروف بأدائه الاستثنائي بفضل تقنيات تجميع JIT المتقدمة. يقوم V8 بتجميع JavaScript مباشرة إلى كود آلة أصلي قبل تنفيذه.
• SpiderMonkey -- طورته Mozilla ويستخدم في Firefox. كان أول محرك JavaScript تم إنشاؤه على الإطلاق (بواسطة بريندان آيك نفسه). يستخدم SpiderMonkey أيضا تجميع JIT ويستمر تطويره بنشاط.
• JavaScriptCore (Nitro) -- طورته Apple ويستخدم في Safari وجميع متصفحات iOS. محسن لأجهزة Apple وأنظمة تشغيلها.
• Chakra -- طورته Microsoft لمتصفح Edge القديم. انتقل متصفح Edge الجديد لاستخدام V8 (نفس Chrome) في 2020.

إضافة JavaScript إلى صفحة ويب

هناك ثلاث طرق لتضمين JavaScript في صفحة HTML: السكربتات المضمنة والسكربتات الداخلية والسكربتات الخارجية. دعنا نفحص كل نهج ونفهم متى نستخدمه.

1. JavaScript المضمن (Inline)

JavaScript المضمن يكتب مباشرة داخل خصائص HTML، عادة في خصائص معالجات الأحداث مثل onclick و onmouseover أو onsubmit. هذا النهج يخلط JavaScript مباشرة مع ترميز HTML.

<button onclick="alert('مرحبا! لقد نقرت على الزر.')">
    انقر هنا
</button>

<input type="text" onfocus="this.style.backgroundColor='lightyellow'">

<a href="#" onmouseover="this.style.color='red'">مرر فوقي</a>

2. JavaScript الداخلي (السكربت المضمن)

يوضع JavaScript الداخلي داخل وسم <script> ضمن ملف HTML. هذا أفضل من JavaScript المضمن لأنه يفصل المنطق عن العناصر الفردية، لكن كود JavaScript لا يزال يعيش داخل ملف HTML.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>مثال JavaScript داخلي</title>
</head>
<body>
    <h1 id="greeting">مرحبا!</h1>
    <button id="changeBtn">غير التحية</button>

    <script>
        // هذا كود JavaScript مضمن في ملف HTML
        const button = document.getElementById('changeBtn');
        const heading = document.getElementById('greeting');

        button.addEventListener('click', function() {
            heading.textContent = 'مرحبا بكم في JavaScript!';
            heading.style.color = 'darkblue';
        });
    </script>
</body>
</html>

3. JavaScript الخارجي (الطريقة الموصى بها)

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

<!-- index.html -->
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>مثال JavaScript خارجي</title>
</head>
<body>
    <h1 id="greeting">مرحبا!</h1>
    <button id="changeBtn">غير التحية</button>

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

// js/main.js -- ملف JavaScript منفصل
const button = document.getElementById('changeBtn');
const heading = document.getElementById('greeting');

button.addEventListener('click', function() {
    heading.textContent = 'مرحبا بكم في JavaScript!';
    heading.style.color = 'darkblue';
});

console.log('تم تحميل main.js بنجاح!');

فوائد ملفات JavaScript الخارجية تشمل:

• فصل الاهتمامات: HTML يتعامل مع البنية و CSS يتعامل مع العرض و JavaScript يتعامل مع السلوك -- كل في ملفاته الخاصة.
• إعادة الاستخدام: يمكن ربط نفس ملف JavaScript بصفحات HTML متعددة.
• التخزين المؤقت: تخزن المتصفحات ملفات JavaScript الخارجية مؤقتا لذا لا يحتاج الزوار العائدون لتحميلها مرة أخرى.
• سهولة الصيانة: من الأسهل بكثير العثور على الأخطاء وإصلاحها عندما يكون الكود منظما في ملفات منفصلة.
• التعاون الجماعي: يمكن لمطورين مختلفين العمل على قوالب HTML ومنطق JavaScript بشكل مستقل دون تعارضات في الدمج.

وسم Script: الموضع و defer و async

مكان وضع وسم <script> في مستند HTML يهم بشكل كبير. فهو يؤثر على متى وكيف يتم تحميل وتنفيذ كود JavaScript بالنسبة لبقية الصفحة.

السكربت في أسفل Body (النهج التقليدي)

وضع وسم <script> قبل وسم الإغلاق </body> مباشرة يضمن أن كل محتوى HTML يتم تحليله وعرضه قبل تشغيل JavaScript. كانت هذه التوصية التقليدية قبل وجود خصائص defer و async.

<body>
    <h1>محتوى صفحتي</h1>
    <p>كل HTML يحمل أولا...</p>

    <!-- JavaScript يحمل وينفذ بعد تحليل كل HTML -->
    <script src="js/main.js"></script>
</body>

خاصية defer (أفضل ممارسة حديثة)

تخبر خاصية defer المتصفح بتحميل ملف JavaScript في الخلفية بينما يستمر في تحليل HTML. سينفذ السكربت فقط بعد اكتمال تحليل مستند HTML بالكامل. هذه هي أفضل الممارسات الحديثة.

<head>
    <meta charset="UTF-8">
    <title>استخدام defer</title>
    <!-- السكربت يحمل بالتوازي مع تحليل HTML -->
    <!-- ينفذ فقط بعد اكتمال تحليل HTML -->
    <script src="js/main.js" defer></script>
</head>
<body>
    <h1>المحتوى يحمل دون انتظار JS</h1>
</body>

الخصائص الرئيسية لـ defer:

• يتم تحميل السكربت بالتوازي مع تحليل HTML (غير معطل).
• ينفذ السكربت فقط بعد اكتمال تحليل مستند HTML.
• تنفذ السكربتات المؤجلة المتعددة بالترتيب الذي تظهر به في HTML.
• يعمل فقط مع السكربتات الخارجية (يجب أن تكون خاصية src موجودة).

خاصية async

تقوم خاصية async أيضا بتحميل السكربت في الخلفية لكنها تنفذ السكربت فورا بمجرد انتهاء التحميل -- بغض النظر عما إذا كان تحليل HTML قد اكتمل.

<head>
    <!-- السكربت يحمل بالتوازي وينفذ بمجرد الانتهاء -->
    <!-- لا ينتظر اكتمال تحليل HTML -->
    <script src="js/analytics.js" async></script>
    <script src="js/ads.js" async></script>
</head>

الخصائص الرئيسية لـ async:

• يتم تحميل السكربت بالتوازي مع تحليل HTML (غير معطل).
• ينفذ السكربت فورا عند اكتمال التحميل مع إيقاف تحليل HTML مؤقتا.
• سكربتات async المتعددة لا تضمن ترتيب التنفيذ -- أيهما ينتهي تحميله أولا ينفذ أولا.
• الأنسب للسكربتات المستقلة التي لا تعتمد على DOM أو سكربتات أخرى مثل التحليلات أو متتبعات الإعلانات.

وحدة التحكم: ملعبك في JavaScript

وحدة تحكم المتصفح هي أهم أداة لتعلم JavaScript وتصحيح أخطائه. تتيح لك كتابة وتنفيذ كود JavaScript في الوقت الفعلي ورؤية مخرجات برامجك وفحص الأخطاء.

فتح وحدة التحكم

لفتح أدوات المطور في المتصفح والوصول إلى وحدة التحكم:

• Chrome / Edge: اضغط F12 أو Ctrl+Shift+J (ويندوز/لينكس) / Cmd+Option+J (ماك).
• Firefox: اضغط F12 أو Ctrl+Shift+K.
• Safari: فعل قائمة Develop في التفضيلات أولا ثم اضغط Cmd+Option+C.

استخدام console.log()

دالة console.log() هي الأداة الأكثر استخداما لعرض المخرجات وتصحيح أخطاء الكود. تطبع القيم في وحدة تحكم المتصفح.

// طباعة رسالة بسيطة
console.log('مرحبا يا JavaScript!');

// طباعة أرقام
console.log(42);
console.log(3.14);

// طباعة نتيجة تعبير
console.log(10 + 20);      // المخرج: 30
console.log('العمر: ' + 25); // المخرج: العمر: 25

// طباعة قيم متعددة مرة واحدة
console.log('الاسم:', 'أحمد', 'العمر:', 30);

// طباعة كائنات ومصفوفات
console.log({ name: 'أحمد', age: 30 });
console.log([1, 2, 3, 4, 5]);

دوال Console الأخرى

بالإضافة إلى console.log() هناك عدة دوال مفيدة أخرى:

// رسائل تحذير (تظهر بخلفية صفراء)
console.warn('هذه رسالة تحذير!');

// رسائل خطأ (تظهر بخلفية حمراء)
console.error('حدث خطأ ما!');

// رسائل معلومات
console.info('تم تحميل الصفحة بنجاح.');

// عرض بيانات جدولية (رائع للمصفوفات والكائنات)
console.table([
    { name: 'أحمد', age: 30 },
    { name: 'سارة', age: 25 },
    { name: 'خالد', age: 35 }
]);

// قياس وقت العمليات (قياس المدة التي يستغرقها الكود)
console.time('loop');
for (let i = 0; i < 1000000; i++) {
    // عملية ما
}
console.timeEnd('loop');  // المخرج: loop: 2.345ms

// تجميع الرسائل المرتبطة
console.group('تفاصيل المستخدم');
console.log('الاسم: أحمد');
console.log('العمر: 30');
console.log('الدور: مطور');
console.groupEnd();

// مسح وحدة التحكم
console.clear();

كتابة برامج JavaScript الأولى

الآن بعد فهم النظرية دعنا نكتب بعض برامج JavaScript الفعلية. سنبدأ ببساطة ونزيد التعقيد تدريجيا.

// البرنامج الأول الكلاسيكي في أي لغة
console.log('مرحبا بالعالم!');

// يمكنك أيضا عرض مربع حوار منبثق
alert('مرحبا بالعالم!');

// أو الكتابة مباشرة في مستند HTML
document.write('<h1>مرحبا بالعالم!</h1>');

// JavaScript يمكنه إجراء عمليات رياضية
console.log('الجمع: ' + (5 + 3));         // 8
console.log('الطرح: ' + (10 - 4));        // 6
console.log('الضرب: ' + (6 * 7));         // 42
console.log('القسمة: ' + (20 / 4));       // 5
console.log('الباقي: ' + (17 % 5));       // 2 (باقي القسمة)
console.log('الأس: ' + (2 ** 10));        // 1024 (الرفع للأس)

// prompt() يعرض مربع حوار يطلب من المستخدم الإدخال
let userName = prompt('ما هو اسمك؟');
let userAge = prompt('كم عمرك؟');

// عرض النتائج
console.log('الاسم: ' + userName);
console.log('العمر: ' + userAge);

// إنشاء رسالة ترحيب
alert('مرحبا ' + userName + '! عمرك ' + userAge + ' سنة.');

let age = prompt('أدخل عمرك:');

if (age >= 18) {
    console.log('أنت بالغ.');
    alert('مرحبا! لديك وصول كامل.');
} else {
    console.log('أنت قاصر.');
    alert('مرحبا! قد يكون بعض المحتوى مقيدا.');
}

التعليقات في JavaScript

التعليقات هي ملاحظات تكتبها في الكود يتجاهلها محرك JavaScript تماما. هي ضرورية لشرح المنطق وترك تذكيرات وجعل الكود مقروءا لك وللمطورين الآخرين.

// هذا تعليق أحادي السطر
// كل شيء بعد // في نفس السطر يتم تجاهله

console.log('هذا ينفذ'); // يمكنك أيضا وضع التعليقات في نهاية السطر

/*
  هذا تعليق متعدد الأسطر.
  كل شيء بين علامتي الفتح والإغلاق يتم تجاهله.
  استخدم هذا للشروحات الطويلة أو تعطيل الكود مؤقتا.
*/

/*
console.log('هذا السطر لن ينفذ');
console.log('هذا أيضا لن ينفذ');
*/

// تعليق جيد: يشرح لماذا وليس ماذا
// حساب الخصم: 20% للطلبات التي تتجاوز 100$
let discount = orderTotal > 100 ? orderTotal * 0.20 : 0;

// تعليق سيء: يكرر ما يقوله الكود بالفعل
// تعيين x بقيمة 5
let x = 5;

الوضع الصارم (Strict Mode)

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

// تفعيل الوضع الصارم للملف بالكامل
// يجب أن يكون هذا أول عبارة في الملف
'use strict';

// بدون الوضع الصارم سينشئ هذا متغيرا عاما بصمت
// مع الوضع الصارم يطرح ReferenceError
myVariable = 10;  // خطأ: myVariable غير معرف

// بدون الوضع الصارم التعيين لخاصية للقراءة فقط يتم تجاهله بصمت
// مع الوضع الصارم يطرح TypeError
undefined = 5;    // خطأ: لا يمكن التعيين لـ undefined
NaN = 10;         // خطأ: لا يمكن التعيين لـ NaN

// يمكنك أيضا تفعيل الوضع الصارم للدوال الفردية
function strictFunction() {
    'use strict';
    // قواعد الوضع الصارم تطبق فقط داخل هذه الدالة
    let x = 10;
    y = 20;  // خطأ: y غير معرف
}

function normalFunction() {
    // الوضع العادي (المتساهل) -- لا تطبيق صارم
    z = 30;  // ينشئ متغيرا عاما بصمت (ممارسة سيئة!)
}

ما يكتشفه الوضع الصارم:

• استخدام متغير بدون التصريح عنه (يمنع المتغيرات العامة العرضية).
• تعيين قيم لخصائص للقراءة فقط أو متغيرات عامة غير قابلة للكتابة.
• حذف المتغيرات أو الدوال أو معاملات الدوال.
• أسماء معاملات مكررة في الدوال.
• استخدام الأرقام الثمانية الحرفية (مثل 010).
• استخدام عبارة with.

كيف يتفاعل JavaScript مع HTML و CSS

يتواصل JavaScript مع صفحة الويب من خلال نموذج كائن المستند (DOM). DOM هو تمثيل شجري لمستند HTML يمكن لـ JavaScript القراءة منه والكتابة إليه. كل عنصر HTML يصبح عقدة في هذه الشجرة ويمكن لـ JavaScript الوصول إلى أي عقدة أو تعديلها أو إضافتها أو إزالتها.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>تفاعل DOM</title>
    <style>
        .highlight {
            background-color: yellow;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1 id="title">العنوان الأصلي</h1>
    <p id="description">هذا هو الوصف الأصلي.</p>
    <button id="updateBtn">تحديث المحتوى</button>

    <script>
        // اختيار العناصر من DOM
        const title = document.getElementById('title');
        const description = document.getElementById('description');
        const button = document.getElementById('updateBtn');

        // إضافة مستمع حدث للزر
        button.addEventListener('click', function() {
            // تعديل محتوى النص
            title.textContent = 'العنوان المحدث!';
            description.textContent = 'JavaScript غير هذا النص للتو.';

            // تعديل فئة CSS
            title.classList.add('highlight');

            // تعديل الأنماط المضمنة
            description.style.color = 'darkgreen';
            description.style.fontWeight = 'bold';
        });
    </script>
</body>
</html>

فهم ترتيب التنفيذ

ينفذ كود JavaScript بشكل متزامن افتراضيا مما يعني أنه يعمل سطرا واحدا في كل مرة من الأعلى إلى الأسفل. يجب أن ينتهي كل سطر قبل أن يبدأ التالي. هذا مفهوم مهم لفهمه مبكرا.

console.log('الخطوة 1: البداية');
console.log('الخطوة 2: المعالجة');
console.log('الخطوة 3: الانتهاء');

// المخرجات (دائما بهذا الترتيب):
// الخطوة 1: البداية
// الخطوة 2: المعالجة
// الخطوة 3: الانتهاء

// JavaScript ينتظر اكتمال كل سطر قبل الانتقال للتالي
let result = 5 + 10;       // ينفذ هذا أولا
console.log(result);        // ثم هذا: 15
let doubled = result * 2;   // ثم هذا
console.log(doubled);       // وأخيرا هذا: 30

الأخطاء الشائعة للمبتدئين التي يجب تجنبها

إليك الأخطاء الأكثر شيوعا التي يرتكبها مطورو JavaScript الجدد. الوعي بها الآن سيوفر عليك ساعات من تصحيح الأخطاء لاحقا:

• حساسية حالة الأحرف: JavaScript حساس لحالة الأحرف. myVariable و myvariable و MyVariable هي ثلاثة معرفات مختلفة تماما. بالمثل console.log() يعمل لكن Console.Log() لا يعمل.
• نسيان الفاصلة المنقوطة: بينما JavaScript لديها إدراج تلقائي للفاصلة المنقوطة (ASI) فإن الاعتماد عليها قد يؤدي لأخطاء خفية. من الممارسة الجيدة إنهاء عباراتك دائما بفاصلة منقوطة.
• استخدام = بدلا من == أو ===: علامة = واحدة هي عامل التعيين. استخدم === (المساواة الصارمة) للمقارنات.
• خطأ إملائي في أسماء المتغيرات: إذا صرحت عن let userName لكن كتبت لاحقا console.log(username) ستحصل على ReferenceError.
• نسيان الحفظ: عدلت ملف JavaScript لكن نسيت الحفظ قبل تحديث المتصفح. احفظ ملفاتك دائما قبل الاختبار.

// خطأ: حساسية حالة الأحرف
Console.log('مرحبا');    // خطأ: Console غير معرف
console.Log('مرحبا');    // خطأ: console.Log ليست دالة
console.log('مرحبا');    // صحيح

// خطأ: التعيين مقابل المقارنة
let x = 5;
if (x = 10) {           // خطأ: يعين 10 لـ x، دائما صحيح!
    console.log('هذا ينفذ دائما');
}
if (x === 10) {          // صحيح: يقارن x بـ 10
    console.log('x يساوي 10');
}

// خطأ: خطأ إملائي في المتغير
let firstName = 'أحمد';
console.log(firstname);  // خطأ: firstname غير معرف (حرف N كبير مفقود)
console.log(firstName);  // صحيح