مرحباً أصدقائي الصغار! سنتعلم اليوم عن جافا سكريبت. جافا سكريبت لغة حاسوبية فريدة من نوعها، تساعدنا على جعل صفحات الويب تفاعلية وممتعة. عندما تنقر على زر أو ترى حركة على موقع ويب، فغالباً ما يكون ذلك بفضل جافا سكريبت.
تخيل أنك تلعب بروبوت لعبة. لتحريك الروبوت، عليك توجيهه إلى ما يجب فعله. وبالمثل، يُرشد جافا سكريبت الحاسوب إلى كيفية سلوك صفحة الويب، ويُعطي تعليمات لتغيير مواقع الويب أثناء مشاهدتك لها.
تطوير الويب يعني بناء مواقع الويب. باستخدام HTML، نُنشئ هيكل الموقع. أما CSS، فيُضفي عليه مظهرًا جذابًا. أما JavaScript، فتُضفي عليه سحرًا خاصًا بجعل المواقع تستجيب عند النقر على الأزرار أو التمرير لأسفل الصفحة. اليوم، سنستكشف كيفية عمل JavaScript بطريقة بسيطة للغاية.
هذا الدرس مكتوب بلغة سهلة. سنستخدم كلمات بسيطة وأمثلة من الحياة اليومية. حتى لو كنت جديدًا في عالم الحاسوب، يمكنك فهمه. لنبدأ رحلة التعلم مع جافا سكريبت!
جافا سكريبت لغة يفهمها الحاسوب. وهي مجموعة من التعليمات مكتوبة بطريقة يستطيع الحاسوب اتباعها. عند زيارة موقع ويب، يستخدم الحاسوب جافا سكريبت لتغيير أجزاء من الصفحة. على سبيل المثال، يمكن أن تظهر صورة أو رسالة عند النقر بالماوس.
يمكنك اعتبار جافا سكريبت مساعدًا ودودًا. فكما تطلب من صديق أن يُعطيك لعبة، تساعد جافا سكريبت جهاز الكمبيوتر على تمرير الرسائل وعرض التغييرات على الشاشة. إنها تُضفي حيوية على مواقع الويب.
تستخدم العديد من المواقع الإلكترونية الشهيرة جافا سكريبت. مواقع مثل الألعاب الإلكترونية والقصص التفاعلية وحتى الرسوم المتحركة البسيطة، جميعها تعمل باستخدام جافا سكريبت. إنها بمثابة جرعة سحرية تُضفي على الموقع طابعًا مميزًا.
تعلّم كيفية عمل جافا سكريبت ببطء. خطوة بخطوة، ستكتشف كيف يُمكن لكل تعليمة أن تُغيّر موقعًا إلكترونيًا. سنستعرض أمثلة بسيطة لمساعدتك على فهم آلية عملها.
جافا سكريبت مهمة جدًا لأنها تُنشئ تفاعلًا. تخيّل لو أن كل كتاب تقرأه لا يُقرأ إلا بدون خيارات. موقع ويب بدون جافا سكريبت هو مثل ذلك - صفحة ثابتة لا تتغير أبدًا.
باستخدام جافا سكريبت، يمكنك رؤية صور متحركة، ونصوص متغيرة، وأزرار تُفعّل وظائف عند النقر عليها. هذا يجعل مواقع الويب حيوية وممتعة. حتى المواقع البسيطة، كمعرض الصور مثلاً، يمكن أن تصبح مثيرة عند استخدام جافا سكريبت.
في كل مرة ترى فيها رسالة منبثقة أو لعبة صغيرة على موقع ويب، فأنت تنظر إلى عمل جافا سكريبت. ولهذا السبب ترى أحيانًا رسائل مثل "مرحبًا!" أو "شكرًا لك على النقر!".
باستخدام JavaScript، يمكن لمطوري الويب إنشاء مواقع ويب جميلة ومفيدة، مما يضمن استمتاع الزائرين بوقتهم على الإنترنت.
عند بناء موقع ويب، نبدأ بلغة HTML. HTML هي بمثابة هيكل صفحة الويب، حيث تُظهر أماكن الصور والنصوص والأزرار. ثم نستخدم CSS لإضافة الألوان والأنماط. CSS هي بمثابة الملابس التي تُضفي على الهيكل مظهرًا جذابًا.
يُضاف جافا سكريبت إلى HTML وCSS لجعل الموقع تفاعليًا. وهو بمثابة العقل الذي يُوجّه الموقع نحو ما يجب فعله عند تفاعل شخص ما معه.
على سبيل المثال، عند النقر على زر في صفحة ويب، يعرض HTML الزر، ويضفي CSS مظهرًا جذابًا، ويطلب JavaScript من صفحة الويب إظهار رسالة مخفية. هذا المزيج يجعل مواقع الويب ذكية وسهلة الاستخدام.
لنأخذ مثالاً. لنفترض أن لدينا صفحة ويب تحتوي على زر "انقر هنا!". عند النقر على هذا الزر، تظهر رسالة في جافا سكريبت تقول "مرحبًا يا صديقي!". هذا شيء بسيط ولكنه رائع يُسمى التفاعلية.
قبل الخوض في أمثلة شيقة، علينا تعلم بعض الكلمات الأساسية في جافا سكريبت. هذه الكلمات بمثابة وحدات بناء تساعدنا في كتابة التعليمات. من أهم هذه الوحدات المتغيرات والدوال والأحداث.
المتغيرات: المتغير أشبه بصندوق صغير. في هذا الصندوق، يمكنك تخزين شيء مميز. قد يكون كلمة، أو رقمًا، أو حتى صورة. عندما نريد استخدام هذه القيمة لاحقًا، نستخرجها ببساطة من الصندوق.
على سبيل المثال، قد يكون لديك صندوق باسم "الاسم" يُخزّن فيه كلمة "أليس". تخيّل الأمر كما لو كنت تكتب على ورقة لاصقة وتضعها في صندوق، فكلما احتجت لمعرفة الاسم، اقرأ الورقة.
الدوال: الدالة هي مجموعة من التعليمات تعمل معًا. تشبه الوصفة التي تُخبر الحاسوب بكيفية صنع كعكة. في كل مرة تُريد فيها صنع الكعكة، اتبع الوصفة (أو الدالة) للحصول على نفس النتيجة.
عند كتابة جافا سكريبت، يُمكننا إنشاء دوال لأداء مهام بسيطة. على سبيل المثال، يُمكن للدالة إظهار رسالة ترحيب عند بدء لعبة أو زيارة صفحة ويب.
الأحداث: الحدث هو ما يحدث على صفحة ويب. عند النقر على زر، أو تحريك الماوس، أو الضغط على مفتاح، تُعتبر هذه الإجراءات أحداثًا. يرصد جافا سكريبت هذه الأحداث ثم يُحدث شيئًا ما. يشبه الأمر جرس الباب الذي يرن عند دخول أحدهم.
لنلقِ نظرة على بعض الأمثلة البسيطة جدًا لأكواد جافا سكريبت. توضح هذه الأمثلة كيفية إعطاء التعليمات للحاسوب.
المثال 1: عرض رسالة
فيما يلي رمز صغير يعرض رسالة:
<code>var message = "مرحبا بالعالم!"; تنبيه(الرسالة)؛
في هذا الكود، تُخبر الكلمة var الحاسوب بإنشاء مربع باسم message وتخزين عبارة "Hello, world!" داخله. ثم يعرض الأمر alert() هذه الرسالة في نافذة صغيرة على الشاشة.
المثال 2: استخدام دالة
فيما يلي وظيفة بسيطة تعرض التحية:
<كود>
دالة التحية () {
تنبيه("مرحبا يا صديقي!");
}
</code>تُسمى هذه الدالة "تحية" . عند استخدامها، تُخبر الحاسوب بعرض نافذة تحية "مرحبًا يا صديقي!".
المثال 3: الاستجابة للنقرة
يمكنك جعل صفحة الويب تفعل شيئًا ما عند النقر على زر. انظر إلى هذا الكود:
<كود> <button onclick="greet()">انقر هنا!</button> </code>
هنا، عند الضغط على زر "انقر هنا!"، تُفعّل وظيفة الترحيب ، وسترى رسالة الترحيب. يُظهر هذا كيف يستجيب جافا سكريبت لخطواتك ويُغيّر الصفحة تبعًا لذلك.
لنتعرف أكثر على المتغيرات. المتغير هو اسم يُطلق على صندوق يحمل قيمة، كرقم أو كلمة. تخيل المتغير كصندوق ألعابك المفضل الذي تحتفظ فيه بألعابك المفضلة. يمكنك النظر داخل الصندوق في أي وقت لترى ما بداخله.
على سبيل المثال، يمكنك إنشاء متغير يُسمى age لتخزين عمرك، أو متغير يُسمى color لتخزين لونك المفضل. باستخدام JavaScript، يمكنك تغيير هذه القيم وقتما تشاء، تمامًا كما لو كنت تضع لعبة جديدة في صندوقك.
بهذه الطريقة، تساعدك المتغيرات على حفظ المعلومات واستخدامها لاحقًا. فهي تجعل شفرتك منظمة وسهلة القراءة. كلما تعلمت أكثر، ستدرك أهمية المتغيرات في كتابة البرامج.
الدوال هي كتل برمجية خاصة تُنجز مهمة. تخيّل أن لديك تعويذة سحرية في كتاب قصص. في كل مرة تُنطق فيها الكلمات السحرية، يحدث شيء مذهل. في جافا سكريبت، تُشبه الدالة تلك التعويذة السحرية.
اكتب قائمة تعليمات داخل دالة، ثم يمكنك استخدامها لتنفيذ المهمة وقتما تشاء. هذا يساعدك على تجنب كتابة نفس التعليمات مرارًا وتكرارًا.
على سبيل المثال، إذا أردت قول "مرحبًا!" على عدة صفحات مختلفة، يمكنك كتابة دالة واستدعاؤها في كل مرة. هذا يُبقي شيفرتك مختصرة ومرتبة. الدوال تُسهّل عملك وتُنظّم برامجك.
الأحداث هي أفعال تحدث على صفحة الويب. قد تكون نقرة، أو حركة فأرة، أو حتى عند تحميل صفحة الويب. يستجيب جافا سكريبت لهذه الأحداث ويتفاعل معها.
تخيّل عندما تضغط جرس باب منزلك. يرن الجرس ويأتي إليك أحدهم. في صفحات الويب، عندما تنقر على زر، يستمع جافا سكريبت إلى هذه النقرة ثم يُنفّذ أمرًا ما، تمامًا مثل جرس الباب.
على سبيل المثال، قد يكون لديك زرٌّ يُغيّر لون الصفحة. عند النقر عليه، يُفعّل حدثٌ ما، ويُغيّر جافا سكريبت اللون. هذا يُظهر كيف يُمكن للأحداث البسيطة أن تجعل موقع الويب حيويًا وممتعًا.
الأحداث ميزة أساسية تجعل صفحات الويب تفاعلية. فهي تساعد الحاسوب على الاستجابة لما تفعله آنيًا.
لنجمع الأفكار معًا بمثال بسيط. تخيّل صفحة ويب تُرحّب بك عند النقر على زر. إليك نسخة مبسطة من الكود الذي قد تراه:
<كود>
<!DOCTYPE html>
<html>
<الرأس>
<title>صفحة الترحيب</title>
<النص>
دالة sayHello() {
تنبيه("مرحبًا بكم في موقعنا!");
}
</script>
</head>
<الجسم>
<h1>مرحبا!</h1>
<p>انقر على الزر أدناه لرؤية رسالة الترحيب.</p>
<button onclick="sayHello()">انقر فوقي!</button>
</body>
</html>
</code>يُنشئ هذا الكود صفحة ويب بسيطة. يُنشئ HTML الصفحة، ويُضفي CSS (إن وُجد) مظهرًا جذابًا عليها، ويُشغّل JavaScript الزر. عند النقر على الزر، تُفعّل وظيفة sayHello وتظهر رسالة.
هذا عرض توضيحي بسيط لكيفية إضفاء جافا سكريبت لمسةً من الإثارة على صفحة ويب جامدة. يُظهر لك كيف يُمكن لأجزاء صغيرة من الكود أن تُغير ما يحدث على شاشتك.
يُستخدم جافا سكريبت في العديد من المواقع الإلكترونية التي تزورها يوميًا. على سبيل المثال، عند استخدام موقع تسوق إلكتروني، يُساعدك جافا سكريبت على تحديث سلة التسوق دون الحاجة إلى إعادة تحميل الصفحة. وعند تصفح موجزات مواقع التواصل الاجتماعي، يضمن جافا سكريبت ظهور المنشورات الجديدة بسلاسة.
حتى الأدوات البسيطة، كالآلات الحاسبة على صفحات الويب، تعمل مع جافا سكريبت. تخيّل آلة حاسبة تجمع وتطرح وتضرب وتقسم الأرقام. تكتب جافا سكريبت التعليمات اللازمة لتشغيل الآلة الحاسبة، تمامًا كما تستخدم أصابعك للعدّ والجمع.
في عالم الألعاب، تُساعد جافا سكريبت على خلق تجارب ممتعة. بفضلها، تُصبح الرسوم المتحركة الملونة، والشخصيات المتحركة، والألغاز التفاعلية، ممكنة. فهي تجعل عالمنا الرقمي أكثر جاذبية.
في كل مرة تتفاعل فيها مع موقع ويب ديناميكي، سواء كنت تتحقق من الطقس أو تشاهد مقطع فيديو أو تلعب لعبة، يعمل JavaScript خلف الكواليس لجعل هذه التجربة سلسة وسريعة الاستجابة.
مع تقدمك في السن وتعلمك المزيد عن جافا سكريبت، قد تبدأ بإنشاء مشاريعك الصغيرة الخاصة. يمكنك إنشاء تطبيق رسم بسيط باستخدام الفأرة للرسم، أو إنشاء لعبة صغيرة تتحرك فيها الشخصيات على الشاشة. الاحتمالات لا حصر لها!
يمكن أن تكون المشاريع بسيطة أو معقدة حسب رغبتك. حتى البدء بزر بسيط يتغير لونه يمكن أن يكون مشروعًا ممتعًا. مع كل مشروع صغير، تتعلم المزيد عن كيفية عمل جافا سكريبت.
في هذه المشاريع، ستستخدمون الأفكار الأساسية التي تعلمناها اليوم: المتغيرات لتخزين المعلومات، والوظائف لأداء المهام، والأحداث للتعامل مع التفاعلات. كل مشروع يُساعدكم على تحسين مهاراتكم في حل المشكلات وزيادة إبداعكم في التفكير.
متعة إنشاء شيء من الصفر مُثيرة للغاية. مع جافا سكريبت، لديك القدرة على تحويل الأفكار إلى تجارب رقمية حقيقية. الأمر أشبه برسم صورة ثم تجسيد شخصياتها!
قد يكون تعلم لغة جديدة ممتعًا ومثيرًا للاهتمام. إليك بعض النصائح البسيطة التي قد تساعدك في رحلتك مع جافا سكريبت:
تذكر أن كل خبير كان مبتدئًا. استمتع باكتشاف كيفية عمل جافا سكريبت، وسرعان ما ستتمكن من إنشاء مواقع ويب رائعة خاصة بك.
مع ازدياد معرفتك بلغة جافا سكريبت، قد تسمع عن أفكار أكثر تقدمًا. لكن لا تقلق! ركّز الآن على الأساسيات. عندما تصبح مستعدًا، يمكنك تعلم الحلقات والشروط والمصفوفات.
على سبيل المثال، تُشبه الحلقة الدوارة لعبة دوامة تدور وتُكرر نفس المهمة عدة مرات. تساعد الشروط الحاسوب على اتخاذ القرارات، مثل الاختيار بين إجراءين مختلفين بناءً على ما يحدث على صفحة الويب.
هذه الأفكار تُضفي نكهات إضافية تُضفي على برمجتك طابعًا أكثر تشويقًا. عندما تكبر وتزداد معرفتك بجافا سكريبت، يمكنك تجربة هذه الأفكار المتقدمة تدريجيًا. اليوم، يكفي تعلم الأجزاء البسيطة.
كل خطوة صغيرة في تعلم جافا سكريبت تبني أساسًا قويًا للمستقبل. كن فخورًا بكل خطوة تخطوها في تعلم جافا سكريبت!
في هذا الدرس اكتشفنا:
تذكر أن تعلم جافا سكريبت رحلة. كل ممارسة تُحسّن من ذكائك وإبداعك. استمتع بالتعلم واستكشاف سحر تطوير الويب!