0% found this document useful (0 votes)
3 views78 pages

JavaScript Notes

ملخص

Uploaded by

saraelshorbage11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views78 pages

JavaScript Notes

ملخص

Uploaded by

saraelshorbage11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 78

‫]‪JavaScript [ECMASCRIPT6‬‬

‫ما هي ‪JavaScript‬؟‬
‫‪ JavaScript‬هي لغة برمجة حاسوبية ديناميكية‪ .‬هي خفيفة الوزن وتستخدم بشكل شائع كجزء من صفحات الويب‪ ،‬حيث‬
‫تسمح تنفيذاتها للبرامج النصية على جانب العميل بالتفاعل مع المستخدم وإنشاء صفحات ديناميكية‪ .‬هي لغة برمجة مفسرة‬
‫تتمتع بإمكانيات البرمجة الكائنية‪.‬‬
‫‪Client-side JavaScript is the most common form of the language.‬‬
‫يعنى ال ‪ JavaScript‬بتتعامل مع ال ‪ client-side‬بتاعك اللى هو مثال ال ‪ browser‬و ده ليه مميزلت كتير جدا فانه‬
‫مثال انت لو عايز تعمل ‪ check‬هل ال ‪ user‬وهو بيدخل ال ‪ data‬بتاعته في ‪ form‬ال‪ mail‬بتاعه كان ‪ valid‬وال ال‬
‫فبدل ما تروح لل ‪ server‬ذات نفسه وتعمل ال ‪ check‬ده و طبعا هيحصل ‪ load‬كتير لما تروح لل ‪ server‬يتأكد و‬
‫يرجع انت ممكن تعمل دا بال ‪ JavaScript‬وال ‪ validation‬ده يحصل فال ‪ browser‬بتاعك في أقل من ثانيه عشان‬
‫كده هو ‪ client-side‬اما بقا ال ‪ node.js‬هي ‪. server side‬‬

‫وممكن من خاللها تخلى ال ‪ web page‬بتاعتك ‪ dynamic‬يعنى مثال ممكن لما ال ‪ user‬يــ ‪ click‬على اى ‪ button‬او‬
‫يعمل اى ‪ event‬يروح مثال يعمل ‪ tag‬معين فال ‪ html‬او يخفى حاجه انت مش عايزها ‪.‬‬

‫ال ‪ JavaScript‬هي ‪ cross Platform‬يعنى ممكن تعمل ويب سايت تقدر تشغله على اكتر من ‪operation system‬‬
‫يعنى مثال ‪ android, iOS‬ودا عن طريق حاجة اسمها )‪ (ionic or native‬ودول عبارة عن ‪ tool‬او لغة تقدر تحول‬
‫الويب بتاعك الى ‪ iOS‬اي تحول من ‪ operating system to operating system‬وكمان ممكن تقدر تعمل بيها‬
‫‪ desktop app‬عن طريق ‪ electron.js‬وكمان تقدر تعمل ‪ VR‬اختصار ‪ virtual reality‬فهي ‪ flexible‬معايا‪.‬‬
‫سؤال انترفيو‪ :‬ماهو الفرق بين ‪ JavaScript, ECMAScript‬؟‬

‫‪JavaScript was first known as Live Script, but Netscape changed its name to JavaScript.‬‬
‫وده كان موجود فى وقتها ‪ 3 languages‬وهما ال ‪ java, scheme, self‬و كان ال ‪ design‬بتاع كل ‪ language‬منهم‬
‫مختلف تمام عن التانيه فاخدوا من ال ‪ java‬ال ‪ syntax‬وخد من ال ‪ scheme‬ال ‪ concept‬بتاع ال‬
‫‪ function in a first-class object‬و خد من ال ‪ self‬ال ‪ OOP prototype based‬و جمع التالته دول مع بعض و‬
‫طلع حاجه اسمها ‪ live script‬ومنها المنظمه العالميه ‪ ECMA‬سمتها ‪ ECMAScript‬سنة ‪ 97‬وده المفروض االسم‬
‫الصح بتاعها حاليا و لكن االسم المنتشر او السوقى لغايه دلوقتى هو ‪ JavaScript‬و بدأ ينزل منها ‪ versions‬لغاية‬
‫‪.ECMAScript 6‬‬

‫سؤال انترفيو‪-------------- :‬‬


‫عيوب ‪JavaScript‬‬ ‫مميزات ‪JavaScript‬‬
‫مبتتعاملش مع الـ ‪ files‬مينفعش اقوله روح ل‬ ‫حولت ال ‪ browser‬من ‪ static‬الى ‪dynamic‬‬
‫‪E:‬بسبب ال ‪security‬‬ ‫بتقدر تتعامل مع ‪regular expression‬‬
‫بتقدر تتعامل مع ال ‪( API‬عبارة عن داتا جايه من داتا بيز)‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫اخر تركايه هما ليه بيقولو عليها ‪ scripting language‬؟‬
‫عشان ال ‪ JavaScript‬مينفعش اقول انا هعمل ‪ file JavaScript‬عشان اعمل ويب سايت الن الزم عشان اعمل ويب‬
‫سايت الزم يكون عندى ‪ html‬فهي لغة معتمدة على حاجة تانيه عشان تشغلها فهى ليس لغة قائمة بذاتها زي ال ‪C#‬‬

‫من اهم المواقع للمذاكرة ‪ Javascript.info , MDN :‬ودا فى نسخة عربي‪.‬‬

‫‪JavaScript Syntax‬‬
‫االول كده انت ممكن تكتب ‪ internal JavaScript‬عن طريق انك تيجى قبل قفله ال ‪body‬‬
‫وتعمل كده‬

‫او ممكن تعمل ‪ external‬عن طريق انك تكتب ال ‪ script‬بتاعك قبل قفله ال ‪ body‬و تحط‬

‫فيه ال ‪ src‬اللى هترحله وفى ال ‪ sheet‬ده بتكتب الكود عادى‬

‫و عندنا كذا طريقه نعمل بيها ‪ output‬يعنى لو عايزين نشوف ال ‪ result‬بتاعتنا ايه او نتأكد من حاجه وهكذا‬
‫• )( ‪ Alert‬دى بخلى ال ‪ output‬يظهرلى عن طريق ‪ message‬من ال ‪ browser‬زي كده )"‪alert("OK‬‬

‫• )(‪ :Prompt‬دي بخلي اليوزر يدخلي قيمة وخلي بالك ا لبرومبت التايب بتاعه دائما بيكون ‪ string‬عشان لو‬
‫هتعمل عملية حسابية‬
‫‪<h1 id="username" ></h1> // in html‬‬
‫;)"‪var username = window.prompt("add your name‬‬
‫;‪document.getElementById("username").innerHTML = "welcom " + username‬‬

‫• )( ‪ :Console.log‬وده اهمهم‪ ,‬هنا انا بطلع حاجه ليا انا ك ‪ developer‬يعنى ال ‪ user‬مش بيشوفها فبيبقى‬
‫زى ‪ test‬ليا انا كده ‪ ,‬بعمل ‪ inspect‬و بدوس على ‪ tab‬ال ‪ console‬مثال )"‪console.log("Hello‬‬

‫• )(‪ :Confirm‬تظهر رسالة وتنتظر المستخدم ليضغط على زر “‪ ”OK‬أو “‪ .”Cancel‬ترجع ‪ true‬في حالة أوك‬
‫و ‪ false‬في حالة ‪.Cancel/Esc‬‬
‫;)"هل أنت المدير؟"(‪let isBoss = confirm‬‬

‫لو زر أوك تم الضغط عليه ‪alert( isBoss ); // true‬‬

‫• )( ‪ :Document.Write‬هنا انا بكتب فال ‪ document‬بتاعتى ذات نفسها )"‪document.write("Hello‬‬


‫وممكن اكتب ‪ tag‬من ‪ tags‬ال ‪ html‬عادى وهو هيفهمه زى كده )">‪document.write("<p>test</p‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫• )(‪ Document.getElementById‬هنا انت بتحدد ال ‪ element‬اللى ليه ‪ id‬معين‬
‫"‪-twslo").innerHTML="ay7aga‬‬ ‫‪Document.getElementById("Hena bktb el ID elli 3iz‬‬
‫‪ innerHTML‬دا معناه االسكوب بتاع ال ‪ element‬اللى انت مسكته يعنى الفاتحه والقافلة بتاعت التاج فهو بيروح‬
‫يفضي كل حاجة موجودة فالتاج اللى في ال ‪ id‬دا ويحط القيمة اللى انا حاططها بعد ال =‪.‬‬
‫سؤال انترفيو‪ :‬ليه انا بحط كود ال ‪ JS‬قبل قافلة ال ‪ body‬في ال ‪html‬؟‬
‫الن الكود بتاعنا ماشي ‪ Sequence‬فلو انا حطيت االسكوب بتاع ال ‪ JS‬في ال ‪ head‬وانا عامل تاج تحت به ‪ id‬وانا مستخدم ال ‪ id‬دا ف ملف‬
‫‪ JS‬بتاعي عن طريق ال ‪ innerHTML‬هيجبلي ‪ error‬النه اول حاجة فى ال ‪ head‬هيروح يكلم ملف ال ‪ JS‬ويدخل في ويشغل الكود فبالتالى‬
‫هيجبلي ‪ error‬النه هيشغل االول ال ‪ innerHTML‬فمش هيشتغل معاه النه مشغلش التاج الموجود به ال ‪ .id‬وكمان هتقابلني مشكلة في ال‬
‫‪ SEO‬لو انا حاطط ال ‪ JS‬في ال ‪ head‬وهي انه هياخد وقت كبير جدا فى البحث فى ملف ال ‪ JS‬قبل ما يسيرش في المحتوي بتاعى الموجود‬
‫فى ال ‪ html‬ودا مش افضل حاجة‬
‫ثالت مشكلة وهي ان لو كود ال ‪ JS‬بتاعى به مشكلة فالكود هيقف عند ال ‪ head‬ومش هيكمل‬
‫ولكن في طريقة لحل هذه المشاكل هنقولها بعدين‬
‫‪// Ahmed or /* Ahmed */. :Comment in JS‬‬
‫‪ :Semicolon‬مش شرط اكتبها بس االفضل اني اكتبها عشان لما اجي اعمل ‪ minified‬فالكود هيبقا كله جنب بعضه ف‬
‫هيجيب خطأ‬
‫;”‪ var x = “Ahmed‬المتغيرات ‪Variables:‬‬
‫فكرته هي اني بيكون عندي بوكس بشيل في قيمة معينة فتعتبر الكوباية هي الفاريبول والعصير هو القيمة ف ممكن ادلق‬
‫العصير واحط شاي يبقا انا كدا غيرت القيمة ولكن الكوباية زي ماهية‪ .‬وال ‪ JS‬مش بنحدد نوع ال ‪ datatype‬النها‬
‫‪.loosely datatype‬‬
‫مبادئ تسمية ال ‪variable‬‬
‫‪ .1‬مينفعش يكون اسم الفاريبول بكيوورد محجوزة فى اللغة مثال ‪..for, if, var‬‬
‫‪ .2‬اسم ال ‪ variable‬ميكونش في ‪ .space 3‬مينفعش اسم ال ‪ variable‬يبدأ برقم‪.‬‬
‫وعندي كذا طريقة لكتابة ال ‪ variable‬وهى ‪ .1‬طريقة ال ‪ camel case‬مثال ‪.userName 2. User_name‬‬
‫ومن افضل طرق تعريف ال ‪ variable‬هي اني اعمله ‪ declare‬يعنى بعرفو وبعد كدا اعمل ‪ assignment‬لل‬
‫‪variable‬‬
‫‪;Var x‬‬
‫‪;”X =” Ahmed‬‬
‫ال ‪ JS‬هي لغة ‪ dynamic‬الن ‪ variable‬بتاعنا ممكن اديله اكثر من نوع داتا وميجبليش ايرور النى محددتلوش نوع‬
‫معين مثال‬

‫‪DataTypes:‬‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫فأى لغه برمجه عندنا حاجه اسمها ‪ datatype‬يعنى انت فالطبيعى بتكتب ‪ data‬فمينفعش تكتب اى ‪ data‬وخالص الزم‬
‫تكتب ال ‪ type‬بتاع ال ‪ data‬ده ايه عشان ال ‪ data‬دى اكيد طبعا بتتخزن فال ‪ memory‬عندك فالزم ال ‪memory‬‬
‫تعرف مساحه المكان اللى هتحجزه لل ‪ data‬بتاعتك دى ايه ‪.‬‬
‫بس فى لغات برمجه بتبقى ‪ weakly typed languages‬يعنى فال ‪ JavaScript‬هى ‪weakly typed language‬‬
‫الن لما باجى اعرف ‪ data‬مش بحدد ال ‪ type‬بتاعه ‪ ,‬هو ب ‪ detect‬ال ‪ type‬لوحده اول ما بعمل ‪ assign‬للقيمة بتاعت‬
‫ال ‪ variable‬بتاعى مثال كده ;"‪ var x ="test‬كده عرف ان ال ‪ x‬دى شيله ‪ data‬من النوع ‪ string‬ولو مشيت شويه‬
‫فالكود و كتبت ‪ x= 3‬مش هيعترض النه بردو هيعتبر ال ‪ x‬هنا كده ‪ number‬وفى ‪ functions‬جهزه موجوده اسمها‬
‫)‪ typeof(x‬هنا هيجبلك ال ‪ type‬بتاع ال ‪ variable‬اللى قولتله عليه‬

‫لسوء الحظ ان ‪ JS‬بتتعامل مع ال ‪ null‬ان هى ‪ object‬مع ان المفروض ان تطلع‪ null‬ودا ممكن نعتبره انه ‪ bug‬او‬
‫خطأ فى اللغة ولكن الصح هو ان هي المفروض تكون منالنوع ‪ null‬وليس ‪.object‬‬
‫ال ‪ NaN‬هي قيمة وال ‪ Datatype‬بتاعتها هي ‪number‬‬

‫سؤال انترفيو‪ :‬ماهو الفرق بين ‪ null, Undefined‬؟‬


‫ال ‪ null‬هي قيمة ومعناها الشئ او فاضية انما ال ‪ undefined‬هي داتا تايب وهي اني عرفت ‪ variable‬ولسه‬
‫مستخدمتهوش‪.‬‬

‫‪ :Undefined‬ده لو انا عرفت ‪ variable‬ومدتوش قيمة هيقولي ان نوعه ‪.undefined‬‬


‫‪ :Boolean‬ده بيأخد قيمتين فقط يأما ‪ true‬يأما ‪false‬‬
‫‪ :Concatenation‬ده كانه بيلزق ‪ 2 strings‬او اكتر ببعض زى كده‬
‫‪Concat, + sum‬‬
‫;]"‪var x = [" Web "," Design‬‬
‫;]"‪var y = ["Hello”, “world‬‬
‫]"‪var z = x.concat(y) // ["Web","Design","Hello","world‬‬

‫‪var x = 5 + 5; // 10‬‬
‫‪var x = 5 + 5 + "5"; // 105 >> 10+"5" = 105‬‬
‫"‪var x = "5" + 6 + 6; // 566 >> "5"+ 6 = "56">> "56"+ 6 = "566‬‬
‫االقواس بتتنفذ االول "‪var x = "5" + (6 + 6); // 512 >> "5"+ 12 = "512‬‬
‫ودا بيتنفذ مع البالس ‪ +‬فهو بيتعامل مع البالس على انه كونكات اي ليها وظيفتين انما لو استخدمت اي ابوريتور تاني ‪//‬‬
‫هينفذ العملية الحسابية الن هم بيعملو تحويل ضمني‬
‫‪implicit convert‬‬
‫وكذلك ايضا كال من *‪ => =< < >%/‬بيعملو امبليسيت كونفيرت ‪//‬‬
‫مثال‬
‫‪var z = "5" * "6"; // 30‬‬
‫‪var o = "6" / "2"; // 3‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫السبب انه طلعلي النتيجة دي تابع التالى ]‪var m = "Ahmed" * "Mostafa"; // NaN [Not a number‬‬
‫النه فى الباك جروند بيستخدم فانكشن اسمها نامبر ودي بتستخدم للتحويل من سترنج الى نمبر فهو جي يحول الكلمة لقاها‬
‫مش رقم‪//‬‬
‫‪var n = "5"; var c=Number(n); console.log(typeof(c)); // number‬‬
‫االسترينج الفاضي بيعتبر صفر عند تحويله ‪console.log(Number("")); // 0‬‬
‫االسترينج الذي يحتوي على اسبيس فقط بيعتبر صفر عند تحويله ‪console.log(Number(" ")); // 0‬‬
‫‪var b = "" * 5; // 0 >> 0 * 5 = 0‬‬
‫‪console.log(Number(null)); // 0‬‬
‫‪console.log(Number(undefined)); // NaN‬‬
‫‪console.log(Number(true)); // 1‬‬
‫‪console.log(Number(false)); // 0‬‬
‫)‪Conditional statement (if, switch‬‬

‫هو انى ممكن اعمل ‪ check‬على شرط معين لو اتحقق هاخد قرار ما و لو متحققش هاخد قرار تانى فكده احنا‬
‫بنتكلم عن اتحقق يعنى الشرط ده كان صح او كان ‪ true‬او متحققش فبكده الشرط ده كان غلط او كان ‪false‬‬
‫)‪Conditional statement (if‬‬
‫والشرط هنا بعمله عن طريق ال ‪If Condition‬‬
‫;‪var userAge = 10‬‬
‫};)"‪if(userAge > 18 && userAge < 40) {console.log("you can register‬‬
‫};)"‪else{ console.log("You must be 15 years old‬‬

‫‪Condition Operators‬‬ ‫‪Logical Operators‬‬


‫>‬ ‫معناها اكبر من‬ ‫معناها و او اند ودي الزم الشرط يتحقق في &&‬
‫الناحيتين‬
‫<‬ ‫معناها اصغر من‬ ‫||‬ ‫معناها او ودي الزم الشرط يتحقق في ناحية‬
‫واحدة على االقل‬
‫=>‬ ‫معناها اكبر من او يساوي‬ ‫!=‬ ‫معناها التساوي‬
‫=<‬ ‫معناها اصغر من او يساوي‬
‫==‬ ‫معناها اني بسأله هل كذا بيساوي كذا فهي‬
‫بتقارن فاليو بفاليو بغض النظر عن الداتا‬
‫تايب‬
‫معناها اني بقوله هل كذا بيساوي كذا في ===‬
‫الفاليو والتايب‪ ,‬بتقارن فاليو بفاليو وداتا‬
‫تايب بداتا تايب‬
‫سؤال انترفيو‪ :‬ماهو الفرق بين = و == ؟‬
‫ال == معناها (سؤال) اني بسأله هل ال ‪ variable‬كذا بيساوي القيمة دي او شايل القيمة دي ”‪ user = “Ahmed‬انما‬
‫”‪ “Ahmed‬خلي يشيل القيمة دي ‪ variable x‬ف انا بجبره انه يعمل كدا فبقوله ال ‪assign‬ال = معناها اني بعمل‬
‫سؤال انترفيو‪ :‬لو انا قولتله فى ال ‪ condition‬قولتله ‪ x‬فقط او ‪ y‬فقط ماهي النتيجة؟‬
‫;"‪var x = 15; var y = "Ahmed‬‬
‫‪if (x) {console.log("yes");} else {console.log("no");} // yes‬‬
‫‪if (y) {console.log("yes");} else {console.log("no");} // yes‬‬
‫النتيجة هتكون ‪ yes‬الن هو شايف ال ‪ x‬علي انها ب ‪ true‬الن هي بتساوي رقم غير ال ‪ 0‬انما لو قولتله بتساوي ‪0‬‬
‫فهيدخل في ال ‪ else‬وفي ال ‪ y‬شايفها على انها ‪ true‬الن هى شايلة داتا انما لو قولتله ”“ ومدتوش قيمة ف هو هيعتبرها‬
‫كدا ‪ 0‬فهيدخل فى ال ‪else‬‬

‫;)"‪var userAmount = window.prompt("please inter your amount‬‬


‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫};)"‪if (userAmount >= 1000 && userAmount <= 2000) {console.log("Nokia‬‬
‫};)"‪else if (userAmount >= 2001 && userAmount <= 6000) {console.log("oppo‬‬
‫};)"‪else if (userAmount >= 6001 && userAmount <= 12000) {console.log("Samsung‬‬
‫};)"‪else{console.log("please inter more than 1000‬‬
‫)‪Conditional statement (switch‬‬
‫هي نفس فكرة ال ‪ if‬ولكن بفكرة ال ‪ equality‬ومينفعش استخدم فيها >||&&< وبتشتغل بس في حالة ال ‪ equality‬حالة‬
‫اليساوي يعنى النى بقوله فى حالة ‪ case‬كذا اعملي كذا ولو دا اتحقق اعمل ‪ break‬والزم اقوله ‪ break‬عشان لو‬
‫مقولتلوش هيدخل فى ال ‪ case‬اللي بعدها وهينفذها‪..‬‬
‫;)"‪var userName = window.prompt("please inter your Name‬‬
‫{ )‪switch (userName‬‬
‫‪case "Ahmed":‬‬
‫;)"‪console.log("Welcome YA Ahmed‬‬
‫;‪break‬‬

‫‪case "Sara":‬‬
‫;)"‪console.log("Welcome YA Sara‬‬
‫;‪break‬‬

‫‪default:‬‬
‫;)‪console.log("welcome YA " + userName‬‬
‫;‪break‬‬
‫}‬
‫بس في حالة ان لو حد رخم عليك فى انترفيو او في سؤال وقالك ال انا عايز استخدم =< او == او && ‪ ...‬مع ال‬
‫‪ switch‬بس احنا فى الطبيعي مبنستخدمش الطريقة دي وال بنعمل الطريقة دي يعنى بس عشان لو حد رخم‪.‬‬
‫احنا عارفين ان ال ‪ switch‬بتقارن ال ‪ equality‬ففى المثال التالى قولتله فى ال ‪ switch‬كلمة ‪ true‬وفى ال ‪case‬‬
‫‪ userAge == 20‬فالمفروض الشرط دا بيتم ترجمته الى ‪ true‬او ‪ false‬حسب لو الشرط اتحقق وال ال طب ولو الشرط‬
‫اتحقق معناه ان ال ‪ case‬شايله كلمة ‪ true‬ففي هذه الحالة هو هيقارن ما بين ال ‪ true‬اللى فى ال‪ switch‬وبين ال ‪true‬‬
‫اللى في ال ‪ case‬فهيالقيهم شبه بعض فهيحقق ال ‪ case‬دي انما لو ال ‪ case‬شايله ‪ false‬فهنا الشرط مش هيتحقق‬
‫فهيدخل على ال ‪ case‬اللى بعدها وهكذا‪...‬‬
‫‪var userAge = 20‬‬
‫{ )‪switch (true‬‬
‫‪case userAge == 20:‬‬
‫;)"‪console.log("you can register‬‬
‫;‪break‬‬
‫‪default:‬‬
‫)"‪console.log("You must be 15 years old‬‬
‫;‪break‬‬
‫}‬
‫الفرق بين ‪if , switch‬؟‬
‫استخدم ‪ if‬لو انا عايز اتحكم فى حاجة وبستخدم <او> او&&‪..‬‬
‫اما ‪ switch‬في حالة ال ‪ Equality‬واالتنين ‪ Conditional statement‬عادي‬
‫وانا ممكن اعمل اللى بتعملو ‪ switch‬بال ‪ if‬ولكن ال ‪ switch‬كـ ‪ readable‬كـ طريقة كتابة احسن وفى اي لغة برمجة‬
‫تانيه بيقولو ان ال ‪ switch‬اسرع من ‪ if‬اما فى ال ‪ JS‬مبتفرقش كتير الن هي بتعتمد على ال ‪ browser‬ولكن فى العادى‬
‫معظمنا بيستخدم ال ‪ if‬في الحالتين‪.‬‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫)‪ (for, while, do. While, foreach, for of, for in‬تكرر ‪Loop‬‬
‫لو انا معايا حاجة عايز اكررها كذا مرة‬
‫‪for‬‬
‫لو انا معايا حاجة عايز اكررها كذا مرة واهم حاجة عندها هي مرحلة البداية ‪ initialization‬او ال ‪ start‬ومرحلة النهاية‬
‫‪ end‬ومابينهم سطور الكود اللى عايز ادخلها‬

‫تعال نتريس الكود هنا فى ال ‪ for‬اول حاجة بيبص عليها هي ال ‪ start‬وهنا ‪ var x=1‬وبعد كدا بيبص على ال‬
‫‪ condition‬وهنا ‪ x<=100‬فلو الشرط دا اتحقق وبقا ب ‪ true‬بيدخل جوا ال ‪ scope‬بتاع ال ‪ for‬بينفذ الكود وبعد كدا‬
‫بيطلع تاني يـ ‪ increment‬يعنى يزود واحد على قيمة ال ‪ x‬وبكدا ال ‪ x‬فى ال‪ start‬هتكون ب ‪ 2‬وهكذا لحد ما الشرط‬
‫يكون ب ‪.false‬‬
‫طيب في حالة انى محطتلوش حاجة فى ال ‪ for‬زي المثال التالى هينفذلي الكود الى ماالنهاية الن اهم حاجة عند ال‬ ‫‪-‬‬
‫‪ for‬هي ال ‪ condition‬وطالما ال‪ condition‬فاضي معني كدا انه ‪.true‬‬
‫{ ) ; ; ( ‪for‬‬
‫;)"‪console.log("hi‬‬
‫}‬
‫انما لو اديته ال ‪start‬و ال ‪ condition‬هينفذلى الكود ماالنهاية الن قيمة ال ‪ x‬هنا ثابتة مقولتلوش زود حاجة لحد‬ ‫‪-‬‬
‫ماالشرط يبقا ‪. false‬‬
‫{ ) ;‪for (let x = 1; x <= 100‬‬
‫;)"‪console.log("hi2‬‬
‫}‬
‫‪While‬‬
‫ال ‪ while‬معناها طول ما الشرط متحقق ادخل نفذ الكود وال ‪ initialization‬بتاعتها بتكون برا وال ‪ increment‬بيكون‬
‫داخل ‪ scope‬وزيها زي ل ‪.for‬‬
‫;‪var x = 1‬‬
‫{ )‪while (x <= 100‬‬
‫;)"‪console.log("hello‬‬
‫;‪x++‬‬
‫}‬
‫‪do While‬‬
‫‪ do‬معناها اعمل كذا طول ما ‪ while‬كذا‬
‫;‪var x = 1‬‬
‫{ ‪do‬‬
‫;)"‪console.log("Ahmed‬‬
‫‪x++‬‬
‫;)‪} while (x<=100‬‬
‫طيب ايه الفرق ما بينهم؟‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫ال ‪for‬و‪ while‬زي بعض ومفيش فرق مابينهم هنا ولكن بيظهر الفرق في الباك اند ‪ .‬ففي حالة ان لو الشرط متحققش مش‬
‫هيعرف ينفذ الكود‬
‫انما ال ‪ do. While‬انا بقوله اعمل كذا ولما تخلص اتشك على الشرط بتاعى ف لو الشرط متحققش ف هو هينفذلى الكود‬
‫مرة واحدة‪.‬‬
‫طيب انا امتا هلجأ اني استخدم ‪ do while‬اقوله على االقل اعمل دا مرة في حالة انى بعمل انبوت للباسورد واقوله لو‬
‫لقيت الباسورد اكبر من ‪ 10‬احرف هقوله ال ‪ renter‬ال ‪ password‬لحد ما اليوزر يدخلي عدد احرف اقل من ‪ 10‬ويقف‬
‫ويدخل فى االسطر اللى بعد كدا ‪ .‬مثال‬
‫{ ‪do‬‬
‫;)"‪var userPass = window.prompt("please inter password less than 10 character‬‬
‫هنا بقوله طول ما الباسورد اكبر من ‪ 10‬اعملى كذا (اظهر البرومبت) ‪} while (userPass.length > 10); //‬‬

‫;)‪console.log("your password is " + userPass‬‬


‫تطبيق عملي‪ :‬علي ال ‪ for loop‬وهو اننا عايزين نعمل ‪ list‬تحتوي على السنوات من ‪ 1985‬الى ‪2018‬؟‬

‫‪In HTML‬‬
‫>"‪<select name="" id="optName‬‬

‫>‪</select‬‬

‫‪In JS‬‬
‫عملت حصالة فاضية عشان اشيل فيها االوبشن‪var Hasalah = ""; //‬‬
‫{ )‪for (let i = 1985; i <= 2018; i++‬‬
‫قولتله =‪ +‬عشان في كل مرة يزودلي اوبشن على االوبشن اللى موجود او بقوله كل مرة عايز احوش اوبشن في ‪//‬‬
‫الحصالة بتاعتى‬
‫قولتله =‪ +‬عشان في كل مرة يزودلي اوبشن على االوبشن ‪Hasalah += "<option >" + i + "</option>"; //‬‬
‫اللى موجود‬
‫}‬
‫انا ضفته برا االسكوب الني لو ضفته جوا كل مرة هيروح يمسح االوبشن اللى ضافه ويحط الجديد ‪//‬‬
‫;‪document.getElementById("optName").innerHTML = Hasalah‬‬
‫تطبيق بمثال اخر على الجدول او ال ‪ card‬وممكن تستخدمه على اي حاجة انت عايز تكررها اكتر من مرة‬
‫‪In HTML‬‬
‫>"‪<table class="table‬‬
‫>‪<thead‬‬
‫>‪<tr‬‬
‫>‪<th scope="col">#</th‬‬
‫>‪<th scope="col">First</th‬‬
‫>‪<th scope="col">Last</th‬‬
‫>‪<th scope="col">Handle</th‬‬
‫>‪</tr‬‬
‫>‪</thead‬‬
‫>"‪<tbody id="tableOpt‬‬

‫>‪</tbody‬‬
‫>‪</table‬‬
‫‪In JS‬‬
‫"" = ‪var temp‬‬
‫{ )‪for (let i = 0; i < 10; i++‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫` =‪temp +‬‬
‫>‪<tr‬‬
‫">‪"<th scope="row">" + i + "</th‬‬
‫>‪<td>Mark</td‬‬
‫>‪<td>Otto</td‬‬
‫>‪<td>@mdo</td‬‬
‫>‪</tr‬‬
‫`‬

‫}‬
‫;‪document.getElementById("tableOpt").innerHTML = temp‬‬
‫‪Function‬‬
‫هو اسكوب او دالة او موظف بعمله عشان يكون مسئول عن تنفيذ مجموعة الخطوات الموجودة داخل االسكوب دا حتي لو‬
‫كانت ‪ 1000‬خطوة‪.‬‬
‫وبتنقسم الى مرحلتين‪:‬‬
‫‪ .1‬مرحلة ال ‪ :Implementation‬وهي مرحلة التكوين وهي انشاء الفانكشن بتاعتى‬
‫{)(‪function x‬‬
‫;)"‪console.log("hello‬‬
‫;)"‪console.log("hi‬‬
‫}‬

‫‪ .2‬مرحلة ال‪ call‬او ‪ :invoke‬وهي مرحلة اني بنادي على الفانكشن دي او بشغلها‬
‫)(‪x‬‬
‫‪ :parameters‬هي متغيرات الفانكشن بتاخدها يعني مثال لو انا عايز اخلي الفانكشن بتاعتي في كل مرة اجمع‬
‫رقمين مختلفين فى كل مرة فهنا بقا بيجي دور المتغيرات ‪( .parameters‬الفانكشن بتاخد اكتر من ‪parameters‬‬
‫وممكن متأخدش اصال)‬
‫االفضل اننا نسمي الفانكشن بفعل ودا احسن ككلين كود‪function sum(x, y) //‬‬
‫{‬
‫;)‪console.log(x + y‬‬
‫}‬
‫‪sum(5,6); // 11‬‬
‫‪sum(100,200); // 300‬‬
‫‪ :Return‬طب في حالة انى لو مش عايز اخلي يطلعهم فى ال ‪ console‬وعايزه يرجعهملي في المكان اللى انا‬
‫عملت في ‪ call‬ودا ال ‪ Return‬بقا فهو بيروح للسطر اللى انا ب ‪ call‬في الفانكشن وبيشيل ال ‪ call‬وبيحط‬
‫مكانه نتيجة الخطوات اللى داخل ال ‪ scope‬مثال لو انا بجمع ما بين ‪ 2‬متغير فهو هيحطلي النتيجة بتاعتهم‬
‫وعشان كدا انا الزم استقبل القيمة دي في ‪ variable‬فبالتالى وانا بعمل ‪ call‬للفانكشن بحط ال ‪ variable‬بتاعى‬
‫زي المثال التالى كدا طب ليه انا بعمل كدا‪.‬‬
‫{)‪function getSum(num1, num2‬‬
‫بقوله رجعلي كذا كذا‪return num1 + num2 //‬‬
‫}‬
‫;)‪var total = getSum(5,5‬‬
‫;)‪console.log(total‬‬
‫طب انا ليه بعمل كدا عشان انا بعد كدا هستخدمها وهعمل عليها ‪ operation‬زي مثال لو انا عايز اقوله لو‬
‫الراجل دا اشتري حاجات اكبر من ‪10‬االف يبقا الراجل دا له خصم زي المثال التالي كدا‬
‫{)‪function getSum(num1, num2‬‬
‫‪return num1 + num2‬‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫}‬

‫;)‪var total = getSum(5000,6000‬‬

‫{)‪if(total > 10000‬‬


‫;)"يستحق الخصم"(‪console.log‬‬
‫يستحق الخصم‪}//‬‬
‫(الفانكشن ليها ‪ return‬واحد بس الن الفانكشن بتفضل شغالة لحد ما ترجع الداتا وبعد كدا بتقف)‬
‫سؤال‪ :‬ال ‪ return‬الواحد ينفع ارجع في اكتر من حاجة؟ ال الن ال ‪ return‬بترجع حاجة واحدة فقط يعنى مثال فى المثال‬
‫التالى انا هقوله اجمعلي وعملت كومه‪ ,‬وبعد كدا كتبت ”‪ “Ahmed‬فهو هيرجعلي احمد النه نفذ اخر طلب وبـ‪ignore‬‬
‫اللى قبله‪.‬‬
‫{)‪function getSum(num1, num2‬‬
‫"‪return num1 + num2, "Ahmed‬‬
‫}‬
‫;)‪var total = getSum(5000,6000‬‬
‫‪console.log(total); //Ahmed‬‬
‫‪Scope‬‬
‫معناها مدي او حدود وعندنا نوعين من ال ‪ scope‬وهما ‪Global Scope , Local Scope‬‬
‫‪ :Global Scope‬هو لو انا عندى ‪ variable‬برا ‪ function‬الني مش بكون حاططله حدود (‪ )scope‬فهو بذلك‬
‫متعرف على مستوي الكود كله واقدر استخدمه فى اي مكان فى الكود حتي لو جيت استخدمته داخل فانكشن هينفع عادى‪.‬‬

‫‪ :Local Scope‬وهي اني لو عندى ‪ function‬ومستخدم بداخلها ‪ variable‬مقدرش استخدمه خارج ال‪ scope‬بتاع‬
‫الفانكشن دي ابدا النه هو كدا ‪ local scope‬خاص بالفانكشن دي فقط واقدر استخدمه فى اي مكان داخلها فقط‪.‬‬
‫‪Hoisting‬‬
‫معناه رفع كل ال ‪ declarations‬اللى عندى في الكود واللى بيقوم بالدور دا هو ال ‪ browser‬فهو بيرفع كل ال‬
‫‪ declarations‬فى اول الكود وبعد ما بيخلص رفع بيروح يرن الكود بتاعى وبيرن كل حاجة فى مكانها كل حاجة فى‬
‫مرحلة ال ‪ assign‬بتاعتها مثال‬
‫‪console.log(x); // undefined‬‬
‫;"‪var x = "Ahmed‬‬
‫فى الكود السابق الناتج ‪ undefined‬النه راح عمل ‪ hosting‬فخد ال ;‪ var x‬وحطها فوق في بداية الكود وبعد كدا عمل‬
‫‪ log‬فبالتالى ال ‪ x‬لسه فاضية وبعد ال ‪ log‬هيعمل ‪ assign‬لل ‪ x‬في مكانها فى السطر بتاعها بالقيمة بتاعتها ولو قولتله‬
‫‪ log‬تانى الناتج هيكون احمد‬
‫]‪var x; // declaration [hoisting‬‬
‫‪console.log(x); // undefined‬‬
‫‪x = "Ahmed"; // assign‬‬
‫‪console.log(x); // Ahmed‬‬
‫وال ‪ hoisting‬مع ال ‪ functions‬ال ‪ declarations‬بيتم داخل الفانكشن وليس فى بداية الكود‬
‫{ )(‪function welcome‬‬
‫;)‪console.log(y‬‬
‫;"‪var y = "Ali‬‬
‫}‬
‫‪welcome() // undefined‬‬
‫النه هيعمل دكلريشن على مستوي االسكوب بتاع الفانكشن فهو بيعمل الكود بالشكل التالى كدا‬
‫{ )(‪function welcome‬‬
‫;‪var y‬‬
‫;)‪console.log(y‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫;"‪y = "Ali‬‬
‫}‬
‫‪expression Statement Function‬‬
‫عندى طريقتين لكتابة ال ‪ function‬وهما ال ‪statement function or declaration function, expression‬‬
‫‪function‬‬

‫‪:statement function or declaration‬‬


‫{ )(‪function test‬‬
‫;)"‪console.log("Ali‬‬
‫}‬
‫)(‪test‬‬
‫‪:expression function‬‬
‫{)(‪var test = function‬‬
‫;)"‪console.log("Ahmed‬‬
‫}‬
‫)(‪test‬‬

‫سؤال انترفيو‪ :‬طيب امتا استخدم واظف دي او دي او ايه الفرق ما بينهم؟‬


‫هو ان ال ‪ statement‬ينفع اعملها ‪ call‬في اي مكان فى الكود بسبب ال ‪ hoisting‬الن الفانكشن كاملة بيتعملها‬
‫‪ hoisting‬في الباك جراوند فى بداية الكود اما ال ‪ Expression‬مينفعش اعمل ‪ call‬ليها في اي مكان فى الكود الزم ال‬
‫‪ call‬يكون بعد كتابة الفانكشن الن لما الجافا سكريبت تعمل ‪ hoisting‬بتأخد ;‪ var test‬في بداية الكود وبيشوفه على انه‬
‫فاريبول عادي ولو انا عامل ‪ call‬قبل كتابة الفانكشن هيقولى ان )(‪ test‬دي ‪ not a function‬النه شايفها كفاريبول زي‬
‫المثال التوضيحي دا كدا‪.‬‬
‫دا الكود وهيطلعلي خطأ ان هى مش فانكشن ‪//‬‬
‫)(‪test‬‬
‫{)(‪var test = function‬‬
‫;)"‪console.log("Ahmed‬‬
‫‪} // Result: test is not a function‬‬
‫والكود التالى هيشرحلك اي اللى بيحصل في الباك جروند‬
‫‪var test; // Declaration‬‬
‫هنعمل كوول للفانكشن هنا والناتج هيكون نوت از ا فانكشن النه شايف التيست على انه فاريبول ‪test() //‬‬
‫{)(‪test = function‬‬
‫;)"‪console.log("Ahmed‬‬
‫انما لو عملت كوول للفانكشن هنا هيطلعلي ناتج عادي‪} //‬‬
‫طيب امتا استخدم دي وامتا استخدم دي وانهي افضل‬
‫في المعتاد بستخدم االكسبريشن فانكشن لو انا شغال مع اكتر من ديفلوبر في نفس البروجكت ومش عايزه يستخدم‬
‫الفانكشن قبل ما انا اعرفها انما فى المعتاد احنا بنستخدم اكتر ال ‪.statement‬‬
‫امثلة انترفيو على الفانكشن‪ :‬فكر فيها بطريق الهوستنج وازاي الكود بيشتغل فى الباك جراوند‬
‫{)(‪function foo‬‬
‫};‪function bar() {return 3‬‬
‫)(‪return bar‬‬
‫};‪function bar() {return 8‬‬
‫}‬
‫‪alert(foo()) // 8‬‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫‪.‬‬
‫{)(‪function foo‬‬
‫};‪var bar = function() {return 3‬‬
‫)(‪return bar‬‬
‫};‪var bar = function() {return 8‬‬
‫}‬
‫‪alert(foo()) // 3‬‬
‫‪.‬‬
‫{)(‪function foo‬‬
‫)(‪return bar‬‬
‫};‪function bar() {return 3‬‬
‫};‪var bar = function() {return 8‬‬
‫}‬
‫‪alert(foo()) // 3‬‬
‫‪.‬‬
‫‪alert(foo()) // Not a function‬‬
‫{)(‪var foo = function‬‬

‫)(‪return bar‬‬
‫};‪function bar() {return 3‬‬
‫};‪var bar = function() {return 8‬‬
‫}‬

‫‪self invoke‬‬
‫ومعناها ان الفانكشن بتنادي نفسها وبستخدمها فى حالة انى لو عايز الفانكشن تشتغل اول ما اعمل ريفريش‪ ,‬وخد بالك ان‬
‫السيلف انفوك بيحصلها ‪ call‬مرة واحدة فقط فبالتالى مش هحتاج اديها اسم النى مش هنديها تانى وطريقة كتابتها بالشكل‬
‫دا‬
‫{)(‪(function‬‬
‫;)"‪console.log("Ahmed‬‬
‫)()}‬
‫طيب امتا استخدمها او استخدمها فى ايه وايه فائدتها؟‬
‫لو انا عندي مجموعة من الفاريبول عايزهم يكونو الى حد ما موجودين داخل االسكوب دا ومحدش برا االسكوب دا يعمل‬
‫عليه تعديل‬
‫بمعني اننا بنستخدمها عشان نلوكل الفاريبول بس كدا‪.‬‬
‫طيب ال ‪ self-invoke‬بيحصلها ‪ hosting‬وال ال ؟‬
‫مش بيحصلها هوستنج الن انا مش بعملها ‪call‬قبليها او بعديها النها بترن لوحدها وهى تبع عائلة ال ‪expression‬‬
‫‪function‬‬

‫ومعلومة ليك اي فانكشن مش بتبدأ بكلمة فانكشن تبقا من النوع االكسبريشن‪..‬‬


‫‪String Methods‬‬
‫هي عبارة عن ‪ built in methods‬وهي فانكشن جاهزة موجودة فى الجافاسكريبت اقدر استخدمها لتنفيذ حاجة معينة‬
‫مثال لو انا عايز اخلي كل الحروف تكون كابيتال‬

‫;"‪var message = "Ahmed Mostafa is a Developer‬‬


‫‪console.log(message.toUpperCase()); // AHMED MOSTAFA IS A DEVELOPER‬‬
‫كل الحروف تكون اسمول‪toUpperCase() //‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫;"‪var message = "Ahmed Mostafa is a Developer‬‬
‫‪console.log(message.indexOf("Mostafa")); // 6‬‬
‫بتبحث عن كلمة في الجملة وبترجعلي مكانها فى الجملة دي ولو ملقاش الكلمة دي هيرجع ‪indexof() //1-‬‬
‫بتعمل سيرش من وراء من اليمين للشمال يعني‪lastindexof()//‬‬
‫;"‪var message = "Ahmed Mostafa is a Developer‬‬
‫‪console.log(message.charAt(4)); // d‬‬
‫بديلو رقم مكان بيجبلي هو اي فى الجملة‪charAt(4)//‬‬
‫;"‪var message = "Ahmed Mostafa is a Developer‬‬
‫‪console.log(message.length); // 28‬‬
‫وهي بروبرتي بترجعلي عدد الحروف والعد فى بيبتدي من ‪lenght//1‬‬
‫;"‪var message = "Ahmed Mostafa is a Developer‬‬
‫‪console.log(message.substring(6,13)); // Mostafa‬‬
‫هتقصلي حته من الجملة الموجودة فى الفاريبول بتاعى وخد بالك ان هي هتفضل زي ماهي في ‪lastindexof()//‬‬
‫الفاريبول دا وبتأخد ‪ 2‬متغير عبارة عن ارقام االماكن فى الجملة والمتغير االوالنى هو ماندتوري يعني الزم احطه‬
‫والمتغير التاني اوبشن ممكن احطه وممكن ال وخد بالك ان المتغير التاني هي بتمينص واحد من الرقم اللى انا مدهوله‬
‫يعني لو حتطلها ‪ 9‬هي هتقف لحد االندكس رقم ‪8‬‬
‫;"‪var message = "Ahmed Mostafa is a Developer‬‬
‫‪console.log(message.substr(6,3)); // Mos‬‬
‫بتاخد ‪ 2‬براميتر اول براميتر البداية وتاني براميتر بقوله اللينس يعنى عدد االحرف اللى عايزها وهي محدش ‪substr()//‬‬
‫بيستخدمها‬
‫مثال للتطبيق جميل وهو اني عايز يكون عندى ‪ 3‬انبوت وزرار االنبوت ‪ 1‬اكتب في ايميل ولما ادوس على الزرار‬
‫يطبعلي االسم فى انبوت‪ 2‬والدومين في انبوت ‪3‬‬

‫‪// in html‬‬
‫> "‪<input id="input1" class="form-control mb-3" type="text‬‬
‫>"‪<input id="input2" class="form-control mb-3" type="text‬‬
‫>""=‪<input id="input3" class="form-control mb-3" type="text" name="input3" value‬‬
‫>‪<button onclick="run()" class="btn btn-success">click</button‬‬
‫‪// in js‬‬
‫{)(‪function run‬‬
‫‪var userEmail = document.getElementById("input1").value; // [email protected]‬‬
‫‪var locationAt = userEmail.indexOf("@"); // to get @ location‬‬
‫‪var cutNameOnly = userEmail.substring(0,locationAt) // to cut name from email‬‬
‫‪document.getElementById("input2").value = cutNameOnly; // to add value in input2‬‬
‫‪var cutDomain = userEmail.substring(locationAt +1) // to cut Domain from email‬‬
‫‪document.getElementById("input3").value = cutDomain; // to add value in input3‬‬
‫}‬
‫‪Object‬‬
‫هو نوع من البيانات اللي بيسمح لك تخزن بيانات على شكل مفتاح وقيمة ‪ (key-value pairs).‬يعني كأنك عندك قاموس‬
‫وكل كلمة ليها معنى معين‪.‬‬
‫المميزات الرئيسية لألوبجكت في‪JavaScript:‬‬
‫‪ .1‬مفاتيح وقيم ‪:‬كل حاجة جوه األوبجكت بتكون عبارة عن مفتاح وقيمة‪ .‬المفتاح بيكون اسم الحاجة والقيمة بتكون‬
‫الحاجة نفسها‪.‬‬
‫‪ .2‬ديناميكية ‪:‬تقدر تضيف أو تشيل مفاتيح وقيم في أي وقت‪ .‬وكمان اقدر امسح العنصر كله مرة واحدة بدل ما امسح‬
‫بروبرتي بروبرتي‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫‪ .3‬تخزين أي نوع من البيانات ‪:‬األوبجكت ممكن يخزن أرقام‪ ،‬نصوص‪ ،‬مصفوفات‪ ،‬وأوبجكتات تانية‪.‬‬
‫يعني بإختصار األوبجكت بيساعدك تخزن بيانات مترتبة ومنظمة بحيث تكون سهل الوصول والتعامل معاها‪ .‬زي ما‬
‫يكون عندك كراسة وكل صفحة فيها معلومات عن حاجة معينة بعناوين وأوصاف‪ .‬وفيدته لو انا عايز اجمع اكتر من‬
‫معلومة لنفس الشخص (موظف) او لنفس الحاجة (عربية)‪.‬‬
‫مثال‪:‬‬
‫تخيل إنك عاوز تخزن بيانات عن عربية‪ .‬األوبجكت بيساعدك تعمل ده بطريقة منظمة‪.‬‬
‫إنشاء أوبجكت ‪//‬‬
‫{ = ‪var car‬‬
‫‪make: "Toyota",‬‬
‫‪model: "Corolla",‬‬
‫‪year: 2020,‬‬
‫‪color: "red",‬‬
‫‪cChild : {cModel: "Corolla S16", cYear:2024, cColor: "Blue"},// child object‬‬
‫‪calcPrice: function(){console.log("hello Ahmed")}// use function or method in object‬‬
‫;}‬
‫الوصول إلى قيم األوبجكت ‪//‬‬
‫‪: Toyota‬الناتج ‪console.log(car.make); //‬‬
‫‪: Corolla‬الناتج ‪console.log(car["model"]); //‬‬
‫‪console.log(car.cChild.cModel); // Corolla S16‬‬
‫‪car.calcPrice() // hello ahmed‬‬
‫إضافة مفتاح وقيمة جديدين ‪//‬‬
‫;"‪car.owner = "Ahmed‬‬
‫‪: Ahmed‬الناتج ‪console.log(car.owner); //‬‬

‫تعديل قيمة موجودة ‪//‬‬


‫;"‪car.color = "blue‬‬
‫‪: blue‬الناتج ‪console.log(car.color); //‬‬
‫حذف مفتاح وقيمة ‪//‬‬
‫;‪delete car.year‬‬
‫‪: undefined‬الناتج ‪console.log(car.year); //‬‬
‫التكرار على مفاتيح األوبجكت ‪//‬‬
‫{ )‪for (var key in car‬‬
‫;)]‪console.log(key + ": " + car[key‬‬
‫}‬
‫‪:‬الناتج ‪//‬‬
‫‪// make: Toyota‬‬
‫‪// model: Corolla‬‬
‫‪// color: blue‬‬
‫‪// owner: Ahmed‬‬

‫االوبجكت مهم جدا جدا جدا للجافا سكريبت‪ :‬النه االساس او البنية التحتية بتاعت الجافا سكريبت النها مبنية عليه‬
‫مثال )(‪ window.alert‬فهنا الويندو عبارة عن اوبجكت وااللرت عبارة عن بروبرتي والويندو بيمثل ال‪ browser‬وهو‬
‫اعم واشمل من ال ‪document‬‬
‫مثال‪ document.getElementById("") 2‬ايضا الدوكيمنت عبارة عن اوبجكت والجيت عبارة عن بروبرتي‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫والدوكيمنت بيمسك ال ‪ html‬كود‪.‬‬
‫وبما يرضي هللا ف ال ‪ window‬هو اكبر اوبجكت عندى فى الجافا سكريبت الن المفروض اكتب كدا‬
‫‪ window.document.getElement..‬او‬
‫)(‪ Window.console.log‬طيب انا ليه فى العادي مش بكتب ‪ window‬الن ال ‪ browser‬في الباك جراوند بيكلمها‬
‫وبيكتبها النه االوبجكت االكبر‬
‫فالجافا سكريبت كلها ماشية كدا ودا الكووور بتاعها يا صديقي‪.‬‬
‫‪Array‬‬
‫هي طريقة لتخزين مجموعة من القيم في متغير واحد‪ .‬يعني بدل ما يكون عندك متغير لكل قيمة‪ ،‬المصفوفة بتسمح لك‬
‫تحط كل القيم دي في مكان واحد وتتعامل معاها بسهولة‪ .‬زي كده لما تكون كاتب حاجات عاوز تشتريها في ورقة‪ ،‬تقدر‬
‫تخزنها كلها في مصفوفة‪ .‬والداتا تايب بتاعته ‪ object‬يعنى شئ‪.‬‬
‫وفى العادة بنستخدمه فى حالة انى لو عايز اعمل ‪ list‬او قائمة من حاجة‪.‬‬
‫المميزات الرئيسية للمصفوفات في‪JavaScript:‬‬
‫‪ .1‬تخزين قيم متعددة ‪:‬تقدر تخزن أرقام‪ ،‬نصوص‪ ،‬أو حتى كائنات ومصفوفات تانية جواها‪ .‬الن ال ‪ JS‬هي‬
‫‪loosely datatype‬‬
‫‪ .2‬الفهرسة تبدأ من الصفر ‪:‬أول عنصر في المصفوفة بيكون عند الرقم ‪ ،0‬والتاني عند ‪ ،1‬وهكذا‪.‬‬
‫‪ .3‬ديناميكية ‪:‬المصفوفة ممكن تكبر وتزيد عليها عناصر‪ ،‬أو تصغر وتشيل منها عناصر‪.‬‬
‫‪ .4‬الطرق المدمجة ‪: JavaScript‬فيها طرق جاهزة للتعامل مع المصفوفات زي ‪ push‬اللي بتضيف عنصر في‬
‫اآلخر‪ ،‬و ‪pop‬اللي بتشل آخر عنصر‪ ،‬و ‪ shift‬اللي بتشل أول عنصر‪ ،‬و ‪ unshift‬اللي بتضيف عنصر في‬
‫األول‪ ،‬وغيرها كتير‪.‬‬
‫يعني باختصار‪ ،‬المصفوفة بتخليك تجمع حاجات كتير في مكان واحد وتتعامل معاها بسهولة‪ .‬مثال‬
‫‪ Array‬إنشاء ‪//‬‬
‫;]"‪var fruits = ["Apple", "Banana", "Cherry‬‬

‫الوصول إلى عناصر المصفوفة ‪//‬‬


‫‪: Apple‬الناتج ‪ //‬فروت اوف زيرو اي الفروت االندكس بتاعها زيرو ‪console.log(fruits[0]); //‬‬
‫‪: Cherry‬الناتج ‪console.log(fruits[2]); //‬‬
‫‪: Cherry‬الناتج ‪//‬دا لو عايز اوصل الخر عنصر في االراي بتاعى ‪console.log(fruits[fruits.lenght -1]); //‬‬
‫إضافة عنصر إلى المصفوفة ‪//‬‬
‫;)"‪fruits.push("mango‬‬
‫]"‪: ["Apple", "Banana", "Cherry", "Mango‬الناتج ‪console.log(fruits); //‬‬
‫إزالة العنصر األخير من المصفوفة ‪//‬‬
‫;)(‪fruits.pop‬‬
‫]"‪: ["Apple", "Banana", "Cherry‬الناتج ‪console.log(fruits); //‬‬
‫التكرار على عناصر المصفوفة ‪//‬‬
‫{ )‪for(var i = 0; i < fruits.length; i++‬‬
‫;)]‪console.log(fruits[i‬‬
‫}‬

‫‪: // Apple // Banana // Cherry‬الناتج ‪//‬‬


‫طيب تعالى نشرح كل ال ‪ methods‬الموجودة فى ال ‪ JavaScript‬عشان نقدر نستخدمها فى المستقبل وتسهل علينا‬
‫حياتنا فى الكود‪.‬‬
‫‪String Methods‬‬
‫‪push():‬‬
‫‪.‬دي بتضيف عنصر جديد في آخر المصفوفة‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫;]‪let arr = [1, 2, 3‬‬
‫]‪ [1, 2, 3, 4‬بقت ‪arr.push(4); //‬‬
‫‪pop():‬‬
‫‪.‬دي بتشيل آخر عنصر من المصفوفة وترجعه‬
‫;]‪let arr = [1, 2, 3‬‬
‫بقت [‪ ]2 ,1‬واللي اتشال هو ‪arr.pop(); // 3‬‬
‫‪shift():‬‬
‫‪.‬دي بتشيل أول عنصر من المصفوفة وترجعه‬
‫;]‪let arr = [1, 2, 3‬‬
‫بقت [‪ ]3 ,2‬واللي اتشال هو ‪arr.shift(); // 1‬‬
‫‪unshift():‬‬
‫‪.‬دي بتضيف عنصر جديد في أول المصفوفة‬
‫;]‪let arr = [1, 2, 3‬‬
‫]‪ [0, 1, 2, 3‬بقت ‪arr.unshift(0); //‬‬
‫‪indexOf():‬‬
‫‪.‬دي بتدور على عنصر معين وترجع موقعه (اإلندكس) في المصفوفة‬
‫;]‪let arr = [1, 2, 3‬‬
‫رجعت ‪ 1‬ألن ‪ 2‬موجودة في اإلندكس ‪arr.indexOf(2); // 1‬‬
‫‪includes():‬‬
‫‪.‬دي بتشوف لو العنصر موجود في المصفوفة أو أل‬
‫;]‪let arr = [1, 2, 3‬‬
‫ألن ‪ 2‬موجودة ‪ true‬رجعت ‪arr.includes(2); //‬‬
‫‪concat():‬‬
‫‪.‬دي بتجمع مصفوفتين مع بعض وترجع مصفوفة جديدة‬
‫;]‪let arr1 = [1, 2‬‬
‫;]‪let arr2 = [3, 4‬‬
‫]‪ [1, 2, 3, 4‬بقت ‪let newArr = arr1.concat(arr2); //‬‬
‫‪join():‬‬
‫‪.‬دي بتجمع عناصر المصفوفة في سترينج واحد‬
‫;]‪let arr = [1, 2, 3‬‬
‫"رجعت "‪let str = arr.join("-"); // 3-2-1‬‬
‫‪slice():‬‬
‫)‪. Slice(start, end -1‬دي بتاخد جزء من المصفوفة وترجع مصفوفة جديدة بالجزء ده‪ .‬تشبه فكرة الساب سترينج‬
‫;]‪let arr = [1, 2, 3, 4‬‬
‫]‪ [2, 3‬رجعت ‪let newArr = arr.slice(1, 3); //‬‬
‫‪splice():‬‬
‫)‪.Splice(index, number of element to delete, Add element‬دي بتشيل أو تضيف عناصر في المصفوفة‬
‫;]‪let arr = [1, 2, 3, 4‬‬
‫]‪ splice(1,2,”ahmed”,”ali”);Splice(1,0,”5”)// [1,5,3,4‬بقت [‪ ]4 ,1‬وشالت ‪ 2‬و‪arr.splice(1, 2); // 3‬‬
‫‪reverse():‬‬
‫‪.‬دي بتقلب ترتيب المصفوفة‬
‫;]‪let arr = [1, 2, 3‬‬
‫]‪ [3, 2, 1‬بقت ‪arr.reverse(); //‬‬
‫‪sort():‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫بيقارن باول ]‪. But arrayA = [10,20,100,30,5] ... arrayA.sort() // [10,100,20,30,5‬دي بترتب المصفوفة‬
‫رقم‬
‫;]‪let arr = [3, 1, 2‬‬
‫]‪ [1, 2, 3‬بقت ‪arr.sort(); //‬‬
‫‪map():‬‬
‫‪.‬دي بتطبق دالة معينة على كل عنصر في المصفوفة وترجع مصفوفة جديدة بالنتايج‬
‫;]‪let arr = [1, 2, 3‬‬
‫]‪ [2, 4, 6‬بقت ‪let newArr = arr.map(x => x * 2); //‬‬
‫‪filter():‬‬
‫‪.‬دي بتفلتر المصفوفة وترجع العناصر اللي بتتحقق فيها شرط معين‬
‫;]‪let arr = [1, 2, 3, 4‬‬
‫]‪ [3, 4‬بقت ‪let newArr = arr.filter(x => x > 2); //‬‬
‫‪reduce():‬‬
‫‪.‬دي بتجمع (تختزل) المصفوفة لقيمة واحدة باستخدام دالة معينة‬
‫;]‪let arr = [1, 2, 3, 4‬‬
‫رجعت ‪let sum = arr.reduce((acc, x) => acc + x, 0); // 10‬‬
‫‪forEach():‬‬
‫‪.‬دي بتطبق دالة معينة على كل عنصر في المصفوفة بدون ما ترجع حاجة‬
‫;]‪let arr = [1, 2, 3‬‬
‫بتطبع ‪arr.forEach(x => console.log(x)); // 3 ,2 ,1‬‬
‫‪find():‬‬
‫‪.‬دي بتالقي أول عنصر في المصفوفة بيحقق شرط معين‬
‫;]‪let arr = [1, 2, 3, 4‬‬
‫رجعت ‪let found = arr.find(x => x > 2); // 3‬‬
‫‪findIndex():‬‬
‫‪.‬دي بتالقي أول إندكس لعنصر بيحقق شرط معين‬
‫;]‪let arr = [1, 2, 3, 4‬‬
‫رجعت ‪let foundIndex = arr.findIndex(x => x > 2); // 2‬‬
‫‪every():‬‬
‫‪.‬دي بتشوف لو كل العناصر في المصفوفة بتحقق شرط معين‬
‫;]‪let arr = [1, 2, 3, 4‬‬
‫‪ true‬رجعت ‪let allAboveZero = arr.every(x => x > 0); //‬‬
‫‪some():‬‬
‫‪.‬دي بتشوف لو في على األقل عنصر واحد في المصفوفة بيحقق شرط معين‬
‫;]‪let arr = [1, 2, 3, 4‬‬
‫‪ true‬رجعت ‪let someAboveThree = arr.some(x => x > 3); //‬‬
‫دي كده كل الميثودز اللي ممكن تستخدمها مع المصفوفات في‪JavaScript.‬‬
‫سؤال انترفيو‪ :‬ماهو الفرق بين ال ‪ Array‬و ال ‪ object‬وامتا استخدم دا وامتا استخدم دا؟‬
‫باستخدم االوبجكت لو عايز اعمل داتا مختلفة لحاجة معينة (لنفس الشخص) يعنى الداتا الخاصة ب أحمد انما باستخدم‬
‫االراي لو عايز اعمل داتا متشابهه ألشخاص مختلفة لو عايز اجمع اسامينا لو عايز اجمع اعمارنا عايز اجيب اسامي‬
‫الفاكهة وهكذا بمعني اصح لو عايز اليست حاجة‪.‬‬
‫واالراي اقدر اعمل عليه ‪ loop‬النه بيتكون من مجموعة من االندكس انما االوبجكت ال مقدرش اعمل عليه النه بيتكون‬
‫من مجموعة بروبرتي ولكن هبقا اوظفه‬
‫واالوبجكت مينفعش ادخل جوا بروبرتي معينة ولكن اقدر اوظفه بعدين اما االراي اقدر اضيف واشيل‪.‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
CRUD (Create, Retrieve (Display), Update, Delete) Application EX ‫مهم جدا‬

// --------------------------- CRUD Application --------------------------- //


// 4 inputs values
// ‫مينفعش اقوله هنا دوت فاليو النى مش عايزه يجيب الفاليو دلوقتي ويمسك االنبوت كله ويجيب الفاليو لما ادوس بقا على‬
‫الزرار‬
var inputName = document.getElementById("inputName");
var inputPrice = document.getElementById("inputPrice");
var inputCategory = document.getElementById("inputCategory");
var inputDescription = document.getElementById("inputDescription");

var addProductRow = document.getElementById("tableRow");


// ‫انشاء تمب فاضية لتخزين المنتجات بها في اراي‬
var temp = []; // ‫عرفته برا عشان يكون فاضي اول ما افتح االبلكيشن وبعد كدا ابدأ اخزن في‬
// ‫تشغيل زرار اضافة المنتج عن طريق عمل اوبجكت لتخزين مدخالت المنتج واضافتهم فى اراي‬
function addProduct() {
// create object to recive data from inputs
var oneProduct = {
pName : inputName.value,
pPrice : inputPrice.value,
pcategory : inputCategory.value,
pdescription : inputDescription.value,
}
temp.push(oneProduct); // to add data to array
console.log(oneProduct); // to test result
console.log(temp); // to test result

displayproduct(); // to call function display data


clearInputs(); // to clear inputs
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
‫}‬
‫‪// create function to Display data in table‬‬
‫{ )(‪function displayproduct‬‬
‫;"" = ‪var allRwoData‬‬
‫{ )‪for (var i = 0; i < temp.length; i++‬‬
‫` =‪allRwoData +‬‬
‫>‪<tr‬‬
‫>‪<td> ${temp[i].pName} </td‬‬
‫>‪<td> ${temp[i].pPrice} </td‬‬
‫>‪<td> ${temp[i].pcategory} </td‬‬
‫>‪<td> ${temp[i].pdescription} </td‬‬
‫>‪<td> ${temp[i].pName} </td‬‬
‫>‪<td> ${temp[i].pName} </td‬‬
‫`>‪</tr‬‬
‫}‬
‫;‪addProductRow.innerHTML = allRwoData‬‬
‫}‬
‫‪// clear inputs‬‬
‫{ )(‪function clearInputs‬‬
‫;"" = ‪inputName.value‬‬
‫;"" = ‪inputPrice.value‬‬
‫;"" = ‪inputCategory.value‬‬
‫;"" = ‪inputDescription.value‬‬
‫}‬
‫بعد كدا هنكون محتاجين نخزن الداتا دي ف مؤقتا الننا معناش باك اند هنخزن الداتا دي وهي داتا صغيرة فى حاجة اسمها‬
‫‪Local Storage‬‬
‫‪Local Storage‬‬
‫كل متصفح عنده زي اوضة صغيرة نقدر نخزن فيها داتا وممكن نشبها بالداتا بيز وبتكون عبارة عن ‪ 2‬عمود ‪key ,‬‬
‫‪ . value‬وفكرته تقوم على انك لو عملت ريفريش او قفلت البروزر وفتحته تانى هتالقي برضو الداتا متخزنة وموجودة‪.‬‬
‫ف وانا رايح اخزن عن طريق )”‪ setitem(“key”,”value‬وعندها شرط ان ال ‪ value‬الزم تكون على شكل ‪string‬‬
‫حتي لو رقم دخلهولها على شكل ‪ string‬حتي لو انت اديتها رقم هي هتحولها ل ‪ .string‬اما لو انا عايز اجيب من عندها‬
‫حاجة باستخدم فانكشن اسمها )”‪ getitem(“key‬وبدخلها اسم ال ‪ key‬اللى عايز اجيب الداتا بتاعته‪ .‬وال ‪ size‬بتاعها هو‬
‫‪ .5 MB‬فهى معمولة ل حاجات صغيرة مثال لو عامل تسجيل دخول على الفيس بوك او جوجل وهكذا‪ .‬يبقا نقدر من‬
‫خاللها تخزين داتا واليمكن استخدمها مع تخزين الداتا الكبيرة وبتكون متخزنه فى البروزر‪.‬‬

‫)"‪localStorage.setItem("user Name" , "Ahmed Mostafa‬‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫هيرجع احمد مصطفي طيب لو قولتله هاتهولى وهو مش ‪console.log(localStorage.getItem("user Name"))//‬‬
‫موجود هيرجع نال‬
‫لحذف كي واحد فقط معين ‪localStorage.removeItem("user Name") //‬‬
‫لحذف كل ماهو موجود فى اللوكل استوريتج ‪localStorage.clear() //‬‬
‫‪Session Storage‬‬
‫هي هي ال ‪ local storage‬بالظبط ولكن الفرق مابينهم هو ان ال ‪ session‬بتكون بيير سيشن يعنى طول ما انت فاتح‬
‫البراوزر حتي لو عملت ريفريش هتفضل موجودة انما لو قفلت البروزر وفتحته تاني هترجع تالقيها مش موجودة‪.‬‬
‫واالفضل في التعامل معاها هى ال ‪ .local storage‬تطبيق‬
‫)"‪sessionStorage.setItem("user Name" , "Ahmed Mostafa‬‬
‫;))"‪console.log(sessionStorage.getItem("user Name‬‬
‫لحذف كي واحد فقط معين ‪sessionStorage.removeItem("user Name") //‬‬
‫لحذف كل ماهو موجود فى اللوكل استوريتج ‪sessionStorage.clear() //‬‬
‫تعال بقا نطبق ال ‪ local storage‬علي ال ‪ CRUD App‬اللى عملناها فوق عشان نخزن المنتجات بتاعتنا فهروح اعمل‬
‫‪ setitem‬بعد ما بعمل ‪.push‬‬
‫‪Local Storage in CRUD Application‬‬
‫تم التعديل علي التيمب وعملناها كمتغير فقط الن لو انا عملت ريفريش التمب هترجع اراي فاضية تاني ف الزم احط ‪//‬‬
‫شرط االول اقوله هاتلي الداتا من‬
‫من االستوريدج االول واعرضها وفى حالة ان لو لقيت االستوريدج فاضية اعملي اراي فاضية من التمب‪//‬‬
‫عرفته برا عشان يكون فاضي اول ما افتح االبلكيشن وبعد كدا ابدأ اخزن في ‪var temp; //‬‬
‫{ )‪if (localStorage.getItem("productList") == null‬‬
‫;][ = ‪temp‬‬
‫{ ‪} else‬‬
‫استخدمنا جيسون بارس عشان الداتا متخزنة فى االستوريدج كسترينج ف انا عايز ارجعها تانى من استرنج ل ‪//‬‬
‫اوبجكت عشان اقدر اشتغل عليها‬
‫))"‪temp = JSON.parse(localStorage.getItem("productList‬‬
‫;)(‪displayproduct‬‬
‫}‬

‫تشغيل زرار اضافة المنتج عن طريق عمل اوبجكت لتخزين مدخالت المنتج واضافتهم فى اراي ‪//‬‬
‫{ )(‪function addProduct‬‬
‫‪// 1- create object to recive data from inputs‬‬
‫{ = ‪var oneProduct‬‬
‫‪pName : inputName.value,‬‬
‫‪pPrice : inputPrice.value,‬‬
‫‪pcategory : inputCategory.value,‬‬
‫‪pdescription : inputDescription.value,‬‬
‫}‬
‫‪//2- push --> Array‬‬
‫‪temp.push(oneProduct); // to add data to array‬‬
‫‪console.log(oneProduct); // to test result‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
console.log(temp); // to test result
// 3- Set Items in Local Storage
// ‫استخدمت جيسون استرنج فاي عشان احول الداتا من اوبجكت ل استرينج الن الداتا عندي عبارة عن اوبجكت وهو‬
‫مبيقبلش غير استرنج‬
localStorage.setItem("productList", JSON.stringify(temp))
// 4- call Display
displayproduct(); // to call function display data
// 5- call Clear
clearInputs(); // to clear inputs
}
Search input in CRUD Application
‫ التاج بتاع السيرش وبعد كدا هنعمل فانكشن السيرش في الجافا سكريبت‬html ‫تكملة على الكود السابق هيتم اضافة فى ال‬
‫بالشكل دا كدا‬
<! -- In HTML - Search to product-->
<div class="d-flex justify-content-center mb-4">
<div>
<!-- ‫فاليو عشان زس بتشاور على الحاجة اللى هي فيها ف هيشاورلي على الفاليو اللى ف االنبوت دا‬.‫ قولتله زس‬--
>
<input onkeyup="searchByName(this.value)" class="form-control" type="text" name=""
id="" placeholder="Search Product Name">
</div>
</div>
// In JavaScript create function to Search data in table
function searchByName(userWord) {
var allRwoData = "";
for(var i = 0; i < temp.length; i++){
if(temp[i].pName.toLowerCase().includes(userWord.toLowerCase())){
allRwoData += `
<tr>
<td> ${temp[i].pName} </td>
<td> ${temp[i].pPrice} </td>
<td> ${temp[i].pcategory} </td>
<td> ${temp[i].pdescription} </td>
<td> ${temp[i].pName} </td>
<td> ${temp[i].pName} </td>
</tr>`
}
}
addProductRow.innerHTML = allRwoData;
}
Delete Button in CRUD Application
‫اول حاجة نفكر احنا عايزين نعمل اي احنا عايزين الزرار الموجود فى كل صف يشتغل معنى كدا ان الفانكشن بتاعت ال‬
‫ هناك في الزرار وهسأل نفسي سؤال ازاي امسك الصف دا اقدر امسك الصف عن‬call ‫ اللى هعملها هعملها‬delete
3 ‫ وبعد كدا هعمل الفانكشن وهي بتنفذ‬delete ‫ في الفانكشن بتاعت ال‬parameter ‫ بتاعه وهحطه ك‬index ‫طريق ال‬
‫مثال‬.storage ‫ بعد كدا تعمل حفظ في‬display ‫ بعد كدا تعمل‬product ‫خطوات اول خطوة تمسح ال‬
// In function display add button and add event on click to call delete function
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
function displayproduct() {
var allRwoData = "";
for (var i = 0; i < temp.length; i++) {
allRwoData += `
<tr>
<td> ${temp[i].pName} </td>
<td> ${temp[i].pPrice} </td>
<td> ${temp[i].pcategory} </td>
<td> ${temp[i].pdescription} </td>
<td> <button onclick="updateProduct(${i})" class="btn btn-
warning">update</button> </td>
<td>
<button onclick="deleteProduct(${i})" class="btn btn-danger">Delete</button>
</td>
</tr>`
}
addProductRow.innerHTML = allRwoData;
}

// Delete function to Delete data in table (delete product)


function deleteProduct(index){
temp.splice(index, 1);
displayproduct();
localStorage.setItem("productList", JSON.stringify(temp))
}
Update Button in CRUD Application
// In HTML ‫اول حاجة هضيف زرار لحفظ التغيرات وهخلي فى االول يكون مخفي ولما ادوس على زرار االبديت‬
‫يظهر ويخفي زرار االدد‬
<div class="col-12">
<button id="AddProductBTN" onclick="addProduct()" class="btn btn-info">Add
Product</button>
<button id="saveChangesBTN" style="display: none;" onclick="saveChanges()" class="btn
btn-success">Save Changes</button>
</div>
// In JAVASCRIPT ‫اول حاجة عملت متغير فوق خالص فى بداية الكود بعد ما بسلكت على كل انبوت عشان يشيل‬
‫االندكس جلوبال‬
var currentIndex;
//‫تاني حاجة هشغل زرار االبديت وهقوله يعمل اي بالظبط‬
// Update function to Update data in table (Update product)
function updateProduct(index){ // ‫الفانكشن دي بعملها كوول فى االيفنت اون كليك بتاع زرار االبديت اللى‬
‫بيظهر فى البرودكت‬
// console.log(temp[index]);
currentIndex = index // ‫عملته عشان يشيل االندكس جلوبال‬
// 1- Retrive All Data to inputs ‫نرجع الداتا في للمدخالت‬
inputName.value = temp[index].pName;
inputPrice.value = temp[index].pPrice;

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
inputCategory.value = temp[index].pcategory;
inputDescription.value = temp[index].pdescription;
// 2- Heddin : None Add Product Button
document.getElementById("AddProductBTN").style.display = "none";
// 3- Display : Block Update Product Button
document.getElementById("saveChangesBTN").style.display = "block";
}
//‫تالت حاجة هشغل زرار حفظ التغيرات وهقوله يعمل اي بالظبط‬
function saveChanges() {
// 1- Update in Array
temp[currentIndex].pName = inputName.value // currentIndex: ‫متغير جلوبال شايل االندكس بتاع‬
‫البرودكت‬
temp[currentIndex].pPrice = inputPrice.value
temp[currentIndex].pcategory = inputCategory.value
temp[currentIndex].pdescription = inputDescription.value
// 2- Display Data in Row
displayproduct();
// 3- call Clear inputs
clearInputs(); // to clear inputs
// 4- Update in Local Storage
localStorage.setItem("productList", JSON.stringify(temp))
// 5- Heddin: None Update Product Button
document.getElementById("saveChangesBTN").style.display = "none";
// 6- Display: Block Add Product Button
document.getElementById("AddProductBTN").style.display = "block";
}
‫ بتاعنا جرب تعمله مرة واتنين وتالته عشان يثبت معاك‬CRUD App ‫وبكدا احنا عملنا ال‬
Regex Regular Expressions (Regex) in JavaScript
‫ عبارة عن أداة بتساعدك تدور على نمط معين‬،‫ باختصار‬،‫" في الجافاسكريبت‬regular expression" ‫" أو‬regex" ‫الـ‬
،‫ يعني لو عندك نص وعايز تدور فيه على حاجة معينة زي إيميالت أو أرقام تليفون أو كلمات معينة‬.‫في النصوص‬
‫ تقدر تعتبرها زي الفلتر اللي بيجيبلك الحاجة اللي إنت عايزها من‬.‫ عشان تسهل عليك الشغالنة دي‬regex ‫بتستخدم الـ‬
.‫النص بشكل سريع ومباشر‬
‫ على الكلمة اللى اليوزر‬check ‫وهي عبارة عن رموز اقدر من خاللها احدد شكل الداتا اللى انا عايزها ووقتها انا بعمل‬
‫دخلها هل هي بتماتش الرموز وال ال‬
‫ اللى عملته فوق‬CRUD ‫ مثال بتاعت ال‬inputs ‫ على ال‬validation ‫ومن خاللها اقدر اعمل‬
‫ وفي ويب سايت ممكن نتست من خالله‬/d+/ ‫ سالش‬2 ‫ بتكون ما بين‬JS ‫طيب طريقة كتابتها فى ال‬
/https://regex101.com
ChatGPT ‫شرح من‬
:‫ عشان تقدر تتعامل معاها بسهولة‬regex ‫ هشرحلك الرموز األساسية اللي بتستخدمها في الـ‬،‫طيب‬

:**)‫` (النقطة‬.`** .1
.‫ بتمثل أي حرف واحد مهما كان‬-
."bat" ‫" أو‬cat" ‫" زي‬a" ‫ التاني فيهم‬،‫` هيدور على أي حاجة فيها حرفين‬/a./` :‫ مثال‬-

:**)‫الكاريهت‬
ِ ‫ **`^` (عالمة‬.2
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
‫‪ -‬بتمثل بداية السطر‪.‬‬
‫‪ -‬مثال‪ `/a^/` :‬هيدور على النصوص اللي بتبدأ بحرف "‪."a‬‬

‫‪( `$`** .3‬عالمة الدوالر)**‪:‬‬


‫‪ -‬بتمثل نهاية السطر‪.‬‬
‫‪ -‬مثال‪ `/$a/` :‬هيدور على النصوص اللي بتنتهي بحرف "‪."a‬‬

‫‪( `*`** .4‬النجمية)**‪:‬‬


‫‪ -‬بتمثل تكرار الحرف اللي قبلها صفر أو أكتر‪.‬‬
‫‪ -‬مثال‪ `/*a/` :‬هيدور على أي عدد من حرف "‪ "a‬بما فيهم إنه مش موجود خالص‪.‬‬

‫‪( `+`** .5‬عالمة الزائد)**‪:‬‬


‫‪ -‬بتمثل تكرار الحرف اللي قبلها مرة واحدة على األقل‪.‬‬
‫‪ -‬مثال‪ `/+a/` :‬هيدور على "‪ "a‬واحدة أو أكتر‪.‬‬

‫‪( `?`** .6‬عالمة االستفهام)**‪:‬‬


‫‪ -‬بتمثل تكرار الحرف اللي قبلها صفر أو مرة واحدة‪.‬‬
‫‪ -‬مثال‪ `/?a/` :‬هيدور على "‪ "a‬مرة أو مش موجودة‪.‬‬

‫‪( `}n,m{`** .7‬األقواس المعقوفة)**‪:‬‬


‫‪ -‬بتمثل تكرار الحرف اللي قبلها عدد مرات محدد‪.‬‬
‫‪ -‬مثال‪ `/}2,3{a/` :‬هيدور على "‪ "a‬متكررة مرتين أو تالت مرات‪.‬‬

‫‪( `][`** .8‬األقواس المربعة)**‪:‬‬


‫‪ -‬بتمثل مجموعة من الحروف أو األرقام اللي بتدور عليها‪.‬‬
‫‪ -‬مثال‪ `/]abc[/` :‬هيدور على "‪ "a‬أو "‪ "b‬أو "‪."c‬‬

‫الكاريهت جوة األقواس المربعة)**‪:‬‬


‫ِ‬ ‫‪( `]^[`** .9‬عالمة‬
‫‪ -‬بتمثل نفي المجموعة‪.‬‬
‫‪ -‬مثال‪ `/]abc^[/` :‬هيدور على أي حرف ما عدا "‪ "a‬و"‪ "b‬و"‪."c‬‬

‫‪( `|`** .10‬الخط الرأسي)**‪:‬‬


‫‪ -‬بتمثل "أو"‪.‬‬
‫‪ -‬مثال‪ `/a|b/` :‬هيدور على "‪ "a‬أو "‪."b‬‬

‫‪( `)(`** .11‬األقواس العادية)**‪:‬‬


‫‪ -‬بتمثل مجموعة أو جزء من النمط اللي هتشتغل عليه‪.‬‬
‫‪ -‬مثال‪ `/)abc(/` :‬هيدور على "‪ "abc‬ككل‪.‬‬

‫‪( `d\`** .12‬الدال المشطوبة)**‪:‬‬


‫‪ -‬بتمثل أي رقم من ‪ 0‬لـ ‪.9‬‬
‫‪ -‬مثال‪ `/d\/` :‬هيدور على أي رقم‪.‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫‪( `w\`** .13‬الدبليو المشطوبة)**‪:‬‬
‫‪ -‬بتمثل أي حرف أو رقم أو ‪.underscore‬‬
‫‪ -‬مثال‪ `/w\/` :‬هيدور على أي حرف أو رقم أو ‪.underscore‬‬

‫‪( `s\`** .14‬السين المشطوبة)**‪:‬‬


‫‪ -‬بتمثل أي مسافة بيضاء (زي المسافة‪ ،‬التاب‪ ،‬والسطر الجديد)‪.‬‬
‫‪ -‬مثال‪ `/s\/` :‬هيدور على أي مسافة بيضاء‪.‬‬

‫دي الرموز األساسية اللي هتحتاجها عشان تكتب وتفهم الـ ‪ regex‬في الجافاسكريبت‪ .‬وتعال نجرب‬
‫بنكتب الرجولر اكسبريشن بتاعى ما بين ‪ 2‬سالش‪var regex = /^(002)?(01)[0-25][0-9]{8}$/ //‬‬
‫دا فاريبول شايل الداتا اللى هتشك عليها ‪var userPhone = "011550235286"; //‬‬
‫تيست هي بالت ان فانكشن خاصة بالرجولر اكسبريشن ‪if(regex.test(userPhone)){ //‬‬
‫;)"‪console.log("Match‬‬
‫};)"‪}else{console.log("Not Match‬‬
‫طيب تعال نطبق على ال ‪ CRUD‬بتاعى على فيلد ال ‪ product Name‬عايز اقوله انه الزم يبدأ بحرف كابتل وميزدش‬
‫عن ‪ 10‬حروف وميقلش عن ‪ 3‬ف اول حاجة بعمل االكسبريشن بتاعى فوق وبعد كدا جوا فانكشن االدد برودكت بحط ‪if‬‬
‫‪ condition‬ولو ترو هينفذ كل حاجة جوا الفانكشن لو فولس يطلع رسالة‬
‫;‪var currentIndex‬‬
‫هنا االكسبريشن بتاعى‪var regex = /^[A-Z][a-z0-9A-Z]{3,10}$/ //‬‬
‫;‪var temp‬‬
‫} ][ = ‪if (localStorage.getItem("productList") == null) { temp‬‬
‫{‪else‬‬
‫))"‪temp = JSON.parse(localStorage.getItem("productList‬‬
‫;)(‪displayproduct‬‬
‫}‬
‫{ )(‪function addProduct‬‬
‫هنا الكونديشن بتاعى وبداخله كل حاجة الفانكشن بتعملها ‪if(regex.test(inputName.value)){ //‬‬
‫{ = ‪var oneProduct‬‬
‫‪pName : inputName.value,‬‬
‫‪pPrice : inputPrice.value,‬‬
‫‪pCategory : inputCategory.value,‬‬
‫‪pDescription : inputDescription.value‬‬
‫}‬
‫)‪temp.push(oneProduct‬‬
‫;)‪console.log(temp‬‬
‫;)(‪displayproduct‬‬
‫;)(‪clearInput‬‬
‫))‪localStorage.setItem("productList", JSON.stringify(temp‬‬
‫هنا الرسالة اللى هتطلع فى حالة عدم تحقيق الشرط‪} else{ alert("Please inter valid Name") } //‬‬
‫}‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫}‪DOM in JavaScript (Document object model‬‬
‫تعال نترجمها بالعربي شكل االوبجكت فى الجافا سكريبت الدوكيومنت هو االتش تي ام ال‬
‫هو ان الجافا سكريبت بتقدر تتعمل مع ال ‪ HTML Code‬علي شكل ‪ Object‬ومثال على دا‬
‫;‪document.getElementById("demo").innerHTML‬‬
‫وتعريف اخر لل ‪DOM‬‬
‫الـ )‪ DOM (Document Object Model‬في الجافاسكريبت هو الطريقة اللي بيستخدمها المتصفح علشان يفهم ويبني‬
‫الصفحة اللي بتظهر لك‪ .‬يعني لما بتفتح أي صفحة ويب‪ ،‬المتصفح بيحول الـ ‪ HTML‬اللي مكتوب فيها لشكل شجرة‬
‫(‪ )Tree‬فيها كل العناصر زي الـ ‪ divs‬والـ ‪ spans‬وكل الحاجات اللي في الصفحة‪ .‬الطريقة دي بتخليك تقدر توصل ألي‬
‫عنصر في الصفحة وتعدل فيه بسهوله باستخدام الجافاسكريبت‪ .‬فمثالً‪ ،‬لو عايز تغير نص جوه زرار‪ ،‬هتستخدم الـ ‪DOM‬‬
‫علشان توصل للزرار وتعدل النص بتاعه‪.‬‬
‫في اي تاسك الزم احدد ‪ 3‬حاجات والزم الزم بالترتيب‪:‬‬
‫‪1- Element‬‬ ‫‪2- Event‬‬ ‫‪3- Action‬‬
‫‪ :Element -1‬ازاي امسك التاج او ايه االليمنت اللى هشتغل عليه‬
‫‪ :Event -2‬ايه االيفينت اللى انا عايز اعمله‬
‫‪ :Action -3‬ايه االكشن اللى عايز تعمله‬
‫‪ Element -1‬اول حاجة تعال نشرح اي الطرق اللى اقدر امسك بيها ال ‪ Element‬بتاعى وعندي ‪ 6‬طرق وهما‬
‫‪// in HTML‬‬
‫>‪<h1 id="demo">1. Lorem ipsum dolor sit amet.</h1‬‬
‫>‪<h1>Lorem ipsum dolor sit amet.</h1‬‬
‫>‪<h1 class="test">Lorem ipsum dolor sit amet.</h1‬‬
‫>‪<h1 class="test">Lorem ipsum dolor sit amet.</h1‬‬
‫>"‪<div class="perant‬‬
‫>‪<h1>Lorem ipsum dolor sit amet.</h1‬‬
‫>‪<h1>Lorem ipsum dolor sit amet.</h1‬‬
‫>‪<h1>Lorem ipsum dolor sit amet.</h1‬‬
‫>‪</div‬‬
‫>‪<h1 id="demo">2. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus</h1‬‬
‫>"‪<input type="checkbox" name="gender‬‬
‫>"‪<input type="checkbox" name="gender‬‬
‫‪IN JAVASCRIPT‬‬
‫بتديله اسم ال اي دي مثال تاج اتش ‪ 1‬وال اي دي ‪1. document.getElementById("demo").innerHTML; //‬‬
‫بتاعه اسمه ديمو‬
‫هيسليكت على اول تاج اللى االي دي بتاعه اسمه ديمو‪//‬‬
‫‪// result 1. Lorem ipsum dolor sit amet.‬‬
‫بتديله اسم الكالس بتاع التاج مثال تاج اتش‪ 1‬والكالس ‪2. document.getElementsByClassName("test"); //‬‬
‫بتاعه اسمه تيست‬
‫‪ HTML Collection‬ودا بيرجعلي ‪//‬‬
‫النى قولتله جت االيمنتس (ركز مع حرف ال اس) معنى كدا انه ممكن يرجعلي اكثر من عنصر في ليست ‪//‬‬
‫وهنا الليست دي تشبه االراي ولكن مقدرش انفذ عليها االراي ميزودس ‪//‬‬
‫هيسليكت علي كل التاجات اللى الكالس نيم بتاعها اسمه تيست‬
‫بتديله التاج اللى عايز تمسكه ودي برضو بترجعلي اتش ‪3. document.getElementsByTagName("h1"); //‬‬
‫كوليكشن‬
‫هيسليكت على كل التاجات اللى هى اتش ‪// 1‬‬
‫بتديله النيم بتاع االنبوت مثال واحنا عارفين ان النيم بيكون ‪4. document.getElementsByName("gender"); //‬‬
‫يونيك ولكن ممكن استخدمه مع االتشك بوكس مثال‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫وهي تشبه االراي برضو ‪ NodeList‬ودي بترجعلي ‪//‬‬
‫هيسليكت على كل تاجات االنبوت اللى انيم بتاعها جندر‪//‬‬
‫بتديله السليكتور بتاعك اكنك بالظبط بتكتب سي اس اس ودي ‪5. document.querySelector(".perant h1");//‬‬
‫بتمسك عنصر واحد فقط‬
‫هيسليكت على اتش‪ 1‬واحدة فقط ‪//‬‬
‫ودي بتديله السليكتور بتاعك اكنك بالظبط بتكتب سي اس اس ‪6. document.querySelectorAll(".perant h1"); //‬‬
‫ودي بتمسك اكثر من عنصر‬
‫هيسليكت على كل االتش ‪ 1‬اللى داخل الديف بتاع البيرنت‪//‬‬

‫ملحوظة الحاجات اللى هي بتكون موجودة مرة واحدة فى ال ‪ HTML‬زي ال ‪ body, head,html‬ومش بتتكر ممكن‬
‫انادي عليها كدا ‪document.body‬‬
‫‪ Events -2‬تاني حاجة تعال نتكلم ازاي نتعامل مع االيفنت واي انواع ال ‪ Events‬اللى عندي‬
‫‪ .1‬ازاى اتعامل مع ال ‪:Event‬‬
‫اول ما اتعلمنا اتعلمنا ازاي نعمل ايفينت عن طريق ال ‪ onclick‬اللى بنضفها فى التاج فى ال ‪ HTML‬ولكن دا‬
‫مش افضل حاجة الن لو انا عندي كذا تاج وعايزهم يعملو نفس االيفينت ف انا كدا هكرر ال ‪ Onclick‬في كل ال‬
‫‪ tags‬دي ودا سبب وفي سبب تاني وهو اني بكتب ‪ JS‬في ‪ HTML‬ودا مش افضل حاجة وبالتالى هروح امسك‬
‫التاج او ال ‪ Tags‬واعمل عليها االيفينت عن طريق ‪addEventListener Function‬‬
‫ودي فانكشن بتحط ودنها على التاج او ال ‪ Tags‬وبتاخد مني ‪ 2‬براميتر وهما ‪Call Back .2 Event type .1‬‬
‫‪ Function‬يال بينا نطبق‬
‫;)"‪var myH1 = document.getElementById("demo‬‬
‫)};)"‪myH1.addEventListener("click", function(){ alert("welcome‬‬
‫وال اد ايفينت ليسنار يتتم على عنصر واحد فقط ولو انا عايز اطبقها ع اكثر من عنصر هحتاج استخدم فور عشان الف ‪//‬‬
‫على كل عنصر وانفذ عليه مثال‬
‫;)"‪var myH1 = document.querySelectorAll("h1‬‬
‫{)‪for(var i=0; i < myH1.length; i++‬‬
‫)};)"‪myH1[i].addEventListener("click" , function(){ alert("welcome‬‬
‫وبالتالى كدا االيفينت هيشتغل على اي اتش وان موجود فى الكود بتاعى ‪} //‬‬
‫طيب انا ليه بحط الفانكشن بدون اسم او بعمل ‪ call‬لفانكشن معينة في البراميتر التاني بتاع ال‬
‫‪ addEventListener‬لكذا سبب وهما ان الفانكشن دي بتكون مخصصة وهتتطبق مع االيفنت فقط ومينفعش‬
‫احط ‪ call function‬الن الفانكشن بتفاير لوحدها لما حاجة معينة بتحصل قبليها ف انا بقوله لما تعمل كلك فاير‬
‫الفانكشن والن البراميتر محتاج مني ‪ call back function‬وهو عبارة عن جسم الفانكشن البادي بتاع الفانكشن‬
‫ولو انا قررت وعايز اعمل الفانكشن منفصلة واانادي عليها فى البراميتر هضيف اسم الفانكشن فقط بدون () ودا‬
‫بسبب االسباب اللى قولناها‬
‫;)"‪var myH1 = document.getElementById("demo‬‬
‫)‪myH1.addEventListener("click", hamada‬‬
‫};)"‪function hamada(){ alert("welcome‬‬
‫‪ .2‬ماهي انواع ال ‪ Events‬اللى عندنا‬
‫في الجافا سكريبت‪ ،‬الـــ "‪ "Events‬أو األحداث هي الحاجات اللي بتحصل في الصفحة زي ما المستخدم‬
‫يتفاعل معاها‪ .‬يعني مثالً لما تضغط على زرار‪ ،‬أو تكتب حاجة في‪ ، input‬أو حتى لما الصفحة تخلص تحميل‪.‬‬
‫كل ده بيتسمى ‪ "Event".‬فيه أنواع كتير من األحداث‪ ،‬وده شرح لبعضها‪:‬‬
‫‪1. Mouse Events:‬‬
‫‪.‬بيحصل لما تضغط على عنصر معين بالماوس ‪o click:‬‬
‫‪.‬بيحصل لما تضغط مرتين بسرعة على عنصر ‪o dblclick:‬‬
‫بيحصل لما الماوس يعدي فوق عنصر معين وبيتنفذ على العنصر وعلى اي حاجة داخل ‪o mouseover:‬‬
‫‪.‬العنصر‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫‪o‬‬‫‪.‬بيحصل لما الماوس يخرج من فوق عنصر معين ‪mouseout:‬‬
‫‪.‬بيحصل لما تضغط على زر الماوس وانت لسه ضاغط عليه ‪o mousedown:‬‬
‫‪.‬بيحصل لما تسيب زر الماوس بعد ما كنت ضاغط عليه ‪o mouseup:‬‬
‫‪2. Keyboard Events:‬‬
‫بيحصل لما تضغط على زرار في الكيبورد وانت لسه ضاغط عليه وشغالة مع اي زرار ‪o keydown:‬‬
‫‪.‬فى الكيبورد مثل زرار التاب‬
‫‪ .‬بيحصل لما تسيب زرار الكيبورد بعد ما كنت ضاغط عليه ‪o keyup:‬‬
‫بيحصل لما تضغط على زرار في الكيبورد ويتسجل الحرف اللي كتبته وشغالة مع حروف ‪o keypress:‬‬
‫‪.‬الكيبورد واالرقام‬
‫‪3. Form Events:‬‬
‫‪.‬بيحصل لما تبعت الفورم ‪o submit:‬‬
‫‪ select.‬أو ‪ input‬بيحصل لما تغير قيمة في ‪o change:‬‬
‫‪.‬ياخد الفوكس ‪ textarea‬أو ‪ input‬بيحصل لما ‪o focus:‬‬
‫‪.‬يفقد الفوكس ‪ textarea‬أو ‪ input‬بيحصل لما ‪o blur:‬‬
‫‪4. Window Events:‬‬
‫‪.‬بيحصل لما الصفحة تخلص تحميل بالكامل ‪o load:‬‬
‫‪.‬بيحصل لما تغير حجم النافذة بتاعة المتصفح ‪o resize:‬‬
‫‪.‬بيحصل لما تعمل سكرول في الصفحة ‪o scroll:‬‬
‫‪.‬بيحصل لما الصفحة تقفل أو تنتقل لصفحة تانية ‪o unload:‬‬
‫‪5. Touch Events:‬‬
‫‪.‬بيحصل لما تلمس الشاشة ‪o touchstart:‬‬
‫‪.‬بيحصل لما تحرك صباعك على الشاشة ‪o touchmove:‬‬
‫‪.‬بيحصل لما ترفع صباعك عن الشاشة ‪o touchend:‬‬
‫‪.‬كل األحداث دي بتساعدك تتفاعل مع المستخدمين وتخلي الويب سايت بتاعك أكتر ديناميكية وتفاعل‬
‫مثال ‪:‬‬
‫‪//in HTML‬‬
‫>""=‪<img src="images/mango.jpg" alt="" srcset‬‬
‫‪// In CSS‬‬
‫{‪img‬‬
‫;‪width: 50px‬‬
‫;‪position: absolute‬‬
‫;‪top: 0px‬‬
‫;‪left: 0px‬‬
‫}‬
‫‪// In Javascript‬‬
‫{ )‪document.body.addEventListener("mousemove", function (e‬‬
‫;"‪document.querySelector("img").style.left = e.clientX + "px‬‬
‫;"‪document.querySelector("img").style.top = e.clientY + "px‬‬
‫)}‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫‪BOM - Browser Object Model‬‬
‫هو ببساطة الحاجات اللي بتتعامل مع المتصفح نفسه مش الصفحة اللي انت بتشوفها بس‪ .‬يعني إيه؟ يعني هو مجموعة من‬
‫الكائنات (‪ )objects‬اللي بتديك سيطرة على الحاجات اللي ليها عالقة بالمتصفح‪ ،‬زي الـ ‪ ،window‬الـ ‪ ،location‬والـ‬
‫‪ ،history‬وغيرهم‪.‬‬
‫خلينا نقول إنك فاتح متصفح‪ ،‬والصفحة شغالة عليه‪ .‬الـ ‪ BOM‬بقى هو اللي يخليك تتحكم في الحاجات دي‪:‬‬
‫‪window:‬ده الكائن اللي بيمثل نافذة المتصفح كلها‪ ،‬اللي هي األب الكبير في ‪ BOM‬يعني أي حاجة عاوز تعملها على‬
‫المتصفح بتبدأ من هنا‪.‬‬
‫>‪<button class="btn btn-danger mt-5" onclick="test()">close this page</button‬‬
‫{)(‪function test‬‬
‫بقوله لما ادوس على الزرار نفذ الفانكشن دي اللى هي هتقفلي الصفحة اللى انا فاتحها ‪window.close(); //‬‬
‫}‬
‫‪// another example‬‬
‫{)(‪function test‬‬
‫;)"‪window.open("https://jquery.com/"); // or window.open("https://jquery.com/" , "_self‬‬
‫}‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫‪document:‬ده بيمثّل الصفحة اللي انت فاتحها جوا المتصفح‪.‬‬
‫والدوكومينت اتعاملنا معاها كتير قبل كدا ‪document.querySelector("#div"); //‬‬
‫‪location:‬ده المسؤول عن الـ ‪ URL‬اللي انت فاتحه‪ .‬ممكن من خالله تغيّر العنوان اللي في الشريط فوق أو تفتح صفحة‬
‫جديدة‪.‬‬
‫{)(‪function test‬‬
‫;)"‪window.location.href("https://jquery.com/"); // or ("home.html‬‬
‫}‬
‫‪history:‬ده بقى اللي بيتحكم في الـ ‪ back‬والـ‪ ، forward‬يعني تقدر ترجع لورا أو تتقدم ألدام زي لما بتدوس على سهم‬
‫الوراء أو األمام في المتصفح‪.‬‬
‫{)(‪function test‬‬
‫;)(‪window.history.forward‬‬
‫‪} // another Example‬‬
‫{)(‪function test‬‬
‫;)(‪window.history.back‬‬
‫‪} // another Example‬‬
‫{)(‪function test‬‬
‫‪window.history.go(0); // 0 or 1/more or -1/more‬‬
‫اكنك بتعمل ريفريش ‪// 0‬‬
‫لو قولت ‪ 2‬يعنى هيطلع ل قدام مرتين اكنك دوست ع السهم مرتين )‪// 1 or more (2 or 3 or 4‬‬
‫لو قولت ‪ -2‬يعنى هيرجع ل وراء مرتين اكنك دوست ع السهم مرتين )‪// -1 or more (-2 or -3 or -4‬‬
‫}‬
‫‪navigator:‬ده الكائن اللي بيقولك معلومات عن المتصفح اللي المستخدم شغال عليه‪ ،‬زي نوع المتصفح‪ ،‬إصدار‬
‫المتصفح‪ ،‬وهكذا‪.‬‬
‫‪screen:‬ده بيديلك معلومات عن الشاشة اللي المتصفح شغال عليها‪ ،‬زي مقاس الشاشة أو دقتها‪.‬‬
‫فببساطة‪ ،‬الـ ‪ BOM‬بيساعدك تتعامل مع المتصفح ككل مش مجرد الصفحة اللي بتظهر جواه‪ ،‬وده بيديك مرونة إنك‬
‫تتحكم في حاجات كتير في تجربة المستخدم‪.‬‬

‫‪Math‬‬
‫بتوفر مجموعة من الفانكشنز اللي بتساعدك تعمل حسابات رياضية بسهولة‪ .‬هنا شوية ‪ ،Math‬مكتبة الـ ‪ JavaScript‬في‬
‫‪:‬من أشهر الفانكشنز اللي بتستخدمها كتير‬

‫‪1. Math.round():‬‬
‫‪ .‬دي بتعمل تقريب للرقم ألقرب عدد صحيح‪ .‬يعني لو الرقم ‪ ،4.7‬هيرجع ‪ ،5‬ولو ‪ 4.2‬هيرجع ‪o 4‬‬
‫هيرجع ‪Math.round(4.7); // 5‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫‪2. Math.ceil():‬‬
‫‪.‬دي بتعمل تقريب للرقم لفوق ألقرب عدد صحيح‪ .‬يعني حتى لو الرقم ‪ ،4.1‬هيرجع ‪o 5‬‬
‫هيرجع ‪Math.ceil(4.1); // 5‬‬

‫‪3. Math.floor():‬‬
‫‪o‬‬ ‫‪ ،.‬دي بتعمل تقريب للرقم لتحت ألقرب عدد صحيح‪ .‬يعني لو الرقم ‪ ،4.9‬هيرجع ‪ceil()4‬عكس‬
‫هيرجع ‪Math.floor(4.9); // 4‬‬

‫‪4. Math.max():‬‬
‫‪.‬دي بتاخد مجموعة من األرقام وترجع أكبر رقم فيهم ‪o‬‬
‫هيرجع ‪Math.max(10, 20, 30); // 30‬‬

‫‪5. Math.min():‬‬
‫‪o‬‬ ‫‪ ،.‬بس دي بترجع أقل رقم فيهم)(‪max‬زي‬
‫هيرجع ‪Math.min(10, 20, 30); // 10‬‬

‫‪6. Math.random():‬‬
‫‪.‬دي بتجيبلك رقم عشوايي بين ‪ 0‬و ‪ .1‬ممكن تستخدمها لو عاوز تعمل حاجة عشواية زي توليد رقم سري ‪o‬‬
‫ممكن يرجع حاجة زي ‪Math.random(); // 0.456789‬‬

‫‪7. Math.sqrt():‬‬
‫‪.‬دي بتجيب الجذر التربيعي للرقم‪ .‬يعني لو دخلت ‪ ،16‬هترجع ‪o 4‬‬
‫هيرجع ‪Math.sqrt(16); // 4‬‬

‫‪8. Math.pow():‬‬
‫‪o‬‬ ‫‪pow.‬دي بتستخدم لرفع الرقم لقوة معينة‪ .‬يعني لو عاوز ترفع ‪ 2‬للقوة ‪ ،3‬هتستخدم‬
‫هيرجع ‪Math.pow(2, 3); // 8‬‬

‫‪9. Math.abs():‬‬
‫‪.‬دي بتجيب القيمة المطلقة للرقم‪ ،‬يعني بتشيل السالب لو الرقم سالب ‪o‬‬
‫هيرجع ‪Math.abs(-5); // 5‬‬

‫‪10.Math.PI:‬‬
‫دي مش فانكشن بس قيمة ثابتة في مكتبة ‪ ،Math‬وبتكون قيمة ‪(π‬باي) اللي هي ‪ ،...3.14159‬ودي‬ ‫‪o‬‬
‫مفيدة لو بتشتغل بحاجة ليها عالقة بالدوائر‪.‬‬

‫دول بعض من الفانكشنز اللي هتستخدمهم كتير في البرمجة لما تكون شغال على حسابات رياضية‪ .‬مثال‬
‫;]"‪var frinds = ["ahmed", "ali", "hager", "bassant‬‬
‫) ‪var randomFrinds = Math.ceil( Math.random() * 4‬‬
‫;)‪console.log( frinds[randomFrinds], ">> index number = " + randomFrinds‬‬

‫‪Model EX‬‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
CSS ‫ و‬HTML ‫هتحتاج تعمل االستايل اللى ف الصورة دا االول فى ال‬
// =================== Model EX =============================
var allItems = document.querySelectorAll(".itemImage"); // NodeList
allItems = Array.from(allItems) // convert NodeList to Array to you can use indexOf func
var currentIndex = 0;
var parentLayer = document.querySelector(".parentLayer");
var closeLayer = document.getElementById("close");
var childBox = document.getElementById("innerBox");
var next = document.getElementById("next");
var prev = document.getElementById("prev");

// ==== display Layer =====


for(var i = 0; i < allItems.length; i++){
allItems[i].addEventListener("click", displayParentLayer)
}
function displayParentLayer(e){ // add prameter e to get child info Show the image you
clicked on
// 1. to Show the image you clicked on
var imgSrc = e.target.src // to get source image
// 2. change background child box
childBox.style.backgroundImage = `url(${imgSrc})` // to Show the image you clicked on
// 3. show parent Layer
parentLayer.classList.replace("d-none", "d-flex");
// 4. get image index to use it with next btn and previous btn
currentIndex = allItems.indexOf(e.target);
console.log(currentIndex);
}

// ==== Hide Layer =====


closeLayer.addEventListener("click" , hideParentLayer )
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
function hideParentLayer(){
parentLayer.classList.replace("d-flex", "d-none");
}

// ==== Next BTN =====


next.addEventListener("click" , NextChild )
function NextChild(){
currentIndex++;
// 0 ‫عملته عشان كل ما بدوس على النكست بيزود وهيفضل يزود لماالنهاية فقولتله لو وصلت لنهاية الليست خلي ب‬
if (currentIndex > allItems.length -1) {
currentIndex = 0;
}
var NextImageSource = allItems[currentIndex].src // to get source the next image
childBox.style.backgroundImage = `url(${NextImageSource})` // to change background
image
}

// ==== prev BTN =====


prev.addEventListener("click" , NextChild )
function NextChild(){
currentIndex--;
// 0 ‫عملته عشان كل ما بدوس على النكست بيزود وهيفضل يزود لماالنهاية فقولتله لو وصلت لنهاية الليست خلي ب‬
if (currentIndex < 0) {
currentIndex = allItems.length -1;
}
var prevImageSource = allItems[currentIndex].src // to get source the prev image
childBox.style.backgroundImage = `url(${prevImageSource})` // to change background
image
}

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
‫)‪ API Intro (Application Programming Interface‬مهم جدا جدا جدا جدا جدا جدا جدا جدا‬
‫مهمة جدا واساسية فى البرمجة عموما وهي حلقة الوصل ما بين الفرونت والباك اند وهنتعلم ازاي نتعامل مع الباك اند‪.‬‬
‫ف بجد يعنى هو ‪ %60‬من قوتك في الجافا سكريبت‪ .‬فهو طريقة التواصيل‬ ‫وحاجة قوية جدا لو فهمتوها تبقو عمد‬
‫بين برنامج لبرنامج اقدر استخدم في داتا‪.‬‬

‫ف الـ ‪ API‬تقدر تتعمل مع ال ‪ Web, Android, IOS, Desktop‬وهنا تكمن اهمية ال ‪ API‬الن كل حاجة من دول‬
‫ليها نوع معين من الداتا بيز بيتعامل معاها ف لو انا عندي ابلكيشن من كل االنواع دي ل امازون مثال ف انا مش هروح‬
‫اعمل ‪ 4‬داتا بيز فالصح انى اعمل ‪ API‬واكلم بيها االنواع دي‪ .‬والشخص المسئول عن عمل ال ‪ API‬هو ال‬
‫‪ Backend‬فهو بيعمل الداتا بيز وبيحولها ل ‪ JSON Data‬فهي اي بالتفورم في الدنيا بيعرف يتعامل معاه وعشان‬
‫ااكسس ال ‪ JSON Data‬دي فالراجل بتاع الباك اند بيخرجلي لينك ‪ URL‬بيحتوي على الداتا وانا كفرونت اند ببدأ‬
‫اتعامل معاه‪ .‬شرح علمي من ‪ChatGPT‬‬

‫الـ )‪ API (Application Programming Interface‬في البرمجة هو زي كبري أو وصلة بتربط بين برنامجين‬
‫أو أكتر عشان يتبادلوا بيانات أو خدمات مع بعض‪ .‬بمعنى تاني‪ ،‬الـ ‪ API‬هو مجموعة من األوامر والقواعد اللي بتحدد‬
‫إزاي برنامج معين يتفاعل مع برنامج تاني أو خدمة معينة‪.‬‬

‫لما بتيجي تشتغل بالـ ‪ JavaScript‬وتستخدم‪ ، API‬بتقدر تبعت طلب )‪ (Request‬لمصدر خارجي زي سيرفر‬
‫)‪(Server‬أو خدمة أونالين‪ ،‬وتستقبل الرد )‪ (Response‬اللي ممكن يكون بيانات في صورة‪ ، JSON‬أو‪ ، XML‬أو‬
‫حتى نص عادي‪ .‬وبعدين تقدر تستخدم البيانات دي في تطبيقك زي ما تحب‪.‬‬

‫فاكر لما بتفتح موبايلك وبتالقي التطبيق بتاع الطقس بيجيب لك درجات الحرارة من اإلنترنت؟ ده بيكون عن طريق‬
‫استخدام ‪ API‬عشان يجيب البيانات دي من سيرفر خارجي‪ .‬وبرضو لما بتشوف خريطة في تطبيق معين‪ ،‬غالبًا بيكون‬
‫شغال بالـ ‪ API‬بتاع‪Google Maps.‬‬

‫في الـ‪ ، JavaScript‬التعامل مع الـ ‪ APIs‬بيتم باستخدام حاجات زي )(‪ fetch‬أو‪ ، axios‬واللي بيس ههل عليك عملية‬
‫إرسال واستقبال البيانات من وإلى الـ‪API.‬‬

‫ببساطة‪ ،‬الـ ‪ API‬بيس ههل علينا كتير في إننا نوصل لمصادر خارجية ونتفاعل معاها في تطبيقاتنا‪ ،‬وده اللي بيخلي‬
‫التطبيقات بتاعتنا أكتر قوة ومرونة‪.‬‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫‪ AJAX‬تعالى نعرف ازاي اقدر اسافر اجيب داتا وارجع من ال ‪ URL‬بتاع ال ‪API‬‬
‫الجافا سكريبت بتساعدنا عن طريق ‪ object‬حلو جدا اسمه ‪ XMLHttpRequest‬فهو بيساعدني اني بديله ‪URL‬‬
‫يجبلي منه داتا ويرجع فهو يحتوي على كل ال ‪ methods‬وال ‪ property‬اللى بتساعدني في القصة بتاعت ال ‪API‬‬
‫دي‪.‬‬
‫ف عشان اسافر اجيب الداتا دا بيتم عن طريق ‪ 4‬خطوات مهمين جدا وثابتين مبيتغيروش وهما‪:‬‬
‫‪ .1‬بأخد نسخة من ال ‪ object‬اللى اسمه ‪.XMLHttpRequest‬‬
‫‪ .2‬بعمل كوبري او بفتح كونيكشن بيني وبين الباك اند‪.‬‬
‫)‬ ‫‪ .3‬بعمل ‪ Send‬بقوله روح هات الداتا‪( .‬سيري يا نورماندي‬
‫‪ .4‬بعمل ‪ response‬يعني بستلم الداتا بتاعتى‪.‬‬
‫تعال بقا نفهم ونشرح الخطوات دي بالتفصيل‪.‬‬
‫‪ .1‬بأخد نسخة من ال ‪ object‬اللى اسمه ‪.XMLHttpRequest‬‬
‫ودي بتتم عن طريق اني بعمل متغير يشيل النسخة دي عشان اقدر استخدم ال ‪ methods‬و ال ‪property‬‬
‫الموجودة في ال ‪ object‬دا‪.‬‬
‫;)(‪var myHttp = new XMLHttpRequest‬‬
‫‪ .2‬بعمل كوبري او بفتح كونيكشن بيني وبين الباك اند‪.‬‬
‫ودي بتتم عن طريق فانكشن اسمها )(‪ open‬وحاليا بتأخد مني ‪ parameter 2‬وهما ‪Connection .1‬‬
‫‪ methods‬وهي طريقة التعامل مع ال ‪ URL‬وحاليا هستخدمه واجيب الداتا فهقوله ”‪ .2 . “GET‬ال ‪URL‬‬
‫بتاعي‪.‬‬
‫;)"‪myHttp.open("GET","https://jsonplaceholder.typicode.com/posts‬‬
‫)‬ ‫‪ .3‬بعمل ‪ Send‬بقوله روح هات الداتا‪( .‬سيري يا نورماندي‬
‫ودي بتتم عن طريق فانكشن اسمها ‪Send‬‬
‫;)(‪myHttp.send‬‬
‫‪ .4‬بعمل ‪ response‬يعني بستلم الداتا بتاعتى‪.‬‬
‫فالمرحلة دي الزم نعرف ان حالة الطلب بتاعي بيمر ب ‪ 5‬مراحل وهما‬
‫معناه ان مفيش اي اتصال خالص ‪1. myHttp.readyState = 0 // connection is not Established‬‬
‫معناه ان حصل اتصال خالص ‪2. myHttp.readyState = 1 // connection is Established‬‬
‫معناه ان الطلب بتاعى اتقبل ‪3. myHttp.readyState = 2 // Request is Received‬‬
‫معناه ان الداتا بتتجهز ‪4. myHttp.readyState = 3 // Request is processing‬‬
‫معناه ان الداتا جهزت ‪5. myHttp.readyState = 4 // Request is Ready‬‬
‫ف وفقا للمراحل السابقة الداتا مش هتكون جاهزة غير في المرحلة االخيرة اللى هي = ‪ 4‬فالمطلوب مني‬
‫اني الزم اتشك على حالة الطالب واقوله لو بتساوي ‪ 4‬هاتلى الداتا بس زي ما احنا عارفين ان الجافا‬
‫اسكريبت الكود بيشتغل فيها اول ما بفتح الويب بتاعى فبالتالى الحالة بتاعتى هتبقا بـ ‪ 0‬فبالتالى مش هالقي‬
‫الداتا ظهرت ف انا محتاج استخدم ايفينت اسمه ‪ readyStatechange‬وهتشك بداخله لو الداتا بتساوي‬
‫‪ 4‬شغل االيفنت دا وبكدا الداتا هتكون جاهزة لالستخدام‪.‬‬
‫{)(‪myHttp.addEventListener("readystatechange", function‬‬
‫{)‪if(myHttp.readyState == 4‬‬
‫;)‪console.log(myHttp.response‬‬
‫}‬
‫)}‬
‫طيب امتا الطلب بتاعى يكون ب ‪ 0‬او ‪ 1‬او ‪ 2‬او ‪ 3‬او ‪ ,, 4‬بيكون ب ‪ 0‬اول ما بأخد نسخة من االوبجكت وبيكون ب ‪1‬‬
‫اول ما بعمل اوبن وسيند وبيكون ب ‪ 2‬او ‪ 3‬او ‪ 4‬لما بعمل االيفنت بتاعى ويتشك علي حالة الطلب‪ .‬تعال نجرب ونشوف‬
‫;)(‪var myHttp = new XMLHttpRequest‬‬
‫‪console.log(myHttp.readyState); // 0‬‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫;)"‪myHttp.open("GET","https://jsonplaceholder.typicode.com/posts‬‬
‫‪console.log(myHttp.readyState); // 1‬‬
‫;)(‪myHttp.send‬‬
‫‪console.log(myHttp.readyState); // 1‬‬

‫{)(‪myHttp.addEventListener("readystatechange", function‬‬
‫‪console.log(myHttp.readyState); // 2 3 4‬‬
‫{)‪if(myHttp.readyState == 4‬‬
‫;)‪console.log(myHttp.response‬‬
‫}‬
‫}‬
‫تعال نشرح الـ‪Connection Methods‬‬
‫وهي طريقة التعامل مع ال ‪ URL‬واللى بيحددهالى ال ‪ backend‬فهو بيقولي مع ال ‪ URL‬دا استخدم معاه ال‬
‫‪ Method‬دي‪.‬‬
‫دى بستخدمها لو انا رايح اجيب داتا من ال يو ار ال عشان استخدمها ‪1. GET‬‬
‫دى بستخدمها لو انا رايح اديله داتا زي مثال الفيسبوك وانا رايحله بديله اليوزر والباسورد ‪2. POST‬‬
‫دي بستخدمها لو انا رايح اعمل ايديت او تعديل علي ال يو ار ال بتاعى ‪3. PUT‬‬
‫دي بستخدمها لو انا رايح اعمل ايديت او تعديل علي ال يو ار ال بتاعى هنشرح بعدين الفرق ما بينهم ‪4. Patch‬‬
‫دي بستخدمها لو انا عايز امسح حاجة من اليو ار ال ‪5. Delete‬‬
‫تعال نشرح الـ‪MyHttp.status‬‬
‫وهي ‪ property‬بتراقب حالة ال ‪ URL‬اللى بستخدمه والتالى هم اشهر الحاالت واللى انا محتاجها‬
‫معناه ان مفيش اي اتصال خالص ‪1. myHttp.status = 200 // OK‬‬
‫معناه ان اللينك غلط ‪2. myHttp.status = 404 // Error / Page not found‬‬
‫معناه ان ممنوع انك تدخل على اللينك دا ‪3. myHttp.status = 405 // forbidden‬‬
‫فعشان كدا الزم اراقب ال ‪ status‬معايا عشان يجبلي الداتا ودي بتكون زيادة تأكيد الن ال ‪ readystate‬لو ب ‪ 4‬دا معناه‬
‫ان اللينك شغال والدنيا فل‪.‬‬
‫{)(‪myHttp.addEventListener("readystatechange", function‬‬
‫{)‪if(myHttp.readyState == 4 && myHttp.status == 200‬‬
‫;)‪console.log(myHttp.response‬‬
‫}‬
‫)}‬
‫في خطوة بسيطة بس بزودها عشان الداتا اللى رجعالى من ال ‪ response‬بتكون من النوع ‪ string‬وعشان نتأكد نحطها‬
‫في )(‪ typeof‬ونشوف‪.‬‬
‫{)(‪myHttp.addEventListener("readystatechange", function‬‬
‫{)‪if(myHttp.readyState == 4 && myHttp.status == 200‬‬
‫‪console.log(typeof(myHttp.response)); // string‬‬
‫}‬
‫)}‬
‫فبالتالى محتاج احولها ل ‪ object‬وانا بحول من ‪ string‬ل ‪ object‬عن طريق )‪ JSON.parse(ally 3ayz t7olo‬ودا‬
‫بيتم بالطريقة التالية‪.‬‬
‫عملته جلوبال عشان اقدر اعمل فور لوب على الداتا بتاعتى لما اجي اعرضها ‪var myData; //‬‬
‫{)(‪myHttp.addEventListener("readystatechange", function‬‬
‫{)‪if(myHttp.readyState == 4 && myHttp.status == 200‬‬
‫)‪var myData = JSON.parse(myHttp.response‬‬
‫;)‪console.log(myData‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
}
})
‫احنا كدا شرحنا وفهمنا والحمدهلل الخطوات كلها وزي الفل هضيف الكود بس بدون اي لوج واي شرح عشان يكون واضح‬
‫وجميل‬
var myData;

var myHttp = new XMLHttpRequest();

myHttp.open("GET","https://jsonplaceholder.typicode.com/posts");

myHttp.send();

myHttp.addEventListener("readystatechange", function(){
if(myHttp.readyState == 4 && myHttp.status == 200){
myData = JSON.parse(myHttp.response)
console.log(myData);
}
})
‫ الجافا سكريبت عملتلنا حاجة‬2019 ‫دا الكود وهيرجعلي الجيسون داتا وزي الفل ولكن احنا هنغير كل دا بعد كدا الن فى‬
‫ هنعرفها بعدين‬fetch ‫حلوة اسمها‬
‫ وهو اختصار‬AJAX ‫العملية اللى شرحناه فوق دي كلها تندرج تحت مفهوم او مصطلح او تكنيك اسمه‬
Asynchronous JavaScript And XML‫ل‬
.‫ للويب سايت بتاعى‬refresh ‫ انه بيروح يجبلي داتا وبيرجع من غير ما يعمل‬AJAX ‫ من اهم مميزات ال‬:‫ملحوظة‬
‫تعال بقا نعرض الداتا دي بقا ونستخدمها والحركات بتاعتنا‬
<!—in HTML -->
<div class="container mb-5">
<div id="displayData" class="row row-cols-1 row-cols-md-4 g-4">
</div>
</div>
// in JavaScript
var myData;
var myHttp = new XMLHttpRequest();
myHttp.open("GET","https://jsonplaceholder.typicode.com/posts");
myHttp.send();
myHttp.addEventListener("readystatechange", function(){
if(myHttp.readyState == 4 && myHttp.status == 200){
myData = JSON.parse(myHttp.response)
console.log(myData);
displayData(); // ‫هعمل كول للفانكشن هنا عشان اقوله بعد ما تجيب الداتا اعرضهالى‬
}
})
// ‫هعمل فانكشن تعمل لووب على الجيسون فايل بتاعى عشان اعرض الداتا‬
function displayData(){
var tempData = '';
for(var i = 0; i < myData.length; i++){
tempData += `
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">${myData[i].title}</h5>
<p class="card-text">${myData[i].body}</p>
</div>
</div>
</div>
`
}
document.getElementById("displayData").innerHTML = tempData;
}
‫ تعال ناخد‬.‫ ولو مش عارفه اعمل عنه سيرش بسيط جدا جدا‬Go Live Server ‫متنساش تشغل الويب بتاعك باستخدام‬
‫مثال اخر‬
var myData1
var myD = new XMLHttpRequest();
// ‫خد بالك انا ضفت كي في اللينك اللى انا جبته بتاع االخبار ففي اي بي اي بتحتاج انك تضيف ليها كي عشان تشتغل‬
myD.open("GET" , "https://newsapi.org/v2/top-
headlines?country=eg&category=sports&apiKey=f39595da4c814512baa958b302035021");
myD.send();

myD.addEventListener("readystatechange", function(){
if(myD.readyState == 4 && myD.status == 200){
myData1 = JSON.parse(myD.response).articles
console.log("Hello " + myData1);
DData();
}
})

function DData(){
var BoxData='';
for(var i = 0; i < myData1.length; i++){
BoxData +=`
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">${myData1[i].author}</h5>
<p class="card-text">${myData1[i].title}</p>
</div>
</div>
</div>
`
}
document.getElementById("displayNEWSData").innerHTML = BoxData;
}
‫ هيجبلك لينكات‬free apis ‫ واجرب مشاريع والكالم دا وكمان ممكن تكتب في السيرش‬APIS ‫لينكات اقدر اجيب منها‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
‫كتيرة‬
/https://jsonplaceholder.typicode.com
/https://newsapi.org
/https://any-api.com
‫ دا عظيم جدا جدا جدا‬https://github.com/public-apis/public-apis
.Meals ‫ وجميل جدا عن ال‬API ‫تعال نجرب مثال تاني على ال‬
<!-- in HTML -->
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Dessert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Seafood</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Display Data in Row -->
<div class="container mb-5">
<div id="displayNEWSData" class="row row-cols-1 row-cols-md-4 g-4">

</div>
</div>
// IN JAVASCRIPT
var myData1
function getData(category) { // ‫لميت خطوات االيجكس في فانكشن عشان اقدر اكول الداتا وقت منا عايز‬
var myD = new XMLHttpRequest();
// ‫طالما اللينك عندي ثابت والكاتيجوري هو اللى متغير ف هقصه بالشكل دا واحطه كمتغير ف الفانكشن‬
myD.open("GET", `https://www.themealdb.com/api/json/v1/1/filter.php?c=${category}`);
myD.send();

myD.addEventListener("readystatechange", function () {
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
if (myD.readyState == 4 && myD.status == 200) {
myData1 = JSON.parse(myD.response).meals
console.log("Hello " + myData1);
DData();
}
})
}

function DData() {
var BoxData = '';
for (var i = 0; i < myData1.length; i++) {
BoxData += `
<div class="col">
<div class="card h-100">
<div class="card-body">
<p class="card-text">${myData1[i].idMeal}</p>
<img src="${myData1[i].strMealThumb}" class="card-img-top" alt="...">
<h5 class="card-title">${myData1[i].strMeal}</h5>
</div>
</div>
</div>
`
}
document.getElementById("displayNEWSData").innerHTML = BoxData;
}

getData("Dessert")

// ‫انا عندي ناف بار وعايز كل ما ادوس علي لينك منهم يعرضلي كاتوجري معين‬
var allLinks = document.querySelectorAll("nav .nav-link"); // 6 links

for(var i = 0; i<allLinks.length; i++){


allLinks[i].addEventListener("click" , function(e){
// ‫قولتله هاتلي معلومات الناف لينك اللى بدوس عليه وبعد كدا قولتله هاتلي الكلمة المكتوبة فى االينر‬
getData(e.target.innerHTML)
})
}

ES6+
Compare between var, let, const
‫ لتحسين البرفورمنس‬ES6 ‫ انما بدأ يحصل تغيير جذري بعد‬ES6 ‫لما كنا بنشرح قبل كدا اي حاجة استخدمناها كانت قبل‬
.‫ دي شوال وهنطلع منه صفة صفة منه ونشرح‬ES6 ‫وحل مشاكل معينة فتعالى نتخيل ان‬
ES6 ‫فتعالى نحط مشكلة ونقول حلها ازاي ب‬
‫فاول مشكلة هي‬
console.log(x);
var x = "ahmed";
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
‫لو انا جيت عملت كدا الكود هيشتغل عادي وهيرن والناتج هيكون ‪ undefined‬بسبب ال ‪ hosting‬فهو بيعمل دكلريشن‬
‫فقط بدون الفاليو فهو معندوش مشكلة انه يطلعلك ناتج لحاجة قبل ما تعرفها وتعملها ‪ initialization‬ودا مينفعش ومش‬
‫صح اني استخدم حاجة بدون فاليو‪.‬‬
‫تانى مشكلة هى‬
‫لما كنت بعمل فانكشن وبداخلها متغير ‪ var‬وكان ميزة تعريف الفاريبول جوا الفانكشن كان انه كان لوكال على مستوي‬
‫سكوب الفانكشن فالبروزر بيتعامل مع المتغيرات ال ‪ var‬داخل اسكوب الفانكشن ان الاليف تايم بتاعته شغاله جوا‬
‫الفانكشن فقط وبمجرد ما الفانكشن ترن وتخلص فهو بيخلص معاها (‪ )var‬فبالتالى لو جيت بعد ما رنيت الفانكشن طبعت‬
‫المتغير مش هيتطبع النه مش موجود فى الرامات الن البروزر بيروح يمسح الوكل اسكوب بتاع اي فانكشن عندي ودا‬
‫طبيعي وحلو جدا وشغل فاخر من االخر وراقي انما بقا اللى مش طبيعي نوع تانى من االسكوب وهو ال ‪Block Scope‬‬
‫ودا بيتنشأ مع اكتر من حاجة على سبيل المثال ال ‪ for loop‬وال ‪ if‬واي حاجة ليها اسكوب معادا الفناكشن ‪ ...‬فالكارثة‬
‫هنا ان ال ‪ life time‬بتاع ال ‪ var‬بيفضل شغال معايا طول ما انا فاتح البروزر بتاعى فبيفضل صاحي فى الرامات‬
‫وحاجز مساحة حتي بعد ما يرن الكود ويخلص بتاع ال ‪ for‬فتخيل بقا جوا االسكوب بتاع ال ‪ for‬حطين ‪ 100‬متغير ف‬
‫دي كارثة وخطر على الرامات عمال بتحشي في الرامات وعشان تتأكد جرب تطبع ال ‪ i‬بتاعت ال ‪ for‬برا االسكوب‬
‫بتاع ال ‪ for‬هتالقي طبع معاك ودا دليل كافي على انه لسه موجود فى الرامات‪.‬‬
‫‪// functional Scope‬‬
‫{ )(‪function test‬‬
‫;"‪var x = "ahmed‬‬
‫;)‪console.log(x‬‬
‫}‬
‫)(‪test‬‬
‫الفانكشن قولنا ان هي تمام وزي الفل وجميلة انما المشكلة التانيه تكمن مع االسكوب بتاع الفوور او ال اف (البلوك ‪//‬‬
‫اسكوب عموما)‬
‫‪// Block Scope‬‬
‫{ )‪for (var i = 0; i < 10; i++‬‬
‫;)"‪console.log("hii‬‬
‫}‬
‫‪console.log(i); // = 10‬‬
‫جت بقا ‪ ES6‬تحل المشكلتين دول عن طريق استخدام ‪ let, const‬وتعال نشرح كل واحدة منهم‬
‫‪let‬‬
‫‪ Let‬معناها بالعربي اجعل او خلي ال اكس بتساوي ‪ 10‬طيب اي المميزات بتاعتها وهي انه بيعترض على ال‬
‫‪initialization‬فهو بيقولك انك مينفعش تستخدم حاجة غير لما تعملها ‪ assignment‬فهي بتعترض على كدا‬
‫ومبتعترضش علي ال ‪ Declaration‬الن ال ‪ let‬بيحصلها ‪ hosting‬بالشكل دا = ‪let x; console.log(x); x‬‬
‫"‪ "Ahmed‬ودا المقصود بال ‪ Declaration‬اما المقصود بال ‪ initialization‬هو ال "‪x = "Ahmed‬‬
‫;)‪console.log(x‬‬
‫‪let x = "Ahmed"; // = Cannot access 'x' before initialization‬‬
‫يقصد باالنشليزيشن انك قولتله اطبعلي االكس قبل ما تقوله ان االكس دي بتساوي اي عشان يطبعها‬
‫اما الميزة الثانيه لل ‪ let‬هي اني مقدرش اعرف متغير تاني انما اقدر اعمل ‪ overwrite‬عادي‬
‫;"‪let x = "ahmed‬‬
‫;"‪let x = "ahmed‬‬
‫‪console.log(x); // Identifier 'x' has already been declared‬‬
‫انما اقدر اعمل اوفررايت عادي جدا زي الفار‪//‬‬
‫;"‪let x = "ahmed‬‬
‫;"‪x = "Ali‬‬
‫‪console.log(x); // = Ali‬‬
‫اما تالت ميزة هي انه حل مشكلة ال ‪ block Scope‬مع ال ‪ for‬مثال وهي اني مقدرش استخدم ال ‪ i‬خارج االسكوب بتاع‬
‫ال ‪ for‬وقيس على دا اي حاجة ليها عالقة بال ‪ block scope‬واحنا قولنا ان اي حاجة ليها اسكوب فهي ‪block scope‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫معادا الفانكشن‪.‬‬
‫‪// Block Scope‬‬
‫{ )‪for (let i = 0; i < 10; i++‬‬
‫;)"‪console.log("hii‬‬
‫}‬
‫‪console.log(i); // i is not defined‬‬
‫‪const‬‬
‫وهي اختصار لحاجة اسمها ‪ constant‬ودي معناها بالعربي حاجة ثابتة وهي تؤام لل ‪ let‬ف اي حاجة شرحناها فى ال‬
‫‪ let‬فهي غالبا موجودة فى ال ‪ const‬وفكرته وميزته فى اني معرفش اعمل ‪ overwrite‬علي عكس ال ‪ let‬اقدر عادي‬
‫مثال‬
‫;"‪const x = "ahmed‬‬
‫;"‪x = "Ali‬‬
‫‪console.log(x); // = Assignment to constant variable‬‬
‫وكمان مينفعش اعمل ‪ declaration‬الن الهدف من ال ‪ const‬هو اني مقدرش اعمل فاريبول واستخدمه تاني‪.‬‬
‫;‪const x‬‬
‫;"‪x = "Ali‬‬
‫‪console.log(x); // = Missing initializer in const declaration‬‬
‫وقولنا زيها زي ال ‪ let‬في حل مشكلة ال ‪ block scope‬وهي اني مقدرش استخدم متغير خارج البلوك اسكوب مثال‬
‫{ )‪for (const i = 0; i < 10; i++‬‬
‫;)"‪console.log("hii‬‬
‫}‬
‫‪console.log(i); // Assignment to constant variable‬‬
‫{ )‪if (true‬‬
‫;"‪const x = "ahmed‬‬
‫}‬
‫وكذلك نفس الناتج لو استخدمت اللت مع ال اف ‪console.log(x); // x is not defined //‬‬
‫‪default Values‬‬
‫تعال نفتح الشوال تانى ونأخد صفة جديدة جميلة وهي بتحل ليا مشكلة ال ‪ default values‬للمتغيرات بتاعت ال‬
‫‪ function‬الن في االول كنت بعمل ‪ if condation‬عشان يحل ليا مشكلة ان لو ال ‪ user‬عمل ‪ call‬للفانكشن من غير ما‬
‫يقولي القيمة بتاعت المتغير فالناتج هيكون ‪ undefined‬فبالتالي كنت بستخدم ‪ if‬عشان احل المشكلة دي بس لو انا عندي‬
‫اكتر من متغير هقعد اكرر ‪ if‬كتير مثال‬
‫{ )‪function test(name , age‬‬
‫;)`}‪console.log(`your name is ${name}, your age is ${age‬‬
‫}‬
‫‪test(); // = your name is undefined your age is undefined‬‬
‫فكنت عشان احل المشكلة دي كنت بعمل ‪ if‬داخل الفانكشن مثال‬
‫{ )‪function test(name , age‬‬
‫{)‪if(name == undefined‬‬
‫"‪name = "Ahmed‬‬
‫}‬
‫{)‪if(age == undefined‬‬
‫‪age = 27‬‬
‫}‬
‫;)`}‪console.log(`your name is ${name}, your age is ${age‬‬
‫}‬
‫‪test(); // = your name is Ahmed your age is 27‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫فتم حل هذه المشكلة بالشكل التالى‬
function test(name = "Ahmed", age = 25) {
console.log(`your name is ${name}, your age is ${age}`);
}
test(); // = your name is Ahmed your age is 25
‫ اي فى الكود التالي لمين للعمر وال السالري‬2000 ‫في تركاية كدا جميلة تفتكر هيطبع رقم‬
function test(name = "Ahmed", age = 25 , salary = 2000) {

console.log(`your name is ${name}, your age is ${age} and your salary is ${salary}`);
}
test("Ali", 2000);
‫هيطبع للعمر النه تاني متغير علي طول في القيم المدخله للفانكشن وعشان احل المشكلة دي برمي المدخالت للفانكشن‬
‫بالشكل دا‬
function test(name = "Ahmed", age = 25 , salary = 2000) {
console.log(`your name is ${name}, your age is ${age} and your salary is ${salary}`);
}
test("Ali", undefined ,2000); // your name is Ali, your age is 25 and your salary is 2000
template Literal
‫ودي استخدمناها قبل كدا كتير وهي لو عندى استرينج وعايز اكونكات معاه فاريبول فبعمل باك تك وبباصي الفاريبول‬
${} ‫عن طريق‬
let yourName = "Ahmed"
let x = `your name is ${yourName}`
console.log(x);
this
‫ طب امتا استخدمها‬... ‫ ومعناها بالعربي ( دا ) او بتشاور علي حاجة‬JS ‫ هي كيوورد موجودة فى ال‬this ‫نفتح الشوال ل‬
.‫واستخدمها فين‬
‫ عشان‬window ‫ بتاعى وهو ال‬main object ‫اول مكان عندى بستخدمها فى الطل ودا لو انا عايز اشاور علي ال‬
‫ الناتج بيكون‬window ‫ مش موجودة فى ال‬property ‫ ولو في‬window ‫ داخل ال‬property ‫اقدر ااكسس اي‬
‫ مثال‬undefined
console.log(this); // > Window {window: Window, self: Window, document: document,
name: '', location: Location, …}
console.log(this.yourAge); // undefined
window ‫ فهنا برضو بتشاور علي ال‬for ‫ او ال‬if ‫تانى مكان عندى هو داخل اسكوب الفانكشن او ال‬
‫ دا مثال‬event ‫ اللى بيحصل عليه ال‬element ‫ هتشاور على ال‬this ‫ ساعتها‬event ‫ جوا‬this ‫ولكن لو انا استخدمت‬
// In HTML
<h1>Lorem ipsum dolor sit amet.</h1>
// In JS
document.querySelector("h1").addEventListener("click", function(){
console.log(this);
}); // <h1>Lorem ipsum dolor sit amet.</h1>

Arrow Function
function test(x){console.log(x)} ‫عندنا طريقتين لكتابة الفانكشن وهما االستيتمنت فانكشن او الدكلريشن فانكشن‬
‫ عملت نوع جديد اسمه ارو‬ES6 ‫ ف‬let welcome = function(x){console.log(x)} ‫و االكسبريشن فانكشن‬
‫فانكشن‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
‫وطريقة كتابتها بالشكل التالى ولها ‪ 3‬قواعد وهما‬
‫‪ .1‬بشيل كلمة ‪ function‬وبحط >= بعد البراميتر‪.‬‬
‫‪ .2‬لو كانت الفانكشن بتاعتى مبتأخدش براميتر خالص بحط االقواس بتاعت البراميتر فاضية () ولو كانت بتأخد‬
‫براميتر واحد فقط ينفع احذف القوسين بتوع البراميتر او اسيبهم عادى ولو كانت بتأخد اكتر من براميتر الزم‬
‫أحط القوسين بتوع البراميتر‪.‬‬
‫‪ .3‬لو ال ‪ body‬بتاع الفانكشن بيعمل سطر واحد بس اقدر احذف اقواس المجموعة }{ بتاعت الفانكشن واخليها‬
‫على سطر واحد‪ .‬ولو السطر دا كان عبارة عن كلمة ‪ return‬الزم أشيل كلمة ‪ return‬النها مش بتقبل ‪return‬‬
‫طالما شايل الكيرلي براكتس‪.‬‬
‫;)"‪let welcome = () => console.log("hello‬‬
‫;)(‪welcome‬‬

‫;)`}‪let phoneNumber = pNum => console.log(`my phone Number is ${pNum‬‬


‫;)"‪phoneNumber("01155023528‬‬

‫; `}‪let userName = (fName , lName) => `your Name is ${fName} ${lName‬‬


‫)"‪userName("Ahmed", "Mostafa‬‬
‫طيب ايه هي القصة بتاعت ال ‪ Arrow fun‬وليه عملوها اصال‬
‫كان بيقابلنا مشكلة زي اللى هيتم شرحها حاليا وهى اني لو عندى ‪ object‬وبداخله ‪ method‬اسمها مثال ‪calcSalary‬‬
‫وبداخلها قولتله طلعلي ‪ this‬و ‪ this‬لو انا مستخدمها مع ‪ direct property‬داخل ‪ object‬ساعتها هتشاورعلى ال‬
‫‪ object‬كله مثال توضيح‬
‫{ = ‪let emp‬‬
‫‪eName:"Ahmed",‬‬
‫‪eAge:"27",‬‬
‫‪eSalary: 3000,‬‬
‫{)(‪calcSalary:function‬‬
‫‪console.log(this); // console.log(this.eSalary) // = 3000‬‬
‫}‬
‫}‬
‫}‪emp.calcSalary() // {eName: 'Ahmed', eAge: '27', eSalary: 3000, calcSalary: ƒ‬‬
‫والفانكشن هنا الموجودة فى البروبرتي ‪ calcSalary‬مش بتعامل معاملة االستيتمنت العادية الن هي تعتبر جزء من‬
‫االوبجكت بتاعك الن الفانكشن دي جايه علي حس البروبرتي دا فهي مرتبطة بحاجة جايه ع حسها‪ .‬فساعتها هتشاور على‬
‫االوبجكت كما فى المثال السابق‪.‬‬
‫لو انا بقا احتاجت اني استخدم فانكشن تانيه داخل فانكشن ال ‪ calcSalary‬لحساب البونص مثال وانا عايز داخل الفانكشن‬
‫دي اجيب الساليري االساسي بتاعى واضربه فى ‪ 0.5‬واعمل ‪ call‬للفانكشن دي في نفس االسكوب بتاع ال ‪method‬‬
‫عشان اجيب مرتب الشخص في الشهر دا مثال الشكل التالى‬
‫{ = ‪let emp‬‬
‫‪eName:"Ahmed",‬‬
‫‪eAge:"27",‬‬
‫‪eSalary: 3000,‬‬
‫)(‪calcSalary:function‬‬
‫{‬
‫{)(‪function calcBouns‬‬
‫‪return this.eSalary * 0.5‬‬
‫}‬
‫;)(‪return this.eSalary + calcBouns‬‬
‫}‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫}‬
‫‪console.log(emp.calcSalary()); // NaN‬‬
‫فهنا هنالحظ الناتج ‪ NaN‬ودا معناه انه بيقولك انه ‪ Not a Number‬طيب ليه وايه السبب السبب هو ان ال ‪this‬‬
‫الموجودة داخل فانكشن ال ‪ calcBouns‬بتشاور علي ال ‪ main object‬اللى هو ال ‪ window‬زي ما قولنا قبل كدا فى‬
‫شرح ‪( this‬ارجع لشرح ‪ )this‬ف انا بقوله داخل فانكشن ال ‪ calcBouns‬بقوله ‪ this.eSalary‬وال ‪window‬‬
‫معندوش ‪ property‬اسمها ‪ eSalary‬فبالتالى الناتج هيكون ‪ undefined‬زي ماقولنا قبل كدا برضو فبالتالى لما باجي‬
‫اعمل )(‪ return this.eSalary + calcBouns‬فبيكون بالشكل دا ‪ 3000 + undefined‬ف الناتج بيكون ‪... NaN‬‬
‫ولذلك ولذلك ولذلك يأتي دور ال ‪ Arrow Function‬يا معلم‬
‫عشان تحل لينا المشكلة دي الن ال ‪ Arrow function‬النى لو استخدمتها جوا بروبرتي ليها عالقة باالوبجكت بتاعى‬
‫فبتشاور على االوبجكت دا اللى هي جايه منه‪ .‬كما هو موضح في المثال التالى‪.‬‬
‫{ = ‪let emp‬‬
‫‪eName:"Ahmed",‬‬
‫‪eAge:"27",‬‬
‫‪eSalary: 3000,‬‬
‫)(‪calcSalary:function‬‬
‫{‬
‫‪let calcBouns = () => this.eSalary * 0.5 // use Arrow Function‬‬
‫;)(‪return this.eSalary + calcBouns‬‬
‫}‬
‫}‬
‫‪console.log(emp.calcSalary()); // 4500‬‬
‫‪Spread Operator‬‬
‫معناها بالعربي عامل التوزيع فممكن استخدمها لو انا عايز اوزع قيم موجودة داخل ‪ Array‬اوزعها كقيم لفانكشن مثال‬
‫وطريقة كتابتها بيكون بالشكل دا بتحط ‪ 3‬نقاط قبل المتغير‪…friends‬‬
‫;]"‪let frinds = ["ahmed", "ali", "hager", "basant‬‬
‫{ )‪function welcome(name1,name2,name3,name4‬‬
‫;)`}‪console.log(`welcome ya ${name1}, ${name2}, ${name3} and ${name4‬‬
‫}‬
‫‪welcome(...frinds) // welcome ya ahmed, ali, hager and basant‬‬
‫ودا مثال بسيط وسهل ولكن اي اهميتها القصوي امتا استخدمها يعنى بشكل فعال اكتر من كدا‬
‫قبل ‪ ES6‬كان بيقابلنا مشكلة وهي انى لما كنت بأخد نسخة من حاجة من النوع ‪ Non Primitive‬زي ال ‪array,‬‬
‫‪ object, function,..‬كان بيأخد نسخة من الريفرنس او من العنوان بتاع المتغير اللى شايل االراي مثال فكان بيأخد‬
‫نسخة من العنوان وليس ال ‪ value‬فبالتالى لما بكون عايز اخد نسخة من االراي دا مثال مكنتش بعرف ومثال للتوضيح‬
‫;]"‪let x = ["Ahmed‬‬
‫;]"‪let y = ["Ahmed‬‬
‫‪if (x == y) { console.log("Equal"); } else{ console.log("Not Equal"); } // Not Equal‬‬
‫ف كنت عشان احل المشكلة دي كنت بعمل اي كنت بحول من ‪ non primitive‬الى ‪ primitive‬عن ‪json. stringify‬‬
‫ودا يندرج تحت مصطلح اسمه ‪ Deep Copy‬وبعد كدا بحول الناتج دا الى ‪ non primitive‬تاني عشان يكون شايل‬
‫نفس النوع بالشكل دا‬
‫;]"‪let x = ["Ahmed‬‬
‫;))‪let y = JSON.parse(JSON.stringify(x‬‬
‫]'‪console.log(x); // ['Ahmed‬‬
‫]'‪console.log(y); // ['Ahmed‬‬
‫)"‪x.push("Heba‬‬
‫]'‪console.log(x); // ['Ahmed', 'Heba‬‬
‫]'‪console.log(y); // ['Ahmed‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫نالحظ ان ال ‪ y‬متأثرتش لما عملت ‪ push‬ف معنى كدا ان خدت نسخة من ال ‪ x‬مع الحفاظ على الريفرنس بتاع كل‬
‫متغير‬
‫ولكن جت ال ‪ ES6‬قالتلنا فكك من الهري دا كله والتحويالت دي كلهاا واستخدم ‪ spread operator‬وهنا تكمن اهميته‬
‫في اني اقدر اخد نسخة مع الحفاظ على الريفرنس الخاص بكل متغير زي ما بيحصل مع ال ‪ primitive‬لما بأخد نسخة‬
‫من حاجة ‪ string‬بيبقا كل متغير مستقل ب ذاته لو انا جيت أثرت على اي متغير فيهم ملوش دعوة بالمتغير االخر اخد‬
‫نسخة من حاجة وكل نسخة منهم ملهمش عالقة ببعض يعنى النسخة االولى لو حصل ليها تغير التغير دا ميحصلش على‬
‫النسخة الجديدة‪ .‬مثال‬
‫;]"‪let x = ["Ahmed‬‬
‫‪let y = [...x]; // spread operator‬‬
‫]'‪console.log(x); // ['Ahmed‬‬
‫]'‪console.log(y); // ['Ahmed‬‬
‫)"‪x.push("Heba‬‬
‫]'‪console.log(x); // ['Ahmed', 'Heba‬‬
‫]'‪console.log(y); // ['Ahmed‬‬
‫{ )‪if (x == y‬‬
‫;)"‪console.log("Equal‬‬
‫‪} else{ console.log("Not Equal"); } // Not Equal‬‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫‪OOP Object Oriented Programing in JavaScript‬‬
‫هو فكرة او طريقة لتنظيم كتابة الكود بتاعي مش اكتر فهو مش لغة برمجة جديدة وال سوفت ووير او اختراع جديد يعني‬
‫فهو طريقة تفكير مش اكتر فمن االخر بيساعدني ان انا اقدر اعمل حاجة اسمها ‪ simulate Reality‬اي بحاكي الواقع‬
‫زي مثال عميل عايزني امثل الجامعة فهو انا كدا بحاكي الواقع وانا بقدر اتعامل معاها من خالل الجافا سكريبت من خالل‬
‫طريقتين وهما‬
‫‪Prototype-based‬‬ ‫‪Class-based‬‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫بروتوتايب معناها نموذج مبدأئي فتعال نفترض انى عايز‬ ‫وهنا انا بهدف انى اعمل حاجة عامة اى عمل حاجة‬
‫اعمل ترابيزة فبجيب كرتونة وبعمل بيها تربيزة معمولة من‬ ‫جنراك او حاجة مش على ارض الواقع وببدأ اعمل كل‬
‫الكرتون وليها ‪ width, height‬وهكذا ف انا كدا عندى‬ ‫الصفات والميزود المشتركة ما بين كل الحاالت العامة‬
‫نموذج مبدأئي وباخدها وبروح للنجار بقوله عايز اعمل‬ ‫بتاعتنا وبديله اي اسم فى الدنيا بس يكون معبر عن‬
‫ترابيزة بس من الخشب وعايزها تكون ال ‪ width‬كذا‪ ..‬فهنا‬ ‫الحاجة اللى شغال عليها مثال ‪ Student‬والصفات‬
‫والميزود المشتركة ما بين الطالب زي االسم‪,‬والعمر‪,‬وال انا مش عندي تمبلت خيالى وببدأ اخد منه اوبجكت ال انا هنا‬
‫عندى اوبجكت على ارض الواقع اي نموذج مبدأئي وبأقدر‬ ‫اي دي‪ ,‬وميزود لحضور المحاضرات وميزود لحل‬
‫االمتحانات وببدأ اخد من الكالس دا نسخة وبديلهم الفاليو اخد منه نسخة تانيه اي بعمل اوبجكت تانى ودي فكرة‬
‫البروتوتايب‪ .‬مثال زي اللى عملناه فى الكالس بيز ف انا‬ ‫بتاعت كل حاجة منهم مثال االسم أحمد والعمر ‪27‬‬
‫عندي اوبجكت اسمه ‪ S1‬وعنده بروبرتي اسمها احمد والعمر‬ ‫‪...‬والحاجة الجنراك دي اسمها كالس والنسخة اللى‬
‫‪ ...27‬وينفع اخد منها نسخة واقوله ‪ S2‬اسمه علي والعمر‬ ‫بأخدها من الكالس دا اسمها اوبجيكت‪ ...‬والكالس دا‬
‫بيكون عبارة عن تمبلت او شكل مش موجود في الوجود ‪ ...26‬ف انا كدا قدرت اني اعمل ابديت علي ‪ S1‬ف انا كدا‬
‫عندي نسخة على ارض الواقع واقدر اخد منها نسخة او‬ ‫بس ينفع اقوله هاتلى الطالب رقم ‪( 1‬االوبجكت النسخة‬
‫اوبجكت واديلو قيم مختلفة‪.‬‬ ‫اللى خدتها من الكالس) الن دا بيكون الفاليو الحقيقية‪.‬‬
‫◼ سؤال انترفيو مشهور جدا‪ :‬بيجي يقولك االزازة‬
‫دي اوبجكت وال كالس؟‬
‫االجابة‪ :‬اوبجكت الن االزازة اقدر اتعامل معاها‬
‫واقدر اللمسها انما الكالس اللى بيجي منه االزازة‬
‫هو ان اي ازازة في الدنيا ليها صفات عامة وهي‬
‫مثال عندى كالس اسمه ازازة شايل صفات عامة‬
‫وهي ال ‪width, height, size, color,‬‬
‫}{)(‪material, keep water‬‬
‫وبأخد منها نسخة (اوبجكت) وبدي للصفات دي‬
‫فاليو معينة‬

‫◼ ال ‪ JavaScript‬زي ما قولنا قبل كدا ان هي تندرج تحت ال ‪ .Prototype-based‬طيب عندى سؤال بما ان‬
‫الجافا سكريبت تندرج تحت البروتوتايب بيز هل ينفع استخدم فيها ‪ class-based‬ف دا ال مينفعش قبل ‪ES6‬‬
‫وبعد ال ‪ ES6‬برضو ال بس هنعرف ليه‪ .‬وتعال بقا نشوف ازاي نكتب ال ‪ Prototype-based‬دا‪.‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫‪Prototype-based‬‬
‫فكرة ‪ Prototype-based‬جابوها من لغة برمجة اسمها ‪ self‬زي ما شرحنا قبل كدا وقولنا ان هما عملو ال ‪ JS‬من ‪3‬‬
‫لغات برمجة لما خدو من ال ‪ JAVA‬ال ‪ syntax‬ومن ال ‪ scheme‬ال ‪ concept‬بتاع ال ‪object first-class a in‬‬
‫‪ function‬ومن ال ‪ self‬خد ال ‪ .OOP Prototype based‬طيب هو ليه راح لالتجاه دا ومخدش ال ‪ class‬النهم شافو‬
‫انها كـبيرفورمنس احسن واسرع وكطريقة كتابة أسهل وعشان اعمل ‪ prototype-based‬نعمل كدا‪.‬‬
‫اول حاجة بعمل النموذج المبدائي بتاعي وبيكون عبارة عن اوبجكت عادي جدا‬
‫{ = ‪let s1‬‬
‫‪name: "Ahmed",‬‬
‫‪Age: 27,‬‬
‫};)"‪AttLec(){console.log("hi from AttLec‬‬
‫}‬
‫وبعد كدا بأخد منه نسخة ودا بيكون عن طريق عندنا فى ال ‪ built in object JS‬اسمها ‪ object‬جواها ‪built in‬‬
‫‪ method‬اسمها ‪ create‬وبتكون بالشكل دا )(‪ object.create‬ودي من خاللها بقدر اخد نسخة منه‪.‬‬
‫;)‪let s2 = Object.create(s1‬‬
‫;)‪console.log(s2‬‬
‫وهنا كدا هيطبعلي اوبجكت فاضي وهتالقي في بروتوتايب دوس ع السهم الصغير وافتحه هتالقى خصائص االس‪.1‬‬
‫ولو انا عايز اطبع حاجة من خصائص ال ‪ s1‬هقوله كدا بالشكل التالى فهو هيروح على البروتوتايب اللى شايلها ويجيب‬
‫بروبرتي العمر‬
‫هنا هو هيروح على البروتوتايب اللى االس ‪ 2‬شايلها ويشوف بروبرتي العمر اللى هو ‪console.log(s2.Age); //‬‬
‫شايلها ويطبعهالى ‪27‬‬
‫طيب لو انا عايز اعمل ‪ update‬يعنى مثال عايز اخلي ال ‪ name‬بتاع ال ‪ s2‬يكون اسمه (علي) ودا بيكون بالشكل التالى‬
‫هنا بعمل ابديت لبروبرتي النيم الخاصة باالس ‪ 2‬فقط واالس ‪ 1‬ملوش عالقة بي فمش هيتأثر ‪s2.name = "Ali" //‬‬
‫نقطة مهمة جدا‬
‫هنا هيطبعلي االبديت بتاع االس‪ 2‬اللى انا عملته وهيطبعلي علي ‪console.log(s2.name); //‬‬
‫تعال نأخد اوبجكت تاني ونجرب (نفس فكرة ال اس ‪ 2‬خدت نسخه من االس ‪ 1‬والتالتة ملهمش عالقة ببعض مبيتأثروش‬
‫ببعض)‬
‫;)‪let s3 = Object.create(s1‬‬
‫نفس فكرة ال اس ‪ 2‬خدت نسخه من االس ‪ 1‬والتالتة ملهمش عالقة ببعض مبيتأثروش ببعض ‪console.log(s3); //‬‬
‫طيب لو انا جيت خليت االس ‪ 3‬يأخد نسخة من االس ‪ 2‬فهو هنا هيكون شايل نسخة من االس ‪ 2‬واالس ‪ 2‬شايلة نسخة من‬
‫االس ‪ 1‬فا انا اقدر ااكسس عليها وتعال نجرب ونضرب امثلة‬
‫;)‪let s4 = Object.create(s2‬‬
‫;)‪console.log(s4‬‬
‫هنا هيطبعلى النيم الموجودة فى االس ‪( 2‬علي) النه واخد نسخه من االس ‪console.log(s4.name); // 2‬‬
‫هنا هيطبعلي العمر الموجود فى االس ‪ 1‬الن االس ‪ 2‬شايله نسخة من االس ‪ + 1‬اني ‪console.log(s4.Age); //‬‬
‫معملتش ابديت على العمر بتاع االس ‪2‬‬
‫ف ال ‪ s2, s3, s4‬دول بيكونو شبه ال ‪ ... s1‬انما اللى هيتم شرحه الجاي هو لو اني عايز اورث من اوبجكت بدل ما‬
‫اكرر الكود‬
‫‪Prototype Inheritance‬‬
‫يعنى وراثة بمعني اني بورث حاجة من حاجة تانية فهو بيكون جزء من الحاجة اللى بورث منها ودا بستفاد منه فى انى‬
‫مقعدش اكرر الكود ودا بيتم عن طريق ال ‪ built in‬اللى اسمها ‪ object‬جواها حاجة اسمها ) ‪setPrototypeOf( ,‬‬
‫ودي بتأخد ‪ 2‬براميتر اول براميتر بديلو الحاجة اللى انا عايزها تورث وتاني براميتر بديله الحاجة اللى انا عايز اورث‬
‫منه‪ .‬وتعال نوضح بمثال‪.‬‬
‫{ = ‪let s1‬‬
‫‪name : "Ahmed",‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫‪Age : 27,‬‬
‫{)(‪AttLec‬‬
‫;)"‪console.log("hi from AttLec‬‬
‫}‬
‫}‬

‫واحد بيحضر ماجستير يعني ‪let m1 = { // master 1‬‬


‫‪name : "Ahmed",‬‬
‫‪Age : 27,‬‬
‫{)(‪AttLec‬‬
‫;)"‪console.log("hi from AttLec‬‬
‫‪},‬‬
‫‪material: ["math", "Geography", "computer"],‬‬
‫{)(‪search‬‬
‫;)"‪console.log("Hi from search‬‬

‫}‬
‫}‬
‫فهنا فى ال ‪ m1‬انا بكرر حاجات فى الكود موجودة فى ال ‪ s1‬فهنا بقا يجي دور الوراثة وهو اني اورث من ال ‪ s1‬بدل ما‬
‫اكررالكود واقدر ااكسس علي ال ‪ s1‬واقدر اعمل ابديت عليها بنفس الطرق اللى جربناها فوق كدا‪ .‬مثال‬
‫{ = ‪let s1‬‬
‫‪name : "Ahmed",‬‬
‫‪Age : 27,‬‬
‫{)(‪AttLec‬‬
‫;)"‪console.log("hi from AttLec‬‬
‫}‬
‫}‬
‫واحد بيحضر ماجستير يعني ‪let m1 = { // master 1‬‬
‫‪material: ["math", "Geography", "computer"],‬‬
‫{)(‪search‬‬
‫;)"‪console.log("Hi from search‬‬
‫}‬
‫}‬
‫;)‪Object.setPrototypeOf(m1 , s1‬‬
‫فهو هنا كدا شايل خصائص االم ‪ 1‬ووارث خصائص االس ‪ 1‬فهيطبعلي خصائص االم ‪console.log(m1); // 1‬‬
‫وبروتوتايب شايل خصائص االس ‪1‬‬
‫‪Prototype Constructor‬‬
‫احنا اول حاجة عملناها لما كنا بنعمل ‪ create‬وبعد كدا بنأخد نسخة من االوبجكت بس انا حاسس اني مستفدتش حاجة‬
‫وانى برجع اعدل واعمل ابديت ”‪ s2.name = “ali‬فانا كدا برضو رجعت اكني بكريت اوبجكت عادى وانا كدا بفكر‬
‫صح ودي فعال فكرة ال ‪ oop prototype‬طب انا عايز احسنها وفى طريقة ممكن نستخدمها لتحسين دا وهى انى بدل ما‬
‫بعمل نسخة مبدأئية فيها قيم وبدل ماتضطر انك لو مش عايز القيم دي تعمل ابديت فيها ف ايه رايك لما نعمل نسخة مبدأئية‬
‫بدون قيم (التطوير بتاعهم عايزين يقلدو فكرة الكالس) يال بينا نعملها‬
‫{)‪function student(name, age, id‬‬
‫‪this.sName= name,‬‬
‫‪this.SAge= age,‬‬
‫‪this.sId= id,‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫ودي طريقة عمل الميزود داخل الطريقة دي ‪this.attLecture = function(){ //‬‬
‫;)"‪console.log("hi from attLecture‬‬
‫}‬
‫}‬
‫نيو يعني بقوله شيل نسخة جديدة من نسخة اصلية وعندى هنا ‪let s1 = new student("Ahmed",27,1010); //‬‬
‫النسخة االصلية اسمها استيودينت‬
‫;)‪let s2 = new student("Ali",26,5252‬‬
‫هيطبعلي االوبجكت بتاعى وكمان شايل بروتوتايب شايل نسخة منسخة من االستيوديتنت وبيشيلها ‪console.log(s1); //‬‬
‫فى حاجة اسمها كونستركتور‬
‫‪console.log(s1.sName); // Ahmed‬‬
‫‪console.log(s1.sAge); // 27‬‬
‫‪console.log(s1.sId); // 1010‬‬
‫‪console.log(s1.attLecture()); // hi from attLecture‬‬
‫ملحوظة مهمة جدا‪ :‬احنا عارفين ان ‪ this‬بتشاور على ال ‪ window‬ولكن لو استخدمتها مع نيو لو انا جيت وعملت‬
‫‪ new‬معنى كدا ان ‪ this‬دي هتشاور على االوبجكت اللى انت عايز تكريتو ففي المثال دا هنا ‪ this‬بتشاور على الفاريبول‬
‫‪ s1‬واللى عمل كدا كلمة نيو‪ .‬فبكدا ال ‪ s1‬بقا عندها بروبرتي اسمها ‪ sName, sAge, sId‬وكل واحدة منهم شايلة الفاليو‬
‫المحدوفة فى البراميتر اللى انا عملتها‪.‬‬
‫ولو انا شيلت نيو من البراميتر اللى بعملها كدا ‪ this‬هتشاور على ال ‪ window‬والناتج هيكون ‪.undefined‬‬
‫والفانكشن اللى انا عملتها دي مش بعملها ‪ call‬واللى بيقوم بالدور دا ال ‪ new‬ف ان هي بتعمل نسخة‪.‬‬
‫وبكدا اقدر اخد ‪ 100‬الف نسخة ف الموضوع بقا ابسط وانضف واحسن وكبيرفورمنس اسرع واحسن من التانى‪ .‬ف دا‬
‫احسن الوحشين‪.‬‬
‫‪Prototype Share Property‬‬
‫لما كنا بنعمل فانكشن وبنعمل فيها بروبرتي وكنا بنعمل بروبرتي لل ‪ method‬وبعد كدا بنأخد منهم نسخ ف دا مش افضل‬
‫حاجة الن لو عملت ‪ 100‬نسخة من الفانكشن دي كدا انا بحجز مكان فى الميموري لكل ‪ method‬من دول ودا مش صح‬
‫ف الحل كان فى اي اني اعمل ال ‪ method‬دي للفانكشن نفسها فبالتالى لما اجي اخد نسخة من االوبجكت بتاع الفانكشن‬
‫ال ‪ method‬دي هتكون فى ال ‪ prototype‬بتاع االوبجكت اللى خدته كنسخة وكل دا يندرج تحت كونسبت اسمه ‪share‬‬
‫‪ property‬وتعال نجرب بمثال‬
‫{)‪function student(name,age,id‬‬
‫‪this.sName = name,‬‬
‫‪this.sAge = age,‬‬
‫‪this.sId = id‬‬
‫}‬
‫{)(‪student.prototype.attLec = function‬‬
‫;)"‪console.log("hi from attLec‬‬
‫}‬
‫;)‪let s1 = new student("Ahmed",27,1010‬‬
‫;)‪let s2 = new student("Ali",26,5252‬‬
‫;)‪console.log(s1‬‬
‫;)‪console.log(s2‬‬
‫ودا الناتج‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫وعندنا معلومة مهمة وهى انى لو خدت اكثر من نسخة من االوبجكت دا وعملت اي تغيير هعمله علي ال ‪ method‬دي‬
‫او ‪ Array‬مثال علي نسخة واحدة من النسخ دي ف التغيير دا هيسمع في كل النسخ اللى انا واخدها ودا بسبب اني عامل‬
‫شير للبروبرتي دي‪ .‬مثال‪.‬‬
‫{)‪function student(name,age,id‬‬
‫‪this.sName = name,‬‬
‫‪this.sAge = age,‬‬
‫‪this.sId = id‬‬
‫}‬
‫;]"‪student.prototype.friends = ["Mai", "Sara‬‬

‫;)‪let s1 = new student("Ahmed",27,1010‬‬


‫;)‪let s2 = new student("Ali",26,5252‬‬

‫;)"‪s1.friends.push("Mohamed‬‬

‫]'‪console.log(s1.friends); // ['Mai', 'Sara', 'Mohamed‬‬


‫الحظ الناتج هنا فى االس ‪ 2‬هيطلع نفس الناتج]'‪console.log(s2.friends); // ['Mai', 'Sara', 'Mohamed‬‬
‫‪Class-based‬‬
‫كل اللي فات دا عظيم ومميز وجميل ونستخدمه عادى انما احنا عارفين ان معظم لغات البرمجة زي السي شارب والجافا‬
‫والسي بالس بالس بيستخدمو كونسبت الكالس فـ لو في شخص منهم جه فى ال ‪ JS‬وحب يستخدم ‪ OOP‬وعايز يكتب‬
‫بالشكل دا ف قبل ‪ 2015‬كانت الجافاسكريبت بتستخدم كونسبت البروتوتايب ف بعد ‪ 2015‬عملو فكرة الكالس في ال ‪JS‬‬
‫لينا كمبرمجين متعودين على طريقة كتابة الكالس وتعال نشرح طريقة كتابته‬
‫{‪class student‬‬
‫{ )‪constructor(name, age, id‬‬
‫‪this.sName = name,‬‬
‫‪this.sAge = age,‬‬
‫‪this.sId = id‬‬
‫}‬
‫{)(‪test‬‬
‫;)"‪console.log("hi‬‬
‫}‬
‫}‬
‫;)‪let s1 = new student("Ahmed",27,1010‬‬
‫;)‪console.log(s1‬‬
‫والناتج هيكون بالشكل دا‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫الكونستراكتور عبارة عن ‪ method‬بتكون داخل الكالس وهي اول حاجة بتفاير فى الكالس والدليل على دا المثال التالى‬
‫{‪class car‬‬
‫{ )(‪constructor‬‬
‫;)"‪console.log("Hi from constructor‬‬

‫}‬
‫{)(‪test‬‬
‫;)"‪console.log("hi from test‬‬
‫}‬
‫}‬
‫روح افتح الكونسول فى البروزر هتالقي طابع هاي فروم كونستراكتور ‪let c1 = new car(); //‬‬
‫واي ‪ method‬داخل الكالس بتروح تلقائي في ال ‪ prototype‬بتاع النسخة اللى انا خدها من الكالس كما هو موضح فى‬
‫االسكرين السابق وهنا بتقوم بنفس الدور اللى عملناه قبل كدا فى البروتوتايب بيزد لما كنا بنعمل شير بروبرتي‪.‬‬
‫فالكالس شبه اللى عملناه فى البروتوتايب وهي لما كنا بنعمل فانكشن وبنديها براميتر وبعد كدا بنستخدم ‪ this‬وبعد كدا‬
‫بنأخد نسخة بالنيو‪.‬‬

‫معلومة مهمة جدا‪ :‬وهي ان ال ‪ browser‬مش بيتعامل مع الكالس مباشرتا ال انما الكومبيلر بتاع ال ‪ JS‬بيأخد شكل‬
‫الكالس دا وبيروح يحوله لشكل البروتوتايب اللى هو كنا بنعمله بطريقة الفانكشن‪ .‬ودا اكبر دليل على ان الكالس معمول‬
‫لينا كديفلوبر لطريقة الكتابة فقط‪.‬‬
‫‪Class inheritance‬‬
‫لو انا عايز اورث كالس من كالس اخر زي ماعملنا فوق بس ال ‪ syntax‬مختلف و بيكون عن طريق ال ‪ extends‬و ال‬
‫‪ .super‬مثال‬
‫{‪class student‬‬
‫{ )‪constructor(Name, age, id‬‬
‫‪this.sName = Name,‬‬
‫‪this.sAge = age,‬‬
‫‪this.sId = id‬‬
‫}‬
‫{)(‪test‬‬
‫;)"‪console.log("hi‬‬
‫}‬
‫}‬
‫;)‪let s1 = new student("Ahmed",27,1010‬‬
‫;)‪console.log(s1‬‬

‫{‪class master extends student‬‬


‫{)‪constructor(Name, age, id, material,grade‬‬
‫)‪super(Name, age, id‬‬
‫‪this.mMaterial = material,‬‬
‫‪this.mGrade = grade‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫}‬
‫}‬
‫)"‪let m1 = new master("Ahmed",27,1010,"math","Level2‬‬
‫‪console.log(m1); // master {sName: 'Ahmed', sAge: 27, sId: 1010, mMaterial: 'math',‬‬
‫}'‪mGrade: 'Level2‬‬

‫‪setTimeOut setInterval_Date‬‬
‫هما عبارة عن بيلت ان فانكشن او بيلت ان ميزود بتساعدني على ان تخليني اعمل كل اللى انا عايزه بعد وقت معين ودي‬
‫من خالل السيت تايم اوت وبتأخد حاجتين ‪ .1‬الفانكشن اللى هتعمل الحاجة اللى انا عايزها ‪ .2‬بتديله الوقت اللى انت عايزه‬
‫يتأخر فى تنفيذ الفانكشن وبيكون باللميلي ساكند ف ال ‪ 1000‬ملي ساكند معناها ثانية واحدة مثال والفانكشن دي بتشتغل‬
‫مرة واحدة بس ‪ ,‬اما السيت انترفال نفس فكرة السيت تايم اوت ولكن بتفضل شغالة ع طول‪ .‬امثلة‬
‫هيطبعلي هاي بعد ثانيتين‪setTimeout(function(){ console.log("Hii"); }, 2000) //‬‬
‫هيقعد يطبع في كلمة هاي كل ثانيتين ومش هيقف‪setInterval(function(){ console.log("Hii"); }, 2000) //‬‬
‫طيب هستفاد بيهم اي << لو انا مثال عايز اعمل وقت عمال يعد ‪ ..‬ودا عن طريق السيت انترفال وبيلت ان اوبجكت اسمه‬
‫)(‪Date‬‬
‫{ )(‪setInterval(function‬‬
‫;)(‪let time = new Date‬‬
‫;)(‪document.querySelector(".time").innerHTML = time.toLocaleTimeString‬‬
‫;)‪}, 1000‬‬
‫ال ‪ Date‬اوبجكت عنده ميزودس كتير ممكن تجربها لو محتاج الوقت فقط او التاريخ فقط او الوقت والتاريخ‪...‬‬
‫)(‪getDate(), getTime‬‬
‫‪JavaScript Stack‬‬
‫بيقابلني مشكلة وهي اي بيرن قبل اي واحنا عارفين ان الجافا سكريبت بترن سيكونس وعندى حاجات بترن على طول‬
‫ومبتأخدش وقت زي مثال )”‪ console.log(“one‬ودول بيتحطو فى حاجة اسمها ‪ execution stack‬ولكن عندى فى‬
‫الجافا سكريبت حاجات بتأخد وقت على ما بترن زي ال ‪ AJAX‬و ‪ setTimeout‬و ‪ setInterval‬و ‪ Events‬فالبروزر‬
‫بيأخد الحاجات دي وبيحطها فى صندوق اسمه ‪ web API Stack‬وبعد كدا بيأخدهم حاجة حاجة على حسب اللى بيخلص‬
‫االول ويأخده يحطه فى حاجة اسمها ‪ event loop‬فمثال لو ‪ setTimeout‬رنت وخلصت االول بيأخدها ويحطها فى ال‬
‫‪ event loop‬وبعد كدا ال ‪ AJAX‬خلص بعديها بيأخده يوقفو فى الطابور بتاع ال ‪ event loop‬ولما كل حاجة تخلص‬
‫يأخدها ويوديها ال ‪ execution stack‬مع اخواتها وترن‪.‬‬

‫ودي مشكلة عندنا الن لو انا عندى اكتر من ‪ AJAX‬وعايز حاجة ترن قبل حاجة ف انا عندى طريقة اقدر اعمل بيها كدا‬
‫عن طريق ال ‪ callback function‬اقوم بتحول ال ‪ Async to Sync‬ومثال على دا‬
‫لو انا عندى ‪ AJAX 4‬وهما ‪ getCat, getMeals, getDetails, getArea‬وانا عايزهم يرنو بالترتيب النهم فى‬
‫العادي بيرنو علي حسب اللى بيخلص االول ف كل ما تعمل ريفريش هتالقي الترتيب اختلف وعشان احل المشكلة دي‬
‫باستخدم ‪ callback function‬مثال‬
‫‪// callbacks fun Async ==> Sync‬‬
‫‪// getCat ==> getMeals ==> getDetails‬‬
‫{)‪function getCat(callBack‬‬
‫;)(‪let myHttp = new XMLHttpRequest‬‬
‫;)"‪myHttp.open( "GET" , "https://www.themealdb.com/api/json/v1/1/categories.php‬‬
‫;)(‪myHttp.send‬‬
‫{)(‪myHttp.addEventListener("readystatechange" , function‬‬
‫{)‪if(myHttp.readyState == 4‬‬
‫;)"‪console.log("hi form cat‬‬
‫;) ‪console.log(JSON.parse(myHttp.response).categories‬‬
‫;)(‪callBack‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
}
})
}
function getMeals(callBack){
let myHttp = new XMLHttpRequest();
myHttp.open( "GET" ,
"https://www.themealdb.com/api/json/v1/1/search.php?s=Arrabiata");
myHttp.send();
myHttp.addEventListener("readystatechange" , function(){
if(myHttp.readyState == 4){
console.log("hi form Meals");
console.log(JSON.parse(myHttp.response).meals);
callBack();
}
})
}
function getDetails(callBack){
let myHttp = new XMLHttpRequest();
myHttp.open( "GET" ,
"https://www.themealdb.com/api/json/v1/1/filter.php?a=Canadian");
myHttp.send();
myHttp.addEventListener("readystatechange" , function(){
if(myHttp.readyState == 4){
console.log("hi form Details");
console.log(JSON.parse(myHttp.response).meals);
callBack();
}
})
}

getCat(function(){
getMeals(function(){
getDetails(function(){console.log("End Tree")});
})
})
‫ قالتلك ال‬ES6 ‫ ف جت ال‬..callback ‫والطريقة دي مش افضل حاجة الن لو انا عندي اكتر من فانكشن هفضل اعمل‬
‫ياباشا اللى بتعمله دا اسمه جحيم الكول باك فهما جابولنا حاجة اسمها‬
promise
‫ومعناها بالعربي وعد فهو بيقولي انا هعملك مجموعة من سطور الكود ولو مشيت ورنت تمام اوعدك اعملك حاجة بعده‬
‫ولكن لو حصل مشكلة هيقولك متزعلش مني مش هنفذلك الحاجة اللى بعدي وهيطلعلك ايرور‬
catch() ‫ ودي بتحصل بعد ما الراجل يخلص والحاجة التانيه هي‬then() ‫والبروميس له حاجتين وهما في ميزود اسمها‬
‫ ولكن ليها‬then ‫ والبروميس الواحدة ممكن تكون ليها اكثر من‬.‫ودي بترن لو حصل ايرور او مشكلة فى التسكايه بتاعتي‬
‫ مثال‬.‫ واحدة بس‬catch
‫هنكمل شرحها بعدين‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
‫‪await‬‬
‫هنكمل شرحها بعدين‬

‫‪fetch‬‬
‫في ‪ 2017‬طورو الموضوع جدا وقالك كل اللى فات دا مش احسن حاجة ولغي كل الخطوات بتاعت ال ‪ AJAX‬وعملك‬
‫فانكشن ‪ fetch‬ودي بتأخد ال ‪ URL‬بتاعى وبترجعلي معلومات ال ‪ URL‬دا كاملة والمعلومات دى بتكون من النوع‬
‫‪ promise‬فهي بتأخد وقتها لحد ما تخلص واحنا عارفين ان ‪ promise‬بتيجي معاها )(‪ then‬ولكن هنستخدم ‪await‬‬
‫افضل النها كقراءة كود افضل ف انا محتاج اقولها استني (‪ )await‬وطالما قولت ‪ await‬يبقا الزم احول الفانكشن بتاعتي‬
‫الى ‪ Async‬عن طريق اضافة كلمة ‪ Async‬قبل الفانكشن تمام كدا بس انا كدا لسه عايز ارجع الداتا ف دا بيتم عن طريق‬
‫حاجة اسمها )(‪ json‬ودي بتكون من ضمن المعلومات اللى بيرجعهالى ال ‪ URL‬وبتكون برضو من النوع ‪promise‬‬
‫فبالتالي هستخدم معاها ‪ .await‬نطبق بمثال‪.‬‬
‫{)(‪async function getCat‬‬
‫;)"‪let myData = await fetch("https://www.themealdb.com/api/json/v1/1/categories.php‬‬
‫‪myData = await myData.json(); // to get data only‬‬
‫;)‪console.log(myData‬‬
‫}‬
‫;)(‪getCat‬‬
‫‪Sign up Assignment‬‬
‫دي لو انا عايز اعمل ‪ register‬فى الموقع بتاعى وبتكون بالشكل التالى‬
‫>‪<!-- In HTML register--‬‬
‫>"‪<div class="container‬‬
‫>"‪<div class="row g-3 m-3‬‬
‫>‪<h1 class="text-info text-center my-5">Sign up</h1‬‬
‫>"‪<div class="col-md-12‬‬
‫>‪<label for="inputName" class="form-label text-info">Name</label‬‬
‫>"‪<input type="text" class="form-control" id="name‬‬
‫>‪</div‬‬

‫>"‪<div class="col-md-12‬‬
‫>‪<label for="inputPrice" class="form-label text-info">Email</label‬‬
‫>"‪<input type="text" class="form-control" id="email‬‬
‫>‪</div‬‬

‫>"‪<div class="col-12‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
<label for="inputCategory" class="form-label text-info">Password</label>
<input type="text" class="form-control" id="pass" placeholder="">
</div>

<div class="col-12">
<button id="AddProductBTN" onclick="signUp()" class="btn btn-info">Sign
up</button>
<a href="signin.html">Sign in</a>
</div>
</div>
</div>

// in register JavaScript
let in1 = document.querySelector("#name");
let in2 = document.querySelector("#email");
let in3 = document.querySelector("#pass");

let allUsers;

if(localStorage.getItem("users") == null){
allUsers = [];
}
else{
allUsers = JSON.parse(localStorage.getItem("users"))
}
function signUp() {
let flag = false; // ‫عملنا المتغير دا عشان نتشك االيميل لو موجود خليهولي ب ترو‬
for (let i = 0; i < allUsers.length; i++) {
if (allUsers[i].email == in2.value) {
flag = true;
break; // ‫دي هتشتغل في حالة ان لو الشرط اتحقق هيوقف اللوب ويطلع برا الفور وينفذ باقي الكود‬
}
}
// ‫بعد كدا هنتشك لو الفالج بفولس اعملي بوش لليوزر الجديد دا واحفظه فى اللوكل استوردج ويروح لصفحة تسجيل‬
‫الدخول‬
if (flag == false) {
let user = {
name: in1.value,
email: in2.value,
pass: in3.value
}
allUsers.push(user);
// ‫هحتاج اقوله لو المدخالت بتاعتى فاضية طلعلي اليرت يقولي دخل بياناتك‬
if (in1.value == "") {
alert("Please inter your register Data")
}
else {
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
localStorage.setItem("users", JSON.stringify(allUsers))
window.location.href = "signin.html";
}

} // ‫هنا بقوله لو االيميل فعال موجود اعملي الريت قولي انه بالفعل موجود‬
else {
alert("this email is already exist")
}
}
‫ وهتكون بالشكل التالى‬Sign in ‫بعد كدا عايزين نعمل صفحة ال‬
Sign in
<!—in HTML Sign in -->
<div class="container">
<div class="row g-3 m-3">
<h1 class="text-info text-center my-5">Sign in</h1>
<div class="col-md-12">
<label for="inputPrice" class="form-label text-info">Email</label>
<input type="text" class="form-control" id="email">
</div>
<div class="col-12">
<label for="inputCategory" class="form-label text-info">Password</label>
<input type="text" class="form-control" id="pass" placeholder="">
</div>
<div class="col-12">
<button id="AddProductBTN" onclick="signIn()" class="btn btn-info">Sign in</button>
<a href="index.html">Sign up</a>
</div>
</div>
</div>

// in Sign in JavaScript
let emailInput = document.querySelector("#email");
let passInput = document.querySelector("#pass");

let allUsers ;

if(localStorage.getItem("users") == null){
allUsers = [];
}
else
{
allUsers = JSON.parse(localStorage.getItem("users"));
}

function signIn(){
let flag = false;
for (let i = 0; i < allUsers.length; i++)
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
{
if(allUsers[i].email == emailInput.value && allUsers[i].pass == passInput.value){
flag = true;
// ‫عشان اخد اسم اليوزر اللى عامل لوجن عشان اقدر اظهرو بعدين في صفحة الهوم‬
localStorage.setItem("currentUserName", allUsers[i].name);
break;
}
}
if(flag){
window.location.href = "home.html";
}
else{
alert("this email is not exist")
}
}
‫ بتاعت التنقل بين‬security ‫ واعمل ال‬logout ‫ وزرار ال‬home ‫بعد كدا هكون محتاج اظهر اسم اليوزر في صفحة ال‬
.‫الصفحات‬
<!-- in Home HTML -->
<h1 class="text-info text-center my-5" id="userName">Welcome Home</h1>
<button class="btn btn-danger" onclick="logout()">logout</button>

// in Home JavaScript
// ‫هعمل شرط عشان اقوله لو الكرنت يوزر اللى انا انشأته شايل داتا اظهرلي اسم اليوزر اللى عمل تسجيل دخول‬
if(localStorage.getItem("currentUserName") != null){
let userName = localStorage.getItem("currentUserName") // ‫عملت متغير بس عشان يشيلي اسم‬
‫اليوزر اللى عمل تسجيل دخول‬
document.querySelector("#userName").innerHTML = "Welcome " + userName +" from
Home"
}
else{ // ‫هقوله فى حالة ان الكرنت يوزر نيم اللى ف االستوردش فاضي خليني دائما على صفحة تسجيل الدخول‬
window.location.href = "signin.html";
}

function logout(){
localStorage.removeItem("currentUserName"); // ‫بقوله امسحلى اسم اليوزر من االستوردج عشان‬
‫السكيورتي النه مترتب على الشرط السابق‬
window.location.href = "signin.html";
}

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
‫‪Filter, Map, reduce, destructing‬‬
‫عملتهملنا ال ‪ ES6‬عشان تسهل علينا حياتنا بدل الكود الكبير اللى كنا بنعملها عشان نعمل مهام كل واحدة فيهم وتعال نتكلم‬
‫عنهم‪.‬‬
‫‪Filter‬‬
‫ودي بتتعامل مع ال ‪ Array‬في حالة لو انا عايز اقوله رجعلي من االراي كل االرقام اللى اكبر من كذا ودي بتأخد فانكشن‬
‫بترجعلي حاجة‪.‬‬
‫;]‪let empsSalaries = [1000,5000,3000,2000,7000‬‬
‫;)‪let more5000 = empsSalaries.filter(hamada => hamada >= 5000‬‬
‫]‪console.log(more5000); // [5000, 7000‬‬
‫‪Map‬‬
‫ودي زي الفلتر بالظبط ولكن بستخدمها لو عايز اعمل عملية حسابية علي كل عنصر من عناصر ال ‪ array‬على حدى‪.‬‬
‫;]‪let empsSalaries = [1000,5000,3000,2000,7000‬‬
‫;)‪let Bones = empsSalaries.map(hamada => hamada + 300‬‬
‫]‪console.log(Bones); // [1300, 5300, 3300, 2300, 7300‬‬
‫‪Reduce‬‬
‫ودي زيهم ومعناها بيقلل ومن خاللها اقدر اشاور على اليمنت اليمنت في االراي وال ‪ reduce‬بتأخد ‪parameter 2‬‬
‫وهما ‪ .1‬الفانكشن ‪ .2‬االنشيال فاليو او القيمة المبدأية اللى هيبدأ بيها ولو مقولتلوش قيمة مبدأية هو هيعتبرها صفر‬
‫والفانكشن بتاعتها بتأخد ‪ .parameter 2‬اول براميتر بيشيل ناتج العملية الحسابية اللى انا بنفذها والبرامتر التاني‬
‫بيشاورلي علي االليمنت الموجود فى االراي بتاعى‪ ...‬مثال لو انا عايز احسب اجمالى مرتبات الموظفين‪.‬‬
‫;]‪let empsSalaries = [1000,5000,3000,2000,7000‬‬
‫{)‪let totalSalaries = empsSalaries.reduce(function(x, hamada‬‬
‫لو عملنا تريس للكود هتالقي في البداية قيمة االكس بصفر وحمادة هيشاور على ‪ 1000‬ف ‪return x + hamada //‬‬
‫الناتج ‪ 1000‬وهكذا‪...‬‬
‫;)}‬
‫‪console.log(totalSalaries); // 18000‬‬
‫لو قولتله عايز القيمة المبدأية بتاعتك تكون ‪ 500‬وبعد كدا زود االرقام الموجودة فى االراي ‪; // another Example‬‬
‫;]‪let empsSalaries = [1000,5000,3000,2000,7000‬‬
‫{)‪let totalSalaries = empsSalaries.reduce(function(x, hamada‬‬
‫‪return x + hamada‬‬
‫;)‪} , 500‬‬
‫‪console.log(totalSalaries); // 18000‬‬
‫‪destructing‬‬
‫معناها بالعربي تفتيت او تجزئة وممكن نستخدمها مع ال ‪ Array‬او ‪ object‬واهميتها واستخدمها هيبانو اكتر مع ال‬
‫‪.react.js‬‬
‫;]‪let empsSalaries = [1000,5000,3000,2000,7000‬‬
‫‪let [x,y] = empsSalaries‬‬
‫‪console.log(x); // 1000‬‬
‫‪console.log(y); // 5000‬‬

‫{ = ‪let users‬‬
‫‪uName : "Ahmed",‬‬
‫‪uAge : 27,‬‬
‫‪uNumber : 1155023528‬‬
‫}‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫‪let {uName,uAge} = users‬‬
‫‪console.log(uName); // Ahmed‬‬
‫‪console.log(uAge); // 27‬‬
‫‪Map‬‬
‫ودي ملهاش عالقة باللى فوق دا تشابه اسماء فقط ‪ ,‬و ‪ Map‬دي اخت ال ‪ object‬وعملوها لينا فى ال ‪.ES6‬‬
‫هو نوع بيانات جديد في ‪ ECMAScript 6‬بيخلينا نخزن البيانات كـ أزواج من مفاتيح وقيم)‪ ، (key-value pairs‬زي‬
‫الـ‪ ، Object‬لكن مع شوية مميزات ومرونة أكتر‪.‬‬

‫أهمية واستخدامات‪new Map():‬‬


‫‪ .1‬تخزين األزواج (‪ :)Key-Value Pairs‬الفرق بين الـ ‪ Map‬والـ ‪ Object‬إن الـ ‪ Map‬بيسمحلك تستخدم أي‬
‫نوع من البيانات كـ مفتاح (مش بس ‪ strings‬أو ‪ .)symbols‬يعني ممكن تحط أرقام‪ ،‬كائنات (‪ ،)objects‬أو‬
‫حتى ‪ functions‬كمفاتيح‪ .‬مثال‬
‫;)(‪let myMap = new Map‬‬
‫;)"‪myMap.set(1, "one‬‬
‫;)"‪myMap.set("2", "two‬‬
‫;)"‪myMap.set(true, "bollen Value‬‬

‫"‪ "one‬هترجع ‪console.log(myMap.get(1)); //‬‬


‫"‪ "two‬هترجع ‪console.log(myMap.get("2")); //‬‬
‫"‪ "bollen Value‬هترجع ‪console.log(myMap.get(true)); //‬‬
‫‪ .2‬الحفاظ على ترتيب اإلدخال ‪:‬على عكس الـ‪ ، Object‬اللي مبيحفظش بالضرورة ترتيب إدخال األزواج‪ ،‬الـ ‪Map‬‬
‫بيحافظ على ترتيب المفاتيح زي ما أدخلتها بالضبط‪ .‬فلو عايز تعمل ‪ structure‬مرتب وسهل تتبع إدخال‬
‫البيانات‪Map ،‬بيكون اختيار كويس‪ .‬مثال‬
‫;)(‪let orderedMap = new Map‬‬
‫;)"‪orderedMap.set(3, "three‬‬
‫;)"‪orderedMap.set(1, "one‬‬
‫;)"‪orderedMap.set(2, "two‬‬
‫بيحافظ على الترتيب ‪//‬‬
‫{ >= )‪orderedMap.forEach((value, key‬‬
‫;)‪console.log(key, value‬‬
‫;)}‬
‫‪ .3‬التعامل مع المفاتيح المعقدة ‪:‬في الـ ‪Map‬ممكن تستخدم كائنات )‪ (Objects‬أو ‪ Functions‬كمفاتيح‪ ،‬وده مش‬
‫ممكن في الـ ‪ Object‬العادي‪.‬‬
‫;} "‪let objKey = { name: "Ahmed‬‬
‫;} ;"‪let funcKey = function() { return "hello‬‬

‫;)(‪let myMap = new Map‬‬


‫;)"‪myMap.set(objKey, "this is object key‬‬
‫;)"‪myMap.set(funcKey, "this is object key‬‬

‫"‪ "this is object key‬هترجع ‪console.log(myMap.get(objKey)); //‬‬


‫"‪ "this is function key‬هترجع ‪console.log(myMap.get(funcKey)); //‬‬
‫‪ .4‬حجم الـ ‪ Map‬سهل الحساب ‪:‬تقدر تعرف حجم الـ ‪Map‬بسهولة باستخدام ‪ ،size‬على عكس الـ ‪ Object‬اللي‬
‫ممكن يسبب لك لخبطة لو عاوز تعرف عدد األزواج اللي فيه‪.‬‬
‫;)(‪3. let myMap = new Map‬‬
‫‪4.‬‬
‫;)"‪5. myMap.set(1, "one‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫;)"‪6. myMap.set("2", "two‬‬
‫هترجع ‪7. console.log(myMap.size); // 2‬‬
‫‪ .5‬سهولة التكرار ‪ (Iteration):‬الـ ‪Map‬عندها طرق مدمجة للتكرار على األزواج بسهولة‪ ،‬زي ‪ for Each‬و‬
‫‪ ،for...of‬وده بيسهل التعامل مع البيانات‪.‬‬
‫;)(‪let myMap = new Map‬‬
‫;)"‪myMap.set(1, "one‬‬
‫;)"‪myMap.set(2, "two‬‬

‫{ )‪for (let [key, value] of myMap‬‬


‫;)‪console.log(key, value‬‬
‫}‬
‫‪// use get, delete and clear with Map‬‬
‫;)(‪let myMap = new Map‬‬
‫;)"‪myMap.set(1, "one‬‬
‫;)"‪myMap.set(2, "two‬‬

‫‪console.log(myMap.get(1)); // one‬‬
‫لو قولتله هاتلي الماي ماب الناتج هيكون المفتاح اللى اسمه ‪ 2‬بس >> ‪console.log(myMap.delete(1)); // true‬‬
‫اللى هيجي‬
‫لحذف االوبجكت كله بقا ‪console.log(myMap.clear); //‬‬

‫مميزات ‪Map‬عن الـ‪Object:‬‬


‫• المرونة في المفاتيح ‪:‬في الـ ‪Map‬تقدر تستخدم أي نوع من البيانات كمفتاح‪ ،‬في حين إن الـ ‪ Object‬الزم‬
‫المفاتيح تكون ‪ strings‬أو‪symbols.‬‬
‫• الترتيب ‪:‬الـ ‪Map‬بتحافظ على ترتيب إدخال األزواج‪ ،‬على عكس الـ‪Object.‬‬
‫• سهولة الحساب ‪:‬عندك ‪size‬مباشرة تعرف عدد العناصر في الـ ‪Map.‬‬
‫• تكرار أفضل ‪:‬طرق التكرار في الـ ‪Map‬أسهل وأوضح من الـ‪Object.‬‬
‫متى تستخدم ‪Map‬؟‬
‫• لو عايز تخزن بيانات بأزواج )‪ (key-value‬ومحتاج تستخدم أنواع مختلفة من المفاتيح( مش بس‪strings).‬‬
‫• لو بتحتاج تحافظ على ترتيب اإلدخال‪.‬‬
‫• لو بتحتاج سهولة وسرعة في التكرار وحساب حجم البيانات‪.‬‬
‫• في النهاية‪ ،‬الـ ‪Map‬هي خيار ممتاز لما تكون محتاج حاجة أكتر مرونة من الـ ‪ Object‬التقليدي في‬
‫‪JavaScript.‬‬
‫‪Set‬‬
‫ودي اخت ال ‪ Array‬وال ‪ Set‬نوع بيانات بيخلينا نخزن مجموعة من القيم‪ ،‬والميزة الرئيسية ليه إنه مينفعش يكون فيه‬
‫قيم مكررة‪ ،‬يعني أي قيمة بتحطها في الـ ‪Set‬بتكون فريدة‪.‬‬

‫أهمية واستخدامات ‪new Set():‬‬


‫‪ .1‬تخزين القيم الفريدة ‪:‬أكبر ميزة للـ ‪Set‬هي إنه بيضمن إن مفيش أي قيمة تتكرر‪ .‬يعني لو عندك بيانات وعايز‬
‫تتأكد إن مفيش داتا مكررة‪ ،‬استخدم ‪ .Set.‬حتى لو حاولت تضيف نفس القيمة أكتر من مرة‪ ،‬الـ ‪ Set‬هيحتفظ بيها‬
‫مرة واحدة بس‪ .‬مثال‬
‫;)(‪let mySet = new Set‬‬
‫;)‪mySet.add(1‬‬
‫;)‪mySet.add(2‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫مش هيتضاف تاني ألنه موجود بالفعل ‪mySet.add(2); //‬‬
‫}‪ {1, 2‬هتالقيه ‪console.log(mySet); //‬‬
‫‪ .2‬إزالة التكرارات من ‪ Array:‬لو عندك ‪ array‬فيه قيم مكررة وعايز تشيل التكرارات‪ ،‬ممكن بسهولة تحول الـ‬
‫‪array‬لـ ‪ ،Set‬واللي هيضمنلك إن كل القيم تكون فريدة‪.‬‬
‫;]‪let myArray = [1, 2, 2, 3, 4, 4, 5‬‬
‫;)‪let uniqueSet = new Set(myArray‬‬
‫}‪ {1, 2, 3, 4, 5‬هتالقيه ‪console.log(uniqueSet); //‬‬
‫بعد كدا لو عايز ترجع ال سيت الى اراي تاني عندى طريقتين وهما ‪//‬‬
‫‪// 1.‬‬
‫)‪myArray = Array.from(uniqueSet‬‬
‫]‪console.log(myArray); // [1, 2, 3, 4, 5‬‬
‫‪// 2.‬‬
‫;]‪let uniqueArray = [...uniqueSet‬‬
‫]‪console.log(uniqueArray); // [1, 2, 3, 4, 5‬‬

‫التعامل مع الـ ‪ Sets‬بشكل فعال ‪:‬الـ ‪Set‬عنده شوية عمليات مفيدة زي ‪ ،delete ،add‬و ‪has‬اللي بتساعدك تدير‬ ‫‪.3‬‬
‫البيانات بسهولة‪.‬‬
‫;)‪mySet.add(3‬‬
‫‪ Set‬يشيل ‪ 2‬من الـ ‪mySet.delete(2); //‬‬
‫للتحقق من وجود قيمة ‪//‬‬
‫لو ‪ 1‬موجود ‪ true‬هترجع ‪console.log(mySet.has(1)); //‬‬
‫التكرار )‪ (Iteration‬على الـ ‪ Set:‬زي ما تقدر تتعامل مع‪ ، arrays‬تقدر كمان تتعامل مع ‪Set‬بالتكرار عليها‪،‬‬ ‫‪.4‬‬
‫سواء باستخدام ‪forEach‬أو ‪for...of.‬‬
‫;)]‪let mySet = new Set([1, 2, 3‬‬
‫{ )‪for (let value of mySet‬‬
‫هيطبع القيم ‪console.log(value); // 3 ،2 ،1‬‬
‫}‬
‫حجم الـ ‪ Set:‬عشان تعرف عدد العناصر في الـ ‪ ،Set‬ممكن ببساطة تستخدم ‪size:‬‬ ‫‪.5‬‬
‫;)]‪let mySet = new Set([1, 2, 3‬‬
‫هترجع ‪console.log(mySet.size); // 3‬‬
‫االتحاد والفرق والتقاطع بين مجموعات‪ :‬لو عندك أكتر من ‪ ،Set‬ممكن تعمل عمليات زي االتحاد (‪ )Union‬أو‬ ‫‪.6‬‬
‫التقاطع (‪ )Intersection‬بينهم باستخدام شوية تقنيات بسيطة‪.‬‬
‫• االتحاد (‪ :)Union‬عشان تضم القيم كلها من مجموعتين‪:‬‬
‫;)]‪let setA = new Set([1, 2, 3‬‬
‫;)]‪let setB = new Set([3, 4, 5‬‬

‫;)]‪let union = new Set([...setA, ...setB‬‬


‫}‪console.log(union); // {1, 2, 3, 4, 5‬‬
‫• لتقاطع ‪ (Intersection):‬عشان تجيب القيم المشتركة بين مجموعتين‪:‬‬
‫;)))‪let intersection = new Set([...setA].filter(x => setB.has(x‬‬
‫}‪console.log(intersection); // {3‬‬
‫• الفرق ‪ (Difference):‬عشان تجيب القيم اللي موجودة في مجموعة ومش موجودة في التانية‪:‬‬
‫;)))‪let difference = new Set([...setA].filter(x => !setB.has(x‬‬
‫}‪console.log(difference); // {1, 2‬‬
‫مميزات ‪Set:‬‬
‫• عدم تكرار القيم ‪:‬بيضمنلك إن مفيش قيم مكررة‪.‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫• سهولة التكرار والحساب ‪:‬عندك دوال جاهزة للتعامل مع القيم‪ ،‬ومعرفة حجم الـ ‪Set‬بسهولة‪.‬‬
‫• أداء أفضل مع البيانات الفريدة ‪:‬الـ ‪Set‬بيشتغل بشكل أسرع من الـ ‪Array‬لما يكون الهدف التعامل مع‬
‫القيم الفريدة‪.‬‬
‫متى تستخدم ‪Set‬؟‬
‫• لما تكون محتاج تخزن قيم فريدة ومش عاوز تكرار‪.‬‬
‫• لما يكون عندك بيانات وعايز تشيل منها التكرارات بسهولة‪.‬‬
‫• لما تكون عايز تعمل عمليات رياضية زي االتحاد أو التقاطع بين مجموعات بيانات‪.‬‬
‫• الـ ‪Set‬بيخليك تتعامل مع البيانات بشكل فعال لما يتعلق األمر بالقيم الفريدة‪.‬‬

‫‪Jquery.js‬‬
‫‪ jQuery.js‬دي مكتبة (‪ JavaScript )library‬جاهزة بتسهل عليك شغل كتير وانت بتكتب كود‪ .‬بدل ما تكتب أكواد‬
‫طويلة ومعقدة عشان تعمل حاجات زي التعامل مع عناصر الصفحة‪ ،‬أو إنك تخلي الزرار يعمل حاجة لما تدوس عليه‪،‬‬
‫‪ jQuery‬بتختصرلك كل ده في كود بسيط وسهل‪ .‬يعني بتساعدك تعمل حاجات بسرعة وبسهولة من غير وجع دماغ‪.‬‬
‫وبتدخل على ال ‪ site‬بتاعهم ) ‪(https://jquery.com/download/‬وتنزلها وبتتعامل معاها زي اي ‪ library‬بتتعامل‬
‫معاها زي ال ‪ bootstrap‬كدا مثالوهتالقي لينكات كتيرة مكبرين الموضوع اوي يعني ف انت هتنزلها من اللينك دا‬
‫‪https://code.jquery.com/jquery-3.7.1.js‬‬
‫هيفتحلك صفحة هتدوس ‪ right click‬علي اي مكان فاضي وهتختار ‪ save as‬وتختار مكان الحفظ بقا‪ .‬وطريقة ربطها‬
‫زي اي ملف ‪.js‬‬

‫وعشان تستخدم ال ‪ jQuery‬في ال ‪ JS‬الزم انادي ال ‪ jQuery‬بتاعتي ودا بيكون عن طريق فانكشن الدوالر ساين )(‪$‬‬
‫ودي بتبدأ تأخد مني ال ‪ element‬اللى عايز اشتغل عليه وبترجعلي كل ال ‪ built in function‬اللى عندها‪.‬‬
‫وبتساعدك انك تتعامل مع ال ‪ events‬بكل سهولة عن طريق انك بترمي ال ‪ event‬ع طول بعد ما بتنادي على ال‬
‫‪element‬‬
‫)}{)(‪ $(button).click(function‬وميزتها ان هي بتتعامل مع اكتر من اليمين يعنى اي زرار موجود لو دوست عليه‬
‫هينفذ الفانكشن‪.‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫ولو شغلت دماغك وشيلت ال ‪ $‬الكود بتاعك مش هيشتغل‬ ‫‪-‬‬
‫ممكن تبدل ال ‪ $‬بكلمة ‪ jQuery‬بس احنا فى العادي بنستخدم ال ‪.$‬‬ ‫‪-‬‬
‫‪jQuery Effects‬‬
‫{)(‪$("button").click(function‬‬
‫التبديل ‪$(".test").toggle(2000) // toggle‬‬
‫)}‬
‫{)(‪$("button").click(function‬‬
‫هتخفي الديف فقط ‪$(".test").hide(2000) //‬‬
‫)}‬
‫{)(‪$("button").click(function‬‬
‫بتظهر الديف فقط ‪$(".test").show(2000) //‬‬
‫)}‬
‫{)(‪$("button").click(function‬‬
‫بتظهر الديف عن طريق االوباستي ‪$(".test").fadeIn(2000) //‬‬
‫)}‬
‫{)(‪$("button").click(function‬‬
‫بتظهر الديف عن طريق االوباستي ‪$(".test").fadeOut(2000) //‬‬
‫)}‬
‫{)(‪$("button").click(function‬‬
‫بتبدل في اظهار واخفاء الديف عن طريق االوباستي ‪$(".test").fadeToggle(2000) //‬‬
‫)}‬
‫{)(‪$("button").click(function‬‬
‫الفيد بيتراوح من ‪ 0‬اوباستي ل ‪ 1‬اوباستي فهنا بقا لو انا عايز االوباستي ‪$(".test").fadeTo(2000 , 0.5) //‬‬
‫يتراوح للنص ‪0.5‬‬
‫وبكدا هي هتخفي الديف في ثانيتين لحد نص اوباستي يعني هيبقا ظاهر سيكا كدا جربها هتفهم اكتر ‪}) //‬‬
‫{)(‪$("button").click(function‬‬
‫دي لو الديف مخفي وانت عايز تظهره بس طريقة االظهار هتكون على شكل ‪$(".test").slideDown(2000) //‬‬
‫ساليد كدا بيتسحب كدا‬
‫)}‬
‫{)(‪$("button").click(function‬‬
‫دي لو الديف ظاهر وانت عايز تخفي بس طريقة االخفاء هتكون على شكل ساليد ‪$(".test").slideUp(2000); //‬‬
‫كدا بيتسحب كدا‬
‫)}‬
‫{)(‪$("button").click(function‬‬
‫دي لو الديف ظاهر وانت عايز تخفي وتظهره على شكل ساليد بيتسحب كدا‪$(".test").slideToggle(2000); //‬‬
‫)}‬
‫دا مصطلح عام بيعبر عن لو انا عايز انفذ اكثر من افيكت على نفس االليمنت ‪// Chaining‬‬
‫{)(‪$("button").click(function‬‬
‫;)‪$(".test").slideUp(2000).fadeIn(1000).show(1000‬‬
‫)}‬
‫الجيكوري لو انت قولتله لما ادوس على الزرار اعمل ساليد اب ل ايلمنت واعمل فيد ان ل ايلمنت تاني بس هنا االتنين‬
‫اليمنت هيشتغلو مع بعض مفيش حد هيستنا التاني النهم سينكروننس وعشان احول من سينكروننس ل اسينكروننس‬
‫هستخدم الطرق اللى شرحناها قبل كدا‬
‫لكن الجيكوري سهلت علينا كل دا وقالتلك ان االيفيكت بتاعى بيأخد ‪ 2‬براميتر واحد خاص بالمدة المستغرقة في تنفيذ‬
‫االليمنت والتانى بيقولك انه بياخد كول باك فانكشن عشان لو عايز تنفذ حاجة بعديا بالشكل التالى‬
‫{)(‪$("button").click(function‬‬
‫{)(‪$(".test").slideUp(2000 , function‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫;)})‪$(".demo").fadeOut(2000‬‬
‫)}‬
‫)(‪ css‬الجيكوري عندها فانكشن اسمها سي اس اس بتساعدني على التعامل مع ال سي اس اس وممكن اكلمها بطريقتين‬
‫ممكن امرر ليها الحاجة اللى انا عايز اعملها بالشكل التالى‬
‫{)(‪$("button").click(function‬‬
‫;)"‪$(".test").css("background-color" , "tomato‬‬
‫)}‬
‫وممكن امرر ليها الحاجة اللى انا عايز اعملها على شكل اوبجكت في حالة انى لو عايز انفذ اكثر من امر مثال‬
‫{)(‪$("button").click(function‬‬
‫;)}‪$(".test").css({backgroundColor :"tomato" , width:800‬‬
‫)}‬
‫تمام كدا طب لو انا عايز ال ‪ css‬دا بيتنفذ اسموزي يعني يأخد وقت ف التنفيذ ف انا عندي فانكشن اسمها ‪ animate‬زي‬
‫ال ‪ css‬بالظبط بس دي بتأخد ‪ 2‬براميتر واحد خاص باوبجكت خصائص ال ‪ css‬والبراميتر التاني بحطلو الوقت‬
‫المستغرق بس هي مبتشتغلش مع االلوان الن االنيميت بتلعب فى التدرج وااللوان هنا معندهاش تدرج‬
‫{)(‪$("button").click(function‬‬
‫;)‪$(".test").animate({backgroundColor :"tomato" , width:800},2000‬‬
‫)}‬
‫{)(‪$("button").click(function‬‬
‫)‪$(".test").animate( { width : "800px" } , 1000).animate( { height : "800px" } , 1000‬‬
‫)}‬
‫طيب لو انا عايز اقوله زود على ال ‪ width‬بتاعك مثال مثال ايا كان ايه هو ودا على اي حاجة غير ال ‪ width‬زي ال‬
‫‪..height‬‬
‫{)(‪$("button").click(function‬‬
‫;)‪$(".test").animate({backgroundColor :"tomato" , width:"+=200"},2000‬‬
‫)}‬
‫وفي حاجة عندى حلوة اوي ممكن احط كلمة ‪ toggle‬كفاليو لبروبرتي ال ‪ width‬ومن خاللها لما ادوس ع الزرار اقدر‬
‫ابدل مثال‪.‬‬
‫{)(‪$("button").click(function‬‬
‫;)‪$(".test").animate({backgroundColor :"tomato" , width:"toggle"},2000‬‬
‫)}‬
‫في تاسكايه بسيطة وهي ان عندي ‪ 2‬زرار واحد بيشغل االنيميشن واالنيميشن دا عبارة عن ‪ 3‬انيميشن بيتنفذو على ال‬
‫‪ element‬والزرار التاني دا بيوقف االنيميشن ودا بيتم عن طريق فانكشن اسمها )(‪ stop‬والفانكشن دي بتأخد ‪ 2‬براميتر‬
‫من النوع ‪Boolean‬والديفولت بتاعهم ‪ false‬يعنى لو سبت القوسين فاضيين ف البراميتر االول لو قولتله ‪ true‬ف كدا‬
‫انت بتقوله وقفلي كل االنيميشن ‪ stop all‬اما البراميتر التاني لو قولتله ‪ true‬ف كدا انت بتقوله كمل االنيميشن الحالى‬
‫اللى شغال واقف ‪ .go to end‬مثال‬
‫{ )( ‪$(".btn-info").click(function‬‬
‫)‪$(".test").animate({width:"800px"} , 1000‬‬
‫)‪$(".test").animate({height:"800px"} , 1000‬‬
‫)‪$(".test").animate({borderRadius:"50%"} , 1000‬‬
‫;)}‬
‫{ )( ‪$(".btn-danger").click(function‬‬
‫اكنك قايله فولس وفولس ففى الحالة دي هيقف ف المكان اللى قولتله استوب في وهيكمل للنهاية ‪//‬‬
‫)‪$(".test").stop(); // (false , false‬‬
‫كدا هيوقف االنيميشن خالص ‪// $(".test").stop(true , false); //‬‬
‫كدا هيوقف االنيميشن اللى شغال وهيديله القيمة النهائية بتاعته ويكمل باقي االنيميشن التانيين ‪//‬‬
‫;)‪// $(".test").stop(false , true‬‬
‫كدا هيوقف االنيميشن اللى شغال وهيديله القيمة النهائية بتاعته وهيوقف باقي االنيميشن التانيين ‪//‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
// $(".test").stop(true , true);
});
‫تعال تسكايه تانيه جميلة وهي الديزين بتاعى حركة روشة للعميل وهي اني السيكشن يظهرله اكنه بيتكون قدامه ف يال بينا‬
.‫نعمله‬
<!-- in HTML Model -->
<section class="model bg-dark">
<div class="container">
<h1 class="text-white text-center">Lorem ipsum dolor sit amet.</h1>
<div class="row g-4">

<div class="col-md-4 card1">


<div class="position-relative item">
<img src="images/portfolio-3.jpg" class="w-100 itemImage" alt="">
<div class="layer">
<h5>item1</h5>
<p>Click on Image to PopUp it.</p>
</div>

</div>
</div>

<div class="col-md-4 card2">


<div class="position-relative item ">
<img src="images/portfolio-4.jpg" class="w-100 itemImage" alt="">
<div class="layer">
<h5>item2</h5>
<p>Click on Image to PopUp it.</p>
</div>

</div>
</div>

<div class="col-md-4 card3">


<div class="position-relative item">
<img src="images/portfolio-1.jpg" class="w-100 itemImage" alt="">
<div class="layer">
<h3>item3</h5>
<p>Click on Image to PopUp it.</p>
</div>

</div>
</div>

<div class="col-md-4 card4">


<div class="position-relative item">
<img src="images/portfolio-3.jpg" class="w-100 itemImage" alt="">
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
<div class="layer">
<h5>item1</h5>
<p>Click on Image to PopUp it.</p>
</div>

</div>
</div>

<div class="col-md-4 card5">


<div class="position-relative item ">
<img src="images/portfolio-4.jpg" class="w-100 itemImage" alt="">
<div class="layer">
<h5>item2</h5>
<p>Click on Image to PopUp it.</p>
</div>

</div>
</div>

<div class="col-md-4 card6">


<div class="position-relative item">
<img src="images/portfolio-1.jpg" class="w-100 itemImage" alt="">
<div class="layer">
<h3>item3</h5>
<p>Click on Image to PopUp it.</p>
</div>

</div>
</div>

</div>

</div>
</section>

/* In CSS */
.model{
width: 50px;
height: 10px;
}
.col-md-4 , h1{
display: none;
}

// in JavaScript
$(".model").animate({width:"100%"},2000);
$(".model").animate({height:"100vh"},2000, function(){
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
$("h1").fadeIn(2000 , function(){
$(".card1").slideDown(2000 , function(){
$(".card2").slideDown(2000 , function(){
$(".card3").slideDown(2000, function(){
$(".card4").slideDown(2000 , function(){
$(".card5").slideDown(2000 , function(){
$(".card6").slideDown(2000)
})
})
})
});
});
})
});
Getters & Setters in JQ
‫ ولو عايز اعدل على‬Getter ‫ عن طريق ال‬html ‫ من خالل اني اجيب الداتا من ال‬html ‫من خاللهم اقدر اتعامل مع ال‬
‫ هما مصطلحات وليس فانكشن مصطلح للنطق‬Getter , Setter ‫ وال‬Setter ‫ بيكون عن طريق ال‬html ‫حاجة فى ال‬
‫يعني مثال‬
<-- in HTML -->
<h1>Lorem ipsum dolor sit amet.</h1>
// Getter
console.log($("h1").html()); // Lorem ipsum dolor sit amet.

// Setter // in console and in window


console.log($("h1").html("Hello from Setter")); // Hello from Setter.
.text ‫ولو عايز اقوله هاتلي التيكست او غيرلي التيكست الموجود اللى داخل االسكوب اللى انا امل عليه سليكت هستخدم‬
// Getter
console.log($("h1").text()); // Lorem ipsum dolor sit amet.

// Setter // in console and in window


console.log($("h1").text("Hello from Setter text")); // Hello from Setter text.
‫ وهي لو انت عايز تجيب داتا او تحط داتا كفاليو‬.val ‫بعد كدا عندنا حاجة مشهورة اوي فى استخدمها وهي فانكشن اسمها‬
‫ مثال‬document.getelementbyid().value = 100. ‫في انبوت زي ما كنا بنسليكت زمان عن طريق‬
<-- in HTML -->
<input type="text" class="form-control" id="name" value="Ahmed">
// Getter
console.log($("input").val()); // Ahmed.

// Setter // in console and in window


console.log($("input").val("Hello from Setter val")); // Hello from Setter val.
key, ‫ وبتأخد مني حاجتين‬attr() ‫ بتاعي عن طريق فانكشن اسمها‬element ‫وعندنا لو انا عايز اضيف اتربيوت في ال‬
‫ مثال‬value
<-- in HTML -->
<h1>Lorem ipsum dolor sit amet.</h1>
// Getter
console.log($("img").attr("src")); // )‫كدا بقوله هاتلي السورس بتاع الصورة (هاتلى الفاليو بتاعت االتربيوت دا‬
$(".test").css("background-color"); // )‫(هاتلى الفاليو بتاعت الباك جروند‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
// Setter
console.log($("h1").attr("id" , "demo")); // in element section see in body section
<h1 id="demo">Lorem ipsum dolor sit amet.</h1>.
‫) بتجيبلي العرض الفعلي بتاعه وخد‬width( element ‫عندنا حاجة تانيه بنستخدمها فى حالة انى لو عايز اجيب ابعاد‬
‫ مثال‬.‫ الفعلي هيجي اقل الن البوتستراب بتستخدم البوكس سايزينج‬width ‫بالك لو انت مستخدم بوتستراب ال‬
<-- in HTML -->
<h1 class="test">Lorem ipsum dolor sit amet.</h1>
// in CSS
.test{
width: 300px;
height: 300px;
background-color: teal;
}
// in JavaScript
console.log($(".test").width()); // 300.
‫ يجيبو معاه من اليمين والشمال هستخدم فانكشن‬padding ‫ واخد‬element ‫طيب في حالة اني لو عايز اقوله لو ال‬
.‫ مثال‬innerWidth
// in HTML
<h1 class="test">Lorem ipsum dolor sit amet.</h1>
// in CSS
.test{
padding: 100px;
margin: 100px;
width: 300px;
height: 300px;
background-color: teal;
}
// in JavaScript
console.log($(".test").innetWidth()); // 500.
‫ مثال‬. outerWidth ‫انما لو عايز اقوله هاتلي البادينج والبوردر والويدز هستخدم فانكشن اسمها‬
<-- in HTML -->
<h1 class="test">Lorem ipsum dolor sit amet.</h1>
// in CSS
.test{
padding: 100px;
margin: 100px;
width: 300px;
height: 300px;
background-color: teal;
border: 5px solid tomato;
}
// in JavaScript
console.log($(".test").outerWidth()); // 510.
.true ‫ كلمة‬outerWidth ‫طب لو عايز اجيب الويدز والبادينج والمارجين والبورد هقوله فى البراميتر بتاع ال‬
<-- in HTML -->
<h1 class="test">Lorem ipsum dolor sit amet.</h1>
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
// in CSS
.test{
padding: 100px;
margin: 100px;
width: 300px;
height: 300px;
background-color: teal;
border: 5px solid tomato;
}
// in JavaScript
console.log($(".test").outerWidth(true)); // 710. // ‫ كل اللى فوق ينفع نطبقه على ال‬height
‫ ونحط في داتا زيادة على الداتا الموجودة ودا عن طريق ال‬element ‫نيجي ل اهم حاجة بقا وهي اني عايز امسك ال‬
.‫ مثال‬prepend ‫ ودي بتضيف من االخر ولو عايز اضيف في االول عن طريق‬append
<div class="bg-danger">
<h1>Lorem ipsum</h1>
</div>

$("div").append("<div>Ahmed</div>"); // <h1>Lorem ipsum</h1> Ahmed


$("div").prepend("<div>Ahmed</div>"); // Ahmed <h1>Lorem ipsum</h1>
‫ هستخدم فانكشن‬element ‫ ولو عايز اضيفه بعد ال‬before ‫ هستخدم فانكشن‬element ‫طب لو عايز اضيف قبل ال‬
‫ مثال‬.before
<div class="bg-danger">
<h1>Lorem ipsum</h1>
</div>

$("div").before("<div>Ahmed</div>");
$("div").after("<div>Ahmed</div>");

.‫تعال بقا نعمل تاسكايه لذيذة كدا وهي اعمل ساليد من الصور ولما ادوس على صورة يظهرها فوق زي االسكرين التالي‬

<div class="container">
<div class="d-flex justify-content-center col-12">
<img src="images/1.jpg" alt="" width="50%" class="baseImg">
</div>
<div class="d-flex justify-content-between col-3 groupImages">
<img src="images/0.jpeg" alt="" class="img-fluid img1">
<img src="images/2.jpg" alt="" class="img-fluid">
<img src="images/3.jpg" alt="" class="img-fluid">
<img src="images/4.jpg" alt="" class="img-fluid">
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
‫>‪</div‬‬
‫>‪</div‬‬

‫{)(‪$(".groupImages img").click(function‬‬
‫;)"‪let currentImage = $(this).attr("src‬‬
‫;)‪$(".baseImg").attr("src" , currentImage‬‬
‫)}‬
‫‪Traversing in JQ‬‬
‫وهو ان انا ازاي اتفسح في كود ال ‪ html‬بداللة حاجة معينة يعني مثال بتستخدم عشان تتحرك أو تتنقل بين عناصر الـ‬
‫‪(DOM‬هيكل الصفحة بتاعتك)‪ .‬يعني لو عندك عناصر متعلقة ببعض زي األب )‪ (parent‬واألوالد )‪ (children‬أو‬
‫اإلخوات)‪ ، (siblings‬تقدر توصل ألي عنصر في الشجرة دي بسهولة باستخدام الـ‪traversing.‬‬

‫خلينا نوضح الموضوع بأمثلة بسيطة‪:‬‬


‫>‪<-- in HTML --‬‬
‫>"‪<div class="container‬‬
‫>"‪<div class="d-flex justify-content-center col-12‬‬
‫>"‪<img src="images/1.jpg" alt="" width="50%" class="baseImg‬‬
‫>‪</div‬‬
‫>"‪<div class="d-flex justify-content-between col-3 groupImages‬‬
‫>"‪<img src="images/0.jpeg" alt="" class="img-fluid img1‬‬
‫>"‪<img src="images/2.jpg" alt="" class="img-fluid‬‬
‫>"‪<img src="images/3.jpg" alt="" class="img-fluid" class="demo‬‬
‫>"‪<img src="images/4.jpg" alt="" class="img-fluid‬‬
‫>‪</div‬‬
‫>‪</div‬‬
‫‪// in JavaScript‬‬
‫هيعمل بوردر على الصورة اللى بعد صورة ‪$("#demo").next().css("border" , "5px solid tomato"); //‬‬
‫الديمو‬
‫هيعمل بوردر على الصورة اللى قبل صورة ‪$("#demo").prev().css("border" , "5px solid tomato");//‬‬
‫الديمو‬
‫هيعمل بوردر على اخوات الديمو كلهم اللى ‪$("#demo").nextAll().css("border" , "5px solid tomato");//‬‬
‫بعد الديمو‬
‫هيعمل بوردر على اخوات الديمو كلهم اللى ‪$("#demo").prevAll().css("border" , "5px solid tomato");//‬‬
‫قبل الديمو‬
‫ملحوظة ‪ :‬المقصود ب اخوات الديمو هما كل حاجة داخل الديف اللى شايل الديمو ‪//‬‬

‫‪.‬ده هيجيب لك العنصر األب اللي فيه الـديمو ‪$("#demo").parent().css("border" , "5px solid tomato"); //‬‬
‫‪.‬دي بتستخدم عشان توصل لعنصر األب (اللي هو العنصر اللي فوق العنصر الحالي) ‪//‬‬
‫ده هيجيب كل األطفال اللي جوه ‪$(".groupImages").children().css("border" , "5px solid tomato");//‬‬
‫الـجروب‬
‫‪.‬دي بتستخدم عشان توصل لألوالد بتوع عنصر معين (اللي هما العناصر اللي جوه العنصر ده مباشرة) ‪//‬‬
‫‪.‬دي هتجبلي كل االليمنتس اللى جنب الديمو ‪$("#demo").siblings().css("border" , "5px solid tomato"); //‬‬
‫‪.‬دي بتستخدم عشان توصل لإلخوات بتوع العنصر (العناصر اللي جنب العنصر الحالي) ‪//‬‬
‫ده هيجيب لك كل االليمنتس ‪$(".groupImages").find("#demo").css("border" , "5px solid tomato"); //‬‬
‫‪ .‬اللي جوه الجروب وواخده اي دي ديمو‬
‫‪.‬دي بتستخدم عشان تالقي عناصر جوه عنصر معين‪ ،‬يعني بتدور جوه العنصر عن حاجات معينة ‪//‬‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫دي هتجبلك اقرب ديف فوق اليمنت ‪$("#demo").closest("div").css("border" , "5px solid tomato"); //‬‬
‫الديمو اللى اختارته‬
‫‪.‬دي بتستخدم عشان توصل ألقرب عنصر أب معين بنا ًء على الشرط اللي انت مدخله ‪//‬‬
‫الخالصة ‪ Traversing functions :‬دي أدوات بتحركك بين عناصر الصفحة‪ ،‬تقدر توصل لألب‪ ،‬األوالد‪،‬‬
‫هتالقيها مفيدة لو عايز تتعامل مع عناصر معينة جوه الصفحة وتعدل عليها أو‬ ‫اإلخوات‪ ،‬أو تدور جوه عنصر‪.‬‬
‫تاخد معلومات منها‪.‬‬
‫‪Accordion in JQ‬‬
‫هو واجهة مستخدم تفاعلية بتخليك تنشئ مجموعة من المحتويات اللي بتتفتح وتتقفل لما تضغط عليها‪ ،‬زي األبواب اللي‬
‫بتفتح وتقفل على شكل طيات‪ .‬فكر في الموضوع كأنه قائمة فيها عناوين‪ ،‬ولما تضغط على أي عنوان‪ ،‬المحتوى اللي تحته‬
‫يفتح‪ ،‬وباقي العناوين تقفل محتوياتها‪.‬‬
‫>‪<-- in HTML --‬‬
‫>"‪<div class="container my-5" id="accordion‬‬
‫>‪<h1>Lorem ipsum dolor sit item1</h1‬‬
‫>‪<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis aperiam.</p‬‬

‫>‪<h1>Lorem ipsum dolor sit item2</h1‬‬


‫>‪<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis aperiam.</p‬‬

‫>‪<h1>Lorem ipsum dolor sit item3</h1‬‬


‫>‪<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis aperiam.</p‬‬
‫>‪</div‬‬
‫{‪p‬‬
‫;‪display: none‬‬
‫}‬

‫يوجد طريقتين وهما ‪ 1‬و ‪ 2‬وممكن تفكر فيها وتجرب طرق اخري ‪// in JavaScript‬‬
‫{ )( ‪.1 $("h1").click(function‬‬
‫;)‪$("p").slideUp(300‬‬
‫)‪$(this).next().slideDown(300‬‬
‫;)}‬

‫{ )( ‪.2 $("h1").click(function‬‬
‫;)"‪$(this).next().toggle(300).css("display","block‬‬
‫{)(‪$(this).prev().css({display:"none"},function‬‬
‫;)}‬

‫;)}‬
‫‪Color Box edit from JQ‬‬
‫دي تاسكايه جميلة وهي هعمل زي بلتت الوان كدا وكل لما ادوس علي لون ما هيأخد اللون دا ويلونه لكل العناوين اللى فى‬
‫الويب مثال‪.‬‬
‫>"‪<div class="display-flex colorBox position-fixed‬‬
‫>"‪<ul class="list-unstyled d-flex‬‬
‫>‪<li></li‬‬
‫>‪<li></li‬‬
‫>‪<li></li‬‬
‫>‪<li></li‬‬
‫>‪<li></li‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
<i class="palta"></i>
</ul>
</div>
<div class="container my-5">
<h1>Lorem ipsum dolor sit item1</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis aperiam.</p>
<h1>Lorem ipsum dolor sit item2</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis aperiam.</p>
<h1>Lorem ipsum dolor sit item3</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis aperiam.</p>
</div>
.colorBox{
z-index: 9999;
}
.colorBox li{
width: 0px;
height: 50px;
background-color: #0f017f;
cursor: pointer;
}
.palta{
width: 30px;
height: 30px;
background-color: black;
border-radius: 50%;
cursor: pointer;
}
// ‫للتبديل والتحكم في اظهار واخفاء البلتة‬
$(".palta").click(function () {
$(".colorBox li").css("width","50px");
$(".colorBox li").toggle(700);
})

// ‫طريقة اخري للتبديل والتحكم في اظهار واخفاء البلتة ودي الطريقة االفضل‬
$(".palta").click(function () {
let w = $(".colorBox li").css("width");
console.log(w);
if( w == "0px"){
$(".colorBox li").animate({width:"50px"},500);
}else{
$(".colorBox li").animate({width:"0px"},500);
}
})

// ‫للتحكم في اضافة االلوان للبلته عن طريق الجي كويري‬


$(".colorBox li").eq(0).css("backgroundColor" , "tomato"); // ‫بقوله اول اليمنت ال اي اديلو لون احمر‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
ُ‫للا‬ َ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد‬ Ah-med Mostafa - 01155023528
‫بقوله اول اليمنت ال اي اديلو لون احمر ‪$(".colorBox li").eq(1).css("backgroundColor" , "brown"); //‬‬
‫بقوله اول اليمنت ال اي اديلو لون احمر ‪$(".colorBox li").eq(2).css("backgroundColor" , "0f017f"); //‬‬
‫بقوله اول اليمنت ال اي اديلو لون احمر ‪$(".colorBox li").eq(3).css("backgroundColor" , "teal"); //‬‬
‫بقوله اول اليمنت ال اي اديلو لون ‪$(".colorBox li").eq(4).css("backgroundColor" , "#9d0070"); //‬‬
‫احمر‬

‫الضافة االلوان ل اي عناصر في الصفحة عن طريق الضغط على اللون والعناصر دي هتاخد اللون دا ‪//‬‬
‫{)(‪$(".colorBox li").click(function‬‬
‫)"‪let x = $(this).css("backgroundColor‬‬
‫;)‪console.log(x‬‬
‫)‪$("h1").css("backgroundColor" , x‬‬
‫)}‬
‫‪Navbar edit from JQ‬‬
‫تاسكاية لذيذة برضو وهي اني عايز اغير لون ال ‪ navbar‬او لون عنوان السيكشن لما اوصل عند سيكشن معين وانا‬
‫ماشي باالسكرول ‪.‬‬
‫;‪let demoPositionTop = $(".demo").offset().top‬‬
‫;)‪console.log(demoPositionTop‬‬

‫{)(‪$(window).scroll(function‬‬
‫;))(‪console.log($(window).scrollTop‬‬
‫;)(‪let scrollValueTop = $(window).scrollTop‬‬
‫{)‪if(scrollValueTop >= demoPositionTop‬‬
‫هنا ممكن تقوله يغيرلك في اي حاجة في الدنيا موجودة فى ‪$(".demo").addClass("bg-danger") //‬‬
‫السيكشن دا‬
‫}‬
‫{‪else‬‬
‫هنا بتقوله لما تطلع فوق تاني رجعلي كل حاجة زي ماكانت ‪$(".demo").removeClass("bg-danger") //‬‬
‫}‬
‫;)}‬
‫‪Arrow Up‬‬
‫تاسكايه لو انا عايز اضيف زرار ويكون مخفي فى االول ولما انزل تحت باالسكرول يظهر ولما ادوس عليه يطلع فوق‪.‬‬
‫اول حاجة هتعمل الزرار فى االتش تي ام ال وفى االول هيكون مخفي وهيظهر لما توصل لتاني سيكشن باالسكرول‪//‬‬
‫{)(‪$(".GoToTop").click(function‬‬
‫بقوله لما ادوس ع الزرار اطلع للتوب زيرو‪$("html , body").animate({scrollTop : "0"},300) //‬‬
‫)}‬
‫للتحكم فى اخفاء واظهار الزرار هنستخدم نفس فكرة الكود السابق ولكن هنحط بدل اللون نحط اظهار او اخفاء الزرار‪//‬‬
‫{)(‪$(window).scroll(function‬‬

‫;)(‪let scrollValueTop = $(window).scrollTop‬‬


‫;‪let demoPositionTop = $(".demo").offset().top‬‬

‫{)‪if(scrollValueTop >= demoPositionTop‬‬


‫;)‪$("GoToTop").fadeIn(500‬‬
‫}‬
‫{‪else‬‬
‫;)‪$("GoToTop").fadeOut(500‬‬
‫}‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫;)}‬

‫‪smooth Scroll‬‬
‫تاسكاية لو انا عندي ‪ navbar‬وعايز لما ادوس على اي لينك فيها يروحلي بشكل اسموزي كدا ‪ .‬مثال‬
‫{ )(‪$(".nav-link").click(function‬‬
‫‪let hrefAttribute = $(this).attr("href"); // for example #clients‬‬
‫عشان اجيب مكان السيكشن بالظبط ‪let makanSection = $(hrefAttribute).offset().top; //‬‬
‫بقوله روح لمكان السيكشن دا ‪$("html , body").animate({scrollTop : makanSection} , 1000) //‬‬
‫بسموزي‬
‫)}‬
‫‪Loading Screen‬‬
‫ودي تاسكاية جميلة لو عايز يظهرلي ‪ loading‬كدا لحد ما الصفحة تحمل ‪ ..‬وممكن اجيب كود شكل اللودينج من الموقع‬
‫دا ‪cssSpinners‬‬
‫وهتختار الشكل اللى انت عايزه وتدوس عليه وتاخد الكود كوبي بيست وتحطه عندك فى الكود ‪ ...‬مثال‬
‫>‪<!-- in HTML --‬‬
‫>"‪<div class="loading d-flex justify-content-center align-items-center‬‬
‫>‪<span class="loader"></span‬‬
‫>‪</div‬‬
‫‪/* in CSS */‬‬
‫{‪.loading‬‬
‫;‪width: 100%‬‬
‫;‪height: 100vh‬‬
‫;‪position: fixed‬‬
‫;‪z-index: 999999‬‬
‫;‪background-color: bisque‬‬
‫كود السي اس اس بتاع االسبينر اللى انت هتاخده كوبي بيست من موقع االسبينر ‪} // +‬‬
‫‪// in JAVASCRIPT‬‬
‫{ )( ‪$(document).ready(function‬‬
‫;)‪$(".loading").fadeOut(2000‬‬
‫;)}‬

‫‪Plugins in js‬‬
‫وهي اضافات او ‪ features‬جاهزة بتساعدنا فى شغلنا وهي مجموعة من الشباب بتعملها وبترفعها على ال ‪GitHub‬‬
‫وهي حاجة مش صعبة خالص بس هي الفكرة كلها فى انك هل انت تعرف ان فى ‪ plugin‬بتعمل دا وال ال‪ .‬وسهلة فى‬
‫االستخدام بتدخل على ال ‪ GitHub‬بتاع ال ‪ plugin‬وبيقولك الشرح بتاعها وازاي تنزلها وازاي تكلمها فى الكود عندك‬
‫فانت بتمشي مع الخطوات وعندنا امثلة على ال ‪plugins‬‬
‫‪ : Slider plugins .1‬اكتب فى السيرش كدا وهيطلعلك حاجات كتير ودول خاصين بأشكال ال ‪Skitter .sliders‬‬
‫‪Slideshow‬‬
‫‪ :Wow.js .2‬ودي بتلعب وتتحكم في شكل ظهور ال ‪ elements‬بشكل جمالى وحلو جربها‬
‫‪ :Owl.carousel.js .3‬ودي فيها اشكال للتحكم في شكل ال ‪ slider‬عن طريق ال‪ drag‬كدا بالماوس جربها برضو‬
‫وجميلة‬
‫‪ :Slick slider .4‬دي شبه ال ‪ owl‬برضو نفس الفكرة‪.‬‬
‫‪ :multiScroll .5‬دي بيتحكم في شكل الظهور لما تعمل ‪ scroll‬ادخل على الموقع بتاعهم وهتفهم قصدي‬
‫‪ :parallax.js .6‬دي جميلة برضو بتحرك ال ‪ element‬بشكل حلو كدا‬
‫‪ :particles.js .7‬دي بتعمل في الخلفية شكل جميل كدا برضو عامل زي شبكة العنكبوت‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫‪ :morris.js .8‬دي خاصة بال ‪ charts‬الرسوم البيانية ودي جميلة ومهمة جدا‪.‬‬
‫‪ :Charts.js .9‬دي برضو خاصة بال ‪ charts‬الرسوم البيانية‪.‬‬
‫‪ :Lodash .10‬بيوفر مجموعة دوال بتسهل التعامل مع المصفوفات والكائنات وتحسين األداء‪.‬‬
‫‪ :Moment.js .11‬بيستخدم إلدارة وتنسيق التواريخ واألوقات بطريقة بسيطة وفعالة‪.‬‬
‫‪ :Axios.12‬بيساعدك في التعامل مع الـ ‪ API requests‬وجلب البيانات من الخوادم بسهولة‪.‬‬
‫‪ :Three.js.13‬بيستخدم إلنشاء الرسوم ثالثية األبعاد في المتصفح باستخدام ‪.WebGL‬‬
‫‪ :Popper.js.14‬بيستخدم لتنظيم وعرض الـ ‪ tooltips‬والقوائم المنبثقة بشكل ذكي ومتجاوب‪.‬‬
‫‪ :Anime.js.15‬بيوفر أدوات قوية لعمل األنيميشنز (الحركات) على العناصر في الصفحة‪.‬‬
‫‪ :FullCalendar .16‬بيسمحلك تضيف تقويم تفاعلي‪ ،‬مثالي لتنظيم األحداث والمواعيد‪.‬‬
‫‪ :Swiper.js.17‬بيساعدك تعمل كاروسيل أو ساليدر للصور أو المحتوى بشكل متجاوب وسلس‪.‬‬
‫اشهر ال ‪ GIS Plugins‬اللى ممكن تستخدمها مع ال ‪JavaScript‬‬
‫‪ :Leaflet )1‬بيستخدم إلنشاء خرائط تفاعلية خفيفة الوزن بسهولة‪ ،‬مناسب للويب‪.‬‬
‫‪ :OpenLayers )2‬بيوفر أدوات قوية إلنشاء وعرض الخرائط‪ ،‬ودعم مصادر بيانات متعددة زي ‪ WMS‬و‪.WFS‬‬
‫‪ :Mapbox GL JS )3‬بيسمحلك تعرض خرائط تفاعلية ثالثية األبعاد وعالية الدقة باستخدام ‪.WebGL‬‬
‫‪ :Turf.js )4‬بيستخدم لتحليل البيانات الجغرافية (‪ ،)GIS‬زي حساب المسافات أو المناطق أو التقاطعات بين األشكال‪.‬‬
‫‪ :Esri Leaflet )5‬بيعمل مع ‪ ArcGIS‬عشان تعرض وتتعامل مع البيانات الجغرافية بسهولة على خريطة ‪.Leaflet‬‬
‫‪ :CesiumJS )6‬بيوفر لك بيئة ثالثية األبعاد تفاعلية لعرض الخرائط والمجسمات على الكرة األرضية‪.‬‬
‫‪ :Deck.gl )7‬بيستخدم لعرض البيانات الجغرافية الكبيرة والمتعددة الطبقات بطريقة تفاعلية وسلسة‪.‬‬
‫‪ :GeoJSON-vt )8‬بيساعد في عرض ملفات ‪ GeoJSON‬الضخمة بشكل سريع ومقسم حسب الحاجة‪ ،‬عشان يبقى‬
‫األداء أعلى‪.‬‬
‫‪ :Proj4js )9‬بيستخدم لتحويل اإلحداثيات بين أنظمة اإلحداثيات المختلفة في الـ ‪.GIS‬‬
‫‪ :Leaflet Draw )10‬بيسمحلك تضيف أدوات للرسم والتعديل على الخريطة بشكل تفاعلي في ‪.Leaflet‬‬
‫‪ :Leaflet.Geoman )11‬بيوفر أدوات متقدمة للرسم والتعديل على الـ ‪ ،Polygons‬والخطوط والنقاط على خرائط‬
‫‪ ،Leaflet‬مع إمكانيات متعددة للتحكم‬
‫‪ :GeoExt )12‬بيجمع بين ‪ Ext JS‬و ‪ OpenLayers‬عشان تضيف واجهات مستخدم متقدمة على الخرائط زي الـ‬
‫‪ ،toolbars ،panels‬وواجهات البحث‪.‬‬
‫‪ :SuperMap iClient for JavaScript )13‬بيستخدم إلنشاء تطبيقات خرائط تفاعلية ثالثية األبعاد ويدعم خدمات‬
‫‪ GIS‬الكبيرة زي خدمات ‪.SuperMap‬‬
‫‪ :MapLibre GL JS )14‬بيعتبر بديل مفتوح المصدر لـ ‪ ،Mapbox GL JS‬بيوفر نفس المميزات تقريبًا لكن مع‬
‫تحكم كامل في الكود‪.‬‬
‫‪ :Leaflet Routing Machine )15‬بيستخدم إلضافة خاصية توجيه المركبات أو األشخاص على الخريطة‬
‫باستخدام الـ ‪.Leaflet‬‬
‫‪ :Heatmap.js )16‬بيستخدم إلنشاء خرائط حرارية (‪ )heatmaps‬على البيانات الجغرافية لتوضيح الكثافات أو‬
‫التوزيعات‪.‬‬
‫‪ :Leaflet.markercluster )17‬بيجمع الـ ‪ markers‬المتعددة على الخريطة في مجموعة ‪ clusters‬عشان يحسن‬
‫من أداء العرض لما البيانات تكون ضخمة‪.‬‬
‫‪ :Mapshaper )18‬بيستخدم لتبسيط أو تحسين األشكال الجغرافية وتحويل البيانات بين الصيغ المختلفة زي‬
‫‪ Shapefile‬و ‪.GeoJSON‬‬
‫‪ :Shapefile-js )19‬بيستخدم لقراءة ملفات الـ ‪ Shapefiles‬وتحويلها لبيانات ‪ GeoJSON‬مباشرة في المتصفح‪.‬‬
‫‪ :Leaflet Control Geocoder )20‬بيساعدك تضيف ميزة الجيوكودينغ (تحويل العناوين لنقاط جغرافية) في‬
‫خريطة ‪ Leaflet‬باستخدام خدمات مثل ‪.Nominatim‬‬
‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬
‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬
‫‪ :Wicket.js )21‬بيستخدم لتحويل البيانات الجغرافية بين ‪ GeoJSON‬و )‪ ،WKT (Well-Known Text‬اللي‬
‫بيساعد في التوافق مع أنظمة ‪ GIS‬مختلفة‪.‬‬
‫‪ :Leaflet TimeDimension )22‬بيوفر دعم للبيانات الزمنية‪ ،‬بمعنى إنك تقدر تعرض تغييرات البيانات على‬
‫الخريطة مع مرور الوقت‪ ،‬زي حركة المركبات أو تغيرات الطقس‪.‬‬
‫‪ :Leaflet.measure )23‬بيسمحلك تضيف أدوات قياس على الخريطة لتحديد المسافات بين النقاط أو حساب‬
‫المساحات لألشكال المرسومة‪.‬‬
‫‪ :D3-Geo )24‬جزء من مكتبة ‪ ،D3.js‬بيتيحلك رسم خرائط جغرافية وتحليل البيانات الجغرافية بشكل تفاعلي مع‬
‫إسقاطات خرائط متعددة‪.‬‬
‫‪ :Windy.js )25‬بيستخدم إلنشاء رسومات بيانية ديناميكية للرياح وحاالت الطقس على الخرائط‪.‬‬
‫‪npm‬‬
‫هو اختصار ل ‪ node package manager‬وهو عبارة عن اوضة صغيرة كدا معتمدة على الى ‪ node js‬الن ال ‪node‬‬
‫هي اللى عملته واالوضة دي بيكون فيها ‪ %99‬تقريبا من ال ‪ JavaScript Packages‬اللى بنستخدمها زي ال ‪plugins‬‬
‫و ال ‪ Library‬زي ال ‪ jQuery , bootstrap, wow.js, live-server‬ودول على سبيل المثال يعني وال ‪ npm‬فكرته‬
‫معتمده على انه بيروح يدور في ال ‪ GitHub‬علي اللى انا طالبه منه وينزلهولي في فولدر اسمه ‪ node_modules‬وهو‬
‫اللى بيعملهولي داخل فولدر المشروع بتاعي ‪ +‬ان انا ممكن استخدمها عادي مع اي بروجكت عادي مش شرط مع ال‬
‫‪ frameworks‬وليها ‪ 3‬طرق في االستخدام اول طريقة وهي عن طريق ال ‪ terminal‬الموجودة فى ال ‪VS Code‬‬
‫وافتحها عن طريق ذ‪ shift+‬و دي افضل طريقة وعندي طريقة تانيه عن طريق اقف على فولدر المشروع وادوس ‪shift‬‬
‫‪ + right click‬واختار ‪ open PowerShell window here‬وطريقة اخري وهي اني ادخل جوا الفولدر واسليكت‬
‫طيب انا كدا عرفت ازاي ابدء اتعامل معاه ازاي بقا ابدء اجرب وانزل حاجة‬ ‫على الباص من فوق واكتب ‪.cmd‬‬
‫اول حاجة بعملها اني بكتب ‪ npm init‬و ‪ init‬دي اختصار لكلمة ‪ initiation‬ومعنها بداية او فتحة وتضغط انتر‬
‫وهيسألك بعض االسئلة العادية وجاوب عليها عادي واكمل معاه لالخر وبعد كدا افتح فولدر المشروع هتالقي في ملف‬
‫عملهولي اسمه ‪ package.json‬ودا فى الحاجات اللى انا جاوبت عليها ولما باجي انزل حاجة بيضفلي اسمها فى الملف دا‬
‫فى بروبرتي اسمها ‪ dependencies‬ولو حاجة انا منزلها لمرحلة بناء المشروع فقط زي ال ‪ live server‬مش هحتاجه‬
‫بعد كدا الن المشروع كدا كدا انا برفعو ع سيرفر بعد ما بخلصه فهو بيعملي بروبرتي تانيه اسمها ‪.devDependencies‬‬
‫يبقا تعال نقول الخطوات واحدة واحدة‬
‫‪1) npm init + answer all questions‬‬
‫‪2) npm i jquery >> to download jQuery …. The same way with anything‬‬
‫‪3) npm i live-server –save-dev >> to download live server‬‬
‫بع د ما بخلص خالص المشروع بتاعي بيكون حجمه كبير اوي ولو انا عايز ابعته لحد من زمايلي هيشتغل بعدي مثال ف‬
‫انا همسح فولدر ال ‪ node_modules‬الن دا سبب الحجم الكبير واقول لزميلي لما تيجي تشتغل اكتب في ال‪terminal‬‬
‫اكتب ‪ npm i‬واضغط ‪ enter‬فهيروح منزلي كل حاجة انا مستخدمها ويعملي فولدر ال ‪ node_modules‬وهنا يجي‬
‫اهمية ملف ال ‪ package.json‬فهو بيروح يشوف الحاجات اللى انا نزلتها فى الملف دا وينزلها من تاني‪.‬‬

‫ّي لَ ْوال أَ ْن َهدَانَا ه‬


‫للاُ‪ .‬التنسوني من صالح دعائكم‪...‬‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّل َهـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬

‫التنسوني من صالح دعائكم‬ ‫ّي لَ ْوال أَنْ َهدَانَا ه‬


‫للاُ‬ ‫ا ْل َح ْم ُد ّ هلِلّ الَّذّي َهدَانَا ّلهَـذَا َو َما ُكنَّا ّلنَ ْهتَد َ‬ ‫‪Ah-med Mostafa - 01155023528‬‬

You might also like