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

أكوادي - Akwade - تصميم مواقع

المقدمة

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

لغة JavaScript هي أحد اللغات الثلاثة التي يجب على جميع مطورين الويب تعلمها .

  • Structure ( هيكلية الصفحة ) : والمسئول عنه هو الـ HTML اي كل ما يتم وضعه من عناصر الـ  HTML  في صفحة الويب والتي من خلالها يتم تقسيم صفحة الإنترنت ( مثل وضع عناووين أو فقرات أو صور في الصفحة )
  • PresentationStyle ( شكل الصفحة ) : والمسئول عنه هو الـ  CSS وهو كيفيه ظهور كل عنصر من عناصر الـ  HTML في صفحة الويب ، ما هو حجمه ، لونه ، شكله !
  • Behavior ( السلوك ) : والمسئول عنه هو الجافا سكربت وهو كيفيه تفاعل هذا العنصر مع المستخدم ( مثل ماذا سيحدث في حال ضغط المستخدم على زر معين بالصفحة )

 

سنقوم الان بوضع عنصر من عناصر الـ HTML  عبارة عن زر بسيط فقط ومكتوب به Click Me !

<button> Click Me </button>

النتيجة ستكون :

Button Element HTML

 

الأن سنقوم بإضافة بعض الجمالية مثل لون الزر والخلفية ونوع الخط  من خلال الـ CSS للزر ليكون بشكل أفضل ..

button {
	background: #673ab7;
	color: #FFF;
	border: 1px solid #371c66;
	padding: 12px 22px;
	border-radius: 5px;
	font-family: monospace;
}

 

بعد اضافة خصائص الـ CSS سيكون شكل الزر كالتالي:

Add Css Style To Button

 

الان نريد عندما يقوم المستخدم بالضغط على هذا الزر ان تخرج له رسالة تنبيه مثلاََ انك قمت بالضغط على الزر ، هذا ما سنقوم به من خلال JavaScript ،، وهي أحد ابسط الامور التي يمكن القيام بها .

var btn = document.querySelector('button');
btn.addEventListener('click', clickedMe);
function clickedMe() {
    alert('You clicked the button!')
}

 

بكل بساطة ، الأمر انه قمنا باستدعاء وظيفة تنفذ أمر معين عند ضغط المستخدم على الزر ، وستكون النتيجة كالتالي:

أكوادي - Akwade - تصميم مواقع

 

الغرض مما سبق

أولاََ انه يجب ان يكون لديك معرفة مسبقة بالـ HTML , CSS  قبل الخوض في JavaScript

ثانياََ توضيح أبسط ما يمكن ان تقوم به JavaScript ، وما تضيفه الجافا سكربت من حيويه وثأثيرات للموقع ، ولا يقتصر على ذلك فقط ، بل تفعل أكثر من ذلك بكثير جداََ !

 

كيف تعمل صفحات الويب ؟

أنت المستخدم الذي يزور صفحات الويب ، وعند زيارتك لصفحات الويب تقوم باستخدام االمتصفح ( متصفح كوروم مثلاََ )، تقوم بإدخال عنوان الموقع في المتصفح مثلا www.google.com والضغط على زر Enter عند الضغط تحدث عمليه Request للسيرفر ويقوم السيرفر بالبحث عن الصفحة التى طلبها المستخدم ، اذا كانت موجودة يقوم بإرجاع Response ( وهي عبارة عن محتويات الصفحة -البيانات- التي طلبها وقد تكون HTML, CSS, Image, Pdf ) ويتم عرضها بواسطة المتصفح  , يقوم السيرفر بإرجاع المحتوى والمتصفح يعمل على رسم الصفحة , بعد ذلك يكون كل شىء أمام المستخدم , نحن في  JavaScript نحتاج التعامل مع الصفحة عند إكتمال الرسم والتحميل .

 

أكوادي - Akwade - تصميم مواقع

 

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

JavaScript لا يتم تنفيذها فقط على المتصفحات بل وممكن تشغليها كخادم ، أي جهاز فيه Js Engine  يعمل عليه بما في ذلك الهواتف الذكية تسمى  Cross Platform  أو التطبيقات الهجينة .

يوجد بالمتصفحات شىء اسمه Js uirted machine ( محرك الداخلي ) ويعتبر نظام وهمي موجود داخل المتصفح .

ولكل متصفح محرك خاص به

  • V8 ==> Chrome & Opera
  • Spider Monkey ==> Firefox
  • Trident, Chakra, Chakra Code ==> IE
  • Chakra Code ==> Edge
  • Nitro , Squirrlfish ==> Safari

في حال وجدت شخص يتكلم عن الـ V8 فهو يقصد المحرك الخاص بمتصفح أوبرا وكروم ، وايضا في حال وجدت شخص يتكلم عن شى اسمه Spider Monkey فهو بذلك يتكلم عن محرك Firefox وكذلك الشىء لبقية المتصفحات .

 

كيف يعمل المحرك ؟

المحرك موجود داخل المتصفح ويعمل على قراءه هذا السكربت (Parse) تم يحوله إلى لغة الآله ثم يتم تنفيذة .

أكوادي - Akwade - تصميم مواقع

 

تاريخ JavaScript

في فترة التسعينات ، كان هناك متصفح مشهور جداََ بإسم Netscape Navigator وهو عبارة أحد أشهر المتصفحات في هذا الوقت ، وكان يستخدم كثيراََ لتصفح الإنترنت من قبل المستخدمين لإنه كان يوفر الإمكانيات والإحتياجات المناسبة لهم .

كان هناك مطور مشهور اسمه Brendan Eich وكان من أحد المطورين المسؤولين عن المنظمه والمشاركين في تطوير المتصفح نفسه

قام هذا المطور عند الإصدار الثاني من المتصفح بالتفكير في كتابة لغة Scripting  يستطيع من خلالها التحكم في المتصفح وبعض من أجزاء الصفحة ، وبالفعل قام بكتابة Scripting Language اطلق عليها بالبداية اسم Mocha  بعد ذلك اطلق عليها إسم Live Script  سميت Live لإنها تعطي الحياة والحيويه للمتصفح .

قبل إطلاق متصفح Netscape Navigator الإصدار الثاني قامت بالشراكة والتعاون مع شركة Sun microsystem وقبل صدور المتصفح رسمياََ للإصدار الثاني قاموا بتغير الإسم إلى JavaScript .

في 1997 كانت البداية الحقيقة للجافا سكربت حيث قامت  Netscape Navigator  و Sun microsystem بإصدار تقرير وطلب عمل معايير قياسية الى الهيئة العامة  ( Ecma )  وكان الطلب

Standardization of the general purpose, cross platform, vendor-neutral programming language

حيث ينص على توحيد المعايير القياسية للغة في الكتابة وطريقة كتابة الكود والكود نفسه والتوافق مع كل المنصات وتمت الموافقة عليه وبعد فترة تم اصدار ECMA-262 .

ECMA-262 هو رقم المعيار الاساسي في المنظمة العامة لصناعات الحاسوبية في أوروبا الذي اطلقته على مشروع لغة الجافا سكربت لوضع كيفية تنفيذ اللغة على اي من المنصات التي ستقوم باستضافة هذه اللغة .

 

 JavaScript vs ECMA-262 

الاثنين يستخدمون مع بعضهم البعض كمصطلحات الا ان الجافا سكربت تعتبر أكبر كمفهوم من ECMA-262 .

ECMA-262 هي الـ Core الإساسي الخاص باللغة بكل ما تحتويه من متغيرات وطريقة كتابة الكود ، المعايير الإساسية لكتابة الكود ومكوناته ، الاضافات الممكن إضافتها من أجل تسحين اللغة .

الجافا سكربت اشمل من ذلك لإنها تحتوي ايضا بالاضافة لـ ECMA-262 على Dom و Bom .

DOM هو اختصار لـ Document Object Model وهو Model يستخدم للتعامل والتلاعب مع مكونات الصفحة .

BOM هو اختصار لـ Browser Object Model وهو عبارة عن Model  يستخدم العديد من الإمكانيات خارج نطاق المتصفح ، قد يكون الشاشة وبعض المعلومات عن نظام التشغيل .

الخلاصة : ECMA-262 هي منظمة تضع المعايير الاساسية الخاص باللغة ، الجافا سكربت تقوم بتطبيق هذه المعايير .

ملاحظة: الجافا سكربت ليست هي الجافا .

java is to javascript as car is to carpet

 

ما الذي يميز JavaScript ؟

التكامل الكامل مع الـ CSS, HTML وايضاََ بسيطة جدا ومدعومة ومفعله تماما على معظم المتصفحات ، هذه الأشياء لا تجدها إلا في جافا سكربت فقط .

 

ماذا يمكن ان نعمل بواسطة JavaScript ؟

  • التعامل والتعديل والتحكم الكامل في HTML, Css
  • التفاعل مع تحركات وأحداث المستخدم ( ضغط الكيبورد ، حركة الماوس ، … )
  • ارسال طلبات اتصال من خلال الشبكات HTTP Request من خلال ( Ajax – Comet ) ، مثلا جلب بيانات او ارسال بيانات ورفع الملفات وتحميلها .
  • التعامل مع الكوكيز ( داتا موجودة في المتصفح ).
  • تتفاعل مع المستخدم من خلال ارسال رسائل ( اعطاء رسالة للتأكيد ، الموافقة أو عدمه )
  • حفظ البيانات في التخزين المحلي للجهاز ( Local Storage ) .
  • لا يقتصر عمل الجافا سكربت على المتصفحات فقط ، بل ممكن عمل تطبيقات هواتف ذكية وتطبيقات سطح المكتب من خلالها .

 

ماذا لا يمكن ان تفعله JavaScript ؟

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

النوافذ المتفوحة والألسنة (Tabs) في المتصفحات  لا تعرف شىء عن بعضها إلا في حال واحدة ممكن ان تعرف عن موقع أخر , اذا كنت فتحت هذا الموقع من خلال نفس الموقع ويجب توفر 3 نقاط من أجل ذلك

  • تكون في نفس النطاق .
  • نفس البروتوكول .
  • تكون نفس المنفذ

هذه تسمي Same Origin Policy ،  والهدف منها هو عزل أكواد جافا سكريبت الخبيثة في نطاق محدد لا تستطيع تجاوزه، بدون وجود هذه الأشياء لا يمكن ان تتواصل مع بعض وهذا شىء ممتاز من اجل الحماية .

 

الخلاصة

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

لو كنت من محبين مشاهدة الدروس كفيديوهات تعرف على الجافا سكربت من هنا .

في حال لديك اي استفسارات لا تتردد بالتواصل معنا سواء من خلال التعليقات أو من خلال صفحة اتصل بنا .

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Scroll to Top