‫]‪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‬‬