Page 17 - مجلة طموح IT العدد الثامن

‫ما الذي تفعله الجافا سكربت في صفحتك؟‬

‫ماذا يحدث عند تحميل الصفحة وعرضها على المتصفح الخاص بالمستخدم؟‬
‫يتـم تنفيـذ كل ًا مـن الــ ‪ HTML‬والــ ‪ CSS‬والــ ‪ JavaScript‬داخـل بيئـة التنفيـذ الخاصـة بالمتصفـح فيمكـن تشـبيه العمليـة (كمـا موضـح فـي‬
‫الصـورة أدنـاه) بكونهـا مثـل المصنـع الـذي يأخـذ المـواد الخـام (ونقصـد بـه هنـا كـود الصفحـة) وينتـج منتـج وهـو صفحـة الويـب‪ ،‬يتـم تنفيـذ‬
‫جافــا ســكريبت بواســطة محــرك جافــا ســكريبت (‪ )JavaScript’s engine‬فــي المتصفــح‪ ،‬بعــد تجميــع ‪ HTML‬و ‪ CSS‬ووضعهمــا معــ ًا فــي‬

‫صفحـة ويـب‪،‬‬
‫هذا يضمن أن بنية ونمط الصفحة موجودان بالفعل في الوقت الذي يبدأ فيه تشغيل جافا سكربت‪.‬‬

‫واليـك المثـال التالـي‪ :‬بعـد أن يتـم إنشـاء صفحـة الويـب بإسـتخدام أحـد علامـات الــ ‪ HTML‬وهـي (<‪ ،)>body> </body‬يتـم الوصـول الـى عنصـر‬
‫الصفحــة والتعامــل معــه عــن طريــق أحــد كائنــات الجافــا ســكربت (‪ )objects‬وهــو (‪ ،)document‬حيــث يعتبــر المالــك الرئيســي لجميــع‬
‫الكائنـات الموجـودة فـي الصفحـة ومـن ثـم بإسـتخدام هـذا الكائـن‪ ،‬يمكننـا إضافـة نـص بصـورة ديناميكيـة علـى الصفحـة‪ ،‬أو يمكـن مـن‬
‫خلالـه الوصـول الـى العناصـر الاخـرى فـي الصفحـة والتعديـل علـى محتواهـا‪ ،‬أو تغييـر التنسـيق الحالـي لتلـك العناصـر والكثيـر مـن الأمـور‪.‬‬
‫لـذا يمكـن أن نسـتنتج أنـه فـي حالـة تـم تحميـل كـود الجافـا سـكربت وتنفيـذه فـي بالبدايـة قبـل ‪ HTML‬و ‪ ،CSS‬فسـوف يـؤدي ذلـك الـى‬

‫حصـول أخطـاء‪.‬‬

‫هل إستخدام الجافا سكربت مقتصر على صفحات الويب؟‬

‫وكذلــك أهــم مــا يميــز هــذا العصــر تطبيقــات الهواتــف الذكيــة‪،‬‬ ‫قطعــ ًا كلا‪ ،‬حيــث إنــه فــي الآونــة الأخيــرة بــدأ المطــورون إســتخدام‬
‫والجافـا سـكربت عملاقـة فـي هـذا المجـال ومـن خـال معرفتـك‬ ‫الجافــا ســكربت فــي عمــل تطبيقــات ســطح المكتــب ومثــال‬
‫بالجافـا سـكربت والــ ‪ HTML + CSS‬مـع إضافـة أحـدى إطـارات الجافـا‬ ‫علــى ذلــك محــرر الشــفرات الــذي يســتعمله الجميــع حاليــ ًا وهــو‬
‫ســكربت (مثــل ‪ React-Native ، Phone gap Ionic‬وغيرهــا)‬ ‫‪ Brackets‬حيـث تمـت برمجتـه بإسـتخدام الجافـا سـكربت بواسـطة‬
‫ســيمكنك أن تخــرج بتطبيــق جــوال إحترافــي مــن الدرجــة الأولــى‬ ‫‪ Node.Js‬وبعــض التقنيــات الاخــرى ويمكنــك فتــح البرنامــج وفتــح‬

‫ينافــس لغــات البرمجــة الأخــرى‪.‬‬ ‫خانــة ‪ About‬لتــرى بنفســك‪.‬‬
‫ومــن المهــم الإشــارة الــى أن الجافــا ســكربت دخلــت أيضــا لعالــم‬ ‫كذلــك أصبحــت الجافــا ســكربت أحــدى لغــات برمجــة الخــوادم‬
‫الســاعات الذكيــة وشــركة الســاعات‪ Pebble ‬قامــت بصنــع‬ ‫(‪ )Server-side-programming languages‬و تعــرف بالــ ‪.Node.js‬‬
‫‪ framework‬خـاص لصناعـة التطبيقـات الخاصـة بالسـاعات الذكيـة‬ ‫أضافـة الـى ذلـك هنالـك بعـض قواعـد البيانـات (‪MongoDB، Couch‬‬

‫واســمه ‪.Pebble.js‬‬ ‫‪ )DB‬تسـتخدم الجافـا سـكربت كلغـة برمجـة خاصـة بهـا‪.‬‬

‫في هذه السلسة من الدروس سوف نقتصر على إستخدام الجافا سكربت في مجال الويب وذلك بالاقتران مع ال ـ‪HTML‬‬
‫و ‪ CSS‬لإنشاء صفحات ديناميكية وأكثر تفاعلية مع المستخدم‪.‬‬

‫هل لغة الجافا سكربت هي ‪ Interpreted Language‬أم ‪Compiled Language‬؟‬

‫لكي نجيب عن هذا السؤال يجب ان نعرف الفرق بين الـ‪ interpreted‬والـ ‪.compiled‬‬
‫فـإذا كنـت مهتمـ ًا فـي مجـال البرمجـة فلابـد أنـه قـد تـردد علـى مسـامعك هذيـن المصطلحييـن‪ ،‬ففـي الــ‪ interpreted languages‬يتـم‬
‫تنفيـذ الكـود مـن الأعلـى الـى الأسـفل (سـطر بعـد أخـر) ثـم يتـم إرجـاع النتيجـة مباشـرة‪ ،‬ولا يتطلـب تحويـل الكـود الـى نمـوذج مختلـف قبـل‬

‫تنفيذهـا‪.‬‬
‫مـن ناحيـة أخـرى الــ ‪ compiled language‬تقـوم بتحويـل الكـود الـى نمـوذج أخـر (‪ )machine code‬وهـو نمـوذج يٌفهـم مـن قبـل الكمبيوتـر‪،‬‬

‫قبـل أن يتـم تنفيـذ الكـود وتسـتغرق هـذه العمليـة مـن ثوانـي الـى عـدة دقائـق وأحيانـ ًا أكثـر‪.‬‬

‫زينب سالم‬ ‫‪17‬‬