JavaScript: مقدمة في جافاسكريبت
جافاسكريبت هي لغة البرمجة للويب — إنها تحيي صفحات HTML الثابتة.
تم تصميم هذه الدورة للمبتدئين تمامًا. سنبدأ بالمتغيرات والدوال، وسنتقدم تدريجيًا حتى نتمكن من بناء تطبيق قائمة مهام كامل بأنفسنا.
1. ما ستتعلمه
- بناء جافاسكريبت الأساسية والمفاهيم الأساسية
- العمل مع المصفوفات والكائنات والدوال
- التلاعب بـ DOM ومعالجة الأحداث
- البرمجة غير المتزامنة والوحدات
- تطبيق عملي للمشروع
▶ مثال
JAVASCRIPT
// مثال على الكود في هذا القسم
const message = "مرحبا بالعالم!";
console.log(message);
هذا أبسط مثال; الأقسام التالية ستشرح بالتفصيل.## 2. المتطلبات الأساسية
قبل بدء هذه الدورة، يجب أن تكون على دراية بـ:
- أساسيات HTML (العلامات، السمات، النماذج)
- أساسيات CSS (المحددات، نموذج الصندوق)
2. ما هي جافاسكريبت
جافاسكريبت هي لغة نصية تعمل مباشرة في المتصفح — لا حاجة للترجمة. يقوم المتصفح بقراءة وتنفيذ كود JS الخاص بك سطرًا بسطر.
تم تصميم JS في الأصل للمتصفحات فقط، لكن انتشارها توسع منذ ذلك الحين لتشمل الخوادم (Node.js)، وتطبيقات سطح المكتب (Electron)، وحتى تطبيقات الجوالأ (React Native). في هذه الدورة، سنركز على كيفية عمل JS في صفحات الويب.
3. ماذا يمكن أن تفعل جافاسكريبت
تتعامل JS مع كل جانب تقريبًا من جوانب التفاعل على الويب:
- تغيير محتوى HTML — استبدال النص على الصفحة عند النقر على زر
- الاستجابة للأحداث — تشغيل المنطق عندما ينقر المستخدمون أو يمررون أو يكتبون
- التحقق من النماذج — التحقق من تنسيق البريد الإلكتروني وطول كلمة المرور قبل الإرسال
- التلاعب بـ CSS — تغيير الأنماط ديناميكيًا وإنشاء رسوم متحركة
- التواصل مع الخوادم — جلب البيانات دون تحديث الصفحة (AJAX)
باختصار: HTML يبني الهيكل، وCSS ينسقه، وجافاسكريبت تجعله تفاعليًا.
4. جافاسكريبت وHTML/CSS — العلاقة
تخيل صفحة الويب كشخص:
- HTML هو الهيكل العظمي — يحدد هيكل الصفحة
- CSS هو الجلد والملابس — يتحكم في المظهر
- JavaScript هي العضلات — تجعل الصفحة تتحرك وتتفاعل
لكل منها دوره الخاص. يغير JS مظهر الصفحة وسلوكها من خلال التلاعب بعناصر HTML وأنماط CSS.
5. تاريخ مختصر لجافاسكريبت
في عام 1995، كتب Brendan Eich في Netscape الإصدار الأول من جافاسكريبت في 10 أيام فقط. نعم، اللغة التي تسيطر الآن على الويب ولدت في أقل من أسبوعين.
بضعة مفاهيم خاطئة شائعة:
- جافاسكريبت وجافا هما لغتان مختلفتان تمامًا — مثلما يتشاركان اسم "جافاسكريبت" و"جافا"، لكن هذا كل شيء
- كانت JS تسمى في الأصل Mocha، ثم أعيدت تسميتها إلى LiveScript، وأخيرًا أعيدت تسميتها إلى JavaScript لركوب موجة شعبية جافا
- في عام 1997، تم تقديم JS إلى ECMA للتوحيد القياسي. أصبح اسمها الرسمي ECMAScript (ES). ES6 الذي تسمع عنه كثيرًا هو الإصدار السادس، الصادر في 2015
6. كيف تنفذ المتصفحات جافاسكريبت
كل متصفح يحتوي على محرك JS مدمج يترجم الكود الخاص بك إلى تعليمات الآلة:
- Chrome / Edge: محرك V8
- Firefox: محرك SpiderMonkey
- Safari: محرك JavaScriptCore
العملية مباشرة: المتصفح يحمل HTML ← يواجه علامة script ← محرك JS يحلل وينفذ سطرًا بسطر ← تظهر النتائج على الصفحة.
▶ مثال: تغيير نص الصفحة بجافاسكريبت
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مقدمة JS - تغيير النص</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin-top: 80px; }
#msg { font-size: 24px; color: #333; transition: all 0.3s; }
button { padding: 12px 28px; font-size: 16px; cursor: pointer; border: none; border-radius: 6px; background: #4CAF50; color: #fff; }
button:hover { background: #45a049; }
</style>
</head>
<body>
<p id="msg">مرحبا بالعالم!</p>
<button id="changeBtn">انقر لتغيير النص</button>
<script>
document.getElementById("changeBtn").onclick = function() {
document.getElementById("msg").textContent = "جافاسكريبت تحيي الصفحة!";
document.getElementById("msg").style.color = "#e91e63";
};
</script>
</body>
</html>
▶ مثال: جافاسكريبت تستجابة لأحداث المستخدم
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مقدمة JS - معالجة الأحداث</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin-top: 60px; }
.card { display: inline-block; padding: 40px; border: 2px solid #ddd; border-radius: 12px; cursor: pointer; transition: all 0.3s; }
.card:hover { border-color: #2196F3; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.card.active { border-color: #e91e63; background: #fce4ec; }
#info { margin-top: 20px; font-size: 18px; color: #555; }
</style>
</head>
<body>
<div class="card" id="myCard">
<p>مرر فوق هذه البطاقة</p>
</div>
<p id="info"></p>
<script>
var card = document.getElementById("myCard");
var info = document.getElementById("info");
card.onmouseenter = function() {
info.textContent = "لقد دخلت منطقة البطاقة!";
card.classList.add("active");
};
card.onmouseleave = function() {
info.textContent = "لقد غادرت منطقة البطاقة!";
card.classList.remove("active");
};
</script>
</body>
</html>
▶ مثال: التحقق من النماذج بجافاسكريبت
HTML
📖 للعرض فقط
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مقدمة JS - التحقق من النماذج</title>
<style>
body { font-family: Arial, sans-serif; max-width: 400px; margin: 60px auto; }
label { display: block; margin-top: 16px; font-weight: bold; }
input { width: 100%; padding: 8px; margin-top: 4px; border: 2px solid #ddd; border-radius: 4px; box-sizing: border-box; }
input:focus { outline: none; border-color: #2196F3; }
button { margin-top: 20px; padding: 10px 24px; border: none; border-radius: 6px; background: #2196F3; color: #fff; cursor: pointer; font-size: 16px; }
button:hover { background: #1976D2; }
.error { color: #e91e63; font-size: 14px; margin-top: 4px; display: none; }
.success { color: #4CAF50; font-size: 16px; margin-top: 12px; display: none; }
</style>
</head>
<body>
<h2>تسجيل مستخدم جديد</h2>
<label for="username">اسم المستخدم</label>
<input type="text" id="username" placeholder="3 أحرف على الأقل">
<p class="error" id="usernameError">يجب أن يكون اسم المستخدم 3 أحرف على الأقل</p>
<label for="email">البريد الإلكتروني</label>
<input type="text" id="email" placeholder="أدخل بريدك الإلكتروني">
<p class="error" id="emailError">الرجاء إدخال عنوان بريد إلكتروني صالح</p>
<button id="submitBtn">إرسال</button>
<p class="success" id="successMsg">تم التحقق بنجاح — تم الإرسال!</p>
<script>
document.getElementById("submitBtn").onclick = function() {
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var valid = true;
if (username.length < 3) {
document.getElementById("usernameError").style.display = "block";
valid = false;
} else {
document.getElementById("usernameError").style.display = "none";
}
if (email.indexOf("@") === -1 || email.indexOf(".") === -1) {
document.getElementById("emailError").style.display = "block";
valid = false;
} else {
document.getElementById("emailError").style.display = "none";
}
if (valid) {
document.getElementById("successMsg").style.display = "block";
} else {
document.getElementById("successMsg").style.display = "none";
}
};
</script>
</body>
</html>
❓ أسئلة شائعة
س هل جافاسكريبت وجافا هما نفس اللغة؟
ج لا على الإطلاق. يتشاركان الاسم لكنهما مختلفتان تمامًا — جافا هي لغة مترجمة تستخدم للواجهات الخلفية وتطوير أندرويد، بينما جافاسكريبت هي لغة نصية مفسرة تستخدم بشكل أساسي لصفحات الويب. التسمية مجرد صدفة تسويقية.
س هل أحتاج لإتقان HTML وCSS قبل تعلم JS؟
ج لا تحتاج لإتقانها، لكن يجب أن تفهم الأساسيات. JS تعمل بشكل أساسي من خلال التلاعب بعناصر HTML وأنماط CSS، لذلك إذا لم تتمكن من قراءة العلامات والمحددات، سيكون تعلم JS صعبًا.
س هل يمكن استخدام JS فقط في المتصفح؟
ج لا. يتيح Node.js تشغيل JS على الخوادم، وElectron يتيح بناء تطبيقات سطح المكتب، وReact Native يتيح بناء تطبيقات الجوالأ. لكن المتصفح يظل المسرح الرئيسي لـ JS.
📖 ملخص
- جافاسكريبت هي لغة المتصفح النصية — تفسر وتنفذ الكود سطرًا بسطر دون خطوة ترجمة
- قدرات JS الأساسية: تغيير المحتوى، الاستجابة للأحداث، التحقق من النماذج، التلاعب بالأنماط، التواصل مع الخوادم
- HTML/CSS/JS لكل منها دور واضح — الهيكل، العرض، والسلوك
- تم إنشاء JS بواسطة Brendan Eich في عام 1995 في 10 أيام وتوحيد معاييرها لاحقًا بواسطة ECMA كـ ECMAScript
- تنفذ المتصفحات الكود عبر محركات JS المدمجة مثل V8
📝 تمارين
- مبتدئ: أنشئ صفحة HTML بها زر وفقرة. عند النقر على الزر، غيّر نص الفقرة إلى "تعلمت جافاسكريبت!" واجعل لون النص أزرق.
- متوسط: أنشئ صفحة بها زران — "تكبير" و"تصغير" — يزيدان أو يقلان حجم خط النص بمقدار 2 بكسل مع كل نقرة.
- تحدي: أنشئ صفحة تحقق بسيطة لكلمة المرور. يجب أن تكون كلمة المرور 6 أحرف على الأقل وتحتوي على رقم واحد على الأقل. أظهر رسالة خطأ حمراء أسفل حقل الإدخال عندما لا يتم استيفاء الشروط.
