التركيب وأول برنامج Hello World — JavaScript

ما هذا ولماذا؟

تخيل أنك تعطي أوامر لروبوت. تقول: "أيها الروبوت، أشعل الضوء"، فيقوم بتشغيله. ولكن لكي يفهمك الروبوت، يجب أن تتحدث معه بلغة خاصة. الأمر نفسه مع الكمبيوتر: لكي يقوم بشيء ما، يجب أن تعطيه أمرًا بلغة برمجة.

JavaScript (ويُختصر إلى JS) هي إحدى هذه اللغات. إنها مشهورة جدًا لأنه يمكن استخدامها "لإضفاء الحياة" على صفحات الويب. عندما تزور موقعًا وترى صورة تتكبير عند تمرير الماوس عليها، أو قائمة تظهر، أو نوافذ منبثقة - فغالبًا ما يكون ذلك بفضل JavaScript.

لنقم بتشبيه. تخيل أنك مدرس تربية رياضية. تقول للطلاب: "أيها الفصل، قفوا!"، "ارفعوا يدكم اليمنى!"، "تقدموا خطوة للأمام!". إذا قلت "قفوا" باللغة الصينية، فلن يفهمك أحد. أنت بحاجة إلى لغة مفهومة. JavaScript هي بالضبط هذه اللغة المفهومة للمتصفح (البرنامج الذي تستخدمه لتصفح المواقع، مثل Chrome وFirefox وSafari).

لماذا تتعلم JavaScript؟

• إنها في كل مكان: تقريبًا كل موقع ويب يستخدم JavaScript.
• إنها مرئية: ترى نتيجة أفعالك فورًا.
• إنها سهلة للبدء: لكتابة أول برنامج لك، لا تحتاج إلى تثبيت برامج معقدة - يكفي مفكرة عادية ومتصفح.
• إنها مطلوبة: المبرمجون الذين يعرفون JavaScript مطلوبون جدًا من قبل الشركات.

في هذه المقالة، سنتعلم كيفية تثبيت "الأدوات" للعمل مع JavaScript وسنكتب أول برنامج لنا - "Hello, World!". هذا تقليد لجميع المبرمجين: البرنامج الأول دائمًا يخرج هذه التحية. اعتبره "الخطوة الأولى" في عالم البرمجة.

إذا كنت تعرف Python بالفعل: في Python كنت تكتب print("Hello, World!"). في JavaScript سيبدو الأمر مختلفًا قليلاً، لكن المعنى واحد - إظهار النص على الشاشة.

أمثلة على الكود مع الشرح

قبل كتابة الكود، دعنا نجهز "مكان العمل". ستحتاج إلى شيئين:

1. متصفح (Chrome, Firefox, Edge, Safari - أي واحد سيفي بالغرض).
2. محرر نصوص - برنامج حيث ستكتب الكود. أبسط خيار هو "المفكرة" (Windows) أو "TextEdit" (Mac) في وضع النص العادي. لكن من الأفضل تنزيل محرر خاص، مثل VS Code (Visual Studio Code) - فهو مجاني ومريح جدًا.

كيف تتحقق من أن كل شيء يعمل؟ هناك طريقتان لتشغيل JavaScript:

• مباشرة في المتصفح (وحدة التحكم): اضغط F12 (أو Ctrl+Shift+I) على لوحة المفاتيح، افتح علامة التبويب "Console" (وحدة التحكم) واكتب الكود هناك. هذا سريع، لكنه غير مريح للبرامج الكبيرة.
• عبر ملف HTML: سنقوم بإنشاء ملف بامتداد .html، بداخله سيكون كود JavaScript الخاص بنا. هذه هي الطريقة الصحيحة.

لنبدأ بالطريقة الثانية. أنشئ مجلدًا جديدًا على الكمبيوتر، سمّه مثلاً "JS_دروس". بداخله، أنشئ ملفًا باسم index.html (من المهم أن يكون الامتداد .html وليس .txt). افتح هذا الملف في محرر النصوص.

ألصق فيه القالب الأساسي التالي:

    
    



    

    




    

        
🍪
        
Сначала примите условия
        

            Чтобы войти на сайт, необходимо принять соглашение об использовании файлов cookie.
            Мы используем их для авторизации и улучшения работы сайта.


            Политика конфиденциальности
        
        Принять и продолжить
        Закрыть
    




    

        

            🍪 Мы используем файлы cookie для авторизации, аналитики и улучшения работы сайта.
            Продолжая пользоваться сайтом, вы соглашаетесь с нашей
            политикой конфиденциальности.
        
        

            Принять
            Только необходимые
        
    

الآن احفظ الملف وافتحه في المتصفح (فقط انقر نقرًا مزدوجًا عليه). سترى صفحة فارغة. لم يحدث شيء بعد، لأننا لم نكتب الكود. دعنا نصلح هذا!

مثال 1: "Hello, World!" الكلاسيكي

أبسط طريقة لإظهار النص هي استخدام الأمر alert(). إنه يعرض نافذة منبثقة مع رسالة. ألصق الكود التالي بين الوسمين <script> و </script>:

// هذا تعليق. الكمبيوتر يتجاهله.
// هو ضروري لشرح الكود للبشر.

// alert() هي دالة مدمجة (مثل الأمر).
// هي تظهر نافذة برسالة.
alert('مرحبا بالعالم!'); // النص الذي نريد إظهاره، نكتبه بين علامتي اقتباس.

ماذا سيحدث؟ عندما تفتح (أو تحدث) الصفحة، ستظهر نافذة بها نص "مرحبا بالعالم!". لإغلاقها، تحتاج إلى الضغط على "موافق".

التحليل:

• alert - هو اسم الأمر. يخبر المتصفح: "أظهر نافذة".
• الأقواس المستديرة () - بداخلها نمرر ما نريد قوله. في هذه الحالة - النص.
• علامات الاقتباس ' ' - هي ضرورية لكي يفهم الكمبيوتر أن هذا نص وليس أمرًا. يمكن استخدام علامات الاقتباس المزدوجة " " أيضًا.
• الفاصلة المنقوطة ; - هي مثل النقطة في نهاية الجملة. تقول: "الأمر انتهى". يجب وضعها بعد كل أمر.

المقارنة مع Python: في Python كنت ستكتب print("Hello, World!"). الفرق هو أن print يخرج النص إلى وحدة التحكم، بينما alert يخرجه إلى نافذة منبثقة.

مثال 2: الإخراج إلى وحدة تحكم المطور

النوافذ المنبثقة ليست مريحة جدًا إذا كنت بحاجة إلى إخراج الكثير من المعلومات. يستخدم المبرمجون غالبًا وحدة التحكم - مكان خاص لتصحيح الأخطاء. لإخراج النص هناك، يتم استخدام الأمر console.log().

استبدل الكود السابق في <script> بهذا:

// console هو كائن (هيكل معقد) مسؤول عن وحدة التحكم.
// .log() هي طريقة (إجراء) تسجل رسالة في وحدة التحكم.

console.log('هذه رسالة في وحدة التحكم!');
console.log('يمكن إخراج رقم:', 42);
console.log('يمكن إخراج لا