أول برنامج JavaScript والمتغيّرات
نبدأ اللغة الثالثة: لغة البرمجة التي تجعل الصفحة تفكر وتستجيب. ⏱ نحو 20 دقيقة.
- تكتب أول برنامج
JavaScriptوتطبع بـconsole.log. - تربط ملف
script.jsبالصفحة. - تعرّف المتغيرات بـ
letوconst. - تفرّق بين الأنواع وتدمج النصوص بالقالب النصي.
١اللغة الثالثة: التفاعل
تعلمت HTML للمحتوى و CSS للشكل. أما JavaScript فلغة برمجة حقيقية تعمل داخل المتصفح: تحسب، وتقرر، وتستجيب لضغطات الزائر. وأنت تعرف أساسيات البرمجة من مقرر 111، فستجد الأفكار نفسها بكتابة مختلفة.
console.log("مرحبًا من JavaScript");console.log(5 + 3);
console.log في JavaScript مثل print في بايثون: تطبع في نافذة Console. وكل أمر ينتهي بفاصلة منقوطة ;.
٢أين نكتب JavaScript؟
مثل CSS: الأفضل ملف خارجي script.js نربطه في آخر body:
<h1>صفحتي</h1><script src="script.js"></script>
console.log("الملف script.js يعمل!");- نضع
<script src="script.js"></script>قبل</body>مباشرة، حتى تُحمَّل عناصر الصفحة أولًا. - لرؤية
Consoleفي متصفحك: اضغط F12 ثم تبويبConsole. هناك تظهر الرسائل والأخطاء.
٣المتغيّرات: let و const
let name = "سارة";let age = 19;const city = "جدة"; age = age + 1;console.log(name, age, city);
| الكلمة | المعنى |
|---|---|
let | متغيّر يمكن تغيير قيمته لاحقًا. |
const | ثابت: لا تتغير قيمته بعد تعريفه. استخدمه افتراضيًّا، ولا تستخدم let إلا إذا احتجت التغيير. |
var | الطريقة القديمة. ستراها في أكواد قديمة، فلا تستخدمها. |
الفرق عن بايثون: نكتب let أو const عند أول ظهور للمتغير فقط.
٤أنواع البيانات
console.log(typeof 42);console.log(typeof 3.5);console.log(typeof "قهوة");console.log(typeof true);console.log(typeof undefined);
| النوع | مثال | في بايثون |
|---|---|---|
number | 42 و 3.5 | int و float معًا |
string | "قهوة" أو 'قهوة' | str |
boolean | true و false (بحروف صغيرة) | True و False |
undefined | متغيّر لم تُعطَ له قيمة | لا يوجد مثله |
٥دمج النصوص، وفخ الجمع
نستخدم القالب النصي بعلامة الاقتباس المائلة ` لوضع المتغيّرات داخل النص بـ ${}:
const item = "قهوة";const price = 12;console.log(`سعر ${item} هو ${price} ريالًا`); console.log("5" + 3);console.log(Number("5") + 3);
انتبه: "5" + 3 تعطي "53"! لأن العلامة + مع النص تعني «الدمج». حوّل النص إلى عدد بـ Number() أولًا، مثل int() في بايثون.
توقّع وتحقّق
ما الذي يقابل print في JavaScript؟
console.log يطبع في Console.متغيّر لن تتغير قيمته:
const للثوابت.ما ناتج "2" + 2؟
أين نرى رسائل console.log في المتصفح؟
الخلاصة
console.logمثلprint، وكل أمر ينتهي بـ ;script.jsيُربط قبل نهايةbody.constللثابت (الافتراضي)، وletلما يتغير، ولا نستخدمvar.- القالب النصي: `السعر $
{price}`، وNumber()لتحويل النص إلى عدد.
تحدٍّ برمجي: فاتورة المقهى
سهلاكتب برنامجًا يحسب فاتورة: كوبان قهوة سعر الواحد 12، وقطعة حلى سعرها 15. اطبع المجموع، ثم الضريبة 15٪، ثم الإجمالي، بقالب نصي.
- ثوابت للأسعار والكمية بـ const.
- اطبع: المجموع: 39
- اطبع: الضريبة: 5.85
- اطبع: الإجمالي: 44.85
👀 اعرض شكل الناتج المطلوب
- يطبع: المجموع: 39
- يطبع: الضريبة: 5.85
- يطبع: الإجمالي: 44.85
- ثلاثة أسطر بالترتيب.
💡 تلميح 1
const total = coffee * cups + dessert;💡 تلميح 2
{total}`);حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.
const coffee = 12;const cups = 2;const dessert = 15; const total = coffee * cups + dessert;const tax = total * 0.15;console.log(`المجموع: ${total}`);console.log(`الضريبة: ${tax}`);console.log(`الإجمالي: ${total + tax}`);