مرحباً بك في رحلتك مع جافاسكريبت! سيساعدك هذا البرنامج التعليمي في فهم أساسيات جافاسكريبت، مما يزوّدك بالمهارات اللازمة لبناء تطبيقات ويب تفاعلية وديناميكية. سواء كنت مبتدئًا تمامًا أو لديك بعض الخبرة في البرمجة، فقد صُمّم هذا الدليل ليكون واضحًا وموجزًا وجذابًا.
محتويات
ما هي جافاسكريبت؟
جافاسكريبت هي لغة برمجة متعددة الاستخدامات وعالية المستوى تُستخدم بشكل أساسي لإنشاء تجارب ويب تفاعلية. على عكس لغات البرمجة المُترجمة مثل C++ أو Java، يتم تفسير جافاسكريبت مباشرةً بواسطة متصفحات الويب، مما يجعلها سهلة التعلم والتنفيذ. يُسهّل كتابتها عدم الحاجة إلى التصريح الصريح لأنواع المتغيرات، مما يبسط عملية الترميز. وعلى الرغم من أنها لغة تعمل بشكل أساسي على جانب العميل (في متصفح المستخدم)، إلا أن قدراتها قد توسعت بشكل كبير، لتشمل تطوير جانب الخادم (مع Node.js) وحتى إنشاء تطبيقات الهاتف المحمول (باستخدام أطر عمل مثل React Native).
ما الذي تستطيع جافاسكريبت فعله؟
تكمن قوة جافاسكريبت في قدرتها على إضفاء الحيوية على مواقع الويب. فهي تُمكّن من مجموعة واسعة من الوظائف، تتجاوز بكثير الرسوم المتحركة البسيطة:
- صفحات ويب تفاعلية: إنشاء عناصر تستجيب لأفعال المستخدم (النقر، التمرير، إرسال النماذج).
- معالجة إدخال المستخدم: التحقق من صحة النماذج، وتقديم الملاحظات، ومعالجة البيانات المُرسلة.
- التلاعب بـ DOM: تغيير محتوى صفحة الويب وأسلوبها وهيكلها ديناميكيًا (إنشاء الرسوم المتحركة، والعروض الشرائحية، والقوائم).
- طلبات AJAX: التواصل مع الخوادم بشكل غير متزامن، وتحديث البيانات دون إعادة تحميل الصفحة بالكامل لتجربة مستخدم أكثر سلاسة.
- تطوير تطبيقات الويب: بناء تطبيقات معقدة مع ميزات مثل التحديثات في الوقت الفعلي والمصادقة على المستخدم.
- تطوير تطبيقات الهاتف المحمول: تُمكّن أطر العمل مثل React Native و Ionic من تطوير تطبيقات الهاتف المحمول متعددة المنصات باستخدام جافاسكريبت.
- تطوير جانب الخادم: يسمح لك Node.js باستخدام جافاسكريبت لبناء تطبيقات الخلفية.
دمج جافاسكريبت في HTML
يتم دمج كود جافاسكريبت في مستندات HTML باستخدام علامات <script>. هناك طريقتان شائعتان:
جافاسكريبت مضمنة
تُناسب أجزاء الكود الصغيرة، حيث توضع جافاسكريبت مباشرةً داخل علامات <script> ضمن HTML الخاص بك.
<!DOCTYPE html>
<html>
<head>
<title>جافاسكريبت مضمنة</title>
</head>
<body>
<p>هذه فقرة.</p>
<script>
document.querySelector("p").innerHTML = "تم تغيير هذه الفقرة!";
</script>
</body>
</html>
جافاسكريبت خارجية
للمشاريع الأكبر حجمًا، من الأفضل الاحتفاظ بجافاسكريبت في ملفات .js منفصلة وربطها بـ HTML الخاص بك باستخدام سمة src. هذا يُحسّن من التنظيم والصيانة.
<!DOCTYPE html>
<html>
<head>
<title>جافاسكريبت خارجية</title>
<script src="myScript.js"></script>
</head>
<body>
<p>هذه فقرة.</p>
</body>
</html>
المتصفحات الموصى بها
سيعمل أي متصفح ويب حديث (Chrome، Firefox، Safari، Edge) بسلاسة مع هذا البرنامج التعليمي. تم تصميم الأمثلة لتوافق واسع.
يوفر هذا المقدمة أساسًا لرحلتك في تعلم جافاسكريبت. دعنا ننتقل إلى القسم التالي لاستكشاف مفاهيم أكثر تقدمًا!