‫ن‬

‫المرسلي سيدنا محمد ﷺ‬ ‫عل رأشف‬ ‫بسم هللا الرحمن الرحيم والصالة و السالم ي‬
‫ن‬
‫أجمعي‬ ‫وعل اهله وصحبه‬
‫ الجزء ن‬JS ‫ملخ ـ ـص لكل ما تم دراسته نف‬
‫الثان‬
‫ي‬ ‫ي‬
Week 14
What Is BOM ? Lesson #102

Alert, Confirm, Prompt Lesson #103

setTimeout and clearTimeout Lesson #104

setInterval and clearInterval Lesson #105

Window Location Object Lesson #106

Window Open And Close Lesson #107

Window History Object Lesson #108

Scroll, ScrollTo, ScrollBy, Focus, Print, Stop Lesson #109

Scroll To Top Using ScrollY Lesson #110

Assignments From [102] = > [110]

Week 15
Local Storage Lesson #111

Local Storage Color App Practice Lesson #112

Session Storage And Use Cases Lesson #113

Bom Challenge Lesson #114

Assignments From [111] = > [114]

Week 16
Destructuring Arrays Part 1 Lesson #115
 Destructuring Arrays Part 2 Lesson #116

Destructuring Arrays Part 3 Swapping Variables Lesson #117

Destructuring Objects Part 1 Lesson #118

Destructuring Objects Part 2 Lesson #119

Destructuring Function parameters Lesson #120

Destructuring Mixed Content Lesson #121

Destructuring Challenge Lesson #122

Assignments From [115] = > [122]

Week 17
Set Data Type And Methods Lesson #123

Set vs WeakSet And Garbage Collector Lesson #124

Map Data Type vs Object Lesson #125

Map Methods Lesson #126

Map vs WeakMap Lesson #127

Array.from Method Lesson #128

Array.copyWithin Method Lesson #129

Array.some Method Lesson #130

Array.every Method Lesson #131

Spread Syntax And Use Cases Lesson #132

Map And Set Challenge Lesson #133

Assignments From [123] = > [133]

Week 18
Intro And What Is Regular Expression Lesson #134

Regular Expression – Modifiers Lesson #135

Regular Expression – Ranges Part 1 Lesson #136

Regular Expression – Ranges Part 2 Lesson #137

Regular Expression – Character Classes Part 1 Lesson #138

Regular Expression – Character Classes Part 2 Lesson #139

Regular Expression – Quantifiers Part 1 Lesson #140

Regular Expression – Quantifiers Part 2 Lesson #141

Regular Expression – Quantifiers Part 3 Lesson #142

Regular Expression – Replace With Pattern Lesson #143

Regular Expression – Form Validation Lesson #144

Test Your Regular Expression Lesson #145

Regular Expression – Challenge Lesson #146

Assignments From [134] = > [146]

Week 19
OOP Introduction Lesson #147

Constructor Function Introduction Lesson #148

Constructor Function New Syntax Lesson #149

Deal With Properties And Methods Lesson #150

Update Properties And Built In Constructors Lesson #151

Class Static Properties And Methods Lesson #152

 Class Inheritance Lesson #153

Class Encapsulation Lesson #154

Prototype Introduction Lesson #155

Add To Prototype Chain Lesson #156

Object Meta Data And Descriptor Part 1 Lesson #157

Object Meta Data And Descriptor Part 2 Lesson #158

Assignments From [147] = > [158]

Week 20
Date And Time Introduction Lesson #159

Get Date And Time Lesson #160

Set Date And Time Lesson #161

Formatting Date And Time Lesson #162

Tracking Operations Time Lesson #163

Generator Function Introduction Lesson #164

Delegate Generator Function Lesson #165

Generate Infinite Numbers Lesson #166

Module Import And Export Lesson #167

Named vs Default Export And Import All Lesson#168

Assignments From [159] = > [168]

Week 21
What Is JSON Lesson #169
 JSON Syntax And Compare With JS Object Lesson #170

What Is API Lesson #171

Parse And Stringify Lesson #172

Asynchronous vs Synchronous Programming Lesson #173

Call Stack And Web API Lesson #174

Event Loop And Callback Queue Lesson #175

What Is AJAX And Network Informations Lesson #176

Request and Response From Real API Lesson #177

Loop On Data Lesson #178

Assignments From [169] = > [178]

Week 22
Callback Hell Or Pyramid Of Doom Lesson #179

Promise Intro And Syntax Lesson #180

Promise – Then, Catch And Finally Lesson #181

Promise And XHR Lesson #182

Fetch API Lesson #183

Promise – All, All Settled And Race Lesson #184

Async And Trainings Lesson #185

Await And Trainings Lesson #186

Try, Catch, Finally With Fetch Lesson #187

The End And Advices Lesson #188

Assignments From [179] = > [188]

 ‫الخاتمة وشويه فضفضة ️♥‬
‫فقرة إضافية حبيت اضيفها‬

‫ُ‬
‫مقدمة بسيطة مهمة وكان البد منها‬
‫سالم من هللا عليكم ورحمته وبركاته نف الحقيقة انا قبل ما ر‬
‫انش الملخص دا كان عندي إحساس انه لألسف‬ ‫ٌ‬
‫ي‬
‫ن‬
‫مضايقن جدا ويارب يكون إحساس زائف بس‬ ‫شء‬ ‫ر‬
‫ي‬ ‫الل فاتت ودا ي‬‫مش عل نفس مستوي كل الملخصات ي‬
‫ن‬
‫لسببي‬ ‫دا كان راجع‬

‫التان دا من الملخص كنت محطوط‬ ‫كت طلب الجزء ن‬ ‫ادن وهو ان من ر‬ ‫السبب األول‪ :‬هو سبب خارج عن ار ر‬
‫ي‬ ‫ن‬ ‫ي‬
‫عمل فيه متقلقش ولكن مستواه مكنش‬ ‫ف‬ ‫هللا‬ ‫اتقيت‬ ‫انا‬ ‫ن‬
‫صدقن‬ ‫ولكن‬ ‫‪،‬‬‫انجزه‬ ‫عايز‬ ‫إن‬ ‫تحت ضغط ن‬
‫ي‬ ‫ي‬ ‫ي‬ ‫ي‬
‫واكت فيه ودا ينقلنا لتانن‬
‫اكت ر‬‫المستوي الل انا بطمح ليه ويمكن لو كنت خدت وقت زيادة كنت تعمقت ر‬
‫ي‬ ‫ي‬
‫سبب‬
‫الل هيبدا يقرأ‬ ‫عل ان‬ ‫ف الحقيقة ان الجزء دا من المخلص ككل انا اعتمدت فيه‬ ‫اما السبب ن‬
‫التان‪ :‬ف ن‬
‫ن‬ ‫ي‬ ‫ي‬ ‫ي‬ ‫ي‬
‫داع للتوغل فيها زي ما كنت بعمل يف الجزء‬ ‫ر‬ ‫ر‬
‫الن ال ي‬ ‫بف شخص ناضج برمجيا لفهم ابسط األشياء ي‬ ‫هو ي‬
‫األول‬

‫ن‬
‫بمعن؟!‬
‫ي‬
‫ن‬
‫الجزء األول انا كنت مهتم جدا بتفصيص كل حاجة حرفيا الن خدت يف الحسبان ان‬
‫بالتمجة بشكل‬
‫الل هيقراه هيكون دا أول احتكاك ليه باللغة دي ‪ +‬ربما يكون اول احتكاك ليه ر‬
‫الشخص ي‬
‫ن‬
‫عام فكنت مهتم اتعمق يف تفاصيل داخل تفاصيل عشان أوضح كل حاجة قدر االمكان‬
‫التان انا اعتمدت ان الشخص خالص بقا عنده قدرة يحلل بعض الحاجات ويستنتج من تلقاء‬ ‫لكن نف الجزء ن‬
‫ي‬ ‫ي‬
‫الل قرأه ويشوف‬
‫نفسه حاجات انا مش موضحها‪ ،‬بل يمكن صممت ان الشخص الزم يقرأ كويس ويحلل ي‬
‫عل تحليالت من دماغه‬ ‫نتيجة المكتوب بناءا ي‬

‫ويرتف لمستوي‬‫ر‬ ‫ن‬

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

‫افتكرونا بدعوة طيبة لوجه هللا‬

‫‪By: Amr Elsayed‬‬
 ‫‪What Is BOM ? Lesson #102‬‬

‫بتعت عن الـ ‪Window obj‬‬

‫وه ببساطة شديدة جدا ر‬
‫ه اختصار للـ ‪ Browser Object Model‬ي‬
‫الـ ‪ BOM‬ي‬
‫زي ما اتعودنا ديما ان كل ‪ Object‬و أي ‪ Method‬بيكون جواها شوية خصائص خاصة بيها بتعمل وظيفة معينة‬
‫ن‬
‫الـ ‪ Window object‬كذلك بداخله خصائص كتت جدا بقدر استخدمها يف التعامل مع الـ ‪ Window‬او‬
‫ه دي الـ ‪Window‬‬ ‫الل انت بتتصفحها ي‬
‫المتصفح بشكل اخر او الـ ‪ Page‬ي‬

‫يعتت جزء من الـ ‪Window‬‬

‫الل ر‬
‫الل بيحتوي عليها الـ ‪ Window obj‬زي مثال الـ ‪ DOM‬ي‬
‫من امثلة األشياء ي‬
‫الل كنت ديما بستخدمه ‪ ..‬أي ‪ Global Variable‬او أي ‪ Object‬او ‪ Function‬ي‬
‫ه جزء من‬ ‫زي الـ ‪ Console‬ي‬
‫الـ ‪Window‬‬

‫كذلك الـ ‪ Document‬هو جزء من الـ ‪Window‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫ممتات استخدام الـ ‪Window Object‬‬
‫‪ -1‬ممكن نفتح ‪ Window‬جديدة او نقفل الـ ‪ Window‬الحالية‬
‫ن‬ ‫ن‬
‫يعن تحكم كامل يف الـ ‪Window‬‬
‫الل يناسبك ي‬
‫‪ -2‬نعمل ‪ Resize‬للـ ‪ Window‬للحجم ي‬
‫ن‬
‫معي محدد انت عايزوا‬ ‫‪ -3‬ممكن تعمل ‪ Print‬للـ ‪ document‬او تعمل ‪ print‬لجزء‬
‫ر‬ ‫ن‬
‫تالف بعد دقيقة طلع ‪Pop Up‬‬
‫الل انت عايزوا زي مثال لما تدخل موقع ي‬
‫‪ -4‬ممكن تعمل ‪ Run‬ألي كود يف الوقت ي‬
‫الل كود الـ ‪ Pop Up‬دا يشتغل فيه‬
‫هنا هو بيكون محدد ‪ Time‬للوقت ي‬
‫ن‬
‫‪ -5‬تقدر تتحكم تحكم كامل يف الـ ‪ URL‬وتفصصه لكل مكوناته‬

‫‪ -6‬ممكن تعمل ‪ Save‬لمجموعة بيانات داخل الموقع‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Alert, Confirm, Prompt Lesson #103‬‬

‫مبدأيا كدا أي حاجه نف الدرس دا ه بس من باب العلم بيها مش ر‬

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

‫ن‬
‫الل فيها لحد ما تدوس ‪ OK‬وتقفلها ودا بيعطل‬
‫ي‬ ‫البيانات‬ ‫او‬ ‫الصفحة‬ ‫تحميل‬ ‫بتوقف‬ ‫انها‬ ‫‪Alert‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫أسوء حاجه ي‬
‫تحميل الصفحة‬

‫‪Sweetalert‬‬
‫دا بديل كويس جدا للـ ‪ Alert‬العادي‬

‫‪By: Amr Elsayed‬‬

 ‫الـ ‪ Confirm‬بقا بيتم استخدامه للتأكد هل انت عايز تنفذ الـ ‪ Action‬دي وال الء‬
‫ن‬
‫عل سبيل المثال لو بتتصفح منتجات يف موقع ‪ Amazon‬وانت بتضيف منتجات للسلة حبيت تشيل منهم‬ ‫ي‬
‫منتج هنا بيطلعلك مسج تقولك متاكد انك عايز تشيل المنتج دا النتيجة بتكون ‪ True‬لو موافق و ‪ False‬لعدم‬
‫والتاجع عن حذف المنتج‬ ‫الموافقة ر‬

‫ن‬
‫يعن ‪False‬‬ ‫ن‬
‫يعن ‪ True‬ولو ضغط ‪ Cancel‬ي‬ ‫الـ ‪ Confirm‬بيكون فيها ‪ Massage‬لو ضغط ‪ Ok‬ي‬
‫وعل أساس الـ ‪ Value‬دي بيتنفذ الـ ‪Action‬‬ ‫‪Boolean‬‬ ‫‪Value‬‬ ‫جع‬ ‫ًإذا الـ ‪ Confirm‬دي ر‬
‫بت‬
‫ي‬
‫ن‬
‫الل فوق دا انا عملت متغت اسمه ‪ confirmMSg‬بخزن فيه الـ ‪ Confirm‬بالـ ‪ Massage‬بتاعتها‬
‫ي‬ ‫‪Code‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫ي‬
‫يعن بقت ‪True‬‬ ‫ن‬ ‫ر‬
‫بعد كدا عملت شط وهللا لو الـ ‪ confirmMSg‬اليوزر ضغط ‪ OK‬ي‬
‫اطبع رسالة "‪"Item Deleted‬‬
‫يعن ‪ False‬اطبع رسالة "‪"Item Not Deleted‬‬‫ن‬
‫ولو اليورز ضغط ‪ Cancel‬ي‬
‫انا عملت متغت الـ ‪ confirmMSg‬عشان اقدر استخدم المتغت دا نفسه نف نان اعمل بيه ر‬
‫الشط‬ ‫ي ي‬

‫نف حالة الـ ‪ OK‬ن‬

‫يعن ‪True‬‬
‫ي‬ ‫ي‬

‫نف حالة الـ ‪ Cancel‬ن‬

‫يعن ‪False‬‬
‫ي‬ ‫ي‬
 ‫الـ ‪ Prompt‬هنا مفيش ‪ Ok‬و ‪ Cancel‬ال هنا المطلوب منك تكتب حاجة‬

‫ن‬
‫من رسالة هتظهر لليوزر وبعدها ‪ Default Message‬تكون زي ‪ Placeholder‬كدا‬
‫الـ ‪ prompt‬دا بيطلب ي‬
‫ه دي الـ ‪ Placeholder‬او الـ ‪Default Message‬‬
‫‪ Write Day With 3 Characters‬ي‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫ن‬ ‫ن‬
‫وخل يف قاموسك انا انهاردا هعمل ‪ 1‬و ‪ 2‬و ‪3‬‬ ‫ي‬ ‫شيل من قاموسك يف يوم من األيام هعمل كذا وكذا‬
‫ر‬
‫دلوقن حاال بالمتاح‬ ‫مفيش بكرا دي انساها وابدأ‬
‫ي‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ♥‬
‫َ ا ُ َ َّ ا‬ ‫ً‬ ‫ّ‬ ‫ًْ‬ ‫ً‬ ‫ً‬ ‫َُ َ‬ ‫َّ َّ نّ‬
‫ورزقا طيبا‪ ،‬وعمًل متقبًل‪.‬‬ ‫إن أسألك ِعلما نافعا‪ِ ،‬‬ ‫اللهم ي‬
‫َ َ َ‬ ‫ْ‬ ‫ْ َ َ ُ ْ َ َ ُ‬ ‫َّ ُ َّ َ نّ َ َ‬
‫اللهم أ ِع ين عل ِذك ِرك‪ ،‬وشك ِرك‪ ،‬وحس ِن ِعباد ِتك‪.‬‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬ ‫اللهم ّ‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
 ‫‪setTimeout and clearTimeout Lesson #104‬‬

‫الل بحدده‬ ‫ن‬

‫عن طريق الـ ‪ setTimeout Method‬هنقدر نشغل ‪ Function‬معينه بعد وقت معي انا ي‬
‫الل انا هستدعيها الـ ‪ Function‬دي اكيد بيكون جواها‬ ‫ن‬
‫من أول حاجة الـ ‪ Function‬ي‬
‫الـ ‪ setTimeout‬دي بتقبل ي‬
‫حاجه محتاج انها تتنفذ‬
‫ن‬
‫ثوان‬ ‫ن‬ ‫ن‬
‫يعن ‪ 3 = 3000‬ي‬ ‫ه الـ ‪ milliseconds‬ي‬ ‫الل ي‬
‫الل بيكون بالـ ‪ MS‬ي‬
‫من الـ ‪ Timeout‬او الوقت ي‬
‫بعد كدا بيطلب ي‬

‫ن ن‬
‫ثوان يف الـ ‪Console‬‬
‫المفروض ان الكود دا معناه انه هيطبع كلمه "‪ "Msg‬بعد ‪ 3‬ي‬

‫ن‬
‫ممكن استخدم ‪ Named Function‬عادي واعوض باسمها يف الـ ‪ setTimeout‬زي المثال دا وهتنفذ المطلوب‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫يف المثال دا لو عندي ‪ Named Function‬جواها ‪ Parameters‬عايز استخدمها واعوض مكانها بـ ‪Value‬‬
‫ان احط الـ ‪ Arguments‬بتاعت الـ ‪ Parameters‬دي‬ ‫ن‬
‫استخدام للـ ‪ setTimeout‬بيكون الحل الصحيح ي‬
‫ي‬ ‫ومع‬
‫بعد الـ ‪Timeout‬‬

‫ن‬ ‫ن‬
‫ثوان وتطبع رسالة‬ ‫الـ ‪ clearTimeout‬هيوقف عمل الـ ‪ ... setTimeout‬ي‬
‫يعن لو عندي ‪ Function‬قدامها ‪ 5‬ي‬
‫معينة الـ ‪ clearTimeout‬بيوقف عمل الـ ‪ Function‬دي‬

‫ن‬
‫من ‪ ID‬أو ‪Counter‬‬
‫الـ ‪ clearTimeout‬بيقبل ي‬
‫‪By: Amr Elsayed‬‬
 ‫الل فات دا ايه‬ ‫ر‬
‫طيب شح الكود ي‬
‫ن‬
‫عملت زرار اسمه ‪ Stop‬و مسكت الزرار دا وخزنته يف المتغت ‪btn‬‬

‫عملت ‪ Named Function‬باسم ‪ sayMsg‬كل وظيفتها انها تطبع رسالة "‪"Iam Message‬‬

‫ن‬
‫بعد كدا استخدمت الـ ‪ sayMsg‬دي يف الـ ‪ setTimeout‬ومعاه الـ ‪ time‬نفسه‬

‫ن‬ ‫ن‬
‫الل هستخدمه عشان امرره يف الـ ‪clearTimeout‬‬
‫ي‬ ‫‪counter‬‬ ‫اسمه‬ ‫متغت‬ ‫ف‬
‫خزنت الـ ‪ setTimeout‬دي نفسها ي‬
‫عشان يوقف عمل الـ ‪setTimeout‬‬

‫بتاع عشان يعمل ‪ Function‬دورها تشغل الـ ‪ clearTimeout‬اول ما‬

‫ي‬ ‫استخدمت ‪ Event‬الـ ‪ click‬مع الزرار‬
‫بيعت عن الـ ‪setTimeout‬‬
‫الل ر‬
‫اضغط ع الزرار دا وبداخل الـ ‪ clearTimeout‬حطيت الـمتغت ‪ counter‬ي‬

‫بمجرد ما اضغط ع زرار الـ ‪ Stop‬الـ ‪ Function‬بتاعت الـ ‪ setTimeout‬مش هتشتغل‬

‫ممكن اكتب الـ ‪ Event‬الـ ‪Click‬كدا كمان بالـ ‪addEventListener‬‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪setInterval and clearInterval Lesson #105‬‬

‫ن‬
‫ه بالظبط زي الـ ‪ setTimeout‬يف طريقة الكتابة‬
‫ببساطة شديدة جدا الـ ‪ setInterval‬ي‬
‫الل بتحدده‬
‫الفرق الوحيد بينهم ان الـ ‪ setTimeout‬بتنفذ ‪ Function‬مرة واحده بعد الوقت ي‬
‫الل انت محدده ولكن بدون توقف هتفضل‬
‫عل حسب الوقت ي‬
‫فه بتنفذ الـ ‪ Function‬ي‬
‫اما الـ ‪ setInterval‬ي‬
‫تعيد تنفيذ الـ ‪ Function‬لحد ما تعملها ‪clear‬‬

‫ر‬
‫يبف الـ ‪ setTimeout‬بتنفذ ‪ Function‬مرة واحدة بس وخالص اما الـ ‪ setInterval‬بتكرر الـ ‪ Function‬لحد ما‬
‫ي‬
‫تعملها ‪Clear‬‬
‫المثال األول لـ ‪Anonymous Function‬‬

‫ن‬ ‫ن‬
‫معن الكود دا ان كلمة ‪ Msg‬هتتطبع يف الـ ‪ Console‬كل ثانية لماال نهاية لحد ما تعمل ‪ Clear‬للـ ‪Code‬‬
‫ي‬

‫المثال ن‬
‫التان لـ ‪Named Function‬‬
‫ي‬
 ‫ن‬
‫كذلك الحال لو فيه ‪ Arguments‬كل حاجه عملنها يف الـ ‪ setTimeout‬هتتكرر عادي بس فيه فرق زي ما قولنا‬
‫ان الـ ‪ setInterval‬بيفضل يكرر الـ ‪Function‬‬

‫هنا بقا انا عندي ‪ Counter‬بيقلل من الرقم ‪ 5‬ويفضل ينقص ‪ 1‬كل ثانيه ممكن استخدم الـ ‪clearInterval‬‬
‫ن‬
‫بدون ما يكون يف زرار ‪ ...‬ببساطة شديدة جدا هعمل رشط لما الـرقم ‪ 5‬دا يساااوي "‪ "0‬العداد يقفل‬
‫التنازل‬
‫ي‬ ‫او الـ ‪ setInterval‬تقف ومتكملش العد‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫ن‬
‫بالش اعذار وحجج او بالش تحبب نفسك يف القاعدة واالنتخة قوم اعمل لنفسك جدول بسيط حدد فيه‬
‫أولوياتك وابدأ تنفيذها واحدة ورا التانية وكرر دا يوميا‬

‫اذكر هللا ️♥‬

‫شء قدير‬ ‫ال إله اال هللا وحده ال رشيك له ‪ ..‬له الملك وله الحمد وهو عل كل ر‬
‫ي‬
‫الح القيوم واتوب اليه‬
‫استغفروا هللا العظيم الذي ال إله اال هو ي‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬ ‫اللهم ّ‬

‫العل العظيم‬
‫ي‬ ‫ال حول وال قوة اال باهلل‬
‫ن‬
‫الظالمي‬ ‫ن‬
‫إن كنت من‬
‫ال إله اال انت سبحانك ي‬
‫ال تنسونا من دعواتكم‬
 ‫‪Window Location Object Lesson #106‬‬

‫الل جواها هنقدر نتعامل مع كل حاجه تخلص الـ ‪URL‬‬

‫عن طريق الـ‪ location object‬ومن خالل الـ‪ methods‬ي‬
‫ولو حبيت استعلم عن الـ ‪ location‬دا هالقيه فيه كتت من الـ ‪ properties‬و الـ ‪methods‬‬

‫ن‬
‫بمعن اصح اعمله ‪ get‬وبعدين اغت قيمته لو حابب ‪set‬‬ ‫بتاع او‬ ‫ممكن استعلم عن الـ ‪href‬‬
‫ي‬ ‫ي‬

‫ن‬ ‫ن‬ ‫ن‬

‫يعن أي موقع‬
‫‪ href‬هتالحظ ان أي موقع بتتصفحة ن يف الـ ‪ Browser‬هيكون متسجل ي‬ ‫ملحوظة يف استخدام الـ‬
‫ن‬
‫هتفتحه هيكون متسجل يف الـ ‪ history‬ليه بقولك كدا عشان يف ‪ methods‬تانية ممكن استخدمها بتحذف‬
‫أي تصفح بيتم من الـ ‪history‬‬

‫‪By: Amr Elsayed‬‬

 ‫‪HTML‬‬

‫‪JS‬‬

‫ن‬ ‫ن‬
‫كمان من خالل الـ ‪ href‬اقدر اروح الي ‪ section‬موجود عندي يف الصفحة او اقدر اروح الي صفحة تانية يف أي‬
‫ن‬
‫تان‬
‫موقع ي‬

‫الل مفتوح منه‬ ‫‪port‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫وكمان‬ ‫بتاع‬ ‫الموقع‬ ‫اسم‬ ‫اعرف‬ ‫ان‬‫بيتم استخدام الـ ‪ host‬نف ن‬
‫ي‬ ‫ي‬ ‫ي ي‬
‫ر‬
‫والـ ‪ hostname‬زيه ولكن الفرق انه مش بيجيب الـ ‪ port‬بس مش اكت‬

‫ر‬ ‫ن‬
‫هالف اسم الموقع‬
‫ي‬ ‫يعن لو فتحت موقع اكاديمية الزيرو واستعلمت عن الـ ‪host‬‬
‫ي‬

‫الفكرة كلها ان الموقع مفهوش ‪ port‬لذلك الـ ‪ Host‬والـ ‪ hostname‬هتالقيهم زي بعض‬

‫‪By: Amr Elsayed‬‬

 ‫عن طريق الـ ‪ hostname‬لو فاتح موقع وفاتح من خالله ر‬
‫اكت من سيكشن متفرع تقدر تغت الـ ‪ hostname‬بس‬
‫ن‬ ‫ر‬
‫ه‬‫وباف الـ ‪ sections‬المفتوحة هتفضل موجودة يف الـ ‪ url‬زي ما ي‬
‫ي‬

‫ه ‪ http‬وال ‪https‬‬
‫الل بفتح منها الموقع هل ي‬
‫عن طريق الـ ‪ protocol‬بقدر استعلم عن االتفاقية ي‬

‫واقدر احول من ‪ https‬لـ ‪ http‬وهكذا‬

‫الل انا فاتحه‬

‫عن طريق الهاش ‪ hash‬بقدر استعلم عن الصفحات المتفرعة من الموقع ي‬

‫عل حاجة معينة لو حد مثال جاي من صفحة‬

‫يمكن استخدام الـ ‪ hash‬فيما بعد عشان لو حابب تعمل ‪ check‬ي‬
‫ن‬
‫معي يحصل لما يوصل للموقع بتاعك وهكذا‬ ‫معينة وعايز ‪action‬‬

‫بيتم استخدمها لعمل ‪ reload‬للصفحة لو حابب تستخدم دا‬

 ‫بعد كدا عندي الـ ‪ replace‬والـ ‪assign‬‬

‫ن‬
‫الفرق بينهم ان استخدام الـ‪ replace‬مبيخليش الصفحات تتسجل يف الـ ‪ History‬النه بيعمل استبدال للصفحة‬
‫ن‬
‫المفتوحة بصفحة تانية فدي بتحل محل دي ومبيكونش ليها وجود يف الـ ‪ history‬لو اتغتت بعد كدا لصفحة‬
‫تانية‬

‫ن‬
‫اما الـ ‪ assign‬بتحتفظ بالصفحات عادي يف الـ‪ history‬زيــها زي الـ ‪href‬‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Window Open And Close Lesson #107‬‬

‫ن‬
‫أوال الـ ‪ Close‬المتخصصة يف قفل الـ ‪ Window‬مش هتشتغل غت مع ‪ Window‬معمولها ‪ Open‬من الـ ‪JS‬‬

‫ن‬ ‫ن‬
‫وف حاجات ليها ‪Default Value‬‬
‫من ‪ 4‬حاجات وكلهم اختياري ي‬
‫الـ ‪ window.open‬بقا بتقبل ي‬
‫الل هتتفتح‬
‫]‪ URL [Opt‬الخاص بالـ ‪ window‬ي‬

‫]‪ Window Name Or Target Attr [Opt‬بتدي ‪ identifier‬للصفحة بتاعتك او ممكن تكتب‬
‫ن‬
‫الل بيفتح الصفحة مكان‬
‫ي‬ ‫‪_self‬‬ ‫تكتب‬ ‫او‬ ‫‪New‬‬ ‫‪Tab‬‬ ‫ف‬
‫الل بيفتح الصفحة ي‬
‫‪ target attribute‬زي الـ ‪ _blank‬ي‬
‫المفتوحة‬

‫ن‬ ‫ن‬
‫الممتات بتاعتها زي طولها وعرضها وموقعها ف‬ ‫والل من خاللها تقدر تتحكم يف‬
‫]‪ Win Features [Opt‬ي‬
‫الشاشة وهكذا‬

‫ن‬
‫]‪ History Replace [Opt‬لو انت عايز تفتح ‪ Window‬مكان ‪ window‬تانية هل هتسيبها يف الـ ‪ History‬وال‬
‫ال وبتقبل ‪boolean value‬‬

‫‪By: Amr Elsayed‬‬

 ‫اذكر هللا ️♥‬
‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫اللهم ّ‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته‬
‫ن‬
‫الظالمي‬ ‫ان كنت من‬ ‫ن‬
‫ال إله اال انت سبحانك ي‬
‫العل العظيم‬
‫ي‬ ‫ال حول وال قوة اال باهلل‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫ال تنسونا من دعواتكم‬
‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫‪Window History Object Lesson #108‬‬

‫ن‬
‫الل اتفتحت يف الـ ‪History‬‬
‫بيجيب الـ ‪ Length‬او عدد الصفحات ي‬

‫من خاللهم بقدر ارجع خطوة للخلف او اروح خطوة لالمام‬

‫الل عايز انتقل ليه‬

‫بحط جواها الـ ‪ position‬او رقم الصفحة ي‬
‫ولو كتبت القيمة ‪ 0‬هيعمل ‪ Reload‬للصفحة بتاعتك‬

‫‪By: Amr Elsayed‬‬

 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ن‬
‫الظالمي‪.‬‬ ‫إن كنت من‬‫اللهم نإن أستغفرك واتوب إليك‪ ،‬ال إله اال انت سبحانك ن‬
‫ي‬ ‫ي‬
‫حسن هللا ال إله اال هو عليه توكلت وهو رب العرش العظيم‪.‬‬
‫ري‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
 ‫‪Scroll, ScrollTo, ScrollBy, Focus, Print, Stop Lesson #109‬‬

‫وه بتعمل ‪Reload‬‬

‫الـ ‪ Stop‬بتستخدم لعمل ‪ Stop‬للصفحة ي‬
‫الـ ‪ print‬بتستخدم لفتح قائمة الطباعة ‪ ..‬ومستقبال هتقدر تتحكم‬
‫ن‬ ‫ن‬
‫الل حابب انه يطبع من الصفحة‬ ‫يف الجزءالمعي ي‬
‫ن‬
‫خالل‬
‫ي‬ ‫من‬ ‫‪open‬‬ ‫معمولها‬ ‫صفحة‬ ‫عندي‬ ‫لو‬ ‫ف‬‫الـ ‪ focus‬بيستخدم ي‬
‫ان اقدر اعمل ‪ focus‬عليها‬ ‫ن‬
‫ي‬

‫ن‬ ‫ن‬ ‫ن‬ ‫أي الفرق ن‬

‫االتني بيعملوا نفس النتيجة‪ ،‬ولكن يف مشكلة يف التوافقيه الحدهم‬ ‫بي كلمة ‪ scroll‬بس و ‪ScrollTo‬‬
‫نف بعض المتصفحات مش ر‬
‫اكت‬ ‫ي‬

‫الـ ‪ ScrollTo‬بتستخدم عشان لو حابب اعمل ‪ Scroll‬لمكان محدد من الصفحة ولو فضلت تكررها هيعيد‬
‫ن‬
‫يعن‬
‫الـ ‪ scrolling‬لنفس االبعاد من جديد مش هيكمل ع القديم ي‬

‫الـ ‪ ScrollBy‬بتستخدم عشان لو حابب اعمل ‪ Scroll‬لمكان محدد من الصفحة ولو فضلت تكررها هيكمل الـ‬
‫ن‬
‫تان ويكمل ع القديم عكس الـ ‪ScrollTo‬‬ ‫ن‬
‫يعن كل مره تكتبها هيعمل ‪ scroll‬ي‬
‫‪ scrolling‬لنفس االبعاد ي‬
 ‫ن‬
‫بمعن أوضح الـفرق ن‬
‫بي الـ ‪ ScrollTo‬والـ ‪ scrollBy‬هو ان الـ ‪ ScrollTo‬لما تستخدمها وتكتب فيها احداثيات‬ ‫ي‬
‫معينة هيوديك لالحداثيات دي ولو كررت كتابة الـ ‪ ScrollTo‬بنفس االحداثيات هوديك ليها برضو من جديد‬

‫تان هتبدا من مكان ما كنت واقف عند اخر‬‫هتوح ليها ولو عيدتها ن‬
‫اما الـ ‪ scrollBy‬بقا لو كتبت احداثيات معينة ر‬
‫ي‬
‫ن‬
‫تان مش هيبدا من‬ ‫ن‬
‫احداثيات وصلتلها وتكمل عليها ملوش عالقة انت واقف في مكان ما تكون واقف هيتحرك ي‬
‫األول زي الـ ‪ ScrollTo‬ويروح لنفس االحداثيات‬

‫الل بالعرض‬ ‫ر‬ ‫ن‬

‫االفف او الـ ‪ scroll‬ي‬
‫ي‬ ‫الل هو المحور‬
‫بتعت عن المحور ‪ X‬ي‬
‫الـ ‪ 500‬دي يف كل األحوال ر‬
‫الل بالطول‬
‫أش او العمودي او الـ ‪ scroll‬ي‬
‫الل هو المحور الر ي‬
‫بتعت عن المحور ‪ Y‬ي‬
‫اما الـ ‪ 200‬دي ر‬

‫ن‬ ‫ن‬
‫اليمي ‪ 3000px‬وهتحكم يف سلوب الـ ‪ scroll‬بحيث يكون‬ ‫هنا انا بعمل ‪ Scroll‬من ع الشمال ‪ 2000px‬ومن ع‬
‫‪ smooth‬او ناعم اثناء عملية الـ ‪scrolling‬‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Scroll To Top Using ScrollY Lesson #110‬‬

‫ن‬
‫أوال كدا الـ ‪ pageXOffset === scrollX‬وكذلك الـ ‪ .. pageYOffset === scrollX‬ي‬
‫يعن ممكن استخدم أي‬
‫واحد فيهم مع االخذ باالعتبار ان الـ ‪ PageOffset‬لو بتتعامل ر‬
‫اكت مع متصفحات قديمة‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬ ‫طيب تعال نفهم ن‬
‫بتاع وخزنته يف ‪btn‬‬
‫ي‬ ‫معن الكود دا بالظبط أول حاجه انا عملت ‪ Target‬للـ ‪button‬‬
‫ي‬ ‫ي‬

‫بعد كدا عملت ‪ Event‬الـ ‪ scroll‬من خالل الـ ‪ addEventListener‬وعملت ‪ Function‬هتأدي وظيفة معينة‬
‫اكت من او يساوي ‪ 600‬هنعمل ظهور للـ ‪button‬‬ ‫عملت بعد كدا رشط بقوله فيه لو الـ ‪ window.scrollY‬بقت ر‬
‫ن‬ ‫ن‬ ‫ن‬
‫يعن بجرد ما اعمل ‪ scroll‬أوصل للقيمة ‪ 600‬بالطول هيبدا يظهر الـ ‪ button‬يف الصفحة‬ ‫المختف ‪ ..‬ي‬
‫ي‬
‫ن‬
‫تان‬ ‫ن‬
‫يختف ي‬
‫ي‬ ‫والـ ‪ else‬األختة بتقول العكس اول ما أكون اقل من الـ ‪ 600‬دي الزرار دا يرجع‬

‫عل الزرار بقول فيه اول ما اضغط ع الزرار دا يعمل الـ ‪function‬‬
‫بعد كدا عملت ‪ Event‬كمان خاص بالـ ‪ click‬ي‬
‫ان بحدد فيها قيم او احداثيات عشان أتوجه‬ ‫ن‬
‫الل سبق واتعلمت منها ي‬ ‫الل منها هستخدم الـ ‪ ScrollTo‬ي‬
‫ي‬
‫لالحداثيات دي‬
‫لالعل خالص بطريقة ‪ Smooth‬وناعمة بس كدا‬
‫ي‬ ‫بمجر ما اضغط ع الزرار هنتقل‬
 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫بالش حجج وكسل ومترات فاضيه اشتغل ع نفسك ر‬

‫اكت ️♥‬ ‫ر‬

‫اذكر هللا ️♥‬

‫سبحان هللا وبحمده ‪ ..‬سبحان هللا العظيم‬
‫الح القيوم و أتوب إليــه‬
‫أستغفر هللا العظيم الذي ال الـه اال هو ي‬
‫حسن هللا ال الـه اال هو عليه توكلت وهو رب العرش العظيم‬
‫ري‬
‫ال تنسونا من دعواتكم‬
‫‪By: Amr Elsayed‬‬
 Assignments From [102] = > [110]
]110[ >= ]102[ :‫لينك التكليفات‬
01 :‫التكليف‬

// Assignment 1
let promptNum = prompt("Print Numbers From - To", "Example 5 - 20");

let counter = promptNum.split("-").sort();

let count = setInterval(() => {

let myDiv = document.createElement("div");
myDiv.innerHTML = counter[0]++;
if (myDiv.innerHTML === counter[1]) {
clearInterval(count);
}
document.body.appendChild(myDiv);
}, 0);

02 :‫التكليف‬

By: Amr Elsayed

// Assignment 2

let div = document.createElement("div");

let heading = document.createElement("h1");
let msg = document.createElement("p");
let button = document.createElement("button");

let headingText = document.createTextNode("Welcome");

heading.appendChild(headingText);

let msgText = document.createTextNode("Welcome To Elzero Web School");

msg.appendChild(msgText);

let buttonSign = document.createTextNode("X");

button.appendChild(buttonSign);

div.appendChild(heading);
div.appendChild(msg);
div.appendChild(button);

// Styling

document.body.style.cssText =
"font-family: Tohama, Arial; display: flex; justify-content: center;
align-items: center; text-align: center;";

div.style.cssText =
"position: relative; transform: translateY(50%); font-size: 15px;
background-color: #F5F3F4; padding: 20px 100px;
box-shadow: -1px 3px 28px -7px;";

msg.style.cssText = "font-size: 15px;";

button.style.cssText =
"position: absolute; right: -3%; top: -9px; border: 2px solid white;
border-radius: 50%; background-color: red; width: 30px; height: 30px;
font-size: 17px; color: white; font-weight: bold; cursor: pointer;";

setTimeout(() => {
document.body.appendChild(div);
}, 5000);
button.addEventListener("click", () => {
div.remove();
});

By: Amr Elsayed

 03 :‫التكليف‬

// Assignment 3
let downCount = document.querySelector("div");

let count = setInterval(() => {

downCount.innerHTML -= 1;
if (downCount.innerHTML === "0") {
clearInterval(count);
}
}, 1000);

04 :‫التكليف‬

// Assignment 4
let urlChange = document.querySelector("div");

setInterval(() => {
urlChange.innerHTML -= 1;
if (urlChange.innerHTML === "0") {
window.location.assign("https://elzero.org/");
}
}, 1000);

By: Amr Elsayed

 05 :‫التكليف‬

// Assignment 5
let openURL = document.querySelector("div");

let count = setInterval(() => {

openURL.innerHTML -= 1;
if (openURL.innerHTML === "5") {
window.open(
"https://Elzero.org",
"_blank",
"width= 400, height= 400, left= 300, top = 100"
);
} else if (openURL.innerHTML === "0") {
clearInterval(count);
}
}, 1000);

By: Amr Elsayed

 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫شء قدير‪.‬‬ ‫ال إله اال هللا وحده ال رشيك له ‪ ..‬له الملك وله الحمد وهو عل كل ر‬
‫ي‬
‫الح القيوم واتوب اليه‪.‬‬
‫استغفروا هللا العظيم الذي ال إله اال هو ي‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‪.‬‬ ‫اللهم ّ‬
‫ن‬
‫الظالمي‪.‬‬ ‫ن‬
‫أن كنت من‬
‫ال إله اال انت سبحانك ي‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
 ‫‪Local Storage Lesson #111‬‬

‫ن‬ ‫ن‬
‫الـ ‪ Local Storge‬عبارة عن ‪ Property‬يف الـ ‪ window‬من خاللها بقدر اتحكم يف الـ ‪Storage object‬‬
‫ر‬ ‫ن‬
‫بتاعن و احتفظ بيها‬
‫ي‬ ‫الـ ‪ Storage object‬عبارة عن ‪ object‬بقدر أخزن فيه بيانات واستخدمها يف الصفحة‬

‫ن‬
‫بيعتت ‪ object‬فقدر اسجل فيه البيانات زي دروس الـ ‪object‬‬
‫ر‬ ‫ممكن اخزن يف الـ ‪ Storage‬بكذا طريقة وألنه‬

‫الـ ‪ storage object‬بيكون عبارة عن ‪ Key‬و ‪ Value‬زي ما كنت بكتب الـ ‪ Object‬بالظبط‬

‫كالتال‪:‬‬ ‫ن‬
‫ي‬ ‫اوصلها‬ ‫ممكن‬ ‫دي‬ ‫‪local‬‬ ‫‪storage‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫طيب لو حابب اعرف القيم الموجودة ي‬

‫‪1‬‬

‫‪2‬‬
‫‪3‬‬
‫‪4‬‬
 ‫ن‬
‫الل بقدر اضيف فيها بيانات يف الـ ‪ local storage object‬من ضنهم الـ ‪Dot Notation‬‬
‫ودي كل الطرق ي‬
‫و الـ ‪ Bracket Notation‬وكذلك الـ ‪setItem Method‬‬

‫الل فاتت بتاعت الـ ‪Notation‬‬

‫لو عايز بقا أوصل للـ ‪ objects‬دي واستخدمها او اطبعها بستخدم نفس الطرق ي‬
‫او باستخدم الـ ‪getItem Method‬‬

‫ن‬
‫وبالطريقة دي انا كدا استخدمتها يف الصفحة عندي ومهما اقفل الصفحة وافتح هتفضل الصفحة محتفظة‬
‫بالـ ‪ Background color‬دي‬
 ‫ر‬
‫هالف ان الـ ‪ Color‬اتحذف‬
‫ي‬ ‫لو عايز اشيل عنض واحد من الـ ‪ Storage‬بستخدم الـ ‪removeItem‬‬

‫وبستخدم الـ ‪ clear‬لو حابب احذف كل الـ ‪ Keys‬من الـ ‪Local Storage‬‬

‫ن‬
‫عل حسب مكانه يف الـ ‪storage‬‬
‫بيجبل الـ ‪ key‬او الـ ‪ item‬ي‬
‫ي‬ ‫الـ ‪ Get Key‬بديله الـ ‪ index‬وهو‬

‫ن‬
‫يف حاجات مهمه عن الـ ‪ local Storage‬لو فاتح ‪ privet tap‬وقفلتها مش هيتم حفظ اخر حاجه استخدمتها‬
‫استخدامك للـ ‪ HTTP‬مختلف تماما عن الـ ‪ HTTPS‬من حيث أسلوب واستخدام الـ ‪local Storage‬‬
‫مفيش ‪ Expiration Time‬او وقت بتتشال فيه البيانات من الـ ‪local Storage‬‬

‫‪By: Amr Elsayed‬‬

Local Storage Color App Practice Lesson #112
HTML & CSS & JS ‫اكواد الدرس بالكامل موجودة هنا‬

HTML

Js

By: Amr Elsayed

 ‫ونشحه‬ ‫نشح الجزء دا قبل ما نبدا نكتب شغل الـ ‪ local storage‬ر‬ ‫تعال ر‬
‫ي‬
‫ن‬ ‫ن‬ ‫ر‬
‫الل يف الـ ‪ HTML‬يف متغت اسمه ‪Lis‬‬‫دلوقن مخزن كل الـ ‪ Lis‬ي‬
‫ي‬ ‫أوال انا‬
‫ن‬ ‫مسكت المتغت دا عملت عليه ‪ forEach Loop‬عشان ر‬
‫امش عل كل ‪ li‬موجودة يف الـ ‪ul‬‬
‫ي‬
‫عل كل ‪ li‬عندي‬ ‫بعد كدا مسكت كل الـ ‪ Lis‬عندي عملت عليهم ‪ event‬الـ ‪ Click‬وجواه عملت ‪ loop‬ن‬
‫تان ي‬
‫ي‬
‫عل كل العنارص‬‫الل اسمه ‪ active‬يتشال من ي‬ ‫عل أي ‪ li‬الـ ‪ Class‬ي‬
‫بحيث لما يحصل ‪ click‬ي‬
‫ن‬
‫بيمته‬ ‫الل‬ ‫ن‬ ‫ن‬
‫تان غته ‪ class‬الـ ‪ active‬ي‬
‫عل أي عنض ‪ li‬ي‬
‫يعن أي عنض ‪ active‬عندي بمجرد ما ادوس عليه او ي‬
‫ي‬
‫هيتشال خالص‬

‫ن‬
‫الل مررته كـ ‪ parameter‬يف الـ ‪ addEvnentListener‬عشان استخدمها مع ‪method‬‬ ‫بعدها مسكت الـ ‪ e‬ي‬
‫جاهزة عندي اسمها ‪ current target‬طيب معناه أي الكالم دا ؟!‬
‫الل‬
‫الل تم الضغط عليه طيب لما الـ ‪ current‬دا ي‬‫معناه ان أي عنض ‪ li‬ادوس عليه هو دا الـ ‪ current target‬ي‬
‫تم الضغط عليه يتم فعليا الضغط عليه يحصل ايه ؟!‬
‫ر‬ ‫ن‬
‫الل جنبه‬
‫باف الـ ‪ lis‬ي‬
‫يحصل انه يتم إضافة ‪ class‬الـ ‪ active‬ليه عشان يمته ويظهره هو عن ي‬
‫عل ‪ li‬يتخزن اللون‬
‫بعد كدا انا نبس ضيفت لون الـ ‪ current target‬للـ ‪ local storage‬بحيث كل ما اضغط ي‬
‫بتاع الـ ‪ li‬دا يف الـ ‪local Storage‬‬
‫الل عندي ‪ ..‬ربطت الـ ‪ background color‬بتاعته بلون‬ ‫بعد كدا مسكت المستطيل الكبت ي‬
‫الـ ‪ current target‬الل تم الضغط عليه فعليا من خالل ان اغت الـ ‪ style‬بتاعه ودا حصل من خالل انن‬
‫ي‬ ‫ي‬
‫الل تم الضغط عليه‬
‫الل من خاللها برضو بعرف اللون ي‬‫استخدمت الـ ‪ data set‬بتاعت الـ ‪ Current target‬دا ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫بعد كدا انا عايز اثبت الـ ‪ current color‬يف الـ ‪ local Storage‬عشان لما اعمل ‪ refresh‬او اقفل الصفحة‬
‫وافتحها االفيه محتفظ باللون‬
‫هعمل رشط من خالله انا بتاكد ان كان فيه لون تم اضافته او ن يف لون بالفعل موجود ن يف الـ ‪ local storage‬؟!‬
‫تمام طول ما فيه ‪ Color‬موجود اول حاجه تتعمل‪:‬‬
‫الل دوست عليه‬
‫‪ -1‬يتم تغت لون الـ ‪ Div‬الكبت بنفس لون الـ ‪ li‬ي‬
‫ن‬ ‫‪ -2‬ن‬
‫الل عندي يف حالة لو عملت ‪ reload‬للـ ‪page‬‬ ‫ي‬ ‫‪li‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫كل‬ ‫عل‬
‫ي‬ ‫من‬ ‫‪active‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫‪class‬‬ ‫يشيل‬ ‫حاجه‬ ‫تان‬
‫ي‬
‫ر‬
‫هالف الـ ‪ Div‬الكبت المتسطيل محتفظ بأخر لون‬ ‫ي‬ ‫الن دا لو محصلش بمجرد ما اعمل ‪ reload‬للصفحة‬
‫ن‬
‫الل اصبح‬‫الل هو اول ‪ li‬يف الـ ‪ HTML‬هو ي‬ ‫طبيع ي‬
‫ي‬ ‫الل واخد ‪ class‬الـ ‪ active‬بشكل‬ ‫دوست عليه ولكن الـ ‪ li‬ي‬
‫الل كدا كدا واخد‬ ‫‪ active‬ر‬
‫لونه اخر لون انا ضغط عليه والـ ‪ li‬الـ ‪ active‬هو العنض ي‬ ‫ن‬
‫فبف الـ ‪ div‬المستيطل‬
‫ي‬
‫ن‬
‫فاهمن‬
‫ي‬ ‫أصال‬ ‫طبيع‬
‫ي‬ ‫بشكل‬ ‫‪active‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫عنض‬ ‫عليه‬ ‫دا‬ ‫‪LI‬‬ ‫اول‬ ‫‪HTML‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫الـ ‪ .. class by default‬ما عندي ي‬
‫ف‬

‫ان‬‫ن‬
‫الل هيتم الضغط عليه فعال وذلك من خالل ي‬ ‫‪ -3‬تالت حاجة انا بقا بضيف الـ ‪ class‬الـ ‪ active‬دا للعنض ي‬
‫ن‬
‫مني انه األحمر ؟!‬ ‫الل هدوس عليه دا لو مثال كان األحمر طيب هعرف‬
‫ن‬ ‫ن‬ ‫بقوله اللون ي‬
‫الل موجود يف الـ ‪local storage‬‬‫الل انا حططها يف الـ ‪ HTML‬تساوي نفس اللون ي‬‫‪ data-color‬ي‬ ‫قولتله لما الـ‬
‫ن‬ ‫ن‬
‫الل هيكون موجود فعال يف الـ ‪ local storge‬عشان انا ضغت عليه بايدي فتم تخزينه يف الـ ‪local storage‬‬ ‫ي‬
‫ن‬ ‫ن‬
‫الل هو ازرق مثال يف كل‬
‫ي‬ ‫‪data-color‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫بيساوي‬ ‫بقا‬ ‫لو‬ ‫دا‬ ‫‪local‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫الل ي‬
‫اذا انا بقوله شوف بقا اللون ي‬
‫يبف اللون دا حط عليه ‪ class‬الـ ‪active‬‬‫ر‬
‫األحوال ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫ن‬ ‫ُ‬
‫الفضول وحب االستطالع والتعلم هيحطك يف ‪ Position‬وأماكن كتت حلوة‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشة و مداد كلماته‬
‫الح القيوم واتوب إليه‬
‫استغفروا هللا العظيم الذي ال إله اال هو ي‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬

 ‫‪Session Storage And Use Cases Lesson #113‬‬

‫ن‬
‫الـ ‪ Session Storage‬هو نفس كل حاجه يف الـ ‪ Local Storage‬ولكن الفرق بينهم ان الـ ‪ Session‬بيحتفظ‬
‫ر‬ ‫ن‬
‫هتالف البيانات دي ولكن لو عملت‬
‫ي‬ ‫يعن بمجرد ما تقفل الصفحة وترجع مش‬ ‫بالبيانات لجلسة واحدة فقط ي‬
‫حن لو قفلت‬‫ر‬
‫بالبيانات ي‬‫ن‬
‫الل بيحتفظ‬ ‫‪ reload‬للصفحة هتالقيه لسه محتفظ بالبيانات عكس الـ ‪ Local‬ي‬
‫ن‬
‫االتني واحدة‬ ‫ن‬
‫االتني وزي ما قولنا طريقة الكتابة يف‬ ‫ن‬
‫تان ‪ ..‬اذا دا الفرق ن‬
‫بي‬ ‫نهان وفتحته ي‬
‫المتصفح ي‬

‫بالنسبال‬
‫ي‬ ‫الل ممكن استخدم فيها الـ ‪ Session Storage‬وتكون مفيدة‬ ‫طيب أي الحاالت‬
‫ن‬ ‫ين‬
‫استخدام‬
‫ي‬ ‫مثال لو عندي ‪ form‬يف الصفحة واليوزر عمل ‪ reload‬بالغلط بعد ما كتب كالم يف الـ ‪ input‬هنا‬
‫ن‬
‫الل اتكتبت دي مدام لسه يف نفس الجلسة‬ ‫هيخل المتصفح يحتفظ بالبيانات ي‬
‫ي‬ ‫للـ ‪Session‬‬

‫يعتت ‪ Session‬جديدة تماما‬ ‫ن‬

‫تان ر‬ ‫لو قفلت الـ ‪ tab‬وفتحتها ي‬
‫ر‬ ‫ن‬
‫يبف استخدم ‪duplicate‬‬
‫وف نفس الوقت تحتفظ بالـ ‪ session‬ي‬
‫لو حابب تفتح ‪ Tab‬جديدة ي‬
‫بيعتت كانه ‪ Session‬جديدة تماما‬
‫ر‬ ‫لو فتحت ‪ new tab‬من نفس الـ ‪URL‬‬

‫‪By: Amr Elsayed‬‬

 ‫‪Bom Challenge Lesson #114‬‬

‫بتاع كان معقد شوية‬ ‫الكود‬ ‫الن‬ ‫نف فيديو فيه تطبيق كامل للـ ‪ TODO List‬مع الـ ‪ Local Storage‬هيفيدك ر‬
‫اكت‬
‫ي‬ ‫ي‬
‫الل يفيدك افضل‬‫ومحتاج اعدل عليه حاجات كتت فمحبتش اضيع وقتك وقولت اديك الفيديو ي‬

‫لينك الفيديو‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 Assignments From [111] = > [114]
]114[ >= ]111[ :‫لينك التكليفات‬
01 :‫التكليف‬

HTML
<!--Start Fonts-->
<div class="style">
<label for="Fonts">Choose Font</label>
<select name="" id="Fonts" class="fonts">
<option value="Open-Sans">Open Sans</option>
<option value="Cairo">Cairo</option>
<option value="Roboto">Roboto</option>
</select>
</div>
<!--End Fonts-->

<!--Start Colors-->
<div class="style">
<label for="Colors">Choose Color</label>
<select name="" id="Colors" class="colors">
<option value="#000000">Black</option>
<option value="#ff0000">Red</option>
<option value="#0000ff">Blue</option>
<option value="#008080">Teal</option>
<option value="#FFA500">Orang</option>
<option value="#A020F0">purple</option>
</select>
</div>
<!--End Colors-->

<!--Start Size-->
<div class="style">
<label for="Font-size">Choose Font-Size</label>
<select name="" id="Font-size" class="font-size">
<option>16px</option>
<option>17px</option>
<option>18px</option>
<option>19px</option>
<option>20px</option>
<option>21px</option>
<option>22px</option>
<option>23px</option>
<option>24px</option>
<option>25px</option>
<option>26px</option>
<option>27px</option>
<option>28px</option>
<option>29px</option>
<option>30px</option>
 </select>
</div>
<!--End Size-->

<!-- Stat Test -->

<p>This Paragraph For Test</p>
<!-- End Test -->

CSS
body {
/* Default Settings */
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #000;
}
.style {
margin: 30px;
display: block;
}
label {
margin-right: 10px;
}

JS
let fonts = document.querySelector(".fonts");
let colors = document.querySelector(".colors");
let size = document.querySelector(".font-size");

if (window.localStorage.length > 0) {
document.body.style.fontFamily =
window.localStorage.getItem("fontFamily");
}
if (window.localStorage.length > 0) {
document.body.style.color = window.localStorage.getItem("color");
}
if (window.localStorage.length > 0) {
document.body.style.fontSize =
window.localStorage.getItem("fontSize");
}

fonts.addEventListener("change", () => {
window.localStorage.setItem("fontFamily", fonts.value);
document.body.style.fontFamily = fonts.value;
});

colors.addEventListener("change", () => {
window.localStorage.setItem("color", colors.value);
document.body.style.color = colors.value;
});
size.addEventListener("change", () => {
window.localStorage.setItem("fontSize", size.value);
document.body.style.fontSize = size.value;
});

02 :‫التكليف‬

HTML
<form>
<input type="text" placeholder="Write Your Name" class="name">
<input type="email" placeholder="Email" class="email">
<input type="tel" placeholder="Your Number" class="number">
</form>

<div class="style">
<label for="Colors">Choose Color</label>
<select name="" id="Colors" class="colors">
<option value="#000000">Black</option>
<option value="#ff0000">Red</option>
<option value="#0000ff">Blue</option>
<option value="#008080">Teal</option>
<option value="#FFA500">Orang</option>
<option value="#A020F0">purple</option>
</select>
</div>

CSS
body {
font-family: Arial, Helvetica, sans-serif;
}
.style {
margin-top: 25px;
display: block;
text-align: center;
}
label {
margin-right: 10px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input {
margin-top: 20px;
padding: 10px 15px;
width: 30%;
border: 1px solid #A020F0;
outline: none;
}
 JS
let theName = document.querySelector(".name");
let theEmail = document.querySelector(".email");
let theNumber = document.querySelector(".number");
let colors = document.querySelector(".colors");

if ((window.sessionStorage = window.sessionStorage.getItem("autoSave-Name"))) {
theName.value = window.sessionStorage.getItem("autoSave-Name", theName.value);
}

if ((window.sessionStorage = window.sessionStorage.getItem("autoSave-Email"))) {
theEmail.value = window.sessionStorage.getItem(
"autoSave-Email",
theEmail.value
);
}

if (
(window.sessionStorage = window.sessionStorage.getItem("autoSave-Number"))
) {
theNumber.value = window.sessionStorage.getItem(
"autoSave-Number",
theNumber.value
);
}

if ((window.sessionStorage = window.sessionStorage.getItem("color"))) {
colors.value = window.sessionStorage.getItem("color", colors.value);
}
theName.addEventListener("input", () => {
window.sessionStorage.setItem("autoSave-Name", theName.value);
});

theEmail.addEventListener("input", () => {
window.sessionStorage.setItem("autoSave-Email", theEmail.value);
});

theNumber.addEventListener("input", () => {
window.sessionStorage.setItem("autoSave-Number", theNumber.value);
});

colors.onchange = () => {
window.sessionStorage.setItem("color", colors.value);
};

‫ال تنسونا من دعواتكم‬

Never Forget That (Always Search)
By: Amr Elsayed
 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته‬
‫ن‬
‫العالمي‬ ‫ينبع لجالل وجهك ولعظيم سلطانك يا رب‬‫كثتا مبارًكا فيه كما ن‬ ‫ً‬
‫حمدا ً‬
‫طيبا ً‬ ‫اللهم لك الحمد‬
‫ي‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬‫اللهم ّ‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
 ‫‪Destructuring Arrays Part 1 Lesson #115‬‬

‫ببساطة شديدة جدا عن طريق الـ ‪ Destructuring‬هتقدر إنك تستخرج البيانات سواء من الـ ‪arrays‬‬
‫ن‬
‫الل تحبها‬
‫والـ ‪ objects‬و الـ ‪ Maps‬وتضيفهم يف متغتات وبعدين تبدأ تتعامل مع المتغتات دي بالكيفية ي‬

‫‪Destructuring Syntax‬‬

‫لو عندي ‪ Array‬فيها بعض األسماء زي الـ ‪ myFriends‬بمجرد ما اكتب الـ ‪ syntax‬بتاع الـ ‪Destructuring‬‬
‫ن‬ ‫ر‬
‫هيبف عندي القدرة ع استخدام كل عنض يف الـ ‪ array‬لوحدة‬‫ي‬
‫ن‬
‫طيب الـ ‪ Syntax‬دا معناه أي ؟! ‪ ....‬معناه ان كل متغت زي ‪ a,b,c,d‬بقا بيحتوي عل كل ‪ index‬يف الـ ‪Array‬‬

‫ن‬
‫المثال دا يف حالة ان مفيش أي وجود ألي متغتات وانا بعملها ‪declare‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫طيب يف حالة لو عندي أصال المتغتات دي موجودة بالفعل وكل متغت ليه قيمة فعلية‬

‫الل المسؤولة عن عملية‬ ‫كل الل عليا ن‬

‫بدون الـ ‪ let‬ي‬
‫ن‬
‫ان اكتب نفس الـ ‪ syntax‬بتاع الـ ‪ Destructuring‬ولكن‬‫ي‬ ‫ي‬
‫الـ ‪ Declaration‬النك لو حبيت تغت قيم المتغتات دي للقيم الموجودة يف الـ ‪ array‬و احتفظت بكلمة ‪let‬‬
‫ر‬ ‫ن‬
‫منطف الن المتغتات دي بالفعل تم‬‫ي‬ ‫بشكل‬ ‫‪error‬‬ ‫عندك‬ ‫هيحصل‬ ‫األول‬ ‫المثال‬ ‫ف‬
‫الل كانت موجودة ي‬‫زي ي‬
‫اإلعالن عنها بشكل مسبق‬

‫الل‬ ‫للقيم‬ ‫‪Update‬‬ ‫اعمل‬ ‫ان‬ ‫يبف استنتج من الكالم دا لو عندي متغتات معلن عنها بالفعل وتتحتوي عل قيم ن‬ ‫ر‬
‫ي‬ ‫ي‬ ‫ن ي‬ ‫ي‬
‫ن‬
‫بستغن عن ‪ let‬يف حالة لو هعمل ‪ Update‬للمتغتات‬ ‫فيها دي ودا بيتم عن طريق االستغناء عن كلمة ‪ ... let‬ركز‬
‫ي‬

‫ن‬ ‫ن‬ ‫وف حالة ن‬ ‫ن‬

‫هستغن عن الـ ‪ d‬مثال‬
‫ي‬ ‫ما‬ ‫زي‬ ‫‪Destructuring‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫بتاع‬ ‫‪Syntax‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫ي‬ ‫ات‬
‫المتغت‬ ‫احد‬ ‫عن‬ ‫استغنيت‬ ‫ان‬
‫ي‬ ‫ي‬

‫ر ن‬
‫يعتت‬
‫الل كانت موجودة وقت اإلعالن عنه لما قيمته كانت بـ ‪ 4‬الن انا ر‬
‫يبف يف الحالة دي هيجيب قيمة الـ ‪ d‬ي‬
‫ي‬
‫معملتش أي ‪ Update‬للمتغت ‪ d‬بأي قيمية جديدة‬
 ‫ر‬ ‫ن‬
‫يبف لما‬
‫طيب ي نف حالة لو زودت عدد المتغتات عندي زي المتغت ‪ e‬مثال وبما ان الـ ‪ e‬ملوش أي قيمة فعليه ي‬
‫هيقول ‪ Undefined‬الن الـ ‪ e‬دا فعليا ملوش أي قيمة‬
‫ي‬ ‫الل هيحصل انه‬
‫اطبعه يف الـ ‪ console‬ي‬

‫ر‬
‫هتبف قيمته موجودة‬ ‫لكن لو عملت ‪ update‬للمتغت ‪ e‬دا او أعلنت عن قيمة للمتغت دا‬
‫ي‬

‫ولو علمت أي ‪ update‬الي متغت دا الـ ‪ syntax‬بتاع الـ ‪ Destructuring‬مش هياخد فيها وهيتجاهلها وياخد‬
‫ن‬
‫التال لما احط قيمة للمتغت ‪ a‬هالحظ انه تجاهل القيمة دي‬
‫ي‬ ‫القيمة الموجودة يف الـ ‪ array‬زي المثال‬

‫‪By: Amr Elsayed‬‬

 ‫طيب لو عايز اتجاهل انا أي عنض نف الـ ‪ array‬ولكن اسم "‪ "Ali‬مثال فهسيب مكانه ن‬
‫فاض فقط‬
‫ي‬ ‫ي‬

‫واي عنض عايز اتجاهل وجوده نف الـ ‪ Array‬هسيب مكانه ن‬

‫فاض‬
‫ي‬ ‫ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Destructuring Arrays Part 2 Lesson #116‬‬

‫ن‬ ‫ن‬
‫الل يف الـ ‪nested‬‬
‫الدرس دا بيتكلم عن لو عندي ‪ Nested Array‬يف ‪ array‬تانيه ازاي اقدر أوصل للعنارص ي‬

‫الل هو ن يف ‪ nested Array‬من ‪ nested Array‬أصال كنت بعمل أي ؟!‬

‫لو مثال حابب أوصل لـ "‪ "Gamal‬ي‬

‫طيب لو حابب أوصل لـ "‪ "Shady‬و "‪ "Gamal‬ولكن عن طريق الـ ‪Destructuring‬‬

‫طيب هنا انا عملت أي ؟!‬

‫الل هما "‪ "Ahmed‬و "‪ "Sayed‬و "‪ "Ali‬بعدين دخلت ع يل‬ ‫ن‬
‫وتان وتالت اسم ي‬
‫انا هنا تجاهلت اول ي‬
‫الل جنبه‬
‫االول عوضت عن اسم "‪ "Shady‬بالمتغت ‪ a‬بعدين تجاهلت "‪ "Amr‬االسم ي‬
‫ي‬ ‫الـ ‪nested Array‬‬
‫الل هو أول اسم‬
‫بعد كدا دخلت ع الـ ‪ nested Array‬التانية تجاهلت فيها "‪ "Mohamed‬ي‬
‫وبعدين عوضت عن اسم "‪ "Gamal‬بالمتغت ‪b‬‬
 ‫‪Destructuring Arrays Part 3 Swapping Variables Lesson #117‬‬

‫الغرض من الدرس دا هو معرفة ازاي اقدر اعمل ‪ Swap‬او تبديل للمتغتات بالقيم بتاعتهم‬
‫ن‬ ‫ن‬
‫طريقتي الطريقة قديمة والطريقة الجديدة الخاصة بالـ ‪Destructuring‬‬ ‫وف‬
‫ي‬
‫الطريقة القديمة‬

‫ن‬
‫ه‬
‫الل كلمة "‪ "Video‬يف متغت اسمه ‪ Stash‬اذا المتغت ‪ Stash‬دا قيمته الحالية ي‬
‫خزنت قيمة الـمتغت ‪ Book‬ي‬
‫كلمة "‪"Video‬‬
‫ن‬ ‫ن‬
‫بمعن ادق عملت‬‫ي‬ ‫او‬ ‫‪Book‬‬ ‫المتغت‬ ‫ف‬
‫الل كلمة "‪ "Book‬خزنتها ي‬
‫بعد كدا مسكت قيمة المتغت ‪ Video‬ي‬
‫‪ Update‬للمتغت ‪ Book‬بالقيمة "‪"Video‬‬
‫ن‬
‫بعد كدا مسكت المتغت ‪ Video‬دا عملت لقيمته ‪ Update‬بالقيمة المتخزنة يف المتغت ‪Stash‬‬
‫فالنتيجة النهائية بقت ان المتغت ‪ Book‬قيمته أصبحت كلمة "‪ "Book‬والمتغت ‪ Video‬قيمته أصبحت كلمة‬
‫"‪"Video‬‬
‫الطريقة الجديدة طريقة الـ ‪Destructuring‬‬

‫ال المتغت ‪Video‬‬

‫ه كلمة "‪ "Video‬ي‬
‫الل ي‬
‫أسندت قيمة المتغت ‪ Book‬ي‬
‫ال المتغت ‪Book‬‬
‫ه كلمة "‪ "Book‬ي‬
‫الل ي‬
‫وأسندت قيمة المتغت ‪ Video‬ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ن‬
‫الظالمي‬ ‫ال إله اال انت سبحانك إ ن ين كنت من‬
‫اللهم ّ‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬
‫الحمد هلل و الشكر هلل‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ‬ ‫َ‬
‫ي القلوب‬ ‫ِ‬ ‫م‬ ‫ط‬ ‫ت‬ ‫اَّلل‬ ‫ر‬
‫ِِ ِ ِ‬‫ك‬‫ذ‬‫ب‬ ‫ال‬ ‫أ‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
 ‫‪Destructuring Objects Part 1 Lesson #118‬‬

‫دلوقن هستخدمها مع الـ ‪Object‬‬‫ر‬ ‫ببساطة شديدة جدا زي ما كنت بستخدم الـ ‪ Destructuring‬مع الـ ‪Array‬‬
‫ي‬
‫ن‬ ‫ن‬
‫بيكون يف اختالف طفيف بس يف الـ ‪ Syntax‬بتاع الـ ‪ Destructuring‬اثناء التعامل مع الـ ‪Object‬‬

‫الل فيه كنت بطبعها عادي زي ما اتعلمت‬ ‫ر‬

‫دلوقن لو عندي الـ ‪ user‬دا وهو ‪ Object‬لو كنت حابب اطبع القيم ي‬
‫ي‬ ‫ن‬
‫يف دروس الـ ‪ object‬سواء بطريقة الـ ‪ dot notation‬أو الـ ‪brackets notation‬‬

‫‪By: Amr Elsayed‬‬

 ‫كالتال‪:‬‬ ‫يعت عنها‬ ‫ر‬
‫دلوقن انا ممكن اخزن كل قيمة من قيمة الـ ‪ user object‬داخل متغت ر‬ ‫طيب‬
‫ي‬ ‫ي‬

‫الل اسمها ‪ theName‬داخل‬ ‫‪property‬‬ ‫ـ‬ ‫ل‬ ‫با‬ ‫الخاصة‬ ‫مة‬ ‫القي‬ ‫ع‬ ‫بيحتوي‬ ‫بف‬‫ًاذا المتغت ‪ theName‬ر‬
‫ي‬ ‫ر ي‬
‫باف الـ ‪Properties‬‬
‫الـ ‪ user obj‬وكذلك ي‬
‫الل اتخزنت فيه‬ ‫ن‬
‫إن استخدم اسم المتغت ي‬
‫الل عليا ي‬‫ولو حابب اطبع الـ ‪ Properties‬دي بالقيم بتاعتها كل ي‬
‫فقط‬

‫ن‬
‫الل فات دا كان مجرد طرق قديمة كنت بستخدمها عشان أوصل ألي ‪ property‬عندي يف الـ ‪object‬‬
‫كل ي‬

‫ن‬ ‫دلوقن هستخدم طريقة الـ ‪ Destructuring‬نف ن‬ ‫ر‬

‫ان اعمل ‪ Extract‬او استخراج للـ ‪ data‬الموجودة يف الـ ‪Obj‬‬
‫ي ي‬ ‫ي‬
‫الل هستخرجها دي معمولها ‪Declare‬‬ ‫ن‬
‫الل اتسأل قبل كدا هل الـ ‪ data‬ي‬
‫تان نسأل نفس السؤال ي‬ ‫طيب نرجع ي‬
‫مسبقا وال انا لسه هعملها عملية ‪declaration‬‬
‫انا سبق وعملتلها ‪ declare‬فوق‬
‫تان هيحصل عندي ‪ Error‬و هو ان الـ ‪ Variables‬دي ‪has already been declared‬‬ ‫ن‬
‫إذا لو استخدمت ‪ let‬ي‬
 ‫إذا خالص انا مش هستخدم الـ ‪ let‬الن بالفعل المتغتات دي انا أعلنت عنها مسبقا‬

‫ن‬
‫بس هنا هالحظ ان يف ‪ Error‬حصل عند عالمة الـ = وحله بيكون بسيط جدا‬

‫ن‬
‫قوسي ()‬ ‫حل المشكلة دي ه ان احط الـ ‪ Destructuring‬ن‬
‫بي‬ ‫ي‬

‫ن‬
‫ان مكتبهاش وانا بعمل ‪Destructuring‬‬
‫ولو حابب استبعد أي ‪ Property‬مش حابب اطبعها كل المطلوب ي‬

‫‪By: Amr Elsayed‬‬

 ‫ر‬
‫بتاعن ‪ ..‬لكن لو مش عامل ‪declaration‬‬ ‫ات‬
‫للمتغت‬ ‫مسبق‬ ‫‪declaration‬‬ ‫عامل‬ ‫ان‬ ‫كل الل فات دا نف حالة ن‬
‫ي‬ ‫ي‬ ‫ي‬ ‫ي‬ ‫ن‬
‫يف الحالة دي بعمل ‪ declaration‬وانا بكتب الـ ‪ syntax‬بتاع الـ ‪destructuring‬‬

‫طيب لو حابب اتجاهل عنض او ‪ property‬مثال من الـ ‪ destructuring‬زي ‪ theTitle‬مثال‬

‫هشيل اسمه بس مش ر‬
‫اكت‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Destructuring Objects Part 2 Lesson #119‬‬

‫الن يتم انشاؤها يمكن تغت اسمها عادي جدا داخل عملية الـ ‪Destructuring‬‬ ‫ر‬
‫المتغتات ي‬
‫ن‬
‫بحط جنب اسم المتغت المراد تغت اسمه عالمة الـ ‪ : Colon‬وبعدين ابدأ يف كتابة االسم الجديد‬

‫بمنته البساطة غتت اسم المتغتات ‪ theName‬و ‪ theAge‬ألسماء تانية وبعدين استخدمتهم‬
‫ي‬ ‫أهو‬

‫لو حابب اعمل ‪ declare‬لـ ‪ property‬جديدة داخل الـ ‪ destructuring‬وأبدأ استخدمها ‪ ..‬ال وممكن احطلها‬
‫اسم مختض زي ما عملت فوق كدا‬
 ‫ن‬ ‫ن‬
‫دا يف حالة الـ ‪ destructuring‬لكن لو انا أصال ضيفت الـ ‪ property‬دي من البداية من البداية يف الـ ‪user obj‬‬
‫بقيمة مختلفة غت كلمة ‪ red‬وليكن ‪ Black‬مثال‬

‫ن‬ ‫ن‬
‫الل ضيفتها اثناء عملية الـ ‪ Destructuring‬وهياخد القيمة الموجودة يف‬
‫ي‬ ‫القيمة‬ ‫هيتجاهل‬ ‫دي‬ ‫الحالة‬ ‫ف‬
‫ي‬
‫الـ ‪user object‬‬

‫لو عندي ‪ Nested Object‬موجودة وعايز استخدم الـ ‪destructuring‬‬

‫األساش‬
‫ي‬ User Obj ‫ فقط من غت ما استخدم خالص الـ‬nested Object ‫ للـ‬destructuring ‫وممكن اعمل‬

‫ال تنسونا من دعواتكم‬

Never Forget That (Always Search)
By: Amr Elsayed
Destructuring Function parameters Lesson #120

‫ن‬
Function ‫ بعدين استدعيت الـ‬obj ‫ اسمه‬Parameter ‫ ومررت جواها‬Function ‫يف المثال دا انا عملت‬
‫الل فيه‬ ‫ر‬
‫ ي‬properties ‫ بالـ‬user object ‫ه الـ‬
‫الل ي‬
‫ ي‬argument ‫ دا بـ‬param ‫بتاعن وعوضت عن الـ‬
‫ي‬
function ‫ من خالل الـ‬user obj ‫الل جوا الـ‬
‫ ي‬properties ‫بعدين بدأت بقا استخدم الـ‬

By: Amr Elsayed

 ‫طيب طريقة الـ ‪ destructuring‬عبارة عن أي بقا ؟!‬

‫فهم انا‬
‫ي‬ ‫الفايدة من استخدام الـ ‪ Destructuring‬بشكل عام حسب‬
‫ن‬
‫الحال عندي انها بديل كويس وشي ــع واقل يف كتابة الكود لو عايز تجيب معلومة وتبعد عن‬
‫ي‬ ‫هو االعتقاد‬
‫الطريقة التقليدية‬
‫يعن مثال لو عندي ‪ User Object‬جواها ‪Skills <---- Nested Object‬‬ ‫ن‬
‫ي‬
‫اكت من ضمن الـ ‪ Skills‬دي ‪ CSS‬مثال‬‫جوا الـ ‪ Skills‬دي نف عندي‪ Three Properties‬او ر‬
‫ي‬
‫فعشان توصل للـ ‪ CSS‬دي بدل ما تكتب الكود كدا ‪user.skills.css <----‬‬

‫ر‬
‫مباش‬ ‫عل طول بشكل‬ ‫دي‬ ‫‪Css‬‬ ‫تجيب‬ ‫‪Destructuring‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫بتاع‬ ‫‪Syntax‬‬ ‫ـ‬ ‫ل‬‫با‬ ‫ممكن‬ ‫انك‬ ‫نف ن‬
‫حي‬
‫ي‬ ‫ي‬
‫وممكن تحطلها حرف مختض زي ‪C‬‬
‫ه ‪ nested‬جوا‬ ‫ن‬
‫الل موجودة عندك لو ي‬
‫يعن اعتقد الغرض منه هو شعة وسهولة انك تعمل ‪ Extract‬للداتا ي‬
‫ي‬
‫جوا ‪nested‬‬
‫ر‬
‫تبف ابسط بالـ ‪destructuring‬‬
‫و لو عايز تعمل ‪ Swap‬لقيم من متغت ألخر ممكن ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫اصت‬
‫اصت ر‬
‫واصت ر‬
‫ر‬ ‫متستعجلش النتايج‬
‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ر‬ ‫ر‬
‫شء قدير‬
‫عل كل ي‬ ‫ال اله اال هللا وحده ال شيك له ‪ ..‬له الملك وله الحمد وهو ي‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته‬
‫الح القيوم واتوب اليه‬
‫استغفروا هللا العظيم الذي ال اله اال هو ي‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫ال تنسونا من دعواتكم‬
‫‪By: Amr Elsayed‬‬
 ‫‪Destructuring Mixed Content Lesson #121‬‬

‫ببساطة شديدة جدا انا عندي ‪ Object‬وجواه ‪ Nested Array‬وجواه ‪Nested Object‬‬
‫ن‬
‫األساش‬
‫ي‬ ‫استخدمت الـ ‪ Destructuring Syntax‬زي ما اتعلمت عوضت عن كل متغت يف الـ ‪Object‬‬
‫بمتغت بديل ليه زي ‪ theName‬عوضت عنه بحرف ‪ n‬وكذلك ‪ theAge‬عوضت عنه بحرف ‪a‬‬
‫ن‬ ‫واستخدمت بدايل المتغتات دي الل ه الحروف نف ن‬
‫ان اطبع بعض الـرسايل يف الـ ‪Console‬‬
‫ي ي‬ ‫ي ي‬

‫‪By: Amr Elsayed‬‬

 Destructuring Challenge Lesson #122

Challenge ‫لينك الـ‬

‫ن‬ ‫ن‬
122 - 114 ‫ يف تكليفات األسبوع دا من الدرس‬6 ‫ موجود يف التكليف‬Challenge ‫نفس الـ‬

‫ال تنسونا من دعواتكم‬

Never Forget That (Always Search)
By: Amr Elsayed
 Destructuring Challenge Solution
// Solution

let [obj1, obj2, obj3] = myFriends;

if (chosen === 1) {
let { title: a, age: b, available: c, skills: [, d], } = obj1;
console.log(a);
console.log(b);
console.log(c ? "Available" : "Not Available");
console.log(d);
} else if (chosen === 2) {
let { title: a, age: b, available: c, skills: [, d], } = obj2;
console.log(a);
console.log(b);
console.log(c ? "Available" : "Not Available");
console.log(d);
} else if (chosen === 3) {
let { title: a, age: b, available: c, skills: [, d], } = obj3;
console.log(a);
console.log(b);
console.log(c ? "Available" : "Not Available");
console.log(d);
} else {
console.log(`Work is Not Available Now`);
}

Nested Object 3 ‫ جواها‬Array ‫دلوقن عند‬ ‫ر‬ ‫التال انت‬ ‫ دا اعتمد ع‬Challenge ‫حل الـ‬
‫ي‬ ‫ي‬
‫ بمتغت‬Array ‫ داخل الـ‬object ‫ وعوضت عن كل‬Array ‫ مع الـ‬Destructuring ‫استخدمت الـ‬
‫ وهكذا‬Object ‫تان‬ ‫ يحل محل ن‬obj 2 ‫ عندك وكذلك الـ‬Object ‫ دا يحل محل اول‬obj 1 ‫ًإذا الـ‬
‫ي‬
‫ر‬
‫ موجود عندي‬Object ‫ أول‬Target ‫يبف انا كدا بـ‬ ‫ر‬
‫ ي‬Chosen = 1 ‫بعد كدا عملت الـشط بتاعك لو الـ‬
‫ دا‬Object ‫ جوا اول‬Property ‫ وبدأت امسك كل‬obj 1 ‫الل عوضت عنه بـ‬ ‫ ي‬object ‫مسكت كدا انا اول‬
‫ تجاهلت اول واحدة‬skills ‫ وعن‬, c ‫ بـ‬available ‫ وعن الـ‬, b ‫ بـ‬age ‫ وعن الـ‬, a ‫ بالمتغت‬title ‫عوضت عن الـ‬
‫ن‬
d ‫ بـالمتغت‬Skill ‫تان‬
‫وعوضت عن ي‬
‫ن‬ ‫ حطيت ر‬c ‫ عند المتغت‬.. ‫ عندي‬object ‫نف كل‬
‫الل هتتبطع‬
‫ي‬ ‫الرسالة‬ ‫ف‬
‫ي‬ ‫يحط‬ True ‫بقت‬ Available ‫ـ‬ ‫ل‬‫ا‬ ‫لو‬ ‫ط‬‫ش‬ ‫ي‬
Not Available ‫ يحط‬False ‫لو بقت‬ ..... true

‫ال تنسونا من دعواتكم‬

Never Forget That (Always Search)
By: Amr Elsayed
 Assignments From [115] = > [122]
]122[ >= ]115[ :‫لينك التكليفات‬
01 :‫التكليف‬
// Assignment 1

let myNumbers = [1, 2, 3, 4, 5];

// Write Your Destructuring Assignment Here

let [a, , , , e] = myNumbers

console.log(a * e); // 5

02 :‫التكليف‬
// Assignment 2

let mySkills = [
"HTML",
"CSS",
"JavaScript",
["PHP", "Python", ["Django", "Laravel"]],
];

// Write Your Destructuring Assignment Here

let [a, b, c, [d, e, [f, g]]] = mySkills;

console.log(`My Skills: ${a}, ${b}, ${c}, ${d}, ${e}, ${f}, ${g}`);

// My Skills: HTML, CSS, JavaScript, PHP, Python, Django, Laravel

03 :‫التكليف‬
// Assignment 3

let arr1 = ["Ahmed", "Sameh", "Sayed"];

let arr2 = ["Mohamed", "Gamal", "Amir"];
let arr3 = ["Haytham", "Shady", "Mahmoud"];

// Play With Arrays To Prepare For Destructuring

// Write Your Destructuring Assignment Here
let myFriends = arr1.concat(arr2, arr3)

let [a, , , , , , , c, b] = myFriends;

console.log(`My Best Friends: ${a}, ${b}, ${c}`);

// My Best Friends: Shady, Mahmoud, Ahmed
// Another Solution

let arr1 = ["Ahmed", "Sameh", "Sayed"];

let arr2 = ["Mohamed", "Gamal", "Amir"];
let arr3 = ["Haytham", "Shady", "Mahmoud"];

arr3.push(arr1);

[, a, b, [c, ,]] = arr3;

console.log(`My Best Friends: ${a}, ${b}, ${c}`);

// My Best Friends: Shady, Mahmoud, Ahmed

04 :‫التكليف‬
// Assignment 4
const member = {
age: 30,
working: false,
country: "Egypt",
hobbies: ["Reading", "Swimming", "Programming"],
};

// Write Your Destructuring Assignment Here

({ age: a, w } = member);

console.log(`My Age Is ${a} And Iam ${w ? "" : "Not"} Working`);

// My Age Is 30 And Iam Not Working
({ country: c } = member);
console.log(`I Live in ${c}`);
// I Live in Egypt
({
hobbies: [h1, , h3],
} = member);
console.log(`My Hobbies: ${h1} And ${h3}`);
// My Hobbies: Reading And Programming

By: Amr Elsayed

 05 :‫التكليف‬
// Assignment 5

const game = {
title: "YS",
developer: "Falcom",
releases: {
"Oath In Felghana": ["USA", "Japan"],
"Ark Of Napishtim": { US: "20 USD", JAP: "10 USD" },
Origin: "30 USD",
},
};

// Write Your Destructuring Assignment/s Here

const { title: t, developer: d } = game;
const [o, a] = Object.keys(game.releases);
const [u, j] = Object.values(game.releases)[0];
const { US: u_price, JAP: j_price } = Object.values(game.releases)[1];
const { Origin: or } = game.releases;

console.log(`My Favourite Games Style Is ${t} Style`);

// My Favourite Games Style Is YS Style

console.log(`And I Love ${d} Games`);

// And I Love Falcom Games

console.log(`My Best Release Is ${o} It Released in ${u} & ${j}`);

// My Best Release Is Oath In Felghana It Released in USA & Japan

console.log(`Although I Love ${a}`);

// Although I Love Ark Of Napishtim

console.log(`${a} Price in USA Is ${u_price}`);

// Ark Of Napishtim Price in USA Is 20 USD

console.log(`${a} Price in Japan Is ${j_price}`);

// Ark Of Napishtim Price in Japan Is 10 USD

console.log(`Origin Price Is ${or}`);

// Origin Price Is 30 USD

Challenge ‫ هو نفس الـ‬6 ‫التكليف الـ‬

‫ال تنسونا من دعواتكم‬

Never Forget That (Always Search)
By: Amr Elsayed
 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫اشتغل بذكاء وتر ن‬

‫كت‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫سبحان هللا وبحمده سبحان هللا العظيم‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫‪By: Amr Elsayed‬‬
 ‫‪Set Data Type And Methods Lesson #123‬‬

‫ببساطة شديدة جدا نقدر نقول ان الـ ‪ Set Data Type‬شبيه جدا بعمل الـ ‪ Array‬العادية من حيث شد‬
‫ن‬
‫البيانات ومن حيث التعديل عليهم سواء باإلضافة او الحذف الي عنض يف البيانات دي اال ان فيه اختالفات‬
‫كتت بينهم‬

‫الل اسمها ‪ myData‬دي هتعرض كل البيانات الموجودة دي‬ ‫ن‬

‫يعن مثال اول اختالف بينهم ان الـ ‪ Array‬ي‬
‫ي‬
‫ن‬
‫يعن الـ ‪ 1‬المتكرر دا‬
‫المتكررة ويدمجهم بحيث يبقو عنض واحد فقط ي‬
‫ن‬
‫اما الـ ‪ Set Data‬يياخد كل العنارص‬
‫ن‬
‫هيكون يف االخر عنض واحد فقط متمثل يف رقم ‪1‬‬

‫ن‬ ‫ن‬
‫تان حاجة يف حالة الـ ‪ Array‬كنت بستخدم الـ ‪ Length‬عشان اعرف عدد العنارص الموجودة‬
‫ي‬

‫اما ن يف حالة الـ ‪ Set Data‬بستخدم الـ ‪size‬‬

 ‫ن‬ ‫ن‬
‫عل العنارص الموجود بالـ ‪ index‬زي ما كنت بعمل يف الـ ‪Array‬‬
‫يف الـ ‪ Set Data Type‬مقدرش اعمل ‪ Access‬ي‬
‫ر‬ ‫ر‬
‫بيعت عن القيمة ‪1‬‬
‫هالف الـ ]‪ index[0‬ر‬
‫ي‬ ‫عل عكس الـ ‪array‬‬
‫هالف النتيجة ‪ Undefined‬ي‬
‫ي‬ ‫ولو جربت اعمل كدا‬

‫نف ر‬
‫اكت من طريقة لكتابة ال ـ ‪ Syntax‬بتاع الـ ‪Set Data‬‬ ‫ي‬
‫ن‬ ‫ن‬
‫الل انشأتها مسبقا‬
‫الل هتتكتب باألرقام الموجودة يف الـ ‪ Array‬ي‬
‫إن اعوض عن الـ ‪ data‬ي‬
‫زي مثال ي‬

‫الل عايز اعملها ‪Set‬‬

‫زي مثال استخدام الـ ‪ add‬وجواه القيم ي‬

‫فاض وابدأ جواه اضيف البيانات الل انا عايزها وعل ر‬

‫اكت من سطر‬ ‫ممكن كمان اعمل الـ ‪ set‬ن‬
‫ي‬ ‫ي‬ ‫ي‬

‫ن‬
‫وف النهاية هتأدي نفس الغرض بالظبط‬
‫كل الطرق دي زي بعض ي‬
 ‫ن‬
‫يعن ع سبيل المثال انا هحذف العنض ‪2‬‬
‫ممكن احذف عنض من الـ ‪ set data‬بطريقة الـ ‪ delete‬ي‬

‫ر‬ ‫ن‬
‫الل هعمله يكون لعنض فعليا موجود عندي‬
‫‪ Console‬بشط ان الـ ‪ delete‬ي‬ ‫لو كتبت ‪ Code‬الـ ‪ delete‬دا يف الـ‬
‫ر‬
‫هالف النتيجة ‪true‬‬
‫ي‬ ‫اج احذفه‬‫زي العنض رقم ‪ 2‬لما ر ي‬

‫اما لو عملت ‪ delete‬لعنض مش موجود أصال عندي زي رقم ‪ 20‬مثال فهتكون النتيجة ‪False‬‬

‫طبعا كالعادة لو استخدمت الـ ‪ clear‬فدا معناه ان كل حاجه حرفيا هتتحذف‬

‫‪By: Amr Elsayed‬‬

 ‫معي ن‬
‫ن‬ ‫ن‬
‫يعن‬
‫ي‬ ‫عنض‬ ‫عن‬ ‫ابحث‬ ‫عايز‬ ‫وليكن‬ ‫عندي‬ ‫موجودة‬ ‫الل‬
‫ي‬ ‫‪data‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫طيب لو عايز ابحث عن حاجة ي‬
‫ن‬
‫كنت يف الـ ‪ array‬بستخدم ‪ method‬اسمها ‪include‬‬

‫ن‬
‫يف الـ ‪ set data type‬بستخدم حاجه اسمها ‪has‬‬

‫ان اكتب حرف الـ ‪ a‬بطريقة الـ ‪small‬‬‫ن‬

‫الل اتعلمتهم مسبقا وانا بستخدم الـ ‪ has‬زي ي‬
‫ممكن أدمج ‪ method‬من ي‬
‫ولكن ادمج مع الحرف دا الـ )(‪toUpperCase‬‬

‫الحظ ان حرف الـ ‪ A‬وهو ‪ capital‬كدا لو بحثت عنه وكتبت الحرف ‪ Small‬هتكون النتيجة ‪false‬‬

‫ن‬
‫استثن منها كل‬
‫من االستخدامات العظيمة للـ ‪ Set Data Type‬هو مثال لو عندي ‪ Array‬وجيت قولتلك ن ي‬
‫الحروف واألرقام المتكررة عشان تعمل الحركة دي ممكن تستخدم الـ ‪ reduce‬او الـ ‪ filter‬يف الـ ‪Higher‬‬
‫بمنته البساطة‬
‫ي‬ ‫‪ Order Func‬ولكن مع الـ ‪ Set Data Type‬هتقدر بسطر كود واحد بس تنفذ العملية دي‬

‫‪By: Amr Elsayed‬‬

 ‫‪Set vs WeakSet And Garbage Collector Lesson #124‬‬

‫ر‬
‫صديف عشان ابسطلك الدنيا قدر المستطاع‬ ‫بص يا‬
‫ي‬
‫ن‬ ‫ن‬
‫بمعن‬
‫ي‬ ‫‪JavaScript‬‬ ‫ـ‬ ‫ل‬‫با‬ ‫عالقة‬ ‫أي‬ ‫ملوش‬ ‫أصال‬ ‫دا‬ ‫المصطلح‬ ‫‪Garbage‬‬ ‫‪collection‬‬ ‫اسمه‬ ‫عندي‬ ‫مصطلح‬ ‫ف‬‫ي‬ ‫أوال‬
‫ن‬ ‫ن‬
‫يعن أي لغة برمجة‬‫‪ Memory Management‬يف أي لغة بتستخدمها ‪ ..‬ي‬ ‫ن‬
‫انه المصطلح دا ليه عالقة بالـ‬
‫بتتعلمها بيكون جواها ‪ Engine‬يف اللغة دي خاص بالتعامل مع الـ ‪ Memory‬وبيدير الـ ‪Memory‬‬

‫خلين اديك مثال ع الجافاسكريبت لو عندي بيانات معينة زي ‪ object‬او ‪Function‬‬‫ن‬ ‫طيب‬
‫ن‬ ‫ي‬
‫تان ؟!‬
‫او أي ‪ primitive data‬البيانات دي بعد ما استخدمتها افرض انا مش عايز استخدمها ي‬
‫الل بيحصل ان الـ ‪ Engine‬بتاع اللغة بتوح يعمل ‪ Clean‬للبيانات دي من الـ ‪ Memory‬النها اكيد بتشغل ن‬
‫حت‬ ‫ي‬
‫هو دا بقا مفهوم الـ ‪Garbage collection‬‬

‫ن‬ ‫ن‬
‫الل بتـ ‪ manage‬فيها‬
‫يف لغة الـ ‪ JS‬الـ ‪ Memory Management‬بيتم ‪ Automatic‬يف لغات تانية انت ي‬
‫الـ ‪memory‬‬

‫‪By: Amr Elsayed‬‬

‫الل فات والـ ‪ WeakSet‬بتاعت الدرس دا‬ ‫ن‬ ‫ر‬
‫الل اتعلمتها الدرس ي‬
‫دلوقن بقا نفهم الفرق بي الـ ‪ Set‬ي‬
‫ي‬ ‫تعال‬
‫ي‬
‫ن‬ ‫أوال الفرق ن‬
‫بي الـ ‪ Set‬و الـ ‪ WeakSet‬يف حفظ البيانات‬

‫ن‬
‫الل بخزن فيها ‪Objects‬‬
‫‪ -1‬يف الـ ‪ Set‬بقدر أخزن أي نوع من البيانات عكس الـ ‪ WeakSet‬ي‬

‫‪Set‬‬

‫‪WeakSet‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬ ‫ن‬
‫‪ -2‬يف الـ ‪ Set‬أقدر استخدم الـ ‪ Size‬لكن دا غت متوفر يف الـ ‪WeakSet‬‬

‫ن‬
‫تعتت ‪ Alias‬او بديل لـلـ ‪value‬‬
‫‪ -3‬يف الـ ‪ Set‬بقدر استخدم الـ ‪ Keys‬و الـ ‪ values‬و الـ ‪ Entries‬وبالمناسبة الـ ‪ keys‬ر‬

‫ن‬
‫ان اعمل ‪ Iterator‬زي ما الـ ‪ for loop‬بتعمل بالظبط‬
‫الـ ‪ Values‬دي اقدر استخدمها بحيث ي‬

‫ان أعمل عمل الـ ‪ loop‬ولكن بإيدي انا ودا عن طريق الـ )(‪next‬‬‫ن ن‬ ‫ن‬
‫يعن أقدر استخدم الـ ‪ key‬أو الـ ‪ Value‬دي يف ي‬
‫ي‬
 ‫بتاع دا كدا‬
‫ي‬ ‫هستخدم الـ ‪ next‬بقا ع الـ ‪iterator‬‬

‫الل هيتعملها ‪ generate‬عشان تطبع‬ ‫ن‬

‫يعن دي القيمة ي‬ ‫جابل الـ ‪ Value‬بـ ‪ 1‬ي‬
‫ي‬ ‫هالحظ انه‬
‫بتاع مخلصش لسه فيه ‪ Values‬عندي هتطبع‬
‫ي‬ ‫اما الـ ‪ done‬بالقيمة ‪ False‬فدا معناه ان لسه الـ ‪Iteration‬‬

‫ببدأ استخدم الـ ‪ value‬بقا عشان اطبع القيمة وبكرر نفس العملية دي عشان أوصل الخر عنض عندي‬

‫ر‬
‫بالف ان الـ ‪ done‬بقت ‪ true‬دا معناه ان كل البيانات‬
‫لما بوصل لطباعة اخر ‪ Value‬عندي واستخدم الـ ‪ next‬ي‬
‫الل عندي اطبعت كلها‬
‫ي‬

‫ن‬ ‫ن‬
‫كل دا أقدر اعمله يف الـ ‪ Set‬ولكن يف الـ ‪ WeakSet‬كل دا مش متاح‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫ مقدرش استخدمها‬WeakSet ‫ لكن الـ‬forEach ‫ أقدر استخدم الـ‬Set ‫ يف الـ‬-4

‫ال تنسونا من دعواتكم‬

Never Forget That (Always Search)
By: Amr Elsayed
 ‫‪Map Data Type vs Object Lesson #125‬‬
‫ن ن‬ ‫وبي الـ ‪ Map‬والفرق ن‬
‫بي الـ ‪ Object‬الل اتعلمته ن‬
‫الدرس دا عبارة عن مقارنة ن‬
‫االتني يف تخزين واستخدام‬ ‫بي‬ ‫ي‬
‫البيانات‬

‫ن‬
‫الفاض بيكون فيه ‪ default value‬لكن الـ ‪map‬‬ ‫‪ -1‬أول فرق ن‬
‫بي الـ ‪ Object‬والـ ‪ Map‬هو ان الـ ‪Object‬‬
‫ي‬ ‫ن‬
‫مفيهوش ‪ ..‬او يف الـ ‪ Map‬تقدر انت تحدد الـ ‪ Default Value‬دي تكون عبارة عن أي‬

‫كالتال‪:‬‬
‫ي‬ ‫الل بتكلم عليها دي ‪ ..‬ايون‬
‫طيب هل اقدر اعمل ‪ Object‬مفيهوش الـ ‪ default value‬ي‬

‫‪By: Amr Elsayed‬‬

‫عل هيئة ‪String‬‬
‫عل نوع بيانات أي نوع مهما كانت لكن الـ ‪ Object‬بيقبل البيانات ي‬
‫‪ -2‬ممكن الـ ‪ Map‬يحتوي ي‬

‫ن‬
‫هتيح فعال‬
‫ير‬ ‫ه عشان استعلم عنها هل‬
‫ي‬ ‫ما‬ ‫زي‬ ‫وكتبتها‬ ‫دا‬ ‫‪Object‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫األول ي‬
‫ي‬ ‫لو طلبت اعرف القيمة‬

‫تعتت عملت ‪ Override‬عليها‬

‫هالقيه تجاهل أصال اول ‪ Key‬بالـ ‪ value‬بتاعته واخد التانية النها ر‬

‫ن‬
‫لكن بقا لو استخدمت الـ ‪ Map‬يف تخزين نفس البيانات دي وحبيت استعلم أي واحدة فيهم‬

‫عل كل واحدة‬‫هالقيه قدر فعال يتعرف ي‬

‫فيهم ويجيب قيمة كل واحدة بدون‬
‫ن‬
‫ما يكون يف حاجه اثرت ع التانية‬

‫ن‬
‫واقدر كمان احط أي نوع بياانات يف الـ ‪Map‬‬

‫ن‬ ‫ن‬ ‫الحظ ن‬

‫عل البيانات دي وكل دا داخل اطار‬
‫ي‬ ‫الحصول‬ ‫ف‬
‫ي‬ ‫‪Get‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫وبستخدم‬ ‫البيانات‬ ‫وضع‬ ‫ف‬
‫ي‬ ‫‪Set‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫بستخدم‬ ‫ان‬
‫ي‬
‫الـ ‪Map‬‬
 ‫التال‪:‬‬ ‫ن‬ ‫ن‬
‫ي‬ ‫هالحظ‬ ‫‪Object‬‬ ‫ـ‬ ‫ل‬‫وا‬ ‫‪Map‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫يعن لو جيت استعلم عن الموجود ي‬
‫ي‬

‫ن‬
‫الل هو كان ‪ 10‬و الـ ‪ Value‬بتاعته ‪Number‬‬
‫ي‬ ‫كتبته‬ ‫انا‬ ‫‪Key‬‬ ‫ألول‬ ‫وجود‬ ‫أصال‬ ‫مفيش‬ ‫‪Object‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫هالحظ ان ي‬

‫ر‬ ‫ن‬
‫هالف ان كل حاجه كتبتها موجودة‬
‫ي‬ ‫لكن يف الـ ‪Map‬‬

‫ن‬ ‫ن‬ ‫ن‬

‫الل انا كتبته عكس الـ ‪ Object‬مش مضمون يف ترتيب‬
‫ي‬ ‫بالشكل‬ ‫للبيانات‬ ‫دقيق‬ ‫ترتيب‬ ‫ف‬
‫ي‬ ‫بيكون‬ ‫‪Map‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫‪ -3‬ي‬
‫البيانات بنسبة ‪%100‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬ ‫ن‬
‫الل عندي بحتاج‬
‫ي‬ ‫العنارص‬ ‫عدد‬ ‫اجيب‬ ‫عشان‬ ‫‪Object‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫ي‬ ‫لكن‬ ‫‪Size‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫استخدم‬ ‫اقدر‬ ‫عندي‬ ‫‪Map‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫‪ -4‬ي‬
‫اعمل دا بشكل يدوي وبكذا خطوة‬

‫‪ -5‬الـ ‪ Map‬تقدر تعمل ‪ Loop‬عل العنارص الل فيه بشكل ر‬

‫مباش عكس الـ ‪ Object‬الزم عشان تعمل ‪loop‬‬ ‫ي‬ ‫ي‬
‫تعمل كذا خطوة برضو‬

‫ن‬
‫‪ -6‬الـ ‪ Map‬افضل بكتت يف الـ ‪ performance‬عكس الـ ‪Object‬‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫ن‬ ‫ن‬ ‫ن‬

‫يوم بيساعده يثقل مهاراته الجامدة‬
‫كل شخص ماهر وشاطر جدا وممت هو يف األصل عنده روتي بيكرره بشكل ي‬
‫ويعل مهاراتك‬ ‫يكت‬ ‫ن‬ ‫ر‬ ‫ر‬
‫ي‬ ‫روتي بتعمله بشكل متكرر ر‬ ‫يبف عندك‬
‫تبف جامد الزم ي‬
‫الل بتشوفها فلو عايز ي‬
‫ي‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫ن‬
‫العالمي‬ ‫كثتا مبارًكا فيه كما ن‬
‫ينبع لجالل وجهك ولعظيم سلطانك يا رب‬
‫ً‬
‫حمدا ً‬
‫طيبا ً‬ ‫اللهم لك الحمد‬
‫ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫‪Map Methods Lesson #126‬‬

‫ن‬ ‫ن‬
‫طريقتي‬ ‫أول حاجة عشان اضيف ‪ Key‬و ‪ Value‬يف الـ ‪ Map Data Type‬عندي‬
‫مباشة كـ ـ ‪ iterable‬جوا الـ ‪new Map Method‬‬‫الطريقة األول نان اضيفهم ر‬
‫ي ي‬
‫والطريقة التانية نان اضيفهم من خالل ‪ Method‬الـ ‪ .......... set‬فتعال نشوف الطريقتين‬
‫ي‬ ‫ي‬
‫أوال طريقة اإلضافة بالـ ‪Set‬‬

‫‪Key‬‬ ‫‪Value‬‬

‫وعشان اعمل ‪ Access‬عليهم باستخدم الـ ‪ get‬وجواها بيكون اسم الـ ‪Key‬‬
 ‫الطريقة التانية اضيفهم جوا الـ ‪Iterable‬‬

‫وعشان اعمل ‪ Access‬عليهم بستخدم الـ ‪ get‬من خالل الـ ‪Key‬‬

‫ان عايز اطبع الـ ‪ value‬بتاعت الـ ‪ key‬دا‬ ‫لما بستخدم الـ ‪ get‬وجواه الـ ‪ Key‬نف الـ ‪ Console.log‬فدا معناه ن‬
‫ي‬ ‫ي‬

‫ر‬ ‫ر‬
‫الل عندي ‪3‬‬
‫هالف عدد الـ ‪ Keys‬ي‬
‫ي‬ ‫دلوقن مع استخدام الـ ‪Size‬‬
‫ي‬

‫بتاع بستخدم الـ ‪delete‬‬

‫ي‬ ‫لو عايز احذف عنض من الـ ‪Iterable‬‬
‫تان هالقيه بقا ‪2‬‬‫فبمجرد ما احذف الـ "‪ "Name‬من عندي واستعلم عن الـ ‪ size‬ن‬
‫ي‬

‫ن‬
‫الحظ ان استخدام الـ ‪ delete‬يف الـ ‪ Console‬لو الـ ‪ key‬دا فعال موجود عندي النتيجة هتكون ‪true‬‬
 ‫ن‬
‫لكن لو جربت استخدم الـ ‪ delete‬يف الـ ‪ console‬ومررت ‪ Key‬مش موجود أصال زي ‪ JS‬دي مثال‬

‫ن‬ ‫ر‬
‫هالف النتيجة يف الـ ‪ Console‬عبارة عن ‪false‬‬
‫ي‬

‫عل حذف او عدم حذف العنض لو كانت النتيجة ‪ true‬فدا معناه‬ ‫ف ن‬

‫معن الـ ‪ true‬والـ ‪ false‬هنا هو تأكيد ي‬
‫ي‬
‫الن أصال مررت عنض غت‬ ‫ن‬
‫ان العنض بالفعل تم حذفه ولو كانت ‪ false‬فدا معناه ان العنض لم يتم حذفه ي‬
‫موجود‬

‫استخدام الـ ‪ Clear‬بيمسح كل حاجه موجودة وكل العنارص‬

‫ن‬
‫الل بستخدمها عشان اعمل ‪ Check‬عل ‪ key‬هل هو موجود؟‬
‫ه الـ ‪ has‬ي‬
‫بعد كدا اخر حاجه يف الدرس عندي ي‬

‫ن‬
‫يعن اول حرف منه بدل ما يكون كبت‬
‫عل عنض هو موجود عندي ولكن كتبت اسمه غلط ي‬ ‫لو عملت ‪ Check‬ي‬
‫كتبته انا صغت زي ‪ key‬الـ ‪ Name‬مثال اول حرف فيه كبت وانا هكتب اول حرف دا ‪Small‬‬

‫ه مكتوبة بالظبط‬
‫هتكون النتيجة ‪ false‬ودا معناه اسماء الـ ‪ keys‬بتكون حساسة الزم تبحث عنها زي ما ي‬
Map vs WeakMap Lesson #127

By: Amr Elsayed

 ‫‪Array.from Method Lesson #128‬‬

‫ه تحويل أي حاجه جواها لـ ‪array‬‬

‫األساش منها ي‬
‫ي‬ ‫ببساطة شديدة جدا ‪ method‬الـ ‪ Array.from‬الغرض‬
‫يعن أي ‪ Iterable‬هتحطة جوا الـ ‪ method‬دي هيتعمل منه ‪ Array‬ر‬
‫مباشة‬ ‫ن‬
‫ي‬

‫ن‬
‫شايف الـ ‪ Sequence‬بتاع "‪ "Osama‬دا هيتحول كل ‪ Character‬فيه لـ ‪ Index‬موجود يف ‪Array‬‬

‫ن‬ ‫ن‬
‫ان امرر يف الـ ‪ Iterable‬شوية ارقام‬
‫ممكن داخل الـ ‪ Array.from‬اعمل ‪ Function‬تأدي وظيفة معينة زي ي‬
‫عل نفسه‬‫والـ ‪ function‬بدورها ترجعها أرقام وكمان كل رقم مجموع ي‬

‫معن الكود دا ن يان استخدمت ‪ Function‬الغرض منها تبص ع الـ ‪ iterable‬الموجود ن يف الـ ‪Array.from‬‬
‫ن‬
‫طبعا ي‬
‫ومن ثم استخدمت الـ ‪ unary plus‬عشان ارجعهم ع شكل ارقام‬
 ‫الل هيحصل ؟!‬
‫كان ايه ي‬ ‫طيب لو مكنتش استخدمت الـ ‪unary plus‬‬
‫ن‬
‫تعال نستخدم الـ ‪Array.from‬‬
‫ي‬ ‫أصال يف العادي قبل ما استعمل الـ ‪ function‬عشان تأدي عملية الجمع دي‬
‫الل فات ولكن بدون الـ ‪function‬‬
‫عل نفس المثال ي‬ ‫ي‬

‫ن‬
‫عل هيئة ‪ string‬لذلك انا يف نفس المثال دا لما عملت‬
‫رجعال ‪ array‬فيها ارقام‪ ،‬ولكن األرقام دي ي‬
‫ي‬ ‫الل‬
‫النتيجة ي‬
‫ه تجمع كل رقم ع نفسه ‪ ....‬لو مكنتش استخدمت الـ ‪unary plus‬‬ ‫الل ي‬
‫الـ ‪ function‬عشان تأدي وظيفة ن ي‬
‫هيعتته عالمة‬
‫ر‬ ‫عل انه ‪ String‬و معامل الجمع كان‬
‫كان هيتعامل مع كل رقم موجود يف الـ ‪ array‬ي‬
‫‪ Concatenate‬أي ربط ‪ strings‬ببعض لذلك الحظ المثال القادم لما اشيل الـ ‪unary plus‬‬

‫عل نفسه ال هيعمل ‪Concatenate‬‬

‫عل انه ‪ string‬وبدل ما يجمعه ي‬
‫الحظ هيبدا يتعامل مع كل رقم ي‬

‫ممكن استخدم الـ ‪ Arrow function‬بدال من الـ ‪ Function‬العادية‬

‫‪By: Amr Elsayed‬‬

 ‫تعال بقا بعد ما اتعلمنا الـ ‪ Set data type‬و الـ ‪ Map‬ندمجهم مع الـ ‪Array.from‬‬
‫ي‬

‫ن‬
‫الممتة بس ‪ ...‬ممكن استخدم الـ ‪ Set‬صح مش كدا ؟‬ ‫ان عندي الـ ‪ array‬دي وعايز ارجع منها األرقام‬ ‫لنفتض ن‬
‫ر‬
‫ي‬

‫ر‬
‫دلوقن انا عايز النتيجة دي تكون ‪array‬‬ ‫اهو تعاملت مع الرقم المكرر وخليته رقم واحد باستخدام الـ ‪ set‬ولكن‬
‫ي‬
‫الل انا عملتها دي بقا‬
‫يح دور الـ ‪ Array.from‬لما احط جواه نتيجة الـ ‪ set‬ي‬
‫هنا بقا ر ي‬

‫عل شكل ‪Array‬‬

‫بسطر كود واحد بس قدرت احذف تكرار الرقم ‪ 1‬وكمان ارجع النتيجة ي‬
‫من وقت ومجهود وسطور كتت لذلك ادي حل مختض‬ ‫ن‬
‫ممكن أوصل لنفس الحل بطرق تانية كتت ولكن هتاخد ي‬

‫الل لما استخدمها بقدر ارجع ‪ Array‬برضو‬

‫ممكن استخدم حل اخر من خالل الـ ‪ Spread Operator‬ي‬

‫‪By: Amr Elsayed‬‬

 ‫ان اعمل ‪ return‬للـ ‪arguments‬‬ ‫لو عندي ‪ function‬اسمها ‪ thisArg‬وطلبت جواها ن‬
‫ي‬
‫التال‬
‫ي‬ ‫ومررت الـ ‪ arguments‬دي فيما بعد زي المثال‬

‫ر‬
‫رجعتل‬
‫ي‬ ‫الل مررتها فعال‬
‫هالف الـ ‪ Arguments‬ي‬
‫ي‬

‫عل شكل ‪ Array‬واحط أي قيم انا عايزها هستخدم‬

‫طيب لو عايز اعمل نفس الحركة دي وارجعهم ي‬
‫الـ ‪Array.from‬‬

‫ن‬
‫توصلن لعمل‬ ‫كل دي طرق بقدر استخدم فيها الـ ‪ Array.from‬عشان اقدر أوصل لحلول ر‬
‫مباشة وشيعة‬
‫ي‬
‫ن‬
‫بيدين مساحة اطبق حاجات كتت جدا من خصائص الـ ‪Array‬‬ ‫وبالتال لما يكون عندي ‪ Array‬دا‬ ‫‪Array‬‬
‫ي‬ ‫ي‬
‫عشان اقدر اعمل أي حاجه انا عايزها‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ن‬
‫الظالمي‬ ‫إن كنت من‬‫اللهم نإن أستغفرك واتوب إليك‪ ،‬ال إله اال انت سبحانك ن‬
‫ي‬ ‫ي‬

‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫ال تنسونا من دعواتكم‬
‫‪By: Amr Elsayed‬‬
 ‫‪Array.copyWithin Method Lesson #129‬‬

‫ان اخد جزء‬‫ن ن‬ ‫الغرض من الدرس دا استخدام ‪ Method‬اسمها ‪.. Array.copyWithin‬‬

‫بيتم استخدامها يف ي‬
‫ن ن‬ ‫ن‬
‫تان يف نفس الـ ‪array‬‬ ‫‪location‬‬ ‫ف‬ ‫ر‬
‫ي‬ ‫الل هو فيه وانسخه ي‬
‫بتاعن من الـ ‪ location‬ي‬‫ي‬ ‫من الـ ‪Array‬‬
‫تعال نشوف‬
‫ي‬ ‫عل حجم الـ ‪........ array‬‬‫دون التأثت ي‬

‫ن‬
‫ه الـ ‪ .. Target‬المقصود بيه المكان ي‬
‫الل هعمل فيه‬ ‫اول حاجه بحطها يف ‪ Method‬الـ ‪ Array.copyWithin‬ي‬
‫الل هنسخها المكان دا هو الـ ‪Target‬‬ ‫ن‬ ‫عمليه النسخ دي ‪...‬‬
‫الل عايز احط فيه العنارص ي‬‫بمعن ادق المكان ي‬
‫ي‬
‫عل سبيل المثال لو عايز انسخ العنض "‪ "A‬من مكانه واحطه مكان العنض ‪30‬‬ ‫ن‬
‫يعن ي‬‫ي‬
‫بتاع والـ ‪ index‬بتاعه هو الـ ‪2‬‬
‫ي‬ ‫اذا العنض ‪ 30‬دا هو الـ ‪Target‬‬
‫ر‬
‫يبف كدا‬
‫اذا المفروض الشكل بعد نسخ العنض "‪ "A‬ي‬

‫شوية مالحظات قبل األمثلة العملية‪:‬‬

‫ر‬ ‫ن‬
‫يبف عملية النسخ مش هتتم‬ ‫الل يف الـ ‪ Array‬ي‬‫اكت من عدد العنارص ي‬ ‫الل كتبته دا ر‬
‫‪ -1‬لو الـ ‪ Target‬ي‬
‫ن‬
‫‪ -2‬انك تكتب يف الـ ‪ target‬او الـ ‪ start‬او الـ ‪ end‬قيمة سالبة فدا معناه انك بتبدأ من اخر الـ ‪ array‬لألول‬

‫الل هاخد العنض المنسوخ من عنده او بداية الـ ‪position‬‬ ‫ن‬

‫‪ -3‬عرفت الـ ‪ target‬اذا مي بقا الـ ‪ start‬هو المكان ي‬
‫الل هبدأ النسخ من عنده‬
‫ي‬
 ‫الل هنسخ من عنده‬
‫‪ -4‬الـ ‪ end‬هو نهاية الـ ‪ position‬ي‬
‫‪ -5‬لو محددتش الـ ‪ Start‬هبدأ من ‪ index 0‬ولو محددتش الـ ‪ end‬هيكمل لحد اخر ‪index‬‬

‫‪ -6‬لو كتبت الـ ‪ Start‬و الـ ‪ End‬افتكر القاعدة ‪Not Including End‬‬

‫تعال نبدأ األمثلة العملية بقا‬

‫ي‬
‫دي الـ ‪ Array‬األصلية‬

‫الل هو مكان العنض ‪40‬‬

‫الل انا عملت ‪ target‬عليه ي‬ ‫ه الـ ‪ index‬ي‬‫دا معناه ايه ؟! ‪ ...‬دا معناه ان الـ ‪ 3‬دي ي‬
‫الل هو العنض ‪ 10‬وهياخد معاه العنارص ‪20‬‬ ‫ر‬
‫يبف هيبدأ من الـ ‪ index 0‬ي‬‫ومدام محددتش ‪ Start‬وال ‪ End‬ن ي‬
‫و ‪ 30‬و ‪ 40‬مكان العنارص الموجودة يف الـ ‪Array‬‬
‫الل هو الـ ‪Target‬‬ ‫ن‬
‫الل هو ‪ 40‬ي‬‫الل هو ‪ 10‬هيحل محل الـ ‪ index 3‬ي‬ ‫يعن الـ ‪ index 0‬ي‬‫ي‬
‫يبف العنارص دي هتحل محل الـعنارص ‪ 50‬و ‪ A‬و ‪B‬‬ ‫في ر‬
‫الن محددش الـ ‪ end‬لحد ن‬ ‫اما العنارص ‪ 20‬و ‪ 30‬و ‪ 40‬ن‬
‫ي‬ ‫ي‬
‫ن‬
‫معي هتنسخ فيه من غت ما تحدد‬ ‫هتيد انت لما بتعمل ‪ target‬لمكان‬‫خل بالك ان عدد عنارص الـ ‪ array‬مش ن‬
‫ي‬
‫الـ ‪ Start‬وال الـ ‪ end‬زي ما قولنا هيبدأ من الـ ‪ index 0‬ويكمل لحد النهاية بما يتناسب مع عدد عنارص الـ ‪array‬‬

‫ن‬ ‫ن‬
‫الل هو يف الـ ‪ array‬االصلية العنض ‪50‬‬
‫بتاع هو الـ ‪ index 4‬ي‬
‫ي‬ ‫يف المثال دا الـ ‪target‬‬
‫ر‬
‫يبف عملية النسخ هتم لعنض "‪ "B‬بدل العنض ‪50‬‬
‫الل هو العنض "‪ "B‬ي‬ ‫ه الـ ‪ index 6‬ي‬‫الل ي‬
‫والـ ‪ start‬حددتها ي‬

‫ن‬
‫يعن "‪"B‬‬
‫الل هو العنض ‪ 50‬وزي ما قولنا لو الـ ‪ Start‬بـ ‪ -1‬هيبدأ العد من االخر ي‬
‫الـ ‪ Target‬هنا الـ ‪ index 4‬ي‬
 ‫الـ ‪ target‬هو العنض ‪ 20‬نف الـ ‪ index 1‬و الـ ‪ start‬هو العنض "‪ "A‬من ‪ -2‬ومدام محددتش ‪ End‬ر‬
‫يبف هيكمل‬
‫ي‬ ‫ي‬
‫لألخر و هياخد العنض "‪ "B‬كمان‬

‫الل هو العنض "‪"A‬‬ ‫الل هو العنض ‪ 20‬والـ ‪ start‬من الـ ‪ -2 index‬ي‬

‫هنا الـ ‪ target‬عندي الـ ‪ index 1‬ي‬
‫ن‬
‫يعن مش هياخد معاه الـ ‪ -1 index‬دا‬
‫وحددت الـ ‪ end‬بالـ ‪ -1 index‬وافتكر انه ‪ Not Including End‬ي‬
‫ه نسخ العنض "‪ "A‬من مكانه لمكان العنض ‪20‬‬ ‫فالنتيجة النهائية هتكون ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Array.some Method Lesson #130‬‬

‫ر‬ ‫ن‬
‫بتاعن وبتحط جواها‬
‫ي‬ ‫الـ ‪ some method‬بتطبق ‪ Function‬عل كل عنض من العنارص الموجود يف الـ ‪Array‬‬
‫الشط دا فعال اتحقق ربتجع ‪ true‬لو متحققش ربتجع ‪false‬‬ ‫رشط لو ر‬

‫الشط‬‫الموضوع مختلف تماما عن الـ ‪ filter‬الن استخدام الـ ‪ filter‬كان بيعمل رشط ع العنض لو انطبق عليه ر‬
‫الشط اتحقق‬ ‫بياخد العنض دا معاه او بيضم العنض دا معاه انما نف الـ ‪ some‬هو بيقول ‪ true‬نف حالة لو ر‬
‫ي‬ ‫ي‬ ‫ي‬
‫الشط‬‫و ‪ false‬نف حالة عدم تحقق ر‬
‫ي‬
‫يعن عل سبيل المثال عندي مجموعة أسماء فبسأل سؤال هل األسماء دي فيها اسم "‪ "Osama‬؟!!‬ ‫ن‬
‫ي‬
‫بيقول ‪false‬‬ ‫بيقول ‪ true‬لو مش موجود‬ ‫عل عنارص الـ ‪ array‬دي وبيشوف لو االسم دا فعال موجود‬ ‫ر‬
‫ي‬ ‫ي‬ ‫فبيمش ي‬
‫ي‬

‫ن‬ ‫ن‬ ‫ن‬

‫معي‬ ‫ببساطة شديدة نقدر نلخص الموضوع يف ان استخدام الـ ‪ some‬بينحض يف عمل فحص لوجود عنض‬
‫يبف ‪false‬‬ ‫يبف ‪ true‬لو مش موجود ر‬
‫داخل الـ ‪ array‬لو العنض دا موجود فعال ر‬
‫ي‬ ‫ي‬

‫الـ ‪syntax‬‬
‫ن‬ ‫من ‪ callback function‬والل بيكون وظيفتها انها ر‬ ‫ن‬
‫عل كل عنض يف الـ ‪ array‬عشان‬
‫تمش ي‬
‫ي‬ ‫ي‬ ‫الـ ‪ some‬بتقبل ي‬
‫تشوف ر‬
‫الشط اتحقق وال ال‬
‫ه الـ ‪ this‬الخاصة بالـ ‪ callback function‬دي‬
‫والـ ‪ this argument‬ي‬

‫الـ ‪ callback function‬دي بتقبل من ‪ 3‬حاجات‬

‫ر‬
‫بتمش عليه‬ ‫الل الـ ‪callback function‬‬
‫ي‬ ‫‪ -1‬الـ ‪ element‬ي‬
‫الل هو رقم عنض دا داخل الـ ‪array‬‬
‫‪ -2‬والـ ‪ index‬ي‬
‫الل انت بتتعامل معاها‬
‫‪ -3‬والـ ‪ array‬ي‬
‫ال ‪ ... 10‬عملت متغت عشان اخزن جواه شغل الـ ‪callback‬‬ ‫عندي هنا ‪ array‬اسمها ‪ nums‬جواها ارقام من ‪ 1‬ي‬
‫وبعد كدا مسكت الـ ‪ array‬دي وطبقت عليها ‪ method‬الـ ‪ some‬بالـ ‪ syntax‬بتاعها‬
‫ر‬
‫الل هطبق عليه الشط‬ ‫جوا الـ ‪ callback function‬ندي مررت ‪ parameter‬اسمه ‪ e‬عشان هو دا العنض ي‬
‫الشط ‪ true‬ام ‪false‬‬ ‫او هو دا العنض الل هحطه ف مقارنة مع أي حاجة تانية عشان اتأكد هل ر‬
‫ي‬ ‫ي‬
‫اكت من ‪5‬‬‫بتاع كان عبارة عن سؤال ‪ ..‬بقول فيه هل الـعنض ‪ e‬دي ر‬ ‫ر‬
‫الشط‬
‫ي‬
‫اكت من ‪ 5‬؟! النتيجة هتكون‬ ‫الل هو بيمثل الـ ‪ e‬دا ر‬
‫عل كل عنارص الـ ‪ array‬ويشوف الرقم ‪ 1‬ي‬
‫هيعمل ‪ loop‬ي‬
‫‪false‬‬
‫ولحد الرقم ‪ 5‬النتيجة هتكون ‪ false‬اول ما يوصل للرقم ‪ 6‬هتكون النتيجة ‪true‬‬
‫اكت فعال من الـ ‪5‬‬ ‫ر‬
‫دلوقن ر‬ ‫ه بتمثل الرقم ‪6‬‬
‫ي‬ ‫الل ي‬
‫الن الـ ‪ e‬ي‬

‫ممكن اطبق نفس الطريقة بالـ ‪arrow function‬‬

‫اكت من ‪ 5‬ر‬
‫الشط هيتحقق وتكون النتيجة ‪ true‬وبعدها الـ ‪some method‬‬ ‫الل هو ر‬
‫بمجرد ما يوصل للرقم ‪ 6‬ي‬
‫ن‬
‫تان بعد الرقم ‪ 6‬دا‬
‫عل أي عنض ي‬
‫هتوقف الـ ‪ loop‬ومش هيعمل ‪ check‬ي‬

‫تعال نشوف استخدام الـ ‪this‬‬

‫ي‬ ‫طيب‬
 ‫‪ Syntax‬الـ ‪some method‬‬

‫ن‬
‫عملت متغت اسمه ‪ myNumber‬قيمته تساوي ‪ ... 10‬بعد كدا عوضت عنه مكان الـ ‪ this‬يف الـ ‪ syntax‬بتاع‬
‫الـ ‪some method‬‬
‫الل هو بيعوض عن المتغت ‪ myNumber‬بالقيمة ‪10‬‬ ‫اذا انا بقارن عنارص الـ ‪ element‬بالـ ‪ this‬ي‬
‫ن‬
‫اكت من ‪ 10‬؟! ‪ ...‬النتيجة هتكون ‪false‬‬
‫كالتال =< هل يف عنض ر‬
‫ي‬ ‫فالسؤال هيكون‬

‫ن‬
‫تان يكون ‪ more advanced‬شوية‬
‫تعال ناخد مثال ي‬
‫ي‬

‫‪By: Amr Elsayed‬‬

‫بتاع‬
‫ي‬ ‫الل هما ‪ arr‬و ‪ val‬بعد كدا جواها عملت ال رـشط‬
‫‪ parameters‬ي‬ ‫هنا انا عملت ‪ function‬ممرت جواها ‪2‬‬
‫ر‬
‫بتاعن بيساوي الـ ‪ val‬؟!‬ ‫ن‬
‫ي‬ ‫الل هو بيمثل كل عنض يف الـ ‪Array‬‬
‫قولتله ‪ arr.some‬هل الـ ‪ e‬ي‬
‫ن‬
‫ومي الـ ‪val‬‬ ‫طيب ن‬
‫مي الـ ‪arr‬‬
‫الل‬
‫فاكر دروس الـ ‪ function‬زمان لما كنت بمرر ‪ parameters‬واعوض عنها بـ ‪ argumentrs‬دا بالظبط ي‬
‫هعمله‬

‫ن‬
‫الل هيحل محل أول ‪ parameter‬موجود يف الـ ‪function‬‬
‫الل عليه السهم دا هو الـ ‪ argument‬ي‬
‫الـ ‪ nums‬ي‬
‫الل استخدمت عليه الـ ‪some method‬‬
‫الل هو اسمه ‪ arr‬الـ ‪ arr‬دا هو ي‬
‫ي‬
‫ن‬
‫فاهمن ؟!‬ ‫ر‬
‫يبف استنتج من الكالم دا ان انا شلت الـ ‪ arr.some‬وعوضت عنها بـ ‪... nums.some‬‬
‫ي‬ ‫ي‬
‫الل هو ‪ val‬عوضت عنه بالـ ‪ argument‬مرة ‪ 20‬ومرة ‪5‬‬ ‫ن‬
‫تان ‪ parameter‬ي‬ ‫ومكان ي‬

‫الل هما‬ ‫ن‬ ‫ر‬

‫الل هو أي قيمة تنحض ما بي ‪ 1‬و ‪ 10‬ي‬
‫كالتال هل الـ ‪ val‬دا لو قيمته ‪ 20‬بيساوي الـ ن‪ e‬ي‬
‫ي‬ ‫ف السؤال‬
‫فب ي‬
‫عنارص الـ ‪ nums array‬؟! ‪ <= ....‬النتيجة هتكون ‪ false‬يف اول سؤال‬

‫ن‬
‫تان سؤال هل الـ ‪ val‬دي بالقيمة ‪ 5‬تساوي الـ ‪ e‬الل هو أي قيمة موجودة ما ن‬
‫بي ‪ 1‬و ‪ 10‬عنارص الـ ‪ array‬؟!‬ ‫ي‬ ‫ي‬

‫ن‬
‫معي ؟!‬ ‫ن‬ ‫ن‬
‫تان يكون ‪ more advanced‬برضو عبارة عن فحص للعنض هل هو موجود يف ‪ring‬‬
‫تعال ناخد مثال ي‬
‫ي‬
 ‫عملت ‪ object‬اسمه ‪ ring‬فيه ‪ minimum‬بيساوي ‪ 10‬و ‪ maximum‬بيساوي ‪20‬‬
‫الل هتحصل من شغل الـ ‪some‬‬
‫بعد كدا عملت متغت اسمه ‪ checkNumberInRange‬هخزن جواه النتيجة ي‬
‫استخدمت الـ ‪ some‬ع الـ ‪ array‬الموجودة عندي بالـ ‪ syntax‬بتاعها وعوضت عن الـ ‪ this‬بالـ ‪range obj‬‬
‫اكت من او يساوي‬‫الل هو بيمثل أي عنض من عنارص الـ ‪ nums array‬دا ر‬ ‫بتاع بيقول هل الـ ‪e‬‬ ‫ر‬
‫الشط‬
‫‪ .....‬ر‬ ‫ي‬ ‫ي‬
‫ه قيمتها ‪20‬‬ ‫الل‬ ‫‪this.max‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫من‬ ‫اصغر‬ ‫دي‬ ‫‪e‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫هل‬ ‫ط‬ ‫وباف ر‬
‫الش‬ ‫ه قيمتها ‪10‬‬
‫ي ي‬ ‫ي‬ ‫الل ي‬
‫الـ ‪ this.min‬ي‬
‫علما بان الـ ‪ this‬دي تعوض ع الـ ‪range‬‬
‫الش ن‬ ‫بتاعن ر‬
‫ر‬ ‫ن‬
‫طي هيتحققوا مع بعض ان الـ ‪ e‬لما تكون قيمتها بـ ‪10‬‬ ‫ي‬ ‫طبعا موجود الرقم ‪ 10‬يف الـ ‪array‬‬
‫ن‬
‫ه اصغر من اوي تساوي الـ ‪max‬‬ ‫ي‬ ‫وكمان‬ ‫‪Range‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫ي‬ ‫اكت من او تساوي الـ ‪ min‬الموجود‬ ‫هتكون فعال ر‬

‫طيب لو روحت شيلت الرقم ‪ 10‬من الـ ‪array‬‬

‫الل قيمته‬ ‫ر‬

‫اكت من او تساوي الـ ‪ min‬ي‬
‫ه ر‬‫الل هو ‪ 9‬هيسأل نفس السؤال هل ي‬
‫لما يوصل ألخر رقم ي‬ ‫هيبف الـ ‪e‬‬
‫ي‬
‫الشط متحققش‬‫بتساوي ‪ 10‬نف الـ ‪ range‬؟! ‪ <= ....‬هتكون النتيجة ‪ false‬ر‬
‫ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Array.every Method Lesson #131‬‬

‫ن‬
‫الـ ‪ every‬زي الـ ‪ some‬يف الـ ‪ Syntax‬الفرق بينهم ان الـ ‪ some‬ربتجع ‪ true‬لو عنض من عنارص الـ ‪ Array‬حقق‬
‫الشط لو عنض واحد بس محققش‬ ‫الشط فعال ‪ .....‬لكن الـ ‪ every‬عشان ترجع ‪ true‬الزم كل العنارص تحقق ر‬ ‫ر‬
‫الشط الـ ‪ every‬هتكون نتيجتها ‪false‬‬ ‫ر‬

‫بتاع‬ ‫أول حاجة عشان احول الـ ‪ object‬دا لـ ‪ array‬عشان اقدر اعمل ‪ loop‬عل كل عنارصه واتاكد من ر‬
‫الشط‬
‫ي‬ ‫ي‬
‫بتاع‬
‫ي‬ ‫هستخدم ‪ method‬اسمها ‪ object.keys‬وجواها هحط اسم الـ ‪object‬‬

‫ر‬
‫بتاعن دي من ‪ string‬لـ ‪numbers‬‬ ‫ان احول عنارص الـ ‪array‬‬‫ن‬
‫ي‬ ‫بعد كدا هحتاج ي‬
 ‫الل هخزن فيه شغل الـ ‪ every‬وارجع استدعيه عشان اشوف النتيجة‬
‫بعد كدا هعمل المتغت ي‬

‫بتاع‬ ‫عوضت عن الـ ‪ this‬بالـ ‪ mainLocation‬الل قيمته فووووق كانت بـ ‪ 15‬عشان استخدمه نف ر‬
‫الشط‬
‫ي‬ ‫ي‬ ‫ي‬

‫الل فات‬
‫ودا نفس الحل بالظبط بشكل مختض جدا جدا عن ي‬

‫ن‬ ‫حولت اخل الحل مختض ر‬

‫اكت بالشكل دا بس تقريبا يف حاجة غلط‬ ‫ي‬
‫مش قادر اوظف الـ ‪ this‬مع الـ ‪ arrow function‬وكانت النتيجة بتطلع ‪ false‬مع ان المفروض تكون ‪true‬‬

‫ر ا‬
‫مباشة الكود اشتغل عادي‬ ‫الل اسمه ‪mainLocation‬‬
‫لكن اول ما شلت الـ ‪ this‬وعوضت بالمتغت ي‬

‫ن‬
‫وبكدا يكون الحل تم يف سطر واحد فقط‬
 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫أي خوف جواك هتواجهه وتشتغل عليه هتحقق انجاز واي خوف هيخوفك وهتكسل او تخاف تواجهة‬
‫ن‬
‫هيتحول لنقطة سودة يف حياتك وندم مالزمك واجه خوفك ‪ ..‬مش عارف حاجه اتعلمها‬
‫صاحن‬
‫ري‬ ‫اوع تستسلم يا‬
‫ي‬

‫اذكر هللا ️♥‬

‫شء قدير‪.‬‬‫ر‬ ‫ر‬
‫ال إله اال هللا وحده ال شيك له ‪ ..‬له الملك وله الحمد وهو عل كل ي‬
‫الح القيوم واتوب اليه‪.‬‬
‫استغفروا هللا العظيم الذي ال إله اال هو ي‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‪.‬‬ ‫اللهم ّ‬
‫ن‬
‫الظالمي‪.‬‬ ‫إن كنت من‬‫ال إله اال انت سبحانك ن‬
‫ي‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫‪Spread Syntax And Use Cases Lesson #132‬‬

‫كلمة ‪ spread‬معناه انتشار وبيتم كتابة ‪ syntax‬الـ ‪ spread‬عن طريق كتابة " ‪ 3‬نقط ‪ " ...‬قبل الـ ‪iterable‬‬
‫ان اعمل ‪ extract‬أو ‪ expand‬للعنارص المستهدفة‬ ‫ن‬
‫الغرض من استخدام الـ ‪ spread‬هو ي‬

‫تان حاجة عملت ‪ Spread‬لالسم فعمل انتشار للحروف‬ ‫أول حاجة طبعت اسمه "‪ "Osama‬عادي جدا ‪ ...‬ن‬
‫ن‬ ‫ي‬
‫تالت حاجة عملت ‪ Spread‬لالسم داخل اقواس الـ ‪ array‬فحول كل حرف لـ ‪ index‬يف ‪Array‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬ ‫لو عندي ر‬
‫اكت من ‪ Array‬ممكن استخدم الـ ‪ spread‬يف عمل ‪ concatenate‬ليهم فيتم دمجهم‬

‫بمعن ن‬
‫تان اعمل منها نسخة‬ ‫ن‬ ‫او‬ ‫متغت‬ ‫جوا‬ ‫‪array‬‬ ‫أخزن‬ ‫إن‬ ‫أقدر من خالل الـ ‪ Spread‬ن‬
‫ي ي‬ ‫ي‬

‫من خالل الـ ‪ spread‬اقدر اضيف عنارص ‪ Array‬داخل عنارص ‪ array‬تانية كبديل للـ ‪push Method‬‬
 ‫عل ‪ array‬موجودة فعال عندي بدل ما كنت‬
‫عن طريق الـ ‪ Spread‬اقدر طبق خواص الـ ‪ Math Method‬ي‬
‫بحط ارقام بداخل الـ ‪ Math Method‬عشان أوصل للنتيجة‬

‫عن طريق الـ ‪ spread‬أقدر ادمج ر‬

‫اكت من ‪ object‬مع بعض ولكن عشان العملية دي تتم الزم احط العملية دي‬
‫داخل اقواس الـ ‪{} object‬‬

‫ن‬ ‫ن‬
‫قوسي الـ ‪[] array‬‬ ‫كذلك يف عمليات دمج الـ ‪ Array‬او أي حاجة تخص التعامل مع الـ ‪ Array‬الزم احطها داخل‬
‫‪By: Amr Elsayed‬‬
 Map And Set Challenge Lesson #133

Map And Set Challenge Solution

console.log([...n1,...n2].length * Math.max(...n2) ); // 210

console.log([...n1,...n2].length * new Set(n2).size * Math.min(...n1) ); // 210

‫ال تنسونا من دعواتكم‬

Never Forget That (Always Search)
By: Amr Elsayed
 Assignments From [123] = > [133]
]133[ >= ]123[ :‫لينك التكليفات‬
01 :‫التكليف‬
// Assignment 1
let setOfNumbers = new Set([10]);
setOfNumbers.add(20).add(setOfNumbers.size);
console.log(setOfNumbers);
console.log([...setOfNumbers][2]);

02 :‫التكليف‬
// Assignment 2
let myFriends = ["Osama", "Ahmed", "Sayed", "Sayed", "Mahmoud", "Osama"];

console.log(Array.from(new Set(myFriends)).sort());
console.log([...new Set(myFriends)].sort());

// Needed Output
// (4) ['Ahmed', 'Mahmoud', 'Osama', 'Sayed']

03 :‫التكليف‬
// Assignment 3
let myInfo = {
username: "Osama",
role: "Admin",
country: "Egypt",
};

let myMap = new Map(Object.entries(myInfo));

console.log(myMap);
console.log(myMap.size);
console.log(myMap.has("role"));

// Needed Output
// Map(3) {'username' => 'Osama', 'role' => 'Admin', 'country' => 'Egypt'}
// 3
// true

By: Amr Elsayed

 04 :‫التكليف‬
// Assignment 4
let theNumber = 100020003000;

console.log(+[...new Set(theNumber.toString())].sort().slice(true).join(""));

console.log(
+[...new Set(Array.from(theNumber.toString(), (e) => (e > 0 ? e : "")))].join(
""
)
);
// Needed Output
// 123

05 :‫التكليف‬
// Assignment 5
let theName = "Elzero";

// [1]
console.log(theName.split(""));

// [2]
console.log(Array.from(theName));

// [3]
console.log([...theName]);

// [4]
let emptyArray = [];
for (let i = 0; i < theName.length; i++) {
emptyArray.push(theName[i]);
}
console.log(emptyArray);

// [5]
console.log([...new Set(theName)]);

// [6]
console.log(Object.assign([], theName))
// Needed Output
// ['E', 'l', 'z', 'e', 'r', 'o']

By: Amr Elsayed

 06 :‫التكليف‬
// Assignment 6

// [1]
let charsOne = ["A", "B", "C", "D", "E", 10, 15, 6];

console.log(charsOne.sort().copyWithin(0,3,6))

// Needed Output
// ['A', 'B', 'C', 'A', 'B', 'C', 'D', 'E']

// [2]
let charsTwo = ["A", "B", "C", 20, "D", "E", 10, 15, 6];

console.log(charsTwo.sort().copyWithin(0, 4, 8))

// Needed Output
// ['A', 'B', 'C', 'D', 'A', 'B', 'C', 'D', 'E']

// [3]
let charsThree = ["Z", "Y", "A", "D", "E", 10, 1];

console.log(charsThree.copyWithin(2))

// Needed Output
// ["Z", "Y", "Z", "Y", "A", "D", "E"]

07 :‫التكليف‬
// Assignment 7
let numsOne = [1, 2, 3];
let numsTwo = [4, 5, 6];

// [1]
console.log([...numsOne,...numsTwo])

// [2]
console.log(numsOne.concat(numsTwo))

// [3]
console.log([...Array.from(numsOne), ...Array.from(numsTwo)]);

// [4]
numsOne.push(...numsTwo);
console.log(numsOne)

// Needed Output
// [1, 2, 3, 4, 5, 6]
 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫شء قدير‬ ‫ال إله اال هللا وحده ال رشيك له ‪ ..‬له الملك و له الحمد وهو عل كل ر‬
‫ي‬
‫ن‬
‫الظالمي‬ ‫إن كنت من‬ ‫ال إله إال أنت سبحانك ن‬
‫ي‬
‫سبحان هللا وبحمده سبحان هللا العظيم‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫ال تنسونا من دعواتكم‬
‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Intro And What Is Regular Expression Lesson #134‬‬

‫ن‬
‫التمجة مش مقتض ع الـ ‪ JS‬بس‬
‫ببساطة شديدة جدا الـ ‪ Regular Expression‬موجود يف معظم لغات ر‬
‫طيب أي الفائدة منه بختصار ‪...‬‬

‫هتقول بسيطة هحوله الـ ‪ string‬دا لـ ‪array‬‬

‫ي‬ ‫تجبل أي رقم اصغر من ‪20‬‬
‫ي‬ ‫لو اديتك ‪ str1‬دا وقولتلك انا عايزك‬
‫وبعدين هعمل ‪ condition‬ومن خالله هقدر أوصل للرقم األصغر من ‪ 20‬او هستخدم الـ ‪Filter‬‬
‫ترجعل أي ‪ String‬موجود قبله ارقام وبعده ارقام وبعد األرقام دي فيه ‪ String‬كمان وبعد‬
‫ي‬ ‫لو اديتك ‪ str2‬منك‬
‫الـ ‪ string‬دا ن يف ارقام كمان !!‬
‫ن‬ ‫ر‬
‫هتالف ان الموضوع بقا صعب جدا عشان هتحتاج تعمل كمية ‪ conditions‬كتتة وهتخش يف مليون سيناريو‬ ‫ي‬
‫عشان تحقق المطلوب‬

‫يح دور الـ ‪ Regular Expression‬الل ببساطة من خاللها بقدر اعمل رشط بسيط ر‬
‫الشط دا بيكون‬ ‫ي‬ ‫هنا بقا ر ي‬
‫ن‬
‫معي ثابت متعارف عليه ومتعارف انه الـ ‪ pattern‬دا بيكون ‪ Valid‬او صحيح‬ ‫فيه ‪Pattern‬‬
‫يعن مثال دا ‪ pattern‬لميل ‪ Not valid‬او غت صحيح‬ ‫ن‬
‫ي‬

‫ولكن الميل دا ‪ valid‬والـ ‪ pattern‬بتاعه او النمط المكتوب بيه سليم وصحيح‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫والمتعارف عليه يف أي ميل ‪ valid‬او صحيح ان بيكون مثال اوله اسم الشخص او حرف من اسمه وأرقام‬
‫الل بيقدملك الميل دا زي ‪Gmail‬‬
‫بيح اسم الـ ‪ Email provider‬او المكان ي‬
‫بتيح عالمة الـ @ بعد كدا ر ي‬
‫بعد كدا ر ي‬
‫عل‬
‫بيح الدور ي‬ ‫عل النقطة ‪ .‬ي‬
‫الل بعد الـ ‪ Email provider‬بعد كدا ر ي‬ ‫او ‪ Hotmail‬وغتهم ‪ ...‬بعد كدا بيدور ي‬
‫الل هو ممكن يكون ‪ com‬او ‪ org‬او ‪ net‬او ‪ info‬او حاجات تانية كتت مختلفة‬
‫الـ ‪ Top level Domain‬ي‬
‫ن‬ ‫ن‬ ‫ن‬
‫معي بتكون صحيحة‬ ‫معي او بـ ‪ pattern‬او نمط‬ ‫كل الحاجات دي لو موجودة يف ايميل بشكل‬

‫ن‬
‫ماليي السيناريوهات عشان‬ ‫هيبف الموضوع صعب جدا وهتحتاج‬ ‫ر‬ ‫لو انت استخدمت الـ ‪ if condition‬العادي‬
‫ي‬
‫الشوط الصحيحة ألي ميل ‪ valid‬او أي ‪ URL‬لموقع مكتوب بشكل صحيح‬ ‫تتطابق كل ر‬
‫ن‬
‫الل زي دي‬
‫ي‬ ‫المواقف‬ ‫ف‬
‫يح دور الـ ‪ Regular Expressions‬وبساطة تعاملها ي‬‫وهنا بقا ر ي‬

‫ملحوظة خد بالك منها ان هنا مفيش أي مقارنة ن‬

‫بي الـ ‪ IF Conditions‬و الـ ‪Regular Expressions‬‬
‫هنا انا مش بفضل حاجة ع التانية انت المفروض اتعلمت ان كل ‪ Tool‬عندي او ‪ Method‬بيكون ليها استخدام‬
‫ن‬ ‫ن‬
‫التان‬
‫غت التانية يف موقف غت ي‬

‫عل سبيل المثال الـ ‪ IP‬دا ‪ valid‬وصحيح ولكن عشان تتأكد من صحة كل مقطع فيه لو استخدمت الـ ‪IF cond‬‬
‫ي‬
‫يعتت ‪ IP‬بسيط مابالك بقا لو ‪ IPv6‬مثال او الـ ‪Mac Address‬‬
‫هتواجه صعوبة شديدة ودا ر‬

‫وعل سبيل المثال برضو كل الـ ‪ URL‬المكتوبة هنا او كل ‪ pattern‬او نمط من دول مكتوب بيه الـ ‪ URL‬هو نمط‬‫ي‬
‫صحيح وسليم فانت بتستخدم الـ ‪ Regular Expression‬عشان تعمل ‪ Matching‬او مطابقة لكل مقطع‬
‫ن‬ ‫ن‬
‫الل يف الـ ‪ screen‬هو سليم وصحيح‬
‫ي‬ ‫بالشكل‬ ‫اتكتب‬ ‫لو‬ ‫دول‬ ‫من‬ ‫مقطع‬ ‫كل‬ ‫ان‬ ‫وتتأكد‬ ‫‪URL‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫موجود ي‬
‫ن‬
‫فتقوله لو الـ ‪ URL‬مكتوب ‪ http‬بس سليم لو ‪ https‬سليم لو يف االخر فيه ‪ Com‬سليم لو ‪ net‬سليم او ‪org‬‬
‫سليم‬
 ‫‪Regular Expression – Modifiers Lesson #135‬‬

‫ر‬
‫دلوقن هنتعرف ع الـ ‪ Syntax‬بتاعها وطرق الكتابة‬ ‫بعد ما فهمنا وظيفة الـ ‪Regular Expression‬‬
‫ي‬

‫االول حرف ‪ E‬كبت ‪ ..‬و ‪ elzero‬التانيه اول حرف ‪ e‬صغت‬ ‫ر‬

‫دلوقن انا عندي الـ ‪ string‬دا موجود فيها ‪Elzero‬‬
‫ي‬ ‫ي‬
‫ن‬ ‫ن‬ ‫ر‬
‫الل احنا‬
‫دلوقن هنعمل ‪ Pattern‬معي من تصميمنا ونبدأ نقارن الكالم الموجود يف الـ ‪ string‬مع الـ ‪ pattern‬ي‬ ‫ي‬
‫عملناه ونشوف النتيجة‬

‫الل انا مخزن‬

‫بعد ما عملت الـ ‪ Pattern‬هبدأ استخدم ‪ method‬اسمها ‪ match‬همرر جواها المتغت ‪ regex‬ي‬
‫ن‬ ‫ن‬ ‫ن‬
‫معي عايز ادور عليه‬ ‫معي ومعايا مواصفات لشخص‬ ‫بتاع دا ‪ ..‬بالظبط ي‬
‫كان دخلت مكان‬ ‫ي‬ ‫جواه الـ ‪Pattern‬‬

‫قال ان ‪ Elzero‬اول حرف فيها ‪ Capital‬موجود عند الـ ‪index 6‬‬

‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬ ‫ن‬
‫بتاع اول حرف يف ‪ elzero‬صغت‬
‫ي‬ ‫لو حطيت يف الـ ‪Pattern‬‬

‫هيقول موجود اهو عند الـ ‪index 31‬‬

‫ي‬

‫بتاع بيكون فيه اول حاجه الـ ‪ pattern‬بعد كدا عندي حاجة اسمها ‪Modifier‬‬
‫ي‬ ‫اذا دا الـ ‪syntax‬‬

‫ن‬
‫بيتم استخدام الـ ‪ modifier‬دا عشان اعدل يف طريقة البحث‬

‫ن‬
‫وكأن بقوله تجاهل حساسية‬ ‫ن‬
‫يعن لو كتبت جنب الـ ‪ Pattern‬دا أي حاجه من الـ ‪ modifiers‬دي وليكن الـ ‪ i‬دا ي‬‫ي‬
‫الحرف األول سوا انا كتبته ‪ Small‬او ‪Capital‬‬

‫بتاع الـ ‪i‬‬

‫ي‬ ‫بتاع ‪ elzero‬اول حرف ‪ Small‬وبعده الـ ‪modifier‬‬
‫ي‬ ‫الحظ ان الـ ‪Pattern‬‬

‫عل انه مجرد حرف‬

‫الحروف وبدا يتعامل مع اول حرف الـ ‪ e‬سوا ‪ capital‬او ‪ small‬ي‬ ‫فبعد ما لغيت حساسية‬
‫ن‬
‫الل الحرف بتاعها ‪ Capital‬النه تجاهل حساسية الحروف‬‫النتيجة بقت ‪ Elzero‬اول كلمة يف الـ ‪ string‬ي‬
 ‫بيمش ر‬
‫بالتتيب وبيجيب اول نتيجة‬ ‫ر‬ ‫الل اول حرف فيها ‪ Capital‬النه اثناء البحث‬
‫ي‬ ‫والنتيجة كانت ‪ Elzero‬ي‬

‫عل اسم ‪ elzero‬سواء اول حرف فيه ‪ Small‬او‬ ‫ن‬ ‫ن‬ ‫ن‬
‫يعن هيدور ي‬
‫يعن ‪ Global‬ي‬
‫الل هو الـ ‪ g‬ي‬
‫تان ‪ flag‬عندي ي‬
‫ي‬
‫‪capital‬‬

‫ن‬ ‫ن‬
‫ويرجعهال يف شكل ‪Array‬‬
‫ي‬ ‫عل كل أسماء الـ ‪elzero‬‬
‫يف الطريقة دي هو بيدور ي‬
‫ن‬ ‫ن‬
‫معي مش موجود يف الـ ‪ String‬بتاعك هتجعلك ‪null‬‬ ‫لو كتبت ‪Pattern‬‬

‫يعن ‪ .. Multilines‬لو عندي ر‬

‫اكت من سطر كود عايز اعمل ‪ match‬لحاجة جوا‬ ‫ن‬
‫الل هو الـ ‪ m‬ي‬
‫تالت ‪ flag‬ي‬
‫بتاع‬
‫ي‬ ‫السطور دي مع الـ ‪pattern‬‬

‫الل بيتعمل بالـ ‪constructor‬‬ ‫طيب بالمناسبة دا شكل الـ ‪ syntax‬ن‬

‫التان ي‬
‫ي‬

‫ه نفس النتيجة‪ ،‬ولكن ُبيفضل استخدام اول طريقة‬

‫ه ي‬
‫ي‬
 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫سع ️♥‬
‫كمل ي‬
‫اذكر هللا ️♥‬
‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬

‫أكت و ال حول وال قوة اال باهلل‬

‫سبحان هللا و الحمد هلل و ال الـه اال هللا و هللا ر‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬ ‫اللهم ّ‬
‫ن‬
‫الظالمي‬ ‫ن‬
‫إن كنت من‬ ‫ن‬
‫إن أستغفرك واتوب إليك‪ ،‬ال إله اال انت سبحانك ي‬
‫اللهم ي‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫‪By: Amr Elsayed‬‬
 ‫‪Regular Expression – Ranges Part 1 Lesson #136‬‬

‫ن‬ ‫ن‬
‫ممت جدا يف الـ ‪ Regular Expression‬كمان هيساعدك تحل مسائل بطريقة أسهل كتت عن األول‬ ‫الـ ‪ranges‬‬

‫ن‬ ‫ن‬
‫الل موجودين يف‬‫ي‬ ‫حاجات‬ ‫‪3‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫من‬ ‫واحده‬ ‫أي‬ ‫يرجعل‬
‫ي‬ ‫أقوله‬ ‫عشان‬ ‫‪OR‬‬ ‫|‬ ‫ـ‬ ‫ل‬‫ا‬ ‫عالمة‬ ‫استخدمت‬ ‫دا‬ ‫المثال‬ ‫ف‬
‫ي‬
‫ن‬ ‫ر‬
‫عل العنارص الموجودة يف المتغت ‪ tld‬اول حاجه هيالقيها بتطابق الكالم الموجود‬ ‫فهيمش ي‬
‫ي‬ ‫بتاع‬
‫ي‬ ‫الـ ‪pattern‬‬
‫ن‬ ‫ن‬
‫ان استخدمت ‪ Flag‬الـ ‪ i‬عشان يتجاهل حساسية الحروف‬ ‫ه كلمة ‪ ...... org‬والحظ ي‬ ‫يف الـ ‪ pattern‬هتكون ي‬

‫الل‬
‫ولو حطيت الـ ‪ i <= flags‬و ‪ g‬هيجيب كل العنارص ي‬
‫الل انا حطيته‬
‫بتـ‪ match‬مع الـ ‪ Pattern‬ي‬

‫هنا مثال عندي متغت اسمه ‪ nums‬موجود فيه مجموعة ارقام ‪ ....‬بعد كدا متغت اسمه ‪ numsRe‬بحط فيه‬
‫بتاع بقوله فهيه انا عايز األرقام من ‪ 9-1‬وكتبت الـ ‪ flag g‬عشان يجيب كل األرقام‬
‫ي‬ ‫الـ ‪Pattern‬‬
 ‫ن‬ ‫ن‬ ‫ن‬
‫هاتل كل األرقام ماعدا الموجودة يف الـ ‪ ring‬من ‪ 0‬لـ ‪2‬‬
‫ي‬ ‫ان بقوله‬
‫بتعت عن ي‬
‫الل ر‬
‫يف المثال دا استخدمت الـ ^ ‪ not‬ي‬

‫ن‬ ‫ن‬
‫ال ‪9‬‬
‫هاتل كل العنارص الموجود عندك ما عدا األرقام الموجود يف الرينج من ‪ 0‬ي‬
‫ي‬ ‫يف المثال دا بقوله‬
‫فهيطبع كل الـ ‪ characters‬الل موجودة ن‬
‫بي األرقام‬ ‫ي‬

‫طبعا شايف الطريقة دي سهلة جدا مقارنة بالـ ‪ condition‬و الـ ‪ loop‬و الـ ‪ filter‬والحاجات دي‬

‫ن‬
‫ال ‪ 8‬وبعدين كلمة ‪Os‬‬
‫بتاع بيبدأ بكلمة ‪ Os‬وحطيت رينج ارقام من ‪ 5‬ي‬
‫ي‬ ‫يف المثال دا انا بقوله الـ ‪pattern‬‬
‫ومعاها الـ ‪Global Flag‬‬

‫‪By: Amr Elsayed‬‬

 ‫‪Regular Expression – Ranges Part 2 Lesson #137‬‬

‫عندك متغت ‪ myString‬عبارة عن ‪ Capital & small Letters‬و ‪ Numbers‬و ‪Characters‬‬

‫عل الحرف من ‪ a-z‬الـ ‪small‬‬ ‫ن‬ ‫نف أول مثال انا ر‬

‫ان احصل ي‬
‫بتاع كان ي‬
‫ي‬ ‫الشط‬ ‫ي‬

‫ن‬ ‫ن‬ ‫ن‬

‫وبالتال انا بقوله عايز كل الموجود يف متغت‬
‫ي‬ ‫النف‬
‫عل كلمة ‪ Not‬او ي‬
‫الل بتدل ي‬‫التال هستخدم الـ ^ ي‬
‫ي‬ ‫وف المثال‬
‫ي‬
‫‪ myString‬دا عدا ‪ ..‬عدا الحروف من ‪ a-z‬الـ ‪ small‬فهيجيب كل حاجة اال من ‪a-z‬‬

‫‪By: Amr Elsayed‬‬

 ‫الل فوق‪ ،‬ولكن المرادي مع الحروف الـ ‪ Capital‬مرة انا عايزهم ومرة عايز كل حاجه اال هما‬
‫نفس المثال ي‬

‫الل فوق‪ ،‬ولكن ع الحروف ‪ abe‬مرة انا عايزهم ومرة تانيه باستخدام الـ ^ عايز كل حاجه اال هما‬
‫نفس األمثلة ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬ ‫ن‬
‫ان عايز الـ ‪ letters‬كلهم سواء ‪ Capital‬او ‪ small‬فقط بدون ‪ Numbers‬او ‪Characters‬‬
‫يف المثال دا انا بحدد ي‬

‫ن‬
‫يف المثال دا مع استخدام الـ ‪ ^ Not‬انا بقوله عايز كل حاجه سوا ‪ Numbers‬او ‪ Characters‬ما عدا الـ ‪letters‬‬
‫كلها سواء ‪ Capital‬او ‪small‬‬

‫ن‬ ‫ن‬
‫ان عايز بس الـ ‪ Special Characters‬فقط ما دون ذلك‬
‫وف المثال دا مع استخدام الـ ^ انا حددت ي‬
‫ي‬
‫سواء ‪ Numbers‬او ‪ Letters‬مش محتاجهم‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Regular Expression – Character Classes Part 1 Lesson #138‬‬

‫الـ ‪ character classes‬هتساعدك تحلل وتفكك االكواد المعقدة او من خاللها هتقدر تعمل ‪ match‬بسهولة‬
‫ألي داتا بحيث ر‬
‫تنتف الـ ‪ Validation data‬بس‬
‫ي‬

‫‪.‬‬
‫اول ‪ character‬هو الـ ‪ dot‬ودا بيـ ‪ match‬كل الـ ‪ Characters‬ر‬
‫حن الـمسافات ما عدا الـ ‪new lines‬‬
‫او الـ ‪line terminators‬‬

‫بعد كدا عندي الـ ‪ \w‬والحظ ان الـ ‪ w‬مكتوبة ‪ small‬ودا بيستخدم عشان يـ ‪ match‬او يستخرج‬
‫ال ذلك و الـ _‪underscore‬‬
‫الـ ‪ word characters‬زي الحروف من ‪ a-z‬و ‪ A-Z‬و األرقام وما ي‬

‫‪By: Amr Elsayed‬‬

 ‫الل فات زي الـ ‪ special characters‬و‬
‫اما الـ ‪ \W‬والـ ‪ W‬مكتوبة ‪ Capital‬بـيـ ‪ match‬أي حاجة عكس ي‬
‫‪.‬‬
‫المسافات و الـ ‪dot‬‬

‫تعال نشوف مثال بسيط كدا الستخدام الـ ‪special characters‬‬

‫ي‬

‫ر‬
‫باف‬
‫عل كل الحروف واألرقام بعدها طلبت ان ي‬
‫بتاع كتب الـ ‪ \w‬عشان احصل ي‬
‫ي‬ ‫مكان ما بكتب الـ ‪pattern‬‬
‫الـ ‪ pattern‬يكون رقم او حرف وبعدها عالمة @ بعدها يكون فيه برضو حرف او رقم فستخدمت الـ ‪\w‬‬
‫وبعدها يكون عندي ‪ dot .‬فحطيت نقطة بعد النقطة ر ي‬
‫بيح ‪ com‬أو ‪net‬‬

‫‪\w @ \w‬‬ ‫‪.‬‬ ‫‪com|net‬‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Regular Expression – Character Classes Part 2 Lesson #139‬‬

‫هنكمل مع بعض الـ ‪ Character classes‬وكمان هندرس حاجه اسمها ‪Test Method‬‬
‫ن‬
‫ه أسمائهم لكن يف‬
‫الل ي‬
‫فطبيع هيسجل ناس بأسماء عادية ي‬
‫ي‬ ‫لو عندي موقع وفيه اشخاص هتسجل فيه‬
‫اشخاص تانيه بيكون ‪ Spammers‬فانا عايز استخدم الـ ‪ regular expression‬عشان اعرف األشخاص دي‬
‫واتجنبهم مثال‬

‫استخدمت الـ ‪ \b‬وبعدها كلمها ‪ Spam‬وبعدين كتبت | وبعدها كلمة ‪ Spam‬وبعدها ‪\b‬‬
‫الل انا عايزوا‬
‫بينته بكلمة ‪ Spam‬هو دا ي‬
‫ي‬ ‫انا هنا بقوله أي اسم بيبدأ بكلمة ‪ Spam‬او‬

‫تعال نشوف‬
‫ي‬ ‫طيب فيما تستخدم الـ ‪Test Method‬‬

‫ن‬
‫استخدمت الـ ‪ test‬مع الـ ‪ pattern‬المكتوب يف متغت الـ ‪ re‬فالنتيجة كانت ‪ true‬ألن الـ ‪ pattern‬الموجود‬
‫ن‬ ‫ن‬ ‫ن‬
‫ه كلمة ‪ Spam‬سواء يف األول او‬ ‫الل ي‬
‫الرئيش ي‬
‫ي‬ ‫يف الـ ‪ re‬بينطبق عل خمس أسماء موجودين يف متغت الـ ‪names‬‬
‫ن‬
‫يف االخر‬

‫الل انا كاتبه؟!‬ ‫ر‬

‫دلوقن لما استخدمها مع اسم "‪ "Osama‬فأنا هنا بقوله هل االسم دا بينطبق عليه الـ‪ Pattern‬ي‬
‫ي‬
‫النتيجة هتكون ‪ False‬الن اسم "‪ "Osama‬مفهوش أصال كلمة ‪Spam‬‬
‫لو نفس المثال السابق بدل "‪ "Osama‬كتبت مثال "‪ "spam1‬أو "‪ "1spam‬هتكون النتيجة ‪true‬‬
‫الل انا كاتبه!‬ ‫ن‬
‫الن االسمي دول انطبق عليه الـ ‪ Pattern‬ي‬
 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫ً‬
‫كل ما زادت محاوالتك زادت إخفاقات زادت مهاراتك زدت نجاحا‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ر‬ ‫ر‬
‫ال إله اال هللا وحده ال شيك له ‪ ..‬له الملك و له الحمد وهو عل كل ي‬
‫شء قدير‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Regular Expression – Quantifiers Part 1 Lesson #140‬‬

‫تعال نشوف باألمثلة‬

‫ي‬ ‫الل بتساعد عل تحديد الكمية‬
‫ه الـ ‪ characters‬ي‬
‫الـ ‪ Quantifiers‬ي‬

‫انا عايز اعمل ‪ Pattern‬اطابق فيه كل الـ ‪ mails‬دي‬

‫اول ‪ Quantifier‬معانا هو الـ ‪ +‬باستخدمه عشان اعمل ‪ pattern‬هيكون فيه حرف او ر‬

‫اكت من حرف جنب‬
‫بعض‬

‫ن‬
‫يعن الـ ‪ \w‬زي ما اتعلمنا مسبقا بتستخدم عشان اجيب كل الـ ‪ Characters‬من ‪ a-z‬مع استخدام الـ ‪+‬‬
‫ي‬
‫بي الـ ‪ a-z‬او ر‬
‫اكت من حرف جنب بعض‬ ‫فانا بقوله الـ ‪ character‬دا ممكن يكون حرف واحد ما ن‬

‫بعد كدا استخدمت الـ @ عشان سواء هتيح بقا بعد حرف واحد او ر‬
‫اكت من حرف‬ ‫ر ي‬

‫الل هو سواء ‪ Gmail‬أو ‪ Hotmail‬او ‪Mail‬‬‫بيح الـ ‪ email provider‬ي‬‫بعد الـ @ ر ي‬

‫ر‬
‫فاستخدمت الـ ‪ \w+‬عشان أقوله انه بعد الـ @ ممكن يكون الـ ‪ email provider‬مكون من حرف او اكت‬

‫بتيح بعد الـ ‪email provider‬‬ ‫بعد كدا كتبت الـ ‪ .‬او النقطة ي‬
‫الل ر ي‬

‫ن‬
‫تان عشان أقوله ان بعد الـ ‪ .‬او النقطة ممكن يكون حرف او ر‬
‫اكت زي ‪ ru‬و ‪com‬‬ ‫بعد كدا استخدمت الـ ‪ \w+‬ي‬
‫وهكذا‬
 ‫ن‬ ‫ن‬
‫تان ‪ Quantifier‬معانا هو الـ * ودا بستخدمه يف التعبت عن احتمال يكون فيه ‪ character‬واحد او ‪number‬‬
‫ي‬
‫نهان‬ ‫ن‬
‫واحد بي مجموعة ارقام او مفيش ي‬

‫ر‬ ‫ر‬ ‫ن ن‬
‫الل بتبدا بـ ‪0‬‬
‫هان مجموعة األرقام بشط ي‬
‫يعن يف الـ ‪ Pattern‬دا انا بقوله ي‬
‫ي‬

‫الل بقوله فيها بعد الـ ‪ 0‬دا ن يف ‪ digits‬او ارقام تانية ولكن مع استخدام الـ *‬
‫وبعدين استخدمت ‪ \d‬ي‬
‫فانا بقوله بعد اول ‪ 0‬ممكن يكون فيه رقم واحد او ارقام او مفيش وال رقم خالص‬

‫ن‬
‫تان‬
‫بعد كدا قولتله ‪ 0‬ي‬

‫وتنته كمان بـ ‪ 0‬ن‬

‫وبي الـصفرين دول ممكن يكون‬ ‫الل بتبدأ بـ ‪0‬‬ ‫ن‬
‫ي‬ ‫يعن باختصار بقوله انا عايز مجموعة األرقام ي‬
‫ي‬
‫فيه رقم او ارقام او مفيش أي رقم نهان ن‬
‫بي الصفرين‬ ‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫تالت ‪ Quantifier‬معانا هو الـ ? ودا بيستخدم يف حالة لو عايز ‪ character‬واحد يا موجود مرة واحدة يا مش‬
‫نهان‬
‫موجود ي‬

‫ن‬
‫بعد حرف الـ ‪ s‬يف كلمة ‪ https‬كتبت الـ ? عشان أقوله ان الـ ‪ s‬دي ممكن تكون موجودة مرة واحده زي ‪https‬‬
‫او مش موجودة وال مرة زي ‪http‬‬

‫الل دي \ ي‬
‫الل كنت بستخدمها عشان اعرف‬ ‫بعد كدا حطيت الـ ‪ ://‬ولكن قبل الـ ‪ //‬حطيت عالمة الـ ‪ escape‬ي‬
‫ر‬
‫انن فيتم تجاهله من اللغة‬
‫تبع انا مش تبعك ي‬
‫التمجة ان الـ ‪ character‬دا ي‬ ‫لغة ر‬
‫ن‬
‫بعدها حطيت عالمة الـ ? بعد الـ (‪ )https?:\/\/‬عشان أقوله ممكن الـ ‪ pattern‬دا يكون موجود يف الموقع مرة‬
‫او ممكن مش موجود وال مرة زي اخر موقع كدا نف الـ ‪ urls‬الل فوق (وبص عل اخر ملحوظة هتفهم ر‬
‫اكت)‬ ‫ي‬ ‫ي‬

‫ه ممكن تكون موجودة مرة او مش موجودة‬ ‫)‪ (www.‬وبعدها عالمة الـ ? عشان أقوله ي‬ ‫بعدها برضو كتبت الـ‬
‫ن‬
‫عل بعض‬
‫ه جروب كدا كله ي‬ ‫الل فوق برضو الحظ ان الـ )‪ (www.‬ي‬ ‫وال مرة زي اخر موقع كدا يف الـ ‪ urls‬ي‬
‫فـييكون موجود كله مرة واحدة او مش موجود وال مرة عشان كدا بعد الجروب دا حطيت الـ ?‬
‫بعدها كتبت ‪ \w+‬عشان أقوله بعد الـ ‪ www.‬لو موجودة او مش موجودة خالص هيح كلمة او ر‬
‫اكت‬ ‫ر ي‬
‫ن‬ ‫ن‬
‫زي ‪ google‬و ‪ website‬دا يف حالة وجود الـ ‪ www.‬اما يف حالة عدم وجود الـ ‪ www.‬زي اخر موقع‬
‫ن‬ ‫ر‬
‫هالف باستخدام الـ ‪ \w+‬انه كتب كلمة ‪ web‬الموجودة يف اخر موقع‬
‫ي‬

‫بتيح قبل الـ ‪ Top level Domain‬زي ‪ .com‬و ‪ .net‬وهكذا‬ ‫بعد كدا كتبت الـ ‪ .‬او النقطة ي‬
‫الل ر ي‬

‫بعد الـ ‪ .‬استخدمت الـ ‪ \w+‬عشان أقوله ان بعد الـ ‪ .‬هيح حرف او ر‬
‫اكت زي ‪ com‬و ‪ net‬و ‪ ur‬و ‪org‬‬ ‫ر ي‬
‫اتني او ر‬
‫اكت‬ ‫حرف او ن‬

‫ن‬ ‫ن‬ ‫ن‬ ‫ن‬

‫عل بعضه‬ ‫ملحوظة‪ :‬أي حاجة بي قوسي )( بعد القوسي دول عالمة ? ي‬
‫يعن انا بقوله الجزء دا كدا كله ي‬
‫نهان‬
‫يا موجود مرة واحدة يا مش موجود ي‬

‫‪By: Amr Elsayed‬‬

 ‫‪Regular Expression – Quantifiers Part 2 Lesson #141‬‬

‫عل حاجات جديدة‬

‫هنكمل كالم عن الـ ‪ Quantifiers‬والمرادي هنتعرف ي‬

‫وبتنته بحرف الـ ‪ S‬ن‬ ‫ن‬

‫وبي الـ ‪ S‬والـ ‪S‬‬ ‫ي‬ ‫يف حالة لو عايزك تكتب ‪ Pattern‬يـ ‪ match‬أي حاجة بتبدأ بحرف الـ ‪S‬‬
‫ن‬
‫معي من الـ ‪ digits‬وليكن ‪ 3‬أرقام فقط‪ ...‬فهتكون دي الطريقة‬ ‫يكون فيه عدد‬

‫وبتنته بحرف الـ ‪ S‬ن‬ ‫ن‬

‫وبي الـ‪ S‬والـ‪S‬‬ ‫ي‬ ‫طيب يف حالة لو عايزك تكتب ‪ Pattern‬يـ ‪ match‬أي حاجة بتبدأ بحرف الـ ‪S‬‬
‫ن‬ ‫ن‬
‫معي من الـ ‪ digits‬ولكن يف نطاق من ‪ 4‬لـ ‪ 5‬أرقام فقط ‪ ...‬فهتكون دي الطريقة‬ ‫يكون فيه عدد‬

‫وبتنته بحرف الـ ‪ S‬ن‬ ‫ن‬

‫وبي الـ‪ S‬والـ‪S‬‬ ‫ي‬ ‫طيب يف حالة لو عايزك تكتب ‪ Pattern‬يـ ‪ match‬أي حاجة بتبدأ بحرف الـ ‪S‬‬
‫ن‬ ‫ن‬
‫معي من الـ ‪ digits‬ولكن يف نطاق من ‪ 4‬لـ ماال نهاية من األرقام ‪ ...‬فهتكون دي الطريقة‬ ‫يكون فيه عدد‬
‫‪Regular Expression – Quantifiers Part 3 Lesson #142‬‬

‫بينته بحروف معينة ؟!‬

‫ي‬ ‫بتاع‬
‫ي‬ ‫أول ‪ Quantifier‬عندي وهو الـ ‪ $‬بستخدمه عشان اعمل ‪ Test‬هل الـ ‪string‬‬

‫الل انا كتبته دا ؟!‬

‫بينته بالـ ‪ Pattern‬ي‬
‫ي‬ ‫استخدمت الـ ‪ $‬وسألته ع المتغت الـ ‪ myString‬هل‬
‫الل كتبته‬
‫بتنته بنفس الـ ‪ Pattern‬ي‬
‫ي‬ ‫ه ‪Programming‬‬ ‫وفعال اخر كلمة فيه ي‬

‫بتنته بالـ ‪LZ‬‬ ‫وكذلك لو طبقت دا عل ن‬

‫تان ‪ string‬عندي بتاع الـ ‪ names‬فعال اخر حاجه بيه‬
‫ي‬ ‫ي ي‬

‫‪By: Amr Elsayed‬‬

‫بتاع بيبدأ بحروف معينة ؟!‬ ‫‪string‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫هل‬ ‫‪Test‬‬ ‫اعمل‬ ‫عشان‬ ‫بستخدمه‬ ‫^‬ ‫ـ‬ ‫ل‬‫ا‬ ‫وهو‬ ‫عندي‬ ‫‪Quantifier‬‬ ‫تان‬‫ن‬
‫ي‬ ‫ي‬

‫ن‬ ‫ن‬
‫يف اخر مثال دا انا بقوله يف الـمتغت ‪ names‬دا هل بيبدأ بأي ‪ digits‬من خالل استخدام الـ ‪\d‬‬
‫واالجابة ‪ true‬الن اول اسم بيه بيبدأ بـ ‪10‬‬

‫تالت ‪ Quantifier‬عندي وهو الـ =? بستخدمه عشان اعمل ‪ matching‬ألي حاجة متبوعة بالـ ‪character‬‬
‫الل انا هحطه دا‬
‫ي‬

‫الل بيبدأ بـ ‪ \d digits‬بعدها كلمة مكونه من ‪ 5‬حروف }‪\w{5‬‬

‫انا هنا بقوله انا عايز العنض ي‬
‫متبوعة بحرف الـ ‪(?=Z) Z‬‬

‫رابع ‪ Quantifier‬عندي وهو الـ !? بستخدمه عشان اعمل ‪ matching‬ألي حاجة ليست متبوعة‬
‫الل انا هحطه دا‬
‫بالـ ‪ character‬ي‬

‫الل بيبدأ بـ ‪ \d digits‬بعدها كلمة مكونه من ‪ 8‬حروف }‪\w{8‬‬

‫انا هنا بقوله انا عايز العنض ي‬
‫وليست متبوعة بحرف الـ ‪(?!Z) Z‬‬
 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫ر‬
‫صديف وهو دا مفهوم االستمرارية الصحيح‬ ‫ال تقلق انت كويس جدا يا‬
‫ي‬

‫اذكر هللا ️♥‬

‫ر‬ ‫ر‬
‫ال إله اال هللا وحده ال شيك له ‪ ..‬له الملك وله الحمد وهو عل كل ي‬
‫شء قدير‬
‫الح القيوم واتوب اليه‬
‫استغفروا هللا العظيم الذي ال إله اال هو ي‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬ ‫اللهم ّ‬

‫العل العظيم‬
‫ي‬ ‫ال حول وال قوة اال باهلل‬
‫ن‬
‫الظالمي‬ ‫ان كنت من‬‫ال إله اال انت سبحانك ن‬
‫ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫‪Regular Expression – Replace With Pattern Lesson #143‬‬

‫ن‬ ‫ن‬
‫استخدمت الـ ‪ replace method‬عشان أبدل أول @ يف الجملة الموجودة يف المتغت ‪ txt‬بكلمة ‪JavaScript‬‬

‫ن‬ ‫ن‬
‫استخدمت الـ ‪ replaceAll‬عشان أبدل كل @ يف الجملة الموجودة يف المتغت ‪ txt‬بكلمة ‪JavaScript‬‬

‫ن‬
‫معي واستخدم عليه الـ ‪replace‬‬ ‫ان احط ‪pattern‬‬ ‫ممكن كمان استخدم الـ ‪ regular expression‬نف ن‬
‫ن‬ ‫ي ي‬ ‫ن‬
‫ر‬
‫ممكن اعمل الـ ‪ pattern‬دا يف متغت زي ‪ re‬وممكن اعمل الـ ‪ pattern‬دا يف الـ ‪ console‬مباشة‬
 ‫‪Regular Expression – Form Validation Lesson #144‬‬

‫بتاع‬
‫ي‬ ‫عملت هنا ‪ event‬الـ ‪ onsubmit‬ع الـ ‪form‬‬
‫ن‬
‫الل الـ ‪ user‬هيكتبها يف الـ ‪input‬‬
‫عملت متغت اسمه ‪ phoneInput‬وظيفته تسجيل الـ ‪ value‬ي‬

‫ن‬
‫قوسي وعملت طبعا ‪ escape‬لالقواس‬ ‫بعدا كدا عملت الـ ‪ pattern‬بتاع الل هو عبارة عن ‪ digits 4‬ن‬
‫بي‬ ‫ي ي‬
‫بعده ‪ \s‬تعمل ‪ .... space‬بعدين ‪ .... digits3‬بعدين ‪ .... -‬بعدين ‪digits4‬‬

‫الل الـ ‪ user‬هيكتبها مع الـ‪pattern‬‬

‫بعد كدا عملت متغت اسمه ‪ validationResult‬بعمل فيه ‪ test‬للـ ‪ Value‬ي‬
‫الل انا حطيته‬
‫ي‬
‫يعن الشخص كتب ‪ values‬غت متطابقة مع‬ ‫ن‬ ‫ن ر‬
‫وبقول يف شط لو الـ ‪ validationResult‬دا كان ‪ false‬ي‬
‫ر‬
‫يبف مفيش أي بيانات هتتبعت‬
‫الل انا حطيته ي‬
‫الـ ‪ pattern‬ي‬
‫يبف البيانات تتبعت عادي‬ ‫ر‬ ‫ر‬
‫الل انا حطيته ي‬
‫يبف الشخص كتب ‪ values‬بنفس الـ ‪ pattern‬ي‬ ‫ولو كانت ‪ true‬ي‬

‫‪By: Amr Elsayed‬‬

 ‫بنفش وطلعت نفس النتيجة بالظبط‬
‫ي‬ ‫انا هنا حبيت اعملها انا بشكل مختلف‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫اللهم ّ‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته‬
‫ن‬
‫الظالمي‬ ‫ان كنت من‬ ‫ن‬
‫ال إله اال انت سبحانك ي‬
‫ن‬
‫العالمي‬ ‫ينبع لجالل وجهك ولعظيم سلطانك يا رب‬‫كثتا مبارًكا فيه كما ن‬ ‫حمدا ً‬
‫طيبا ً‬ ‫ً‬
‫اللهم لك الحمد‬
‫ي‬
‫العل العظيم‬
‫ي‬ ‫ال حول وال قوة اال باهلل‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫ال تنسونا من دعواتكم‬
‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫‪Test Your Regular Expression Lesson #145‬‬

‫ن‬
‫المواقع المذكورة يف الدرس‬
‫‪regexr.com‬‬
‫‪regextester.com‬‬
‫‪regex101.com‬‬

‫لينك الدرس نفسه‬

‫بالنسبة للـ ‪ Challenge‬فالتكليف ‪ 6‬هو هو الـ ‪Challenge‬‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ن‬
‫الظالمي‪.‬‬ ‫ن‬
‫إن كنت من‬ ‫ن‬
‫إن أستغفرك واتوب إليك‪ ،‬ال إله اال انت سبحانك ي‬‫اللهم ي‬
‫حسن هللا ال إله اال هو عليه توكلت وهو رب العرش العظيم‪.‬‬
‫ري‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫ال تنسونا من دعواتكم‬
‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 Assignments From [134] = > [146]
]146[ >= ]134[ :‫لينك التكليفات‬
‫ن‬ ‫هتالقين عامل ليها ر‬
‫ن‬ ‫ن‬
Variables ‫اكت من حلل بس مغت يف شكل الـ‬ ‫ي‬ ‫التكليفات‬ ‫بعض‬ ‫ف‬
‫ي‬
01 :‫التكليف‬
// Assignment One
let ip = "2001:db8:3333:4444:5555:6666:7777:8888";

let ipRe = /\d{4}:\w+:\d{4}:\d{4}:\d{4}:\d{4}:\d{4}:\d{4}/gi;

console.log(ip.match(ipRe));

// Another Solution
let ipRee = /(\w+|\D+)+/gi;
console.log(ip.match(ipRee));

02 :‫التكليف‬
// Assignment Two

let specialNames = "Os10O OsO Os100O Osa100O Os1000 Os100m";

let specialNamesRe = /Os(\d+|)O/gi;

let specialNamesRee = /Os\d*O/gi;

console.log(specialNames.match(specialNamesRe));
console.log(specialNames.match(specialNamesRee));

03 :‫التكليف‬
// Assignment Three
let phone = "+(995)-123 (4567)";

let phoneRe = /\D\(\d{3}\)\D\d{3}\s\(\d{4}\)/gi;

let phoneRee = /\D*\d+\D*\d+\s*\D*\d+\D*/g;
let phoneReee = /\+\(\d{3}\)-\d{3}\s\(\d{4}\)/gi;

console.log(phone.match(phoneRe));
console.log(phone.match(phoneRee));
console.log(phone.match(phoneReee));
console.log(phoneRe.test(phone), phoneRee.test(phone), phoneReee.test(phone));

04 :‫التكليف‬
‫محتاج كالم كتت مش الزم مش الزم‬

By: Amr Elsayed

 05 :‫التكليف‬
// Assignment Five
let date1 = "25/10/1982";
let date2 = "25 - 10 - 1982";
let date3 = "25 10 1982";
let date4 = "25 10 82";

// Write Pattern Here

// let dateRe = /\d{2}\s*-*\s*\/*\d{2}\s*-*\s*\/*\d{2,}/g;

// Another Solution
// let dateRe = /\d+(\/|\s-\s|\s)\d+(\/|\s-\s|\s)\d+/gi;

//Another Solution
let dateRe = /\d{2}(\s|\/)(-)?(\s)?\d+(\s|\/)(-)?(\s)?\d+/gi;

console.log(date1.match(dateRe)); // "25/10/1982"
console.log(date2.match(dateRe)); // "25 - 10 - 1982"
console.log(date3.match(dateRe)); // "25 10 1982"
console.log(date4.match(dateRe)); // "25 10 82"

06 :‫التكليف‬
// Assignment Six
let url1 = "elzero.org";
let url2 = "http://elzero.org";
let url3 = "https://elzero.org";
let url4 = "https://www.elzero.org";
let url5 = "https://www.elzero.org:8080/articles.php?id=100&cat=topics";

let urlRe = /((http?)s?:\/\/)?(www.)?\w+.\w+(:\w+\/.\w+.\w+\D+\w+\D+)?/g;

// Another Solution
// let urlRe =
/((http?)s?:\/\/)?(\w+.)?\w+.\w+(:\d+\/\w+.\w+\D\w+\D\d+\D\w+\D\w+)?/ig;
console.log(url1.match(urlRe));
console.log(url2.match(urlRe));
console.log(url3.match(urlRe));
console.log(url4.match(urlRe));
console.log(url5.match(urlRe));

By: Amr Elsayed

 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫الصعوبة ديما بتقل بعد أول محاولة وانت اكيد مقتنع ان بعد أول محاولة ر‬
‫الشء الصعب بتكتشف انه بقا سهل‬
‫ي‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫سبحان هللا وبحمده سبحان هللا العظيم‬
‫العل العظيم‬
‫ي‬ ‫أكت وال حول وال قوه اال باهلل‬
‫سبحان هللا والحمد هلل وال إله اال هللا وهللا ر‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪OOP Introduction Lesson #147‬‬
‫الـ ‪ Slides‬الل كان ر‬
‫بيتشح منها الجزء النظري‬ ‫ي‬

‫‪ -‬الـ ‪ OOP‬اختصار الـ ‪Object Oriented Programming‬‬

‫ن‬ ‫ن‬
‫عل شكل كتابة الـ ‪object‬‬
‫ي‬ ‫الكتابة‬ ‫ف‬
‫ي‬ ‫وبيعتمد‬ ‫‪JS‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫كتابة‬ ‫ف‬
‫ه مجرد ‪ Style‬مختلف شوية ي‬
‫‪ -‬الـ ‪ OOP‬ي‬
‫ن‬
‫‪ -‬الـ ‪ OOP‬مش حاجة جديدة بالعكس دا موجود من الـستينات و يف بعض اللغات بتدعم الـ ‪ OOP‬ولغات تانية ال‬
‫ولغات تانيه بتدعم حاجات من الـ ‪ OOP‬وحاجات تانيه الء‬

‫‪ -‬الـ ‪ Object‬نفسه زي ما اتعلمنا عبارة عن حقيبة كدا او ‪ Package‬بيكون جواها ‪ Properties‬و الـ ‪Methods‬‬
‫ن‬
‫معي‬ ‫ن‬
‫االتني دول مع بعض بيعمل اتحاد عشان يعمل ‪ App‬بـ ‪Style‬‬ ‫وجود‬

‫عل سبيل المثال ‪ <---‬مثال العربية ‪ ..‬العربية هنا عبارة عن ‪Object‬‬

‫ي‬
‫تعتت الـ ‪Properties‬‬
‫‪ -‬أي معلومات عن العربية زي لونها نوعها اسمها الموديل بتاعها كل دي ر‬
‫تمش تغت شعات كل دي ‪ Functions‬او ‪Methods‬‬ ‫‪ -‬اما سلوك العربية نفسه زي انها تتحرك توقف ر‬
‫ي‬

‫ليه استخدم الـ ‪ OOP‬وهل ليه مساوئ وعيوب ؟!‬

‫‪ -‬ايون الـ ‪ OOP‬ليه بعض العيوب ولكن انت هتفهم رشح الـ ‪ OOP‬وبعدين وانت شغال هل هو بطريقته بكل‬
‫الل بتعملها وال الء ؟!‬
‫حاجة تخصه مناسب للتطبيق او الفكرة ي‬

‫ممتات انك تستخدم الـ ‪ OOP‬هو انك من خالله هتقدر تكتب ‪Large and Complex Software‬‬‫ن‬ ‫‪ -‬لكن‬
‫ن‬
‫يعن أي تطبيق كبت ومعقد جدا الـ ‪ OOP‬هيساعدك تفكك التعقيد دا ببساطة وتشتغل‬
‫ي‬

‫‪ -‬هتقدر من خالل الـ ‪ OOP‬انك تعمل ‪ Encapsulation‬او إخفاء الجزاء من الـ ‪code‬‬

‫‪ -‬هتقدر تعمل ‪ Reusable objects‬تقدر تستخدمها نف ر‬

‫اكت من مكان ‪ +‬الـ ‪ inheritance‬او التوريث‬ ‫ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Constructor Function Introduction Lesson #148‬‬
‫ننش ‪Object‬‬ ‫عن طريق الـ ‪ Constructor Function‬هنقدر اننا ر‬

‫أي الحكمة من استخدام الـ ‪ Constructor Function‬ن يف انشاء الـ ‪ object‬؟!‬

‫فطبيع جدا يكون عندي مخطط او حاجة‬ ‫سكن مليان عمارات وشقق‬ ‫ن‬ ‫تخيل انا لو معايا ‪compound‬‬
‫ي‬ ‫ي‬
‫أنش المساكن والعماير دي بشكل منظم وبحسب كل عمارة‬ ‫بيطلق عليها ‪ blueprint‬من خاللها ببدأ ر‬
‫ن‬
‫هتاخد مساحة قد أي وهتكون مكونة من كام طابق وكام شقه يف الطابق كدا دا من خالل مخطط عندي‬

‫ان لما ابص‬ ‫ماش عليه بشكل منظم ووظيفته ن‬

‫الحكمة من وجود المخطط دا هو نان يكون عندي نظام ثابت ر‬
‫ي‬ ‫ي‬ ‫ي‬
‫بيعت عن أي!‬ ‫ر‬
‫ابف قادر افهم هو ر‬
‫االعل ي‬
‫ي‬ ‫الل هو نظرة عامة من‬
‫عليه من فوق زي نظام الـ ‪ Bird view‬كدا ي‬

‫ن‬
‫بتخلين اعمل المخطط دا بقا وكمان اخد أجزاء من المخطط دا اطبقها‬ ‫عالم الـ ‪ OOP‬هو عبارة عن حاجة‬
‫ي‬ ‫ن‬
‫يف أماكن تانية‬

‫الل عندي قبل ما اعمل مخطط‬

‫دا شكل الـ ‪ Objects‬ي‬
‫تخيل لو حابب ازود الـ ‪ salary‬بتاع كل موظف عندي‬
‫عل كل ‪object‬‬ ‫فعشان دا يحصل هتضطر ر‬
‫تمش ي‬‫ي‬
‫موجود عندك وتعدل الـ ‪ salary‬فيه‬

‫ر‬
‫منطف ؟!‬ ‫فتخيل لو عندك ‪ 1000‬موظف هل‬
‫ي‬
‫انك ر‬
‫تمش عليهم بإيدك كلهم واحد واحد وتعدل عليهم؟‬
‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫تعال نشوف لو عندنا الـ ‪ Constructor Function‬هنقدر ببساطة نعدل ازاي البيانات ؟!‬
‫ي‬

‫الل هرجع اعوض عنها بـ ‪ arguments‬فيما بعد‬

‫بعمل ‪ function‬عادية جدا وبمرر فيها ‪ Parameters‬ي‬
‫الل حصل دا عملية اسمها‬
‫اسم الـ ‪ function‬يفضل يكون اول حرف فيه ‪ Capital‬زي ‪ User‬كدا كل ي‬
‫الل هيتم انشائه جديد داخل الـ ‪ constructor‬دا‬
‫عل الـ ‪ object‬نفسه ي‬
‫‪ instantiate‬اما الـ ‪ this‬دي بتعود ي‬

‫معن الكالم دا أي ؟!‬‫طيب ن‬

‫ي‬
‫الل هيتمرر مكان‬ ‫لما راج ر‬
‫هيكون هو الـ ‪ argument‬ي‬
‫ر‬
‫الل الشخص هيكتبه‬
‫ي‬ ‫أنش ‪ object‬جديد الـ ‪id‬‬
‫ن‬ ‫ي‬
‫باف البيانات‬
‫الل عملتها فوق وكذلك ي‬
‫الـ ‪ parameter id‬يف الـ ‪ function‬ي‬

‫بتاع‬
‫ي‬ ‫الل اسمها ‪ new‬دي وجنبها اسم الـ ‪constructor‬‬ ‫اج اعمل ‪ user‬جديد من خالل الـ ‪ keyword‬ي‬ ‫لما ر ي‬
‫الل هو أسم الـ ‪User <--- function‬‬‫ي‬
‫هكتب أي بقا بداخل الـ ‪ user‬الجديد دا ؟! ‪ ...‬هكتب الـ ‪ id‬و الـ ‪ username‬و الـ ‪salary‬‬

‫اهو عملت ‪ userOne‬و ‪ useTwo‬و ‪userThree‬‬

‫وعوضت عن الـ ‪ id‬و الـ ‪ username‬و الـ ‪ salary‬بالقيم الخاصة بكل ‪ user‬جديد انا عملته‬
‫هما فوق كانو ‪ Parameters‬انا وانا بعمل ‪ user‬جديد عوضت عنهم بالـ ‪ arguments‬بقا‬
 ‫تعال نشوف‬
‫ي‬ ‫عل أي ‪ user‬عندي جديد عملته هعمل أي ؟! ‪...‬‬
‫طيب عايز اعمل ‪ Access‬ي‬

‫الل انا أصال فوق قولتله ‪this.i‬‬

‫بتعت عن الـ ‪ id‬ي‬
‫قولتله الـ ‪ userOne.i‬والـ ‪ i‬دي ر‬
‫الل انا عملته من خالل الـ ‪ new‬سواء ‪ one‬او ‪ two‬او ‪three‬‬‫بتاع الجديد ي‬
‫ي‬ ‫عل ‪user‬‬‫الـ ‪ this‬دي بتعود ي‬
‫عل الـ ‪salary‬‬
‫عل الـ ‪ username‬والـ ‪ s‬بتعود ي‬
‫عل الـ ‪ id‬والـ ‪ u‬بتعود ي‬
‫والـ ‪ i‬بتعود ي‬

‫فانا قولتله مكان الـ ‪ this‬هكتب ‪ userOne‬ومكان الـ ‪ i‬هتكون الـ ‪ id‬وهكذا‬

‫‪By: Amr Elsayed‬‬

 ‫روحت انا بقا عايز ازد الـ ‪ Salary‬بـ ‪ 1000‬لكل موظف او كل ‪ user‬عندي هعمل أي ؟!‬

‫ن‬ ‫ن‬
‫الل فات انا بعمل ‪ Constractor‬بالـ ‪ Syntax‬العادي يف الدروس الجاية هيكون يف ‪ syntax‬مختلف‬
‫كل ي‬
‫وافضل وتابع اللـ ‪ES6‬‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Constructor Function New Syntax Lesson #149‬‬

‫بتاع القديم واضغط ‪ctrl + . <-----‬‬

‫ي‬ ‫عل الـ ‪Constructor Function‬‬
‫هاج ي‬
‫ر ي‬
‫واعمل ‪ convert‬لـ ‪ syntax‬الـ ‪ES6‬‬

‫ن‬
‫بتاع‬
‫ي‬ ‫دا الـ ‪ ES6 Syntax‬يف كتابة الـ ‪Constructor Function‬‬

‫الل تم منه الـ ‪ user‬الجديد دا اعمل أي ؟! او عايز اعمل المخطط‬ ‫ر‬

‫دلوقن لو حابب استعلم عن الـ ‪ instance‬ي‬
‫ي‬
‫بتاع دا وأقوله‬ ‫ان اكتب اسم الـ ‪new Object‬‬ ‫ن‬
‫ي‬ ‫الل تم من خالله انشاء الـ ‪ userOne‬دا فهسال من ي‬
‫ي‬
‫هل انت ‪ instanceof‬من الـ ‪ User Constructor‬دا ؟!‬

‫ممكن اسأل برضو هل الـ ‪ Constructor‬بتاع الـ ‪ userOne‬بيساوي ‪ User‬؟!‬

‫ن‬
‫وبما انه يف كل األحوال الـ ‪ userOne‬دا ‪ instance‬من الـ ‪ User Constructor‬هتكون النتيجة ‪Ture‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫اصت واستعن باهلل‬

‫متستعجلش النتايج فقط ر‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ن‬
‫الظالمي‪.‬‬ ‫إن كنت من‬‫اللهم نإن أستغفرك واتوب إليك‪ ،‬ال إله اال انت سبحانك ن‬
‫ي‬ ‫ي‬
‫حسن هللا ال إله اال هو عليه توكلت وهو رب العرش العظيم‪.‬‬
‫ري‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫ال تنسونا من دعواتكم‬
‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Deal With Properties And Methods Lesson #150‬‬

‫ن‬ ‫ن‬
‫يف الـ ‪ this.u‬عملت ‪ condition‬يف حالة لو الـ ‪ user‬مكتبش اسمه فهتكتب مكان االسم كلمة ‪Unknown‬‬
‫ن‬
‫الل هتتطبع كتبت ‪ this.u‬بدال من ‪ username‬عشان لو انا كتب ‪username‬‬ ‫اما يف الـ ‪ this.msg‬نفالرسالة ي‬
‫وهو بيطبع الرسالة ف حالة لو الـ ‪ user‬مكتبش اسمه الرسالة الل هتطبع دي هيكون مكان االسم ن‬
‫فاض تماما‬
‫ي‬ ‫ي‬ ‫ي‬
‫فالرسالة هتتكتب ‪ hello ,‬من غت أي اسم هيكون فراغ ‪empty string‬‬

‫ن‬
‫الل الـ ‪ user‬عوض عنه كـ ‪argument‬‬ ‫اما يف حالة لو كتبت ‪ salary‬بس بدال من ‪ this.s‬هيكتب الـ ‪ salary‬ي‬
‫الل هتطبع ف الرسالة لكن انا أصال عامل رشط انه لو اقل من ‪5000‬‬ ‫ي‬ ‫فه‬‫يعن لما هو كتب ‪ 5000‬ي‬ ‫ي‬
‫تحت ن‬
‫ن‬ ‫ن‬ ‫ن‬
‫إضاف لذلك انا كتبت الـ ‪ this.s‬عشان يقرا ر‬ ‫ن‬
‫الل حصل يف الـ ‪ this.u‬أصال ويعوض يف الرسالة‬
‫ي‬ ‫ط‬ ‫الش‬ ‫ي‬ ‫فتود ‪500‬‬
‫عن الـ ‪ salary‬بـ ‪5500‬‬

‫‪By: Amr Elsayed‬‬

 ‫فلو كتبت ‪ userName‬و ‪ salary‬بدال من ‪ this.u‬و ‪this.i‬‬

‫هتكون دي النتيجة‬
‫الل زودتهم انا لو الـ ‪salary‬‬ ‫‪500‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫نف حالة اول ‪ user‬الـ ‪ 5000‬بتاعت الـ ‪ salary‬اتكتب زي ما ه ولكن ن‬
‫في‬
‫ي‬ ‫ي‬ ‫ي‬
‫مش موجودة‬ ‫‪...‬‬ ‫!‬‫اقل من ‪ 5000‬؟‬

‫ن‬ ‫ن‬ ‫ن‬ ‫ن‬ ‫ن‬

‫تان ‪ user‬في اسمه ؟! ولو مكتبش اسمه في ‪ Unknown‬ي‬
‫الل انا قولتله عوض عنها يف حالة عدم‬ ‫يف حالة ي‬
‫وجود اسم للـ ‪ user‬؟!‬

‫لذلك كان البد من كتابة الـ ‪ this.s‬والـ ‪this.u‬‬

‫الل جاي هو شغل الـ ‪Methods‬‬

‫الل فاتوا دول عبارة عن ‪ Properties‬اما ي‬
‫كل ي‬

‫‪By: Amr Elsayed‬‬

 ‫‪Update Properties And Built In Constructors Lesson #151‬‬

‫بما انه نف أخر الدرس دا قالك انا عايزك تفهم قبل ما تتعمق مش تتعمق األول بعدين تفهم فتعال ر‬
‫نشح بطريقة‬ ‫ي‬ ‫ن‬ ‫ي‬
‫الل أتذكر يف الدرس دا‬
‫نفهم بيها كل ي‬

‫ر‬
‫يبف انا محتاج اعمل ‪ Method‬او ‪ function‬تنفذ المطلوب‬
‫أول حاجه لو عايز اعمل ‪ Update‬للـ ‪ username‬ي‬
‫دا‬

‫عملت ‪ Method‬اسمها ‪ updateName‬ومررت فيها ‪ Param‬اسمه ‪ newName‬هيتم التعويض عنه باالسم‬

‫عل الـ ‪object‬‬
‫الل انا هحطه بعدين قولتله الـ ‪ this.u = newname‬لو تفتكر الـ ‪ this‬دي بتعود ي‬
‫الجديد ي‬
‫بنفش‬
‫ي‬ ‫الل انا هعمله انشاء‬
‫ي‬

‫الل عملتها وعملت ‪Update‬‬

‫زي ما انت شايف كان االسم األول ‪ Elzero‬بعدين استخدمت الـ ‪ method‬ي‬
‫لالسم بـ ‪Osama‬‬
 ‫تعال بقا نفهم قصة الـ ‪built-in Constructors‬‬
‫ي‬

‫ان عندي ‪ strOne‬بيعمل ‪ string‬بيساوي كلمة الـ "‪"Elzero‬‬‫ر ن‬

‫دلوقن ي‬
‫ي‬ ‫لو قولتلك‬
‫وعندي ‪ strTwo‬برضو بيعمل ‪ string‬بساوي كلمة "‪ "Elzero‬برضو‬

‫ن‬ ‫ن‬ ‫ن‬ ‫ن‬ ‫ن‬

‫يعن كل واحد يف دول وظيفته انشاء‬
‫ياتري أي الفرق بي االتني مع ان االتني تم فيهم انشاء ‪ string‬أصال ي‬
‫‪ string‬اسمه "‪"Elzero‬‬

‫ن‬ ‫ن‬
‫الل تم انشاء الـ ‪ string‬بيهم‬
‫ي‬ ‫الطرقتي‬ ‫ف‬
‫تعال األول نشوف نوع بيانات كل واحد ي‬
‫ي‬

‫الن استخدمت الـ ‪ string Constructor‬فيها‬ ‫التان ‪ object‬ودا حصل ن‬

‫اول واحد هو عبارة عن ‪ String‬اما ن‬
‫ي‬ ‫ي‬ ‫ن‬
‫األول مش متماثلة او مش ‪ instance‬من الـ ‪ String Constructor‬أصال‬ ‫الحالة‬ ‫ولكن‬ ‫ن‬
‫الحالتي‬ ‫ف‬
‫ي‬ ‫ي‬

‫ن‬
‫الل حصل فوق‬
‫تعال بص بقا ع دي عشان هتفهم الفرق يف ي‬
‫ي‬

‫هنا انت بتقوله هل الـ ‪ strOne‬دا متماثل من الـ ‪ string constructor‬؟! هتكون النتيجة ال ‪false‬‬
‫طيب هل الـ ‪ strTwo‬دا متماثل او مأخوذ من الـ ‪ string constructor‬؟! هتكون النتيجة اه ‪true‬‬
‫دا حصل فعال‬
‫ن‬ ‫ن ن‬ ‫ن‬
‫الحالتي يف اول حالة انت فعال يف حالة الـ ‪ strOne‬بتستخدم‬ ‫الل حصل يف‬
‫طيب هو أي ي‬
‫الـ ‪ string constructor‬فعال ولكنه مش متماثل من الـ ‪ string constructor‬النه معمول بطريقة تانية‬
‫اما الـ ‪ strTwo‬متماثل فعال من الـ ‪string constructor‬‬
‫ر‬
‫هتالف ‪ strOne‬نتيجته ‪ false‬اما الـ ‪ strTwo‬نتيجته ‪true‬‬
‫ي‬ ‫لذلك‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫معمولي من الـ ‪ String Constructor‬ولكن كل واحد معمول بطريقة‬ ‫ن‬
‫االتني دول‬ ‫تيح نتأكد بقا ان‬
‫طيب ر ي‬
‫غت التانية ؟!‬

‫انا بقوله هنا هل الـ ‪ strOne‬معمول من الـ ‪ String Constructor‬؟!‬

‫و بقوله هل الـ ‪ strTwo‬معمول من الـ ‪ String Constructor‬برضو ؟!‬
‫ن‬ ‫ن‬ ‫ر‬
‫األول معمولة خالل الـ ‪String Constructor‬‬
‫ي‬ ‫الحالتي ‪ true‬ولكن زي ما قولنا الطريقة‬ ‫هالف النتيجة يف‬
‫ي‬
‫ن‬
‫يعن‬
‫ولكنها مش ‪ instance‬منه او مش متماثله منه او مش من عيلته ي‬
‫ه ‪ instance‬منه‬ ‫اما التانية معموله من خالل الـ ‪ String Constructor‬فعال و ي‬
‫لذلك كان نوع كل واحد مختلف واحده ‪ String‬وواحد ‪Object‬‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬

 ‫‪Class Static Properties And Methods Lesson #152‬‬

‫الل بنشائها من الـ ‪ Class‬دا‬

‫ه خواص تخص الـ ‪ Class‬نفسه وملهاش أي عالقة بالـ ‪ objects‬ي‬‫الـ ‪ static‬ي‬
‫يعن لو عندي ‪ Class‬اسمه ‪ User‬أي خاصية بكتبها مسبوقة بكلمة ‪ Static‬فـالخاصية دي اصبحت تخص‬ ‫ن‬
‫ي‬
‫الـ ‪ Class‬دا نفسه واي ‪ Object‬بنشئه من الـ ‪ Class‬دا ملوش أي عالقة بالخاصية دي النها تخص الـ ‪Class‬‬

‫الل اسمه ‪ User‬دا وجواه خاصية اسمها ‪ count‬قيمتها ‪0‬‬

‫انا مثال عندي الـ ‪ Class‬ي‬

‫جيت من الـ ‪ User Class‬دا عملت الـ ‪ 2 Objects‬دول‬

‫ر‬
‫هالف النتيجة دي‪:‬‬
‫ي‬ ‫أج اعمل ‪ Access‬عل الـ ‪ count Property‬دي من الـ ‪ object‬نفسه‬
‫لما ر ي‬

‫ن‬
‫عل أي حاجة يف الـ ‪User Class‬‬
‫الل هو ‪ userOne‬يقدر يـ ‪ Access‬ي‬
‫إذا الـ ‪ Object‬ي‬
‫‪By: Amr Elsayed‬‬
 ‫التال‬
‫ي‬ ‫الل اسمه ‪ User‬دا وكتبت‬
‫طب لو انا مسكت الـ ‪ Class‬نفسه ي‬

‫عل الـ ‪ count Property‬الموجودة جواه‬

‫هالحظ ان الـ ‪ User Class‬دا مقدرش يـ ‪ Access‬ي‬

‫الل بنتكلم عنها‬

‫يح بقا موضوع الـ ‪ static‬ي‬
‫هنا ر ي‬

‫عل الـ ‪ count‬دي والـ ‪ object‬بتاع الـ ‪ userOne‬مش هيقدر‬ ‫هنا بقا الـ ‪ User Class‬هو هيقدر يـ ‪ Access‬ي‬
‫ن‬
‫فاهمن ؟!‬ ‫الل حصل بعد كلمة ‪ static‬قبل خاصية الـ ‪ count‬جعل الوضع السابق معكوس‬ ‫ر‬
‫ي‬ ‫يبف ن ي‬
‫يوصلها ي‬
‫الل بيتم انشائها منه‬
‫اذا زي ما قولنا يف أول سطر فوق الـ ‪ static‬بتخص الـ ‪ Class‬نفسه والـ ‪ objects‬ي‬
‫ملهاش عالقة بأي ‪Static Property‬‬

‫الل حصل الموضوع اتعكس بعد استخدام الـ ‪static‬‬

‫بص شوفت ي‬

‫ه تخص الـ ‪ Class‬نفسه‬ ‫وكذلك الوضع مع أي ‪ Method‬داخل الـ ‪ Class‬نفسه لو سبقه كلمة ‪ Static‬ر‬
‫يبف‬
‫ي ي‬
‫عل الـ ‪ Method‬دي‬
‫واي ‪ object‬بيتم انشائه من الـ ‪ Class‬دا ميقدرش يـ ‪ Access‬ي‬

‫‪By: Amr Elsayed‬‬

 ‫تعال ناخد مثال ‪ Advanced‬شوية ونطبق فيه فكرة الـ ‪ static‬و ان الـ ‪ Property‬و الـ ‪ Methods‬تكون‬
‫ي‬ ‫طيب‬
‫بتخص الـ ‪ Class‬نفسه‬

‫طبعا انت خالص فهمت ان الـ ‪ countMembers‬دي بقت تخص الـ ‪ User‬نفسه بقا لذلك الـ ‪ User‬نفسه‬
‫الل قادر انه يـ ‪ Access‬عليها‬
‫هو ي‬
‫طيب ن‬
‫معن الـ ‪ code‬أي ؟ أو انا عملت أي؟!‬
‫ي‬
‫ببساطة انا عملت ‪ static Property‬اسمها ‪ count‬قيمتها ‪0‬‬
‫ن‬
‫عل الـ ‪ Class‬نفسه‬
‫وف الـ ‪ method‬بتاعت الـ ‪ countMembers‬انا قولتله ‪ this.count‬الـ ‪ this‬دي بتعود ي‬ ‫ي‬
‫يعن انا ممكن اشيل الـ ‪ this‬دي واحط ‪ User.count‬ولكن انا بستخدم الـ ‪ this‬عشان لو انا غتت اسم‬ ‫ن‬
‫ي‬
‫تان مبقاش مضطر انزل اغت اسمه مرة كمان تحت فاهم انا ليه استخدمت الـ ‪this‬‬ ‫ن‬
‫الـ ‪ Class‬من ‪ User‬ألي اسم ي‬
‫عل الـ ‪ User Class‬نفسه‬
‫المهم زي ما قولنا الـ ‪ this‬دي بتعود ي‬

‫داخل الـ ‪ Constructor‬نفسه بقا انا قولتله الـ ‪ User.count++‬عشان الـ ‪ count‬دي تخص الـ ‪ User‬فهو الوحيد‬
‫عل انه يقراها ويتعامل معاها فاهم‬ ‫القادر ي‬
‫الل بـ ‪ 0‬دا مع كل انشاء لـ ‪ Object‬جديد من الـ ‪ User Class‬دا‬ ‫ن‬
‫معن الكالم دا انه بقوله الـ ‪count‬‬
‫ي‬ ‫ي‬
‫يبف‬‫الـ ‪ Count‬دي تزيد بمقدار عدد الـ ‪ Objects‬الل تم انشاؤها فعليا وبما نان نف المثال عندي ‪ Objects 2‬بس ر‬
‫ي‬ ‫ي ي‬ ‫ي‬
‫هما دول قيمة الـ ‪ count‬الجديدة ‪ 2‬بس او ==< ‪ 2 Members Created‬ومع كل زيادة تزيد قيمة الـ ‪count‬‬
 ‫‪Class Inheritance Lesson #153‬‬

‫التوريث من اهم أعمدة الـ ‪OOP‬‬

‫ن‬
‫لو عندي الـ ‪ User Class‬وجواه بعض الـ ‪ Properties‬و الـ ‪ Method‬وبستخدم الـ ‪ Class‬دا يف انشاء ‪users‬‬
‫كل ‪ user‬بيكون ليه ‪ ID‬و ‪ userName‬و ‪ Password‬مثال‬
‫أنش حساب للـ ‪ Admin‬و نفس الـ ‪ Class‬دا‬ ‫تان اسمه ‪ Admins‬بستخدمه عشان ر‬ ‫ن‬ ‫ن‬ ‫ر‬
‫ان عندي ‪ class‬ي‬‫ونفتض ي‬
‫ن‬
‫ممتات تانيه إضافية‬ ‫كل ‪ admin‬فيه بيكون ليه ‪ id‬برضو و ‪ userName‬و ‪ password‬وكمان بيكون ليه‬

‫يح دور الـ ‪ inheritance‬او التوريث فبدل ما تكون بـتـ ‪ repeat your self‬أو بتكرر نفسك‬ ‫هنا ر ي‬
‫َ‬ ‫ن‬
‫بمعن اخر بتعيد انشاء العجلة من أول وجديد وكمان قتلت مبدأ الـ ‪ reusability‬او إعادة االستخدام‬ ‫او‬
‫ي‬
‫ن‬
‫ه دي‬
‫ي‬ ‫كدا‬ ‫وبس‬ ‫الجديد‬ ‫‪Admin‬‬ ‫‪Class‬‬ ‫ـ‬ ‫ل‬ ‫ل‬ ‫دا‬ ‫‪User‬‬ ‫‪Class‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫فانت ممكن تورث بعض الخصائص الموجودة ي‬
‫كل الفكرة‬
‫والل جاي بعد كدا مجرد بس أسلوب لكتابة نقل التوريث دا من مكان ألخر فقط ال غت‬
‫ي‬

‫فمثال دا الـ ‪User Class‬‬

‫و دا الـ ‪Admin Class‬‬

‫ن‬
‫يعن انا بقوله انا عايز شوية حاجات من‬
‫‪ Admin‬دا كلمة ‪ extends‬من الـ ‪ User Class‬ي‬
‫ن‬
‫انا بقوله جنب الـ ‪Class‬‬
‫الـ ‪ User Class‬دا استخدمها يف الـ ‪Admin Class‬‬
‫الل انا هستمدها من الـ ‪ User Class‬دا زي الـ ‪ id‬و الـ ‪userName‬‬
‫وبعدين قولتله ‪ Super‬وجواها الحاجات ي‬
 ‫ن‬ ‫ن‬
‫خلين بقا اعمل ‪ Object‬جديد من الـ ‪ Admin Class‬دا و أشوف بياناته يف الـ ‪Console‬‬
‫ي‬

‫وممكن تكرر العملية دي وتورث من ‪ Class‬لـ ‪ Class‬لـ ‪ Class‬وهكذا‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬

 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫عال الن كل ما تتاخر حماسك بيقل‬ ‫ر‬

‫دلوقن وحماسك ي‬
‫ي‬ ‫لما تحس بحماس لفكرة معينة نفذها‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬

‫أكت و ال حول وال قوة اال باهلل‬

‫سبحان هللا و الحمد هلل و ال الـه اال هللا و هللا ر‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬ ‫اللهم ّ‬
‫ن‬
‫الظالمي‬ ‫إن كنت من‬‫اللهم نإن أستغفرك واتوب إليك‪ ،‬ال إله اال انت سبحانك ن‬
‫ي‬ ‫ي‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬

 ‫‪Class Encapsulation Lesson #154‬‬

‫الـ ‪ Encapsulation‬او تغليف وحماية بعض البيانات‬

‫وتيح ر‬
‫تنش ‪ Object‬من الـ ‪ Class‬دا‬ ‫لما يكون عند الـ ‪ User Class‬وجواه بعض الخصائص ر ي‬
‫ن‬
‫فكل الخصائص الموجودة يف الـ ‪ User Class‬بتكون ‪ Public‬وتقدر تـ ‪ Access‬عليها كلها بسهولة‬
‫ن‬
‫يف بعض الحاالت هتكون محتاج ان يكون عند ‪ Property‬بحيث تكون ‪ privet‬ومش بسهولة يتم الوصول ليها‬
‫ر‬
‫حن يكون ممنوع الوصل ليها وللقيمة الموجودة فيها‬
‫او ي‬

‫الـ ‪ eSalary‬دا عشان اخليه ‪ encrypted‬او مشفر هحط قبل االختصار بتاع هاش ‪ #‬والزم اعمل ‪Declaration‬‬

‫ر‬
‫هتالف أصال ليه أي قيمة !‬
‫ي‬ ‫لو بعد تشفت الـ ‪ eSalary‬دا حبيت ـ ‪ Access‬عليه مش‬
‫جابل ‪ NAN‬ومجبليش أي ارقام‬ ‫ان كاتب ‪ 5000‬رقم مش ‪ string‬وال حاجة ومع ذلك‬ ‫والحظ ن‬
‫ي‬ ‫ي‬
‫حن لو لغيت العملية الحسابية خالص وحبيت ‪ Access‬ع الـ ‪ eSalary‬دا مش هالقيه أصال بالرغم من وجودة‬‫ر‬
‫ي‬
‫وكل دا حصل ن‬
‫الن عامله تشفت‬
‫ي‬

‫ن‬
‫طيب يف حالة لو الـ ‪ eSalary‬اتكتب بالشكل دا "‪ "5000 Gneh‬هنا انا محتاج احلل البيانات دي واطلع منها‬
‫ن‬
‫الرقم بعدين اعمل العملية الحسابية وكل دا يف ايطار تشفت البيانات برضو‬

‫طيب ن‬
‫يتعامل مع الـ ‪ Property‬ر‪ privet‬دي ؟! قالك ياسيدي الوحيد ي‬
‫الل يقدر يتعامل معاها‬
‫ن‬
‫الل يقدر‬
‫ي‬ ‫مي‬
‫باف الـ ‪ properties‬التانية و الـ ‪Methods‬‬
‫الل معاها يف الـ ‪ Class‬يقصد ي‬
‫هما الـ ‪ family‬ي‬
‫الل تقدر تشوف الـ ‪ privet property‬دا و تتعامل‬ ‫ن‬
‫ه ي‬‫الل بداخل الـ ‪ User Class‬ي‬ ‫معن الكالم دا ان كل العنارص ي‬
‫ي‬
‫تعال نشوف‬
‫ي‬ ‫معاه ‪ .....‬طيب نطبق الفكرة دي ازاي ؟! ‪.....‬‬

‫الل هتقدر تشوف الـ‬

‫وتعتت من ضمن العائلة بتاعت الـ ‪ class‬ي‬
‫ر‬ ‫ه ‪method‬‬ ‫الل ي‬
‫عملت الـ )(‪ getSalary‬ي‬
‫وتجبل األرقام لو مكتبة جنب ‪string‬‬
‫ي‬ ‫‪ privet property‬عادي جدا وطلبت منها انها تحلل البيانات‬

‫‪By: Amr Elsayed‬‬

 ‫‪Prototype Introduction Lesson #155‬‬

‫الل بيتم فيها استنساخ أي خواص‬ ‫وه ببساطة شديدة جدا األلية ي‬
‫الـ ‪ prototype‬معناها نموذج او مخطط ي‬
‫موجودة داخل أي ‪ Class‬او ‪ Built-in Constructors‬و استخدمها داخل أي ‪ Class‬هيورث من الـ ‪ Class‬األب‬
‫نقدر نقول بشكل مختض ر‬
‫اكت انها أليه عن طريقتها الـ ‪ Objects‬بتورث الخواص من بعض!‬

‫ن ن‬
‫يعن يف حالة وجود الـ ‪ User Class‬دا عند انشائه بيكون فيه ‪ Prototype‬مخصص ليه جواه الخواص‬ ‫ي‬
‫ن‬
‫والممتات بتاعته‬
‫الل‬ ‫ن‬ ‫ن‬
‫ان اورث كل الممتات ي‬
‫اج بقا استخدم الـ ‪ new‬عشان اعمل ‪ Object‬جديد من الـ ‪ User Class‬دا أقدر ي‬ ‫لما ر ي‬
‫ه موجودة داخل الـ ‪ Class‬او المخطط بتاع الـ ‪ Class‬دا‬ ‫ي‬
‫زي ما قولنا أي ‪ Object‬هيتم انشائه من الـ ‪ Class‬دا هيستفيد من الخواص او المخطط الموجود بداخل‬
‫الـ ‪ Class‬دا !‬

‫لو عملت متغت جديد اسمه ‪ strOne‬وانشأت ليه القيمة "‪ "Elzero‬العملية دا تمت ازاي ؟!‬

‫زميل عبارة عن‬

‫ي‬ ‫تم انشاء الـ ‪ string‬دا من خالل الـ ‪ String Constructor‬الـ ‪ constructor‬دا يا‬
‫ن‬
‫‪ built-in Function‬موجود يف اللغة وظيفته انشاء الـ ‪strings‬‬

‫الل هو الـ ‪ String Constructor‬دا ليه هو كمان ‪ Prototype‬او مخطط‬

‫والـ ‪ built-in Function‬ي‬
‫ن‬
‫ممتات داخل الـمخطط دا ؟!‬ ‫الل بيستفيد بأي‬ ‫ن‬ ‫ن‬
‫المخطط دا بيكون جواه ممتات وخصائص مي بقا ي‬

‫الل تم انشائه من خالل الـ ‪ built-in function‬دي‬

‫اكيد الـ ‪ string‬ي‬

‫ً‬
‫الل انا عملته يقدر يتمتع بيها‬
‫ي‬ ‫‪strOne‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫دا‬ ‫‪String‬‬ ‫‪Constructor‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫داخل‬ ‫الموجودة‬ ‫الحاجات‬ ‫كل‬ ‫ا‬ ‫اذ‬
‫ويستخدمها‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Add To Prototype Chain Lesson #156‬‬

‫حن أي ‪ Built-in Function‬بيكون ليها ‪Prototype‬‬ ‫ر‬

‫زي ما قولنا سابقا أي ‪ Function‬او ‪ Class‬بيتم انشائه او ي‬
‫ن‬
‫الممتات دي‬ ‫ممتات وبيتم توريث‬‫ن‬ ‫أو مخطط كدا بيكون جواه‬
‫يعن لما يكون عندي الـ ‪ User Class‬دا موجود وليه خصائص أي ‪ Object‬بقا هيتم انشائه من الـ ‪User Class‬‬ ‫ن‬
‫ي‬
‫دا يتمتع بكل خواص الـ ‪ User Class‬دا وكل الحاجات الموجودة داخل مخطط الـ ‪ User Class‬دا‬

‫الل يورث الحاجات الموجودة‬ ‫ر‬

‫الل هو الـ ‪ object‬ي‬
‫دلوقن عندي الـ ‪ User Class‬دا وأنشأت منه الـ ‪ userOne‬ي‬
‫ي‬ ‫انا‬
‫داخل مخطط الـ ‪ User Class‬دا‬
 ‫ر‬
‫ه الـ ‪ username‬و الـ ‪Id‬‬ ‫الل‬
‫ي ي‬ ‫بتاعتنا‬ ‫البيانات‬ ‫جواه‬ ‫هتالف‬
‫ي‬ ‫بص بقا ع الـ ‪ userOne‬دا‬
‫الل هو الـ ‪ object‬هو مش الـ ‪ userOne‬دا أصال ‪ Object‬؟!‬ ‫ر‬
‫هتالف ‪ Prototype‬ي‬
‫ي‬ ‫جواه بقا برضو‬
‫يبف هيستخدم خواص او مخطط الـ ‪ ... Object Constructor‬كمان الـ ‪ Prototype‬الموجود‬ ‫ر‬
‫ي‬
‫بتاع الـ ‪User class‬‬

‫ن‬ ‫ن‬
‫يعن يا باشا ببساطة كدا الـ ‪ userOne‬دا عشان هو يف األصل معمول من الـ ‪ User Class‬فهيورث الخصائص‬
‫ي‬
‫الل فيه ‪ ...‬وكمان عشان هو أصال كدا كدا نوعه ‪ Object‬فهيورث الخصائص بتاعت الـ ‪Object Constructor‬‬ ‫ي‬
‫ن‬
‫فاهمن؟!‬ ‫كمان ‪..‬‬
‫ي‬

‫الـ ‪ Prototype‬ألي عنض دا انا ممكن اضيف فيه أي حاجة انا عايزه‬
‫خالل فأي ‪ object‬بقا‬ ‫ن‬
‫يعن مثال الـ ‪ User Class‬دا انا هضيف جوا الـ ‪ Prototype‬بتاعه خاصية معينة من‬
‫ي‬ ‫ي‬
‫الل انا هعملها بإيدي!‬
‫هيورث أصال خصائص الـ ‪ User Class‬دي الـ ‪ Default‬أصال باإلضافة للـحاجة ي‬

‫‪User Class‬‬

‫زي ما انت شايف كدا الـ ‪ User Class‬دا انا أصال ضيفت ‪ function‬جوا الـ ‪ Prototype‬بتاعه اقدر استخدمها‬
‫عادي ضيفتها بايدي انا‬
‫كدا مخطط الـ ‪ User‬انا ضيفت جواه ‪ Function‬وظيفتها تقول ‪ Welcome‬للـ ‪userName‬‬

‫‪By: Amr Elsayed‬‬

‫الـ ‪ userOne‬دا عبارة عن ‪ object‬مش كدا ؟! الـ ‪ object‬دا ليه ‪ prototype‬جواه شوية خصائص مش كدا ؟!‬
‫انا برضو ممكن اضيف خصائص تانيه بإيدي غت الـ ‪ default‬الموجودة دي أصال واستخدمها عادي‬

‫‪By: Amr Elsayed‬‬

 ‫الل فاتت دي انا عندي الـ ‪ String Constructor‬دا اتفقنا ان ليه‬
‫ي‬ ‫ياعم طيب سيبك من كل القصص‬
‫ن‬
‫‪ Prototype‬او مخطط فأي ‪ string‬بيتم انشائه يف العالم بيورث كل حاجة من‬
‫ن‬
‫متفقي ؟!‬ ‫مخطط الـ ‪ String Constructor‬مش كدا ؟!‬

‫انا بقا بداخل الـ ‪ String Constructor‬دا هضيف خاصية او ‪ function‬بايدي انا تتحط داخل المخطط بتاعه‬
‫الل عملتها بإيدي دي!‬ ‫ن‬
‫عل الخاصية او الـ ‪ function‬ي‬
‫شغل يقدر يـ ‪ Access‬ي‬
‫ي‬ ‫واي ‪ string‬هيتم انشائه يف‬

‫يعن ومررت ليها‬‫مسكت الـ ‪ String Constructor‬دا ضيفت نف الـ ‪ prototype‬بتاعه ‪ method‬او ‪ Function‬ن‬
‫ي‬ ‫ي‬
‫‪ Parameter‬هيتشال ويحل محله قيمة أي ‪ String‬هيتكتب‬
‫الل هيتكتب دا تحط قبله نقطة وبعده نقطة‬
‫وظيفة الـ ‪ function‬دي بقا انها تمسك الـ ‪ val‬او الـ ‪ string‬ي‬

‫الل انا علمتها بايدي دي‬

‫الل قيمته "‪ "Elzero‬انا هضيف عليه الـ ‪ method‬ي‬
‫بتاع ي‬
‫ي‬ ‫وبس كدا الـ ‪myString‬‬
‫الل فوق ويطبق عليه الـ ‪Function‬‬
‫الل هو "‪ "Elzero‬يحل محل الـ ‪ parameter‬ي‬ ‫وأخل الـ ‪ string‬الموجود ي‬
‫ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ر‬ ‫ر‬
‫شء قدير‬ ‫ال اله اال هللا وحده ال شيك له ‪ ..‬له الملك و له الحمد وهو ي‬
‫عل كل ي‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫‪By: Amr Elsayed‬‬
 ‫‪Object Meta Data And Descriptor Part 1 Lesson #157‬‬

‫ان عندي الـ ‪ myObject‬دا وعايز اضيف جواه ‪ Property‬جديدة وليكن ‪ c: 3‬مثال‬ ‫ن‬ ‫ر‬
‫لنفتض ي‬
‫ن‬ ‫ر ن‬
‫والل فيما بعد هنفهم كل حاجة فيه‬
‫ي‬ ‫التال‬
‫ي‬ ‫وممت هعمله من خالل الـ ‪syntax‬‬ ‫اف‬
‫فعشان اعمل دا بشكل احت ي‬

‫ن‬ ‫ن‬
‫الل هضيف جواه ‪ Property‬جديدة‬ ‫ان بحدد الـ ‪ object‬ي‬
‫الل فات دا هو ي‬
‫أول حاجه يف الـ‪ syntax‬ي‬
‫الل بيكون‬ ‫ن‬
‫بيح الجزء الخاص بالـ ‪ {…} descriptor‬ي‬
‫ه "‪ "c‬وبعدين ر ي‬‫الل ي‬
‫تان حاجة بحط اسم الـ ‪ property‬ي‬ ‫ي‬
‫جواه بعض العنارص لو مكتبتهاش الـ ‪ Default‬بتاعها بيكون ‪False‬‬
‫الل انا بضيفها بقا‬
‫بتيح الـ ‪ value‬ي‬
‫بعد كدا ر ي‬
‫ن‬
‫الل اسمها "‪"c‬‬
‫يف حالة لو حابب اعدل الـ ‪ Value‬بتاعت الـ ‪ property‬ي‬
 ‫ن‬
‫التعديل هيتم عادي جدا بدون أي مشاكل وكل دا حصل عشان يف جزء الـ ‪ descriptor‬دا‬
‫ن‬
‫يف قيمة عندي اسمها ‪ writeable‬قيمتها بـ ‪true‬‬
‫لو انا بقا عدلت القيمة دي بـ ‪ false‬ن يف الحالة دي لو حبيت اعدل الـ ‪ Value‬بتاعت الـ "‪ "c‬فمش هينفع!!‬

‫الل عندي دا‬

‫عل عنارص الـ ‪ Object‬ي‬
‫لو حبيت اعمل ‪ Looping‬ي‬

‫ن‬
‫الل اسمها ‪ enumerable‬وعدلت قيمتها بـ ‪False‬‬
‫لكن لو جيت يف جزء الـ ‪ descriptor‬دا عند القيمة ي‬
‫ن‬
‫هيستثن الـ "‪ "c‬من الـ ‪ loop‬ومش هيعمل حسابها‬ ‫هنا‬
‫ن‬ ‫ي‬
‫ر‬
‫الن بكل بساطه منعتها من االشتاك يف الـ ‪ Loop‬ولكن مش بتتحذف‬ ‫ن‬
‫ي‬
‫ر‬
‫ه بتفضل موجودة ولكن بتتمنع من االشتاك‬‫نمن الـ ‪ Object‬نفسه ي‬
‫يف أي ‪ loop‬هيتم‬

‫ن‬
‫الل اسمها "‪ "c‬بالـ ‪ value‬بتاعتها فعندي أصال ‪ method‬اسمها ‪delete‬‬
‫ي‬ ‫‪property‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫احذف‬ ‫عايز‬ ‫لو‬ ‫حالة‬ ‫ف‬
‫ي‬
‫من خاللها بقدر اتمم عملية الحذف دي‬

‫أهو تم حذف الـ ‪ property‬من الـ ‪object‬‬

‫ن‬
‫الل اسمها ‪ configurable‬وعدلت قيمتها بـ ‪False‬‬
‫لكن لو جيت يف جزء الـ ‪ descriptor‬دا عند القيمة ي‬
‫بتاع دا مش هيحصل‬
‫ي‬ ‫ساعتها لو جيت احذف الـ "‪ "c‬من الـ ‪object‬‬
‫يبف الـ ‪ configurable‬لو بقت قيمته بتساوي ‪ false‬مش هتقدر تحذف الـ ‪ property‬وال تعدل عليها‬ ‫ر‬
‫ن‬ ‫ن‬ ‫ي‬
‫تان‬
‫وال تعمل ‪ redefined‬للقيمة دي يف أي مكان ي‬
‫‪Object Meta Data And Descriptor Part 2 Lesson #158‬‬

‫ن‬
‫الل عندي والتعديل‬
‫ي‬ ‫‪object‬‬ ‫ـ‬ ‫ل‬ ‫ل‬ ‫واحدة‬ ‫‪Property‬‬ ‫نضيف‬ ‫ممكن‬ ‫اي‬
‫ز‬ ‫ا‬ ‫عرفنا‬ ‫فات‬ ‫الل‬
‫ي‬ ‫الدرس‬ ‫ف‬
‫ني‬
‫يف الـ ‪ descriptor‬الخاص بـ الـ ‪ property‬دي من خالل ‪ method‬اسمها ‪defineProperty‬‬

‫نف الدرس دا هنشوف ازاي نقدر نضيف ر‬

‫اكت من ‪ property‬بالـ ‪ descriptor‬بتاعها‬ ‫ي‬
‫ر‬
‫ولكن الـ ‪ method‬المرادي هتكون ‪ defineProperties‬بالجمع للداللة عل وجود اكت من ‪Property‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫طيب لو عندي ‪ property‬معينة انا حابب ابحث يف الـ ‪ descriptor‬بتاعها‬
‫بكتب ‪ Object.getOwnPropertyDescriptor‬والحظ ان ‪ descriptor‬مفرد‬

‫الل انا كنت‬

‫لما بحثت عن الـ "‪ "d‬روعن الـ ‪ Descriptor‬بتاعتها تحديدا لقيت فعال ان الـ ‪ Configurable‬ي‬
‫باف الـقيم التانيه بـ ‪ false‬الن دا الـ ‪ default‬بتاعها لو انا معدلتش عليها‬
‫عامله ‪ true‬موجود ي‬

‫ن‬
‫الل يف الـ ‪ object‬نفسه كلها بقا مش هقتض ع خاصية واحدة‬
‫طيب لو حابب ابحث عن كل الخصائص ي‬
‫فهكتب ‪ Object.getOwnPropertyDescriptors‬والحظ ان ‪ descriptors‬جمع‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 Assignments From [147] = > [158]
]158[ >= ]147[ :‫لينك التكليفات‬
01 :‫التكليف‬
// Assignment One

// function Car(name, model, price) {

// this.n = name;
// this.m = model;
// this.p = price;
// }

class Car {
constructor(name, model, price) {
this.n = name;
this.m = model;
this.p = price;
}
run() {
return `Car Is Running Now`;
}
stop() {
return `Car Is Stopped Now`;
}
}

// Needed Output

let carOne = new Car("MG", 2022, 420000);

let carTwo = new Car("Tesla", 2023, 1000000);
let carThree = new Car("BMW", 2021, 850000);

console.log(
`Car One Name Is ${carOne.n} And Model Is ${carOne.m} And Price Is ${carOne.p}`
);
console.log(
`Car One Name Is ${carTwo.n} And Model Is ${carTwo.m} And Price Is ${carTwo.p}`
);
console.log(
`Car One Name Is ${carThree.n} And Model Is ${carThree.m} And Price Is
${carThree.p}`
);

console.log(carOne.run());
console.log(carOne.stop());
// "Car One Name Is MG And Model Is 2022 And Price Is 420000"
// "Car Is Running Now"
 02 :‫التكليف‬
// Assignment Two

class Phone {
constructor(name, serial, price) {
this.name = name;
this.serial = serial;
this.price = price;
}
}

// Write Tablet Class Here

class Tablet extends Phone {

constructor(name, serial, price, size) {
super(name, serial, price);
this.size = size || "Unknown";
}
fullDetails() {
return `${this.name} Serial is ${this.serial} And Size Is ${this.size} `;
}
}
let TabletOne = new Tablet("iPad", 100200300, 1500, 12.9);
let TabletTwo = new Tablet("Nokia", 350450650, 800, 10.5);
let TabletThree = new Tablet("LG", 250450650, 650);

console.log(`${TabletOne.fullDetails()}`);
// iPad Serial is 100200300 And Size Is 12.9

console.log(`${TabletTwo.fullDetails()}`);
// Nokia Serial is 350450650 And Size Is 10.5

console.log(`${TabletThree.fullDetails()}`);
// LG Serial is 250450650 And Size Is Unknown

By: Amr Elsayed

 03 :‫التكليف‬
// Assignment Three

// Edit The Class

class User {
#c;
constructor(username, card) {
this.u = username;
this.#c = card;
}
creditCard() {
return this.#c.toString().match(/\d{4}/gi).join("-");
}
get showData() {
return `Hello ${this.u} Your Credit Card Number Is ${this.creditCard()} `;
}
}

// Do Not Edit Anything Below

let userOne = new User("Osama", "1234-5678-1234-5678");

let userTwo = new User("Ahmed", "1234567812345678");
let userThree = new User("Ghareeb", 1234567812345678);

console.log(userOne.showData);
// Hello Osama Your Credit Card Number Is 1234-5678-1234-5678

console.log(userTwo.showData);
// Hello Ahmed Your Credit Card Number Is 1234-5678-1234-5678

console.log(userThree.showData);
// Hello Ghareeb Your Credit Card Number Is 1234-5678-1234-5678

console.log(userOne.c); // Prevent Accessing To Card Property Here

// Undefined

04 :‫التكليف‬
// Assignment Four

// Write Your Code Here

String.prototype.addLove = function (val) {
return `I love ${this} Web School`;
};

// Do Not Edit Below

let myStr = "Elzero";
console.log(myStr.addLove()); // I Love Elzero Web School
 05 :‫التكليف‬
// Assignment Five

const myObj = {
username: "Elzero",
id: 100,
score: 1000,
country: "Egypt",
};

// Write Your Code Here

Object.defineProperties(myObj, {
id: {
enumerable: false,
},
score: {
writable: false,
},
});

myObj.score = 500;

delete myObj.country;

for (let prop in myObj) {

console.log(`${prop} => ${myObj[prop]}`);
}

console.log(myObj);

// Needed Output

// "username => Elzero"

// "score => 1000"
// {username: 'Elzero', score: 1000, id: 100}

‫ال تنسونا من دعواتكم‬

Never Forget That (Always Search)
By: Amr Elsayed
 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ن‬
‫الظالمي‬ ‫إن كنت من‬‫اللهم نإن أستغفرك واتوب إليك‪ ،‬ال إله اال انت سبحانك ن‬
‫ي‬ ‫ي‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫ال تنسونا من دعواتكم‬
‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫‪Date And Time Introduction Lesson #159‬‬

‫الحال بالظبط بالتاري ــخ‬ ‫ر‬

‫دلوقن انا عندي الـ ‪ Date object‬بستعلم منه عن الوقت‬
‫ي‬ ‫ي‬

‫الل بكتب فيها الكالم دا !‬

‫بالملل ثانيه من اول تاري ــخ ‪ 1970‬لحد اللحظة ي‬
‫ي‬ ‫الوقت دا مكتوب‬
 ‫‪Get Date And Time Lesson #160‬‬

‫ن‬
‫الل بستخدمها مع الـ ‪Data Constructor‬‬
‫يف الدرس دا هنتعرف عل بعض الـ ‪ methods‬ي‬

‫الحال‬ ‫نوفمت ‪ 1998‬وقولتله انا عايز الفرق ن‬

‫بي التاريـ ـخ‬ ‫الل هو ‪9‬‬ ‫ن‬
‫ي‬ ‫ر‬ ‫هنا انا حددت تاري ــخ معي هيبدا من عنده ي‬
‫ـملل ثانيه‬
‫الل انا حددته دا والنتيجة هتكون بال ي‬
‫و التاري ــخ ي‬
‫ن‬ ‫ن‬ ‫ن‬ ‫فعشان احول الفرق ن‬
‫الل اتعلمت يف اول درس‬ ‫الملل ثانية للسني عملت المعادلة ي‬ ‫ي‬ ‫التاريخي دا من‬ ‫بي‬
‫ن‬
‫الثوان‬ ‫عل ‪ 1000‬عشان اجيب‬ ‫ن‬
‫ي‬ ‫بالملل ثانيه دا ي‬
‫ي‬ ‫الل طلع‬
‫ان بقسم الرقم ي‬ ‫وه ي‬‫ي‬
‫عل ‪ 60‬عشان اجيب الدقائق ما هو كل دقيقة فيها ‪ 60‬ثانية‬ ‫ن‬
‫الثوان دي ي‬
‫ي‬ ‫وبعدين اقسم‬
‫عل ‪ 60‬عشان اجيب الساعات ما هو كل ساعة فيها ‪ 60‬دقيقة‬ ‫وبعدين اقسم الدقائق دي ي‬
‫عل ‪ 24‬ساعة عشان اجيب األيام ما هو كل يوم فيه ‪ 24‬ساعة‬ ‫وبعدين قسمت الساعات دي ي‬
‫ن‬
‫السني ما هو كل سنة فيها ‪ 365‬يوم تقريبا‬ ‫عل ‪ 365‬يوم عشان اجيب‬ ‫وبعدين قسمت األيام دي ي‬

‫ويح عيد ميالدي فعال ‪D":‬‬

‫فاضل أيام ر ي‬
‫ي‬ ‫فكانت دي النتيجة‬
‫وكل عام وانا طيب وحلو وبسمسم كدا ان شاء هللا ‪D":‬‬

‫‪By: Amr Elsayed‬‬

 ‫ال تنسونا من دعواتكم‬
Never Forget That (Always Search)
By: Amr Elsayed
 ‫‪Set Date And Time Lesson #161‬‬

‫ملل ثانية عدت‬

‫اخل الـ )‪ setTime(0‬فدا معناه ان بقوله مفيش وال ي‬
‫بعمل ‪ reset‬للوقت والتاري ــخ وبمجرد ما ي‬
‫من بداية الـ ‪Unix Time‬‬

‫ن‬ ‫ر‬ ‫كأن بقوله اليوم ‪ 1‬نف الشهر الحال ن‬

‫ن‬
‫دلوقن يوم ‪ 23‬يف الشهر انا عدلتها‬
‫ي‬ ‫انا‬ ‫يعن‬
‫ي‬ ‫ي‬ ‫ي‬ ‫هنا بالقيمة واحد ي‬ ‫الـ ‪setDate‬‬
‫ن‬ ‫ر‬
‫تبف ‪ 1‬يف الشهر ودا حصل من خالل الـ ‪setDate‬‬ ‫بحيث ي‬

‫ن‬ ‫نف ‪ trick‬هنا وه ن‬

‫ان لو عملت تاري ــخ اليوم بـ ‪ 0‬ما هو مفيش يوم يف الشهر رقمه ‪ 0‬فدا معناه انه هتجع يوم لورا‬
‫ي ي‬ ‫ني‬
‫ن‬
‫الماض‬ ‫الحال ولو عملت بالسالب هتجع بااليام للشهر‬ ‫الل قبل‬
‫ي‬ ‫ي‬ ‫يف الشهر ي‬
‫اقص وليكن ‪ 35‬مثال هتوح بااليام والتاري ــخ للشهر الجديد‬
‫ي‬ ‫بأكت من ‪ 30‬او ‪ 31‬يوم بحد‬‫اما لو عملت اليوم ر‬
 ‫انا هنا هحدد السنة نفسها وخليتها ‪ 2020‬من خالل الـ ‪ setFullYear‬وممكن تكتب الشهر اختياري‬

‫الل هو يناير من حيث الـ ‪index‬‬

‫انا هنا بحدد الشهر بالـ ‪ setMonth‬فمثال الـ ‪ 0‬دا بداية ألول شهر ي‬
‫ديسمت‬
‫ر‬ ‫اما ‪ 11‬فهو الـ ‪ index‬لشهر‬

‫الل وراه ولكن السنة بدل ما‬ ‫ن‬

‫ديسمت ي‬
‫ر‬ ‫تان بالسالب لشهر‬
‫وطبعا مش محتاج اقولك لو خليتها بالسالب هتج ي‬
‫الل فاتت وبرضو لو عديت الـ ‪ index 11‬وخليتها‬
‫لديسمت السنة ي‬
‫ر‬ ‫هتكون ‪ 2022‬هتكون ‪ 2021‬الن رجعت‬
‫هتبف ‪2023‬‬‫ر‬ ‫الل بعدها فبدل ما هتكون ‪2022‬‬ ‫ر‬
‫ي‬ ‫‪ 12‬فهتح ليناير السنة ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫والثوان بالظبط بتحددهم والسالب بتجع لورا‬ ‫طبعا نفس األفكار تنطبق ع الساعات والدقائق‬
‫ي‬ ‫ن‬
‫ن‬
‫فاهمن بقا ‪D":‬‬ ‫الطبيع بيكون فيه ترحيل للوقت لالمام وانت‬ ‫وبيكون يف ترحيل للوقت للخلف ولو بزيادة عن‬
‫ي‬ ‫ي‬

‫كل حاجة كبتة بتكتبها بيكون ليك حرية انك تعدل نف األقل منها بشكل ر‬
‫مباش‬ ‫ي‬
‫ن‬
‫يعن لو انا كتبت سنة معينة ولكن ‪ 2020‬من خالل الـ ‪ setFullYear‬فممكن احدد بعده الشهر واليوم‬
‫ي‬

‫فمسموحل اكتب اليوم ولكن مقدرش اكتب سنة‬

‫ي‬ ‫ولو كتبت الشهر من خالل الـ ‪setMonth‬‬

‫ن‬ ‫ن‬
‫وثوان معاها‬
‫ي‬ ‫كذلك االمر يف الساعة لو كتبت الساعة من خالل الـ ‪ setHours‬فاقدر اكتب دقايق‬
‫ن‬
‫الثوان ولكن مقدرش طبعا احدد الساعة قبلها‬ ‫ولو كتبت الدقائق من خالل الـ ‪ setMinutes‬فاقدر بعدها احدد‬
‫ي‬

‫ن‬
‫الل بتكون اصغر منه وتابعة ليه‬
‫اكت تقدر تتحكم يف الحاجات ي‬
‫فزي ما قولتلك كل ما تبدأ من مكان ر‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Formatting Date And Time Lesson #162‬‬

‫عملت ‪ reset‬للـ ‪ Date‬فبدأ من اول ‪ 1‬يناير ‪1970‬‬

‫بالملل ثانيه‬
‫ي‬ ‫وترجعل النتيجة‬ ‫أول حاجة عندي ‪ Method‬بتعمل تحليل للـ ‪ date‬لو مكتوب ‪String‬‬
‫ي ن‬
‫بالتال هيجيب‬
‫ي‬ ‫بالملل ثانيه دي بعد ما عملت تحليل للبيانات وحطيتها يف الـ ‪Date‬‬
‫ي‬ ‫الل‬
‫فانا خدت النتيجة ي‬
‫تاري ــخ ميالدي‬
 ‫ن‬
‫يف الطرق دي بيقولك تقدر تكتب الـ ‪ date‬بكل الطرق دي برحتك وممكن التاري ــخ المكتوب بالشكل دا‬
‫‪ 1998-11-9‬تكتبه كدا ‪ 1998/11/9‬او تبدل القيم وتسيب بينهم مسافات او تكتبه كدا ‪1998@11@9‬‬
‫كل دا هيتقرأ عادي ممكن تكتب السنة والشهر بس زي كدا ‪ 1998-11‬ممكت تكتب السنة بس سواء ‪1998‬‬
‫ن‬ ‫ر‬
‫باف التاري ــخ بـ ‪ 1‬يناير يف حالة لو انت محددتش الشهر واليوم‬
‫او ‪ 98‬بس وهو بيكمل ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫يف السطر ‪ 44‬انا كتبت التاري ــخ والوقت بالكامل‬

‫ن‬ ‫ن‬
‫وف السطر ‪ 47‬انا كتبت برضو التاري ــخ ولكن يف الحالة دي عند الشهر انت لما تكون عايز شهر ‪ 11‬بتكتب‬
‫ي‬
‫الل هو هيكون ‪ 10‬الن شهر ‪ 1‬الـ ‪ index‬بتاعه ‪0‬‬ ‫الـ ‪ index‬بتاع الشهر دا ي‬

‫ن‬
‫يف السطر الـ ‪ 50‬كتبت التاري ــخ بالـ ‪time zone‬‬
‫الل هتكتبه بعد كدا‬
‫فمثال التاري ــخ بتاعم ‪ 1982-10-25‬بعد حرف ‪ t‬عشان يفصل التاري ــخ عن الوقت ي‬
‫ان كاتب الوقت الساعة ‪ 6‬و ‪ 10‬دقايق‬ ‫ن‬
‫بيعت عن الـ ‪ time zone‬وبما ي‬
‫اما حرف الـ ‪ z‬دا ر‬
‫بي توقيت بلدي وتوقيت جرينتش غالبا ‪D":‬‬ ‫ساعتي الل هما الفرق ن‬
‫ن‬ ‫فالـ ‪ Time Zone‬ن‬
‫هتود‬
‫ي‬
 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫مش ن‬
‫معن كدا إنك تتجاهل دراستك لكن مهم جدا إنك تهتم بتعليم نفسك بنفسك‬
‫ي‬
‫اذكر هللا ️♥‬
‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ن‬
‫العالمي‬ ‫كثتا مبارًكا فيه كما ن‬
‫ينبع لجالل وجهك ولعظيم سلطانك يا رب‬
‫ً‬
‫حمدا ً‬
‫طيبا ً‬ ‫اللهم لك الحمد‬
‫ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Tracking Operations Time Lesson #163‬‬

‫الحال‬
‫ي‬ ‫الحال وعملت متغت ‪ end‬فيه برضو الـ ‪Date‬‬
‫ي‬ ‫عملت متغت ‪ start‬فيه الـ ‪Date‬‬
‫ن‬
‫وبي الـ ‪ Start‬و الـ ‪ End‬عملت ‪ Operation‬انه يعمل ‪div 100000‬‬
‫والل بينهم بيتم‬ ‫الحال للـ ‪end‬‬ ‫الحال للـ ‪ start‬و الوقت‬ ‫بعدين قولتله الـ ‪ duration‬هيكون الفرق ن‬
‫بي الوقت‬
‫ي‬ ‫ي‬ ‫ي‬
‫الل هتتم فيه العملية دي بالمل يل ثانية‬
‫‪ operation‬فيها ‪ div 100000‬كل دا عشان احسب الوقت ي‬

‫وبالمناسبة الطريقة بتاعت الـ ‪ createElement‬اشع بكتت من الـ )(‪document.write‬‬

‫‪By: Amr Elsayed‬‬

 ‫‪Generator Function Introduction Lesson #164‬‬

‫الـ ‪ Generators‬او المولدات بتكون عبارة عن ‪ Function‬ولكن بشكل مختلف شوية عن شكل الـ ‪function‬‬
‫المعتاد والـ ‪ code‬بتاعها مش بيشتغل اال لما انت بتحتاجه وبتكون عبارة عن ‪ object‬وكمان ‪ Iterable‬تقدر‬
‫تعمل ‪ Loop‬عليه عادي جدا‬

‫ر‬
‫وتالف شخص حاطط بعض االعمال او المنتجات وبعدين‬
‫ي‬ ‫عل الـ ‪ Generators‬وهو مثال لما تدخل موقع‬
‫مثال ن ي‬
‫ر‬
‫لباف البيانات عشان‬
‫االخر ‪ Show More‬الـ ‪ show more‬دي بيتم فيها عمل ‪ Generation‬او توليد ي‬ ‫كاتب ف‬
‫ي ن‬
‫تبدأ تظهر يف الصفحة‬
‫الل قولنا عاليه فوق ان‬
‫عل ‪ show more‬ودا ي‬ ‫ولو تاخد بالك انت هنا هتعمل ‪ action‬وهو انك تدوس ي‬
‫‪ code‬الـ ‪ Generator‬مش بيشتغل اال لما تحتاجه ‪ ...‬طيب امته بحتاجه ؟! ‪ ..‬بحتاجه لما الـ ‪ user‬يدوس‬
‫ن‬
‫المعن ‪D":‬‬ ‫عل ‪ ... Show More‬أيش هذا وهللا نفس‬
‫ي‬

‫ه المسئولة عن عملية التوليد‬

‫الل اسمها ‪ yield‬ي‬
‫ودا بيكون شكل الـ ‪ Generator Function‬و الـ ‪ keyword‬ي‬
 ‫الـ ‪ Generator function‬دي لو هتعمل ‪ Iteration‬ليها باستخدام الـ )(‪ next‬فهتالحظ ان كل ‪ yield‬مش‬
‫عل سبيل المثال‬ ‫ن‬
‫يعن ي‬‫بتيجيلك غت لو انت فعليا استدعيتها او طلبتها ي‬

‫ه الـ ‪ Value‬بتاعته بـ ‪ 1‬و الـ ‪ done‬دي بـ ‪ false‬عشان لسه‬

‫الل ي‬
‫األول هتالقيه طبع اول ‪ yield‬ي‬
‫ي‬ ‫الـ )(‪next‬‬
‫فيه بيانات ممكن يتعملها ‪ Generate‬من الـ ‪function‬‬
‫الل انت حاطه قبلها‬ ‫ن‬
‫وتان )(‪ next‬دي مش هتشتغل غت لما تتخلص من الـ ‪ alert‬ي‬ ‫ي‬

‫بعد اول ‪ yield‬بيتم استدعائه البيانات والـ‪ code‬بيوقف تماما اال لو انت عملتله استدعاء لذلك بعد أول )(‪next‬‬
‫ن‬
‫تان ‪yield‬‬ ‫ن‬
‫تستدع ي‬
‫ي‬ ‫تان )(‪ next‬عشان‬‫هتالحظ ان الـ ‪ alert‬نفسها مشتغلتش اال لما انت استخدمت ي‬
 ‫وف الحالة التانيه مشتغلش ؟!‬ ‫ن‬ ‫ن‬
‫ي‬ ‫واشتغل‬ ‫تم‬ ‫‪loop‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫األول‬
‫ن ي‬ ‫الحالة‬ ‫ف‬
‫ليه ي‬
‫عشان ببساطه يف الحالة التانيه حالة الـ ‪ generator‬انت ‪ already‬عملتلها ‪ yield‬قبل كدا اهو‪:‬‬

‫تان تستخرجها‬ ‫لذلك ه مشتغلتش نف الـ ‪ loop‬ن‬

‫التان النك بالفعل استخرجت كل البيانات ومبقاش فيه حاجة ن‬
‫ي‬ ‫ي‬ ‫ي‬ ‫ي‬
‫ن‬
‫تان ‪ loop‬هتالقيه اشتغل عادي‬
‫ولو جربت توقف الـ )(‪ next‬وتشغل ي‬

‫‪By: Amr Elsayed‬‬

 ‫‪Delegate Generator Function Lesson #165‬‬

‫ن‬
‫يعن نائب طيب اقدر استخدمه او اوظفه ازاي ؟!‬
‫مصطلح الـ ‪ Delegate‬ي‬
‫ال ‪3‬‬
‫عندي ‪ Function‬بـت ـ ـ ‪ Generate‬ارقام من ‪ 1‬ي‬

‫ال ‪C‬‬
‫و عندي ‪ Function‬بـت ـ ـ ‪ Generate‬الحروف من ‪ A‬ي‬

‫الل فاتت وكمان عملت جواها ‪ yield‬لـ ‪Array‬‬

‫بعملت ‪ Function‬تالتة بت ـ ‪ generate‬كل الـ ‪ functions‬ي‬
 ‫الل جوها بحط بعده * ودا عشان‬
‫الل اسمها )(‪ generateAll‬دي الـ ‪ yield‬ي‬‫الحظ ان اخر ‪ function‬ي‬
‫الل عملتهم مسبقا‬
‫الل جوا كل ‪ function‬من ي‬‫عل كل الـعنارص ي‬
‫اقدر اعمل ‪ Access‬ي‬
‫ن‬ ‫ن‬
‫الل بتـ ‪ generate‬األرقام يف الحالة دي هيجيب الـ ‪ function‬نفسها‬
‫يعن لو مفيش الـ * دي عند الـ ‪ function‬ي‬
‫ي‬
‫الل جوا الـ ‪ function‬دي لذلك استخدمت الـ *‬
‫لكن انا عايز العنارص ي‬

‫ن‬
‫الل بتنوب عن كل الـ ‪ functions‬التانية يف متغت اسمه ‪generator‬‬
‫خزنت الـ ‪ function‬األختة ي‬

‫ن‬
‫الل‬
‫وبدأت استخدم الـ )(‪ next‬عشان اعمل ‪ iteration‬يجيب كل العنارص الموجودة يف كل الـ ‪ functions‬ي‬
‫عندي‬

‫ن‬
‫أخر حاجة لو جيت يف النص استخدمت الـ )(‪ return‬فاستخدمها بيعمل ‪ stop‬للـ ‪ iteration‬ومبتكملش من‬
‫بعدها أي حاجه‬

‫لذلك لو تالحظ بعد الـ )”‪ return(“Z‬هتالقيه وقف الـ ‪ Iteration‬تماما ومجبش ارقام الـ ‪ array‬ال يل كنت‬
‫الل هما اول ‪ Functions 2‬عملتهم فوق بتاعت األرقام‬ ‫ن‬
‫واكتف بانه يظهر ما قبل الـ )(‪ return‬دي ي‬
‫ي‬ ‫عاملها فوق‬
‫والحروف‬
 ‫‪Generate Infinite Numbers Lesson #166‬‬

‫ن‬
‫الل‬
‫ي‬ ‫احتاج‬ ‫ولما‬ ‫دي‬ ‫‪function‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫عملتها‬ ‫الل‬
‫ي‬ ‫الوظيفة‬ ‫بيحزن‬ ‫انه‬ ‫العادية‬ ‫‪function‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬ ‫ي‬ ‫وظيفة الـ ‪return‬‬
‫ان اخد الوظيفة المتخزنة جوا الـ ‪function‬‬ ‫ن ن‬
‫حصل جوا الـ ‪ Function‬دي استخدم الـ ‪ return‬يف ي‬
‫بتيح بعدها !‬ ‫ن‬ ‫ن‬
‫بتلع أي حاجة ر ي‬‫وطبعا زي ما احنا عارفي ان الـ ‪ return‬بتوقف عمل أي حاجه بعدها او ي‬
‫ن‬
‫لذلك يف الـ ‪ generator functions‬انا مش محتاج استخدم الـ ‪ return‬دي خالص الن زي ما قولتك بتوقف‬
‫اكت من قيمة فمش‬‫عمل أي حاجة هتيح بعدها ‪ +‬نان الـ ‪ generator functions‬بستخدمها عشان انتج ر‬
‫ي‬ ‫ر ي‬
‫وترجعهال!‬
‫ي‬ ‫محتاج الـ ‪ return‬انها تخزن حاجة‬

‫طيب لو عايز اعمل ‪ Generate‬الي عدد ممكن‬

‫ه قيمة الـمتغت ‪ index‬وهعمل ‪ yield‬للـ ‪ index++‬بحيث‬

‫الل ي‬
‫فانا هعمل ‪ While Loop‬بتبدأ من الـ ‪ 0‬ي‬
‫استدع فيها رقم من خالل الـ )(‪ next‬هيتعمله ‪generate‬‬
‫ي‬ ‫انه كل مرة‬

‫الحظ ان الـ ‪ while loop‬موجودة داخل الـ ‪Function‬‬

 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫قليل دائم خت من كثت منقطع ‪ ..‬محاولة ورا محاولة استمرارية ورا استمرارية‬
‫ر‬
‫الل نفسك فيه‬
‫ي‬ ‫كل‬ ‫حققت‬ ‫نفسك‬ ‫هتالف‬
‫ي‬
‫اذكر هللا ️♥‬
‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫شء قدير‬ ‫ال إله اال هللا وحده ال رشيك له ‪ ..‬له الملك و له الحمد وهو عل كل ر‬
‫ي‬
‫عل نبينا محمد ﷺ‬ ‫وبارك‬ ‫وزد‬ ‫وسلم‬ ‫اللهم ّ‬
‫صل‬
‫ي‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Module Import And Export Lesson #167‬‬

‫ن‬ ‫جميع األكواد ر‬

‫الن تم ذكرها يف الفيديو هنا‬
‫ي‬
‫ببساطة شديدة جدا الـ ‪ import‬والـ ‪ export‬أي االستتاد والتصدير‬
‫معي بيكون متقسم ر‬
‫ألكت من ‪ modules‬والـ ‪ modules‬دا تقدر تقول عليه انه‬ ‫ن‬ ‫لما تكون شغال بـ ‪framework‬‬
‫وحدة برمجية بتنفذ وظيفة معينة‬
‫عل سبيل المثال بيكون عندي ‪ module‬بتنفذ وظيفة معينة زي انه بيتعامل مع الصور فالـ ‪ module‬هنا‬‫ي‬
‫بيكون عبارة عن ملف فيه مجموعة من الـ ‪ functions‬بتتعامل مع الصورة فيكون عندي ‪ function‬بتعمل‬
‫اكت من ‪function‬‬‫‪ resize‬للصور و ‪ function‬تانية بتعمل ‪ crop‬للصورة وهكذا ر‬

‫ر‬ ‫ن‬
‫والل هعمل فيها ‪export‬‬
‫الل هعمل منها ‪ import‬ي‬
‫بتاعن ي‬
‫ي‬ ‫اول حاجة عندي يف ملف الـ ‪ html‬بكتب كل الملفات‬
‫وبكتب ‪ attribute‬اسمه ‪ type‬قيمته بتكون كلمة "‪"module‬‬

‫‪HTML‬‬

‫‪Main.js‬‬
 ‫ن‬
‫عندي يف الـ ‪ main.js‬دا بعد متغت اسمه ‪ a‬قيمته بـ ‪ 10‬وعندي ‪ array‬قيمتها بـ ]‪[1, 2, 3, 4‬‬
‫وعندي ‪ function‬اسمها )(‪ saySomething‬بتـ ‪ return‬كلمة ’‪‘Something‬‬

‫ن‬ ‫ن‬
‫عملت ‪ export‬او تصدير لكل الحاجات دي زي ما انت شايف يف اخر سطر يف الكود‬

‫‪app.js‬‬

‫الل عملتلها ‪ export‬او تصدير من‬

‫الحاجات ي‬ ‫روحت لملف الـ ‪ app.js‬عملت ‪ import‬او استتاد لكل‬
‫ن‬
‫الل مكتوب يف أول سطر دا‬
‫ملف الـ ‪ main.js‬وكتبت المسار بتاعه بالـ ‪ syntax‬ي‬
‫الل انا عايزه‬ ‫ن‬
‫بان أقوله بعد اسمه ‪ as‬واالسم ي‬
‫الل هو )(‪ saySomething‬اغت اسمه ي‬ ‫اسم الـ ‪ function‬ي‬
‫ن‬
‫وممكن‬
‫ان اديها اسم‬‫ن‬
‫الل فوق كدا وممكن اغت اسم أي حاجه بعملها استتاد عادي من خالل ي‬‫زي المثال يف الكود ي‬
‫مستعار او بيطلق ع العلمية دي ‪alias‬‬

‫ن‬
‫الل عملتها ‪ import‬يف ملف الـ ‪ app.js‬من ملف الـ ‪main.js‬‬
‫بعدين بدأت استخدم كل الحاجات ي‬

‫‪By: Amr Elsayed‬‬

‫‪Named vs Default Export And Import All Lesson#168‬‬

‫زي ما ممكن مع الـ ‪ Import‬تحط ‪ alias‬لبعض األسماء زي كدا‬

‫فانت ممكن كمان تعمل الـ ‪ alias‬دا اثناء الـ ‪ export‬نفسه ولكن هتحط الـ ‪ alias‬بقا اثناء الـ ‪import‬‬

‫الل فات دا اسمه ‪Named export‬‬

‫كل ي‬

‫‪By: Amr Elsayed‬‬

‫اما الـ ‪ default export‬كل ‪ module‬موجود بيكون ليه ‪ one default export‬وتقدر تستدعيها من أي مكان‬
‫ن‬ ‫ر‬
‫تعال نشوف‬
‫ي‬ ‫حن بدون استخدام اسمها دا وليها طريقة خاصة يف االستدعاء‬
‫ي‬

‫ن‬
‫يعن تخيل لو الـ ‪ function‬بتاعت ‪sayHello‬‬
‫وممكن زي ما قولتلك تستدعيها بأي اسم انت عايزو عادي جدا ي‬
‫ه أصال ‪ anonymous function‬؟!‬ ‫دي ي‬
‫ودا النها الـ ‪ default export‬عادي تسميها باي اسم وانت بتعملها ‪import‬‬

‫الل عندي ومش عايز انا او‬ ‫ن‬

‫ان عايز اعمل ‪ import‬لكل الـ ‪ functions modules‬ي‬
‫طيب أي رائيك لو قولتلك ي‬
‫الل فاتت ؟!‬‫مش حابب اقعد اكتب أسمائهم كدا زي الطريقة ي‬
 ‫ن‬
‫الل عندي وخزنتها ‪ alias‬اسمه ‪all‬‬
‫ي‬ ‫‪functions‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫لكل‬ ‫‪import‬‬ ‫عملت‬ ‫انا‬ ‫*‬ ‫ـ‬ ‫ل‬‫ا‬ ‫خالل‬ ‫من‬ ‫دي‬ ‫الطريقة‬ ‫ف‬
‫ي‬
‫ممكن تختار أي اسم يعجبك اسم ‪ all‬دا مش ‪ standard‬يعنن‬
‫ي‬

‫طيب لو حابب استخدم ‪ Function‬معينة مثال اعمل أي ؟!‬

‫الل عندي‬
‫وهيح بعد كدا كل الـ ‪ functions‬ي‬
‫ر ي‬ ‫بتاع وبعده نقطة ‪.‬‬
‫ي‬ ‫هكتب الـ ‪alias‬‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 Assignments From [159] = > [168]
]168[ >= ]159[ :‫لينك التكليفات‬
01 :‫التكليف‬
// Assignment One

let dateNow = new Date();

let birthday = new Date("nov 9 98");
let diffNow = dateNow - birthday;
console.log(diffNow);
let seconds = diffNow / 1000;
console.log(`${Math.trunc(seconds)} Seconds`);

let minutes = seconds / 60;

console.log(`${Math.trunc(minutes)} Minutes`);

let hours = minutes / 60;

console.log(`${Math.trunc(hours)} Hours`);

let days = hours / 24;

console.log(`${Math.trunc(days)} Days`);

let years = days / 365;

console.log(`${Math.trunc(years)} Years`);

console.log(`#`.repeat(20));

02 :‫التكليف‬
// Assignment Two
let starterDate = new Date(1980, 0, 1, 0, 0, 1);
// starterDate.setTime();
console.log(starterDate);
// Needed Output

// "Tue Jan 01 1980 00:00:01 GMT+0200 (Eastern European Standard Time)"

03 :‫التكليف‬
// Assignment Three

// Needed Output
// "Sat Apr 30 2022 18:13:20 GMT+0200 (Eastern European Standard Time)"
// "Previous Month Is April And Last Day Is 30"

// The Result Will Be Change Because The Difference Between Time

let date = new Date();

date.setDate(0);
let months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];

console.log(`Previous Month is ${months[8]} And Last Day Is

${date.getDate()}`);

04 :‫التكليف‬
// Assignment Four

let birthdayOne = new Date(1998, 10, 9);

console.log(birthdayOne);

let birthdayTwo = new Date("nov, 9, 98");

console.log(birthdayOne);

let birthdayThree = new Date(Date.parse("nov, 9, 98"));

console.log(birthdayThree);

let birthdayFour = new Date("1998-11-09T00:00:00");

console.log(birthdayFour);

05 :‫التكليف‬
// Assignment Five

// Start
let start = performance.now();

// Operation

for (let i = 0; i < 100000; i++) {

console.log(i);
}

// End
let end = performance.now();

// Duration
let duration = end - start;
console.log(`The Duration is ${Math.trunc(duration)} Milliseconds.`);
// Needed Output "Loop Took 1921 Milliseconds."
 06 :‫التكليف‬
// Assignment Six

function* gen() {
let index = 14;
let num = 140;
let sum = num + index;
yield index;
while (true) {
yield sum;
sum += num += 200;
}
}

let generator = gen();

console.log(generator.next()); // {value: 14, done: false}
console.log(generator.next()); // {value: 154, done: false}
console.log(generator.next()); // {value: 494, done: false}
console.log(generator.next()); // {value: 1034, done: false}
console.log(generator.next()); // {value: 1774, done: false}
console.log(generator.next()); // {value: 2714, done: false}
console.log(generator.next()); // {value: 3854, done: false}
console.log(generator.next()); // {value: 5194, done: false}
console.log(generator.next()); // {value: 6734, done: false}

07 :‫التكليف‬
// Assignment Seven

function* genNumbers() {
yield* [1, 2, 2, 2, 3, 4, 5];
}

function* genLetters() {
yield* ["A", "B", "B", "B", "C", "D"];
}

// Write Your Generator Function Here

function* genAll() {
yield* new Set(genNumbers());
yield* new Set(genLetters());
}

let generator = genAll();

console.log(generator.next()); // {value: 1, done: false}
console.log(generator.next()); // {value: 2, done: false}
console.log(generator.next()); // {value: 3, done: false}
console.log(generator.next()); // {value: 4, done: false}
console.log(generator.next()); // {value: 5, done: false}
console.log(generator.next()); // {value: "A", done: false}
console.log(generator.next()); // {value: "B", done: false}
console.log(generator.next()); // {value: "C", done: false}
console.log(generator.next()); // {value: "D", done: false}
 08 :‫التكليف‬
HTML Inside body tag
<script src="main.js" type="module"></script>
<script src="mod-one.js" type="module"></script>
<script src="mod-two.js" type="module"></script>

main.js
import calc from "./mod-one.js";
import * as modOne from "./mod-two.js";
console.log(calc(modOne.numOne, modOne.numTwo, modOne.numThree)); // 60

mod-one.js
export default function (numOne, numTwo, numThree) {
return numOne + numTwo + numThree;
}

mod-two.js
import calc from "./mod-one.js";

// mod-two.js File
let a = 10; // Do Not Edit Names
let b = 20; // Do Not Edit Names
let c = 30; // Do Not Edit Names

export { a as numOne, b as numTwo, c as numThree };

‫ال تنسونا من دعواتكم‬

Never Forget That (Always Search)
By: Amr Elsayed
 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫اللهم ّ‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته‬
‫ن‬
‫الظالمي‬ ‫ان كنت من‬ ‫ال إله اال انت سبحانك ن‬
‫ي‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪What Is JSON Lesson #169‬‬

‫‪ -‬كلمة ‪ JSON‬اختصار لـ ‪JavaScript Object Notation‬‬

‫معي بيتم من خالله مشاركة البيانات ن‬

‫بي الـ ‪ Server Side‬و الـ ‪Client Side‬‬ ‫ن‬ ‫‪ -‬الـ ‪ JSON‬عبارة عن ‪Format‬‬
‫عل تطوير موقع وفيه قسم للـ ‪Articles‬‬ ‫ر‬
‫ن‬ ‫المشاركة دي بتكون من خالل ولنفتض انك شغال ي‬
‫نشها يف الموقع‬‫فالـ ‪ Back-End‬بيبعتلك ملف ‪ JSON‬فيه كل المقاالت الل هيتم ر‬
‫ي‬ ‫ن‬
‫انت كـ ‪ Front-End‬بتستلم الملف دا وتهندله يف صفحة المقاالت بالتنسيقات المظبوطة بحيث ان صفحة‬
‫ن‬
‫الـمقاالت تقرأ الـ ‪ Data‬الموجودة يف ملف الـ ‪JSON‬‬

‫‪ -‬الـ ‪ JSON‬مستمد من الـ ‪ JS‬وهو بديل للـ ‪ XML‬وامتداد الملف بيكون ‪.json‬‬

‫ليه بيتم استخدام ‪ JSON‬؟!‬

‫ن‬ ‫ن‬ ‫ن‬
‫الل اتعلمناه يف قبل كدا‬
‫‪ -‬عشان سهلة يف القراءة نوسهلة يف التعامل معاها ألنها شبه الـ ‪ Object‬ي‬
‫اكت من لغة برمجة‬‫‪ -‬كمان الـ ‪ JSON‬مدعوم ف ر‬
‫ي‬
‫‪ -‬تقدر تحول الـ ‪ JSON Object‬دا لـ ‪ JS Object‬والعكس‬

‫‪By: Amr Elsayed‬‬

 ‫مقارنة بسيطة ن‬
‫بي الـ ‪ JSON‬و الـ ‪XML‬‬

‫‪JSON‬‬ ‫‪XML‬‬
‫ن‬ ‫ن‬
‫شبة الـ ‪ JS Object‬يف الكتابة‬ ‫شبة الـ ‪ HTML‬يف الكتابة‬
‫ن‬ ‫ن‬
‫خفيف وسهل يف الكتابة‬ ‫ثقيل وصعب نسبيا يف الكتابة عن الـ ‪JSON‬‬
‫مش بيستخدم ‪Tags‬‬ ‫بيستخدم الـ ‪ Tags‬زي الـ ‪ HTML‬كدا‬
‫ن‬ ‫ن‬
‫بيكون قصت والكود بيكون سهل تقرأه‬ ‫يعن الكود بيكون شكله طويل‬ ‫مش قصت يف شكله ي‬
‫ن‬
‫بتقدر تستخدم يف الـ ‪ JSON‬الـ ‪ Array‬عادي جدا‬ ‫مش بتقدر تستخدم فيه الـ ‪Array‬‬
‫الـ ‪ JSON‬ال يدعم الـ ‪Comments‬‬ ‫بيدعم الـ ‪Comments‬‬

‫ر‬ ‫ن‬
‫هتالف شكل ملف الـ ‪ JSON‬و شكل لملف الـ ‪XML‬‬
‫ي‬ ‫دا‬ ‫اللينك‬ ‫ف‬
‫ي‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ن‬
‫الظالمي‬ ‫ال إله اال انت سبحانك إ ن ين كنت من‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪JSON Syntax And Compare With JS Object Lesson #170‬‬

‫خلين اقولك ان ملف الـ ‪ JSON‬بيدعم بعض أنواع البيانات زي الـ ‪Strings‬‬ ‫ن‬ ‫قبل ما نتكلم عن الـ ‪Syntax‬‬
‫ي‬
‫و الـ ‪ Numbers‬و الـ ‪ Objects‬و الـ ‪ Arrays‬و الـ ‪ Boolean Values‬و الـ ‪Null‬‬
‫كمان هتالحظ ان مفيش بقا ‪ Function‬وال ‪ Calculation‬و الحاجات دي الن الملف دا مخصص لمشاركة‬
‫البيانات‬

‫الـ ‪Syntax‬‬
‫ن‬
‫القوسي دول }…{ زي الـ ‪ JS Object‬بالظبط‬ ‫الـ ‪ Syntax‬بتاع الـ ‪ JSON‬بيكون داخل‬
‫التال دا كدا‬
‫ي‬ ‫بيكون مكون من ‪ key‬و ‪ value‬ولكن الـ ‪ key‬الزم يكون محاط بـ ‪ double quotes‬بالشكل‬

‫وهو دا كدا الـ ‪ Syntax‬بتاع الـ ‪JSON‬‬

 ‫‪What Is API Lesson #171‬‬

‫التمجية‬
‫بالعرن الواجهة ر‬
‫ري‬ ‫الـ ‪ API‬اختصار لـ ‪ Application Programming Interface‬تقدر تقول عليها كدا‬
‫فهم للموضوع‪:‬‬ ‫ن‬ ‫ن‬
‫ي‬ ‫وخلين اديك مثال حسب‬
‫ي‬ ‫الـ ‪ API‬هو الوسيط يف عملية مشاركة البيانات‬

‫اش هو دا شغل الـ ‪ front-end‬سليم؟ سليم‬ ‫لما تدخل مطعم فشكل المطعم والوانه والديكورات و شكل الكر ي‬
‫الل بتشوفها بعينك وتقدر تتعامل معاها‬ ‫دي الحاجات ي‬
‫الل بيتم تحضت الوجبات فيه وتجه نت األكل دا هنشبه بالـ ‪back-end‬‬‫اما المطبخ جوا ي‬
‫ن‬ ‫هتقول اومال ن‬
‫في الـ ‪ API‬يف الموضوع واستخدامه ؟‬ ‫ي‬
‫الل بيقبل منك الطلبات هو دا بقا الـ ‪API‬‬
‫هقولك ان الـ ‪ API‬دا هو الـ ‪ waiter‬او مصطلح الجرسون ي‬
‫الل بياخد األوردر من الـ ‪ front-end‬ويوصله للمطبخ او الـ ‪ back-end‬والعملية دي بيكون‬ ‫هو دا الشخص ي‬
‫اسمها ‪ request‬فيقوم المطبخ يستلم الـطلب دا بعدين يجهز الطلب ويديه للجرسون او الـ ‪ API‬فيوصله‬
‫الل اتبعت‬
‫للـ ‪ front-end‬والعملية دي بيكون اسمها ‪ response‬او الرد ع يل الطلب ي‬

‫ن‬ ‫ن‬
‫الل بيساعد يف المشاركة دي‬
‫الل فات دا هو عملية مشاركة البيانات بي الـ ‪ front‬و الـ ‪ back‬و ي‬
‫كل ي‬
‫هو الـ ‪API‬‬

‫إن كل‬ ‫ر ن‬ ‫بشكل عام بقا لو عندي موقع انا عايز اعرض فيه كل يوم أسعار العمالت واالختالف بينهم ‪ ..‬هل‬
‫منطف ي‬
‫ي‬
‫ُ‬ ‫بتاع واعدل أسعار العمالت دي يوميا كدا بإيدي ؟! ي‬
‫الل هو يا فتاح يا عليم يا رزاق‬ ‫ي‬ ‫يوم افتح الـ ‪code editor‬‬
‫يا كريم اصطبحنا واصطبح الملك هلل سعر الدوالر بقا عامل كام انهاردا ؟! ‪ D":‬طبعا دي دعابة مفيش الكالم دا‬
‫ن‬ ‫ن‬
‫بتاع وهو يحدث األسعار دي يوميا من تلقاء نفسه‬
‫ي‬ ‫عل ‪ API‬يف الموقع‬
‫ان اعتمد ي‬ ‫ولكن الحل األفضل ي‬
‫الل هيتم عرض البيانات دي فيها‬ ‫ن‬
‫ان اظبط الشكل العام والتنسيقات ي‬ ‫الل عليا نكـ ‪ front-end‬ي‬
‫الل كل ي‬
‫وانا بس ي‬
‫وتجيل واتعامل معاها‬
‫ي‬ ‫ان اقدر طبعا أوصل للبيانات دي‬‫دا باإلضافة للتنسيقات ي‬
‫ن‬
‫نوعي ‪ Public API‬و ‪Private API‬‬ ‫الـ ‪ API‬فيه منه‬

‫الل اتقالت‬
‫طبعا انت الزم هتشوف الفيديو عشان تفهم كل التفاصيل الكتت ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫الل تم عرضها يف الفيديو‬
‫لينك الدرس فيه اللينكات ي‬

‫مثال مضحك عل فكرة عمل الـ ‪ API‬وربطها ن‬

‫بي الـ ‪ Front-End‬والـ ‪Back-End‬‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Parse And Stringify Lesson #172‬‬

‫ن‬
‫ال ‪ JavaScript Object‬والعكس‬ ‫ي‬ ‫‪JSON‬‬ ‫‪Object‬‬ ‫من‬ ‫نحول‬ ‫اي‬ ‫ز‬ ‫ا‬ ‫هنتعلم‬ ‫دا‬ ‫الدرس‬ ‫ف‬ ‫احنا ي‬
‫صاحن الـ ‪ JSON‬دا بيكون ‪ Text Format‬زي ما عرفنا مسبقا ن‬
‫يعن نوعه الزم هيكون ‪String‬‬ ‫بص يا‬
‫ن‬ ‫ي‬ ‫ري‬
‫تان أهو‬ ‫ن‬ ‫ر‬
‫دلوقن معاك هتجعلها الـ ‪ JSON‬نوعه ‪ string‬بأكد ي‬
‫ي‬ ‫خل بقا المعلومة دي‬‫ي‬

‫عل سبيل المثال دا ‪ JSON Object‬نوعه ‪ String‬النه بيكون ‪Text Format‬‬ ‫ن‬
‫يعن ي‬
‫ي‬

‫عايز بقا احول الـ ‪ JSON‬دا لـ ‪ JS Object‬وعشان التحويل دا يتم بستخدم ‪ Method‬اسمها ‪JSON.parse‬‬
‫وجواها بحط اسم الـ ‪JSON Object‬‬
‫طيب ليه احوله أصال من ‪ JSON‬لـ ‪JS‬؟! عشان من نخالل التحويل دا اعدل البيانات او اعملها ‪ Update‬ي‬
‫وه‬
‫تان من ‪ JS Object‬لـ ‪ JSON Object‬بعد التعديل ما يتم‬
‫نوعها ‪ JS Object‬عادي بسهولة وبعدين احولها ي‬

‫التعديل دا ممكن اعمله سواء بستخدم الـ ‪ Dot Notation‬زي كدا‬

‫أو بستخدم الـ ‪ Bracket Notation‬زي كدا‬

‫ن‬ ‫ن‬
‫الحالتي البيانات حصلها ‪ Update‬واتعدلت‬ ‫أهو يف كال‬

‫ال ‪ JSON Object‬ودا بيتم من خالل ‪Method‬‬ ‫‪JS‬‬ ‫‪Object‬‬ ‫من‬ ‫بعد التعديل هحول البيانات دي ن‬
‫تان‬
‫ي‬ ‫ي‬
‫أسمها ‪JSON.stringify‬‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

‫بناء عادات يومية واالستمرار عليك هينجحك بالعافية‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ْ‬ ‫ت َو ُه َو َر ُّب ْال َع ْ‬
‫َ ْ َ َّ ُ َ َ َ َّ ُ َ َ َ ْ َ َ َّ ْ ُ‬
‫ش ال َع ِظيم‬
‫ِ‬ ‫ر‬ ‫حس ِر ين اَّلل َل ِإله ِإَل هو علي ِه توكل‬
‫تكلن ال نفش طرفة ن‬
‫عي‬ ‫شأن كله وال ن‬ ‫يا ج يا قيوم برحمتك استغيث أصلح ل ن‬
‫ي‬ ‫ي ي‬ ‫ي‬ ‫ي‬ ‫ي‬
‫حن ن‬
‫يرض‪.‬‬ ‫الحمد هلل بال سبب‪ ،‬الحمد هلل بال طلب‪ ،‬الحمد هلل بال عدد‪ ،‬الحمد هلل ر‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬

‫‪By: Amr Elsayed‬‬
 ‫‪Asynchronous vs Synchronous Programming Lesson #173‬‬

‫ن‬ ‫ن‬ ‫ن‬

‫ان افهمهم عشان وانا داخل اتعلم الـ ‪ AJAX‬فيما بعد والـ ‪Fetch‬‬‫يف الدرس دا انا عندي مفهومي البد من ي‬
‫اكت ر‬
‫واكت‬ ‫أكون فاهم الدنيا ر‬
‫متامن ‪ --‬و الـ ‪ Asynchronous‬غت ر ن‬
‫متامن )‬ ‫المفهومي دول هما ( الـ ‪ Synchronous‬ر ن‬
‫ن‬
‫الـ ‪ Synchronous‬ر ن‬
‫المتامن فهو عبارة عن‪:‬‬
‫‪ -1‬مجموعة من الـ ‪ Operations‬او العمليات بتتم بتسلسل او ترتيب‬
‫ن‬
‫عمليتي يشتغلوا سوا‬ ‫الل قبلها لحد ما تخلص لألخر ومينفعش‬
‫‪ -2‬كل عملية هتتم لسه الزم تنتظر العملية ي‬
‫عل الـ ‪:Synchronous‬‬
‫مثال ي‬
‫ن‬
‫فحضتك بتقف‬ ‫الل عايزة تقطع تذاكر للقطر‬ ‫حضتك دخلت ر‬ ‫لو ن‬
‫االنفاق فلقيت صف طويل جدا للناس ي‬
‫ر ن‬
‫متو‬
‫ن‬
‫الل بعدك واكيد مينفعش تسيب‬
‫الل قبلك والناس ي‬
‫وماش يف تسلسل واحد مع الناس ي‬‫ي‬ ‫يف الصف تنتظر دورك‬
‫دورك او تقطع تذكرة قبل ما الناس الل قبلك تخلص هو دا مفهوم الـ ‪ Synchronous‬انه ر ن‬
‫متامن مع بعضه‬ ‫ي‬
‫الل قدامها تخلص خالص‬ ‫ومفيش عملية ينفع تسبق التانيه او تحصل قبل ما ي‬
‫مثال عل الـ ‪ Synchronous‬ر ن‬
‫المتامن بالـ ‪Code‬‬ ‫ي‬
‫الل هتطبع الرقم ‪ 3‬هتقف تماما لحد ما الـ ‪ Alert‬يشتغل ويخلص لألخر‬ ‫ر‬
‫العمليات دي هتتم بالتتيب والعملية ي‬

‫اما الـ ‪ Asynchronous‬غت ر ن‬

‫المتامن فهو عبارة عن‪:‬‬
‫‪ -1‬مجموعة من الـ ‪ Operations‬او العمليات بتتم بشكل ‪ In Parallel‬او بالتوازي مع بعض‬
‫ن‬ ‫تستن الل قبلها عشان تبدأ ‪ ..‬ال ممكن ر‬
‫اكت من عملية تتم يف نفس الوقت عادي‬ ‫ي ي‬
‫ن‬ ‫‪ -2‬مش رشط ان كل عملية‬
‫عل ‪:Asynchronous‬‬ ‫مثال ي‬
‫ابتة‬ ‫ابتات كتت جدا و ر‬
‫اكت من ‪ Waiter‬فالعادي ان كل ‪ Waiter‬بتوح لكل تر ن‬ ‫لو انا دخلت مطعم ولقيت فيه تر ن‬
‫ن‬ ‫ن‬ ‫ر ن‬
‫جنن كلنا يف‬
‫والل ر ي‬
‫قدام ي‬
‫ي‬ ‫والل‬
‫ي‬ ‫الل ورايا تطلب يف نفس الوقت‬
‫يشوف أي طلبتها وانا بطلب األكل ممكن التابتة ي‬
‫وقت واحد ممكن نطلب أكل سوا عادي‬

‫مثال عل الـ ‪ Asynchronous‬غت ر ن‬

‫متامن بالـ ‪Code‬‬ ‫ي‬

‫ن‬
‫الل حصل انه طبع األرقام عادي والـ ‪ setTimeout‬كانت شغاله يف نفس الوقت وطبعت كلمة "‪"Operation‬‬ ‫ي‬
‫ر‬ ‫ن‬
‫يعن العملية دي تمت عادي واشتغلت اثناء ما كل العمليات التانية كانت شغالة ولسه هتفهم أكت‬ ‫ن‬
‫ثوان ي‬
‫بعد ‪ 3‬ي‬
 ‫‪Call Stack And Web API Lesson #174‬‬

‫صديف عشان ابسط الموضوع دا قدر اإلمكان الـ ‪ JS‬ليها ‪ Engine‬او محرك بيشغل الـ ‪ Code‬بتاعها‬ ‫ر‬ ‫بص يا‬
‫ي‬
‫ن‬
‫يعن أي ؟!‬
‫الـ ‪ Engine‬دا بيكون ‪ Single Threaded‬ي‬
‫معي بيشغله سطر ورا سطر سطر ورا سطر بطريقة ‪ synchronous‬ر ن‬
‫متامنة‬ ‫ن‬ ‫بيح يشغل ‪Code‬‬ ‫ن‬
‫يعن لما ر ي‬
‫ي‬
‫الل قبلها تتم األول قبل ما تبدأ تشتغل‬ ‫ن‬ ‫ن‬
‫تستن ي‬
‫ي‬ ‫يعن كل عملية الزم‬ ‫ي‬
‫لحد كدا األمور واضحة وتمام !‬
‫ن‬ ‫ن‬
‫اعتته صندوق‬‫يعن ر‬
‫الل بتتم ورا بعض دي بتتحط كدا يف حاجة اسمها ‪ Call Stack‬ي‬‫طيب جميل العمليات ي‬
‫ر‬
‫كدا كبت دخل جواه كل العملية بالتتيب ورا بعض‬
‫طيب لو عندي عملية هتاخد وقت كبت جدا زي نإن مثال أقوله ‪ SetTimeout‬لحاجة هتاخد ‪ 10‬ن‬
‫ثوان مثال ؟‬
‫ي‬ ‫ي‬
‫الل بيحصل هنا ؟!‬
‫عشان تتطبع ومحطوطة وسط كذا عملية ‪ Console.log‬أي ي‬

‫الل بيحصل ان الـ ‪ JS‬بتاخد العملية بتاعت الـ ‪ SetTimeout‬دي تخرجها من الـ ‪ Call Stack‬بتاعها خالص‬
‫ي‬
‫تان اسمه ‪ Web API‬يقوم الـ ‪ Web API‬دا يهندل العملية دي مع نفسه وبعدين يروح يقول للـ ‪JS‬‬ ‫ن‬
‫وتوديها مكان ي‬
‫من ؟!‬‫ن‬ ‫ر‬
‫بعتهال ها تستلمها ي‬
‫ي‬ ‫انن‬
‫الل ي‬‫يا ‪ JS‬انا خلصت العملية ي‬
‫فاض وخلص كل الـ ‪Console.log‬‬ ‫استن اما ابص عل الـ ‪ Call Stack‬او الصندوق بتاع اشوفه ن‬ ‫ن‬ ‫الـ ‪ JS‬تقوله‬
‫ي‬ ‫ي‬ ‫ي‬
‫الل كانت موجودة مع الـ ‪ setTimeout‬وال ال !‬
‫ي‬
‫ر‬
‫تالف ان الـ ‪ call stack‬ربف ن‬
‫الل كانت مع الـ ‪ setTimeout‬تمت‬ ‫ي‬ ‫العمليات‬ ‫وكل‬ ‫فعال‬ ‫فاض‬
‫ي‬ ‫ي‬ ‫تروح الـ ‪ JS‬تبص ي‬
‫فتوح الـ ‪ JS‬تقول للـ ‪ Web API‬ابعت الـ ‪ setTimeout‬عندي اشغلها بقا والعلمية دي كلها عل بعضها‬ ‫خالص ر‬
‫كدا تندرج تحت مصطلح الـ ‪JS Runtime‬‬
‫ه الـ ‪ DOM‬و الـ ‪ setTimeout‬وغتهم حاجات تانية‬
‫الل الـ ‪ Web API‬بيساعد بيها الـ ‪ JS‬ي‬ ‫من ضمن الحاجات ي‬
‫كتت الـ ‪ Web API‬بيقدمها للـ ‪JS‬‬
‫صديف حاجه خاصة بالمتصفحات نفسها مش بلغة برمجة معينة بس كدا‬ ‫ر‬ ‫أخر حاجة الـ ‪ Web API‬دا يا‬
‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫بيتشح ن يف الفيديو!‬
‫اعتته مقدمة للدرس نفسه الل ر‬
‫ي‬ ‫كل دا ر‬
‫الل بيتبعها ن يف شغله ن يف ترتيب الكود وتشغليه؟!‬
‫ه المنهجية ي‬
‫طيب الـ ‪ Call Stack‬نفسه دا بيشتغل ازاي او أي ي‬
‫الـ ‪ Call Stack‬دا ياسيدي بيتبع منهجية اسمها ‪ LIFO‬او ‪Last In First Out‬‬
‫ه بالمنطق كدا هتكون اول حاجة فوق‬ ‫والل ي‬
‫ي‬ ‫طيب دا معناه أي ؟! معناه ان اخر حاجة بتتدخل الصندوق دي‬
‫ه بتكون برضو أول حاجة تطلع من الصندوق دا‬ ‫لما تفتح الصندوق مع انها اخر حاجه محطوطة ولكن ن ي‬
‫ن‬
‫خلين اديلك مثال‬ ‫هو دا مفهوم الـ ‪ .... LIFO‬برضو مفهتمش دا بيتم ازاي يف الـ ‪...... JS‬‬
‫ي‬

‫ن‬
‫ومي هيطلع األول‬ ‫أي الل هيحصل هنا ؟! تعال نفتح الصندوق او الـ ‪ Call Stack‬ونشوف ن‬
‫مي هيخش األول‬ ‫ي‬ ‫ي‬
‫دلوقن انا عندي ‪Functions 3‬‬ ‫ر‬
‫ي‬
‫الـ ‪ one() <= function‬بتطبع كلمة "‪"One‬‬
‫الـ ‪ two() <= function‬أوال بتشغل الـ ‪ one() <= function‬وبعدين بتطبع كلمة "‪"Two‬‬
‫الـ ‪ three() <= function‬أوال بتشغل الـ ‪ two() <= function‬وبعدين بتطبع كلمة "‪"Three‬‬
‫ن‬
‫الل فوق‬
‫ي‬ ‫المثال‬ ‫ف‬
‫بعدين بشغل ‪ three() <= function‬أخر سطر ي‬

‫الل هيحصل أو الـ ‪ Code‬هيشتغل ازاي ؟!‬

‫أي ي‬
‫اول حاجة هنطبق مبدأ ‪ LIFO‬الل هو ‪ Last In First Out‬ر‬
‫يبف هنشوف أي أخر حاجة دخلت عشان تطلع‬
‫ي‬ ‫ي‬
‫ه أول حاجة‬
‫ي‬
 ‫ن‬
‫الل فوق‬
‫ي‬ ‫المثال‬ ‫ف‬‫لما نشغل الـ ‪ three() <= function‬من خالل الكود )(‪ three‬أخر سطر ي‬
‫ر‬
‫هتالف أول حاجة جواه انه يعمل تشغيل لـ )(‪ function two‬وبعدين يطبع‬
‫ي‬ ‫الـ ‪ JS‬هتعمل تشغيل لـلـ )(‪three‬‬
‫كلمة "‪"Three‬‬
‫بتاع‬ ‫ه أول حاجة اشتغلت و أول حاجة دخلت الـ ‪stack‬‬ ‫دي‬ ‫)(‪three‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ر‬
‫يبف‬
‫ي‬ ‫ي‬ ‫ي‬

‫ر‬
‫هتالف اول حاجة مطلوبة فيها انها‬
‫ي‬ ‫عل امر من الـ )(‪ three‬لما تشتغل الـ )(‪two‬‬
‫هتشتغل بقا الـ )(‪ two‬بناءا ي‬
‫تشغل الـ )(‪ one‬بعدين تطبع "‪"Two‬‬
‫يعن‬ ‫ن‬ ‫ر‬
‫تان حاجة اشتغلت هتبف تان حاجة تخش الصندوق او الـ ‪ stack‬ن‬ ‫يبف الـ )(‪ two‬دي ن‬
‫ر‬
‫ي‬ ‫ي ي‬ ‫ي‬ ‫ي‬

‫ر‬
‫هتالف اول حاجة مطلوبة فيها انها تطبع‬
‫ي‬ ‫عل امر من الـ )(‪ two‬لما تشتغل الـ )(‪one‬‬
‫هتشتغل بقا الـ )(‪ one‬بناءا ي‬
‫كلمة "‪"one‬‬
‫هتبف تالت حاجة تخش الصندوق او الـ ‪stack‬‬ ‫ر‬ ‫اذا‬ ‫اشتغلت‬ ‫حاجة‬ ‫تالت‬ ‫دي‬ ‫)(‪one‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ر‬
‫يبف‬
‫ي‬ ‫ي‬

‫يبف الـ ‪ console‬دي اخر حاجة هتخش الـ ‪stack‬‬ ‫ر‬

‫ه الـ )”‪ console.log(“One‬ي‬ ‫الل هيشتغل أخر حاجة ي‬
‫أي ي‬
‫هتخل‬
‫ي‬ ‫الل‬
‫ه ي‬ ‫كدا ي‬ ‫النها اخر حاجة هتشتغل بعد ما الـ )(‪ one‬أصال نفسها تشتغل الن الـ )(‪ one‬كدا‬
‫ن‬
‫الل موجود جواها يشتغل وبكدا هيكون دا اخر حاجه اشتغلت يف الـ ‪ code‬واخر حاجة‬ ‫الـ ‪ console.log‬ي‬
‫ر‬ ‫ن‬
‫ه‬ ‫هتبف ي‬
‫ي‬ ‫هتخش الـ ‪ stack‬النها اخر عملية يف االخر خالص تمت واخر عمليه دي هتخش الصندوق‬
‫عل وش الصندوق‬
‫الل ي‬‫ي‬

‫النتيجة هتطلع من الـ ‪ stack‬بقا بمنهج الـ ‪ LIFO‬أي اخر حاجة دخلت ؟! لسه قايل فوق من سطرين‬
‫ر‬
‫ه أول حاجه تطلع من الـ ‪ stack‬وتشتغل‬ ‫اخر حاجة دخلت أي؟! الـ )”‪ console.log(“One‬ي‬
‫يبف ي‬
‫الل تحتها كان الـ )(‪ one‬الـ )(‪ one‬بالفعل اشتغل وعمل الـ )”‪console.log(“One‬‬
‫الل تحتها ي‬
‫طيب أي ي‬
‫ر‬
‫يبف يطلع هو كمان من الـ ‪stack‬‬
‫ي‬
‫الل كان تحته كانت الـ )(‪ two‬جواها امر اول حاجه انها تشغل الـ )(‪ one‬وبما ان الـ )(‪ one‬اشتغل‬
‫طيب أي ي‬
‫ر‬ ‫ر‬
‫الل يطلع برا الـ ‪stack‬‬
‫هتالف الـ )”‪ console.log(“Two‬فدا ي‬
‫ي‬ ‫يبف يتشال بعد كدا‬
‫الل عليه ي‬
‫بالفعل وعمل ي‬
‫ويشتغل‬

‫الل تحت الـ )(‪ two‬كان الـ )(‪ three‬وجوها أمر اول حاجة تشغل الـ )(‪ two‬خالص الـ )(‪ two‬اشتغلت‬‫طيب أي ي‬
‫ن‬
‫الل بعدها يف الـ )(‪ three‬انها تطبع الـ )”‪console.log(“Three‬‬
‫الل بعده ي‬
‫الل عليها خش ي‬ ‫وعملت ي‬
‫يبف دا أخر حاجه هتخرج‬ ‫ر‬
‫ي‬
‫يبف ر‬
‫التتيب كدا ‪:‬‬ ‫ر‬
‫ي‬
‫‪console.log(“One”) => One‬‬
‫‪console.log(“Two”) => Two‬‬
‫‪console.log(“Three”) => Three‬‬
 ‫اكت ر‬
‫واكت‬ ‫خلين أوضح ر‬
‫ن‬ ‫تان عشان حاسس انك ممكن تكون ‪ confused‬شوية أو مرتبك ن‬
‫يعن‬ ‫طيب بص ن‬
‫ي‬ ‫ي‬ ‫ي‬
‫ه )(‪ function one‬دي عشان تشتغل محتاجة أي ؟! محتاجة انه يتعملها ‪ Call‬او استدعاء‬ ‫ي‬
‫ن‬
‫طيب امته تم استدعائها ‪ ..‬تم استدعائها يف الـ )(‪ function two‬طيب أصال )(‪ function two‬دي عشان‬
‫ه كمان‬‫تشتغل محتاجة أي ؟! محتاجة انه يتعملها ‪ Call‬او استدعاء ي‬
‫ن‬
‫طيب امته تم استدعائها ‪ ..‬تم استدعائها يف الـ )(‪ function three‬طيب أصال )(‪ function three‬دي عشان‬
‫ه كمان‬ ‫تشتغل محتاجة أي ؟! محتاجة انه يتعملها ‪ Call‬او استدعاء ي‬
‫جيت اخر سطر عملت لـلـ )(‪ function three‬استدعاء‬
‫ر‬
‫الباف ؟!‬ ‫يبف ن‬‫ر‬
‫ي‬ ‫مي أول حاجة اشتغلت وشغلت‬ ‫ي‬
‫)(‪ function three‬مش كدا ر‬
‫يبف )(‪ function three‬دي اول واحدة دخلت الـ ‪ stack‬او الصندوق لما دخلت‬
‫ي‬
‫الل حصل انها شغلت )(‪ function two‬وبعدين مطلوب منها تطبيع كلمة "‪"Three‬‬ ‫الـ ‪ stack‬ي‬
‫بعدها حصل أي ؟!‬
‫الل حصل انها شغلت‬ ‫ن‬
‫تان حاجة تخش الـ ‪ stack‬لما دخلت الـ ‪ stack‬ي‬
‫اشتغلت )(‪ function two‬ودي كانت ي‬
‫)(‪ function one‬وبعدين مطلوب منها تطبيع كلمة "‪"Two‬‬
‫بعدها حصل أي ؟!‬
‫الل حصل انها لقت‬ ‫اشتغلت )(‪ function one‬ودي كانت تالت حاجة تخش الـ ‪ stack‬لما دخلت الـ ‪ stack‬ي‬
‫المطلوب منها تطبع كلمة "‪"one‬‬
‫ه رابع حاجه تخش الـ‬ ‫ن‬ ‫ر‬
‫بمعن ادق زي ما الكود مكتوب ي‬‫ي‬ ‫يبف طباعة كلمة "‪ "one‬أو )”‪console.log(“one‬‬ ‫ي‬
‫ه كدا اخر حاجة تخش الـ ‪Stack‬‬ ‫ن‬
‫بمعن ادق ي‬
‫ي‬ ‫‪ stack‬او‬
‫يعن اخر حاجة تدخل الصندوق تكون أول حاجة تخرج منه‬ ‫ن‬
‫تعال نطبق مبدا الـ ‪ Last In First Out <== LIFO‬ي‬
‫ي‬
‫ه أول واحدة تطلع من الـ ‪ stack‬وكلمة ‪One‬‬ ‫ر‬ ‫ر‬
‫يبف ي‬ ‫ه الـ )”‪ console.log(“one‬ي‬ ‫يبف اخر حاجة دخلت ي‬ ‫ي‬
‫تتطبع‬
‫يبف وال‬‫ر‬
‫بعدين دخل قبلها )(‪ function one‬كدا كدا )(‪ function one‬اشتغلت خالص وطبعت كلمة "‪ "One‬ي‬
‫ر‬
‫وطبعن كلمة "‪"One‬‬ ‫عملن شغلك‬ ‫ر‬ ‫ر‬
‫انن كدا كدا‬
‫ي‬ ‫ي‬ ‫كأنها موجودة مع السالمة ي‬
‫قبل الـ )(‪ function one‬دخلت الـ )(‪ function two‬كان مطلوب منها تشغل )(‪ function one‬خالص يا‬
‫ر‬ ‫ر‬
‫باف من )(‪ function two‬انها تطبع كلمة "‪"Two‬‬ ‫الل ي‬
‫يبف طريق السالمة أي ي‬‫برنس اشتغلت والمصحف ي‬
‫ر‬
‫دلوقن زي‬ ‫يبف‬‫قبل الـ )(‪ function two‬دخلت الـ )(‪ function three‬وكانت دي اول واحدة تدخل الـ ‪ stack‬ر‬
‫ي‬ ‫ي‬
‫مانت شايف كدا هتكون اخر واحدة تطلع من الـ ‪ stack‬المهم كان مطلوب منها تشغل )(‪function two‬‬
‫ر‬ ‫ر‬
‫باف من )(‪function three‬‬ ‫الل ي‬
‫يبف مع السالمة من الـ ‪ stack‬أي ي‬
‫الل عليها ي‬
‫خالص يا برنس اشتغلت وعملت ي‬
‫انها تطبع كلمة "‪"three‬‬
‫تان سطر كلمة "‪ "Two‬بعدها تالت سطر اطبعت كلمة "‪"Three‬‬ ‫ن‬ ‫ر‬ ‫ر‬
‫يبف بالتتيب اطبعت كلمة "‪ "One‬بعدها ي‬‫ي‬
‫وبس كدا شكرا ر‬
‫ويبف الـ ‪ Stack‬طبق مبدأ الـ ‪Last In First Out <== LIFO‬‬
‫ي‬
‫‪By: Amr Elsayed‬‬
 ‫ن‬
‫طيب فاكر أول صفحة يف الدرس فوق لما رشحنا شوية حاجات عن الـ ‪ Web API‬ير‬
‫تيح ناخد مثال ر‬
‫ونشحه ؟!‬

‫ن‬ ‫ن‬ ‫ر‬

‫الثوان عشان تتنفذ‬
‫ي‬ ‫دلوقن الـ ‪ code‬دا نفس ال يـل فات بس انا زوت ‪ setTimeout‬يف األول هتاخد ‪ 0‬من‬
‫ي‬
‫تفتكر كدا الرسالة الل جواها دي هتتطبع ن‬
‫في ؟!‬ ‫ي‬

‫الل حصل ؟!‬ ‫ن‬ ‫ن‬

‫اطبعت يف االخر مع انها مكتوبه يف األول ‪ ...‬طيب دا حصل ليه أو أي ي‬
‫الل هما الـ ‪ Functions‬الموجودة ودخلتهم الـ ‪ stack‬زي ما‬
‫الل حصل ان الـ ‪ JS‬خلصت الحاجات بتاعتها ي‬
‫ي‬
‫اتشح فوق‬‫ر‬

‫اما الـ ‪ setTimeout‬دي الـ ‪ JS‬بعتتها للـ ‪ Web API‬يتعامل معاها‬

‫ن‬ ‫لما خلصها بعتها تا ن‬
‫الل كانوا عندها‬
‫ي‬ ‫‪Functions‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ان‬ ‫لقت‬ ‫بتعها‬ ‫الصندوق‬ ‫ف‬‫ي‬ ‫بصت‬ ‫‪JS‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫قامت‬ ‫‪JS‬‬ ‫ـ‬ ‫ل‬ ‫ل‬ ‫ن‬
‫ي‬
‫الل عندك‬ ‫عل الـ ‪ Web API‬ابعت ي‬‫خالص طلعوا من الصندوق واطبعوا فردت ي‬
‫الـ ‪ Web API‬بعت بقا الـ ‪ setTimeout‬فدخلت الـ ‪ stack‬بعد ما كل الـ ‪ Functions‬خرجت بعدين اطبعت‬
‫ن‬
‫تحتهم يف األخر‬
 ‫‪Event Loop And Callback Queue Lesson #175‬‬

‫تان بعد ما تشوف فيديو الدرس‬ ‫ن‬ ‫ر‬ ‫ر‬

‫دلوقن وانا بشحلك ي‬ ‫ي‬ ‫بص ياعم الحج الموضوع بسيط وهتشوف دا بنفسك‬
‫يعن ‪Last In First Out‬‬ ‫ن‬ ‫دلوقن انا عندي ‪ Call Stack‬شبهته بالصندوق كان ر‬
‫ر‬
‫ماش بمنهج ‪ LIFO‬ي‬ ‫ي‬ ‫ي‬
‫ه أول حاجة تطلع م الصندوق دا حلو كدا ؟! حلو أوي‬ ‫ر‬ ‫ن‬
‫هتبف ي‬
‫ي‬ ‫يعن اخر حاجة تخش الصندوق دا‬ ‫ي‬
‫متامن ‪ --‬ونوع ‪ synchronous‬ر ن‬
‫متامن)‬ ‫نوعي مزامنة (نوع ‪ Asynchronous‬غت ر ن‬
‫ن‬ ‫ان عندي‬ ‫ن‬
‫واتفقنا مسبقا ي‬
‫وعرفنا الفرق بينهم قبل كدا‬
‫متامن بيتم من خالل الـ ‪Web API‬‬ ‫واتفقنا برضو ان النوع الـ ‪ Asynchronous‬غت ر ن‬
‫ألن الـ ‪ JS‬بتكون ‪ Single threaded‬وبتشتغل بشكل ‪ synchronous‬ر ن‬
‫متامن‬
‫وه بتشغل الكود بتدي الحاجات الـ ‪ Asynchronous‬دي للـ ‪ Web API‬يتعامل معاها هو‬ ‫اتفقنا كمان ان الـ ‪ JS‬ي‬
‫الل جواه‬ ‫ن‬ ‫وبعدين يبتعها ن‬
‫بتاع خلص ي‬ ‫ي‬ ‫استن يا ‪ Web API‬اشوف الصندوق‬
‫ي‬ ‫بتقوله‬
‫ن‬
‫‪JS‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬ ‫‪JS‬‬ ‫ـ‬ ‫ل‬ ‫ل‬ ‫تان‬
‫ي‬ ‫ن‬
‫ن‬
‫استن شوية‬ ‫‪Web‬‬ ‫‪API‬‬ ‫ـ‬ ‫ل‬ ‫ل‬ ‫تقول‬ ‫تقوم‬ ‫مخلصتش‬ ‫لسه‬ ‫تالقيها‬ ‫الصندوق‬ ‫ف‬ ‫تبص‬ ‫!‬ ‫؟‬ ‫شغاله‬ ‫حاجات‬ ‫ف‬
‫ي‬ ‫ي‬ ‫وال لسه ي‬

‫الل تمت من خالل الـ ‪ Web API‬دي لما بتكون منتظرة دورها عشان‬ ‫هيح السؤال بتاع الدرس العمليات ي‬ ‫هنا ر ي‬
‫الل‬ ‫ن‬
‫تخش الصندوق او الـ ‪ Call Stack‬وبعدين تبدأ تطلع منه بتنتظر في وبتخش ازاي الـ ‪ Stack‬واي المنهج ي‬
‫تعال اقولك بقا‬
‫ي‬ ‫بتخش الـ ‪ Stack‬بيه؟ هو دا سؤال حلقتنا انهاردا ‪D":‬‬
‫صديف بيكون ليه صندوق خاص بيه هو كمان بينفذ فيه العمليات بتاعته بعيدا عن‬ ‫ر‬ ‫الـ ‪ Web API‬دا يا‬
‫ي‬
‫الـ ‪ stack‬او الصندوق بتاع الـ ‪JS‬‬

‫ر‬
‫دلوقن‬ ‫بعد ما بيخلص الـ ‪ Web API‬الشغل بتاعه بيقوم بعته لقائمة االنتظار وهنتكلم عن قائمة االنتظار دي‬
‫ي‬
‫متقلقش‬

‫‪By: Amr Elsayed‬‬

 ‫أي بقا قصة قائمة االنتظار دي ؟!‬
‫بص يا سيدي الـ ‪ Web API‬بعد ما بتخلص شغلها بتبعته لقائمة انتظار اسمها ‪Callback Queue‬‬
‫ر‬ ‫ر‬
‫الل تم من الـ ‪ Web API‬بالتتيب ‪ ...‬ي‬
‫الل دخل صندوق‬ ‫بتبف برضو زي صندوق كدا مجمع كل الشغل ي‬ ‫ي‬
‫الـ ‪ Web API‬وخلص بشعة وطلع منها األول ‪ ...‬يروح لقائمة االنتظار او الـ ‪Callback Queue‬‬
‫ه كمان اسمها ‪ FIFO‬او ‪First in First Out‬‬ ‫الـ ‪ Callback Queue‬دي ليها منهج او قاعدة ي‬
‫أي بقا المنهج او القاعدة دي ؟! ‪ ...‬الـ ‪ Callback Queue‬بيقولك اول حاجة هتخش عندي او أول حاجة‬
‫ه أول حاجة تطلع برضو من عندي وتروح للـ ‪ Call Stack‬بتاع الـ ‪JS‬‬
‫صندوق الـ ‪ Web API‬هتكون ي‬ ‫هتجيل من‬
‫ي‬
‫ر‬ ‫ً‬
‫عشان يظهرها ‪ ...‬اذا ي‬
‫يبف ‪ FIFO‬دا هو منهج الـ ‪Callback Queue‬‬
‫ماش بمبدأ طابور العيش كدا تروح بدري واألول تاخد العيش بدري واألول‬‫تقدر تقول ان الـ ‪ Callback Queue‬ر‬
‫ي‬

‫طيب أي هو الـ ‪Event Loop‬‬

‫عل الـ ‪ Event Loop‬دا‬
‫بص يا معلم الـ ‪ Callback Queue‬دي بيشغلها حاجه اسمها ‪ Event Loop‬تقدر تقول ي‬
‫هو القفل بتاع الصندوق بيفتح اول ما الـ ‪ Stack‬بتاع الـ ‪ JS‬يخلص شغله وبيفضل مقفول طول ما الـ ‪ stack‬لسه‬
‫ن‬
‫ه‬
‫الل ي‬ ‫الل بينظم مرور البيانات من قائمة االنتظار ي‬
‫يعن من االخر الـ ‪ Event Loop‬دا هو ي‬ ‫مليان ‪ ....‬ي‬
‫الـ ‪ Callback Queue‬للـ ‪ Call Stack‬بتاع الـ ‪JS‬‬

‫تعال ناخد مثال خارج سياق الفيديو‬

‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫ر‬
‫دلوقن الـ ‪ Code‬دا مكون من ‪ console.log 2‬واحدة تطبع "‪ "Hi‬والتانية تطبع "‪"Bye‬‬
‫ي‬
‫األول هتطبع رسالة بعد ‪ 20ms‬و التانية بعد ‪0ms‬‬
‫ي‬ ‫وبينهم فيه ‪ setTimeout 3‬بتوقيتات مختلفة‬
‫تيح نشوف النتيجة ؟!‬
‫و التالتة بعد ‪ 10ms‬ر ي‬

‫ن‬
‫الل موجودين‬
‫الل هما الـ ‪ Console‬االتني ي‬‫الل حصل ان الـ ‪ JS‬خلصت الحاجات بتاعتها ي‬ ‫الل حصل ؟! ي‬ ‫أي ي‬
‫الن دول اول حاجة دخلو الـ ‪ Call Stack‬وخرجوا منه‬
‫اما الـ ‪ setTimeout‬دي الـ ‪ JS‬بعتتها للـ ‪ Web API‬يتعامل معاها‬
‫ن‬
‫ه ‪ 0ms‬خلصت األول طلعها األول وحطها يف‬ ‫الل ي‬
‫فدخلو الـ ‪ setTimeout 3‬عند الـ ‪ Web API‬بص عليهم لقا ي‬
‫الـ ‪Callback Queue‬‬
‫ن‬ ‫ن‬ ‫ر‬
‫تان حاجة وحطها يف الـ ‪Callback Queue‬‬ ‫ه ‪ 10ms‬خلصت التانية طلعها ي‬ ‫الل ي‬
‫لف ي‬‫بعدين ي‬
‫ن‬ ‫بعدين ر‬
‫ه ‪ 20ms‬خلصت التالتة طلعها تالت حاجة وحطها يف الـ ‪Callback Queue‬‬ ‫ي‬ ‫الل‬
‫ي‬ ‫لف‬
‫ي‬

‫الل موجود عل صندوق الـ ‪Callback Queue‬‬ ‫بعدين جت الـ ‪ Event Loop‬القفل ي‬
‫بص عل الـ ‪ Call Stack‬بتاع الـ ‪ JS‬لقاه طبع كلمة ‪ Hi‬وطبع كمان كلمة ‪ Bye‬قام فاتح القفل‬
‫ن‬ ‫وشاف ن‬
‫مي اول حاجه كانت يف الطابور او الـ ‪ Callback Queue‬قام مطبق مبدأ ‪First In First Out <= FIFO‬‬
‫الل كانوا بيه‬ ‫ر‬ ‫ن‬
‫الل وراها بالتتيب ي‬
‫نشاف مي دخل األول قام مطلعه هو األول ودخله للـ ‪ Call Stack‬بعدين دخل ي‬
‫يف الطابور‬
‫والل دخل األول كانت الـ ‪ 0ms‬و التانية كانت ‪ 10ms‬و التالتة ‪20ms‬‬‫ي‬
‫بالتتيب ولكن كلهم راحو للـ ‪ web API‬الـ ‪ 0ms‬خلصت األول‬ ‫مع ان ترتيبهم نف الـ ‪ code‬بتاع المثال مش ر‬
‫ي‬
‫الل خلص األول دخل األول‬ ‫ر‬
‫والل بعدها ودخلو طابور االنتظار كدا بالتتيب ي‬ ‫والل بعدها ي‬
‫ي‬
‫ر‬
‫لف الـ ‪0ms‬‬
‫عل الطابور ي‬
‫طابور االنتظار بقا او ‪ Callback Queue‬موجود عليه قفل اسمه ‪ Event Loop‬بص ي‬
‫دخل اول واحد قام مطلعه للـ ‪ Call Stack‬بتاع الـ ‪ JS‬أول واحد وهكذا ر‬
‫بالتتيب‬

‫‪By: Amr Elsayed‬‬

 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫حب الل بتعمله عشان تستمتع بيه حب الرحلة الل انت ر‬

‫ماش فيها عشان متملش‬
‫ي‬ ‫ي‬ ‫ي‬

‫اذكر هللا ️♥‬

‫اكت و ال حول وال قوة اال باهلل‬
‫سبحان هللا و الحمد هلل و ال الـه اال هللا و هللا ر‬
‫عل نبينا محمد ﷺ‬ ‫ّ‬
‫اللهم صل وسلم وزد وبارك ي‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪What Is AJAX And Network Informations Lesson #176‬‬

‫انهاردا هنتكلم عن الـ ‪ AJAX‬وهو اختصار لـ ‪Asynchronous JavaScript And XML‬‬

‫ر‬
‫الـ ‪ AJAX‬مش ‪ Framework‬وال لغة برمجة وال تقنية هو مجرد وصلة كدا بتتيحلك استخدام اكت من تقنية‬
‫مع بعض زي الـ ‪HTML, CSS, JS, DOM‬‬
‫الـ ‪ AJAX‬دا ليه ‪ Object‬خاص بيه كدا اسمه )(‪ XMLHttpRequest‬عشان يتفاعل مع الـ ‪Server‬‬
‫عشان تقدر تبعت بيانات للستفر و تستقبل بيانات من الستفر من غت ما تحتاج تعمل ‪Refresh‬‬

‫عل النقطة بتاعت انك مش محتاج تعمل ‪ Refresh‬دي‬ ‫ن‬

‫خلين اديك مثال بسيط ي‬
‫ي‬
‫‪ -‬تخيل معايا لو انت فاتح الـ ‪ Google drive‬مثال وعندك ‪ Document‬بتكتب فيه شوية كالم فـ وانت بتكتب‬
‫منطف يعمل ‪Refresh‬‬ ‫ر‬ ‫مش‬ ‫لكن‬ ‫‪Save‬‬ ‫اتعمله‬ ‫كتبته‬ ‫انت‬ ‫الل‬ ‫ان‬ ‫بتقولك‬ ‫كدا‬ ‫رسالة‬ ‫ة‬ ‫بيطلعك كل ر‬
‫فت‬
‫ي‬ ‫ي‬
‫الل انت كتابته كله هيضيع ويطت‬ ‫الن لو دا حصل الكالم ي‬
‫ر‬ ‫ن‬ ‫ن‬
‫منطف ان الصورة‬ ‫ي‬ ‫مش‬ ‫المقال‬ ‫بتكتب‬ ‫وانت‬ ‫صورة‬ ‫ترفع‬ ‫وعايز‬ ‫معي‬ ‫موقع‬ ‫ف‬
‫‪ -‬نفس المثال لو بتكتب مقال ي‬
‫الل انت بتكتبه وكل دا وانت بتكتب عادي زي‬ ‫ر‬
‫بعد ما تتفع ان الموقع دا يعمل ‪ Refresh‬النه ممكن يطت ي‬
‫مانت‬
‫ن‬ ‫ن‬ ‫ن‬
‫مستن انك‬
‫ي‬ ‫بتمل الـ ‪ Form‬دا مكان الـ ‪ user Input‬دا هو مش‬
‫ي‬ ‫معي وفيه ‪ Form‬وانت‬ ‫‪ -‬لو انت يف موقع‬
‫ن‬ ‫ن‬
‫الل انت كتبتها دي يروح يبص عليها بصة يف الـ ‪ Server‬يشوفها لو يف‬ ‫تعمل ‪ submit‬ال هو بياخد الـ ‪ data‬ي‬
‫تان ليه نفس الـ ‪ user name‬بيقولك ان الـ ‪ name‬دا مش متاح فانت تغته فتوح يكرر نفس العملية‬ ‫حد ن‬
‫ر‬ ‫ي‬
‫باف الكالم‬ ‫ر‬
‫منطف انك مرة يروح يبص ع الداتا ويرجع يحصل ‪ Refresh‬وتضيع ي‬ ‫ي‬ ‫ويرجعلك بالرد فمش‬
‫ن‬
‫الل اتكتب يف الـ ‪Form‬‬ ‫ي‬

‫لما تحب تفتح موقع بيحصل حاجه اسمها ‪ Request‬او طلب بتطلب بيانات الصفحة دي وبعد كدا بتجعلك‬
‫الل هتعرفنا الـ ‪response‬‬
‫من الـ ‪ Request‬دا استجابة او ‪ Response‬فاحنا بقا هنشوف بعض االكواد ي‬
‫دا وصلنا سليم ونوعه ايه ؟!‬
 ‫ن‬
‫الل محتاج تفهمه حاليا ان يف حاجة اسمها ‪ Status Code‬وانه أي موقع بتطلبه من خالل‬
‫انت بس كل ي‬
‫الـ ‪ Request‬بيكون فيه ‪ Response‬بتجع‬
 ‫‪Request and Response From Real API Lesson #177‬‬

‫عل ‪ API‬من الـ ‪Github‬‬

‫عملت ‪ Request‬ي‬
‫ن‬
‫يعن ‪ GET‬او ‪POST‬‬
‫الل بيكون جواها نوع الـ ‪ Request Method‬ي‬ ‫استخدمت الـ )(‪ myRequest.open‬ي‬
‫الل هسحب منه البيانات وبعد كدا هل الـ ‪ Call‬دا ‪ Synchronous‬وال ‪Asynchronous‬‬
‫والـ ‪ URL‬بتاع الـ ‪ API‬ي‬
‫ن‬
‫فمحتاجي نكتبه ولو فيه ‪ Username‬و ‪Password‬‬ ‫عل الـ ‪API‬‬
‫ولو فيه ‪ Authentication‬ي‬

‫يبعتل ‪Response‬‬
‫ي‬ ‫يبعتل البيانات بتاعت الـ ‪ API‬او‬
‫ي‬ ‫بعد كدا استخدمت )(‪ myRequest.send‬عشان‬
 ‫ن‬ ‫ر‬ ‫ن‬ ‫ن‬
‫ومهمي جدا زي الـ ‪ readyState‬قيمته بـ ‪4‬‬ ‫دلوقن انا محتاج اعرفهم‬
‫ي‬ ‫حاجتي‬ ‫‪Response‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫لقيت ي‬
‫والـ ‪ status code‬قيمتها ‪200‬‬
‫ال ‪ 4‬حيث ان ‪:‬‬
‫ال األرقام من ‪ 0‬ي‬
‫فه بتشت ي‬
‫اما الـ ‪ readyState‬دي بالقيمة ‪ 4‬ي‬
‫‪ -0‬الطلب لسه مبدأش او متفعلش‬
‫‪ -1‬فيه اتصال حصل مع الـ ‪Server‬‬
‫‪ -2‬الطلب تم استالمه من الـ ‪Server‬‬
‫‪ -3‬بيتم معالجة الطلب‬
‫انته خالص والرد او ‪ Response‬جاهز‬ ‫ي‬ ‫‪ -4‬الطلب‬

‫ورجعل ببيانات اقدر استخدمها‬

‫ي‬ ‫والـ ‪ status code‬بالقيمة ‪ 200‬فدي معناه ان الـ ‪ Response‬نجح‬
‫عل ان الـ ‪ status code‬نجح فعليا انه يرجع بيانات‬ ‫خل بالك ان الـ ‪ readyState‬بالقيمة ‪ 4‬مش دليل ي‬‫ي‬
‫معن ان الـ ‪ readyState‬بالقيمة ‪ 4‬انه كمان الرد جاب‬ ‫ن‬ ‫ن‬ ‫ن‬
‫خل بالك عشان متخلطش بي االتني فمش‬ ‫ن‬
‫ي‬ ‫يعن ي‬‫ي‬
‫جال بغض النظر ان الرد دا فيه بيانات بقا او ال‬ ‫ن‬
‫ان فيه ‪ response‬ي‬‫بيانات ابدا بس القيمة ‪ 4‬دليل ي‬

‫عل ان الـ ‪ Request‬تمام‬ ‫ن‬

‫ليه الزم اعمل ‪ check‬واتمم الحاجتي دول تحديدا النهم بيكملوا بعض وبيكونو دليل ي‬
‫هيبف‬‫ر‬ ‫الل جاي بعد كدا‬
‫ي‬ ‫شغل الن لو فيهم واحد مش تمام كل الشغل ي‬
‫ي‬ ‫والـ ‪ Response‬كمان تمام وابدأ اكمل‬
‫مش تمام‬
‫بعمل بقا عملية الـ ‪ Check‬دي ازاي ؟!‬
‫ر‬
‫هتالف الـ ‪ screen‬فوق اخر ‪ Screen‬من الـ ‪ Console‬نزلتها فيها ايفنت اسمه ‪onreadystatechange‬‬
‫ي‬
‫عل الـ ‪ readyState‬و الـ ‪status code‬‬
‫الل بتسخدمه عشان اعمل ‪ Check‬ي‬ ‫هو دا االيفنت ي‬

‫ه كدا فعال هتعمل أي ؟!‬ ‫االتني الزم القيم بتاعتهم ر‬

‫ن‬ ‫ن‬
‫ي‬ ‫ولو‬ ‫كدا‬ ‫تبف‬
‫ي‬ ‫ان‬ ‫‪IF‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫فانا عملت ‪ Check‬وبأكد عليه ي‬
‫الل هو بيكون عبارة عن ملف ‪ JSON‬كدا كبت‬ ‫ابعتل الـ ‪ responseText‬ي‬
‫ي‬
 ‫‪Loop On Data Lesson #178‬‬

‫ن‬ ‫ر‬
‫الل كانت يف اللينك بتاع الـ ‪API‬‬
‫دلوقن كان عندي ‪ JSON Object‬فيه كل الـ ‪ Repos‬ي‬‫ي‬ ‫انا هنا عملت أي انا‬
‫فمسكت الـ ‪ JSON Object‬دا حولته لـ ‪ JS Object‬من خالل الـ )(‪JSON.parse‬‬
‫عل الداتا دي كلها بالـ ‪ length‬او عددهم‬
‫خالص رجعت الداتا بشكل الـ ‪ JS Object‬بدأت اعمل ‪ Loop‬ي‬
‫بتاع دا‬
‫ي‬ ‫وداخل الـ ‪ Looping‬انا عملت ‪ div‬وعملت ‪ textNode‬حطيت فيه الـ ‪JS Object‬‬
‫الل‬
‫الل عملته وبعدين نخدت الـ ‪ div‬دا بالـ ‪ textNode‬ي‬
‫وعملت ‪ appendChild‬للـ ‪ textNode‬داخل الـ ‪ div‬ي‬
‫جواه عملتله هو كمان ‪ appendChild‬ليه داخل الـ ‪ body‬عشان اعرضه يف الصفحة‬

‫طبعا فيه بيانات كتت جدا تحت انا عرضت جزء منها بس‬
‫نفش مرة بالـ ‪ forEach‬ومرة بالـ ‪ for of‬وعملت‬
‫ي‬ ‫الل فات دا كان شغل الفيديو انا عملت الـ ‪ loop‬مع‬
‫كل ي‬
‫شوية ‪ Styling‬بسيط كدا ودا مثال‬

‫‪By: Amr Elsayed‬‬

 Assignments From [169] = > [178]
]178[ >= ]169[ :‫لينك التكليفات‬
01 :‫التكليف‬

articles.json
[
{
"id": 1,
"name": "Amr",
"title": "Front-End",
"section": "Web Development",
"content": "HTML, CSS, JS, React.js"
},

{
"id": 2,
"name": "Elzero",
"title": "Full-Stack",
"section": "Web Development",
"content": "HTML, CSS, JS, React.js, PHP, Laravel"
},

{
"id": 3,
"name": "Osama",
"title": "Back-End",
"section": "Web Development",
"content": "JS, Node.js"
},

{
"id": 4,
"name": "Ahmed",
"title": "Android",
"section": "Mobile Development",
"content": "Kotlin"
},

{
"id": 5,
"name": "Ali",
"title": "IOS",
"section": "Mobile Development",
"content": "Swift"
}
]
 02 :‫التكليف‬
// Assignment Two

let myReq = new XMLHttpRequest();

myReq.open("GET", "articles.json");
myReq.send();
console.log(myReq);
myReq.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
console.log(this.responseText);
console.log("Data Loaded");
}
};

03 :‫التكليف‬
// Assignment Three

let myReq = new XMLHttpRequest();

myReq.open("GET", "articles.json");
myReq.send();
console.log(myReq);
myReq.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {

let mainData = JSON.parse(this.responseText);

console.log(mainData);

mainData.forEach((article) => {
article["section"] = "all";
});
let updatedData = JSON.stringify(mainData);
console.log(updatedData);
}
};

04 :‫التكليف‬
// Assignment Four

let myReq = new XMLHttpRequest();

myReq.open("GET", "articles.json");
myReq.send();
console.log(myReq);
myReq.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
let mainData = JSON.parse(this.responseText);
 // Create Container To Hold All Divs And Gives Him className & Id
let container = document.createElement("div");
container.id = "data";
container.className = "container";
container.style.cssText = `display: flex; gap: 10px; flex-wrap: wrap;`;

// container.style.cssText =
for (let i = 0; i < mainData.length; i++) {
// Create div To Each Article
let div = document.createElement("div");
div.className = "article";

// Style div
div.style.cssText = `background: #004766; padding: 5px 15px; margin: 10px auto
0px; color: #fff; font: bold 17px arial; width: 400px; border-radius: 10px`;

// Create <p>..</p> To Hold Name Of Author

let name = document.createElement("p");
let nameText = document.createTextNode(`Name: ${mainData[i].name}`);
name.appendChild(nameText);

// Create <p>..</p> To Hold Name Of Title

let title = document.createElement("p");
let titleText = document.createTextNode(`Title: ${mainData[i].title}`);
title.appendChild(titleText);

// Create <p>..</p> To Hold Name Of Section

let section = document.createElement("p");
let sectionText = document.createTextNode(
`Section: ${mainData[i].section}`
);
section.appendChild(sectionText);

// Create <p>..</p> To Hold Name Of Content

let content = document.createElement("p");
let contentText = document.createTextNode(
`Content: ${mainData[i].content}`
);
content.appendChild(contentText);

// Append All <p>...</p> To their Divs

div.appendChild(name);
div.appendChild(title);
div.appendChild(section);
div.appendChild(content);

// Append Div To Container

container.appendChild(div);

// Append Container To The Body

document.body.appendChild(container);
}
}
};
 ‫ال تنسونا من دعواتكم‬
Never Forget That (Always Search)
By: Amr Elsayed
 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

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

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته‬
‫ن‬
‫العالمي‬ ‫ينبع لجالل وجهك ولعظيم سلطانك يا رب‬‫كثتا مبارًكا فيه كما ن‬ ‫ً‬
‫حمدا ً‬
‫طيبا ً‬ ‫اللهم لك الحمد‬
‫ي‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬‫اللهم ّ‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫ال تنسونا من دعواتكم‬
‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Callback Hell Or Pyramid Of Doom Lesson #179‬‬

‫ه بتكون ‪ Function‬بتقبل جواها ‪ function‬تانيه‬‫والل ي‬

‫أتكلمنا قبل كدا عن الـ ‪ Callback function‬ي‬
‫ن‬
‫ه ‪ Parameter‬دي أصال يف حد ذاتها ممكن يكون جواها ‪ Function‬تانيه‬‫الل ي‬
‫كـ ‪ Parameter‬و الـ ‪ function‬ي‬
‫كـ ‪ Parameter‬ودا ينقلنا لمصطلح مقعد شوية اسمه ‪ Callback hell‬او ‪Pyramid Of Doom‬‬

‫ن‬
‫يعن دا بيكون احد اشكالها بعيدا عن الـ ‪ Code‬المكتوب‬
‫والل ي‬
‫ي‬
‫الل هتاخده‬ ‫نن‬
‫عل سبيل المثال ممكن يكون عندي ‪ Function‬وظيفتها انها تتل صورة من الـ ‪ URL‬ي‬ ‫ي‬
‫الـ ‪ function‬دي بيكون جوها ‪ callback function‬تانيه وظيفتها ان لما الصورة تجيلها تعلمها ‪resize‬‬
‫والـ ‪ function‬بتاعت الـ ‪ resize‬دي بيكون جوها ‪ callback function‬تانية بعد ما الصورة يتعملها ‪resize‬‬
‫ه حاطة الـ ‪ Logo‬ع الصورة دي والـ ‪ function‬دي جواها ‪ callback function‬بتاخد الصورة بعد ما‬ ‫تقوم ي‬
‫عل الـ ‪ website‬كل دا بيؤدي لمصطلح الـ ‪Callback Hell‬‬
‫يتحطلها ‪ Logo‬وترفعها ي‬
 ‫دا مثال بسيط جدا ع الـ ‪Callback Function‬‬

‫الل هدوس عليه يتحول لونه ألحمر‬

‫بتخل الـ ‪ target‬ي‬
‫ي‬ ‫عندي ‪function‬‬
‫ه تغت اللون وتنفذها مع الـ ‪click‬‬ ‫ن‬
‫الل ي‬
‫من أول ‪ Function‬ي‬‫وعندي ‪ function‬تانيه مع ‪ event‬الـ ‪ click‬بتقبل ي‬
‫>== ‪After Click‬‬

‫ن‬
‫ويعتت ابسط مثال‬
‫ر‬ ‫نفس فكرة الـ ‪ Callback function hell‬يف المثال دا‬

‫كل المشاكل بقا بتاعت الـ ‪ Callback hell‬دا هتتحل لما نتعلم الـ ‪ promises‬و الـ ‪fetch‬‬
‫عل حلها‬
‫احنا خدنا فكرة عن المشكلة قبل ما نتعرف ي‬
 ‫‪Promise Intro And Syntax Lesson #180‬‬

‫يعن وعد الـ ‪promise‬‬‫ن‬

‫أوال الـ ‪ Promise‬ي‬
‫ن‬
‫انهاردا هنتكلم عن الـ ‪ Promise syntax‬ومفهوم الـ ‪promise‬‬
‫ن‬ ‫ن‬
‫يف الـ ‪ JS‬عامل زي الوعد يف الحقيقة بالظبط حاجة لسه هتحصل يف المستقبل زي ما حد من صحابك‬
‫يعن حاجة لسه هعملها هو نفس الفكرة بالظبط‬ ‫ن‬
‫اوعدن انك هتعمل ‪ 1‬و ‪ 2‬و ‪ 3‬فانت تقوله أوعدك ‪ ..‬ن‬ ‫يقولك‬
‫ي‬ ‫ي‬
‫بستخدم الـ ‪ Promise‬عشان اتجنب مشكلة الـ ‪callback hell‬‬

‫الـ ‪ promise‬مكون من ‪ 3‬حاالت‬

‫ن‬
‫يعن الـ ‪ promise‬ال بيكون اتحقق‬
‫الل يحصل فيها ‪ initial state‬ي‬
‫‪ -1‬الـ ‪ :Pending‬او االنتظار نودي الحالة ي‬
‫او متحققش بيكون لسه يف البداية واالنتظار ===< ‪Pending‬‬

‫الل بيكون فيها الوعد اتحقق او العلمية تمت بنجاح ===< ‪Success‬‬
‫‪ -2‬الـ ‪ :Fulfilled‬ودي الحالة ي‬

‫الل بيكون فيها الوعد متحققش او العملية فشلت ===< ‪Failed‬‬

‫‪ -3‬الـ ‪ :Rejected‬ودي الحالة ي‬

‫ن‬ ‫ن‬ ‫أول ما تبدأ ر‬

‫تنش الـ ‪ Promise‬بتاعك بيكون يف حالة الـ ‪ Pending‬بعد ما تخلص الـ ‪ Promise‬بيكون يف حالة‬
‫ه فيها الـ ‪ Promise‬بتاعك اتحقق‬ ‫ن‬
‫الل ي‬
‫من اتني وارد يحصل منهم واحدة يا أما حالة الـ ‪ Resolved‬ي‬
‫الل فيها بيكون الـ ‪ Promise‬متحققش وفشل‬ ‫او الحالة التانية ‪ Rejected‬ي‬
‫والل منها بقا بطبع‬
‫ي‬ ‫بعد كدا بيكون عندي ‪ method‬اسمها ‪ then‬بمرر ليها ‪Callback function‬‬
‫يا أما الـ ‪ Resolved Value‬او الـ ‪Rejected Value‬‬

‫‪By: Amr Elsayed‬‬

 ‫الـ ‪Syntax‬‬

‫انا عندي متغت اسمه ‪ myPromise‬قيمته بتساوي )(‪new Promise‬‬

‫اتني ‪ function‬واحدة للـ ‪ resolve‬و واحدة للـ ‪reject‬‬ ‫ن‬ ‫الـ )(‪ new Promise‬دا بيقبل جواه‬
‫ن‬
‫عملت متغت اسمه ‪ Connect‬قيمته ‪ true‬وحطيت القيمة دي يف ‪IF & Else Statement‬‬
‫ن‬
‫يف حالة الـ ‪ IF‬و الـمتغت ‪ connect‬بالفعل ‪ true‬قولتله هات الـ ‪ function‬بتاعت الـ ‪ resolve‬دي‬
‫وخليها تـ ‪ return‬او ترجع الـجملة دي =====< "‪"Connection Established‬‬
‫ن‬ ‫ن‬ ‫ن‬
‫يعن حصل ‪reject‬‬ ‫الل هتتحق ي‬ ‫يعن الـ ‪ Else‬ي‬
‫اما يف حالة الـ ‪ Else‬لو المتغت ‪ connect‬بقا قيمته ‪ false‬ي‬
‫للبيانات فقولتله هات الـ ‪ function‬بتاعت الـ ‪ reject‬دي وخليها تـ ‪ return‬او ترجع‬
‫الـجملة دي =====< "‪"Connection Falied‬‬
‫عل قيمته واحد من الـ ‪function‬‬ ‫ً‬ ‫ن‬
‫‪ resolve‬او الـ ‪ reject‬مرتبط بالمتغت ‪ connect‬وقيمته وبناءا ي‬‫ن‬
‫يعن الـ‬
‫ي‬
‫الل هيتم‬
‫الل موجودة يف الـ )(‪ new Promise‬هو ي‬ ‫ي‬
‫الل تمت وبقا فيه ‪Connection‬‬ ‫ه‬ ‫‪resolve‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫وهللا لو كانت الـ ‪ connect‬قيمتها ‪ true‬نف الحالة دي ر‬
‫يبف‬
‫ي ي‬ ‫ي‬ ‫ي‬
‫و العملية بقت ‪fulfilled‬‬

‫ن‬ ‫ولو كانت الـ ‪ connect‬قيمتها ‪ false‬نف الحالة دي ر‬

‫الل تمت و مبقاش يف أي ‪Connection‬‬
‫ي ي‬ ‫ه‬ ‫‪reject‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫يبف‬
‫ي‬ ‫ي‬
‫و العملية بقت ‪Rejected‬‬

‫بتاع‬ ‫بتيح بعد ما اخلص الـ ‪Promise‬‬ ‫ن‬

‫ي‬ ‫الل ر ي‬
‫من ‪ Callback function‬ودي ي‬ ‫الل تبقبل ن ي‬
‫بعد كدا عندي الـ ‪ then‬ي‬
‫سواء هو ‪ resolved‬او ‪ rejected‬يف الـ ‪ then‬انا هتعمل مع كل حالة من دول‬
‫تجيبل النتيجة بتاعت الـ ‪Promise‬‬
‫ي‬ ‫الل جوا الـ ‪ then‬وظيفتها انها‬
‫طيب أي وظيفة الـ ‪ Callback function‬ي‬
‫ن‬ ‫ن‬ ‫ن‬
‫يعن‬
‫ه الـ ‪ fulfilled‬او الـ ‪ resolved value‬ي‬‫من يف الـ ‪ then‬ي‬
‫لو اتحقق او فشل والحظ ان اول قيمة بتطلب ي‬
 ‫ازاي برضو ؟‬

‫ن‬
‫ه أصال يف األصل بتعود‬
‫‪ callback function‬دي بتاعت الـ ‪ resolveValue‬ي‬ ‫فمثال اول‬
‫ر‬ ‫ن‬
‫الل هتطبع الكالم‬
‫ه ي‬ ‫يبف الـ ‪ resolveValue‬دي ي‬
‫الل فوق لو اتحققت ي‬
‫عل اول ‪ function‬يف الـ ‪ promise‬ي‬‫ي‬

‫ن‬ ‫ن‬
‫ه برضو أصال يف األصل بتعود‬
‫الل ي‬
‫تان ‪ callback function‬دي بتاعت الـ ‪ rejectValue‬ي‬
‫لكن ي‬
‫ر‬ ‫ن‬ ‫ن‬
‫الل هتطبع الكالم‬
‫ه ي‬ ‫يبف الـ ‪ rejectValue‬دي ي‬
‫الل فوق لو متحققش ي‬
‫تان ‪ function‬يف الـ ‪ promise‬ي‬
‫عل ي‬ ‫ي‬

‫بص انا عارف انك توهت سيكا او يمكن انا عشان توهت شوية فحاسس ان دا انطباع عام‬
‫ن‬
‫خلين اديك الزتونة زي ما بيقولو‬
‫ي‬

‫اتني ‪ Function‬حلو ؟!‬ ‫ن‬ ‫من‬ ‫الـ ‪ promise‬الل ه فوق دي بتقبل ن‬

‫ن‬ ‫ي‬ ‫ي ي‬ ‫ن‬
‫واحدة يف حالة الـ ‪ resolve‬او الـ ‪ --- fulfilled‬و التانية يف حالة الـ ‪ reject‬او الـ ‪Rejected‬‬
‫اتني ‪ Function‬لكل حالة‬‫ن‬ ‫يبف انا عندي كدا‬ ‫ر‬
‫ي‬

‫ن‬ ‫بتتيح ه كمان ب ن‬

‫ـإتني ‪ function‬برضو واحدة يف حالة ان الـ ‪ promise‬بتاعك بقا ‪resolve‬‬ ‫ر ي ي‬ ‫الـ ‪ then‬بقا‬
‫ن‬
‫ه اول ‪ Function‬يف الـ ‪promise‬‬‫الل ي‬
‫فتعوض عن حالة الـ ‪ resolve‬ي‬

‫ن‬ ‫ن‬
‫تان ‪Function‬‬
‫ه ي‬‫الل ي‬
‫نوالتانية يف حالة ان الـ ‪ promise‬بتاعك بقا ‪ reject‬فتعوض عن حالة الـ ‪ rejected‬ي‬
‫يف الـ ‪promise‬‬

‫ن‬
‫طبعا انت ممكن تخزن الـ ‪ functions‬دي يف متغت عادي وتكتب المتغت مكانهم‬
 ‫‪Promise – Then, Catch And Finally Lesson #181‬‬

‫ن‬
‫هنتعرف انهاردا عل مفاهيم مهمة يف عالم الـ ‪ Promise‬زي الـ ‪ catch‬و الـ ‪ finally‬وسبق واتعرفنا ع الـ ‪then‬‬

‫ر‬
‫وهنشحها بالـ ‪Code‬‬ ‫تخيل معايا القصة دي‬
‫ر‬ ‫ن‬ ‫ر‬
‫نالف‬
‫اوعدن اول ما نروح المكتب ي‬
‫ي‬ ‫صاحن وقولتله‬
‫ري‬ ‫دلوقن بتكلم مع واحد‬
‫ي‬ ‫انا‬
‫وعدتن انهم هيجوا‬ ‫ن‬ ‫الل‬ ‫ن‬
‫ي‬ ‫األربــع موظفي ي‬
‫يبف الوعد اتحقق‬ ‫ر‬ ‫ر‬
‫دلوقن لو انا روحت الـ ‪ Meeting‬ولقينا األربــع اشخاص ي‬ ‫ي‬
‫هتيح عشان من االربعه دول هنختار ن‬
‫اتني‬ ‫بعد ما الوعد اتحقق الـ ‪then‬‬
‫ر ي‬
‫تان ونختار منهم شخص واحد بس‬ ‫ن‬ ‫ن‬ ‫ن‬
‫بعد ما نختار الشخصي دول هتوح مكان ي‬
‫طيب فرضا اننا روحنا المكتب وملقناش وال شخص موجود دا معناه أي ؟!‬
‫هيح دور الـ ‪ Catch‬مفيش وال شخص‬ ‫معناه ان ًالوعد متحققش هنا بقا ر ي‬
‫موجود اذا الوعد متحققش‬
 ‫بتوع بعددهم الـ ‪4‬‬
‫ي‬ ‫بتاع وحطيت الـ ‪employees‬‬
‫ي‬ ‫عملت الـ ‪promise‬‬
‫ر‬
‫يبف الوعد اتحقق والـ ‪ resolvedFunction‬الخاصة بحالة‬ ‫ن‬
‫بعدين قولتله ‪ if‬لو الـ عدد الموظفي دا بيساوي ‪ 4‬ي‬
‫ن‬
‫يعن الـ ‪ Array‬بتاعت‬ ‫ن‬ ‫ر‬
‫جعل الموظفي ===< ;)‪ resolveFunction(employees‬ي‬ ‫تحقيق الوعد هت ي‬
‫جعل كلها‬ ‫الموظفي ر‬
‫هت‬ ‫ن‬
‫ي‬

‫بعدا كدا الـ ‪ else‬لو الوعد متحققش الـ ‪ rejectedFunction‬الخاصة بحالة عدم تحقيق الوعد‬
‫ن‬
‫الموظفي مش بيساوي ‪4‬‬ ‫جعل الـ ‪ Error‬ان عدد‬ ‫ر‬
‫هت ي‬
‫===< ;))"‪rejectFunction(Error("Number Of Employees Is Not 4‬‬

‫ن‬
‫عل حالة تحقيق الوعد‬
‫ه بتعود ي‬ ‫األول طبقت أول سيناريو عندي ‪ ...‬الـ ‪ resolveValue‬ي‬
‫الل ي‬ ‫ي‬ ‫جيت يف الـ ‪then‬‬
‫ن‬
‫الموظفي كاملة همسك بقا الـ ‪ resolveValue‬دي‬ ‫رجعل الـ ‪ Array‬بتاعت‬ ‫الل قولتله فيها‬
‫ي‬ ‫الحالة ي‬
‫جال ‪ 4‬اشخاص خدت منهم ‪2‬‬‫اخل الـ ‪ length‬بتاعها بيساوي ‪ 2‬عشان اطبق اول سيناريو ي‬‫ي‬
‫والـ ‪ console.log‬دي هتطبعهم‬

‫الل فات انا بس‬

‫الكود دا هو هو نفسه ي‬
‫شيلت الـ ‪ Console‬وحطيت ‪return‬‬
‫الل بقت‬ ‫عشان الـ ‪ resolveValue‬دي ي‬
‫ترجعل واستخدم‬ ‫ن‬
‫موظفي‬ ‫ر‬
‫دلوقن ‪2‬‬ ‫قيمتها‬
‫ي‬ ‫ي‬
‫ن‬
‫تان سيناريو‬ ‫ن‬
‫تان عشان نطبق ي‬‫معاه الـ ‪ then‬ي‬

‫‪By: Amr Elsayed‬‬

 ‫ن‬ ‫ن‬ ‫ن‬
‫الل اتفقنا عليه يف الحكاية‬
‫جيت بقا يف الـ ‪ then‬التانيه خليت عدد الموظفي يكونو ‪ 1‬بس مش دا السيناريو ي‬
‫فوق ‪ ...‬جميل‬

‫الل تم اختياره‬
‫هتطبعل مسج فيها اسم الموظف األخت ي‬
‫ي‬ ‫ه‬
‫الل ي‬
‫بعد كدا عملت الـ ‪ then‬األخت ي‬

‫يبف ببساطة لحد االن انا بستخدم الـ ‪ then‬عشان اهندل بيها الوعد لو اتحقق او متحققش‬ ‫ر‬
‫ي‬
‫يعن ببساطة كدا الـ ‪ then‬بهندل بيها سواء الـ ‪ resolve‬او ‪reject‬‬ ‫ن‬
‫ي‬

‫ن‬ ‫ر‬ ‫ن‬ ‫ن‬ ‫ن‬

‫الل فوق دي هيحصل‬
‫دلوقن شيلت الموظفي من الـ ‪ Array‬ي‬ ‫ي‬ ‫الجايي دول لو انا‬ ‫الكلمتي‬ ‫ركز أوي معايا بقا يف‬
‫أي ؟!‬
‫ن‬
‫االول عندي‬
‫ي‬ ‫ه حالة الـ ‪ true‬يف الـ ‪if‬‬ ‫هيحصل ان الـ ‪ resolveFunction‬هيتم تجاهلها الل‬
‫ي ي ن‬ ‫ر ا‬
‫ه حالة الـ ‪ false‬يف الـ ‪else‬‬ ‫ي ي‬‫الل‬ ‫‪rejectFunction‬‬ ‫ـ‬ ‫ل‬ ‫ل‬ ‫ة‬‫وهيتجه مباش‬
‫وتطبعل ‪ error‬مش اتفقنا فوق من تلت سطور‬
‫ي‬ ‫الل انا حطيتها دي برضو هتهندل الـ ‪ reject‬دا‬
‫هنا بقا الـ ‪ then‬ي‬
‫بالظبط ان انا بستخدم الـ ‪ then‬عشان اهندل بيها الوعد لو اتحقق او متحققش ؟! لسه من سطرين تالته‬
‫ن‬
‫عل طول‬
‫الل فوق ي‬‫قولت الكالم دا يف الفقرة ي‬

‫‪By: Amr Elsayed‬‬

‫الل كتبتهم اتحولوا من حالة الـ ‪ resolve‬لحالة الـ ‪ reject‬وطبعو الـ ‪Error‬‬
‫ي‬ ‫اهم التالت حاالت ‪then‬‬
‫ن‬ ‫ن‬ ‫ن‬
‫بتعرفن‬
‫ي‬ ‫الل‬
‫ه ي‬‫وخل بالك انا بكتب يف حالة الـ ‪ reject‬كلمة ‪ Error‬يف الـ ‪ console‬قبل الكالم عشان ي‬
‫ي‬
‫مكان الـ ‪Error‬‬

‫ن‬
‫تعرفن مكان الـ ‪Error‬‬ ‫ن‬
‫يعن دي لزمتها‬
‫ي‬ ‫ي‬

‫الل هيحصل‬
‫ولو شيلتها شوف ي‬

‫ن‬
‫يعرفن مكان الـ ‪Error‬‬ ‫هيطبعل رسالة قرعة زي ما انت شايف كدا من غت ما‬
‫ي‬ ‫ي‬

‫‪By: Amr Elsayed‬‬

‫الل كتبتهم‬ ‫ان هعمل ‪ chain‬او ربط لكل الـ ‪ then‬التالتة‬‫هنا بقا يا معلم هيح دور الـ ‪ catch‬انا بس كل هعلمه ن‬
‫ي‬ ‫ي‬ ‫ر ي‬
‫ن‬ ‫ن‬
‫الموظفي عشان اشتغل ع الـ ‪ rejectFunction‬يف‬ ‫بتاع ‪ myPromise‬بس وكمان هشيل كل‬ ‫ي‬ ‫دول مع المتغت‬
‫حالة الـ ‪else‬‬

‫استخدمت الـ ‪ catch‬وحطيت جواها ‪ callback function‬هيحل محل ن‬

‫مي ؟!‬
‫الل‬
‫عل الرسالة ي‬
‫ه حالة الـ ‪ else‬لما يحل محلها هيطب ي‬
‫الل ي‬
‫الل فوق ي‬
‫محل محل الـ ‪ rejectFunction‬ي‬ ‫هيحل‬
‫ن‬
‫موجودة يف الـ ‪ else‬بقا‬

‫الل تولت المهمة دي‬

‫ه بقا ي‬
‫هنا الـ ‪ then‬بطلت تهندل الـ ‪ reject‬والـ ‪ catch‬ي‬

‫‪By: Amr Elsayed‬‬

 ‫طيب أي بقا قصة الـ ‪ finally‬دي ؟!‬
‫ه ملهاش دعوة بالحوار دا‬
‫وال ‪ rejected‬ي‬ ‫بتاع ‪resolved‬‬
‫ي‬ ‫الـ ‪ finally‬دي ملهاش عالقة الـ ‪promise‬‬
‫ن‬
‫انا بستخدمها مثال عشان اطبع رسالة ‪ ...‬الرسالة دي هتتطبع يف كل الحاالت سواء الوعد اتحقق متحققش‬
‫هتطبعل رسالة وتشتغل‬
‫ي‬ ‫ه‬‫ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫️♥راقت يل️♥‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫سبحان هللا وبحمده عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته‬
‫ن‬
‫العالمي‬ ‫ينبع لجالل وجهك ولعظيم سلطانك يا رب‬‫كثتا مبارًكا فيه كما ن‬ ‫ً‬
‫حمدا ً‬
‫طيبا ً‬ ‫اللهم لك الحمد‬
‫ي‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬‫اللهم ّ‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫ال تنسونا من دعواتكم‬
‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Promise And XHR Lesson #182‬‬

‫انا هنا عملت ‪ Function‬اسمها ‪ getDate‬مررت ليها ‪ Parameter‬اسمه ‪ apiLink‬الـ ‪ function‬دي هتكون‬
‫الل هتيجيبه‬ ‫ن‬
‫يعن انت هتشيل الـ ‪ Parameter‬دا وتحط مكانه لينك الـ ‪ API‬ي‬
‫ديناميكية ي‬

‫ن‬
‫بتاع مررت فيه زي ما اتعودنا الـ ‪ resolve‬يف حالة ان فيه‬
‫ي‬ ‫داخل الـ ‪ Function‬دي بقا عملت الـ ‪Promise‬‬
‫ن‬ ‫ر‬
‫جعل والوعد اتحقق ومررت كمان الـ ‪ reject‬يف حالة ان البيانات فيها مشكلة او الوعد متحققش‬
‫بيانات فعال هت ي‬

‫ن‬
‫الل خزنته يف المتغت ‪myRequest‬‬ ‫داخل الـ ‪ promise‬عملت الـ ‪ AJAX Call‬من خالل الـ ‪ XML‬ي‬
‫بتاع انه حالة الـ ‪ readyState‬بـ ‪4‬‬ ‫عملت ‪ Event‬الـ ‪ onload‬عل الـ ‪ myRequest‬دا وجواه عملت ر‬
‫الشط‬
‫ي‬ ‫ي‬
‫والـ ‪ status‬بـ ‪200‬‬
‫وهاتل البيانات او اعملها ‪Parse‬‬ ‫الشط المتحقق دا‬‫يبف نفذ الوعد جوا ر‬ ‫ر‬ ‫ر‬
‫ي‬ ‫قولتله بقا جوا الشط دا لو اتحقق ي‬
‫ورجعل ‪ Error‬فيه مسج ‪No Data Found‬‬ ‫ر‬
‫هان عدم تنفيذ الوعد هنا‬ ‫ر‬ ‫ر‬
‫ي‬ ‫يبف ي‬‫والـ ‪ else‬لو الشط متحققش ي‬

‫بتاع الـ ‪ Parameter‬بتاع الـ ‪function‬‬

‫ي‬ ‫عملت بقا ‪ open‬وحطيت مكان الـ ‪API‬‬
 ‫ه ‪ getData‬وعوضت مكان الـ ‪ Parameter‬بتاعها‬ ‫ر‬
‫الل ي‬
‫بتاعن ي‬
‫ي‬ ‫عملت ‪ run‬للـ ‪ function‬األساسية‬
‫بالـ ‪API Link‬‬
‫عل بعضها كدا بتعوض عن حالة الـ ‪resolve‬‬‫األول دي كلها ي‬
‫ي‬ ‫وبعدين استخدمت عليها الـ ‪ then‬الـ ‪then‬‬
‫ن‬
‫الل يف الـ ‪ promise‬فوق‬
‫ر‬ ‫ر‬ ‫ين ن‬
‫يعن يف حالة تحقيق الشط بتاع الـ ‪ readyState‬و الـ ‪ status‬وكمان الوعد اتحقق جوا الشط المتحقق‬ ‫ي‬
‫ن‬ ‫ن‬
‫الل هو الـ ‪ resolve‬و الـ ‪ resolve‬دا بتوح يف‬
‫دا هتعمل ‪ Pares‬للداتا الـ ‪ data‬دي متخزنة يف تنفيذ الوعد ي‬
‫الل هو أصال شايل جواه‬ ‫ن‬
‫يعن نفهنا انا قولتله بقا هات الـ ‪ resolve‬دا ي‬
‫األول لو اتحقق واتنفذ ي‬
‫ي‬ ‫الـ ‪then‬‬
‫الـ ‪ parse‬بتاع الـ ‪ data‬كلها الموجود يف الـ ‪ API‬قولتله قلل عددهم لـ ‪ repo 10‬بس‬
‫الل بعدها‬
‫وبعدين رجعت الـ ‪ 10 repos‬دول للـ‪ then‬ي‬
‫الل بعدها خدت منها اول ‪ repo‬بس وعرضت اسمها‬‫الـ ‪ then‬ي‬

‫ن‬
‫ه يف حالة عدم تنفيذ الوعد ‪ ..‬عد تنفيذ الوعد دا ممكن‬ ‫الل ي‬
‫بعد كدا جت الـ ‪ catch‬بقا بالـ ‪ function rej‬ي‬
‫اكت من سبب زي لينك الـ ‪ API‬مش سليم مثال‬ ‫يكون ليه ر‬
‫ن‬ ‫ن‬ ‫ن‬
‫الل موجود يف الـ ‪promise‬‬
‫ي‬ ‫‪reject‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫محل‬ ‫بيحل‬ ‫أصال‬ ‫هو‬ ‫الل‬
‫ي‬ ‫‪Console‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫ي‬ ‫دا‬ ‫‪rej‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫اطبعل‬
‫ي‬ ‫دي‬ ‫الحالة‬ ‫ف‬
‫ي‬
‫ن‬ ‫ن‬ ‫‪...‬‬
‫الل موجود يف الـ ‪reject function‬‬‫فف حالة عدم تنفيذ الوعد هيطبع الـ ‪ Error‬ي‬ ‫ي‬ ‫فوق‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
‫‪Fetch API Lesson #183‬‬

‫الل كنا بنعملها‬ ‫ن‬ ‫باستخدام الـ ‪fetch‬‬

‫هنستغن عن قصة الـ ‪ Promise‬و الـ ‪ XML‬ي‬
‫ي‬

‫الل عايز اسحب منه الـ ‪Data‬‬

‫الـ ‪ Fetch‬بحط فيه لينك الـ ‪ API‬ي‬
‫عملت كدا فعال وبعدين كتبت الـ ‪then‬‬
 ‫رجعل الـ ‪ Entire HTTP Response‬من اللينك انا حطيتها جوا الـ ‪Fetch‬‬‫ي‬ ‫الـ ‪fetch‬‬
‫ر‬
‫بتاعن أنا مش عايز الـ ‪Response‬‬ ‫الل فيها الـ ‪Repos‬‬
‫ي‬ ‫عايز ارجع مجموعة الـ ‪ Objects‬ي‬‫ن‬
‫طيب انا‬
‫الل طبعته يف الـ ‪ console‬دا‬
‫ي‬

‫ن‬ ‫ر‬
‫الل يف اللينك بتاع الـ ‪API‬‬
‫بتاعن كلها ي‬
‫ي‬ ‫انا كدا عملت ‪ Extract‬للبيانات‬

‫ن‬
‫الل بعد كدا‬
‫ي‬ ‫‪then‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫ف‬
‫عملت ‪ return‬للـ ‪ myData‬دي عشان استخدمها ي‬
‫رجعال‬
‫ي‬ ‫الل‬
‫ه هتشتغل ع البيانات ي‬ ‫الل بعد كدا سميتها اسم مختلف عادي جدا كدا كدا ي‬
‫الـ ‪ then‬ي‬
‫رجعال من أول‬ ‫الل‬ ‫ر‬ ‫ر‬
‫ي‬ ‫‪ myData‬ي‬‫ن‬
‫تبف نفس االسم وجواها قللت الـ ‪ length‬بتاع الـ‬
‫من اول ‪ then‬فمش شط ي‬
‫‪ then‬وعملتلها ‪ return‬عشان الـ ‪ then‬التالتة تستلمها وتشتغل عليها وطبعتها يف الـ ‪ Console‬عشان اورهالك‬
‫بس‬
 ‫ه كدا كدا مش هيفرق معاها االسم ‪ ..‬االسم دا ليك انت‬
‫جت الـ ‪ then‬التالته وسميتها باسم مختلف ي‬
‫الل قبلها‬
‫الل جاية من الـ ‪ then‬بتاعت الـ ‪ full‬ي‬
‫الن الـ ‪ then‬التالتة دي كدا كدا هتشتغل ع الـ ‪ data‬ي‬
‫الل فوقها وجبت اسمه‬
‫رجعول من الـ ‪ then‬ي‬
‫ي‬ ‫الل‬
‫مسكتها بقا وخدت اول ‪ item‬بالـ ]‪ index[0‬من الـ ‪ 10‬ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Promise – All, All Settled And Race Lesson #184‬‬

‫معي مختلف عن ن‬
‫التان‬ ‫ن‬ ‫دلوقن عندي ‪ 3 Promises‬كل ‪ promise‬من دول بيعمل ‪Task‬‬ ‫ر‬
‫ي‬ ‫ي‬
‫ن‬
‫الل عندي‬ ‫أول حاجة ‪ ..‬حاجة اسمها ‪ promise.all‬وبتطلب ي‬
‫من ‪ Array‬فيها كل الـ ‪ promises‬ي‬ ‫ن‬
‫عندي‬
‫جعل‬ ‫ر‬
‫الل عندي حصلها ‪ resolve‬او اتحققت بت ي‬ ‫جعل يف االخر ‪ promise‬لو كل الـ ‪ promises‬ي‬
‫بت ي‬
‫الـ ‪ Resolved‬منها كلها‬
‫جعل هيحصله ‪ reject‬هو كمان‬ ‫ر‬
‫الل هت ي‬ ‫يبف الـ ‪ promise‬ي‬
‫ولو فيه ‪ promise‬واحد منه حصله ‪ Reject‬ي‬

‫ن‬
‫الل يف كل‬
‫ه المسجات ي‬
‫الل ي‬
‫الل عندي ي‬
‫رجعل الـ ‪ resolve‬من كل الـ ‪ promises‬ي‬
‫ي‬ ‫فـ زاي ما انت شايف كدا‬
‫‪ promise‬فوق‬

‫‪By: Amr Elsayed‬‬

 ‫طيب لو عندي ‪ promise‬من التالتة دول ‪ Rejected‬زي التالت كدا‬

‫جعل ‪ array‬بالـ ‪ promises‬كلها سواء فيها‬

‫الـ ‪ promise.allSettled‬بقا مختلفة شوية الن هنا هت ي‬
‫ن‬
‫يعن أي الكالم دا ؟!‬
‫‪ resolved values‬او ‪ rejected values‬ي‬
‫جعل ‪ Array‬فيها كل الـ ‪ promises‬سواء فيها‬ ‫ر‬
‫لنعتت ان الـ ‪ promises‬كلها ‪ resolved‬هت ي‬
‫ر‬ ‫دلوقن‬
‫ي‬
‫كلهم ‪ resolved‬او فيهم واحد ‪rejected‬‬
 ‫الل هو ‪ mySecondPromise‬وخليته ‪rejected‬‬ ‫لنفتض نان جيت عند ن‬
‫طيب ر‬
‫تان ‪ promise‬ني‬
‫ي‬ ‫ي‬
‫هيقول انه ‪rejected‬‬ ‫ن‬
‫تان ‪promise‬‬
‫ي‬ ‫الل فوق ولكن يف ي‬
‫جعل نفس الـ ‪ array‬ي‬
‫برضو هت ي‬

‫ماش‬ ‫ومي متحققش لكن ن‬

‫التان الـ ‪ all‬وهو ر‬ ‫ن‬ ‫هنا مختلف بقا النه بتجع كل الـ ‪ promises‬ويقول ن‬
‫مي اتحقق‬
‫ي‬ ‫ي‬ ‫ي‬ ‫ن‬
‫الل‬ ‫ر‬
‫لف كل الـ ‪ promises‬متحققة هتجعهم ولو لقاهم فيهم واحد بس متحققش هو دا ي‬ ‫يف السكة لو ي‬
‫الل عندي‬
‫جعول ويعمل ‪ reject‬لكل الـ ‪ promises‬ي‬
‫ي‬ ‫هت‬

‫يعن فيه سباق باين من اسمه طيب دا بيعمل أي ؟!‬ ‫الـ ‪ promise.race‬ن‬
‫ن‬ ‫ي‬
‫جعهال‬‫الل عندي وأول حاجة بيقابلها يف سكته سواء ‪ resolve‬او ‪ reject‬بت‬ ‫ر‬
‫ي‬ ‫عل كل الـ ‪ promises‬ي‬ ‫بيمش ي‬
‫ي‬ ‫هو‬
‫ه األول من خالل الوقت بتاعها‬‫ي‬

‫ن‬ ‫ر‬ ‫ن‬

‫يبف دا اشع واحد يف التالته ‪ ..‬حالته أي؟‬
‫التان هياخد ثانيه واحد بس ي‬
‫الحظ توقيت كل ‪ promise‬فمثال ي‬
‫جيل اشع وأول واحد بغض النظر طبعا عن حالته سواء كان ‪ resolve‬او ‪ reject‬ولو‬ ‫ر‬
‫الل هي ي‬ ‫يبف هو ي‬
‫‪ Reject‬ي‬
‫هيجيل األول وبشعة سواء كان‬ ‫الل‬ ‫ر‬
‫ي‬ ‫هيبف هو األشع وهو ي‬
‫ي‬ ‫عدلت توقيت اول ‪ promise‬خليته نص ثانيه‬
‫ن‬
‫‪ resolve‬او ‪ reject‬يف الحالة بتاعته‬
Fetch ‫ ودا مثال الـ‬Fetch ‫ ومرة عملته بالـ‬XMLHttpRequest)( ‫نفش مرة بالـ‬
‫ي‬ ‫دا تدريب بسيط كدا عملته مع‬

JS
fetch("http://api.alquran.cloud/v1/ayah/262/ar.alafasy")
.then((resolve) => {
console.log(resolve);
let myData = resolve.json();
console.log(myData);
return myData;
})
.then((ayah) => {
console.log(ayah.data.audio);
let audio = new Audio(ayah.data.audio);
audio.setAttribute("type", "audio/mp3");
audio.setAttribute("controls", "");
let div = document.createElement("div");
let ayahAudio = audio;
div.appendChild(ayahAudio);
document.body.appendChild(div);
})
.catch((rej) => console.log(Error`${rej}: Your API Is Wrong`));

CSS
Audio {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
audio::-webkit-media-controls-panel {
background-color: cornflowerblue;
}
audio::-webkit-media-controls-play-button {
background-color: lightblue;
border-radius: 50%;
}
audio::-webkit-media-controls-current-time-display {
color: #333;
}
audio::-webkit-media-controls-time-remaining-display {
color: #333;
}
audio::-webkit-media-controls-timeline {
border-radius: 40px;
background-color: lightblue;
}
 audio::-webkit-media-controls-volume-slider{
background-color: lightblue;
border-radius: 50px;
padding-left: 10px;
padding-right: 10px;
}
audio::-webkit-media-controls-mute-button{
background-color: lightblue;
border-radius: 50%;
}

‫الل زيادة‬
‫الل اتعلمناه لكن الجزء دا هو ي‬
‫الكرش نفسها وطبقت عليه كل ي‬
‫ي‬ ‫ فيه اية‬API ‫ لـ‬fetch ‫انا عملت‬
let audio = new Audio(ayah.data.audio);
audio.setAttribute("type", "audio/mp3");
audio.setAttribute("controls", "");
let div = document.createElement("div");
let ayahAudio = audio;
div.appendChild(ayahAudio);
document.body.appendChild(div);

‫ نفسه‬api ‫ بتاع الـ الية الكريمة من الـ‬audio ‫ وجواه الـ‬audio object ‫ حزنت فيه الـ‬audio ‫عملت متغت اسمه‬

‫ن‬
attribute ‫ يشتغل او يظهر يف الصفحة يكون ليه‬audio ‫ الزم عشان الـ‬Audio ‫اما الجزء الخاص بتشغيل الـ‬
Audio ‫ بتاع الـ‬type ‫ وكمان يتكتب الـ‬controls ‫اسمه‬
‫ن‬ ‫ر‬
‫ ليه الحاجات المعروفة دي‬Append ‫ يف الـصفحة وعملت‬div ‫الباف سهل بقا عملت‬ ‫بعد كدا ي‬

‫ر‬ ‫ن‬ ‫ر‬

Audio ‫ او‬text ‫ فيه القرءان كله بالكامل سواء‬API ‫هتالف‬
‫ي‬ ‫وف اللينك دا‬
‫ابف جرب ي‬
‫ي‬
‫لينك الفيديو فيه الكود دا وهو شغال‬

‫ال تنسونا من دعواتكم‬

Never Forget That (Always Search)
By: Amr Elsayed
 ‫ن‬
‫تحفتية️♥‬ ‫️♥عبارات‬

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

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫ن‬
‫العالمي‬ ‫كثتا مبارًكا فيه كما ن‬
‫ينبع لجالل وجهك ولعظيم سلطانك يا رب‬
‫ً‬
‫حمدا ً‬
‫طيبا ً‬ ‫اللهم لك الحمد‬
‫ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Async And Trainings Lesson #185‬‬

‫ر‬ ‫ن‬
‫جعل )(‪ new Promise‬بيقبل من ‪ res‬و الـ ‪rej‬‬
‫يف المثال دا عندي ‪ function‬اسمها ‪ getData‬بت ي‬
‫وعندي ‪ array‬اسمها ‪users‬‬
‫يعن نف ‪ users‬ر‬
‫يبف دا الـ ‪ true‬ر‬
‫ويبف دا هو الـ ‪res‬‬
‫ي‬ ‫ي‬
‫ن‬
‫اكت من ‪ 0‬ي ي‬ ‫عملت رشط ‪ If‬بقول فيه لو الـ ‪ array.length‬دا ر‬
‫الل هو فيه المسج "‪"User Found‬‬ ‫رجعل من الـ ‪ promise‬دا الـ ‪ res‬ي‬
‫ي‬ ‫بتاع الـ ‪ promise‬فقولتله‬
‫يبف دا الـ ‪ false‬ر‬
‫ويبف دا هو الـ ‪ rej‬بتاع الـ ‪ promise‬فقولتله‬ ‫ر‬ ‫ن‬
‫ي‬ ‫يعن مفيش وال ‪ user‬ي‬ ‫بعد كدا عندي الـ ‪ else‬ي‬
‫الل هو فيه المسج "‪"User Not Found‬‬ ‫رجعل من الـ ‪ promise‬دا الـ ‪ rej‬ي‬
‫ي‬

‫الل اسمها ‪ getData‬دي‬ ‫عل الـ ‪ function‬ي‬

‫بعد كدا استخدمت الـ ‪ then‬ي‬
‫ن‬
‫عندي فيها الـ ‪ resolvedValue‬بتحل محل الـ ‪ res‬يف الـ ‪ promise‬لو الوعد اتحقق فلو الوعد اتحقق‬
‫ن‬ ‫الشط ‪ true‬ر‬
‫يبف ر‬ ‫ر‬
‫يبف المسج بتاعت "‪ "User Found‬هيعوض مكان الـ ‪ resolvedValue‬يف الـ ‪then‬‬ ‫ي‬ ‫ي‬
‫ن‬
‫ويبدا يطبع يف الـ ‪Console‬‬
‫ن‬
‫و عندي كمان فيها الـ ‪ rejectedValue‬بتحل محل الـ ‪ rej‬يف الـ ‪ promise‬لو الوعد متحققش فلو الوعد‬
‫يبف المسج بتاعت "‪ "User Not Found‬هتعوض مكان‬ ‫الشط راح للـ ‪ else‬ر‬ ‫يبف ر‬‫متحققش ر‬
‫ن‬ ‫ي‬ ‫ن‬ ‫ي‬
‫الـ ‪ resolvedValue‬يف الـ ‪ then‬ويبدا يطبع يف الـ ‪Console‬‬

‫‪By: Amr Elsayed‬‬

 ‫لو فيه ‪users‬‬

‫لو مفيش ‪Users‬‬

‫تيح نشوف طريقة تانيه ابسط شوية من دي واسهل ؟!‬

‫طيب دي طريقة ر ي‬

‫ر‬ ‫ن‬ ‫ن‬

‫بتاعن حذفت الـ )(‪new Promise‬‬
‫ي‬ ‫‪Function‬‬ ‫ـ‬ ‫ل‬‫ا‬ ‫جوا‬ ‫دا‬ ‫الكود‬ ‫ف‬
‫والل فات انا ي‬
‫الحظ فيه فرق بي الكود دا ي‬
‫ن‬ ‫ر ن‬ ‫ن‬
‫الل كانت يف‬
‫بتاعن يف حالة الـ ‪ true‬انا عملت ‪ return‬للـ ‪ promise.resolve‬فيه نفس المسج ي‬
‫ي‬ ‫بس يف الـ ‪if‬‬
‫ه "‪"Users Found‬‬‫الل ي‬ ‫الل فات ي‬ ‫الكود ي‬
‫ن‬ ‫ن‬ ‫ن‬
‫الل‬
‫الل كانت يف الكود ي‬
‫وف الـ ‪ else‬يف حالة الـ ‪ false‬عملت ‪ return‬للـ ‪ promise.reject‬فيه نفس المسج ي‬ ‫ي‬
‫ه "‪"Users Not Found‬‬ ‫الل ي‬ ‫فات ي‬
‫الل فوق‬ ‫ر‬
‫ه نفس النتيجة بتاعت الـ ‪ code‬األول ي‬ ‫ه ي‬ ‫هتبف ي‬ ‫ي‬

‫‪By: Amr Elsayed‬‬

 ‫وتعال نشوف طريقة تالته ابسط واسهل بمراحل وبتصنف‬ ‫الل فاتو‬ ‫ن‬
‫ي‬ ‫طيب ما تسيبك من الطريقتي ي‬
‫ر‬
‫يبف انا بعمل‬ ‫ن‬
‫يعن عندي ‪ keyword‬اسمها ‪ async‬بمجرد ما احطها قبل الـ ‪ function‬ي‬ ‫كمان انها ‪ Clean‬ي‬
‫نفس الـ ‪ behavior‬بتاع الـ ‪ promise‬بالظبط‬

‫ر‬
‫بتاعن بس احط كلمة ‪ async‬والـ ‪ keyword‬دي بتعمل عمل الـ ‪ promise‬بالظبط‬ ‫هاج قبل الـ ‪Function‬‬
‫ي‬ ‫ر ي‬
‫الل خدناها قبل كدا‬
‫بص بقا ع الكود األخت دا هتالقيه مجرد ‪ function‬عادية زي ي‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫‪Await And Trainings Lesson #186‬‬

‫الـ ‪ Await‬بتشتغل بس مع الـ ‪Async function‬‬

‫بتخل لغة الجافاسكريبت تنتظر نتيجة الـ ‪ promise‬قبل ما أي حاجة موجودة تانية تحصل‬
‫ي‬ ‫الـ ‪Await‬‬

‫انا عندي ‪ promise‬جواه ‪ setTimeout‬بتجع مسج "‪"Iam The Good Promise‬‬

‫عملت ‪ function‬تانية اسمها )(‪ readData‬جواها‬

‫)”‪console.log(“Before Promise‬‬
‫وبعدين الـ‪ then‬بتاعت الـ ‪promise‬‬
‫بعدين )”‪console.log(“After Promise‬‬

‫الل هيطبعو األول بعدين الـ ‪ setTimeout‬بتاعت‬ ‫ن‬ ‫ر‬

‫ومنطف جدا االتني ‪ console‬هما ي‬
‫ي‬ ‫بديه‬
‫ي‬ ‫فبشكل‬
‫ه اخر حاجة‬ ‫ر‬
‫هتبف ي‬
‫ي‬ ‫الـ ‪promise‬‬
‫هيخل لغة الجافاسكريبت تنتظر الـ ‪ response‬بتاع‬
‫ي‬ ‫بتاع دا‬
‫ي‬ ‫لكن مع وجود الـ ‪ await‬بقا مع الـ ‪promise‬‬
‫الـ ‪ promise‬األول‬

‫جال الرد بتاع الـ ‪ promise‬األول‬

‫الـ )”‪ console.log(“After Promise‬مشتغلتش غت بعد ما ي‬
‫ن‬ ‫ن‬
‫كل دا يف حالة الـ ‪ resolve‬و يف حالة الـ ‪ reject‬برضو نفس الفكرة وهللا وهتعمل ‪ Catch‬للـ ‪Error‬‬
 ‫‪Try, Catch, Finally With Fetch Lesson #187‬‬

‫الـ )”‪ console.log(“Before Promise‬حاجة مش مرتبطة باي حاجة فهتتبطع كدا كدا األول‬

‫ويحبل الـ ‪ resolved data‬وال ال ؟!‬

‫ي‬ ‫بتاع هيتحقق‬
‫ي‬ ‫بعد كدا عندي الـ ‪ try‬انا بقوله انا هجرب هل الـ ‪promise‬‬

‫يح دور الـ ‪ catch‬لو حصل ‪reject‬‬ ‫طيب لو فيه مشكلة ؟! ر‬

‫يبف ر ي‬
‫ي‬
console.log(“After Promise”) ‫الل ممكن احط فيها الـ‬
‫ ي‬finally ‫بعد كدا الـ‬

await ‫ و الـ‬async ‫ مع الـ‬fetch ‫تدريب عل الـ‬

http response ‫ الـ‬repos ‫ بتاعت الـ‬fetch ‫رجعتل من الـ‬

‫ي‬ await ‫الـ‬

By: Amr Elsayed

‫الل فيه لو هو ‪resolved‬‬
‫حعل الـ ‪ promise‬وحالته وكمان الداتا ي‬
‫بتاع هت ي‬
‫ي‬ ‫ولما اكتب الـ ‪ json‬مع الـ ‪fetch‬‬

‫ولو كتبت قبلها ‪ await‬كمان‬

‫هرجع الـ ‪ Data‬ر‬

‫مباشة انا كدا استغنيت عن الـ ‪ then‬تمام‬

‫المتة نف استخدام الـ ‪ async‬و الـ ‪ await‬ان الموضوع أحسن و ‪ Clean‬ر‬

‫اكت من استخدامك للطريقة‬ ‫ن‬ ‫ودي‬
‫ي‬
‫العادية واستخدام الـ ‪then‬‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫ل️♥‬
‫ي‬ ‫️♥راقت‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ن‬
‫الظالمي‬ ‫ن‬
‫إن كنت من‬ ‫ن‬
‫إن أستغفرك واتوب إليك‪ ،‬ال إله اال انت سبحانك ي‬‫اللهم ي‬
‫سبحان هللا وبحمده سبحان هللا العظيم‬
‫ر‬ ‫ر‬
‫شء قدير‬‫ال إله اال هللا وحده ال شيك له ‪ ..‬له الملك و له الحمد وهو عل كل ي‬
‫‪By: Amr Elsayed‬‬
 ‫‪The End And Advices Lesson #188‬‬

‫ن‬ ‫ن‬
‫يغط كل حاجة‬
‫ي‬ ‫هيقدر‬ ‫العالم‬ ‫ف‬
‫لنفش قبلكم ان مفيش ‪ Course‬ي‬
‫ي‬ ‫متفقي وانا بقول الكالم دا‬ ‫طبعا خلينا‬
‫ن‬
‫موجودة يف أي لغة برمجة‬

‫المطلوب‪:‬‬
‫ن‬ ‫ن‬ ‫ن‬
‫‪ -‬يف امثلة و حاجات هيتم التطبيق عليها يف ‪ playlist‬خاصة بيها لينك الـ ‪ Playlist‬يف الـ ‪ playlist‬دي هيتم‬
‫الل بتظهر‬
‫الل اتعلمناها ومخدناش عليها أمثلة عملية قوية وكمان الحاجات الجديدة ي‬ ‫نالتطبيق ع الحاجات ي‬
‫يف اللغة هتكون موجودة هنا‬

‫مح فيه مواقع زي‬

‫الت ر ي‬
‫‪ -‬حل مسائل كتت جدا جدا ‪ Problem Solving‬عشان تطور المنطق ر‬
‫)‪(1- Edabit)------ (2- Codewars) ------ (3- Leetcode) ------ (4- JSchallenger‬‬

‫ر‬
‫حن لو هتبحث‬
‫‪ -‬نبعد كل أسبوع كان فيه قائمة فيها شوية حاجات تبحث عنها يفضل انك فعال تبحث عنها ي‬
‫ن‬
‫مكتوبي تحت كل أسبوع‬ ‫الل كانو‬ ‫ن‬
‫يف كل يوم عن اسمي تالته من ي‬

‫‪ -‬قراءة الكتب المتقدمة هتفيدك وتساعدك تكمل معلوماتك‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫الحال!!‬ ‫فهم‬ ‫ن‬
‫خلين الخصلك الدنيا فيهم شيعا كدا حسب‬ ‫ن‬
‫أسبوعي دول‬ ‫بص بعد ما خلصنا اخر‬
‫ي‬ ‫ي‬ ‫ي‬
‫والل من خالله كنت بعمل ‪ AJAX Call‬عشان اتصل بـ ‪ Data‬من مكان‬ ‫ي‬ ‫أوال انا كان عندي ‪XMLHttpRequest‬‬
‫عل حدوث االتصال دا بشكل سليم ان يكون الـ ‪ status‬بـ ‪200‬‬ ‫ن‬
‫معي واتعامل معاها كنت معتمد ي‬
‫ورجعل بيانات‬
‫ي‬ ‫والـ ‪ readyStage‬بـ ‪ 4‬كنت بحط رشط اتاكد من خالله ان االتصال دا سليم‬

‫ترجعل بيانات‬ ‫يعن وعد لو الوعد اتحقق‬ ‫ن‬

‫ي‬ ‫بعدين تطور الموضوع شوية وبقا فيه حاجة اسمها ‪ Promise‬ي‬
‫يرجعل ‪ Error‬بقا‬ ‫ترجعل او‬ ‫يبف مفيش حاجة‬ ‫ر‬
‫ي‬ ‫ي‬ ‫لو متحققش ي‬
‫بمعن ن‬
‫تان ‪fulfilled‬‬ ‫ن‬ ‫بعت بقا عن رجوع البيانات دي بحاجة اسمها ‪ Resolved Value‬او‬
‫ي ي‬ ‫كنت ر‬
‫بعت عن عدم رجوع البيانات او فشل الوعد بحاجة اسمها ‪ Rejected Value‬او ‪Rejected‬‬ ‫وكنت ر‬
‫من ‪ Callback function 2‬بسميهم بأي أسم احبه‬ ‫ن‬
‫طيب الـ ‪ promise‬دا عشان يتعمل بيقبل ي‬
‫اول ‪ Callback function‬دي بخصصها لحالة الـ ‪ Resolve‬او الـ ‪fulfilled‬‬
‫تان ‪ Callback function‬بخصصها لحالة الـ ‪Reject‬‬ ‫ن‬
‫ي‬
‫جعل دي لو الوعد اتحقق وبرضو اهندل الـ ‪Error‬‬ ‫ر‬ ‫ر‬
‫الل هت ي‬ ‫دلوقن انا بقا عايز اهندل الداتا ي‬ ‫ي‬ ‫طيب حلو الكالم دا‬
‫الل هيحصل لو الوعد متحققش‬ ‫ي‬
‫من برضو ‪ Callback functions 2‬واجباري اول ‪ Function‬دي‬ ‫قال نف حاجة اسمها ‪ then‬بتقبل ن‬
‫ي‬ ‫ي‬
‫يعن ببساطة كدا الوعد اتحقق ؟!‬ ‫بتحل محل الـ ‪ resolved function‬الل موجودة نف الـ ‪ promise‬ن‬
‫ي‬ ‫ي‬ ‫ي‬
‫يبف الحالة دي تروح للـ ‪ then‬مكان أول ‪callback function‬‬ ‫ر‬ ‫ر‬
‫يبف الـ ‪ promise‬حالته ‪ fulfilled‬ي‬ ‫اتحقق ي‬
‫وتعرض البيانات‬
‫تان‬‫يبف الحالة دي تروح للـ ‪ then‬مكان ن‬ ‫ر‬ ‫ر‬
‫ي‬ ‫يبف الـ ‪ Promise‬حالته ‪ Rejected‬ي‬ ‫طيب الوعد بقا متحققش ي‬
‫وتقول انه فيه ‪ Error‬موجود الوعد متحققش‬ ‫ي‬ ‫‪callback function‬‬
‫الحالتي سواء ‪ resolved‬او ‪ Rejected‬بعدها قالولك‬ ‫ن‬ ‫الـ ‪ then‬دا وهللا كان اصيل وابن ناس كان بيهندل‬
‫ماش‬‫بص نف حاجة اسمها ‪ Catch‬افضل نف انها تهندل الـ ‪ rejected‬دا اعتمد عليها قولنا ر‬
‫ي‬ ‫ي‬ ‫ي‬
‫ن‬
‫والل هو يف حد ذاته بتجع ‪ promise‬برضو ولكن الـ ‪ Syntax‬بتاع الطف واخف‬
‫ي‬ ‫بعد كدا انتقلنا للـ ‪fetch‬‬
‫ومفيش بقا اول ‪ Callback functions 2‬دول خالص وال حوار الـ ‪ resolved‬دا وال الـ ‪rejected‬‬
‫خل بالك هو بيتعامل مع برضو مع الـ ‪ then‬عشان يهندل‬
‫انت عندك الـ ‪ fetch‬بتجع ‪ promise‬كدا كدا بس ي‬
‫الل حصل وكدا كدا الـ ‪ catch‬موجودة معانا برضو عشان تهندل الـ ‪Error‬‬
‫الل راجعه من الـ ‪ fetch‬ي‬
‫البيانات ي‬
‫بعد كدا انتقلنا للـ ‪ async‬والـ ‪ await‬وقالك ياعم دي حاجة كدا ‪ Cleaner‬ورايقة ع االخر ومفهاش وجع الدماغ‬
‫بتاع الـ ‪ then‬و الـ ‪ promise‬و الكالم دا ‪ ..‬انت هتحط ‪ async‬قبل الـ ‪ function‬وتستخدم الـ ‪ await‬معاها‬
‫ه‬ ‫ن‬
‫تستن لحد ما ي‬
‫ي‬ ‫بتخل أي حاجة جايه بعدها‬
‫ي‬ ‫طيب أي فايدة الـ ‪ await‬الـ ‪ await‬بتعمل عمل الـ ‪ then‬ولكنها‬
‫بتاع وهو بيتحقق وبتجع بيانات أي حاجة جاية بعده‬ ‫يعن الـوعد‬‫ه تخلص وترجعل بالبيانات الل انا عايزها ن‬
‫ن‬ ‫ي‬ ‫ي‬ ‫ي‬ ‫ي‬ ‫ي‬
‫ن‬
‫يعن محاولة نجيب فيها البيانات‬ ‫ن‬
‫تستن لحد ما البيانات دي ترجع طبعا انت بتحط الـ ‪ await‬دا يف ‪ try‬بتقوله ي‬ ‫ي‬
‫ن‬
‫الل هينهدل الـ ‪ Error‬لو الـ ‪ try‬فشل يف الرجوع ببيانات‬‫وبعد الـ ‪ try‬بتحط الـ ‪ catch‬ي‬

‫‪By: Amr Elsayed‬‬

 Assignments From [179] = > [188]
]188[ >= ]179[ :‫لينك التكليفات‬
01 :‫التكليف‬
data.json
[
{
"userId": 10,
"title": "Article Title Number 1",
"description": "Article Description Number 1"
},
{
"userId": 5,
"title": "Article Title Number 2",
"description": "Article Description Number 2"
},
{
"userId": 5,
"title": "Article Title Number 3",
"description": "Article Description Number 3"
},
{
"userId": 5,
"title": "Article Title Number 4",
"description": "Article Description Number 4"
},
{
"userId": 5,
"title": "Article Title Number 5",
"description": "Article Description Number 5"
},
{
"userId": 5,
"title": "Article Title Number 6",
"description": "Article Description Number 6"
},
{
"userId": 25,
"title": "Article Title Number 7",
"description": "Article Description Number 7"
},
{
"userId": 25,
"title": "Article Title Number 8",
"description": "Article Description Number 8"
},
{
"userId": 15,
"title": "Article Title Number 9",
"description": "Article Description Number 9"
},
 {
"userId": 15,
"title": "Article Title Number 10",
"description": "Article Description Number 10"
}
]

main.js
function getData(fileJson) {
return new Promise((resolve, reject) => {
let myRequest = new XMLHttpRequest();
console.log(myRequest);

myRequest.onload = function () {
if (this.readyState === 4 && this.status === 200) {
resolve(JSON.parse(this.responseText));
} else {
reject(Error("Your Json File Is Wrong"));
}
};
myRequest.open("GET", fileJson);
myRequest.send();
});
}
getData("data.json")
.then((data) => {
data.length = 5;
console.log(data);
return data;
})
.then((showData) => {
showData.forEach((data) => {
let containerDiv = document.createElement("div");

let title = document.createElement("h3");

let titleText = document.createTextNode(data.title);
title.appendChild(titleText);

let description = document.createElement("p");

let descriptionText = document.createTextNode(data.description);
description.appendChild(descriptionText);

containerDiv.appendChild(title);
containerDiv.appendChild(description);
document.body.appendChild(containerDiv);
});
});
 02 :‫التكليف‬

main.js
async function fetchData() {
try {
let myResponse = await fetch("data.json");
console.log(myResponse);
let allData = await myResponse.json();
allData.length = 5;

for (let data of allData) {

let containerDiv = document.createElement("div");

let title = document.createElement("h3");

let titleText = document.createTextNode(data.title);
title.appendChild(titleText);

let description = document.createElement("p");

let descriptionText = document.createTextNode(data.description);
description.appendChild(descriptionText);

containerDiv.appendChild(title);
containerDiv.appendChild(description);
document.body.appendChild(containerDiv);
}
} catch (err) {
console.log(err);
}
}
fetchData();

‫حل اخر‬
fetch("data.json")
.then((result) => {
return result.json();
})
.then((result) => {
result.length = 5;
console.log(result);
return result;
})
.then((result) => {
for (let i = 0; i < result.length; i++) {
let containerDiv = document.createElement("div");

let title = document.createElement("h3");

let titleText = document.createTextNode(result[i].title);
title.appendChild(titleText);
 let description = document.createElement("p");
let descriptionText = document.createTextNode(result[i].description);
description.appendChild(descriptionText);

containerDiv.appendChild(title);
containerDiv.appendChild(description);
document.body.appendChild(containerDiv);
}
})
.catch((rej) => console.log(rej));

ً ‫ن‬
‫العالمي حمدا طيبا كثتا مباركا فيه‬ ‫الحمد هلل رب‬
ُ
.‫أستغفرك واتوب اليك‬ ‫سبحانك اللهم وبحمدك أشهد ان ال إله اال انت‬

‫ال تنسونا من دعواتكم‬

Never Forget That (Always Search)
By: Amr Elsayed
 ‫يل️♥‬ ‫️♥راقت‬

‫عل خت الزم الزم تتطبق من نار ^^‬

‫أساش ومهم جدا فلو خلصت الـ ‪ Course‬ي‬
‫ي‬ ‫العمل‬
‫ي‬ ‫التطبيق‬

‫اذكر هللا ️♥‬

‫الزموا ذكر هللا ففيه العون عل متاعب الحياة ️♥‬
‫ْ َّ َ ْ َ نُّ ْ ُ ُ ُ‬ ‫َ‬
‫اَّلل تطم ِي القلوب‬
‫أال ِب ِذك ِر ِ‬
‫ن‬
‫العالمي‬ ‫ينبع لجالل وجهك ولعظيم سلطانك يا رب‬‫كثتا مبارًكا فيه كما ن‬ ‫طيبا ً‬ ‫حمدا ً‬ ‫ً‬
‫اللهم لك الحمد‬
‫ي‬
‫ا‬ ‫ا‬ ‫ورزقا ً‬‫ً‬ ‫علما ً‬ ‫اللهم نان أسألك ً‬
‫طيبا وعمًل متقبًل‬ ‫نافعا‬ ‫ي‬
‫َ ا ُ َ َّ ا‬ ‫ً‬ ‫ْ‬ ‫ُ‬ ‫َ‬
‫هم نّإن أسألك ع ً‬
‫َ‬ ‫َّ‬
‫طي ًبا‪ ،‬وعمًل متقبًل‪.‬‬ ‫نافعا‪ ،‬ورزقا ّ‬
‫ِ‬
‫لما ً‬
‫ِ‬ ‫ي‬
‫الل َّ‬
‫َ َ َ‬ ‫ْ‬ ‫َ َ ُ‬ ‫ْ‬ ‫ُ‬ ‫َ‬ ‫َ‬ ‫ْ‬ ‫َ‬ ‫َّ ُ َّ َ نّ َ‬
‫اللهم أ ِع ين عل ِذك ِرك‪ ،‬وشك ِرك‪ ،‬وحس ِن ِعباد ِتك‪.‬‬
‫صل وسلم وزد وبارك عل نبينا محمد ﷺ‬ ‫اللهم ّ‬

‫ال تنسونا من دعواتكم‬

‫)‪Never Forget That (Always Search‬‬
‫‪By: Amr Elsayed‬‬
 ‫فقرة إضافية حبيت اضيفها‬
‫ن‬
‫ استمتعت بيهم بجد‬.. ‫ كلها‬Playlist ‫جائزة أفضل دروس يف الـ‬
#052 – Loop For Advanced Examples ==> Week 7
#066 – Arrow Function Syntax ==> Week 9
#089 – Create and Append Elements ==> Week 12
#096 – CSS Styling And Stylesheet ==> Week 13
#100 – AddEventListener ==> Week 13

#112 – Local Storage Color App Practice ==> Week 15

#134 => #146 Regular Expression All Lessons ==> Week 18*
#153 – Class Inheritance ==> Week 19
#154 – Class Encapsulation ==> Week 19
#167 – Module Import And Export ==> Week 20
#168 – Named vs Default Export And Import All ==> Week 20

#171 – What Is API ==> Week 21

#173 – Asynchronous vs Synchronous Programming ==> Week 21
#174 – Call Stack And Web API ==> Week 21
#175 – Event Loop And Callback Queue ==> Week 21

#183 – Fetch API

#185 – Async And Trainings
#186 – Await And Trainings
#187 – Try, Catch, Finally With Fetch

♥️ ‫جائزة أفضل أسبوع وامتع أسبوع عل االطالق راحت لألربــع أسابيع دول‬
‫ن‬
DOM ‫أسبوعي الـ‬ 13 ‫ و‬12 ‫ األسبوع‬-
Regular Expression ‫ أسبوع الـ‬18 ‫ أسبوع‬-
Fetch ‫ و الـ‬JSON ‫ والـ‬API ‫ الـ‬Course ‫ أسابيع ختام الـ‬22 ‫ و‬21 ‫ أسبوع‬-

‫وأكت دروس مستمتعتش بيها اوي اطالقا‬ ‫اكت أسبوع حاسس نان مفهمتوش أوي ر‬ ‫جائزة ر‬
‫ي‬
‫ كان ممتع بس حسيته معقد شوية‬112 ‫ عدا درس‬Local Storage ‫ أسبوع الـ‬15 ‫ أسبوع‬-
‫ن‬
Weak Map ‫ و الـ‬Set Data ‫الل هو أسبوع الـ‬
‫ي‬ 127 ‫لحد‬ 123 ‫اول‬ ‫من‬ 17 ‫أسبوع‬ ‫ دروس ي‬5 ‫ أول‬-
‫ف‬

By: Amr Elsayed

 ‫الخاتمة وشويه فضفضة ️♥‬
‫ن‬
‫وتعال أتوجه بجزيل الشكر واالمتنان والعرفان بالجميل للبشمهندس أسامة الزيرو‬
‫ي‬ ‫❖ يف البداية وبفضل هللا سبحانه‬
‫الل بفضل هللا علينا ثم مجهوده مكنش الـ ‪ Text‬دا تم ربنا يجازيك كل خت ويكرمك ويوسع رزقك ويمال حياتك‬‫ي‬
‫خت وبركه وسعادة ويرزقك الفردوس األعل انت وكل احبابك‬

‫لينك القناة‬
‫لينك البالي ليست الخاصة بالـ ‪JavaScript‬‬
‫خطة الدراسة ‪JavaScript Bootcamp 2021‬‬
‫جميع أكود دروس الـ ‪ JavaScript‬موجودة هنا‬
‫جميع تكليفات الـ ‪ JavaScript‬موجودة هنا‬
‫❖ استكماال للمشوار وبعد تلخيص الـ ‪ HTML‬و الـ ‪ CSS‬و الـ ‪ SASS‬والجزء األول من الـ ‪ JS‬وفقنا هللا لتلخيص الجزء ن‬
‫الثان‬
‫ي‬
‫ً‬
‫خالصا‬ ‫من الـ ‪ .. JS‬ارجوا من هللا عز وجل ان يكون ذا نفع للجميع ‪ ..‬و ارجوا من هللا عز وجل ان يجعل هذا العمل‬
‫متان حسناتنا جميعا‬ ‫لوجهه الكريم وان يجعله نف ن‬
‫ي‬
‫ن‬ ‫ن‬
‫واتمن لو لقيت أي خطأ سواء‬
‫ي‬ ‫❖ بعتذر عن وجود أي أخطاء امالئية او أخطاء يف أي كود فالكمال هلل وحده‬
‫ن‬
‫وتبلغن بيه‬ ‫نف ر‬
‫الشح او حل التكليفات تواصل معايا‬
‫ي‬ ‫ي‬
‫ن‬ ‫ن‬
‫تان تم تكملة وتلخيص الدروس من اول ‪ 102‬ي‬
‫ال ‪ 188‬بالتكليفات‬ ‫❖ يف الجزء ال ي‬
‫ن‬
‫❖ خصصت يف الملخص دا تلت أجزاء ‪ ..‬الجزء األول لذكر هللا عشان متخليش حاجه ابدا تشغلك عن ذكر هللا‬
‫ن‬
‫التحفتية و جمل‬ ‫جزئي العبارات‬‫ن‬ ‫الل قادر ينجيك ويفتحلك ابواب الرزق ويرزقك ويسهل عليك الفهم و‬ ‫ي‬
‫ن‬
‫رئيش يف تكبت حجم الملخص‪ ،‬ولكن وهللا حبيت انهم يكشوا ملل‬ ‫ي‬ ‫وعبارات راقت يل اه هما ر‬
‫يعتتوا سبب‬
‫المذاكرة والقراءة وربما يكون فيهم نفع او الهام لحد‬
‫ن‬ ‫ن‬
‫من وقت‬ ‫❖ مش عايزك تتضايق الي سبب لو مفهمتش أي تكليف او مقدرتش تحله عادي يف تكليفات كتت خدت ي‬
‫تعت عليك‬ ‫كبت جدا وكانت أسهل من تكليفات تانية أصعب بكتت مخدتش معايا غت دقايق واتحلت ‪ ..‬لذلك لو ر‬
‫فهم حاجة حاول مرة و ن‬
‫اتني وتالته‬
‫ن‬
‫تفتكرن بدعوة‬ ‫❖ ألي حد هيوصله الكالم دا مش طالب منك غت طلب واحد وامانة عليك الزم تنفذه و هو إنك‬
‫ي‬
‫طيبة لوجه هللا‬
‫ر‬
‫الل هنتعلمه مع كام ‪ Technology‬تانيه باذن هللا‬ ‫❖ ان شاء هللا لو لينا عمر ي‬
‫نبف نعمل ملخص للـ ‪ Framework‬ي‬
‫واصت ومتستعجلش النتايج‬‫ر‬ ‫ر‬
‫نصيحن األختة ليك إنك تتطبق كتت جدا وتشوف حاجات فيها ‪ Logic‬تقيل‬ ‫❖‬
‫ي‬
‫❖ ‪Never Forget That Always Search‬‬
‫‪LinkedIn Account‬‬ ‫‪GitHub Account‬‬ ‫‪Codepen Account‬‬

‫‪Twitter Account‬‬ ‫‪Mail Me‬‬ ‫‪Facebook Account‬‬

‫ن‬
‫افتكرون بدعوة طيبة لوجه هللا واشوفكم ان شاء هللا مع حاجه أفضل وأفضل مستقبال‬
‫ي‬
‫شكرا لكم ️♥‬
‫‪By: Amr Elsayed‬‬