المقدمة
سنتعرف على أحد أهم اللغات التي يتم استخدامها في المواقع ،ليس فقط المواقع ، بل تعمل على أجهزة الهواتف الذكية وتطبيقات سطح المكتب ، هي لغة الجافا سكربت ، ما هي الجافا سكربت ، وكيف تعمل ؟
لغة JavaScript هي أحد اللغات الثلاثة التي يجب على جميع مطورين الويب تعلمها .
- Structure ( هيكلية الصفحة ) : والمسئول عنه هو الـ HTML اي كل ما يتم وضعه من عناصر الـ HTML في صفحة الويب والتي من خلالها يتم تقسيم صفحة الإنترنت ( مثل وضع عناووين أو فقرات أو صور في الصفحة )
- PresentationStyle ( شكل الصفحة ) : والمسئول عنه هو الـ CSS وهو كيفيه ظهور كل عنصر من عناصر الـ HTML في صفحة الويب ، ما هو حجمه ، لونه ، شكله !
- Behavior ( السلوك ) : والمسئول عنه هو الجافا سكربت وهو كيفيه تفاعل هذا العنصر مع المستخدم ( مثل ماذا سيحدث في حال ضغط المستخدم على زر معين بالصفحة )
سنقوم الان بوضع عنصر من عناصر الـ HTML عبارة عن زر بسيط فقط ومكتوب به Click Me !
<button> Click Me </button>
النتيجة ستكون :
الأن سنقوم بإضافة بعض الجمالية مثل لون الزر والخلفية ونوع الخط من خلال الـ CSS للزر ليكون بشكل أفضل ..
button {
background: #673ab7;
color: #FFF;
border: 1px solid #371c66;
padding: 12px 22px;
border-radius: 5px;
font-family: monospace;
}
بعد اضافة خصائص الـ CSS سيكون شكل الزر كالتالي:
الان نريد عندما يقوم المستخدم بالضغط على هذا الزر ان تخرج له رسالة تنبيه مثلاََ انك قمت بالضغط على الزر ، هذا ما سنقوم به من خلال JavaScript ،، وهي أحد ابسط الامور التي يمكن القيام بها .
var btn = document.querySelector('button');
btn.addEventListener('click', clickedMe);
function clickedMe() {
alert('You clicked the button!')
}
بكل بساطة ، الأمر انه قمنا باستدعاء وظيفة تنفذ أمر معين عند ضغط المستخدم على الزر ، وستكون النتيجة كالتالي:
الغرض مما سبق
أولاََ انه يجب ان يكون لديك معرفة مسبقة بالـ HTML , CSS قبل الخوض في JavaScript
ثانياََ توضيح أبسط ما يمكن ان تقوم به JavaScript ، وما تضيفه الجافا سكربت من حيويه وثأثيرات للموقع ، ولا يقتصر على ذلك فقط ، بل تفعل أكثر من ذلك بكثير جداََ !
كيف تعمل صفحات الويب ؟
أنت المستخدم الذي يزور صفحات الويب ، وعند زيارتك لصفحات الويب تقوم باستخدام االمتصفح ( متصفح كوروم مثلاََ )، تقوم بإدخال عنوان الموقع في المتصفح مثلا www.google.com والضغط على زر Enter عند الضغط تحدث عمليه Request للسيرفر ويقوم السيرفر بالبحث عن الصفحة التى طلبها المستخدم ، اذا كانت موجودة يقوم بإرجاع Response ( وهي عبارة عن محتويات الصفحة -البيانات- التي طلبها وقد تكون HTML, CSS, Image, Pdf ) ويتم عرضها بواسطة المتصفح , يقوم السيرفر بإرجاع المحتوى والمتصفح يعمل على رسم الصفحة , بعد ذلك يكون كل شىء أمام المستخدم , نحن في JavaScript نحتاج التعامل مع الصفحة عند إكتمال الرسم والتحميل .
كيف يتم تنفيذ الجافا سكربت
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) تم يحوله إلى لغة الآله ثم يتم تنفيذة .
تاريخ 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 ، والهدف منها هو عزل أكواد جافا سكريبت الخبيثة في نطاق محدد لا تستطيع تجاوزه، بدون وجود هذه الأشياء لا يمكن ان تتواصل مع بعض وهذا شىء ممتاز من اجل الحماية .
الخلاصة
جافا سكربت هي أحدى لغات البرمجة الأكثر شيوعاََ ، وهي مفيدة لأي مبرمج ، وظهرت لإضافة اجزاء صغيرة على صفحات الانترنت ، وهي لغة الويب المدعومة من جميع المتصفحات الرئيسية ،ولكنها تطورت مع الوقت ليصبح بإمكانك عمل من خلالها العديد غير صفحات الويب مثل انشاء تطبيقات للهواتف الذكية وتطبيقات سطح المكتب لنظامي ويندوز وماك .
لو كنت من محبين مشاهدة الدروس كفيديوهات تعرف على الجافا سكربت من هنا .
في حال لديك اي استفسارات لا تتردد بالتواصل معنا سواء من خلال التعليقات أو من خلال صفحة اتصل بنا .