برنامج تعليمي لجافاسكريبت: مرحبًا بالعالم

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

أمثلة جافاسكريبت للرسائل القصيرة:

جافاسكريبت إرسال رسالة قصيرة باستخدام واجهة برمجة التطبيقات REST HTTP (عينة كود)
جافاسكريبت إرسال رسائل متعددة باستخدام واجهة برمجة التطبيقات REST HTTP (عينة كود)
جافاسكريبت جدولة رسالة قصيرة باستخدام واجهة برمجة التطبيقات REST HTTP (عينة كود)
جافاسكريبت استقبال رسالة قصيرة باستخدام واجهة برمجة التطبيقات REST HTTP (عينة كود)
جافاسكريبت حذف رسالة قصيرة باستخدام واجهة برمجة التطبيقات REST HTTP (عينة كود)
تنزيل أحدث مكتبة واجهة برمجة تطبيقات الرسائل القصيرة لجافاسكريبت من Github

ما هي HTML

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

ما هي جافاسكريبت

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

ما هو خادم الويب

يمكن أن يشير مصطلح خادم الويب إلى الأجهزة أو البرامج، أو كليهما يعملان معًا. من جانب الأجهزة، خادم الويب هو جهاز كمبيوتر يستخدم لخدمة عملاء الويب. من جانب البرامج، تعمل خوادم الويب على تشغيل كود PHP يتعامل مع طلبات HTTP لعملاء الويب.

ما هو متصفح الويب

متصفح الويب هو تطبيق للوصول إلى شبكة الويب العالمية. عندما يطلب المستخدم صفحة ويب من موقع معين، يقوم متصفح الويب باسترداد المحتوى الضروري من خادم الويب ثم يعرض الصفحة على جهاز المستخدم. يعمل بطريقة تمكن المستخدم من إجراء طلبات HTTP إلى خوادم الويب. باستخدام متصفح الويب، يمكننا الوصول إلى خادم الويب عن طريق كتابة عنوان IP الخاص به أو نطاقه في حقل URL.

ما هو WAMP

يشير WampServer إلى مجموعة حلول لنظام التشغيل Microsoft Windows تتكون من خادم الويب Apache، OpenSSL لدعم SSL، قاعدة بيانات MySQL ولغة برمجة PHP. يعمل WAMP مثل خادم افتراضي على جهاز الكمبيوتر الخاص بك. يسمح لك باختبار جميع ميزات الويب دون أي عواقب، حيث أنه محلي على جهازك وغير متصل بالإنترنت. سنستخدمه لاستضافة موقع HTML الخاص بنا محليًا.

كيف تكتب أول برنامج لك في جافاسكريبت

لكتابة أول برنامج لك في جافاسكريبت:

1. قم بتثبيت WAMP على جهاز الكمبيوتر الخاص بك
2. قم بإعداد خادم WAMP
3. قم بإنشاء ملف index.html جديد
4. قم بتأليف أول مستند HTML الخاص بك
5. اكتب أول كود جافاسكريبت في ملف .html
6. قم بتشغيل أول برنامج جافاسكريبت الخاص بك
7. افتح وضع التفتيش للإخطار بالأخطاء
8. قم بإصلاح الخطأ

المتطلبات الأساسية

• جهاز كمبيوتر يعمل بنظام Windows 10
• بيئة WAMP
• متصفح Chrome
• مثال HTML مرحبًا بالعالم
• مثال جافاسكريبت مرحبًا بالعالم

تنزيل WAMP

في هذا الفيديو، سنقوم بتنزيل خادم WAMP. هذا هو البرنامج الذي سنستخدمه لاستضافة كود جافاسكريبت الخاص بنا. أولاً، يجب عليك زيارة https://wampserver.com. وتنزيل مثبت WampServer (الفيديو 1). بعد انتهاء التنزيل، سيكون المثبت موجودًا في دليل التنزيل المحدد في متصفحك. فتح هذا الملف exe سيبدأ عملية التثبيت لخادم WAMP.

تنزيل WampServer

ابدأ بالذهاب إلى https://wampserver.com في متصفحك. انقر على زر تنزيل في الأعلى ليتم التمرير تلقائيًا إلى قسم التنزيلات. انقر على WAMPSERVER 64 بت (X64) لتنزيل مثبت WampServer إلى جهاز الكمبيوتر الخاص بك (الشكل 1).

تثبيت WAMP

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

اكتب ونزّل أول صفحة HTML لك

لكتابة أول مستند HTML لك، يجب عليك إنشاء ملف index.html جديد في مجلد \www\ الخاص بـ WampServer.
المسار: C:\wamp64\www\

<!DOCTYPE html>
<html>
	<head>
		<title>مرحبًا بالعالم!</title>
	</head>
	<body>
		<h1 id="text">مرحبًا بالعالم!</h1>
	</body>
</html>
	

اكتب أول مستند HTML لك

يظهر هذا الفيديو كيف يمكنك إنشاء مستند HTML (الفيديو 3). سنستخدم هذا المستند لاحقًا لاستضافته محليًا. نظرًا لأننا نقوم بتشغيل WampServer على جهاز الكمبيوتر الخاص بنا، يمكننا مشاهدة ملفاتنا على الرابط http://localhost/. للقيام بذلك، يجب عليك إنشاء أو وضع ملف HTML الخاص بك في مجلد \www\.
المسار: C:\wamp64\www\

اكتب وشغّل أول برنامج JavaScript لك

في هذا المثال سنقوم باستبدال النص في وسم <h1> ذو الـ id "text". للقيام بذلك سنستخدم أداة اختيار JavaScript المدمجة. قد يبدو هذا معقدًا، لكنه سهل. سنقوم باختيار العنصر ذو الـ id "text"، وسنضع سمة innerText (التي تشبه خاصية للعنصر) مساوية للنص "مرحبًا Ozeki!".

/*هذا الكود JavaScript سيقوم باستبدال النص في الوسم
الذي يحمل الـ id المسمى "text".*/
document.getElementById("text").innerText = "مرحبًا Ozeki!";
	

اكتب وشغّل كود JavaScript الخاص بك

يعرض هذا الفيديو كيف يمكنك كتابة كود JavaScript وتشغيله داخل متصفحك (الفيديو 4). الأمر نفسه الذي يعرض الرسالة يجب أن يوضع داخل وسم script. هذه الوسوم تشير إلى أن قطعة كود JavaScript يجب تنفيذها هنا. الكود نفسه هو دالة تحتوي على "مرحبًا Ozeki" كوسيط لها. بعد كتابة وحفظ الكود الخاص بك، يمكنك تشغيله داخل متصفحك.

ضع خطأ في كود JavaScript

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

ما هو خطأ التركيب؟

خطأ التركيب يعني أنني لا أفهم. إذا تحدثت مع شخص ما باللغة الإنجليزية و لم يفهم ما تقوله، سيرد بـ "أنا لا أفهم". إذا تحدثت مع الكمبيوتر بلغة JavaScript ولم يفهم الكمبيوتر ما تقوله، سيرد بـ "خطأ تركيب".

كيفية التعامل مع خطأ التركيب في JavaScript؟

في الكود أدناه سنقوم بإنشاء خطأ تركيب عمدًا بعدم وضع فاصلة منقوطة بعد سطر Hello World. سترى كيف يتفاعل الكمبيوتر، كيف نصلح الخطأ، وكيف نشغّل برنامج الكمبيوتر بنجاح.

أصلح الخطأ في كود JavaScript الخاص بك

يظهر هذا الفيديو كيف يمكنك التحقق مما إذا كان هناك خطأ في الكود الخاص بك باستخدام وضع التفتيش في متصفحك. هذه ميزة مفيدة للغاية لمساعدتك في إصلاح أخطائك (الفيديو 5). تحتوي وحدة التحكم في وضع التفتيش على رسائل خطأ تشير إلى ما حدث خطأ. يمكنك النقر على فهرس هذه الرسائل لتحديد السطر الدقيق في الكود الذي تسبب في الخطأ.

ملخص

المقال أعلاه يتعلق بما تحتاج إلى كتابته في أول برنامج JavaScript لك، وهو مثال كود Hello World. قد يبدو هذا البرنامج بسيطًا، وقد لا يفعل الكثير، ولكن هكذا تبدأ الأشياء العظيمة؛ باتباع هذا الدليل تكون قد اتخذت خطوتك الأولى في أن تصبح مطور JavaScript. معرفة كيفية البرمجة بلغة JavaScript وإنشاء برامج كحل لمشاكلك سيساعدك كثيرًا في جعل العمل أكثر سلاسة.

ما تعلمته هنا قيم، هناك المزيد من الأدلة المفيدة على موقع Ozeki، تقدم! لننتقل إلى المقال التالي حول هذا الموضوع حول كيفية إرسال SMS من JavaScript.

الآن قم بتنزيل بوابة Ozeki للرسائل القصيرة وابدأ العمل!