45% خصم بمناسبة اليوم الوطني السعودي 🇸🇦94 على جميع الدورات والمسارات,

استخدم كوبون: SA94

دورة البرمجة باستخدام جافا سكريبت Javascript

جافاسكربت من اللغات القوية في مجال تطوير الويب وتعمل بشكل أساسي على متصفحات الإنترنت كما أنها أصبحت تعمل على تطبيقات الهواتف الذكية من خلال إطارات العمل الشهيرة مثل Ionic - React Native - Vue Native

تعرف على الدورة وعلى لغة Javascript

ماذا سنتعلم في هذه الدورة؟

سنقوم بتنفيذ أكثر من مشروع

التعامل مع المتغيرات Variables

التعرف والتعامل مع أنواع البيانات Data Types

الأحداث Events

حلقات التكرار Loop

المنطق البرمجي والشروط Logic

الدوال البرمجية Functions

مصفوفات البيانات Arrays

الكائنات Objects

التعرف على نسخ جافاسكربت ES5, ES6

المجالات البرمجية Scopes

التعديل على محتوى الصفحات DOM

المؤثرات البصرية Animation

البرمجة الشيئية OOP

التعامل مع AJAX

التعامل مع JSON

كيفية التعامل مع الكعكات cookies

التخاطب مع المتصفح BOM

الفحص وحل المشاكل البرمجية Debugging

التعامل مع الأخطاء البرمجية Error handling

جودة وتنسيق البرمجة Code Style & Quality

التعامل مع Promises async / await

الاتصالات الشبكية Network Requests

تخزين البيانات localStorage / indexedDb

وصف الدورة

لغة جافاسكربت Javascript هي لغة برمجة نصية تستخدم بشكل أساسي في متصفحات الإنترنت ويمكن استخدامها في مجالات أخرى مثل بناء تطبيقات الهواتف الذكية.

لماذا تتعلم جافاسكربت؟

لغة لا بد من وجودها في مواقع الإنترنت الحديثة، لا يكاد موقع ويب مشهور لا يستخدمها
لغة لا تحتاج لمتطلبات تشغيل يمكنك البدء باستخدام محرر نصوص و متصفح إنترنت
باستخدامها يمكن بناء مواقع إنترنت تفاعلية ذات أداء و تجربة مستخدم أفضل
مجال العمل الوظيفي بها واسع و مطلوبة في سوق العمل
تعتبر من أشهر لغات البرمجة للواجهات.

في ماذا تستخدم Javascript؟

تطوير صفحات الويب.
تطوير تطبيقات الويب.
تطوير الألعاب.
تطوير تطبيقات الهواتف الذكية.
تطوير تطبيقات سطح المكتب عبر تقنيات.

أشهر المكتبات و إطارات العمل في جافا سكربت:

مكتبة جيكويري JQuery.
مكتبة فيو جي اس Vue.Js.
مكتبة Chart.Js.
مكتبة TensorFlow.Js.
إطار عمل أنجولار Angular.Js.
إطار عمل رياكت React.
إطار عمل نود جي اس Node.Js.
إطار عمل باك بون جي اس Backbone.Js.

المتطلبات

معرفة مسبقة بلغة HTML

هذه الدورة تتوفر في مسارات

مسار Front-End Development

ترتيبها ضمن المسار : 3

مسار وخطة تعليمية لتطوير واجهات المواقع باحترافية Front-end Development

مسار Full Stack Development

ترتيبها ضمن المسار : 2

مسار وخطة تعليمية مخصصة لاكتساب مهارات التطوير المتكاملة Full Stack Development

منهج هذه الدورة

المدة	الدروس (275)
المقدمة - سنتعرف في هذا القسم على هذه الدورة وماهي لغة جافاسكربت ومالأدوات التي سنحتاجها للعمل ومعلومات هامة للتعلم الذاتي والحصول على المساعدة
10:30	تعرف على الدورة وعلى لغة Javascript سنتعرف في هذا الدرس على هذه الدورة وعلى لغة جافاسكربت من ناحية تاريخها واستخدامتها والقيود الموجودة بها وفوائدها
02:23	اختيار محرر برمجي جيد سنتعرف على IDE والتي يقصد بها Integrated Development Environment وسنعرف من أين نحصل عليها
03:32	التعرف على console سنتعرف في هذا الدرس على console المدمجة في المتصفحات وادوات المطورين
01:55	كيف تحصل على المساعدة والدعم؟ مهم سنتعلم كيفية الحصول على المساعدة والدعم في حال واجهتنا أي مشكلة في هذه الدورة (أنا معك)
03:45	كيف نحقق أقصى استفادة من هذه الدورة مهم سنتعرف على بعض المعلومات المفيدة من التعلم الذاتي في هذه المادة وبعض الأفكار التي تساعدك على التعلم والاستفادة قدر الإمكان
الحقيبة التدريبية (هديتك هنا) + ستجد في هذا القسم حقيبتك التدريبية والتي تحتوي على مراجع إضافية يمكنك التعلم منها + كتيب الأمثلة + الخرائط الذنية التي استخدمناها أثناء الدورة
01:13	كتاب الأمثلة Javascript جرعة إضافية هدية ستجد في هذا الدرس كتاب مليء بالأمثلة تتجاوز 280 ملف وكل ملف يحتوي على عدد كبير من الأمثلة
مقال	الخرائط الذهنية Mind Maps جرعة إضافية هدية استخدمنا أثناء الشرح الخرائط الذهنية "mind maps" لتوضيح بعض المفاهيم ويمكنك تحميلها من هنا
الأساسيات + سنتعرف بهذا الدرس على الأمور الأساسية التي يجب التعرف عليها قبل البدء بالبرمجة باستخدام Javascript
05:29	كيفية كتابة javascript في ملفات html سنتعلم في هذا الدرس كيفية إدراج برمجة Javascript داخل ملفات HTML بأكثر من طريقة
06:44	بنية الجمل البرمجية وكتابة التعليقات سنتعلم في هذا الدرس كيفية كتابة الجملة البرمجية وكيفية إدراج تعليقات على البرمجة
02:33	الوضع الصارم Strict Mode (شاهد الوصف) ماهو الوضع الصارم Strict Mode ولماذا يستخدم في Javascript
08:35	المتغيرات Variables سنقوم بهذا الدرس بالتعرف على المتغيرات التي تقوم بتخزين البيانات لنا في البرمجة
03:18	الثوابت Constants سنتعرف بهذا الدرس على الثوابت ومالفرق بينها وبين المتغيرات
مدخل إلى أنواع البيانات Data Types + سنتعرف في هذا القسم على أنواع البيانات البسيطة ماهي وكيف نتعامل معها
05:38	الأرقام Numbers سنتعرف في هذا الدرس على أنواع البيانات وسنبدا بالتعرف على الأرقام والتعامل معها حسابيا
04:56	النصوص Strings النصوص وتسمى السلاسل أيضا Strings كيف يمكن استخدامها والتعامل معها؟ هذا ماسوف نتعلمه بهذا الدرس
02:21	القيم المنطقية Booleans سنتعرف بهذا الدرس على نوع القيم المنطقية Booleans والتي تستخدم للإجراءات المنطقية
02:58	أنواع البيانات null & undefined سنتعرف بهذا الدرس على الأنوع null & undefined وماهو الفرق بينهما
02:50	معرفة نوع البيانات باستخدام typeof سنتعرف بهذا الدرس على دالة typeof والتي تقوم بتحديد نوع البيانات الذي نجري عليه عملية الفحص
05:54	تحويل أنواع البيانات Type Conversions في بعض الأحيان، سترغب بتحويل نوع بيانات إلى نوع آخر وهذا ماسوف نتعلمه الآن
التفاعل مع المستخدمين Interactions + سنتعرف في السلسلة القادمة على كيفية التفاعل مع المستخدمين باستخدام النوافذ في Javascript
02:46	إدخال البيانات من خلال prompt سنتعرف في هذا الدرس على prompt وهي النافذة التي تظهر للمستخدم لاستقبال بيانات منه
01:38	رسائل التأكيد confirm سنتعرف بهذا الدرس على رسائل التأكيد التي تظهر للمستخدم وكيفية التعامل معها
المنطق البرمجي Logic + المنطق البرمجي يستخدم لاتخاذ القرارات في البرمجة بناء على المخرجات المنطقية منها وسنتعرف في السلسلة القادمة على المنطق في البرمجة وكيفية التعامل معه
08:47	العوامل الرياضية Operators سنتعرف بهذا الدرس على العوامل الرياضية التي تجري الحسابات الرياضية برمجيا
04:51	المقارنات المنطقية Comparisons الآن سنتعرف على كيفية عمل المقارنات المنطقية برمجيا وماهي مخرجاتها
05:03	اتخاذ القرارات برمجيا باستخدام if condition سندخل الآن لكيفية اتخاذ قرار ما بناء على بيانات معينة في البرمجة
02:34	استخدام else في القرارات سنتعرف في هذا الدرس على else والتي تستخدم في القرارات المنطقية في حال عدم تحقق شرط ما
03:16	السلاسل الشرطية باستخدام else if في هذا الدرس ينقوم بالتعرف على كيفية وضع سلسلة متتالية من الشروط لاتخاذ القرارات برمجيا
05:15	العوامل (المشغلات) and - or سنتعرف في هذا الدرس على العوامل الشرطية and - or
06:52	استخدام سلسلة من العوامل المنطقية في الشروط سنقوم بهذا الدرس باستخدام سلسلة من العوامل المنطقية or - and في شرط واحد
02:36	علامة ( ؟ ) لوضع قيم للمتغيرات شرطيا تستخدم علامة الاستفهام (؟) لوضع قيم شرطية للمتغيرات وسنتعرف على فائدتها وكيفية استخدامها الآن.. هيا هيا
حلقات التكرار Loop + في السلسة القادمة سنتعرف على التكرار وأنواع وماهي فوائده
04:46	التكرار باستخدام while سنتعرف الآن على while loop وهو تكرار شرطي يعمل طالما أن هناك شرط صحيح ومالمقصود بـ infinite loop
01:38	التكرار باستخدام do while سنتعرف الآن على تكرار مختلف قليلا وهو do while
08:05	التكرار باستخدام for في هذا الدرس سنتعرف على التكرار for وسنأخذ مقدمة سريعة عن variable scopes
03:38	إيقاف التكرار باستخدام break هل تريد أيقاف التكرار قبل أن ينتهي؟ سنتعرف على ذلك في هذا الدرس
03:55	القفز بالتكرار باستخدام continue سنتعرف الآن على continue والتي تقوم بالقفز أثناء عملية التكرار
الدوال (الوظائف) Functions + حان الوقت للتعمق قليلا والتعرف على الوظائف Functions وكيف يمكن استخدامها لتحسين البرمجة واختصار الوقت
03:34	الوظائف Functions ماهي الوظائف Functions وفوائدها وكيفية كتابتها برمجيا
05:57	مجالات المتغيرات variable scopes المتغيرات لها مجالات وصول معينة برمجيا وسنتعرف عليها عن "كثب" في هذا الدرس
04:29	معلمات الوظائف Functions Parameters سنتعرف بهذا الدرس على parameters والتي تتيح لنا وضع نوع من الديناميكية في مخرجات الوظائف والتي بدورها تتيح لنا تكرار استخدامها بأكثر من شكل
02:39	المعلمات الافتراضية (الاختيارية) Optional Parameters سنتعرف الآن على كيفية وضع parameters افتراضية في الدوال يمكن استخدامها في حال عدم وجود قيمة لها
05:33	استرجاع قيم من الدوال return سنتعرف الآن على واحدة من أهم خصائص الدوال وهي return والتي تقوم بإرجاع قيمة من الدوال
07:50	مفاهيم في البرمجة النظيفة مع الدوال Clean Coding معلومات هامة جدا حول البرمجة النظيفة Clean Coding مع الدوال
مقال	دوال الأسهم Arrow functions مهم تعرف هنا على ماهي دوال الأسهم arrow function وكيف تستخدمها
الكائنات Objects + ماهي الكائنات؟ سنتعرف في هذا القسم على الكائنات التي تعمل بطريقة مختلفة تماما عن Primitives في السابق
04:47	ماهي الكائنات Objects وكيف تكتب؟ سنتعرف في هذا الدرس على الكائنات والفرق بينها وبين Primitives ويقصد بـ primitives المتغيرات البدائية
05:00	الوصول لخصائص الكائنات objects properties سنتعرف بهذا الدرس على كيفية الوصول لمفاتيح الكائنات (خصائص الكائنات)
01:47	حذف وإضافة الخصائص على الكائنات سنتعرف في هذا الدرس على كيفية حذف الخصائص أو المفاتيح من الكائنات وكيف يمكن الإضافة لها
04:51	التحقق من وجود الخواص في الكائنات سنتعرف في هذا الدرس على كيفية التحقق من وجود خاصية معينة في الكائنات
04:19	التكرار (for in) في الكائنات سنتعرف الآن على كيفية استخدام التكرار for in في الكائنات وماهي الفائدة من ذلك
06:22	ماهو النسخ باستخدام المرجع Reference مع الكائنات سنتعرف في هذا الدرس على كيفية نسخ الكائنات من خلال موقعها في الذاكرة reference
04:03	كيف نقوم بنسخ كائنات بواسطة المرجع Copy By Reference سنقوم الآن بتطبيق ماتعلمناه في الدرس الماضي والنظر في النتائج لكيفية النسخ المرجعي
06:35	المقارنة بحسب المرجع سنتعرف الآن على المقارنة المنطقية بين الكائنات لكي نعرف إذا كانت متشابه في المرجع
02:15	الكائنات الثابته const objects هل تتذكر المتغيرات والثوابت؟ سنتعرف الآن على الكائنات الثابته وفرقها عن الثوابة البدائية primitives
03:31	استنساخ الكائنات Cloning باستخدم التكرار for سنقوم الآن بعملية الاستنساخ للكائنات لكي يصبح لدينا كائن جديد ويكون نسخة طبق الأصل من السابق ولكن بمرجع مختلف
05:55	استنساخ الكائنات باستخدم Object.assign سنقوم بهذا الدرس بالتعرف على طريقة ثانية مختصرة لكيفية استساخ الكائنات من خلال استخدام assign الموجودة سابقا في Object
05:32	خاصية this في الكائنات الآن سنتعرف على كيفية استخدام الخاصية "this" في الكائنات للوصول للكائن من خلال نفسه
الأرقام Numbers + سنتعلم في هذا القسم طرق أخرى للتعامل مع الأرقام وسنتعامل أيضا مع الكائن Math للرياضيات
03:41	طرق كتابة الأرقام الطويلة هل فكرة في الأرقام المكونة من عدد كبير من الأصفار مثل المليون؟ سنتعرف في هذا الدرس على كيفية كتابتها بطرق مختصرة
02:20	تقريب الأرقام باستخدام floor, ceil سنتعرف على كيفية استخدام التقريب الرياضي من خلال الكائن Math
04:01	التقريب باستخدام round, trunc في الدرس الماضي تعرفنا على floor & ceil وسنتعرف الآن على round & trunc للتقريب
04:02	توليد الأرقام العشوائية random سنتعرف في هذا الدرس كيف نقوم بتوليد رقم عشوائي في JavaScript
03:27	معرفة الرقم الأكبر والأصغر ضمن الأرقام max & min سنتعرف في هذا الدرس على كيفية استدعاء أكبر أو أصغر رقم ضمن سلسلة أرقام معينة
01:06	القوى الرياضيات (الأسس) pow سنقوم بهذا الدرس بالتعامل مع القوى الرياضية باستخدام الكائن Math
النصوص "السلاسل" Strings + سنقوم بهذا القسم من الدورة بدراسة النصوص أو السلاسل والدوال الإضافية لها كتحويل حالة الأحرف والبحث
04:14	علامات التنصيص والفروقات بينها تعلمنا في درس سابق الفروقات مابين علامات التنصيص وسنقوم بهذا الدرس بتعلم فروقات ومزايا آخرى
06:57	المحارف الخاصة Special Characters سنتعلم في هذا الدرس كيفية الاستثناءات النصية "Escaping" باستخدام جافاسكربت
03:58	احتساب عدد الخانات النصية الآن سنقوم بالتعرف على كيفية احتساب عدد الخانات النصية "عدد الأحرف" ونتعرف على لماذا نقوم بذلك
05:08	الوصول لحرف في السلسلة "النص" تمرين سنقوم الآن بالتعرف على كيفية الوصول لحرف ما في السلاسل من خلال موقعها في السلسلة
01:13	تغيير حالة الأحرف الآن سنتعرف على كيفية تغيير حالة الأحرف مابين أحرف كبيرة وأحرف صغيرة
05:07	البحث عن النصوص باستخدام indexOf الآن سنتعرف على طريقة جديدة تسمى indexOf والتي تقوم بالبحث عن النصوص ثم تخبرنا عن موقعها!
02:40	البحث باستخدام طريقة includes سنقوم بالتعرف على طريقة جديدة للبحث وهي includes والتي تقوم بإخبارنا فقط إذا كان النص موجود أم لا
03:35	البحث باستخدام startsWith تمرين الآن سنتعرف على طريقة البحث باستخدام startsWith، هل يوحي لك اسمها شيء؟
03:06	البحث في نهايات النصوص endsWith تمرين سنتعرف الآن على كيفية البحث في نهاية نص معين بدل من البحث منذ البداية
03:19	اقتصاص النصوص باستخدام slice هل فكرت كيف يمكنك اختصاص قطعة نصية من نقطة إلى نقطة ما؟ سنقوم بهذا الدرس بهذه العملية
01:47	اقتصاص النصوص باستخدام substring سنقوم الآن بالتعرف على طريقة الاقتصاص باستخدام substring وماهو الفرق بينها وبين slice
02:45	الحصول على سلسلة نصية باستخدام substr substr تبدو مألوفة وتشبه substring أليس كذلك؟ هناك فرق بينهما لنتعلمها الآن ونشاهد الفروقات
المصفوفات Arrays + حان وقت تعلم المصفوفات وهي أحدى أنواع البيانات التي تقطع تحت مظلة الكائنات Objects وتستخدم لتخزين البيانات
04:31	ماهي المصفوفات وكيف نقوم بإنشائها سنتعرف بهذا الدرس على المصفوفات "اهميتها ومافرقها عن objects" وكيف نقوم بإنشائها
01:11	الوصول لعناصر المصفوفات في هذا الدرس سنتعلم كيفية الوصول لمفاتيح المصفوفات من خلال الفهرس "index"
02:09	حذف عنصر من المصفوفة باستخدام pop سنتعرف الآن على طريقة حذف العناصر من آخر المصفوفات باستخدام pop
02:22	إضافة عنصر لآخر المصفوفة مع push بعد أن تعرفنا على كيفية حذف عنصر من آخر المصفوفة سنقوم بالتعرف على كيفية إضافة عنصر لآخرها
02:13	حذف عنصر من بداية المصفوفات مع shift الآن سنقوم بالتعرف على كيفية حذف العنصر من بداية المصفوفة ومالفرق في الأداء بينها وبين pop
03:18	الإضافة لبداية المصفوفات مع unshift الآن سنقوم بإضافة عناصر لبداية المصفوفة وسنتعرف على الفرق في الأداء بينها وبين push ألتي تضيف في آخر المصفوفة
04:57	أحجام المصفوفات length قمنا في السابق بالتعرف على طريقة الحصول على حجم كائن ما باستخدام length ولكن هذه المرة سنتعمق قليلا ونرى بعض التصرفات الغريبة التي قد تحدث معا
03:38	المصفوفات متعددة الحدود Multidimensional Arrays سنقوم بالتعرف على المصفوفات متعددة الحدود وتسمى multidimensional
02:37	التكرار بالمصفوفات باستخدام for سنقوم بالتعرف على كيفية التكرار باستخدام for بشكل تقليدي وتعتبر هذه الطريقة متوافقة مع المتصفحات القديمة
03:24	التكرار باستخدام for in & for of سنقوم بالتعرف على تكرار جديد وهو for of وماهي الفروقات بينه وبين التكرار السابق for
01:56	تحويل المصفوفات إلى نصوص في بعض الأحيان، هناك مصفوفات نرغب بتحويلها لنص كونها قابلة للقراءة كنص وكونها لا تحتوي على عدد كبير من المعلومات أيضا
05:44	دالة النينجا Splice سنتعلم الآن دالة رائعة، تستطيع وصفها بأنها خاصة بالنينجا! وهي splice التي تقوم بعدد كبير من الوظائف للمصفوفات
02:49	الاقتصاص من المصفوفات Slice سنتعرف على دالة slice والتي تقوم باقتصاص جزء من المصفوفات ثم تعيده إلينا
02:09	الدمج والإضافة للمصفوفات مع concat إذا أردت أن تدمج مصفوفتين أو تضيف لمصفوفة ما فقد حان وقت التعرف على concat
03:42	دالة التكرار في المصفوفات forEach سنتعرف على forEach والتي بدورها تقوم بالتكرار داخل المصفوفات للقيام بأي عملية نرغب بها
06:54	البحث بالمصفوفات مع indexOf, lastIndexOf, includes تعرفنا على هذه الدوال في السابق مع النصوص وسنقوم الآن بالتعرف على عملها مع المصفوفات
04:35	دالة البحث find الدالة find تقوم بوظيفة البحث وارجاع قيمة أول نتيجة لنا، هيا نقوم بذلك
01:52	دالة البحث findIndex إذا رغبنا بالبحث عن الفهرس "index" الخاص بالقيمة التي نبحث عنها فهذه الوظيفة متوفره بهذا الدرس
06:03	دالة filter ومقدمة في method chaining سنتعرف على filter وهي تبحث عن قيمة ما وترجع لنا كل نتائج البحث وليس فقط البحث وكذلك سنتعرف على مفهوم method chaining
02:09	اعادة تهيئة المصفوفات مع map تستخدم map لإعادة تهيئة المصفوفة واخراج نتيجة محددة فقط
02:27	إعادة ترتيب المصفوفات sort سنتعرف الآن على آلية ترتيب المصفوفات
00:46	الترتيب العكس للمصفوفات reverse قد تحتاج لترتيب المصفوفات عكسيا يوم ما؟ هذه الدالة تستخدم لذلك
03:13	تفكيك النصوص لمصفوفات split سنتعرف الآن على طريقة تفكيك النصوص إلى مصفوفات باستخدام split
01:28	دمج المصفوفات لنصوص join إذا كان لديك مصفوفة تحتوي على نوع معين من البيانات تستطيع تحويل هذه البيانات لنص ودمجها مع بعضها باستخدام join
03:54	التحقق من أن الكائن مصفوفة سنتعرف على دالة من أهم الدوال في المصفوفات والتي قد يوقعنا عدم استخدامها باخطاء كبيرة وهي دالة تتحقق لنا من أن الكائن مصفوفة
الوقت والتاريخ Date & Time + الوقت والتاريخ لابد من استخدامها في لغات البرمجة لتحديد فترة زمنية معينة أو لمعرفة متى حدث شيء ما؟ سنتعلم في السلسلة القادمة كل شيء يخص التاريخ والوقت في دالة Date
03:22	مقدمة في التاريخ والوقت Date & Time سنتعرف في هذا الدرس على أهمية استخدام الوقت والتاريخ في البرمجة مع مثال لكيفية عمل ذلك
05:49	ضبط التاريخ والوقت بأجزاء الثانية Milliseconds يمكن أن نتعامل مع Date باستخدام أجزاء الثانية بدأ من تاريخ محدد في لغة جافا سكربت وسنقوم بذلك بهذا الدرس
04:39	ضبط التاريخ نصيا أو بصيغة الأرقام سنقوم بهذا الدرس بمعرفة كيف يمكن وضع تاريخ بشكل نصي وكيف يمكن استخدام parameters الرقمية بدلا من أن تكون أجزاء من الثانية
03:43	الحصول على معلومات من التاريخ سنتعلم في هذا الدرس كيف يمكننا الحصول على معلومات من كائن التاريخ مثل السنة والشهر واليوم والساعة ... الخ
06:49	تغيير الوقت والتاريخ تمرين سنتعلم في هذا الدرس كيف يمكننا التغيير في تاريخ أو وقت ما كما يوجد تحدي بانتظارك
05:18	كيف يمكن عرض اسماء الأيام تمرين سنقوم بهذا الدرس بمعرفة كيف يمكننا برمجة دالة تقوم بترجمة أرقام الأيام إلى أسمائها
03:10	عرض أسماء الأشهر تمرين سنقوم بهذا الدرس بمعرفة طريقة عرض أسماء الأشهر بدلا من أرقامها
08:37	ترجمة النص لتاريخ Parse سنتعلم كيفية ترجمة تاريخ من نص مكتوب إلى كائن
ترميز كائنات جافاسكربت JSON + في السلسلة التالية سنتعلم كيفية استخدام JSON والذي يقوم بتحويل الكائنات لنصوص ليمكننا التعامل معها خارج لغة البرمجة
04:32	ماهو JSON ؟ سنتعرف بهذا الدرس على JSON ماهي فائدته ولماذا يستخدم وماهو؟
04:26	التحويل من كائن إلى json باستخدام stringify سنقوم بهذا الدرس بمعرفة كيفية التحويل من كائن إلى json بطريقة سهلة وسريعة
02:27	ترجمة json إلى كائن parse سنقوم بهذا الدرس بالتعرف على كيفية تحويل json إلى كائن في جافاسكربت
01:52	الاستثناءات والمسافات Spacer & Replacer قد ترغب أحيانا باستثناء بعض المفاتيح من تحويلها إلى json وقد ترغب أيضا بتجميل طريقة المخرجات وهذا هو محور درسنا الآن
الجدولة والتوقيت Scheduling and Timing + سنقوم الآن بدراسة كيفية جدولة الأعمال البرمجية باستخدام javascript عبر استخدام وظائف في اللغة تساعدنا على تشغيل الشفرات البرمجية عبر توقيت زمني معين
04:03	التوقيت باستخدام setTimeout سنتعرف الآن على كيفية تشغيل كود برمجي معين بعد مضي فترة من الزمن
01:48	استخدام الدوال بشكل نصي مع setTimeout يمكنك وضع نصوص "strings" في دالة التوقيت بحيث تقوم الدالة تلقائيا بتحويلها وتشغيلها كدالة
02:52	تمرير معلمات الدوال بداخل setTimeout سنتعرف على طريقة تمرير parameters خاصة بدوال معينة تعمل بداخل setTimeout
03:30	تعطيل التوقيت clearTimeout ماذا لو قررت أن تقوم بتعطيل مهمة مجدولة؟ سنتعرف في هذا الدرس على كيفية ايقاف الجدولة باستخدام clearTimeout
04:47	التكرار الزمني باستخدام setInterval سنتعرف بهذا الدرس على setInterval للتكرار الزمني وكيف يمكن تعطيلها باستخدام clearInterval
استخدامات متقدمة في Functions & Objects + في هذا القسم سنتعرف على بعض الاستخدامات المتقدمة في الدوال "functions" والكائنات "objects"
04:29	المُعلمات المتعددة Rest Parameters ... هذا ما سوف نتعلمه! نعم هذه النقاط الثلاثة!
03:07	المتغير arguments في الدوال سنتعرف في هذا الدرس على المتغير arguments في الدوال والذي يقوم باستدعاء params الخاصة بالدالة
04:29	عامل الإنتشار Spread Operator سنتعرف في هذا الدرس على spread operator والذي سيقوم بتقسيم الكائنات التكرارية Iterables لعناصر مستقلة
11:00	وراثة الهياكل المبدئية Prototype Inheritance سنتعرف في هذا الدرس على مفهوم الوراثة وكيف نتمكن من وراثة الخصائص من الكائنات
البرمجة الكائنية (الشيئية) Object Oriented Programming OOP + سنتعرف في هذا الفصل على البرمجة الكائنية والتي يرمز لها بـ OOP وكيف يتم بناء classes لنقوم بتغليف البيانات أو تقليل كتابة المنطق البرمجي
03:36	مالمقصود بالبرمجة الكائنية OOP سنتعرف في هذا الدرس على المقصود بالبرمجة الكائنية OOP وماهي فوائدها
04:20	كتابة الكلاس Class Syntax سنتعرف بهذا الدرس على كيفية كتابة class والفرق بينه وبين function
03:32	ماهو Class Constructor؟ سنتعرف بهذا الدرس على أهمية Constructor في classes
04:12	خواص الكلاس Class Properties الآن سنتعرف على كيفية إضافة خصائص properties داخل الكلاس
04:34	وظائف الكلاس Class Methods سنتعرف في هذا الدرس على كيفية كتابة methods تقوم بتنفيذ كود برمجي معين داخل الكلاس
04:15	التعرف على Getters لنتعرف في هذا الدرس على getters التي تقوم بتحويل وظائف معينة إلى خصائص في الكلاس
09:04	التعرف على Setters على عكس getters سنتعرف الآن على setters والتي تقوم بتغيير قيم ما داخل الكائنات الخاصة بنا
04:16	الوراثة Class Inheritance كما أنه هناك وراثة في prototypes يوجد أيضا وراثة في Classes تفيدنا في استغلال الوظائف الموجودة مسبقا
03:53	Static Methods سنتعرف الآن على static methods وهي عادة وظائف تتعلق بالكلاس ذاته وليست للكائن على وجه التحديد
01:42	Static Properties (معنا ضيف جديد) سنتعرف الآن على static properties ومالفرق بينها وبين static methods
03:08	وراثة الكلاسات الافتراضية في جافاسكربت في هذا الدرس سنتعمق قليلا ونستفيد من الكلاس بحيث نستطيع وراثة كلاس جاهز في جافاسكربت ثم بناء كلاس خاص بنا من خلاله
التعامل مع الأخطاء Error Handling + ستحدث الأخطاء بلا شك أثناء التشغيل وقد تكون هذه الأخطاء لأسباب برمجية بحته وقد تكون لأسباب خارج نطاق المنطق البرمجي وسنتعرف بالسلسلة القادمة على كيفية التعامل معها
05:27	مقدمة بالتعامل مع الأخطاء try & catch سنتعرف في هذا الدرس على كيفية التعامل مع الأخطاء المحتملة وغير المحتملة أيضا باستخدام try & catch
03:24	التعرف على Error object سنتعرف في هذا الدرس على error object وماهي محتوياته
02:41	الأخطاء غير المتزامنة سنتعرف في هذا الدرس على بعض الأخطاء التي قد تحدث بسبب عدم التزامن في تنفيذ البرنامج
05:46	إنشاء الأخطاء باستخدم throw في بعض الأوقات نريد أن ننشئ أخطاء خاصة بنا، بناء على احتياج معين للنظام وسنتعلم ذلك في هذا الدرس
02:10	استخدام finally في التعامل مع الأخطاء سنتعرف في هذا الدرس على الأخت الثالثة لـ try & catch وهي finally والتي تقوم بالعمل دائما أيا كانت حالة التنفيذ
الوعود Promises + الآن وصلنا لمرحلة متقدمة نوعا ما أليس كذلك؟ أحسنت! هيا نتعرف على "الوعود" Promises وهي الكائنات التي تطلب من غيرها الإنتظار حتى تنتهي من عملها
04:36	دوال الردود Callback Functions سنتعرف في هذا الدرس على المفاهيم synchronous و asynchronous وعلى كيفية عمل callback functions
07:40	وعدتك! مقدمة في Promises ماهو الوعد؟ الوعد يجعل الطرف الآخر ينتظر تنفيذه. وهذا بالضبط ما تفعله promises في JavaScript وسنتعرف عليها بعمق الآن
02:18	بناء الجمل البرمجية Promise Syntax بعد أن نتعرفنا على promises سنتعرف الآن على بناء الجمل البرمجية لها
04:59	الحصول على النتائج باستخدام then سنتعرف على كيفية عمل consume لـ promise معين باستخدام then وكيف نحصل على النتائج منه
02:40	طرق أخرى للتعامل مع then سنتعلم طرق مختلفة الآن في التعامل مع then مثلا للحصول على النتائج أو الأخطاء فقط
03:12	إلتقاط الأخطاء باستخدام catch سنتعرف الآن على catch التي تقوم بالتقاط الأخطاء التي قد تحدث داخل promises
03:11	استخدام finally مع promises تعمل finally دائما في promises سواء حدث خطأ أم تم استخراج نتيجة وسنأخذ مثال على ذلك
07:20	سلاسل الوعود Promises Chaining سنتعلم في هذا الدرس ماهي السلاسل في promises وكيف تستخدم لتحويل البيانات من سلسلة ﻷخرى
02:48	استخدام promises داخل chains سنتعلم في هذا الدرس كيفية اخراج promise من داخل chain وانتظاره حتى ينتهي ثم اكمال السلسلة
06:20	مثال عملي (الاتصال بشبكة خارجية) باستخدام fetch سنقوم بهذا الدرس بتطبيق مثال عملي لكي نفهم بشكل أقرب ماهي الاستخدامات الفعلية لـ promises
04:43	التعامل مع async / await تمرين سنقوم بهذا الدرس بتعلم كيفية التعامل مع async/await وبعد فهمك لها هناك تحدي بانتظارك!
03:48	تحويل promise إلى async/await تمرين سنقوم بهذا الدرس بحل التحدي الخاص بتحويل promise إلى async/await لكي نفهم آلية عمله
04:22	التعامل مع الأخطاء مع async/await هل فكرت ماذا سيحدث إن حصل خطا ما في async/await؟ كيف يمكننا التعامل معه؟
الموديولز (الوحدات) Modules + سنتعرف في السلسلة القادمة على إحدى خصائص جافاسكربت التي تعتبر حديثة عليها الا وهي الوحدات Modules
06:32	ماهي Modules في جافاسكربت؟ سنتعرف في هذا الدرس على modules ولماذا تستخدم وماهي متطلبات التعامل معها
03:43	الوصول للملفات من الخادم المحلي localhost إذا كنت قمت بتركيب xampp دعنا نتعرف على كيفية الوصول للملفات به في هذا الدرس. هذا الدرس اختياري يمكنك تجاوزه اذا كنت تعرف كيفية الاستخدام
08:41	إنشاء أول module خاص بك export & import سنقوم بهذا الدرس بإنشاء أول module ونتعرف على كيفية التعامل معه
03:15	استخدام ملفات js كوحدات modules سنتعرف في هذا الدرس على كيفية استخدام ملفات js بدلا من وضع module داخل صفحات html
06:37	المزيد حول export & import سنتعرف على تفاصيل إضافية حول التعامل مع export & import مثل كيفية اعادة تسمية module اثناء الاستيراد
07:19	التعرف على التصدير الافتراضي Export Default سنتعرف في هذا الدرس على كيفية التصدير الافتراضي بحيث يكون لدينا كائن معين يتم تصديره على أنه هو الافتراضي في module
التعامل مع الصفحات Document DOM + في السلسلة القادمة سنقوم بدراسة DOM وهي Document Object Model والتي من خلالها يمكننا الوصول للعناصر في المستند للصفحة والتعامل معها مثل تعديلها \ حذفها أو الإضافة عليها
03:17	على ماذا يحتوي متصفح الإنترنت؟ وصلنا لبر الأمان! سنتعرف الآن على المكونات الرئيسية للمتصفح أو "بيئة التشغيل" مثل DOM, BOM
08:06	شجرة العناصر DOM Tree سنتعرف في هذا الدرس على شجرة العناصر الموجودة في مستندات الإنترنت والتي تسمى DOM Tree وكيف يمكن الوصول لها
08:59	الوصول للتابعين Children سنقوم الآن بتوضيح كيفية الوصول للعناصر التابعة لعنصر ما والتي تسمى Children
05:30	الوصول للعناصر Elements و العناصر المجاورة Siblings في هذا الدرس سنتعرف على elements-navigation وأيضا كيفية التنقل بين العناصر المتجاورة
07:57	التنقل داخل الجداول Table Navigation بعض عناصر HTML يوجد لها عدد كبير من الخصائص ولعل أفضل مثال على ذلك هو الجدول وسنقوم بهذا الدرس بمعرفة تفاصيل التنقل داخل عناصره
03:44	الوصول للعناصر من خلال المعرف ID من الأسهل أن نقوم بالتنقل بين العناصر بناء على المعرفات الخاصة بها "id" وهذا ماسنتعرف عليه الآن
03:38	الوصول للعناصر بناء على الأسماء يمكننا الوصول للعناصر بناء على أسماء الوسوم tag name أو بناء على اسمها في خواصها attribute name
01:56	الوصول للعناصر بناء على Class Name يمكن الوصول للعناصر أيضا من خلال css class حيث يمكن تجميعها ضمن خصائص مشتركة ثم الوصول لها والتعامل معها
06:04	الوصول لمحتوى العنصر الداخلي innerHtml سنبدأ الآن التعرف على كيفية الوصول لقيم العناصر الداخلية وتحديدا innerHTML (شاهد وصف الدرس)
04:35	الوصول لقيمة عنصر من خلال outerHTML سنتعرف في هذا الدرس على outerHTML والتي تمكننا من الوصول لقيمة عنصر بالكامل
02:27	الوصول للعنصر من خلال textContent سنتعرف على textContent التي تمكننا من الوصول للمحتوى النصي للعناصر والتعديل عليه أيضا
05:47	أمثلة إضافية على كيفية الوصول لقيم العناصر سنقوم بهذا الدرس بالوصول لقيم العناصر من خلال value, href, hidden للتعرف على المزيد من أنواع القيم
08:56	التعديل على attributes و properties سنقوم بهذا الدرس بالتعرف على كيفية التعديل على html attributes وكيف يتم تحويلها مباشرة إلى object properties
06:52	التعامل مع datasets يوجد في العناصر بيانات إضافية (لا تتبع معايير HTML) يمكن وضعها والوصول لها وتسمى datasets. لنتعرف عليها!
06:33	إضافة عناصر للصفحات سنقوم الآن بالتعرف على كيفية إضافة عناصر جديدة للصفحات والتحكم بأماكن تواجدها
01:19	حذف العناصر من الصفحة في بعض الأحيان تريد حذف عنصر بالكامل من الصفحة وسنقوم بهذا الدرس بالتعرف على ذلك
03:40	استنساخ العناصر Clone & Deep Clone سنتعرف الآن على كيفية استنساخ العناصر في الصفحات للقيام بعمل نسخ مشابهة منها باستخدام clone و deep clone
05:22	التعديل في CSS باستخدام style حان الوقت للتعرف على كيفية تعديل التصميم الخاص بـ CSS من خلال JavaScript وسنقوم بهذا الدرس بالتعرف على خاصية style
04:42	التعامل مع classes سنقوم بهذا الدرس بالتعرف على كيفية التعامل مع CSS Classes بحيث يمكنا تعديلها واضافتها أو حذفها
07:10	التعامل مع أبعاد العناصر سنتعرف في هذا الدرس على التعامل مع احجام العناصر الموجودة في الصفحة
09:40	أبعاد النافذة و المستند Window VS Document سنقوم بهذا الدرس بتوضيح الفروقات مابين ابعاد النافذة وابعاد المستند وماهي المشاكل التي قد تقع بها بسبب احتساب الابعاد بشكل غير صحيح
الأحداث في الواجهة UI Events + سنتعلم في السلسلة القادمة كيفية التعامل مع الأحداث التي تتم في الواجهة مثل الضغط على ازرار الفأرة أو لوحة المفاتيح وكذلك أحداث نماذج البيانات والمتصفح نفسه.
06:00	ماهي الأحداث Events؟ سنتعرف الآن على ماهي الأحداث "events" في JavaScript وكيف يتم استخدامها
05:48	تتبع الأحداث باستخدام Event Listener سنتعرف في هذا الدرس على Event Listener وكيف يتم ربطه في عنصر ما في الصفحة مع كيفية إلغاء الحدث
05:52	التعرف على Event Object يوجد في الأحداث كائن "object" يحتوي على الكثير من المعلومات عن الحدث الذي تم وسنتعرف عليه في هذا الدرس
06:14	مفهوم Bubbling حان الوقت الآن للتعرف على bubbling في الأحداث والذي يقوم بتفعيل عدد من الأحداث أو حدث واحد فقط !
04:00	الأحداث الافتراضية للمتصفح سنتعرف في هذا الدرس على كيفية التعامل مع الأحداث الافتراضية في المتصفح وكيف يمكن تعطيلها
09:53	أحداث الفأرة Mouse Events سنتعرف في هذا الدرس على أحداث الفأرة وكيف يمكن التعامل مع الضغطات التي تتم من خلالها وكيف يمكن تعطيل النسخ والتظليل
02:53	بناء خوارزمية السحب والإفلات Drag & Drop تمرين يوجد تحدي لاختبار فهمك الآن، هذا التحدي ليس سهلا حاول فهم المتطلبات وتطبيق هذا التحدي
10:04	كيفية عمل Drag & Drop تمرين هل استطعت حل التحدي؟ إن كان فهذا رائع وإن واجهتك مشاكل فلا بأس نحن في الطريق لحلها
06:08	أحداث لوحة المفاتيح Keyboard Events لوحة المفاتيح ليست معقدة كالفأرة. لا يوجد بها غير حدثين وهو حدث الضغط على الزر والآخر بعد ترك الزر. هيا نتعرف عليها
02:18	حدث التمرير Scroll أثناء تحريكك للصفحة، يوحدث يسمى scroll يمكنك استغلاله لمعرفة إذا كان المتصفح يقوم بالتمرير أو وصل إلى نقطة ما في الصفحة
أحداث النماذج Form events + وصلنا إلى النماذج forms. يوجد بها الكثير من الأحداث التي يمكن الاستفادة منها مثلا عند تغيير قيمة حقل معين أو الانتقال منه أو الاختيار المتعدد أو إرسال البيانات من النموذج
07:31	التنقل في عناصر النماذج التنقل بين عناصر النماذج يساعدك كثيرا على التعامل معها وسنتعلم الآن كيف يمكن التنقل بين هذه العناصر
03:30	الحصول على القيم من input & textarea العناصر input و textarea كيف يمكننا الوصول للقيم الخاصة بها والتعامل معها مثلا معرفة اذا كان العنصر تم تحديده بعلامة (صح)
04:48	التعامل مع select تمرين سنتعرف على العنصر select وكيف نقوم بالوصول للقيم الخاصة بها والتعامل معها مثل تحديد القيم ومعرفة القيمة المختارة
04:30	التعامل مع select multiple تمرين سنقوم بهذا الدرس بمعرفة كيفية الحصول على قيم العنصر select إذا كان يسمح بالاختصار المتعدد multiple
04:25	إنشاء والتعامل مع الخيارات options سنقوم بهذا الدرس بالتعرف على كيفية التعامل مع options وكيفية إنشاؤها من خلال JavaScript
05:57	الأحداث focus & blur الأحدث focus (الذي يعمل عند تحديد حقل معين) و blur (الذي يعمل عند الخروج من العناصر) سنقوم بتعلمها ومعرفة كيفية الاستفادة منها
03:28	تغيير حالة الخانة باستخدام focus, blur methods سنتعرف على كيفية تغيير حالة الحقول باستخدام methods بدلا من استخدامها كأحداث بحيث نقوم بتحديد أو إزالة التحديد من عنصر ما
04:08	الحدث onchange الحدث onchange هو حدث يعمل عند تغيير قيمة حقل ما في النماذج مثل الكتابة أو تغيير الاختيارات في قائمة منسدلة
02:05	الحدث input سنتعرف على الحدث input والذي يعمل دائما في الحقول عند الكتابه بها سواء عن طريق لوحة المفاتيح او عن طريق اللصق او حتى الكتابة عبر الصوت
04:18	أحداث النسخ\اللصق\القص copy,paste,cut سنتعرف في هذا الدرس على كيفية التعامل مع الأحداث cut,copy,paste وكيف يمكن تعطيلها في بعض الحقول
03:59	الحدث submit و submit method سنتعرف على الحدث submit والذي يعمل عند الضغط على زر الإرسال في النماذج أو زر Enter في لوحة المفاتيح وكيف يمكن تعطيله
الأحداث في الصفحات Page Events + سنتحدث في هذا القسم عن الأحداث التي تتم في الصفحات والتي من خلالها نستطيع معرفة مثلا إذا تم تحميل الصفحة ومحتوى الصفحة ... الخ
04:32	أحداث الدخول للصفحات سنقوم الآن بالتعرف على الأحداث DOMContentLoaded والحدث onload وسنعرف الفروقات مابينهما
06:26	أحداث الخروج من الصفحة سنتعرف على أحداث الخروج من الصفحة وهي unload و beforeunload والتي تفيدنا في تحديد ماذا كان المستخدم خرج أو على وشك الخروج من الصفحة
04:01	تحميل ملفات js باستخدام async/defer عندما نقوم بتحميل ملفات JavaScript خارجية يمكننا استخدام مايسمى directives التي تقوم بتوجيه المتصفح بكيفية التعامل مع الملفات الخارجية
03:24	أحداث تحميل الموارد الخارجية سنتعرف في هذا الدرس على كيفية التعامل مع تحميل الموارد الخارجية ومعرفة ماإذا تم تحميلها أم لا باستخدام الاحداث onload و onerror
النوافذ الخارجية Popup Windows + سنقوم بالسلسلة القادم بالتعرف على كيفية فتح النوافذ الخارجية في المتصفح والتعامل معها مثل اخذ البيانات منها واغلاقها
09:14	فتح النوافذ الخارجية سنتعرف في هذا الدرس على كيفية فتح النوافذ الخارجية وماهي القيود التي تضعها المتصفحات علينا كمبرمجين في هذا الإطار
05:31	إغلاق النوافذ المفتوحة popups سنتعرف على كيفية اغلاق النوافذ المفتوحة ومعرفة ماإذا كانت النافذة مغلقة أم لا لكي نتخذ قرارات بناء على ذلك
06:17	التواصل بين النوافذ سنتعرف بهذا الدرس على كيفية التواصل بين النوافذ ومعرفة المعلومات عنها والتعامل معها وماهي المتطلبات للقيام بذلك ضمن سياسة Same Origin Policy
07:05	إرسال البيانات بين الصفحات postMessage سنتعرف في هذا الدرس على postMessage وعلى message event وكيف نستخدمها لإرسال البيانات بين الصفحات
الإتصالات الشبكية Network Requests + وصلنا لمرحلة الاتصالات الشبكية الآن! وسنتعلم في الدروس القادمة كيفية القيام بالاتصالات الشبكية للحصول على معلومات أو إرسال بيانات معينة من خلال الصفحات باستخدام JavaScript
05:45	مقدمة في HTTP requests & AJAX في هذه المقدمة سنتعرف على AJAX & HTTP Requests
07:49	استخدام fetch للاتصالات تمرين مررنا في السابق على fetch لنأخذ مثالا على عمل promises وسنقوم بهذا الدرس بالتفصيل في خصائصها وكيفية التعامل معها
05:00	التعامل مع fetch باستخدام async/await تمرين سنقوم بهذا الدرس بالتعامل مع fetch ولكن باستخدام async/await ونحل التحدي في الدرس الماضي
06:39	إرسال البيانات fetch POST & Headers بعدما تعرفنا على طريق GET دعونا الآن ندخل عميقا ونتعرف على كيفية استخدام POST و أيضا إرفاق Headers
04:32	AbortController يعتبر AbortController واحدة من خصائص JavaScript التي يمكننا من خلالها إيقاف أي شيء غير متزامن والتدخل به مثل promises
06:18	اعتراض الاتصال في fetch & AbortController سنقوم الآن بمعرفة كيفية اعتراض (قطع) الاتصال باستخدام AbortController مع fetch
06:15	URL Object يعتبر URL Object أحد خصائص JavaScript التي من خلالها يمكن إنشاء الروابط وتعديلها والحصول على معلومات منها
09:42	URL searchParams سنتعرف الآن على searchParameters وهي (المُعلمات parameters) الموجودة في الروابط وكيف يمكن تحريرها والتعامل معها
11:11	تشفير الروابط URL Encoding من أهم الأشياء التي يجب عليك التعامل معها هو encoding الخاص بالروابط والذي يقوم بتحويل النصوص لديك إلى روابط صحيحة وسنتعرف على ذلك الآن
06:44	الكائن FormData FormData عبارة عن كائن من خلالها يمكننا إرسال البيانات بشكل form-data وأيضا يمكننا من خلاله إرسال بيانات HTML Forms بشكل مبسط وسريع
07:33	طلبات HTTP من خلال XMLHttpRequest تمرين سنأخذ في هذا الدرس معلومات هامة حول XMLHttpRequest والذي يقوم بدوره بالتعامل مع HTTP Request كما هو الحال مع fetch مع موجود بعض المزايا التي سنتعرف عليها بهذا الدرس
05:47	إرسال البيانات XMLHttpRequest POST تمرين سنقوم بهذا الدرس بالتعرف على كيفية إرسال البيانات POST باستخدام XMLHttpRequest ومعرفة المنطق البرمجي المتعلق بذلك
03:38	XMLHttpReuqest readyStateChange سنتعرف في هذا الدرس على الحدث "Event" الخاص بتعقب حالة الطلبات وهو readStateChange
الكعكات Cookies + الكعكات Cookies هي عبارة عن بيانات صغيرة يتم تخزينها في متصفح المستخدم ونقلها عبر HTTP Requests وفي السلسلة القادمة سنقوم بالتعرف عليها والعمل معها
03:57	مقدمة في Cookies سنتعرف الآن على cookies والتي قد تسمى internet cookies, browser cookies على وظائفها ومكونات صناعتها!
06:56	تخزين وإدارة Cookies سنقوم بهذا الدرس بالتعرف على كيفية تخزين وإدارة cookies داخل المتصفح
03:23	ضبط المسارات Cookies Path لكل كعكة مسار افتراضي وأيضا يمكننا تحديد مسار محدد لها لتعمل فقط على ذلك المسار، هيا نتعرف على ذلك
04:34	نطاق الكعك Cookies Domain Security الآن سنتعرف على خاصية domain مع الكعكات والتي من خلالها يمكن للمتصفح قرائتها بناء على النطاق فقط وكيف يمكن التعامل مع النطاقات الفرعية sub domains
06:13	تاريخ صلاحية الكعكات للكعكات تاريخ صلاحية! يمكن من خلاله حذفها من المتصفح بطريقتين سنتعرف عليها في هذا الدرس
تخزين البيانات LocalStorage / SessionStorage + في السلسلة التالية سنتعرف على طريقة أخرى لتخزين البيانات في المتصفح وهي متقدمة قليلا عن Cookies وتختلف أيضا في طريقة عملها
04:20	تعرف على localStorage & sessionStorage مهم سنتعرف في هذا الدرس على طرق تخزين البيانات باستخدام localStorage, sessionStorage والفرق الرئيسي بينها وبين cookies
05:00	إدخال البيانات والحصول عليها في LocalStorage سنقوم بالتعرف على طرق إدخال البيانات والحصول عليها باستخدام localStorage وكيفية إدارتها في المتصفح
01:38	حذف البيانات من localStorage الآن سنتعرف على طرق حذف عنصر من التخزين أو حذف التخزين بالكامل من خلال JavaScript
01:54	التحقق من عدد العناصر في التخزين والوصول لها تمرين سنتعرف في هذا الدرس على كيفية معرفة عدد العناصر المخزنة في localStorage وكيف يمكننا الوصول لمفتاح معين بناء على رقم الفهرس "index"
05:37	كيفية تخزين المعلومات من نماذج البيانات (حل التحدي) تمرين سنقوم بهذا الدرس بتمرين نتعرف من خلاله على كيفية حفظ البيانات المرسلة بواسطة المستخدم من خلال HTML Forms
02:53	الحدث onstorage Event سنتعرف على الحدث onstorage في هذا الدرس والذي يعمل بمجرد تعديل بيانات في localStorage بواسطة صفحة أخرى
قواعد البيانات IndexedDB + IndexedDB هي قواعد بيانات من نوع No-SQL مضمنة في المتصفحات وتعمل في لغة JavaScript وتستخدم لتخزين البيانات للتطبيقات في المتصفح.
06:46	ماهي قواعد بيانات IndexedDB؟ في هذا الدرس سنتعرف على قواعد البيانات من نوع NoSQL والموجودة في متصفحات الإنترنت ومالذي يميزها عن الأنواع الأخرى من التخزين
05:48	إنشاء وحذف قواعد البيانات والأحداث الخاصة بها سنتعرف في هذا الدرس على كيفية إنشاء و حذف قواعد البيانات من المتصفح وماهي الأحداث Events التابعة لها
07:22	تحديث قواعد البيانات المتزامن Parallel Database Update جرعة إضافية يوجد مشكلة! قد يقوم المستخدم بفتح نسخة جديدة من قاعدة البيانات في المتصفح بينما يوجد صفحة قديمة تحتوي على نسخة أقدم من القاعدة. كيف نقوم بالتعامل مع هذه المشكلة؟
03:41	إنشاء والتحقق من وجود Object Stores مهم سنتعرف في هذا الدرس على أهمية الحدث upgradeneeded وكيف من خلاله يتم إنشاء Object Stores ونتحقق من وجودها
06:09	إدخال البيانات في Object Stores سنتعرف في هذا الدرس على طريقتين في إدخال البيانات وهي add و put والفرق بينهما في إدخال البيانات
05:47	التعامل مع Transactions والأحداث الخاصة بها تمرين مهم سنتعرف في هذا الدرس على مفهوم Transactions والأحداث completed & error في قواعد البيانات وسنضعها تحت الاختبار لمشاهدة ماذا سيحدث
09:40	البحث في قواعد البيانات واستخدام Key Ranges سنتعلم الآن كيفية البحث في قواعد البيانات وكيفية استخددام Key Ranges بناء الاستعلامات من أجل تحديد جزء من البيانات لعرضها
05:37	إنشاء فهارس قواعد البيانات Indexes تمرين سنتعرف على مفهوم indexes في قواعد البيانات بهذا الدرس وسنعرف كيفية إضافتها والاستفادة منها في البحث عن البيانات
05:33	البحث عن البيانات باستخدام Indexes تمرين البحث عن البيانات باستخدم indexes سيكون أمر مهم خصوصا مع البيانات الضخمة وسنتعرف في هذا الدرس على كيفية استخدامها
03:41	الحذف من Object Stores كيف يمكنك الحذف من Object Store؟ سنتعرف على طريقتين للحذف باستخدام delete
04:54	IndexedDB Cursors سنتعرف على مفهوم هام وهو Cursors الموجود في IndexedDB والذي يقوم بتنظيم عملية الحصول على البيانات الضخمة حتى لا يحدث خلل في النظام
العناصر المخصصة Custom Components + العناصر المخصصة "Custom components" هي عناصر يمكن تشكيلها لتصبح قوالب HTML قابلة لإعادة الاستخدام في المشاريع وسنتطرق لذلك في الدروس التالية
04:54	ماهي العناصر المخصصة Custom Components؟ سنتعرف بهذا الدرس وبشكل عملي على العناصر المخصصة Custom components. ماهي ولماذا نستخدمها؟
06:48	إنشاء العناصر المخصصة سنتعرف الآن على كيفية بناء العناصر المخصصة من خلال بناء Class خاص بنا يمكننا من خلاله تخصيصها وبرمجتها
05:36	تحديث العناصر المخصصة Observe Attributes تمرين سنقوم بهذا الدرس بالتعرف على كيفية مراقبة العناصر المخصصة لكي يتم إعادة رسمها في حال تم تغيير بياناتها في الصفحة
02:43	إعادة رسم العناصر في حال تم تغيير بياناتها تمرين سنقوم بهذا الدرس بمعرفة كيفية إعادة رسم العناصر في الصفحة إذا تغيرت بياناتها!
05:11	التعديل على عناصر HTML الإفتراضية سنتعلم كيفية التعديل على عناصر HTML الموجودة بشكل افتراضي واضافة خصائص ومزايا إضافية لها
03:00	التعامل مع Attributes وأخطاؤها مهم ماذا سيحدث في حال تركت attribute بلا قيمة؟ أو أن attributes غير موجود؟ قد تظهر أخطاء معينة نحتاج لمعرفة كيفية التعامل معها
05:01	ماهو Shadow DOM وماهو مفهوم Encapsulation ؟ مهم جرعة إضافية سنتعرف في هذا الدرس على العناصر الخفية التي تكون موجودة داخل عناصر HTML وعلى مفهوم هام جدا في البرمجة وهو Encapsulation
03:59	إنشاء Shadow DOM سنقوم الآن بإنشاء أول Shadow DOM ونتعرف على خصائصه
02:53	الوصول إلى Shadow DOM و Host سنتعرف بهذا الدرس على أوضاع الوصول لـ Shadow DOM وهما وضع open و closed ومالفرق بينهما
03:15	تطبيق عملي على Encapsulation تمرين مهم جرعة إضافية في هذا الدرس سنقوم بالتعرف بشكل أقرب على مفهوم Encapsulation برمجيا بحيث يصبح لدينا خصائص "خاصة" بالعنصر المخصصة الذي نقوم بتصميمه
05:43	العنصر Template جرعة إضافية سنتعرف على عنصر VIP! وهو العنصر template الذي لا يتحكم بمحتواه المتصفح ولا يتدخل في شؤونه!
06:45	إضافة template داخل Shadow DOM تمرين سنتعرف على كيفية إضافة محتوى template على محتوى العنصر في منطقة Shadow
07:40	الخانات ذات الأسماء Named Slots وصلنا لمرحلة التعرف على slots وهي الخانات التي تحجز مكان للمحتوى داخل العناصر المخصصة ليتم ملأها من الخارج!
03:37	المحتوى الافتراضي والخانة الافتراضية Fallback & default slot باستخدام fallback نستطيع تعيين قيم افتراضية للخانات ويمكننا جمع العناصر التي لا تحتوي على خانات لتصبح في خانة واحدة في هذا الدرس
المشروع الأول #1 + سنقوم بهذا المشروع بالتدرب على ماتعلمناه وتطبيقه في تنفيذ مشروع حاسبة تستخدم HTML + CSS + Javascript
02:36	تعريف بالمشروع، مالذي سوف نقوم ببناؤه؟ سنقوم بهذا الدرس بشرح المشروع الذي سوف نقوم ببناءه مع بعض النصائح قبل البدء
08:12	هيكل المشروع وبناء الحاسبة HTML جرعة إضافية سنقوم بهذا الدرس ببناء الهيكل الخاص بالحاسبة ومحتويات الواجهة الرسومية
13:39	ضبط تصميم المشروع باستخدام CSS الآن سنقوم بتصميم شكل الحاسبة من خلال CSS
02:57	كيفية ربط الواجهة مع JavaScript جرعة إضافية سنقوم بهذا الدرس بالتعرف على "تعدد" الطرق التي يمكن من خلالها ربط HTML + JavaScript
04:58	ضبط Event Listeners تمرين سنحتاج في هذا المشروع لاستخدام Events حتى نعرف على ماذا قام المستخدم بالضغط في الصفحة وهذا ماسنقوم به
04:09	إجراء العمليات الحسابية باستخدام Eval تمرين سنقوم بهذا الدرس باستخدام الدالة eval التي تقوم بتنفيذ "نص" يرسل لها ليتحول إلى أمر برمجي
03:18	حل المشاكل باستخدام Try & Catch مع Eval تمرين سنقوم بهذا الدرس بحل المشاكل التي قد تحدث عند استخدام eval مع Try & Catch
مقال	تحميل مشروع الحاسبة جرعة إضافية ستجد في هذا الدرس مشروع الحاسبة قابل للتحميل
المشروع الثاني #2 + سنقوم بهذا المشروع بإنشاء تطبيق للملاحظات الشخصية والذي سوف يضم عدد من المفاهيم الكبيرة مثل Promises, Events, IndexedDB, Interactions, DOM
05:43	مقدمة مشروع تطبيق الملاحظات - مالذي سنقوم ببناؤه؟ سنقوم بهذا الدرس بالتعرف على المشروع وكيفية بناؤه وماهي التقنيات التي سوف نستخدمها
04:45	هيكل المشروع وبناء Notes Class سنتعرف على بنية المشروع الآن وسنقوم ببناء الدوال الرئيسية في Notes Class
03:50	إنشاء Promise للاتصال بقاعدة البيانات IndexedDB سنقوم بهذا الدرس بالتعرف على كيفية استخدام Promises في الواقع وكيفية ربطها مع IndexedDB Events
02:55	التعامل مع ترقية قاعدة البيانات upgradeneeded سنقوم بهذا الدرس ببناء Object Stores خاصة بالمشروع وسنتعرف على طريقة التعامل مع الحدث upgradeneeded
06:13	إنشاء دالة مشتركة للاتصال بقاعدة البيانات وإدخال البيانات جرعة إضافية سنقوم بهذا الدرس ببناء دالة جديدة مشتركة بين بقية الدوال لكي تقوم بربطها مع قاعدة البيانات
03:08	حذف وتعديل البيانات المدخلة سنقوم بهذا الدرس ببناء الدوال التي نحتاجها لتعديل أو حذف البيانات المدخلة سابقا في قاعدة البيانات
04:51	الحصول على كل المدخلات وكيفية حذف الكل سنقوم بهذا الدرس بالتعرف على كيفية الحصول على كل البيانات المدخلة من خلال Cursor وكيف يمكننا أيضا تنظيف جميع المدخلات سابقا
04:31	بناء هيكل HTML جرعة إضافية سنقوم بهذا الدرس ببناء هيكل HTML للمشروع الخاص بنا وتوزيع مناطق العرض في التطبيق
04:54	إدخال الملاحظات المكتوبة في HTML Form سنقوم بهذا الدرس بالتعرف على كيفية إرسال البيانات المكتوبة داخل نموذج البيانات لقاعدة البيانات ثم حفظها
03:02	الحصول على البيانات وبناء مصفوفة خاصة بها تمرين سنقوم بهذا الدرس بالاتصال بقاعدة البيانات ثم الحصول على البيانات وبعد ذلك سنقوم بإضافة لمصفوفة
05:44	عرض الملاحظات في DOM تمرين بعد الحصول على الملاحظات من قاعدة البيانات سنقوم بهذا الدرس بعرضها على DOM
05:39	حذف الملاحظات عند النقر عليها سنقوم بهذا الدرس بربط حدث يعمل عند النقر على زر الحذف ثم إزالة الملاحظة من قاعدة البيانات و DOM
06:45	إدراج نموذج تحرير الملاحظات تمرين حان وقت بناء دالة تقوم بإدخال نموذج لتحرير الملاحظة في DOM لنتمكن من تحريرها وحفظ التعديلات الجديدة
07:55	إرسال التعديلات لقاعدة البيانات وتحديث DOM تمرين سنقوم بهذا الدرس بإرسال الملاحظة التي تم تعديلها لقاعدة البيانات ثم تحديث DOM ليظهر الملاحظات التي تم تعديلها بالتعديل الجديد
03:00	عكس ترتيب العرض جرعة إضافية سنقوم بهذا الدرس بتشغيل خاصية عكس الترتيب للملاحظات حسب المعرف الخاص بها
03:51	حذف كل المدخلات من قاعدة البيانات جرعة إضافية سنقوم بهذا الدرس بتفعيل زر حذف الكل ليقوم بحذف المدخلات في قاعدة البيانات ثم مسح المدخلات الموجودة على DOM
مقال	(هديتك) تحميل تطبيق الملاحظات ستجد في هذا الدرس هديتك ، مشروع الملاحظات الذي قمنا بإنشاؤه قابل للتحميل
عرض الكل + إخفاء الكل -

دورات يوصى بها

دورة jQuery جافا سكربت من الصفر للاحتراف

دورة إدارة نسخ البرمجة باستخدام git

دورة استضافة المواقع: كيف تنشر موقعك على الإنترنت

دورة البرمجة باستخدام جافا سكريبت Javascript

جافاسكربت من اللغات القوية في مجال تطوير الويب وتعمل بشكل أساسي على متصفحات الإنترنت كما أنها أصبحت تعمل على تطبيقات الهواتف الذكية من خلال إطارات العمل الشهيرة مثل Ionic - React Native - Vue Native

849 ر.س.

إضافة للسلة

849 ر.س.

المستوى : الجميع

مدة الدراسة : من 6 ~ 9 أسابيع

الدروس : 275

التمارين : 32

الوقت المُسجل : 21:15:02 ساعات

آخر تحديث : 2024/01

وصول دائم للمحتوى

ستحصل على شهادة

اسأل المدرب في أي وقت

متابعة مشاريعك مع المدرب

تسويق سيرتك الذاتية ومشاريعك

مشاريع مميزة لطلاب الدورة

صفحة شخصية

هذه الصفحة مبنيه على شكل لينكس terminal ألقِ نظره عليها. هذه الصفحة عباره عن صفحة شخصية لعبدالله الزهراني. تجد في هذه الصفحة معلومات خاصه بعبدالله الزهراني مثل مهاراته ومشاريعه اللي سواها وكيف تتواصل معاه.

@AbdullahAlzhrani

Graduate Plan

إضافة تساعد الطلاب في الجامعات على إعداد خطة التخرج وحساب المعدل التراكمي.

@mohsowa

تتبع القراءة

تطبيق يمكنك من متابعة قراءة الكتب حيث تستطيع من خلاله تسجيل تاريخ البدء في الكتاب والانتهاء منه ومعرفة التقدم اي عدد الصفحات التي تم قراءتها وكتابة مراجعة عن الكتاب

@Asma2021

عرض جميع مشاريع هذه الدورة

مجتمع الدورة

Send coordinate from JavaScript to sql database

@MontherG منذ 3 سنوات

التعّديل على كل عناصر الكلاس

@saadaljuhani10 منذ 3 سنوات

فتح رابط داخل رابط

@alsharafi منذ 3 سنوات

سؤال بخصوص دورة javascript لـ المدرب : عبدالمجيب

@Azzam113 منذ 3 سنوات

الذهاب إلى مجتمع هذه الدورة

المدرب

عبدالمجيب محمد الحميد

مدرب في فلكس كورسز وقائد فريق التطوير والبرمجة في هذا الموقع الرائع. إذا كنت ترغب بمعرفة المزيد عني يمكنك زيارة موقعي الشخصي.

المزيد ...

الآراء

تحميل المزيد

دورة البرمجة باستخدام جافا سكريبت Javascript

تعرف على الدورة وعلى لغة Javascript

ماذا سنتعلم في هذه الدورة؟

سنقوم بتنفيذ أكثر من مشروع

التعامل مع المتغيرات Variables

التعرف والتعامل مع أنواع البيانات Data Types

الأحداث Events

حلقات التكرار Loop

المنطق البرمجي والشروط Logic

الدوال البرمجية Functions

مصفوفات البيانات Arrays

الكائنات Objects

التعرف على نسخ جافاسكربت ES5, ES6

المجالات البرمجية Scopes

التعديل على محتوى الصفحات DOM

المؤثرات البصرية Animation

البرمجة الشيئية OOP

التعامل مع AJAX

التعامل مع JSON

كيفية التعامل مع الكعكات cookies

التخاطب مع المتصفح BOM

الفحص وحل المشاكل البرمجية Debugging

التعامل مع الأخطاء البرمجية Error handling

جودة وتنسيق البرمجة Code Style & Quality

التعامل مع Promises async / await

الاتصالات الشبكية Network Requests

تخزين البيانات localStorage / indexedDb

وصف الدورة

المتطلبات

هذه الدورة تتوفر في مسارات

مسار Front-End Development

مسار Full Stack Development

منهج هذه الدورة

المقدمة -

الحقيبة التدريبية (هديتك هنا) +

الأساسيات +

مدخل إلى أنواع البيانات Data Types +

التفاعل مع المستخدمين Interactions +

المنطق البرمجي Logic +

حلقات التكرار Loop +

الدوال (الوظائف) Functions +

الكائنات Objects +

الأرقام Numbers +

النصوص "السلاسل" Strings +

المصفوفات Arrays +

الوقت والتاريخ Date & Time +

ترميز كائنات جافاسكربت JSON +

الجدولة والتوقيت Scheduling and Timing +

استخدامات متقدمة في Functions & Objects +

البرمجة الكائنية (الشيئية) Object Oriented Programming OOP +

التعامل مع الأخطاء Error Handling +

الوعود Promises +

الموديولز (الوحدات) Modules +

التعامل مع الصفحات Document DOM +

الأحداث في الواجهة UI Events +

أحداث النماذج Form events +

الأحداث في الصفحات Page Events +

النوافذ الخارجية Popup Windows +

الإتصالات الشبكية Network Requests +

الكعكات Cookies +

تخزين البيانات LocalStorage / SessionStorage +

قواعد البيانات IndexedDB +

العناصر المخصصة Custom Components +

المشروع الأول #1 +

المشروع الثاني #2 +

دورات يوصى بها

دورة البرمجة باستخدام جافا سكريبت Javascript

مشاريع مميزة لطلاب الدورة

صفحة شخصية

Graduate Plan

تتبع القراءة

مجتمع الدورة

المدرب

عبدالمجيب محمد الحميد