JavaScript هي واحدة من أكثر لغات البرمجة شيوعًا اليوم. تُستخدم بشكل واسع في تطوير الويب لجعل المواقع ديناميكية وتفاعلية. إذا كنت مبتدئًا في البرمجة وترغب في تعلم JavaScript، فهذا الدليل سيأخذك عبر الأساسيات خطوة بخطوة.
1. ما هي JavaScript؟
JavaScript هي لغة برمجة تعمل في المتصفح وتسمح لك بإضافة سلوك تفاعلي إلى صفحات الويب. على سبيل المثال، يمكنك استخدام JavaScript لتحريك الصور، التحقق من صحة النماذج، أو حتى بناء تطبيقات ويب كاملة.
2. إعداد البيئة
لتبدأ، تحتاج إلى متصفح (مثل Chrome أو Firefox) ومحرر نصوص (مثل Visual Studio Code أو Sublime Text).
خطوات بسيطة لكتابة أول كود JavaScript:
- افتح أي محرر نصوص.
- أنشئ ملف HTML جديد وأضف وسم
<script>بداخله. - اكتب الكود بين وسمي
<script>و</script>.
<!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>
alert("أهلاً بالعالم!");
</script>
</body>
</html>3. المتغيرات (Variables)
المتغيرات هي أماكن لتخزين البيانات. في JavaScript، يمكنك استخدام let أو const لإنشاء متغير.
مثال:
let name = "محمد";
const age = 25;
console.log("الاسم: " + name);
console.log("العمر: " + age);4. الأنواع الأساسية (Data Types)
JavaScript تدعم عدة أنواع من البيانات مثل:
- النصوص (Strings): مثل "مرحبًا".
- الأرقام (Numbers): مثل 123 أو 4.56.
- المنطقية (Booleans): تمثل القيم
trueأوfalse.
مثال:
let message = "مرحبًا";
let number = 42;
let isLoggedIn = true;
console.log(message);
console.log(number);
console.log(isLoggedIn);5. الجمل الشرطية (Conditional Statements)
الجمل الشرطية تمكنك من تنفيذ أجزاء معينة من الكود بناءً على شروط معينة.
مثال:
let temperature = 30;
if (temperature > 25) {
console.log("الجو حار.");
} else {
console.log("الجو معتدل.");
}6. الحلقات (Loops)
الحلقات تستخدم لتكرار نفس الجزء من الكود عدة مرات. هناك عدة أنواع من الحلقات، مثل for و while.
مثال باستخدام حلقة for:
for (let i = 0; i < 5; i++) {
console.log("العدد هو: " + i);
}7. الدوال (Functions)
الدوال هي مجموعة من التعليمات التي يمكن إعادة استخدامها في أماكن مختلفة من البرنامج.
إنشاء دالة:
function greet(name) {
console.log("مرحبًا، " + name + "!");
}
greet("علي");
greet("أحمد");8. التعامل مع DOM (Document Object Model)
JavaScript يمكنها التفاعل مع HTML وتغيير المحتوى أو النمط. هذه هي الطريقة التي تجعل بها صفحات الويب ديناميكية.
تغيير محتوى عنصر HTML:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM في JavaScript</title>
</head>
<body>
<h1 id="myHeading">مرحبًا بك!</h1>
<script>
document.getElementById("myHeading").innerText = "تم تغيير العنوان!";
</script>
</body>
</html>9. الاستنتاج
تعلم الأساسيات في JavaScript هو بداية رائعة إذا كنت تريد التعمق في تطوير الويب. حاول تجربة هذه الأمثلة بنفسك وفهم كيفية عمل كل جزء من الكود.
ملاحظات إضافية:
- تعلم JavaScript يتطلب الممارسة المستمرة. جرب كتابة الأكواد بنفسك.
- استخدم أدوات مثل Chrome DevTools لفحص الصفحات وتجربة JavaScript مباشرة في المتصفح.
- لا تتردد في طرح أسئلة والتعلم من المجتمعات البرمجية مثل Stack Overflow.