Focal x Internship Front-End-beg

JavaScript

27/8/2023

1
‫‪Focal x Internship‬‬ ‫‪Front-End-beg‬‬

‫كيف يتعامل ال ‪ Browser‬مع صفحة ‪HTML‬‬

‫عند تحميل صفحة ويب يقوم ال ‪ browser‬بالتعامل مع ‪ html‬على انه‬
‫شجرة كاﻻتي‪:‬‬

‫ويقوم بتحميل الموقع على هذه الهيكلية‪.‬‬

‫و من ثم يقوم بتسميته ‪) document‬ملف( كي يستطيع التعامل معه‪.‬‬

‫و لكي يستطيع ان يقوم بعمل ‪ pass‬له و يقوم بتحويله ل كود يستطيع‬

‫ال )‪ (browser‬أو )‪ (laptop‬أو ) ‪ host‬بشكل عام ( فهمه وتنفيذه واخراج‬
‫الصفحة ‪.‬‬

‫جميع التفرعات الموجودة من ‪ html‬ل ‪ div‬و ‪ ... img‬تدعى ب ‪nodes‬‬

‫)عقد(‬

‫‪2‬‬
‫‪Focal x Internship‬‬ ‫‪Front-End-beg‬‬

‫بحيث ‪ html‬عندما تتحمل من ‪ browser‬فيقوم أوﻻ بعمل هيكلية للعقد‬

‫ثم يقوم بصفهم بجانب بعضهم ويقوم بعرضهم بالشكل المناسب‬
‫ابتداءً من اﻷعلى لﻸسفل ) أي من العقدة الجذر التي هي ‪ HTML‬إلى العقد‬
‫اﻷوراق في النهاية و الي هي ‪ p‬أو ‪ h1‬أو ‪ img‬أو ‪ (....‬مثل هيكلة الموقع‪:‬‬

‫ثم يعتبره كله بشكل كامل عبارة عن ‪) document‬ملف(‬

‫سنفهم السبب أكثر عندما نصل إلى ‪. JavaScript‬‬

‫ال‪ browser‬عندما يقوم بطباعة صفحة ‪ html‬يقوم بعمل ‪ pass‬لكل ‪tag‬‬

‫ويقوم بتكوينهم على أساس انهم ‪ nodes‬ويسميهم ‪ document‬ويقوم‬
‫بإرسالها ل ‪ agent‬لعرض الصفحة ‪.‬‬

‫‪3‬‬
‫‪Focal x Internship‬‬ ‫‪Front-End-beg‬‬

‫ما هي ‪(JS) JavaScript‬؟‬

‫هي لﻐة تعطي للموقع ﺣيوية‬

‫‪ HTML, CSS‬ﻏير قادرين على عمل أي عملية مهما كانﺖ بسيطة‬
‫) أبسﻂ اﻷمور ﻻ يمكنهم جمع ‪( 1 + 1‬‬

‫فنحن بحاجة للﻐة تقوم بعمل ‪ operation‬للموقع بحيث‬

‫نستطيع التفاعل مع المستﺨدم ‪ ,‬بحيث يمكن للمستﺨدم ان‬
‫يقوم بعمل مدخﻼت ومن خﻼل هذه المدخﻼت يمكننا عمل‬
‫عملية ﺣسابية ما ونتيجة لهذه العملية فنتوجه لل ‪ JS‬ونقوم‬
‫بكتابة اكواد وعلى أساس هذه اﻻكواد نقوم بعمل عملية‬
‫ﺣسابية ونعيدها لكود ‪ , HTML‬ﺣيث أن ‪ JS‬لديها ‪ access‬على اكواد‬
‫‪HTML‬‬

‫بالتالي يمكننا الوصول إلى أي ‪ tag‬عن ﻃريﻖ ‪ JS‬ونقوم بالتعامل‬

‫معها كﺄنها ‪ node‬وكافة ‪ properties‬وال ‪ actions‬التي عليها‬
‫يمكن الوصول لها‪.‬‬

‫‪4‬‬
‫‪Focal x Internship‬‬ ‫‪Front-End-beg‬‬

‫يحوي ال‪ browser‬شيء يدعى ‪ API‬بحيث يحوي ‪) tool‬أداة( للتعامل مع‬

‫صفحات الويب‬

‫من هذه اﻷدوات يقوم بتوفير كلمة محجوزة او فضاء ‪ space‬يدعى‬

‫‪ - document‬تذكر الشرح في الصفحة ‪ - 3‬معرف على كامل الصفحة‬
‫بعدها نقوم باستﺨدام ‪ functions‬منه‬

‫‪ ‬أين نكتب أكواد ‪ JavaScript‬؟‬

‫للعمل ب ‪ JS‬يجب كتابة ‪ tag‬يدعى ‪ script‬وضمن هذا ال ‪ script‬نضمّن‬

‫اكواد ‪: JS‬‬

‫بحيث أي كود يكتب ضمن هذا ال ‪ tag‬فهم اكواد لﻐة برمجة‬

‫بحيث ‪ JS‬هي لﻐة برمجة لكن من اﻷفضل ان نطلﻖ عليها ‪scripting‬‬

‫‪ language‬وليس ‪programing language‬‬

‫‪5‬‬
‫‪Focal x Internship‬‬ ‫‪Front-End-beg‬‬
‫‪ ‬أوامر ‪: JavaScript‬‬
‫‪: Console.log(“ “) ‬هو امر الطباعة في ال‪ log , console‬يمعنى اﻃبع‬
‫أو سجّل‪ ,‬أي اﻃبع في ال ‪ console‬ما هو بين اﻷقواس‪.‬‬

‫بحيث يظهر امر الطباعة فقﻂ في ‪ console‬في قسم ‪info‬‬

‫يمكننا ﻃباعة ارقام ونصوص ومصفوفات و ‪ object‬و ‪. function‬‬

‫‪6‬‬
‫‪Focal x Internship‬‬ ‫‪Front-End-beg‬‬
‫‪ : Document.write(“ “) ‬هو امر ﻃباعة في صفحة ال ‪ , HTML‬أي‬
‫إذا أردنا رؤية النتائج على صفحة ال ‪HTML‬‬

‫‪ ‬ﻃرق تعريف المتحوﻻت في ‪: JavaScript‬‬

‫‪Var ‬‬
‫‪Let ‬‬
‫‪Const ‬‬

‫مثال ‪:‬‬
‫نريد تعريف ‪ variable‬يدعى ‪ age‬يحوي على كلمة ‪karam‬‬

‫هل يمكن ذلك؟!‬

‫نعم ‪ ,‬هذا بسبب أن ‪ JavaScript‬ليسﺖ لﻐة ‪ Typed‬أي يمكن إعطاء‬
‫قيمة ‪ String‬لمتحول باسم ‪ number‬على سبيل المثال‪.‬‬

‫‪7‬‬
Focal x Internship Front-End-beg

:‫مثال آخر‬

8
‫‪Focal x Internship‬‬ ‫‪Front-End-beg‬‬

‫يقوم المطورين بالطباعة في ال ‪ console‬بحيث نريد فقﻂ معرفة‬

‫مجريات اﻷمور‬

‫‪: Comments in JavaScript ‬‬

‫لعمل ‪ comment‬ما ) ‪ ( ctrl ) + ( /‬أو ) ‪( //‬‬

‫‪: Loops in JavaScript ‬‬

‫في جميع لﻐات البرمجية يوجد ﺣلقات ‪loop‬‬
‫مثﻼً ‪:‬‬
‫نريد ﺣلقة )‪ (Loop‬تمر على كل عناصر المصفوفة عنصر عنصر بحيث أن‬
‫هذه الدورة تسمى ‪iteration‬‬
‫‪ ‬لتعريف ﺣلقة ‪: for‬‬
‫ﺣلقة ‪ For‬لها الشكل ‪:‬‬
‫)‪for (initialization; condition; afterthought‬‬

‫‪ : initialization‬هو المتﻐير الذي نريد ان يقوم بعمل ‪ loop‬بمعنى نريد ان‬

‫يقوم بعملية ‪. iteration‬‬
‫‪ : condition‬و هو شرط توفﻖ الحلقة ‪.‬‬
‫‪ : afterthought‬تعبير سيتم تنفيذه في نهاية كل تكرار للحلقة‬

‫‪9‬‬
‫‪Focal x Internship‬‬ ‫‪Front-End-beg‬‬

‫مثال‪:‬‬

‫قمنا بإعطاء ‪ index‬قيمة ‪integer‬‬

‫‪ Index‬أصﻐر أو يساوي ال ﻃول )‪ (length‬الﺨاص ب ‪array‬‬
‫ثم نريد ‪ index‬ان يزداد بمقدار ‪ 1‬عند كل ‪ iteration‬أي عند كل نهاية تكرار‬
‫يبدأ ترقيم عناصر المصفوفة بالقيمة رقم ‪0‬‬
‫لطباعة المصفوفة في ‪console‬‬

‫‪10‬‬
‫‪Focal x Internship‬‬ ‫‪Front-End-beg‬‬

‫ال ‪ length‬ﻃوله ‪ 3‬أي هو عدد عناصر المصفوفة ‪.‬‬

‫‪0‬‬
‫اول مرة قمﺖ بالدخول على ‪ loop‬و‪ index‬الﺨاص بها ‪0‬‬
‫‪karam‬‬
‫ثم قمﺖ بطباعة ‪ array‬مكان ماهي ‪ )0‬أي قمﺖ بطباعة عنصر من‬
‫المصفوفة الذي له ال ‪ index‬يساوي ‪( 0‬‬
‫‪1‬‬
‫التكرار الثاني قمﺖ بالدخول على ‪ loop‬و‪ index‬الﺨاص بها ‪1‬‬
‫‪Karam1‬‬
‫ثم قمﺖ بطباعة ‪ array‬مكان ماهي ‪1‬‬
‫‪2‬‬
‫التكرار الثالث قمﺖ بالدخول على ‪ loop‬و‪ index‬الﺨاص بها ‪2‬‬

‫‪11‬‬
‫‪Focal x Internship‬‬ ‫‪Front-End-beg‬‬
‫‪Karam2‬‬
‫ثم قمﺖ بطباعة ‪ array‬مكان ماهي ‪2‬‬
‫بما ان ﻃول المصفوفة هو ‪3‬‬
‫‪3‬‬
‫التكرار الرابع قمﺖ بالدخول على ‪ loop‬و‪ index‬الﺨاص بها ‪3‬‬
‫‪Undefined‬‬
‫ﻷنه لم يجد شيء ) أي خرجنا خارج ﺣدود المصفوفة (‬
‫و لحل المشكلة نﻐير شرط التوقف إلى < بدﻻً من =<‬

‫مثال آخر ‪:‬‬

‫نريد وضع شرط ان يطبع العناصر التي ال ‪ index‬لها أكبر من ‪2‬‬

‫‪12‬‬
‫‪Focal x Internship‬‬ ‫‪Front-End-beg‬‬

‫مثال آخر ‪:‬‬

‫بحيث يقوم بكتابة ‪ message‬على عدد المرات التي يفشل بها في تحقيﻖ‬
‫هذا الشرط ‪.‬‬

‫‪13‬‬
‫‪Focal x Internship‬‬ ‫‪Front-End-beg‬‬

‫‪Object in JavaScript‬‬

‫يتكون ال ‪ object‬من شيئين أساسيين‬

‫اﻷول هو ال ‪ key‬والثاني هو ال ‪ value‬بحيث يﺄخذ ال ‪ key‬ال ‪ ) value‬أي يتم‬
‫اسناد القيمة ‪ value‬إلى ال ‪ ( key‬و ذلك من خﻼل ‪:‬‬

‫‪ ‬نﻼﺣظ أن عناصر ال ‪ Object‬هي من الشكل ‪key: value‬‬

‫‪ ‬يتم الفصل بين كل عنصر و اﻵخر عن ﻃريﻖ الفاصلة ) ‪( ,‬‬
‫‪ ‬يمكن ان تحوي ‪ object‬على‪:‬‬
‫… & ‪string & integer & array & object & function‬‬

‫‪14‬‬
‫‪Focal x Internship‬‬ ‫‪Front-End-beg‬‬

‫‪ ‬يمكن الوصول إلى عناصر ال ‪ Object‬عن ﻃريﻖ النقطة ) ‪( .‬‬

‫‪ ‬يمكن الوصول إلى عناصر ال ‪ Object‬بطريقة أخرى و هي أقواس‬

‫المصفوفة ‪ ,‬ﺣيث نضع داخلهم اسم ال ‪ key‬ضمن إشارتي‬
‫تنصيص‪ .‬كمثال ‪:‬‬

‫‪15‬‬
Focal x Internship Front-End-beg

Operations in JavaScript

16
Focal x Internship Front-End-beg

17
Focal x Internship Front-End-beg

Made with ❤ By
Maha Alchommari & Abdullatif Jarkas

18