في هذا الدرس، سنقدم نظرة عامة عن JavaScript، ونتعرف على تاريخه، الفرق بينه وبين HTML و CSS، بالإضافة إلى كيفية تضمينه في صفحات HTML.
ما هو JavaScript؟
JavaScript هو لغة برمجة ديناميكية تُستخدم بشكل رئيسي في تطوير صفحات الويب التفاعلية. إنها من أهم التقنيات التي تستخدم في بناء الويب الحديث، إلى جانب HTML و CSS.
- JavaScript تُستخدم لتحديد سلوك الصفحة والتفاعل مع المستخدم.
- يمكن استخدامها لإضافة وظائف مثل: التحقق من النماذج، عرض الرسائل المنبثقة (Pop-ups)، معالجة البيانات، تحديث المحتوى بشكل ديناميكي، وعمليات أخرى معقدة على واجهة المستخدم.
- في الأصل كانت JavaScript تستخدم فقط على جانب العميل (Client-side)، ولكن مع تطور تقنيات Node.js، أصبحت تُستخدم على جانب الخادم (Server-side) أيضًا.
تاريخ تطور JavaScript
تم تطوير JavaScript بواسطة برندان آيخ في شركة نيتسكيب (Netscape) عام 1995. في البداية كانت تُسمى JScript، ولكن تم تغيير اسمها لاحقًا إلى JavaScript بهدف الاستفادة من الشهرة التي كان يتمتع بها اسم Java في ذلك الوقت.
- 1995: تم إصدار الإصدار الأول من JavaScript، وكان يُعرف باسم Mocha، ثم LiveScript، وأخيرًا أصبح JavaScript.
- 1996: تم تقديم JavaScript رسميًا في Netscape Navigator 2.0.
- 1997: تم تأسيس ECMA International للعمل على معايير موحدة للغة، وأُطلق ECMAScript كمعيار للغة JavaScript.
- 2005: بدأ استخدام AJAX (أسلوب جلب البيانات من الخادم دون الحاجة لإعادة تحميل الصفحة) الذي جعل JavaScript أكثر قوة وانتشارًا.
- 2015: تم إطلاق ECMAScript 6 (المعروف أيضًا بـ ES6) والذي قدم العديد من الميزات الجديدة والمفيدة، مثل الـ Classes و Arrow functions.
الفرق بين JavaScript و HTML و CSS
HTML و CSS و JavaScript هي ثلاث تقنيات أساسية تُستخدم في تطوير صفحات الويب، ولكن كل واحدة منها لها دور مختلف:
- HTML (HyperText Markup Language):
- هو لغة الهيكل الخاصة بالصفحات.
- يُستخدم لتحديد هيكل المحتوى (العناوين، الفقرات، الروابط، الصور، النماذج، وغيرها).
- يوفر الهيكل الأساسي للصفحة التي يتم عرضها في المتصفح.
- CSS (Cascading Style Sheets):
- هو لغة التصميم الخاصة بالصفحات.
- يُستخدم لتنسيق وتجميل المحتوى الذي يتم تحديده بـ HTML.
- يتيح لك تحديد الألوان، الخطوط، الهوامش، المسافات، التفاعلات مع المكونات مثل الأزرار، وتهيئة التخطيط العام للصفحة.
- JavaScript:
- هو لغة التفاعل الخاصة بالصفحات.
- تُستخدم لإضافة سلوكيات وديناميكية إلى الصفحات مثل التفاعل مع المستخدمين، التحقق من صحة النماذج، وتحديث محتوى الصفحة دون الحاجة لإعادة تحميلها.
ملخص الفرق بين الثلاثة:
- HTML: يبني الهيكل.
- CSS: يزين ويضيف التنسيق.
- JavaScript: يضيف التفاعلية والوظائف.
كيفية تضمين JavaScript في صفحات HTML
يمكنك تضمين JavaScript في صفحات HTML بعدة طرق:
1. تضمين JavaScript داخل الصفحة باستخدام <script>
يمكنك كتابة كود JavaScript داخل ملف HTML باستخدام وسم <script>. يتم وضع الكود عادة في أسفل الصفحة أو في قسم <head> لضمان تحميل الصفحة أولًا قبل تنفيذ الشيفرة.
مثال:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مقدمة إلى JavaScript</title>
</head>
<body>
<h1>مرحبًا بك في JavaScript!</h1>
<script>
// كود JavaScript داخل HTML
console.log('مرحبًا، هذا هو JavaScript!');
</script>
</body>
</html>
2. تضمين JavaScript من ملف خارجي
يمكنك كتابة JavaScript في ملف منفصل بامتداد .js ثم ربطه بصفحة HTML باستخدام وسم <script> مع السمة src لتحديد مصدر الملف.
مثال:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مقدمة إلى JavaScript</title>
</head>
<body>
<h1>مرحبًا بك في JavaScript!</h1>
<!-- ربط ملف JavaScript خارجي -->
<script src="script.js"></script>
</body>
</html>
ثم في ملف script.js:
// كود JavaScript في ملف خارجي
console.log('مرحبًا، هذا هو JavaScript من ملف خارجي!');
3. تضمين JavaScript في قسم <head> أو <body>
- في قسم
<head>: إذا وضعت الكود في<head>, سيتم تحميله قبل تحميل محتوى الصفحة. في هذه الحالة، من الأفضل استخدام السمةdeferللتأكد من أن الشيفرة لا تؤخر تحميل باقي المحتوى.
<head>
<script src="script.js" defer></script>
</head>
- في قسم
<body>: من الأفضل وضع كود JavaScript في أسفل<body>لتجنب تأخير تحميل الصفحة.
الختام
الآن لديك فهم أساسي لـ JavaScript ودورها في تطوير الويب. في الدروس القادمة، سنغطي كيفية كتابة الشيفرات البرمجية في JavaScript، والوظائف المختلفة التي يمكن أن تقدمها هذه اللغة، من التفاعلات البسيطة إلى التقنيات الأكثر تعقيدًا.
اكتشاف المزيد من كود التطور
اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.
