مقدمة الى JavaScript

مقدمة الى JavaScript

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

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

في هذا المقال نتعرف على:

• ما هي لغة جافا سكريبت (JavaScript )؟
• لماذا نتعلم جافا سكريبت JavaScript؟
• خصائص و مميزات جافا سكريبت JavaScript.
• تطبيقات جافا سكريبت (JavaScript).
• تهيئة بيئة العمل مع JavaScript.
• ماهو Nodejs ..؟

ما هي لغة جافا سكريبت (JavaScript )؟

جافا سكربت (JavaScript) هي لغة برمجة عالية المستوى (High Level Language)، تُستخدم بشكل واسع في تطوير الويب لإنشاء صفحات تفاعلية وديناميكية. على الرغم من تشابه الاسم مع لغة Java، إلا أن اللغتين مختلفتان تمامًا في البنية والاستخدام. بدأت جافا سكربت JavaScript كلغة بسيطة مخصصة للمتصفحات، لكنها تطورت لتصبح واحدة من أقوى اللغات البرمجية المستخدمة على نطاق واسع في الواجهة الأمامية (Front-end) والخلفية (Back-end) للتطبيقات.

تم تطوير جافا سكربت (JavaScript) في عام 1995 على يد بريندان آيش، Brendan Eich, عالم حاسوب و مبرمج في شركة Netscape للاتصالات وفي أثناء عمله في شركة Netscape وخلال عشرة أيام فقط، أنشأ النسخة الأولى من اللغة تحت اسم "Mocha"، ثم تغير اسمها إلى "LiveScript"، وأخيرًا إلى "JavaScript" لأسباب تسويقية. ومنذ ذلك الحين، تطورت اللغة بشكل كبير وأصبحت جزءًا أساسيًا من تقنيات الويب الثلاث: HTML، CSS، JavaScript ، وأهم إصدارات لغة JavaScript :

• الإصدار JavaScript ES5 في 2009 حيث طُرِحَت Node.js لاستخدام جافا سكريبت كلغة من جانب الـserver .
• وكان الاصدار ES6 في 2015 مراجعة مهمة لجافا سكريبت، حيث أضاف ميزات متقدمة إليها.
• ثم توالت الإصدارات وفي يونيو 2023 وصلت JavaScript إلى الإصدار ( ECMAScript 2023 (ES14، وهو الإصدار الرابع عشر.
• و في يونيو 2024 تم اعتماد (ECMAScript 2024 (ES15 أحدث إصدار رسمي حتى الآن.

ببساطة يمكن القول أن جافا سكريبت (JavaScript) لغة برمجة تُستخدم لإنشاء عناصر ديناميكية وتفاعلية في تطبيقات الويب. حيث تتميز بسهولة تطبيقها نظراً لتكاملها مع HTML، CSS. وهي لغة مفتوحة المصدر ومتعددة المنصات. و توفر مدونة Kholood tech Notes مجموعة مقالات عن كلاً HTML، CSS.

لماذا نتعلم جافا سكريبت JavaScript؟

جافا سكريبت (JavaScript) لغة أساسية للطلاب والمحترفين و خاصةً في مجال تطوير الويب.فيما يلي أهم الأسباب التي تجعل لغة JavaScript للمبرمجين والمطورين:

• جافا سكريبت (JavaScript) هي لغة البرمجة الأكثر شيوعًا في العالم، مما يجعلها الخيار الأمثل للمبرمجين. فهي منتشرة في جميع أنحاء العالم وتستخدمها أيضًا شركات كبيرة مثل جوجل Google ، وميتا Meta، ومايكروسوفت Microsoft ، ولينكدإن LinkedIn وغيرها.
• جافا سكريبت (JavaScript) متوفرة في كل مكان، وتأتي مثبتة على جميع متصفحات الويب الحديثة، لذا لتعلمها، لا تحتاج إلى أي إعدادات خاصة. فجميع المتصفحات التي تعرفها حاليًا تدعم جافا سكريبت. مثل كروم Chrome وموزيلا فايرفوكس Mozilla Firefox و سفاري Safari.
• تعلم جافا سكريبت (JavaScript) يجعلك (Full-stack Developer ) قادر على العمل على تطويرالواجهات (Front-end) أو برمجة الفعلية (Back-end) فـ JavaScript تعتمد على استخدام أطر عمل مختلفة مثل jQuery وNode.JS وغيرها. كما توفر JavaScript العديد من الأطر والمكتبات المطورة مسبقًا، والتي يمكن استخدامها مباشرةً في تطوير البرمجيات. حيث تضم جافا سكريبت أكثر من 150 ألف مكتبة، وهي في نمو مستمر.
• امتد استخدام جافا سكريبت (JavaScript) الآن ليشمل تطوير تطبيقات الجوال، وتطبيقات سطح المكتب، وتطوير الألعاب. هذا يفتح لك العديد من الفرص كمبرمج جافا سكريبت. نظرًا للطلب المرتفع، تشهد لغة جافا سكريبت نموًا هائلاً في الوظائف والأجور المرتفعة لمن يتقنها. يمكنك تصفح مواقع التوظيف المختلفة للاطلاع على مزايا امتلاك مهارات جافا سكريبت في سوق العمل.

هناك آلاف الأسباب الوجيهة لتعلم برمجة جافا سكريبت. ولكن من المؤكد أن تعلم أي لغة برمجة، وليس جافا سكريبت فقط، يتطلب منك فقط البرمجة، ثم البرمجة، ثم البرمجة حتى تصبح محترفًا.

خصائص و مميزات جافا سكريبت JavaScript

ذكرنا أن لغة جافا سكريبت (JavaScript) من اللغات الأكثر شيوعاً واستخدماً ويرجع هذا إلى الخصائص والمميزات التي تجعلها من لغات البرمجة القوية والكثر استخداماً ومنها مايلي:

الإعداد السهل

إن كتابة كود جافا سكريبت JavaScript لا نحتاج إلى محرر نصوص برمجية معين. حتى أي شخص يمكنه كتابة كود JavaScript باستخدام المفكرة (Notepad). كما يمكن تنفيذ كود جافا سكريبت (JavaScript) في المتصفح دون الحاجة إلى أي مُفسّر أو مُجمّع. و بواسطة استخدام الوسم <script> يمكن اضافة كود جافا سكريبت إلى ملف HTML. كما يسمح لك هذا الوسم بإضافة كود جافا سكريبت إلى صفحة الويب من ملف جافا سكريبت خارجي ذي امتداد '.js'.

معالجة عناصر DOM

تتضمن طرقًا متنوعة للوصول إلى عناصر (DOM -Document Object Model) باستخدام سمات مختلفة، وتسمح بتخصيص عناصر HTML.

JSON

 تدعم جافا سكريبت تنسيق JSON لتخزين البيانات. حيث يرمز JSON إلى ترميز كائنات جافا سكريبت (JavaScript Object Notation) وهو تنسيق بيانات شائع الاستخدام لتبادل البيانات بين شبكتين، مثل الخادم والعميل (server and client).

البرمجة الوظيفية (Functional Programming)

تدعم جافا سكريبت JavaScript البرمجة الوظيفية Functional Programming. فهي تستخدم  الدوال غالبًا كوحدات بناء أساسية لحل المشكلات. فيمكن تعريف دالة من الدرجة الأولى، والدوال البحتة، والإغلاقات، والدوال من الدرجة العليا، ووظائف الأسهم، وتعبيرات الدوال، وغيرها.

البرمجة الموجهة للكائنات (Object-oriented Programming)

تحتوي JavaScript على الفئات (Classes)، و يمكننا تطبيق جميع مبادئ ومفاهيم البرمجة الموجهة للكائنات OOP باستخدام.مثل الوراثة، والتجريد، وتعدد الأشكال، والتغليف، وغيرها. المزيد في مقال البرمجة الموجهة للكائنات OOP.

البرمجة المعيارية (Modular Programming)

تتيح جافا سكريبت JavaScript كتابة الأكواد البرمجية في وحدات (Modules) مختلفة وربطها بالوحدة الأم. مما يُمكّن المطورين من كتابة أكواد قابلة للصيانة. بكتابة الأكواد البرمجية في وحدة منفصلة، يمكن تقليل تعقيد الكود البرمجية وإعادة استخدام كل وحدة عند الحاجة.

هندسة تعتمد على الأحداث (Event-driven Architecture)

تتيح الهندسة المعتمدة على الأحداث في JavaScript للمطورين إنشاء تطبيقات ويب تفاعلية وسريعة الاستجابة من خلال التعامل مع قاعدة مستخدمين كبيرة في آنٍ واحد. فالكثير من أشهر التطبيقات تستخدم JavaScript في بناء واجهاتها مثل Facebook مبنية عليها. أما نتفليكس Netflix ، فيُبنى باستخدام إطار عمل ReactJS. وبالمثل، تُبنى Amazon و PayPal و Airbnb و LinkedIn و X و غيرها، باستخدام JavaScript .

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

تطبيقات جافا سكيبت (JavaScript)

كما ذكرنا سابقًا، تُعد جافا سكريبت (JavaScript ) من أكثر لغات البرمجة استخدامًا (في الواجهات الأمامية والخلفية Front-end Back-end/). وتتواجد في معظم مجالات تطوير البرمجيات. نذكر هنا بعضًا منها هنا:

• معالجة صفحات HTML: تُساعدJavaScript في معالجة صفحات HTML بشكل فوري. يُساعد هذا في إضافة وحذف أي وسم HTML بسهولة باستخدام جافا سكريبت JavaScript ، وتعديل صفحات HTML لتغيير مظهرها وأسلوب عرضها بناءً على الأجهزة والمتطلبات المختلفة.
• إشعارات المستخدم User Notifications: يُمكن استخدام جافا سكريبت (JavaScript) لعرض نوافذ منبثقة ديناميكية على صفحات الويب لعرض أنواع مُختلفة من الإشعارات الظاهر للزوار الموقع .
• التحقق من صحة بيانات المستخدم Client side validation: يُعد هذا التحقق بالغ الأهمية للتحقق من أي مُدخلات مستخدم قبل إرسالها إلى الخادم، ولـ JavaScript دورًا هامًا في التحقق من صحة هذه المُدخلات في الواجهة الأمامية (Front-end) نفسها.
• تطبيقات الخادم Server Applications: بُنيت Node JS على بيئة تشغيل جافا سكريبت في متصفح Chrome لإنشاء تطبيقات شبكة سريعة وقابلة للتطوير. وهي مكتبة قائمة على الأحداث تُساعد في تطوير تطبيقات خادم متطورة للغاية، بما في ذلك خوادم الويب.
• تحميل البيانات الخلفية Back-end Data Loading: تُوفر JavaScript مكتبة Ajax التي تُساعد في تحميل بيانات الـ back-end أثناء القيام ببعض العمليات الأخرى.

أيضاً تتيح لنا JavaScript العمل مع العديد من المكتبات وأُطر العمل لأغراض متنوعة مثل إضافة طابع مميز للموقع أو تنفيذ للإتجاهات الحديثة في تقنية المعلومات، منها على سبيل المثال:

• مع مكتبات مكتبات RevealJS و BespokeJS تُتيح JavaScript إمكانية إنشاء العروض التقديمية Presentations تُضفي على الموقع مظهرًا وأسلوبًا مميزين.
• بإستخدام مكتبة ML5.js يُمكن للمطورين لإكمال المهام المتعلقة بالتعلم الآلي Machine learning.
• مع مكتبات مثل D3.js يمكن عمل تصور البيانات Data visualization بكفاءة.
• و تحتوي JavaScript على مكتبات متعددة وحزم NPM لتصميم الرسومات فيُمكننا استخدام HTML وCSS و JavaScript مع المكتبات لتطوير الألعاب (Game Developments).
• يُمكننا استخدام أطر عمل مثل React Native لإنشاء تطبيقات الجوال Mobile applications غنية بالميزات.
• تُستخدم جافا سكريبت JavaScript في إنترنت الأشياء (IoT -Internet of Things ) لإضافة وظائف إلى أجهزة مثل الساعات الذكية وسماعات الأذن وغيرها.
• تستخدم JavaScript في الحوسبة السحابية Cloud computing حيث يمكننا استخدام JavaScript في منصات الحوسبة بدون خوادم مثل Cloudflare وAWS lambda لكتابة ونشر الوظائف على السحابة.

تستمر هذه القائمة، فهناك مجالات متنوعة يستخدم فيها ملايين مطوري البرامج جافا سكريبت بسعادة لتطوير مواقع ويب وبرامج أخرى رائعة.

تهيئة بيئة العمل مع JavaScript

قبل البدء في كتابة الأكواد باستخدام جافا سكريبت JavaScript، من المهم تهيئة بيئة العمل المناسبة التي تسهّل عليك البرمجة والتجربة والتعلم. ولحسن الحظ، جافا سكربت لا تحتاج إلى إعدادات معقدة لتبدأ بها. إليك خطوات بسيطة لتهيئة بيئة العمل:

1. متصفح حديث

تُنفذ جافا سكربت JavaScript على المتصفح، لذا أول ما تحتاجه هو متصفح حديث يدعم معايير الويب الحالية. من أفضل الخيارات:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari

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

2. محرر نصوص (Editor)

يفضّل استخدام محرر نصوص مخصص لكتابة الكود لتسهيل عملية التطوير، مثل:

• Sublime Text
• Atom (لم يعد مدعومًا رسميًا، لكنه لا يزال مستخدمًا من بعض المطورين)
• (Visual Studio Code -VS Code) الأكثر شيوعًا، ويدعم JavaScript بشكل ممتاز، مع ميزات مثل تلوين الكود، الإكمال التلقائي، وتشغيل الإضافات.

يُنصح بتثبيت VS Code لأنه مجاني وخفيف ويدعم العديد من أدوات التطوير التي تعمل على تحسين تجربة تطوير JavaScript ومن الإضافات المفيدة في VS Code :

• ESLint: لفحص الأخطاء وتحسين جودة الكود.
• Prettier: لتنسيق الكود بشكل منظم.
• Live Server: لتشغيل صفحة HTML مباشرة على خادم محلي ومشاهدة التحديثات فورًا.

3. تشغيل الكود مباشرة

هناك طريقتان أساسيتان لتشغيل كود JavaScript:

أ. ضمن صفحة HTML

يمكنك كتابة كود JavaScript داخل ملف HTML بين وسم <script> كما يلي:

<!DOCTYPE html>
<html>
	<head>
    	<title>JavaScript Example</title>
    </head>
    <body>
    	 <h1>Hi,everyone</h1>
         <script>
           alert("Hello, in JavaScript World!");
         </script>
    </body>
</html>

احفظ الملف بامتداد html وافتحه في المتصفح لترى النتيجة.

ب. في ملف منفصل

للمشاريع الأكبر، يُفضل وضع الكود في ملف خارجي بامتداد '.js' ثم تضمين الملف في صفحات المشروع بواسطة الوسم <script> على سبيل المثال لدينا الملف بإسم"scriptx.js" يتم تضمينه كتالي :

<script src="scriptx.js"></script>

وهذا يسهل تنظيم الكود وصيانتها.

4. تشغيل JavaScript خارج المتصفح (باستخدام Node.js)

إذا كنت ترغب في استخدام JavaScript خارج المتصفح (مثلاً لتطوير تطبيقات الخادم أو سكربتات الأتمتة)، يمكنك تثبيت Node.js:

انتقل إلى (https://nodejs.org) وقم بتحميل الإصدار المناسب لنظامك.ثم بعد التثبيت، يمكنك تشغيل أي ملف JavaScript باستخدام Terminal هكذا:

node myscript.js

ما هو Node.js؟

Node.js هو بيئة تشغيل JavaScript على الخادم (خارج المتصفح). تم تطويره باستخدام محرك V8 الخاص بمتصفح Google Chrome، و يتيح للمطورين تشغيل أكواد JavaScript على الحواسيب مباشرة، مما يسمح ببناء تطبيقات خوادم قوية مثل مواقع الإنترنت الديناميكية، واجهات برمجة التطبيقات (APIs)، وتطبيقات سطر الأوامر.

لماذا أستخدم Node.js؟

• لتشغيل JavaScript على جهازك مباشرة دون الحاجة لمتصفح.
• لبناء مشاريع كاملة باستخدام JavaScript فقط (Front-End and Back-End).
• لتثبيت الأدوات والمكتبات عبر مدير الحزم npm.
• لإنشاء خوادم ويب كاملة باستخدام JavaScript فقط (مثل APIs).
• لتشغيل سكربتات أتمتة أو أدوات برمجية.

خطوات تثبيت Node.js:

• انتقل إلى الموقع الرسمي: https://nodejs.org
• قم بتحميل النسخة المناسبة لنظامك (غالبًا يُفضّل استخدام LTS = Long Term Support) دعم طويل المدى.
• بعد التثبيت، تحقق من نجاح التثبيت بفتح الطرفية (Terminal) أو موجه الأوامر ( CMD - Command Prompt) واكتب:

  node -v

  
  إذا ظهرت نسخة مثل v20.10.0، فهذا يعني أن Node.js مثبت بنجاح.

مدير الحزم npm

npm – مدير الحزم (npm -Node Package Manager) يأتي مع Node.js والذي يتيح لنا :

• تثبيت مكتبات جاهزة (مثل Express، React، وغيرها).
• إدارة التبعيات في المشروع.
• تشغيل سكربتات التطوير.

كيفية تشغيل ملف JavaScript باستخدام Node.js

ننشئ ملف جديد مثل test.js ثم نكتب فيه كود للـ JavaScript، مثلاً سنقوم بطباعة رسالة :

console.log("Hello, everyone from Node.js!");

ثم نقوم بعمل run للملف test.js عبر الأمر :

node test.js

ستظهر الرسالة مباشرة.

تهيئة بيئة العمل مع JavaScript سهلة ولا تحتاج إلى خطوات معقدة. يمكنك البدء مباشرة من المتصفح أو باستخدام أدوات متقدمة مثل VS Code و Node.js حسب ما يناسب اهدافك. اختيار البيئة المناسبة من البداية يسهم بشكل كبير في تسهيل التعلم وتطوير المهارات بسرعة وفعالية.

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