Kotobati - الكافى فى برمجة جافاسكربت الجزء الاول

‫‪8‬‬ ‫‪4‬‬
‫الكافى‬
‫فى‬
‫‪JavaScript‬‬
‫الجزء االول‬
‫ابو حبيب الحسينى‬

‫‪1‬‬ ‫رقم الصفحة‬ ‫‪Abu Habib Al-Husini‬‬ ‫كتاب الكافى فى جافاسكربت الجزء االول‬
‫ملحوظة مهمة جدا‬
‫ان وجود الكلمات االنجليزية فى وسط الجمل العربية ينقل بعض الكلمات من مكانها فتظهر‬
‫الجمل بشكل غير صحيح ويصعب فهما وهذا عيب فى الترميز (يو تى اف)‬
‫مثال على هذا الكالم‬
‫او>‪ <body‬يمكن وضع الكود في‬ ‫‪.‬أو في كليهما ‪ HTML‬صفحة>‪<head‬‬
‫الحظ هنا ان الجملة اصبحت غير مفهومة الى حد ما او غير مرتبة بشكل‬
‫صحيح الن بعض الكلمات نقلت من مكانها بسبب وضع كلمات انجليزية‬
‫وسط الجمل العربية فافى مثل هذة الحاالت حاول ان تستنتج الجمله بنفسك‬
‫وتفهما‬
‫حاولنا تقليل هذا العيب قدر المستطاع بستخدام بكتابة المصطلحات‬

‫االنجليزية باللغة العربية مثل (سي اس اس) او (نود جى اس) وكذلك نقلنا‬
‫اتجاة الصفحة من اليسارى الى اليمين لتفادى هذا العيب ولالسف لم تتم‬
‫المعالجة بنسبة مئة بالمئه‬
‫فهرس الكتاب‬
‫‪...................................................................................3‬ملحوظة مهمة جدا‬
‫‪...........................................................................................5‬فهرس الكتاب‬
‫‪........................................................15‬مقدمة قصيرة عن جافاسكربت‬
‫‪............................................................17‬ماذا ستتعلم فى هذة السلسة‬
‫‪..............................................18‬ما هى برامج جافاسكربت المستقلة‬
‫مميزات جافاسكربت فى برمجة التطبيقات المستقلة‬
‫‪.........................................................................19‬والسيرفرات وااللعاب‬
‫‪.........................................................................................19‬الميزة االولى‬
‫‪.........................................................................................20‬الميزة الثانية‬
‫‪..........................................................................................21‬الميزة الثالثة‬
‫‪.........................................................................................22‬الميزة الرابعة‬
‫‪......................................................................................23‬الميزة الخامسة‬
‫‪.....................................................................................24‬الميزة السادسة‬
‫‪.......................................................................................25‬الميزة السابعة‬
‫‪.........................................................................................26‬الميزة الثامنة‬
‫‪................................................................................27‬عيوب جافاسكربت‬
‫‪....................................................................................................28‬ملحوظة‬
‫‪.............................................................28‬فوائد التعلم من خالل األمثلة‬
‫‪...........................................................................................28‬يعنى بختصار‬
‫‪.............................29‬كيف استخدام جافاسكربت فى تغير المحتوى‬
‫‪......................................................................................30‬تغيير الخصائص‬
‫‪....................................................................30‬كيف تغيير قيم الخصائص‬
‫‪..............................................................................31‬كيف اخفاء العناصر‬
‫‪.............................................................31‬كيف اظهار العناصر المخفية‬
‫‪ <script>.....................................................................................32‬العالمة‬
‫‪.....................................................................................32‬وظائف وأحداث‬
‫‪......................32‬كيف اضافة بلوكات من اﻻكواد فى نفس الصفحة‬
‫‪.................................................................33‬قسم الهد او راس الصفحة‬
‫‪..33‬اكتب جافاسكربت داخل البودى واستدعيها من داخل البودى‬
‫‪................................................34‬كتابة جافاسكربت فى ملف خارجى‬
‫‪.................................................35‬مزايا جافاسكربت فى ملف خارجى‬
‫‪..................................................................................35‬المراجع الخارجية‬
‫‪...........................................................................................36‬دوال االخراج‬
‫‪..........................................................36‬دوال تمكنك من عرض البيانات‬
‫‪HTML....................................................36‬استخدام المحتوى الداخلي‬
‫‪........................................................37‬كيف كتابة البيانات فى الصفحة‬
‫‪............................................................38‬كيف اظهار رسالة للمستخدم‬
‫‪...........................................................39‬كيف التسجيل داخل الكونسل‬
‫‪..................................................40‬الطباعة الخارجية فى جافاسكربت‬
‫‪......................................................40‬تعريف البيانات فى جافاسكربت‬
‫‪............................................................41‬كيف تكوين البيانات البرمجية‬
‫‪......................................................41‬كيف اﻻعالن عن متغيرات عديدة‬
‫‪...............................................................................42‬المسافات الفارغة‬
‫‪.........................42‬طول السطر فى جافاسكربت وفواصل األسطر‬
‫‪...............................................................................................43‬كتل اﻻكود‬
‫‪................................................43‬الكلمات المحجوزة فى جافاسكربت‬
‫‪.........................................................................44‬طرق انشاء المتغيرات‬
‫‪...................................................................................44‬التعامل مع القيم‬
‫‪..............................................................................45‬التعامل مع الحروف‬
‫‪................................................................................................45‬المتغيرات‬
‫‪..............................................................................45‬المعامالت الحسابية‬
‫‪.................................................................................................46‬التعبيرات‬
‫‪................................................................................46‬الكلمات المحجوزة‬
‫‪.................................................................................................47‬التعليقات‬
‫‪............................................................................47‬المعرفات او الأسماء‬
‫‪....................................................................................................48‬ملحوظة‬
‫‪...............................................................48‬احظر حساسة حالة األحرف‬
‫‪...........................................................................................48‬تكوين الجمل‬
‫‪...........................................................................................49‬ترميز الكتابة‬
‫‪....................................................................................49‬انشاء التعليقات‬
‫‪........................................................49‬كيف انشاء تعليقات سطر واحد‬
‫‪................................................50‬كيف انشاء تعليقات متعددة األسطر‬
‫‪.......................................................50‬استخدام التعليقات لمنع التنفيذ‬
‫‪...........................................................................51‬متغيرات جافاسكربت‬
‫‪.................................................................................52‬ما هي المتغيرات؟‬
‫‪...................................................................53‬؟ متى استخدام الكلمة‪var‬‬
‫‪..............................................................53‬؟ متى استخدام الكلمة‪const‬‬
‫‪........................................................................53‬استخدام معمالت الجبر‬
‫‪....................................................................................................54‬ملحوظة‬
‫‪..............................................................54‬ما هى معرفات جافاسكربت‬
‫‪....................................................................................................54‬ملحوظة‬
‫‪..........................................................................................54‬عامل التعيين‬
‫‪....................................................................................................55‬ملحوظة‬
‫‪..........................................................................55‬أنواع البيانات السائدة‬
‫‪.........................................................................55‬كيف اإلعالن عن متغير‬
‫‪....................................................................................................56‬ملحوظة‬
‫‪........................................56‬كيف عمل اعالن واحد‪ ،‬لجميع المتغيرات‬
‫‪................................................................57‬كيف جعل القيمة غير محدد‬
‫‪..................................................................57‬إعادة اإلعالن عن متغيرات‬
‫‪....................................................................................................58‬ملحوظة‬
‫‪.....................................................................58‬انشاء العمليات الحسابية‬
‫‪....................................................................................................59‬ملحوظة‬
‫‪.....................................................................59‬استخدام عالمة الدوالر ‪$‬‬
‫‪................................................................60‬جافاسكربت و االندرسكول‬
‫‪......................................60‬احظر هذا الخطا عند استخدام الكلمة ‪Let‬‬
‫‪.............................................................................61‬ما هو نطاق الكتلة }{‬
‫‪...............................................................62‬إعادة اإلعالن عن المتغيرات‬
‫‪......................................................................62‬إعادة اإلعالن للمتغيرات‬
‫‪...................................64‬كيف استخدام المتغيرات قبل االعالن عنها‬
‫‪.........................................................................64‬استخدام الكلمة ‪const‬‬
‫‪.......................................................................65‬خصائص الكلمة كونست‬
‫‪.................................................................................65‬يجب أن يتم تعيينه‬
‫‪.............................................................................65‬؟‪ const‬متى تستخدم‬
‫‪.........................................................................66‬الكائنات والمصفوفات‬
‫‪........................................................66‬تطبيق عملى على المصفوفات‬
‫‪........................................................................67‬مثال اخر على الكائنات‬
‫‪...................................................................67‬نطاق المتغير داحل الكتلة‬
‫‪.........................................................68‬كيف إعادة اإلعالن عن المتغير‬
‫‪......................................................69‬المذيد عن الرفع واعادة االعالن‬
‫‪................................................................71‬أنواع معامالت جافاسكربت‬
‫‪.........................................................71‬معامالت جافاسكربت الحسابية‬
‫‪...............................................................72‬معامالت تعيين جافاسكربت‬
‫‪..........................................73‬إضافة ودمج النصوص فى جافاسكربت‬
‫‪..........................................................................74‬إضافة نصوص وأرقام‬
‫‪..................................................................................74‬معامالت المقارنة‬
‫‪............................................75‬عوامل المنطقية فى ووضع الشروط‬
‫‪......................................................................................75‬معامالت االنواع‬
‫‪....................................................................................75‬معامالت ‪Bitwise‬‬
‫‪..............................................................................76‬المعامالت الحسابية‬
‫‪..................................................76‬كيف استخدام المعامالت الحسابية‬
‫‪........................................76‬مذيد من االمثلة على العمليات الحسابية‬
‫‪...................................................................................77‬ما هى المعامالت‬
‫‪.....................................................77‬كيف االستخدام فى عملية الجمع‬
‫‪.......................................................................................................78‬الطرح‬
‫‪......................................................................................................78‬الضرب‬
‫‪....................................................................................................78‬القسمة‬
‫‪...........................................................................................79‬بقية القسمة‬
‫‪...........................................................................79‬الجمع بالذيادة الثابتة‬
‫‪.......................................................................................................79‬الطرح‬
‫‪..........................................................................................................80‬األس‬
‫‪..............................................................80‬أسبقية المشغل فى التنفيذ‬
‫‪....................................................................................................81‬ملحوظة‬
‫‪...........................................................81‬تعرف على المشغالت باالمثلة‬
‫‪....................................................82‬مشغالت التعيين فى جافاسكربت‬
‫‪...........................................................................82‬مشغلي مهمة التحول‬
‫‪ Bitwise.........................................................................82‬مشغلي تعيين‬
‫‪..................................................................82‬مشغلي التعيين المنطقي‬
‫‪.................................................................................................82‬المشغل =‬
‫‪..............................................................................................83‬المشغل ‪=+‬‬
‫‪...............................................................................................83‬المشغل =‪-‬‬
‫‪..............................................................................................84‬المشغل =*‬
‫‪............................................................................................84‬المشغل =**‬
‫‪...............................................................................................84‬المشغل =‪/‬‬
‫‪.............................................................................................84‬المشغل =‪%‬‬
‫‪...............................................................................................85‬العامل <<=‬
‫‪............................................................................................85‬المشغل >>=‬
‫‪..........................................................................................85‬المشغل =>>>‬
‫‪..............................................................................................86‬المشغل =&‬
‫‪...............................................................................................86‬المشغل |=‬
‫‪..............................................................................................86‬المشغل ^=‬
‫‪...........................................................................................87‬المشغل &&=‬
‫‪..............................................................................................87‬المشغل ||=‬
‫‪............................................................................................88‬المشغل =??‬
‫‪............................................................................88‬أنواع البيانات العامة‬
‫‪......................................89‬أمثلة على انشاء انواع من البيانات العامة‬
‫‪....................................................................................................89‬ملحوظة‬
‫‪...........................................................................89‬مفهوم أنواع البيانات‬
‫‪....................................................................................................90‬ملحوظة‬
‫‪...........................................................91‬أنواع جافاسكربت الديناميكية‬
‫‪.............................................................................91‬نصوص جافاسكربت‬
‫‪.....................................................................92‬األرقام فى جافاسكربت‬
‫‪...................................................................................92‬األسية فى الجبر‬
‫‪....................................................................................................93‬ملحوظة‬
‫‪................................................................................94‬نوع البيانات ‪BigInt‬‬
‫‪..................................................94‬جافاسكربت و االساليب المنطقية‬
‫‪............................................................95‬المصفوفات فى جافاسكربت‬
‫‪...................................................................95‬الكائنات فى جافاسكربت‬
‫‪...............................................................96‬كيف معرفة االنواع للبيانات‬
‫‪.....................................96‬االعالن عن نوع غير معرف وليس له قيمة‬
‫‪.........................................................................................97‬القيم الفارغة‬
‫‪..................................................................97‬الوظائف فى جافاسكربت‬
‫‪......................................................................97‬كيف بناء جملة الوظيفة‬
‫‪........................................................................98‬كيف استدعاء الوظيفة‬
‫‪............................................98‬التحكم فى االرجاع من داخل الوظيفة‬
‫‪.....................................................................99‬لماذا نستخدم الوظائف؟‬
‫‪............................................99‬استخدام الوظيفة الرجاع ناتج العملية‬
‫‪...........................................100‬كيف استخدام الوظائف كقيم متغيرة‬
‫‪...................................................................100‬نطاق المتغيرات المحلية‬
‫‪............................................................................101‬كائنات جافاسكربت‬
‫‪.......................................................................................102‬تعريف الكائن‬
‫‪.................................................................................102‬خصائص الكائنات‬
‫‪............................................................102‬الوصول إلى خصائص الكائن‬
‫‪..........................................................................................103‬طرق الكائن‬
‫‪.....................................104‬كيف االشارة الى الكائن بدون ذكر اسمة‬
‫‪......................................104‬تشير الكلمة المحجوزة إلى كائن ‪، this.‬‬
‫‪.................................................................................................104‬ملحوظة‬
‫‪.............................................................................................104‬أنظر أيضا‪:‬‬
‫‪..................................................................104‬كيف استخدام كلمة ذيس‬
‫‪......................................................104‬كيف الوصول الى اعضاء الكائن‬
‫‪...................................................................105‬ال تستخدم هذة الطريقة‬
‫‪............................................................................105‬أحداث جافاسكربت‬
‫‪ HTML.........................................................................................106‬أحداث‬
‫‪................................................................107‬أالحداث الشائعة لــ ‪HTML‬‬
‫‪...........................................................107‬معالجات أحداث جافاسكربت‬
‫‪...........................................................................108‬التعامل مع النصوص‬
‫‪...................................................109‬كيف معرفة عدد حروف النصوص‬
‫‪..............................................................109‬كيف استثناء بعض الحروف‬
‫‪...................................................................110‬كيف تحديد طول السطر‬
‫‪................................................111‬طريقة استخدام النصوص ككائنات‬
‫‪......................................................................................113‬دوال النصوص‬
‫‪.........................................................................................114‬الدالة ‪length‬‬
‫‪........................................................114‬كيف استخراج أجزاء من النص‬
‫‪.............................................................114‬طرق التقطيع الدالة االولى‬
‫‪.................................................................................................115‬ملحوظة‬
‫‪...............................................................116‬تابع طرق تقطيغ النصوص‬
‫‪...........................................117‬كيف البحث واالستبدال فى النصوص‬
‫‪...............................................................................................117‬ملحوظة‪1‬‬
‫‪...............................................................................................118‬ملحوظة‪2‬‬
‫‪...............................................................................................119‬ملحوظة‪3‬‬
‫‪..................................................................................119‬دالة)(‪replaceAll‬‬
‫‪...............................................................................................119‬ملحوظة‪4‬‬
‫‪........................................119‬التحويل إلى األحرف الكبيرة والصغيرة‬
‫‪...........................................................................120‬دالة)( ‪toUpperCase‬‬
‫‪............................................................................120‬دالة)(‪toLowerCase‬‬
‫‪.........................................................................................120‬الدالة ‪concat‬‬
‫‪.................................................................................................121‬ملحوظة‬
‫‪.............................................................................................121‬دالة )(‪Trim‬‬
‫‪...............................................................................121‬الدالة)( ‪TrimStart‬‬
‫‪....................................................................................122‬دالة)( ‪TrimEnd‬‬
‫‪............................................................................122‬دوال اخرى لالضافة‬
‫‪...................................................................................122‬دالة)( ‪PadStart‬‬
‫‪.................................................................................................123‬ملحوظة‬
‫‪.................................................................................123‬دعم المتصفحات‬
‫‪...................................................................................123‬الدالة)( ‪PadEnd‬‬
‫‪.................................................................................................124‬ملحوظة‬
‫‪.................................................................................124‬دعم المتصفحات‬
‫‪...........................................124‬كيف استخراج أحرف معينة من النص‬
‫‪....................................................................................124‬الدالة)( ‪charAt‬‬
‫‪...........................................................................125‬الدالة)(‪charCodeAt‬‬
‫‪.......................................................................125‬جلب الحرف بالفهرس‬
‫‪.................................................................................................125‬ملحوظة‬
‫‪...................................................................126‬تحويل نص إلى مصفوفة‬
‫‪..................................................................126‬الطريقة العادية للتحويل‬
‫‪.......................................127‬كتاب المرجع الكامل فى الجافاسكربت‬
‫‪..............................................................127‬كيف جلب الفهرس للحرف‬
‫‪.................................................................................................127‬ملحوظة‬
‫‪..........................................................................128‬الدالة )( ‪lastIndexOf‬‬
‫‪...........................................................................129‬استخدام دالة البحث‬
‫‪.................................................................................................129‬ملحوظة‬
‫‪.............................................129‬كيف البحث اﻻحترافى فى النصوص‬
‫‪.................................................................................................130‬ملحوظة‬
‫‪................................................................................130‬الدالة)( ‪matchAll‬‬
‫‪..............................................................................................131‬ملحوظات‬
‫‪..............................................131‬كيف معرفة نص البحث موجود ام ﻻ‬
‫‪..............................................................................................132‬ملحوظات‬
‫‪...............................................132‬طرق اخرى للتشييك على النصوص‬
‫‪..............................................................................................133‬ملحوظات‬
‫‪.......................................................133‬كيف البحث فى نهاية النصوص‬
‫‪..............................................................................................134‬ملحوظات‬
‫‪......................................................................................134‬االقتباس الحر‬
‫‪.......................................................135‬اقتباسات داخل االقتباس الحر‬
‫‪..............................................................................135‬تابع اﻻقتباس الحر‬
‫‪.................................................................................................135‬ملحوظة‬
‫‪..................................................136‬مثال اخر لستخدام االقتباس الحر‬
‫‪....................................................136‬طريقة دمج اكواد داخل النصوص‬
‫‪........................................................................................137‬قوالب ‪HTML‬‬
‫‪.................................................................................137‬دعم المتصفحات‬
‫‪..............................................137‬كتاب المرجع الكامل فى جاسكربت‬
‫‪..................................................................137‬طرق التعامل مع اﻻرقام‬
‫‪..................................................................................138‬االعداد الصحيحة‬
‫‪...................................................................................139‬االعداد العشرية‬
‫‪..........................................................139‬إضافة األرقام والنصوص معا‬
‫‪................................................................................141‬النصوص الرقمية‬
‫‪.............................................................................................142‬الكلمة‪NaN‬‬
‫‪....................................................................................144‬القيمة اال نهاية‬
‫‪................................................................................145‬السداسي عشري‬
‫‪...................................................................................146‬أالرقام ككائنات‬
‫‪............................................................................146‬ال ينصح باستخدامها‬
‫‪.................................................................................147‬امثلة على ‪BigInt‬‬
‫‪......................................................................147‬مكون اﻻعداد الصحيحة‬
‫‪.....................................................148‬كيفية إنشاء نوع البيانات ‪BigInt‬‬
‫‪............................................................................................148‬تابع ‪BigInt:‬‬
‫‪........................................................................................149‬مشغل ‪BigInt‬‬
‫‪..............................................................................................149‬ملحوظات‬
‫‪...................................................................150‬الكسور العشرية الكبيرة‬
‫‪.......................150‬استخدم الهيكس‪ ،‬أوالكتال اوالثنائي فى ‪BigInt‬‬
‫‪.....................................................................................150‬تقريب المكون‬
‫‪.................................................................................151‬دعم المتصفحات‬
‫‪...................151‬الحد األدنى والحد األقصى لألعداد الصحيحة اآلمنة‬
‫‪.........................................................................151‬طرق او دوال األرقام‬
‫‪..............................................................151‬طريقة )(‪Number.isInteger‬‬
‫‪.....................................................152‬طريقة )(‪Number.isSafeInteger‬‬
‫‪..................................................................152‬طرق ا رقام جافاسكربت‬
‫‪ toString ()..............................................................................152‬طريقة‬
‫‪ toExponential()....................................................................153‬طريقة‬
‫‪ toFixed().................................................................................153‬طريقة‬
‫‪ toPrecision().........................................................................154‬طريقة‬
‫‪..................................................................154‬طرق اخرى لجلب القيمة‬
‫‪...........................................................155‬لتحويل المتغيرات إلى أرقام‬
‫‪...............................................................155‬الطريقة االولى )(‪Number‬‬
‫‪..........................................................155‬كيف تحويل التاريخ)(‪Number‬‬
‫‪...............................................................156‬الطريقة الثانية )(‪parseInt‬‬
‫‪..........................................................156‬الطريقة الثالثة )( ‪parseFloat‬‬
‫‪......................................................................157‬شرح اهم دوال االرقام‬
‫‪..................157‬ال يمكن استخدام األساليب الرقمية في المتغيرات‬
‫‪....................................................................158‬دالة)(‪Number.isInteger‬‬
‫‪...........................................................158‬دالة)(‪Number.isSafeInteger‬‬
‫‪................................................................158‬دالة)(‪Number.parseFloat‬‬
‫‪.................................................................................................159‬ملحوظة‬
‫‪.................................................................159‬الدالة)(‪Number.parseInt‬‬
‫‪................................................160‬كتاب المرجع الكامل لجافاسكربت‬
‫‪.................................................................................160‬خصائص االرقام‬
‫‪...................................................................................160‬خاصية ابسيلون‬
‫‪.................................................................................................161‬ملحوظة‬
‫‪...........................................................................161‬خاصية ‪MAX_VALUE‬‬
‫‪.....................161‬ال يمكن استخدام خصائص األرقام في المتغيرات‬
‫‪............................................................................162‬خاصية ‪MIN_VALUE‬‬
‫‪..........................................................162‬خاصية ‪MAX_SAFE_INTEGER‬‬
‫‪............................................................162‬خاصية‪MIN_SAFE_INTEGER‬‬
‫‪.............................................................163‬خاصية‪POSITIVE_INFINITY‬‬
‫‪...........................................................163‬خاصية‪NEGATIVE_INFINITY‬‬
‫‪.............................................................................................164‬شرح ‪NaN‬‬
‫‪.........................................................................................164‬المصفوفات‬
‫‪...........................................................165‬لماذا استخدام المصفوفات؟‬
‫‪..........................................................................165‬كيف إنشاء مصفوفة‬
‫‪...................................................................166‬استخدام الكلمة كونست‬
‫‪.......................................................167‬الوصول إلى عناصر المصفوفة‬
‫‪...........................................................167‬كيف تغيير عناصر المصفوفة‬
‫‪.....................................................167‬الوصول إلى المصفوفة بلكاملة‬
‫‪....................................................................168‬المصفوفات هي كائنات‬
‫‪.....................................168‬يمكن أن تكون عناصر المصفوفة كائنات‬
‫‪...........................................................169‬خصائص المصفوفة وطرقها‬
‫‪..........................................................169‬كيف معرفة طول المصفوفة‬
‫‪......................................................169‬كيف الوصول إلى العنصر األول‬
‫‪....................................................170‬كيف الوصول إلى العنصر األخير‬
‫‪.................................................................170‬كيف عرض جميع العناصر‬
‫‪......................................171‬كيف إضافة عناصر فى نهاية المصفوفة‬
‫‪......................................................................172‬المصفوفات الترابطية‬
‫‪.................................................173‬الفرق بين المصفوفات والكائنات‬
‫‪................173‬متى تستخدم المصفوفات و متى تستخدم الكائنات‪.‬‬
‫‪...............................................................173‬كيف استخدام)(‪new Array‬‬
‫‪........................................................174‬كيفية التعرف على المصفوفة‬
‫‪...............................................................................175‬طرق المصفوفات‬
‫‪............................................175‬اوالا تحويل المصفوفات إلى نصوص‬
‫‪............................................................................176‬تعديل المصفوفات‬
‫‪......................................176‬كيف ازالة العنصر االخير من المصفوفة‬
‫‪...............................................177‬كيف اضافة عنصر جديد فى النهاية‬
‫‪.....................................................................................177‬اساليب الحذف‬
‫‪......................................178‬كيف حذف العنصر اﻻول من المصفوفة‬
‫‪.............178‬كيف اضافة عنصر الى البداية والغاء اﻻزاحة للمفاتيح‬
‫‪.....................................................179‬كيف استبدال قيمة عنصر معين‬
‫‪.......................................179‬كيف استخدام مجموع العناصر لالضافة‬
‫‪.............................................................180‬حذف عناصر من المصفوفة‬
‫‪.......................................................................180‬كيف دمج المصفوفات‬
‫‪..............................................181‬اضافة عناصر فى وسط المصفوفة‬
‫‪....................................181‬كيف اضافة عناصر فى وسط المصفوفة‬
‫‪.........................................182‬ازالة عناصر من محددة فى المصفوفة‬
‫‪.......................................................................182‬كيف تجزئة المصفوفة‬
‫‪.................................................................................................183‬ملحوظة‬
‫‪...........................................184‬كيف تحويل المصفوف الى نص عادى‬
‫‪.................................................................................................184‬ملحوظة‬
‫‪................184‬كيف إيجاد القيم القصوى والصغرى في المصفوفة‬
‫‪.................................................184‬كيف الفرز والترتيب للمصفوفات‬
‫‪..........................................................185‬اشهر طرق الفرز للمصفوفة‬
‫‪..........................................................185‬كيف عكس ترتيب المصفوفة‬
‫‪...............................................185‬كيف عمل ترتيب رقمى للمصفوفة‬
‫‪..................................................................................186‬وظيفة المقارنة‬
‫‪.......................................................187‬فرز مصفوفة بترتيب عشوائي‬
‫‪............................................................................187‬طريقة فيشر ييتس‬
‫‪.....................................188‬ابحث عن أعلى أو أدنى قيمة للمصفوفة‬
‫‪ Math.max().........................................................................189‬استخدام‬
‫‪ Math.min()..........................................................................189‬استخدام‬
‫‪ Min / Max................................................................189‬طرق خاصة بي‬
‫‪...................................................................190‬فرز مصفوفات الكائنات‬
‫‪............................................................191‬تكرار مصفوفة جافاسكربت‬
‫‪forEach ().............................................................................................191‬‬
‫‪......................................................................192‬استخدام دالة الخريطة‬
‫‪............................................193‬كيف تصفية المصفوفة والبحث فيها‬
‫‪............................................194‬كيف التقليل والتصفية للمصفوفات‬
‫‪..........................................................195‬ازاحة المصفوفة الى اليمين‬
‫‪.........................................................................196‬تابع طرق المصفوفة‬
‫‪..........................................................................197‬طريقة اخرى للبحث‬
‫‪...................................................198‬كيف التحكم عن طريق الفهارس‬
‫‪ lastIndexOf ()...........................................198‬مصفوفة جافاسكربت‬
‫‪...........................................................................199‬طريقة اخرى للبحث‬
‫‪.......................................................................................200‬دعم المتصفح‬
‫‪...................................................................................200‬دالة)( ‪findIndex‬‬
‫‪.......................................................................................200‬دعم المتصفح‬
‫‪Array.from()........................................................................................201‬‬
‫‪.......................................................................................201‬دعم المتصفح‬
‫‪..........................................201‬كيف الحصول على مفاتيح المصفوفة‬
‫‪.......................................................................................202‬دعم المتصفح‬
‫‪.............................................................................202‬إدخاالت المصفوفة‬
‫‪.......................................................................................202‬دعم المتصفح‬
‫‪...................................................................203‬التتضمن فى المصفوفة‬
‫‪.......................................................................................203‬دعم المتصفح‬
‫‪.....................................................203‬استخدام كونست مع المصفوفة‬
‫‪ (ES6)...................................................................203‬إيكماسكربت ‪2015‬‬
‫‪..........................................................................204‬ال يمكن إعادة تعيينها‬
‫‪.................................................................204‬المصفوفات ليست ثوابت‬
‫‪................................................................204‬يمكن إعادة تعيين العناصر‬
‫‪.......................................................................................205‬دعم المتصفح‬
‫‪..........................................................................205‬تم تعيينه عندما أعلن‬
‫‪.............................................................................206‬نطاق كتلة كونست‬
‫‪.................................................................206‬إعادة تعريف المصفوفات‬
‫‪................................................208‬كتاب المرجع الكامل لجافاسكربت‬
‫جافاسكربت هى وسلة قوية وسريعة للتحكم فى طرق االخراج‬
‫البيانات الى العميل والتحكم فى خصائص العناصر وتغيرها فى اى وقت‬
‫العميل‬
‫البيانات‬
‫طرق االخراج‬
‫جافاسكربت‬
‫المتصفح‬
‫البيانات‬
‫مقدمة قصيرة عن جافاسكربت‬

‫بسم اهلل الرحمن الرحيم‬
‫جافاسكربت هي لغة البرمجة األكثر شعبية في العالم لكونها اللغة المعترف بها من‬
‫منظمة الويب العالميه كلغة اساسية لجميع متصفحات االنترنت فى العالم حيث انها‬
‫مدعومة من مئة بالمئه من متصفحات االنترنت الحديثة فى جميع انحاء العالم وجميع‬
‫انظمة التشغيل المختلفة الحديثة وجميع الشركات المنتجة للمتصفحات على مستوى‬
‫العالم كله بال استثناء وجميع انظمة تشغيل السرفرات بال استثناء ال يوجد سيرفر ويب‬
‫على وجة االرض ال يدعم جافاسكربت يعنى اى تشغيل محلى الى متصفح سواء كان‬
‫هذا للموبايل او الكمبيوتر فهى مدعومة وهى لغة مهمه جدا و يجب تعلمها مهما كان‬
‫تخصصك فى البرمجة النك السيما ستحتاج اليها عند التعامل االحترافى مع اى متصفح‬
‫انترنت محلى او اى سيرفر مهما كانت لغتة االم وهى سهلة التعلم وبسيطة ومختصرة‬
‫وتستطيع من خاللها انتاج تطبيقات مستقلة قائمه بذاتها ال تعتمد على اى سيرفر او‬
‫متصفح ناهيك عن استخدمها فى الجرافيكس داخل برامج ادوبى وغيرها تستطيع تخصيص‬
‫سكربتات داخل ادوبى افتر افكت للخدع السينمائية وكذالك انشاء اسكربتات خاصه‬
‫بالجافاسكربت داخل ادوبى فوتوشوب وسننشاء كتاب خاص باذن اهلل تعالى الاستخدام‬
‫جافاسكربت من داخل الفوتوشوب وكيف تكتب اسمك على االاف الصور وتغير‬
‫الخلفيات وااللون المئات االاف من الصور بضغطة زر واحدة بالجافاسكربت من داخل‬
‫برنامج الفوتوشوب وكذلك جميع برامج ادوبى وكل التطبيقات التى ستخدمها فختصارا‬
‫جافاسكربت تعمل فى اى مكان غير امكانتها المزهلة فى التحكم فى المتصفحات‬
‫لالنترنت وكيف انشاء تطبيقات حرة تعمل على اى نظام تشغيل تتخيلة خاص موبايل‬
‫او كمبيوتر وذلك باستخدام اطار عمل (النود جى اس) هذا االطار الذى اعتبره انا قنبلة‬
‫متفجرة فى عالم التقنيات و البرمجيات وهو بمثابة استقالليه لجافاسكربت حيث‬
‫يجعلها تعمل خارج المتصفح ويتم تحويلها الى لغة الباينارى الثنائية التى يفهما‬
‫الكمبيوتر‬
‫ماذا ستتعلم فى هذة السلسة‬
‫ستتعلم من هذة السلسة (سلسة الكافة فى الجافاسكربت)كل استخدمات اللغة من البداية إلى‬
‫المستوى االحترافى باذن اهلل تعالى وهى خمس اجزاء قابل للذيادة منهم اربع اجزاء متتالية والجزء‬
‫الخامس عبارة عن مرجع شامل لكل دوال اللغة بال اسثناء سيغطى هذا المرجع كل طرق وخصائص‬
‫ودوال وكالسات ومكتبات اللغة كاملة باذن اهلل تعالى‬
‫ما هى برامج جافاسكربت المستقلة‬
‫برنامج الكمبيوتر المستقل هو عبارة عن قائمة من "التعليمات" التي سيتم "تنفيذها"‬
‫تلقائيا بواسطة الكمبيوتر فقط وال تحتاج الى وسيط يعنى برنامج قائم بذاتة ال يحتاج الى‬
‫تطبيقات لتشغيله والمقصود بالوسيط هنا هو المتصفح او السيرفر او برنامج مساعد مثل‬
‫مشغل الفالش الذى ال تستطيع تنفيذ برامج الفالش بدونة و الستخدام جافاسكربت‬
‫مستقلة تعمل بذاتها على اى جهاز يجب تنصيب( النود جى اس) اوال وهو فريمورك‬
‫سيجعلك تستخدم جافاسكربت خارج المتصفح يتم تنفيذها تلقائيا بدون وسيط لتنتج‬
‫تطبيقات لجميع انظمة التشغيل سواء الموبايل او الكمبيوتر و سيجعلك تستخدمها ايضا‬
‫كاسيرفر مثل ال(بى اتش بى) تمام لتنتج مواقع ويب تعتمد على تخزين البيانات‬
‫‪ .‬واستدعائها كالفيسبوك واليوتيوب وغيرهم‬
‫في لغة البرمجة‪ ،‬تسمى تعليمات البرمجة هذه البيانات الثنائية و سميت ثنائية النها‬
‫تتكون من الزيرو و الواحد فقط لن نتطرق الى هذا االن سننتج كتاب خاص لشرح لغة‬
‫البينارى الثانئية ان شاء اهلل تعالى وهى اللغة التى يفهمها اى كمبيوتر والتى يتم‬
‫تحويل جميع لغات البرمجة بختالف انواعها الى هذة اللغة المكونة من الزيرو و الواحد‬
‫فقط وسنتعرف باذن اهلل تعالى فى كتاب لغة البينارى كيف يفهم الكمبيوتر البيانات‬
‫بالتفصيل الغير ممل‬ ‫‪.‬‬
‫يعنى اختصارا برنامج جافاسكربت المستقل عبارة عن قائمة من البيانات البرمجة يتم‬
‫تنفيذها تلقائيا بدون تطبيقات مساعدة حيث انها تترجم للغة الكمبيوتر ترجمة فورية وهذا‬
‫‪ .‬يسمى ال(رن تايم) ترجمة وقت التشغيل‬
‫انما يتم تنفيذ برامج جافاسكربت المدعومة فى صفحات الويب والمعترف بها من ‪،‬‬
‫‪ .‬منظمة الويب العالمية بداخل متصفحات الويب كاجزء من المتصفح‬
‫مميزات جافاسكربت فى برمجة التطبيقات المستقلة‬
‫والسيرفرات وااللعاب‬
‫لالسف الشديد منتشر بين الناس ان لغة جافا وكتلن و سي شارب وغيرهم هما‬
‫افضل لغات لبرمجة االندريد وغيرة من انظمة تشغيل الموبايل وهى معلومة‬
‫غير صحيحة كما سنعرف االن‬
‫اوال ساذكر لك مميزات جافاسكربت التى تنفرد بها فى برمجة تطبيقات مستقلة‬
‫وبرمجة السيرفرات والمواقع وبرمجة انظمة تشغيل الموبايل و الكمبيوتر و‬
‫المميزات الغير موجودة فى اللغات الكبرى مثل جافا وروبى وبايثون وسى‬
‫شارب وغيرها بمعنى انها مميزات حصرية لجافاسكربت سنتعرف عليها االن‬
‫واحدة تلو االخرى ان شاء اهلل تعالى‬
‫الميزة االولى‬
‫هى اكواد جافاسكربت الثابته ومعنى ثابتة اى انها ال تتغير على كل انظمة التشغيل‬
‫الموبايل والكمبيوتر والمتصفحات والسيرفرات وكل شى وهذا يعنى انك ستتعلم مرة‬
‫واحدة فقط اكواد تعمل على كل شى تقريبا مما يجعل االمور فى غاية السهولة وهذا‬
‫على عكس اللغات االخرى فكل نظام تشغيل له مكتباتة الخاصة التى يجب ان‬
‫تستدعيها وتدرس اكواد جديدة تعمل عليها لكل نظام يعنى مثال اذا كنت مبرمج‬
‫بايثون المصنفة ك اسهل لغة فى العالم ال يمكن ان تبرمج ببايثون لالندرويد اال اذا‬
‫قمت باستدعا مكتبة تسمى( اندرويد) وهى مكتبة كبيرة جدا ومتشعبة ناهيك عن‬
‫عشرات المكتبات المساعدة لها كل هذة المكتابات ال تعمل اال لنظام اندريد فقط ثم‬
‫اذا اردة البرمجة ببايثون لالىفون له مكتباتة الخاصة ايضا وعشرات المكتبات المساعدة‬
‫وكذلك جميع لغات البرمجة مما يذيد االمر تعقيدا وصعوبة‬
‫الميزة الثانية‬
‫جافاسكربت تستخدم لغة( السي اس اس) فى تنسيقات واجهة المستخدم فى‬
‫التطبيقات المستقلة والسيرفرات والمواقع وكل شى وهى اسهل لغة تنسيق‬
‫واجهات فى العالم تكتب اسم الخاصية وامامها القيمة فقط كانك تكتب جواب‬
‫لشخص ال يوجد فيها غموض مثل لغات البرمجة المعهودة اعتقد انة ال يوجد‬
‫اسهل منها فى تاريخ البرمجة فى تنسيقات الواجهات فلقد درست انا جميع‬
‫لغات الدت نت من ميكرو زفت حتى لغات البيسك القديمة درستها بدايتا من‬
‫فيجوال بيسك‪ 6‬وحتى اطارات الدت نت واعلم جيدا معنا كلمة صعوبة تنسيق‬
‫الوجهات للتطبيقات المستقلة خصوصا فى سي شارب وكل اصدارات فيشوال‬
‫بسيك القديم والحديثة وجافا وجميع عائلة السي وغيرها حتى بايثون المصنفة‬
‫انها اسهل لغة فى العالم تنسيق الوجهات فيها اصعب من (السي اس اس)‬
‫وحتى لغات انكل قوقل الذى يدعى كذبا انها سهلة مثل لغة( ار) ليست اسهل‬
‫من( السي اس اس) فى تنسيقات واجهة المستخدم فلن تجد منافس لهذة‬
‫الميزة ال تبحث‬
‫الميزة الثالثة‬
‫جافسكربت فى برمجة التطبيقات المستقلة تسخدم ادوات الكنترول الخاصة بل(اتش تى‬
‫ام ال) والمقصود بادوات الكنترول يعنى(ادوات التحكم) مثل االزرار ومربعات الحوار‬
‫والرسائل المنبثقة ومربعات االدخال وغيرها هذة تسمى ادوات التحكم واختصارا لن تجد‬
‫فى تاريخ البرمجة القديد والحديث والماضى والحاضر والذى لم يحضر ادوات تحكم‬
‫اسهل من ادوات (اتش تى ام ال) حتى ادوات (تى كى انتر) التابعه السهل لغة فى‬
‫العالم وهى بايثون بتصنيفات عمو قوقل ليست اسهل من ادوات (اتش تى ام ال)‬
‫ناهيك عن قوة هذة االدوات بعد دعم( النود جى اس) الذى ال حصر لمستودعاتة البرمجية‬
‫وسنتصدر له سلسة كاملة ان شاء اهلل المتعالى‬
‫الميزة الرابعة‬
‫قام موقع (جيتهاب) بتصنيف جافاسكربت فى برمجة السيرفرات باستخدام‬
‫فريمورك (نود جى اس) بانها اسرع ريسبونس وريكويست فى العالم يصل الى‬
‫‪ 600‬ارسال فى الثانية الواحدة وهذا اسرع من( بى اتش بى) عشر مرات والسر‬
‫الكامن فى هذة السرعة الجبارة و الرهيب هى ان برمجة السيرفرات فى الخوادم‬
‫االخرى تعتمد اعتماد كلى على( بيروسيسور) السيرفر يعنى بختصار اذا‬
‫اعداد كبيرة جدا دخلت بالماليين الى الموقع سيكون حمل كبير جدا على‬
‫السيرفر و سيختفى الموقع من على االنترنت بمجرد سقوط السيرفر من كثرة‬
‫التحميل علية ولكن مع سيرفر جافاسكربت االمر مختلف تماما فتستطيع‬
‫تخصيص جزء كبير جدا من كود جافاسكربت ليطبق على اجهزة العمالء‬
‫مستخدما ماليين البريسوسيرات للعمالء الذين دخلو الى الموقع بسبب دعم‬
‫جميع متصفحات الويب بال استثناء الكواد جفاسكربت مما يؤدى الى سرعة‬
‫كبيرة جدا فى التنفيذ اىا كان نظام تشغيل العميل ال تشغل بالك بهذا االمر‬
‫تاكد ان متصفح العميل يدعم جافاسكربت بنسبة مئة بالمئة فكل‬
‫المتصفحات الحديثة تدعمها بال استثناء وهذا يجعل (بيروسيسور) السيرفر فى‬
‫ثبات وقوة كبيرة ولذلك سيرفر( نود جى اس) هو اخف سيرفر فى العالم و فشل‬
‫اللغات االخرى فى منافستة فى سرعة التنفيذ التى تكمن فى هذة الميزة‬
‫المنتزعة من الخوادم االخرى وميزات اخرى سنذكرها فيما بعد ان شاء اهلل‬
‫تعالى حتى لغة (السى بلص بلص) المشهورة بالقوة و السيطرة و السرعة النها‬
‫تفسر للغة االلة مباشرتا لم تستطع منافسة (نود جى اس) فى السرعة بسبب‬
‫ميزة دعم المتصفحات المنفردة بها جافاسكربت فسرعة (نود جى اس) ليس لها‬
‫منافس لتصبح جافاسكربت هى اللغة الوحيدة فى العالم التى تستطيع تسخير و‬
‫توظيف بيروسوسرات العمالءعبر المتصفحات‬
‫الميزة الخامسة‬
‫خادم جافاسكربت المسمى (نود جى اس) يستطيع دمج اكواد(الباك اند) مع‬
‫(الفرونت اند) وتنفذها دفعه و احدة بسبب ان كل االكواد‬
‫المكتوب( جافاسكربت فى جافاسكربت )كلها اكواد واحدة و مصدر الدعم واحد‬
‫فتنفذ دفعة واحدة مما يؤدى الى ذيادة السرعة فى التنفيذ وهذا مالم تستطع‬
‫فعلة الخوادم االخرى بسبب ان اكواد( الباك اند) فى الخوادم االخرى مختلفة‬
‫عن( الفرونت اند) يعنى مثال بختصار فى لغة (بى اتش بى) تكتب اكواد‬
‫الباكاند بلغة (بى اتش بى) التى تعتمد فى التنفيذ على لغة (بيرل) المحملة‬
‫على السيرفر و (الفرونتاند) يعتمد على ال (فى ‪ )8‬المحمل ايضا على السرفر‬
‫فدمج هذة االكواد مستحيلة الن مصادر الدعم مختلف والبد من كل تقنية ان‬
‫تلجا للمصدر الذى يدعمها للتنفيذ انما فى سيرفر جافاسكربت االمر اكثر سهول‬
‫(البك اند) جافاسكربت و(الفرونت اند) جافاسكربت ايضا تنفذ دفعة وهذة‬
‫احدى الميزات التى تذيد فى سرعة سيرفر جافاسكربت(نود جى اس)‬
‫الميزة السادسة‬
‫فى برمجة السيرفرات االخرى اذا اردت ارسال قيمة متغير من اكواد( الباك اند)‬
‫الى (الفرونت اند) او العكس فهذا امر معقد جدا وستحتاج الى مكتبات خاصة‬
‫لتنفيذة يعنى مثال فى لغة (بى اتش بى) ستحتاج الى مكتبة تسمى ( بى اتش‬
‫بى دت جى اس ) لتنفيذ هذا االمر او انك ستلجا لتقنة اجاكس التى ستجبرك‬
‫على انشاء ملف خاص ل(بى اتش بى) وملف خاص للجافاسكربت الذى‬
‫سيرسل باكواد االجاكس باستخدام مكتبة اخرى ستقوم بتحميلها تسمى‬
‫جيكويرى اجاكس والتى سترسل البيانات الى ملف ال ( بى اتش بى) الذى‬
‫سيعيد ارساله مرة اخرى بعد المعالجة لتعود البيانات للملف االول الذى‬
‫اطلقت البيانات منه و هو ال (فرونت اند ) كل هذة الخطواط الكثيرة و المعقدة‬
‫لكى تقوم فقط بارسال قيمة متغير من اكواد الباك اند الى اكواد الفرونت اند وقد‬
‫تفشل العملية بعد كل هذا التعب اما فى سيرفر جافاسكربت االمر فى منتهى‬
‫السهولة و اليسر فستطيع كتابت الباك اند داخل الفرونت اند بال ادنى مشكلة‬
‫و(الفرونت اند) داخل (الباك اند) بال ادنى مشكله النة ال يوجد لغة دخيلة فى‬
‫السيرفر كلها لغة واحدة ستطبق دفعة واحدة بنقرة واحدة وهى جافاسكربت‬
‫الميزة السابعة‬
‫فى برمجة السيرفرات باللغات االخرى اذا اردت انشاء موقع يعتمد على‬
‫المحتوى الديناميكى من داخل الصفحة مثال فى لغة (بى اتش بى ) انشاء هذا‬
‫االمر ستحتاج الى عمل االف االقواس المتعرجة والتى بدورها ستفصل اكواد‬
‫(بى اتش بى ) عن الصفحة حتى يتعرف عليها السيرفر وينفذها النها تقنية‬
‫مختلفة تعتمد على مصدر خارجى وليست من تقنية المتصفحات وهذا امر‬
‫حقيقتا تنفيذة مرهق جدا وفى بعض االحيان كثرة هذة االقواس المتداخلة تؤدى‬
‫الى حدوث ربكة عند قرائة الكود فيما بعد او تؤدى كثرتها الى اخطا فادحة‬
‫ناهيك عن البطء فى التنفيذ الى جانب انه امر مزعج جدا لكثير من المطورين‬
‫ولكن مع سيرفر جافاسكربت (نود جى اس) لن تحتاج الى فصل االكواد الن كل‬
‫االكواد المكتوبه جافاسكربت لها مصدر واحد مما يسهل عليك الكتابة والتنسيق‬
‫وقرائة الكود وكل شى فى صفحة واحدة‬
‫الميزة الثامنة‬
‫هذة الميزة ساتركك تعاينها بنفسك ادخل على عمو غوغل واكتب فى البحث‬
‫محركات العاب جافاسكربت مفتوحة المصدر او المجانية ولن اخبرك بانك‬
‫ستجد عشرات المحركات االلعاب المجانية التى ستبرهك وكلها احسن من‬
‫‪ ,i`h d[u‬بعضها وبكفائه عالية جدا فجافاسكربت لغة قوية وسريعة فى التحريك‬
‫ولذلك تفضلها معظم الشركات والمطورين المتطوعين فى صنع االلعاب حيث‬
‫ان العاب جافاسكربت خفيفة جداو سريعة و يوجد محرك العاب اسمة (جى‬
‫ديفيلوب) ذو وجهه عربية كاملة العبد الفقير الى اهلل ساهم فى تعريبة بنسة‬
‫‪ 90‬بالمئة عشرات االاف من الجمل وفقنا اهلل فى تعربها والحمد هلل رب‬
‫العالمين ليصبح هذا المحرك االن ذو وجة عربية كاملة ويدعم االخراج لكل‬
‫المنصات الموبايل والكمبيوتر وكل شى مهيئ للمبرمجين وغير المبرمجين فله‬
‫واجهة سحب وافالت واحداث جاهزة وقوالب واشياء اخرى كثيرة انصح بتجربتة‬
‫وستجد العشرات من محركات االلعاب المجانية المنافسة له التى تستخدم‬
‫جافاسكربت ايضا‬
‫عيوب جافاسكربت‬
‫لن اذكر لك عيوب جافاسكربت هنا واذا اردت ان تعرف عيوب جافاسكربت‬
‫اقراء الكتاب الذى سانشرة فى خالل ايام ان شاء اهلل تعالى اسمة الفرق بين‬
‫البرامج الهجينه والبرامج االصلية سيشرح هذا الكتاب كيف يتم تنفيذ البرامج‬
‫الهجينة واالصلية على الكمبيوتر والفرق بينهم‬
‫استخدام محرر "جربه بنفسك"‪ ،‬لن نفرض عليك محرربعينة حيث ان هذة اللغة مدعومة من جميع‬
‫المحررات القديمة والحديثة و المعروفة والغير معروفة حتى المحررات التى صنعت تحت بير السلم تدعم‬
‫جافاسكربت ببراعة وكل المحررات تقريبا ولن تجد صعوبة فى ايجاد محرر ولكن ننصح بالفيجوال ستوديو‬
‫‪.‬كود الن هو الذى سنعمل علية فى هذا الكتاب باذن اهلل تعالى‬
‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬
‫ملحوظة‬
‫‪.‬نوصي بقراءة هذا الكتاب‪ ،‬بالتسلسل المدرج حتى يتيثر عليك الفهم‬
‫‪.‬إذا كان لديك كمبيوتر‪ ،‬فستكون افضل من الموبايل النة يجب تجربة االكواد بنفسك على الكمبيوتر‬
‫‪☰ .‬إذا كنت تقرا من الموبايل فعليك ان تحفظ النتائج بستمرا‬
‫فوائد التعلم من خالل األمثلة‬

‫األمثلة أفضل من ‪ 1000‬كلمة‪ .‬فى الشرح النها تعطيك النتيجة وتوفر عليك عمل تجارب كثيرة ناهيك عن األمثلة أسهل‬
‫‪.‬في الفهم من التفسيرات النصية‬
‫‪ .‬يكمل هذا الكتاب جميع الشروحات بأمثلة توضيحية ونرجوت جربها بنفسك او اكتفى بتجربة الكتاب‬
‫إذا قمت بتجربة جميع األمثلة‪ ،‬فسوف تتعلم الكثير عن االكتفاء بتجربة الكتاب ‪ ،‬النك ستجرب المثال ⇣⇣ بطرق كثيرة و‬
‫! مختلفة في وقت قصير ج ًدا ان شاء اهلل تعالى‬
‫يعنى بختصار‬
‫‪:‬جافاسكربت هي إحدى اللغات الثالث التي يجب على جميع مطوري الويب تعلمها‬
‫لتحديد محتوى صفحات الويب ‪1. HTML‬‬
‫لتحديد تخطيط صفحات الويب ‪2. CSS‬‬
‫ونشاء شروط لدخال البيانات بلجافاسكربت ‪3.‬‬
‫برمجة سلوك صفحات الويب والتحكم فى الخصائص‬
‫يغطي هذا الكتاب كل إصدار من جافاسكربت‪:‬ان شاء اهلل تعالى‬
‫)‪ ES1 ES2 ES3 (1997-1999‬بدايتا من جافاسكربت االصدار األصلي و االول •‬
‫•‬ ‫)‪ES5 (2009‬‬
‫)‪• ES6 (2015‬‬
‫اهم اإلضافات تم اصدارها فى هذة السنين (‪• )2023 ،2019 ،2018 ،2017 ،2016‬‬
‫كيف استخدام جافاسكربت فى تغير المحتوى‬

‫‪ getElementById().‬إحدى طرق جافاسكربت الشائعة هي‬
‫ضع اسم معرف اى دى للعنصر ثم استدعية‬
‫‪:‬تقبل جافاسكربت عالمات االقتباس المزدوجة والمفردة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪document.getElementById("Habib").innerHTML = "Easy-to Abu Habib Al-Husini‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪document.getElementById('Habib').innerHTML = 'Easy-to Abu Habib Al-Husini‬‬
‫تغيير الخصائص‬
‫‪ <img>:‬للعالمة )المصدر(‪ src‬في هذا ال✅ مثال ⇣⇣‪ ،‬تغير جافاسكربت قيمة السمة‬
‫كيف تغيير قيم الخصائص‬

‫تغير حجم الخط‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪document.getElementById("Habib").style.fontSize = "35px‬‬
‫كيف اخفاء العناصر‬

‫الخاصية‪ display‬عن طريق تغيير ‪ HTML‬يمكن إخفاء عناصر‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪document.getElementById("Habib").style.display = "none‬‬
‫كيف اظهار العناصر المخفية‬

‫أيضا إظهار عناصر‬
‫‪:‬الخاصية‪ display‬المخفية عن طريق تغيير ‪ HTML‬يمكن ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪document.getElementById("Habib").style.display = "block‬‬
‫هل كنت تعلم؟‬
‫تماما‪ ،‬سواء من حيث المفهوم أو التصميم‬

‫ً‬ ‫‪.‬جافاسكربت و جافا لغتان مختلفتان‬
‫‪.‬في عام ‪ ECMA 1997‬في عام ‪ ،1995‬وأصبح معيار ‪ Brendan Eich‬تم اختراع جافاسكربت بواسطة‬
‫‪.‬هو االسم الرسمي للغة ‪. ECMAScript‬هو االسم الرسمي للمعيار ‪ECMA-262‬‬
‫>‪ <script‬العالمة‬
‫‪ </script>.‬العالمات>‪ <script‬يتم إدراج كود جافاسكربت بين ‪ HTML،‬في‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<script‬‬
‫;"‪document.getElementById("Habib").innerHTML = "Easy-to Abu Habib Al-Husini‬‬
‫>‪</script‬‬
‫‪: <script type="text/javascript">.‬قد تستخدم أمثلة جافاسكربت القديمة سمة النوع‬

‫‪ HTML.‬سمة النوع غير مطلوبة‪ .‬جافاسكربت هي لغة البرمجة النصية االفتراضية في‬
‫وظائف وأحداث‬
‫‪".‬عبارة عن كتلة من تعليمات جافاسكربت البرمجية‪ ،‬والتي يمكن تنفيذها عند "االستدعاء‪ function‬جافاسكربت‬
‫‪.‬على سبيل ال✅ مثال ⇣⇣‪ ،‬يمكن استدعاء دالة عند وقوع حدث ما ‪ ،‬مثل عندما ينقر المستخدم على زر‬
‫‪.‬سوف تتعلم المزيد عن الوظائف واألحداث في الفصول الالحقة‬
‫كيف اضافة بلوكات من اﻻكواد فى نفس الصفحة‬

‫‪ HTML.‬يمكنك وضع أي عدد من الكود في مستند‬
‫‪.‬أو في كليهما ‪ HTML‬صفحة>‪ <head‬قسم>‪ <body‬يمكن وضع الكود في‬
‫قسم الهد او راس الصفحة‬
‫‪ HTML.‬قسم صفحة>‪ <head‬في هذا ال✅ مثال ⇣⇣‪ ،‬يتم وضع جافاسكربت في‪function‬‬
‫‪:‬يتم استدعاء (استدعاء) الوظيفة عند النقر فوق الزر‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫{ )(‪function Husini‬‬
‫;"‪document.getElementById("Habib").innerHTML = "Abu Habib Al-Husini changed.‬‬
‫}‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h2>Abo Habib Al-Husini</h2‬‬
‫>‪<p id="Habib">Abo Habib Al-Husini</p‬‬

‫>‪<button type="button" onclick="Husini()">Try it</button‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫اكتب جافاسكربت داخل البودى واستدعيها من داخل‬

‫البودى‬
‫‪ HTML.‬قسم صفحة>‪ <body‬في هذا ال✅ مثال ⇣⇣‪ ،‬يتم وضع جافاسكربت في‪function‬‬
‫‪:‬يتم استدعاء (استدعاء) الوظيفة عند النقر فوق الزر‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>‪<h2>Abo Habib Al-Husini</h2‬‬
‫>‪<p id="Habib">Abo Habib Al-Husini</p‬‬
‫>‪<button type="button" onclick="Husini()">Try it</button‬‬
‫}‬
‫>‪</body‬‬
‫>‪</html‬‬
‫احظر هذة الطريقة بطيئة فى التنفيذ‬
‫كتابة جافاسكربت فى ملف خارجى‬

‫أيضا وضع الكود في ملفات خارجية وهذا هو اﻻفضل واﻻسرع فى التنفيذ‬
‫‪:‬يمكن ً‬
‫‪: Habib_Script.js‬الملف الخارجي‬

‫}‬
‫‪.‬تعتبر الكود الخارجية عملية عند استخدام نفس الكود في العديد من صفحات الويب المختلفة‬
‫‪ .js .‬ملفات جافاسكربت لها امتداد الملف‬
‫‪ <script>:‬للعالمة )المصدر(‪ src‬الستخدام برنامج نصي خارجي‪ ،‬ضع اسم ملف الكود في السمة‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<script src="Habib_Script.js"></script‬‬
‫‪.‬كما تريد>‪ <body‬أو>‪ <head‬يمكنك وضع مرجع نصي خارجي في‬
‫موجودا بالضبط في المكان الذي‬
‫ً‬ ‫‪.‬توجد فيه العالمة>‪ <script‬سوف يتصرف الكود كما لو كان‬
‫‪.‬عالمات>‪ <script‬ال يمكن أن تحتوي الكود الخارجية على‬
‫مزايا جافاسكربت فى ملف خارجى‬

‫‪:‬إن وضع الكود في ملفات خارجية له بعض المزايا‬
‫والتعليمات البرمجية ‪ HTML‬فهو يفصل بين•‬
‫وجافاسكربت أسهل في القراءة والصيانة ‪ HTML‬فهو يجعل•‬
‫يمكن لملفات جافاسكربت المخزنة مؤقتًا تسريع تحميل الصفحات•‬
‫‪:‬إلضافة عدة ملفات نصية إلى صفحة واحدة ‪ -‬استخدم عدة عالمات نصية‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<script src="Habib_Script1.js"></script‬‬
‫>‪<script src="Habib_Script2.js"></script‬‬
‫المراجع الخارجية‬
‫‪:‬يمكن الرجوع إلى الكود الخارجي بثالث طرق مختلفة‬
‫كامل (عنوان ويب كامل) ‪ URL‬مع عنوان•‬

‫)‪ /js/‬مثل( باستخدام مسار الملف•‬
‫دون أي طريق•‬
‫‪ Habib_Script.js:‬كامل ًا لالرتباط بـ ‪ URL‬يستخدم هذا ال✅ مثال ⇣⇣ عنوان‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<script src="https://www.ab_habib_alhosiny.com/js/Habib_Script.js"></script‬‬
‫‪ Habib_Script.js:‬يستخدم هذا ال✅ مثال ⇣⇣ مسار ملف لالرتباط بـ‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<script src="/js/Habib_Script.js"></script‬‬
‫‪ Habib_Script.js:‬ال يستخدم هذا ال✅ مثال ⇣⇣ أي مسار لالرتباط بـ‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<script src="Habib_Script.js"></script‬‬
‫‪ HTML .‬يمكنك قراءة المزيد حول مسارات الملفات في الفصل مسارات ملفات‬
‫دوال االخراج‬
‫دوال تمكنك من عرض البيانات‬

‫‪:‬يمكن لجافاسكربت "عرض" البيانات بطرق مختلفة‬
‫‪ innerHTML.‬باستخدام ‪ HTML‬الكتابة في عنصر•‬
‫‪ document.write().‬باستخدام ‪ HTML‬الكتابة في مخرجات للصفحة•‬
‫‪ window.alert().‬الكتابة في مربع التنبيه باستخدام•‬
‫‪ console.log().‬الكتابة في وحدة تحكم المتصفح باستخدام•‬
‫‪HTML‬استخدام المحتوى الداخلي‬

‫‪.‬الطريقة)‪ document.getElementById(id‬يمكن لـ جافاسكربت استخدام هذه ‪ HTML،‬للوصول إلى عنصر‬
‫‪ HTML:‬محتوى ‪ innerHTML‬تحدد الخاصية ‪ HTML.‬عنصر‪ id‬تحدد السمة‬
✅ ‫مثال‬ ⇣⇣
<!DOCTYPE html>
<html>
<body>
<h1>Thank God The Lord Of Arabics</h1>

<p> Abo Habib Al-Husini</p>
<p id="Habib"></p>
<script>
document.getElementById("Habib").innerHTML = 5 + 6;
</script>
</body>
</html>
‫ يعد تغيير خاصية‬InternalHTML ‫ لعنصر‬HTML ‫ طريقة شائعة لعرض البيانات بتنسيق‬HTML.
‫كيف كتابة البيانات فى الصفحة‬

‫ألغراض االختبار‬، .write():
✅ ‫مثال‬ ⇣⇣
<!DOCTYPE html>
<html>
<body>
<h1>Thank God The Lord Of Arabics</h1>

<p> Abo Habib Al-Husini.</p>
<script>
document.write(5 + 6);
</script>
37 ‫رقم الصفحة‬ Abu Habib Al-Husini ‫كتاب الكافى فى جافاسكربت الجزء االول‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ :‬الموجود ‪ HTML‬إلى حذف كل ‪ HTML‬بعد تحميل مستند )(‪ document.write‬سيؤدي استخدام‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>‪<h1>Thank God The Lord Of Arabics</h1‬‬

‫>‪<p> Abo Habib Al-Husini.</p‬‬
‫>‪<button type="button" onclick="document.write(5 + 6)">Try it</button‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪.‬لالختبار فقط )(‪ document.write‬يجب استخدام التابع‬
‫كيف اظهار رسالة للمستخدم‬

‫‪:‬يمكنك استخدام مربع التنبيه او الرساله لعرض البيانات او التوجية الى شى ما‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<html‬‬
‫>‪<body‬‬

‫;)‪window.alert(5 + 6‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪.‬المحجوزة‪ window‬يمكنك تخطي الكلمة‬

‫في جافاسكربت‪ ،‬كائن النافذة هو كائن النطاق العام‪ .‬هذا يعني أن المتغيرات والخصائص واألساليب تنتمي افتراضيًا إلى كائن‬
‫أيضا أن تحديد‬‫‪:‬الكلمة المحجوزة أمر اختياري‪ window‬النافذة‪ .‬وهذا يعني ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<html‬‬
‫>‪<body‬‬

‫;)‪alert(5 + 6‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫كيف التسجيل داخل الكونسل‬

‫‪.‬األسلوب الموجود في المتصفح لعرض البيانات)(‪ console.log‬ألغراض تصحيح األخطاء‪ ،‬يمكنك استدعاء‬
‫‪.‬سوف تتعلم المزيد حول تصحيح األخطاء في فصل الحق‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<html‬‬
‫>‪<body‬‬
‫;)‪console.log(5 + 6‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫الطباعة الخارجية فى جافاسكربت‬

‫‪.‬ال تحتوي جافاسكربت على أي كائن طباعة خارجية أو طرق طباعة خارجية جاهزة‬
‫‪.‬ال يمكنك الوصول إلى أجهزة اإلخراج من جافاسكربت اﻻ بمكتبات خاصة وهى كثيرة جدا وكلها تتنافس فى سرعة النفيذ‬
‫‪.‬الموجودة في المتصفح لطباعة محتوى النافذة الحالية)(‪ window.print‬االستثناء الوحيد هو أنه يمكنك استدعاء الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>‪<button onclick="window.print()">Print this page</button‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫تعريف البيانات فى جافاسكربت‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪let x, y, z; // Statement 1‬‬
‫;‪x = 5‬‬ ‫‪// Statement 2‬‬
‫;‪y = 6‬‬ ‫‪// Statement 3‬‬
‫‪z = x + y; // Statement 4‬‬
‫كيف تكوين البيانات البرمجية‬

‫‪:‬تتكون عبارات جافاسكربت من‬
‫‪.‬القيم والمعامالت ن والتعبيرات والكلمات المحجوزة والتعليقات‬
‫‪ = "Habib":‬بمعرف ‪ HTML‬داخل عنصر ‪ "Abu Habib Al-Hosini".‬يخبر هذا البيان المتصفح بكتابة هذة الجملة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪document.getElementById("Habib").innerHTML = "Abu Habib Al-Husini‬‬
‫‪.‬تحتوي معظم برامج جافاسكربت على العديد من عبارات جافاسكربت‬

‫‪.‬يتم تنفيذ البيانات‪ ،‬واح ًدا تلو اآلخر‪ ،‬بنفس الترتيب الذي تمت كتابته به‬
‫‪.‬غالبًا ما تسمى برامج جافاسكربت (وبيانات جافاسكربت) برمز جافاسكربت‬
‫كيف اﻻعالن عن متغيرات عديدة‬

‫‪ .‬تفصل الفواصل المنقوطة عبارات جافاسكربت او المتغيرات‬
‫‪:‬أضف فاصلة منقوطة في نهاية كل متغير او عبارة قابلة للتنفيذ‬
‫أمثلة‬
‫‪let a, b, c; // Declare 3 variables‬‬
‫;‪a = 5‬‬ ‫‪// Assign the value 5 to a‬‬
‫;‪b = 6‬‬ ‫‪// Assign the value 6 to b‬‬
‫‪c = a + b; // Assign the sum of a and b to c‬‬
‫‪:‬عند الفصل بينها بفواصل منقوطة‪ ،‬يُسمح بعدة عبارات في سطر واحد‬
‫;‪a = 5; b = 6; c = a + b‬‬
‫‪.‬على الويب‪ ،‬قد ترى أمثلة بدون فواصل منقوطة‬

‫‪.‬إنهاء البيانات بفاصلة منقوطة ليس مطلوبًا‪ ،‬ولكن يوصى به بشدة‬
‫المسافات الفارغة‬
‫‪.‬يتجاهل جافاسكربت مسافات متعددة‪ .‬يمكنك إضافةمسافة فارغة إلى الكود لجعله أكثر قابلية للقراءة‬
‫‪:‬األسطر التالية مكافئة‬
‫;"‪let hAbiB = "Habib‬‬

‫;"‪let hAbiB="Habib‬‬
‫‪ ( = + - * / ):‬من الممارسات الجيدة وضع مسافات حول عوامل التشغيل‬
‫;‪let x = y + z‬‬
‫طول السطر فى جافاسكربت وفواصل األسطر‬

‫للحصول على أفضل سهولة للقراءة‪ ،‬غالبًا ما يرغب المبرمجون في تجنب سطور التعليمات البرمجية التي يزيد طولها عن ‪80‬‬
‫‪.‬حرفًا‬
‫‪:‬إذا كانت عبارة جافاسكربت ال تتناسب مع سطر واحد‪ ،‬فإن أفضل مكان لفصلها هو بعد عامل التشغيل‬
‫مثال ✅‬ ‫⇣⇣‬
‫= ‪document.getElementById("Habib").innerHTML‬‬
‫;"!‪"Abu Habib Al-Hosini‬‬
‫كتل اﻻكود‬
‫‪ {...}.‬يمكن تجميع عبارات جافاسكربت ً‬
‫معا في كتل تعليمات برمجية‪ ،‬داخل قوسين متعرجين‬
‫معا‬
‫‪.‬الغرض من كتل التعليمات البرمجية هو تحديد البيانات التي سيتم تنفيذها ً‬
‫معا في كتل هو وظائف جافاسكربت‬
‫‪:‬أحد األماكن التي ستجد فيها العبارات مجمعة ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"!‪document.getElementById("Habib1").innerHTML = "Abu Habib Al-Hosini‬‬
‫;"?‪document.getElementById("Habib2").innerHTML = "How are you‬‬
‫}‬
‫‪.‬في هذا الكتاب‪ ،‬نستخدم مسافتين من المسافة البادئة لكتل التعليمات البرمجية‬
‫‪ .‬سوف تتعلم المزيد عن الوظائف باذن اهلل تعالى في هذا الكتاب او فى الجزء الثانى‬
‫الكلمات المحجوزة فى جافاسكربت‬

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

‫‪var‬‬ ‫يعلن عن المتغير‬
‫‪let‬‬ ‫يعلن عن متغير الكتلة‬
‫‪const‬‬ ‫يعلن كتلة ثابتة او متغير ثابت‬
‫‪if‬‬ ‫يضع عالمة على كتلة من العبارات التي سيتم تنفيذها على شرط ما‬
‫‪switch‬‬ ‫يحدد كتلة من البيانات التي سيتم تنفيذها في حاالت مختلفة‬
‫‪for‬‬ ‫يضع عالمة على كتلة من العبارات التي سيتم تنفيذها في حلقة‬
‫‪function‬‬ ‫تعلن عن وظيفة‬
‫‪return‬‬ ‫يخرج من وظيفة‬
‫‪try‬‬ ‫ينفذ معالجة األخطاء لكتلة من البيانات‬
‫‪.‬الكلمات المحجوزة لجافاسكربت هي كلمات محجوزة‪ .‬ال يمكن استخدام الكلمات المحجوزة كأسماء للمتغيرات‬
‫طرق انشاء المتغيرات‬
‫‪:‬بناء جملة جافاسكربت او المتغيرات له طرق عديدة‬
‫‪// How to create variables:‬‬
‫;‪var x‬‬
‫;‪let y‬‬
‫‪// How to use variables:‬‬
‫;‪x = 5‬‬
‫;‪y = 6‬‬
‫;‪let z = x + y‬‬
‫التعامل مع القيم‬
‫‪:‬يحدد بناء جملة جافاسكربت نوعين من القيم‬
‫القيم الثابتة•‬
‫القيم المتغيرة•‬
‫‪ .‬تسمى القيم الثابتة بالحرفيات‬
‫‪ .‬تسمى القيم المتغيرة بالمتغيرات‬
‫التعامل مع الحروف‬
‫‪:‬أهم قواعد بناء الجملة للقيم الثابتة هي‬
‫‪:‬تتم كتابة األرقام مع أو بدون الكسور العشرية ‪1.‬‬
‫‪10.50‬‬
‫‪1001‬‬
‫‪:‬النصوص النصية عبارة عن نص مكتوب بين عالمتي اقتباس مزدوجتين أو مفردتين ‪2.‬‬
‫"‪"Abu Bakr Al-Siddiq‬‬
‫'‪'Abu Bakr Al-Siddiq‬‬
‫المتغيرات‬
‫‪.‬في لغة البرمجة‪ ،‬يتم استخدام المتغيرات لتخزين قيم البيانات‬
‫‪ .‬عن المتغيرات‪ const‬لإلعالن‪ let‬تستخدم جافاسكربت الكلمات المحجوزة‪var‬‬
‫‪.‬يتم استخدام عالمة المساواة لتعيين قيم للمتغيرات‬
‫نظرا) لـ ‪ x‬في هذا ال✅ مثال ⇣⇣‪ ،‬يتم تعريف‬
‫‪:‬القيمة ‪ x 6‬كمتغير‪ .‬ثم يتم تعيين ( ً‬
‫;‪let x‬‬
‫;‪x = 6‬‬
‫المعامالت الحسابية‬
‫‪ :‬تستخدم جافاسكربت العوامل الحسابية ( ‪ )/ * - +‬لحساب القيم‬
‫‪(5 + 6) * 10‬‬
‫‪:‬تستخدم جافاسكربت عامل التعيين ( =) لتعيين قيم للمتغيرات‬
‫;‪let x, y‬‬
‫;‪x = 5‬‬
‫;‪y = 6‬‬
‫التعبيرات‬
‫‪.‬التعبير عبارة عن مجموعة من القيم والمتغيرات وعوامل التشغيل‪ ،‬والتي تحسب القيمة‬
‫‪.‬ويسمى الحساب التقييم‬
‫‪:‬على سبيل ال✅ مثال ⇣⇣‪ 10 * 5 ،‬يساوي ‪50‬‬
‫‪5 * 10‬‬
‫أيضا على قيم متغيرة‬

‫‪:‬يمكن أن تحتوي التعبيرات ً‬
‫‪x * 10‬‬
‫‪.‬يمكن أن تكون القيم من أنواع مختلفة‪ ،‬مثل األرقام والنصوص‬

‫‪ "Abu Bakr Al-Siddiq":‬إلى "😂😁😀 ‪ "Habib" + " " + "Al Husini‬على سبيل ال✅ مثال ⇣⇣‪ ،‬يتم تقييم‬
‫"😂😁😀 ‪"Habib" + " " + "Al Husini‬‬
‫الكلمات المحجوزة‬
‫‪.‬تُستخدم كلمات جافاسكربت المحجوزة لتحديد اإلجراءات التي سيتم تنفيذها‬
‫‪:‬المحجوزة المتصفح بإنشاء متغيرات‪ let‬تخبر الكلمة‬
‫;‪let x, y‬‬
‫;‪x = 5 + 6‬‬
‫;‪y = x * 10‬‬
‫أيضا المتصفح بإنشاء متغيرات‪ var‬تخبر الكلمة‬

‫‪:‬المحجوزة ً‬
‫;‪var x, y‬‬
‫;‪x = 5 + 6‬‬
‫;‪y = x * 10‬‬
‫‪.‬سوف يؤدي إلى نفس النتيجة‪ let‬أو ‪ var‬في هذه األمثلة‪ ،‬استخدام‬
‫‪.‬في هذا الكتاب‪ let‬باذن اهلل تعالى ‪ var‬سوف تتعلم المزيد عنه‬
‫التعليقات‬
‫‪.‬ال يتم "تنفيذ" كافة عبارات جافاسكربت‬
‫‪ .*/‬يتم التعامل مع الكود بعد الشرطة المائلة المزدوجة ‪//‬أو ‪*/‬بينهما كتعليق‬
‫‪:‬يتم تجاهل التعليقات‪ ،‬ولن يتم تنفيذها‬
‫‪let x = 5; // I will be executed‬‬
‫‪// x = 6; I will NOT be executed‬‬
‫‪.‬سوف تتعلم المزيد عن التعليقات في فصل الحق‬
‫المعرفات او الأسماء‬
‫‪.‬المعرفات هي أسماء جافاسكربت‬
‫‪.‬يتم استخدام المعرفات لتسمية المتغيرات والكلمات المحجوزة والوظائف‬
‫‪.‬قواعد األسماء القانونية هي نفسها في معظم لغات البرمجة‬
‫‪:‬يجب أن يبدأ اسم جافاسكربت بـ‬
‫حرف (من األلف إلى الياء أو من األلف إلى الياء)•‬

‫)‪ ($‬عالمة الدوالر•‬
‫)_( أو الشرطة السفلية•‬
‫‪.‬قد تكون األحرف الالحقة عبارة عن أحرف أو أرقام أو شرطات سفلية أو عالمات الدوالر‬
‫ملحوظة‬
‫‪.‬ال يسمح باستخدام األرقام كحرف أول في األسماء‬
‫‪.‬بهذه الطريقة يمكن لـ جافاسكربت التمييز بين المعرفات واألرقام بسهولة‬
‫احظر حساسة حالة األحرف‬

‫‪ .‬جميع معرفات جافاسكربت حساسة لحالة األحرف‬
‫‪:‬هما متغيران مختلفان ‪ lastname،‬و‪ lastName‬المتغيرات‬
‫;‪let lastname, lastName‬‬

‫;"😂😁😀 ‪lastName = "Al Husini‬‬
‫;"‪lastname = "Habibson‬‬
‫‪ Let .‬على أنها الكلمة المحجوزة ‪ Let‬أو ‪ LET‬ال يفسر جافاسكربت‬
‫تكوين الجمل‬
‫‪:‬تاريخيًا‪ ،‬استخدم المبرمجون طرقًا مختلفة لضم كلمات متعددة في اسم متغير واحد‬
‫‪:‬الواصالت‬
‫االسم األول‪ ،‬اسم العائلة‪ ،‬اسماء ‪ ،‬بين المدن يعنى اسم وصفى للشى يعبر عنة حتى ﻻ تتعب نفسك فى كتابة تعليقات كثيرة‬
‫‪.‬للكود‬
‫الشرطة السفلية‪ :‬او ما تعرف باالندرسكول تستخدم لفصل اﻻسماء لتسهيل القراءة‬
‫‪.‬الواصالت غير مسموح بها في جافاسكربت‪ .‬وهي محجوزة للطرح‬
‫مثل الرموز والمعامالات الحسابية‬
‫‪:‬يميل مبرمجو جافاسكربت إلى استخدام حالة الجمل التي تبدأ بحرف صغير‬
‫‪.‬الحرف األول‪ ،‬ﻻ يكون رقم االسم األخير‪ ،‬مترك لك بحرية‬
‫ترميز الكتابة‬
‫‪ Unicode .‬يستخدم جافاسكربت مجموعة أحرف‬
‫‪.‬جميع األحرف وعالمات الترقيم والرموز الموجودة في العالم )تقريبًا( ‪ Unicode‬يغطي‬
‫‪ Unicode .‬إللقاء نظرة فاحصة‪ ،‬يرجى قراءة كتاب المرجع الكامل‬
‫انشاء التعليقات‬
‫‪.‬يمكن استخدام تعليقات جافاسكربت لشرح تعليمات جافاسكربت البرمجية‪ ،‬ولجعلها أكثر قابلية للقراءة‬
‫أيضا استخدام تعليقات جافاسكربت لمنع التنفيذ عند اختبار التعليمات البرمجية البديلة‬
‫‪.‬يمكن ً‬
‫كيف انشاء تعليقات سطر واحد‬

‫‪ //.‬تبدأ التعليقات ذات السطر الواحد بـ‬
‫‪.‬سيتم تجاهل أي نص بين ‪//‬السطر ونهايته بواسطة جافاسكربت (لن يتم تنفيذه)‬
‫‪:‬يستخدم هذا ال✅ مثال ⇣⇣ تعليقًا من سطر واحد قبل كل سطر من التعليمات البرمجية‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪// Change heading:‬‬
‫;"‪document.getElementById("Habib1").innerHTML = "Abu Habib Al-Husini‬‬
‫‪// Change Abo Habib Al-Husini:‬‬

‫;"‪document.getElementById("Habib2").innerHTML = " Abo Habib Al-Husini.‬‬
‫‪:‬يستخدم هذا ال✅ مثال ⇣⇣ تعليقًا من سطر واحد في نهاية كل سطر لشرح الكود‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪let x = 5; // Declare x, give it the value of 5‬‬
‫‪let y = x + 2; // Declare y, give it the value of x + 2‬‬
‫كيف انشاء تعليقات متعددة األسطر‬

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

‫‪:‬يستخدم هذا ال✅ مثال ⇣⇣ تعليقًا متعدد األسطر (كتلة تعليق) لشرح الكود‬
‫مثال ✅‬ ‫⇣⇣‬
‫*‪/‬‬
‫‪The code below will change‬‬
‫"‪the heading with id = "Habib1‬‬
‫"‪and the Abo Habib Al-Husini with id = "Habib2‬‬
‫‪in my web page:‬‬
‫‪*/‬‬
‫شيوعا استخدام التعليقات ذات السطر الواحد‬

‫ً‬ ‫‪.‬من األكثر‬
‫‪.‬غالبًا ما تُستخدم التعليقات الجماعية للتوثيق الرسمي‬
‫استخدام التعليقات لمنع التنفيذ‬

‫‪.‬يعد استخدام التعليقات لمنع تنفيذ التعليمات البرمجية مناسبًا الختبار التعليمات البرمجية‬
‫‪.‬تؤدي اإلضافة ‪//‬أمام سطر التعليمات البرمجية إلى تغيير أسطر التعليمات البرمجية من سطر قابل للتنفيذ إلى تعليق‬
‫‪:‬يستخدم هذا ال✅ مثال ⇣⇣ ‪ //‬لمنع تنفيذ أحد أسطر التعليمات البرمجية‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪//document.getElementById("Habib1").innerHTML = "Abu Habib Al-Husini‬‬
‫‪:‬يستخدم هذا ال✅ مثال ⇣⇣ كتلة تعليق لمنع تنفيذ أسطر متعددة‬
‫مثال ✅‬ ‫⇣⇣‬
‫*‪/‬‬
‫‪*/‬‬
‫متغيرات جافاسكربت‬
‫‪:‬طرق لإلعالن عن متغير جافاسكربت ‪4‬‬

‫‪var‬استخدام •‬
‫‪let‬استخدام •‬
‫‪const‬استخدام •‬
‫عدم ااستخدام اى شيء تستطيع اعالن عن متغير •‬
‫ما هي المتغيرات؟‬
‫‪.‬المتغيرات عبارة عن حاويات لتخزين البيانات (تخزين قيم البيانات)‬
‫‪:‬المحجوزة‪ var‬هي متغيرات تم اإلعالن عنها باستخدام الكلمة‪ z‬و و و‪ y‬و‪ ⇣⇣، x‬في هذا ال✅ مثال‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪var x = 5‬‬
‫;‪var y = 6‬‬
‫;‪var z = x + y‬‬
‫‪ let‬مثال على استخدام الكلمة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 5‬‬
‫;‪let y = 6‬‬
‫;‪let z = x + y‬‬
‫‪:‬هي متغيرات غير معلنة‪ z‬و و و‪ y‬و‪ ⇣⇣، x‬في هذا ال✅ مثال‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪x = 5‬‬
‫;‪y = 6‬‬
‫;‪z = x + y‬‬
‫من جميع األمثلة المذكورة أعاله‪ ،‬يمكنك تخمين‪ :‬نوع المتغير بمجرد تخزين القيم فى الذاكرة‬
‫يخزن القيمة ‪•x 5‬‬
‫يخزن القيمة ‪•y 6‬‬
‫يخزن القيمة ‪•z 11‬‬
‫؟ متى استخدام الكلمة‪var‬‬
‫دائما عن متغيرات جافاسكربت باستخدام‬
‫ً‬ ‫‪ const.‬أو‪ let‬أو‪ var‬أعلن‬
‫‪ .‬يتم استخدام الكلمة المحجوزة في جميع أكواد جافاسكربت من عام ‪ 1995‬إلى عام ‪var2015‬‬
‫‪ let.const‬تمت إضافة الكلمات المحجوزة والكلمات المحجوزة إلى جافاسكربت في عام ‪2015‬‬
‫‪ var.‬إذا كنت تريد تشغيل التعليمات البرمجية في المتصفحات القديمة‪ ،‬فيجب عليك استخدام‬
‫؟ متى استخدام الكلمة‪const‬‬

‫دائما عن المتغيرات باستخدام‬
‫ً‬ ‫‪ const.‬إذا كنت تريد قاعدة عامة‪ :‬أعلن‬
‫‪ let.‬إذا كنت تعتقد أن قيمة المتغير يمكن أن تتغير‪ ،‬فاستخدم‬
‫‪:‬هي متغيرات‪ total‬و و و‪ price2‬و‪ ⇣⇣، price1‬في هذا ال✅ مثال‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪const price1 = 5‬‬
‫;‪const price2 = 6‬‬
‫;‪let total = price1 + price2‬‬
‫‪.‬الكلمة المحجوزة‪ const‬باستخدام ‪ price2‬يتم اإلعالن عن المتغيرين‪price1‬‬

‫‪.‬هذه قيم ثابتة وال يمكن تغييرها‬
‫‪.‬الكلمة المحجوزة‪ let‬يتم اإلعالن عن المتغير باستخدام‪total‬‬
‫‪.‬هذه هي القيمة التي يمكن تغييرها‬
‫استخدام معمالت الجبر‬

‫‪:‬كما هو الحال في الجبر‪ ،‬تحتوي المتغيرات على قيم‬
‫;‪let x = 5‬‬
‫;‪let y = 6‬‬
‫‪:‬كما هو الحال في الجبر‪ ،‬يتم استخدام المتغيرات في التعبيرات‬
‫;‪let z = x + y‬‬
‫‪.‬من ال✅ مثال ⇣⇣ أعاله‪ ،‬يمكنك تخمين أن اإلجمالي قد تم حسابه ليكون ‪11‬‬
‫ملحوظة‬
‫‪.‬المتغيرات هي حاويات لتخزين القيم‬
‫ما هى معرفات جافاسكربت‬

‫‪ .‬يجب تعريف كافة متغيرات جافاسكربت بأسماء فريدة‬
‫‪ .‬تسمى هذه األسماء الفريدة المعرفات‬
‫‪.‬أو أسماء وصفية أكثر (العمر‪ ،‬المجموع‪ ،‬الحجم اإلجمالي) )‪y‬و ‪ x‬مثل( يمكن أن تكون المعرفات أسماء قصيرة‬
‫‪:‬القواعد العامة لبناء أسماء المتغيرات (المعرفات الفريدة) هي‬

‫‪.‬يمكن أن تحتوي األسماء على أحرف وأرقام وشرطات سفلية وعالمات الدوالر•‬
‫‪.‬يجب أن تبدأ األسماء بحرف•‬
‫أيضا بـ ‪ $‬و_ (لكننا لن نستخدمها في هذا الكتاب وال ننصح بستخدامها النها مستخدمة فى •‬
‫يمكن أن تبدأ األسماء ً‬
‫‪.‬مكتبات اخرى مثل الجيكويرى وغيرها والتى سنتتطرق الى اليها بالتفصيل اما فى هذا الكتاب او فى كتب اخرى)‬
‫‪).‬متغيران مختلفان ‪Y‬و ‪ (y‬األسماء حساسة لحالة األحرف•‬
‫‪.‬ال يمكن استخدام الكلمات المحجوزة (مثل الكلمات المحجوزة لـ جافاسكربت) كأسماء•‬
‫ملحوظة‬
‫‪.‬معرفات جافاسكربت حساسة لحالة األحرف‬
‫عامل التعيين‬
‫‪".‬في جافاسكربت‪ ،‬عالمة المساواة ( =) هي عامل تشغيل "إسناد"‪ ،‬وليس عامل تشغيل "يساوي‬
‫‪:‬وهذا يختلف عن الجبر‪ .‬سيحددها المتصفح بعد تخمين نوغ البيانات او المتغيرات و ما يلي ال معنى له في الجبر‬
‫‪x=x+5‬‬
‫تماما‪ :‬فهو يعين قيمة‬

‫ً‬ ‫‪ x.‬إلى ‪ x + 5‬ومع ذلك‪ ،‬في جافاسكربت‪ ،‬يكون األمر منطقيًا‬
‫)‪.‬بمقدار ‪ x 5‬وتزداد قيمة ‪ x.‬ويضع النتيجة في ‪ x + 5‬يحسب قيمة(‬
‫ملحوظة‬
‫‪.‬تتم كتابة عامل التشغيل "يساوي" كما هو الحال ==في جافاسكربت‬
‫أنواع البيانات السائدة‬

‫‪ "Abu Bakr Al-Siddiq".‬يمكن لمتغيرات جافاسكربت أن تحتوي على أرقام مثل ‪ 100‬وقيم نصية مثل‬
‫‪.‬في البرمجة‪ ،‬تسمى القيم النصية نصوص نصية‬
‫‪.‬يمكن لجافاسكربت التعامل مع العديد من أنواع البيانات‪ ،‬ولكن في الوقت الحالي‪ ،‬فكر فقط في األرقام والنصوص‬
‫‪.‬تتم كتابة النصوص داخل عالمات اقتباس مزدوجة أو مفردة‪ .‬تتم كتابة األرقام دون عالمات االقتباس‬
‫رقما بين عالمتي اقتباس‪ ،‬فسيتم التعامل معه كنصوص‬
‫‪ .‬إذا وضعت ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪const pi = 3.14‬‬
‫;"‪let hAbiB = "Abu Bakr Al-Siddiq‬‬
‫;'!‪let Text = 'Yes I am‬‬
‫كيف اإلعالن عن متغير‬

‫‪.‬يُسمى إنشاء متغير في جافاسكربت "اإلعالن" عن متغير‬
‫‪ let:‬أو‪ var‬قمت بتعريف متغير جافاسكربت باستخدام الكلمة المحجوزة‬
‫;‪var hAbiB4‬‬
‫‪:‬أو‬
‫;‪let hAbiB4‬‬
‫‪ undefined).‬من الناحية الفنية هو( بعد التصريح‪ ،‬ليس للمتغير أي قيمة‬

‫‪ :‬لتعيين قيمة للمتغير‪ ،‬استخدم عالمة التساوي‬
‫;"‪hAbiB4 = "Hamza‬‬
‫أيضا تعيين قيمة للمتغير عندما تعلن عنه‬

‫‪:‬يمكنك ً‬
‫;"‪let hAbiB4 = "Hamza‬‬
‫‪.‬له "‪ "Hamza‬وتخصيص القيمة‪ hAbiB4‬في ال✅ مثال ⇣⇣ أدناه‪ ،‬قمنا بإنشاء متغير يسمى‬
‫‪ id="Habib":‬باستخدام ‪ HTML‬ثم نقوم "بإخراج" القيمة داخل فقرة‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<p id="Habib"></p‬‬
‫;‪document.getElementById("Habib").innerHTML = hAbiB4‬‬
‫ملحوظة‬
‫‪ .‬جيد ان تقوم بــ لإلعالن عن جميع المتغيرات في بداية الكود لتسهيل الرجوع اليها مرة اخرى‬
‫كيف عمل اعالن واحد‪ ،‬لجميع المتغيرات‬

‫‪.‬يمكنك إعالن العديد من المتغيرات في عبارة واحدة‬
‫‪ :‬المتغيرات ‪let‬ابدأ العبارة بالفاصلة بين‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let hAbiB = "Abu Bakr Al-Siddiq",hAbiB2= "Hamza", hAbiB3= 200‬‬
‫‪:‬يمكن أن يمتد اإلعالن على عدة أسطر‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪let hAbiB = "Abu Bakr Al-Siddiq",‬‬
‫‪hAbiB4 = "Hamza",‬‬
‫;‪hAbiB3= 200‬‬
‫كيف جعل القيمة غير محدد‬

‫في برامج الكمبيوتر‪ ،‬غالبًا ما يتم اإلعالن عن المتغيرات بدون قيمة‪ .‬يمكن أن تكون القيمة شيًئا يجب حسابه‪ ،‬أو شيًئا سيتم‬
‫‪.‬توفيره باذن اهلل تعالى ‪ ،‬مثل إدخال المستخدم‬
‫‪ undefined.‬المتغير المعلن بدون قيمة سيكون له القيمة‬
‫‪:‬بعد تنفيذ هذا البيان‪ undefined‬القيمة‪hAbiB2‬سيكون للمتغير‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪let hAbiB2=undefined‬‬ ‫;‬
‫إعادة اإلعالن عن متغيرات‬

‫‪.‬فلن يفقد قيمته ‪ var،‬إذا قمت بإعادة تعريف متغير جافاسكربت الذي تم تعريفه بـ‬
‫‪:‬بعد تنفيذ هذه العبارات "‪ "Hamza‬يحمل القيمة‪ hAbiB4‬سيظل المتغير‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪var hAbiB4 = "Hamza‬‬
‫ملحوظة‬
‫‪ const.‬أو‪ let‬ال يمكنك إعادة تعريف متغير تم تعريفه بـ‬
‫‪:‬هذا لن يعمل‬

‫انشاء العمليات الحسابية‬

‫كما هو الحال مع الجبر‪ ،‬يمكنك إجراء العمليات الحسابية باستخدام متغيرات جافاسكربت‪ ،‬باستخدام عوامل تشغيل‬
‫‪ +:‬مثل =و‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 5 + 2 + 3‬‬
‫أيضا إضافة نصوص‪ ،‬ولكن سيتم ربط النصوص‬

‫مثال ✅‬ ‫⇣⇣‬
‫;"😂😁😀 ‪let x = "Habib" + " " + "Al Husini‬‬
‫أيضا‬
‫‪:‬جرب هذا ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = "5" + 2 + 3‬‬
‫ملحوظة‬
‫رقما بين عالمتي اقتباس‪ ،‬فسيتم التعامل مع بقية األرقام كنصوص‪ ،‬وستكون متنص‬
‫‪ .‬إذا وضعت ً‬
‫‪:‬اآلن جرب هذا‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let x = 2 + 3 + "5‬‬
‫‪ $‬استخدام عالمة الدوالر‬

‫نظرا ألن جافاسكربت تتعامل مع عالمة الدوالر كحرف‪ ،‬فإن المعرفات التي تحتوي على ‪ $‬هي أسماء متغيرات صالحة‬
‫‪ً :‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"*_* ‪let $ = "Abu Habib Al Husini‬‬
‫;‪let $$$ = 2‬‬
‫;‪let $Habib= 5‬‬
‫شائعا ج ًدا في جافاسكربت‪ ،‬لكن غالبًا ما يستخدمها المبرمجون فى بى اتش بى ﻻنهم تعودو‬
‫ً‬ ‫استخدام عالمة الدوالر ليس‬
‫عليها وهى اسلوب احتراف لكونها مستخدمة فى مكتبات كثيرة بهذا الشكل يستخدمها المحترفون كاسم مستعار للوظيفة‬
‫‪.‬المحجوزة في مكتبة جيكويرى جافاسكربت‬
‫على سبيل ال✅ مثال ⇣⇣‪ ،‬يتم استخدام الوظيفة المحجوزة ‪$‬لتحديد عناصر ‪ jQuery،‬في مكتبة جافاسكربت‬
‫‪ p".‬تعني "تحديد جميع عناصر;)"‪ jQuery $("p‬في ‪HTML.‬‬
‫جافاسكربت و االندرسكول‬
‫نظرا ألن جافاسكربت تتعامل مع الشرطة السفلية المعروفة باالندرسكول كحرف‪ ،‬فإن المعرفات التي تحتوي على _ هي‬
‫ً‬
‫‪:‬أسماء متغيرات صالحة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let _Name= "tariq ibn Ziad‬‬
‫;‪let _x = 2‬‬
‫;‪let _100 = 5‬‬
‫شائعا ج ًدا في جافاسكربت‪ ،‬ولكن هناك تقليد بين المبرمجين المحترفين هو استخدامها كاسم‬
‫ً‬ ‫استخدام الشرطة السفلية ليس‬
‫‪".‬مستعار للمتغيرات "الخاصة (المخفية)‬
‫ملحوظة‬
‫‪ ES6 (2015) .‬تم تقديم الكلمة المحجوزة في‪let‬‬
‫‪ .‬ال يمكن إعادة تعريف المتغيرات المحددة‪let‬‬
‫‪.‬يجب اإلعالن عن المتغيرات المحددة قبل االستخدام‪let‬‬
‫‪.‬نطاق كتلة‪ let‬المتغيرات المحددة لها‬
‫احظر هذا الخطا عند استخدام الكلمة ‪Let‬‬

‫‪ .‬ال يمكن إعادة تعريف المتغيرات المعرفة بـ‪let‬‬
‫‪.‬ال يمكنك إعادة تعريف متغير عن طريق الخطأ‬
‫‪:‬أنك ال تستطيع أن تفعل هذا‪ let‬مع‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let x = "Abu Bakr Al-Siddiq‬‬
‫;‪let x = 0‬‬
‫‪// SyntaxError: 'x' has already been declared‬‬
‫‪:‬يمكن‪ var‬معك ان يفعلها‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪var x = "Abu Bakr Al-Siddiq‬‬
‫;‪var x = 0‬‬
‫ما هو نطاق الكتلة }{‬

‫‪ .‬كان لجافاسكربت نطاق عام ونطاق وظيفي فقط ‪ ES6 (2015)،‬قبل‬
‫‪ const.‬و‪: let‬كلمتين رئيسيتين جديدتين مهمتين في جافاسكربت ‪ ES6‬قدم‬
‫‪.‬توفر هاتان الكلمتان الرئيسيتان نطاق الكتلة في جافاسكربت‬

‫‪:‬ال يمكن الوصول إلى المتغيرات المعلنة داخل الكتلة { } من خارج الكتلة‬
‫مثال ✅‬ ‫⇣⇣‬
‫{‬
‫;‪let x = 2‬‬
‫}‬
‫‪// x can NOT be used here‬‬
‫‪.‬الكلمة المحجوزة أن تحتوي على نطاق حظر‪ var‬ال يمكن للمتغيرات المعلنة باستخدام‬
‫‪.‬يمكن الوصول إلى المتغيرات المعلنة داخل الكتلة { } من خارج الكتلة‬
‫مثال ✅‬ ‫⇣⇣‬
‫{‬
‫;‪var x = 2‬‬
‫}‬
‫‪// x CAN be used here‬‬
‫إعادة اإلعالن عن المتغيرات‬
‫‪.‬الكلمة المحجوزة إلى حدوث مشكالت‪ var‬يمكن أن تؤدي إعادة اإلعالن عن متغير باستخدام‬
‫أيضا إلى إعادة تعريف المتغير خارج الكتلة‬
‫‪:‬إعادة تعريف المتغير داخل الكتلة سيؤدي ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪var x = 10‬‬
‫‪// Here x is 10‬‬
‫{‬
‫;‪var x = 2‬‬
‫‪// Here x is 2‬‬
‫}‬
‫‪// Here x is 2‬‬
‫‪.‬الكلمة المحجوزة إلى حل هذه المشكلة‪ let‬يمكن أن تؤدي إعادة تعريف المتغير باستخدام‬
‫‪:‬إعادة تعريف المتغير داخل الكتلة لن يعيد تعريف المتغير خارج الكتلة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 10‬‬
‫‪// Here x is 10‬‬
‫{‬
‫;‪let x = 2‬‬
‫‪// Here x is 2‬‬
‫}‬
‫‪// Here x is 10‬‬
‫إعادة اإلعالن للمتغيرات‬

‫‪:‬يُسمح بإعادة اإلعالن عن متغير جافاسكربت في أي مكان في البرنامج‪var‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪var x = 2‬‬
‫‪// Now x is 2‬‬
‫;‪var x = 3‬‬
‫‪// Now x is 3‬‬
‫‪:‬ال يُسمح بإعادة تعريف متغير في نفس الكتلة ‪ let،‬مع‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪var x = 2; // Allowed‬‬
‫‪let x = 3; // Not allowed‬‬
‫{‬
‫‪let x = 2; // Allowed‬‬
‫}‬
‫{‬
‫‪var x = 3; // Not allowed‬‬
‫}‬
‫‪:‬مسموح به في كتلة أخرى ‪ letIS‬إعادة تعريف متغير باستخدام‬
‫مثال ✅‬ ‫⇣⇣‬
‫{‬
‫}‬
‫{‬
‫}‬
‫كيف استخدام المتغيرات قبل االعالن عنها‬
‫ال انصح بستخدام هذة الطريقة النها تحتم عليك اعطاء امر لجافاسكربت بقراءة الصفحة كاملة قل التنفيذ مما يتيح لك‬
‫استخدام المتغيرات قبل االعالن عنها وهذة الطريقة تؤدى الى ارهاق البيروسيسور اقراء كتاب تعلم برمجة جيكويرى‬
‫الجزء الثانى لتعرف المذيد عن التحكم فى قرائة صفحات الويب والتحكم فى البيانات بمكتبة جيكويرى‬
‫‪.‬يتم رفع المتغيرات المحددة إلى األعلى ويمكن تهيئتها في أي وقت‪var‬‬

‫‪:‬المعنى‪ :‬يمكنك استخدام المتغير قبل اإلعالن عنه‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪:‬البأس‬
‫إذا كنت تريد معرفة المزيد عن الرفع‪ ،‬فقراء كتاب جافاسكربت هوستنج ‪ .‬ا‬
‫‪ let‬ملحوظة ال تفعل هذا مع ليت‬
‫‪ :‬المتغير قبل اإلعالن عنه سيؤدي الى خط مع ا‪ let‬اال تستخدم ‪:‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪hAbiB4 = "Habib‬‬
‫استخدام الكلمة ‪const‬‬
‫‪ ES6 (2015) .‬تم تقديم الكلمة المحجوزة في‪const‬‬
‫‪ .‬ال يمكن إعادة تعريف المتغيرات المحددة‪const‬‬
‫‪ .‬ال يمكن إعادة تعيين المتغيرات المحددة‪const‬‬
‫‪.‬نطاق كتلة‪ const‬المتغيرات المحددة لها‬
‫خصائص الكلمة كونست‬

‫‪ :‬ال يمكن إعادة تعيين المتغير مرة اخرى اذا تم االعالن عنه بكنست‪const‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪const PI = 3.141592653589793‬‬
‫‪PI = 3.14; // This will give an error‬‬
‫‪PI = PI + 10; // This will also give an error‬‬
‫يجب أن يتم تعيينه‬

‫‪:‬يجب تعيين قيمة لمتغيرات جافاسكربت عند اإلعالن عنها‪const‬‬
‫صحيح‬
‫;‪const PI = 3.14159265359‬‬
‫غير صحيح‬
‫;‪const PI‬‬
‫;‪PI = 3.14159265359‬‬
‫؟‪ const‬متى تستخدم‬

‫دائما عن متغير‬
‫ً‬ ‫‪.‬عندما تعلم أنه ال ينبغي تغيير القيمة‪ const‬أعلن‬
‫‪:‬عندما تعلن‪ const‬استخدم‬
‫مصفوفة جديدة •‬
‫كائن جديد •‬
‫وظيفة جديدة •‬
‫جديد ‪• RegExp‬‬
‫الكائنات والمصفوفات‬
‫‪.‬مضللة بعض الشيء‪ const‬الكلمة المحجوزة‬
‫مرجعا ثابتًا للقيمة‬

‫ً‬ ‫‪.‬وال يحدد قيمة ثابتة‪ .‬يحدد‬
‫‪:‬ولهذا السبب ال يمكنك‬
‫إعادة تعيين قيمة ثابتة•‬
‫إعادة تعيين مجموعة ثابتة•‬
‫إعادة تعيين كائن ثابت•‬
‫‪:‬ولكن يمكنك‬
‫تغيير عناصر المصفوفة الثابتة•‬
‫تغيير خصائص الكائن الثابت•‬
‫تطبيق عملى على المصفوفات‬

‫‪:‬يمكنك تغيير عناصر مصفوفة ثابتة‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪// You can create a constant array:‬‬
‫;]"‪const HaBiB= ["Habib", "Hamza", "Abu Habib Al-Husini‬‬
‫‪// You can change an element:‬‬

‫;"!!!‪HaBiB[0] = "Abu Bakr Al-Siddiq‬‬
‫‪// You can add an element:‬‬

‫;)"‪HaBiB.push("Omar ibn Al-khattab‬‬
‫‪:‬لكن ال يمكنك إعادة تعيين المصفوفة‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪HaBiB= ["Abu Bakr Al-Siddiq!!!", "Hamza", "Omar ibn Al-khattab"]; // ERROR‬‬
‫مثال اخر على الكائنات‬

‫‪:‬يمكنك تغيير خصائص كائن ثابت‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪// You can create a const object:‬‬
‫;}"‪const $_Habib= {use:"Mohamed", age:"20", color:"white‬‬
‫‪// You can change a property:‬‬

‫;"‪$_Habib.color = "red‬‬
‫‪// You can add a property:‬‬

‫;"‪$_Habib.use = "tariq ibn Ziad‬‬
‫‪:‬لكن ال يمكنك إعادة تعيين الكائن‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪$_Habib= {use:"Hamza", age:"EX60", color:"red"}; // ERROR‬‬
‫نطاق المتغير داحل الكتلة‬

‫‪ Block Scope .‬عندما يتعلق األمر بـ ‪ let‬يشبه ما يحدث‪ const‬اإلعالن عن متغير‬
‫‪:‬المعلنة خارج الكتلة ‪ x‬المعلنة في الكتلة‪ ،‬في هذا ال✅ مثال ⇣⇣‪ ،‬ليست هي نفس ‪ x‬إن‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪const x = 10‬‬
‫‪// Here x is 10‬‬
‫{‬
‫;‪const x = 2‬‬
‫‪// Here x is 2‬‬
‫}‬
‫‪// Here x is 10‬‬
‫كيف إعادة اإلعالن عن المتغير‬

‫‪:‬يُسمح بإعادة اإلعالن عن متغير جافاسكربت في أي مكان في البرنامج‪var‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪x = 4‬‬ ‫‪// Allowed‬‬
‫‪:‬إلى نفس النطاق‪ const‬متغير ‪ let‬أو‪ var‬ال يُسمح بإعادة اإلعالن عن موجود‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪const x = 2; // Not allowed‬‬
‫{‬
‫}‬
‫{‬
‫‪const x = 2; // Allowed‬‬
‫}‬
‫‪:‬في نفس النطاق ‪ const،‬ال يُسمح بإعادة تعيين متغير موجود‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪x = 2‬‬ ‫‪// Not allowed‬‬
‫;‪var x = 2‬‬ ‫‪// Not allowed‬‬
‫;‪let x = 2‬‬ ‫‪// Not allowed‬‬
‫{‬
‫;‪x = 2‬‬ ‫‪// Not allowed‬‬
‫‪var x = 2; // Not allowed‬‬
‫}‬
‫‪:‬يُسمح بإعادة تعريف متغير باستخدام ‪ ،‬في نطاق آخر‪ ،‬أو في كتلة أخرى‪const‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪const x = 2‬‬ ‫‪// Allowed‬‬
‫{‬
‫}‬
‫{‬
‫}‬
‫المذيد عن الرفع واعادة االعالن‬

‫‪.‬يتم رفع المتغيرات المحددة إلى األعلى ويمكن تهيئتها في أي وقت‪var‬‬
‫‪:‬المعنى‪ :‬يمكنك استخدام المتغير قبل اإلعالن عنه‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪ .‬إذا كنت تريد معرفة المزيد عن الرفع‪ ،‬فقراء كتاب المرجع الكامل للجافسكربت‬
‫أيضا رفع المتغيرات المعرفة‬
‫‪.‬بـ إلى األعلى‪ ،‬ولكن ال تتم تهيئتها‪ const‬يتم ً‬
‫‪ ReferenceError:‬المتغير قبل اإلعالن عنه سيؤدي إلى‪ const‬المعنى‪ :‬استخدام‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)‪alert (hAbiB4‬‬
‫;"‪const hAbiB4 = "Hamza‬‬
‫طرق تعين القيمة‬

‫‪.‬يقوم عامل التعيين ( =) بتعيين قيمة لمتغير‬
‫أمثلة‬
‫;‪let x = 10‬‬
‫‪// Assign the value 5 to x‬‬

‫;‪let x = 5‬‬
‫‪// Assign the value 2 to y‬‬
‫;‪let y = 2‬‬
‫‪// Assign the value x + y to z:‬‬
‫;‪let z = x + y‬‬
‫‪:‬يقوم عامل اإلضافة ( ‪ )+‬بإضافة األرقام‬
‫إضافة‬
‫;‪let x = 5‬‬
‫;‪let y = 2‬‬
‫;‪let z = x + y‬‬
‫‪.‬عامل الضرب ( *) يقوم بضرب األرقام‬
‫ضرب‬
‫;‪let x = 5‬‬
‫;‪let y = 2‬‬
‫;‪let z = x * y‬‬
‫أنواع معامالت جافاسكربت‬

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

‫‪:‬يتم استخدام العوامل الحسابية إلجراء العمليات الحسابية على األرقام‬
‫أمثلة على العوامل الحسابية‬

‫;‪let a = 3‬‬
‫;‪let x = (100 + 50) * a‬‬
‫‪Operator‬‬ ‫وصف‬
‫‪+‬‬ ‫إضافة‬
‫‪-‬‬ ‫الطرح‬
‫*‬ ‫عمليه الضرب‬
‫**‬ ‫)‪ (ES2016‬األسي‬
‫‪/‬‬ ‫قسم‬
‫‪%‬‬ ‫المعامل (باقي القسمة)‬
‫‪++‬‬ ‫زيادةراتب‬
‫‪--‬‬ ‫إنقاص‬
‫معامالت تعيين جافاسكربت‬

‫‪.‬يقوم مشغلو التعيين بتعيين قيم لمتغيرات جافاسكربت‬
‫‪.‬يضيف عامل تعيين اإلضافة ( ‪ )=+‬قيمة إلى متغير‬
‫تكليف‬
‫;‪let x = 10‬‬
‫;‪x += 5‬‬
‫‪Operator‬‬ ‫مثال‬ ‫‪Same As‬‬

‫=‬ ‫‪x=y‬‬ ‫‪x=y‬‬
‫=‪+‬‬ ‫‪x += y‬‬ ‫‪x=x+y‬‬
‫=‪-‬‬ ‫‪x -= y‬‬ ‫‪x=x-y‬‬
‫=*‬ ‫‪x *= y‬‬ ‫‪x=x*y‬‬
‫=‪/‬‬ ‫‪x /= y‬‬ ‫‪x=x/y‬‬
‫=‪%‬‬ ‫‪x %= y‬‬ ‫‪x=x%y‬‬
‫=**‬ ‫‪x **= y‬‬ ‫‪x = x ** y‬‬
‫إضافة ودمج النصوص فى جافاسكربت‬
‫أيضا استخدام عامل ‪+‬التشغيل إلضافة (تسلسل) النصوص‬
‫‪.‬يمكن ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let text1 = "Habib‬‬
‫;"😂😁😀 ‪let text2 = "Al Husini‬‬
‫;‪let text3 = text1 + " " + text2‬‬
‫‪:‬نتيجة النص ‪ 3‬ستكون‬
‫‪Abu Bakr Al-Siddiq‬‬
‫أيضا استخدام عامل ‪=+‬المهمة إلضافة (تسلسل) النصوص‬

‫‪:‬يمكن ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;" ‪let text1 = "What a very‬‬
‫;"‪text1 += "nice day‬‬
‫‪:‬نتيجة النص ‪ 1‬ستكون‬
‫‪What a very nice day‬‬
‫‪.‬عند استخدامه على النصوص‪ ،‬يُسمى عامل التشغيل ‪ +‬عامل التسلسل‬
‫إضافة نصوص وأرقام‬
‫‪ :‬تؤدي إضافة رقمين إلى إرجاع المجموع‪ ،‬لكن إضافة رقم ونص سيؤدي إلى إرجاع نص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 5 + 5‬‬
‫;‪let y = "5" + 5‬‬
‫;‪let z = "Easy-to" + 5‬‬
‫‪:‬ستكون ‪ z‬و ‪ y‬و ‪ x‬نتيجة‬
‫‪10‬‬
‫‪55‬‬
‫‪Easy-to5‬‬
‫! إذا قمت بإضافة رقم ونص ‪ ،‬ستكون النتيجة نص‬
‫معامالت المقارنة‬
‫المعامل‬ ‫وصف‬
‫==‬ ‫يساوي‬
‫===‬ ‫قيمة متساوية ونوع متساو‬
‫=!‬ ‫غير متساوي‬
‫==!‬ ‫متساو‬
‫ٍ‬ ‫قيمة غير متساوية أو نوع غير‬
‫>‬ ‫أكثر من‬
‫<‬ ‫أقل من‬
‫=>‬ ‫أكبر من أو يساوي‬
‫=<‬ ‫اقل او يساوي‬
‫?‬ ‫عامل ثالثي‬
‫‪ JS .‬تم وصف عوامل المقارنة بشكل كامل في فصل مقارنات‬
‫عوامل المنطقية فى ووضع الشروط‬

‫‪Operato‬‬
‫‪Description‬‬
‫‪r‬‬
‫&&‬ ‫و‬
‫||‬ ‫او‬
‫!‬ ‫ليس‬
‫‪ JS .‬تم وصف العوامل المنطقية بشكل كامل في فصل المقارنات‬
‫معامالت االنواع‬
‫‪typeof‬‬ ‫إرجاع نوع المتغير‬

‫‪instanceof‬‬ ‫صحيحا إذا كان الكائن مثيل ًا لنوع الكائن‬
‫ً‬ ‫يُرجع‬
‫‪ JS .‬تم وصف عوامل تشغيل الكتابة بشكل كامل في فصل تحويل نوع‬
‫معامالت ‪Bitwise‬‬
‫‪.‬يعمل مشغلو البت على أرقام ‪ 32‬بت‬
‫‪.‬يتم تحويل أي معامل رقمي في العملية إلى رقم ‪ 32‬بت‪ .‬يتم تحويل النتيجة مرة أخرى إلى رقم جافاسكربت‬
‫‪Operato‬‬
‫وصف‬ ‫مثال‬ ‫‪Same as‬‬ ‫‪Result‬‬ ‫‪Decimal‬‬
‫‪r‬‬
‫&‬ ‫و‬ ‫‪5&1‬‬ ‫‪0101 & 0001‬‬ ‫‪0001‬‬ ‫‪1‬‬
‫|‬ ‫أو‬ ‫‪5|1‬‬ ‫‪0101 | 0001‬‬ ‫‪0101‬‬ ‫‪5‬‬
‫~‬ ‫ال‬ ‫‪~5‬‬ ‫‪~0101‬‬ ‫‪1010‬‬ ‫‪10‬‬
‫^‬ ‫‪XOR‬‬ ‫‪5^1‬‬ ‫‪0101 ^ 0001‬‬ ‫‪0100‬‬ ‫‪4‬‬
‫<<‬ ‫التحول األيسر‬ ‫‪5 << 1‬‬ ‫‪0101 << 1‬‬ ‫‪1010‬‬ ‫‪10‬‬
‫>>‬ ‫النقلة الصحيحة‬ ‫‪5 >> 1‬‬ ‫‪0101 >> 1‬‬ ‫‪0010‬‬ ‫‪2‬‬
‫التحول الصحيح‬
‫>>>‬ ‫‪5 >>> 1‬‬ ‫‪0101 >>> 1‬‬ ‫‪0010‬‬ ‫‪2‬‬
‫غير الموقعة‬
‫أرقاما موقعة ‪ 32‬بت‬

‫ً‬ ‫‪.‬تستخدم األمثلة أعاله أمثلة غير موقعة مكونة من ‪ 4‬بتات‪ .‬لكن جافاسكربت تستخدم‬
‫‪.‬ولهذا السبب‪ ،‬في جافاسكربت‪ ،‬لن يُرجع ~ ‪ .10 5‬سيُرجع ‪6-‬‬
‫سيعود ‪~00000000000000000000000101 111111111111111111111111111010‬‬
‫المعامالت الحسابية‬
‫كيف استخدام المعامالت الحسابية‬

‫‪.‬تقوم العوامل الحسابية بإجراء العمليات الحسابية على األرقام (األحرف الحرفية أو المتغيرات)‬
‫‪Operator‬‬ ‫وصف‬
‫‪+‬‬ ‫إضافة‬
‫‪-‬‬ ‫الطرح‬
‫*‬ ‫عمليه الضرب‬
‫**‬ ‫)‪ (ES2016‬األسي‬
‫‪/‬‬ ‫قسم‬
‫‪%‬‬ ‫المعامل (الباقي)‬
‫‪++‬‬ ‫زيادةراتب‬
‫‪--‬‬ ‫إنقاص‬
‫عامل ثالثي‬
‫مذيد من االمثلة على العمليات الحسابية‬

‫‪.‬العملية الحسابية النموذجية البسيطة تجري على رقمين‬
‫‪:‬يمكن أن يكون الرقمان حرفيين‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 100 + 50‬‬
‫‪:‬أو المتغيرات‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = a + b‬‬
‫‪:‬أو التعبيرات‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = (100 + 50) * a‬‬
‫ما هى المعامالت‬
‫‪ .‬تسمى األرقام (في العمليات الحسابية) بالمعامالت‬
‫‪ .‬يتم تعريف العملية (التي سيتم تنفيذها بين المعاملين) بواسطة عامل التشغيل‬
‫المشغل أو العامل المعامل‬ ‫المعامل‬

‫‪100‬‬ ‫‪+‬‬ ‫‪50‬‬
‫كيف االستخدام فى عملية الجمع‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 5‬‬
‫;‪let y = 2‬‬
‫;‪let z = x + y‬‬
‫الطرح‬
‫‪.‬يقوم عامل الطرح ( ‪ )-‬بطرح األرقام‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 5‬‬
‫;‪let y = 2‬‬
‫;‪let z = x - y‬‬
‫الضرب‬
‫‪.‬عامل الضرب ( *) يقوم بضرب األرقام‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 5‬‬
‫;‪let y = 2‬‬
‫;‪let z = x * y‬‬
‫القسمة‬
‫‪.‬عامل القسمة ( ‪ )/‬يقسم األرقام‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 5‬‬
‫;‪let y = 2‬‬
‫;‪let z = x / y‬‬
‫بقية القسمة‬
‫‪.‬يقوم عامل المعامل ( ‪ )%‬بإرجاع باقي القسمة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 5‬‬
‫;‪let y = 2‬‬
‫;‪let z = x % y‬‬
‫‪ .‬في الحساب‪ ،‬قسمة عددين صحيحين ينتج خارج القسمة والباقي‬
‫‪.‬في الرياضيات‪ ،‬نتيجة العملية المعيارية هي باقي القسمة الحسابية‬
‫الجمع بالذيادة الثابتة‬

‫‪.‬عامل الزيادة ( ‪ )++‬يزيد األرقام بواحد فى كل اجراء‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 5‬‬
‫;‪x++‬‬
‫;‪let z = x‬‬
‫الطرح‬
‫‪.‬عامل التناقص ( ‪ )--‬ينقص األرقام‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 5‬‬
‫;‪x--‬‬
‫;‪let z = x‬‬
‫األس‬
‫‪.‬يقوم عامل األس ( **) برفع المعامل األول إلى أس المعامل الثاني‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 5‬‬
‫;‪let z = x ** 2‬‬
‫‪ Math.pow(x,y):‬ينتج نفس النتيجة مثل ‪x ** y‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 5‬‬
‫;)‪let z = Math.pow(x,2‬‬
‫أسبقية المشغل فى التنفيذ‬

‫‪.‬تصف أسبقية عامل التشغيل الترتيب الذي يتم به تنفيذ العمليات في التعبير الحسابي‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 100 + 50 * 3‬‬
‫هل نتيجة ال✅ مثال ⇣⇣ أعاله هي نفسها ‪ 3*150‬أم هي نفسها ‪150 + 100‬؟‬
‫هل يتم الجمع أم الضرب أوال؟‬
‫‪.‬كما هو الحال في الرياضيات المدرسية التقليدية‪ ،‬يتم الضرب أوال‬
‫‪ ( ).+-‬الضرب ( *) والقسمة ( ) لهما أسبقية‪ /‬أعلى من الجمع ( ) والطرح‬
‫‪.‬و(كما هو الحال في الرياضيات المدرسية) يمكن تغيير األسبقية باستخدام األقواس‬

‫‪:‬عند استخدام األقواس‪ ،‬يتم حساب العمليات داخل األقواس أوال ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = (100 + 50) * 3‬‬
‫‪:‬عندما يكون للعديد من العمليات نفس األسبقية (مثل الجمع والطرح أو الضرب والقسمة)‪ ،‬يتم حسابها من اليسار إلى اليمين‬
‫أمثلة‬
‫;‪let x = 100 + 50 - 3‬‬
‫;‪let x = 100 / 50 * 3‬‬
‫ملحوظة‬
‫‪:‬للحصول على قائمة كاملة بقيم أسبقية عامل التشغيل‪ ،‬انتقل إلى‬
‫‪ .‬قيم أسبقية مشغل جافاسكربت‬
‫تعرف على المشغالت باالمثلة‬
‫مشغالت التعيين فى جافاسكربت‬
‫‪.‬يقوم مشغلو التعيين بتعيين قيم لمتغيرات جافاسكربت‬
‫=‬ ‫‪x=y‬‬ ‫‪x=y‬‬
‫=‪+‬‬ ‫‪x += y‬‬ ‫‪x=x+y‬‬
‫=‪-‬‬ ‫‪x -= y‬‬ ‫‪x=x-y‬‬
‫=*‬ ‫‪x *= y‬‬ ‫‪x=x*y‬‬
‫=‪/‬‬ ‫‪x /= y‬‬ ‫‪x=x/y‬‬
‫=‪%‬‬ ‫‪x %= y‬‬ ‫‪x=x%y‬‬
‫=**‬ ‫‪x **= y‬‬ ‫‪x = x ** y‬‬
‫مشغلي مهمة التحول‬

‫مثال ‪Operator‬‬ ‫‪Same As‬‬
‫=<<‬ ‫‪x <<= y‬‬ ‫‪x = x << y‬‬
‫=>>‬ ‫‪x >>= y‬‬ ‫‪x = x >> y‬‬
‫=>>>‬ ‫‪x >>>= y‬‬ ‫‪x = x >>> y‬‬
‫‪ Bitwise‬مشغلي تعيين‬
‫=&‬ ‫‪x &= y‬‬ ‫‪x=x&y‬‬
‫=^‬ ‫‪x ^= y‬‬ ‫‪x=x^y‬‬
‫=|‬ ‫‪x |= y‬‬ ‫‪x=x|y‬‬
‫مشغلي التعيين المنطقي‬

‫=&&‬ ‫‪x &&= y‬‬ ‫)‪x = x && (x = y‬‬
‫=||‬ ‫‪x ||= y‬‬ ‫)‪x = x || (x = y‬‬
‫=??‬ ‫‪x ??= y‬‬ ‫)‪x = x ?? (x = y‬‬
‫= المشغل‬
‫‪.‬يقوم عامل التعيين البسيط بتعيين قيمة لمتغير‬
‫أمثلة مهمة بسيطة‬
‫;‪let x = 10‬‬
‫;‪let x = 10 + y‬‬
‫=‪ +‬المشغل‬
‫‪.‬يضيف عامل تعيين اإلضافة قيمة إلى متغير‬
‫إضافة أمثلة التعيين‬

‫;‪let x = 10‬‬
‫;‪x += 5‬‬
‫;"‪let text = "Easy-to"; text += " Arabic‬‬
‫المشغل =‪-‬‬
‫‪.‬يقوم عامل تعيين الطرح بطرح قيمة من متغير‬
‫الطرح ✅‬ ‫مثال ⇣⇣ على مهمة‬

‫;‪let x = 10‬‬
‫;‪x -= 5‬‬
‫المشغل =*‬
‫‪.‬يقوم عامل تعيين الضرب بضرب متغير‬
‫الضرب ✅‬ ‫مثال ⇣⇣ على مهمة‬

‫;‪let x = 10‬‬
‫;‪x *= 5‬‬
‫المشغل =**‬
‫‪.‬يقوم عامل التعيين األسي برفع متغير إلى قوة المعامل‬
‫األسي ✅‬ ‫مثال ⇣⇣ على التنازل‬

‫;‪let x = 10‬‬
‫;‪x **= 5‬‬
‫المشغل =‪/‬‬
‫‪.‬يقوم عامل تخصيص القسم بتقسيم المتغير‬
‫القسم ✅‬ ‫مثال ⇣⇣ لتخصيص‬

‫;‪let x = 10‬‬
‫;‪x /= 5‬‬
‫المشغل =‪%‬‬
‫‪.‬يقوم عامل تعيين الباقيمن القسمة بتعيين الباقي لمتغير‬
‫الباقي ✅‬ ‫مثال ⇣⇣ لتعيين‬
‫;‪let x = 10‬‬
‫;‪x %= 5‬‬
‫=<< العامل‬
‫‪.‬األيسر بإزاحة متغير ‪ Shift‬يقوم عامل تعيين‬
‫األيسر ✅‬ ‫مثال ⇣⇣ لتعيين التحول‬

‫;‪let x = -100‬‬
‫;‪x <<= 5‬‬
‫=>> المشغل‬
‫‪.‬األيمن بإزاحة متغير (الموقّع) ‪ Shift‬يقوم عامل تعيين‬
‫األيمن ✅‬ ‫مثال ⇣⇣ لتعيين التحول‬

‫;‪let x = -100‬‬
‫;‪x >>= 5‬‬
‫المشغل =>>>‬
‫‪.‬يقوم عامل تعيين التحول األيمن غير الموقع بإزاحة متغير (غير موقع) إلى اليمين‬
‫الموقع ✅‬ ‫مثال ⇣⇣ لتعيين التحول األيمن غير‬
‫;‪let x = -100‬‬
‫;‪x >>>= 5‬‬
‫المشغل =&‬
‫‪.‬على معاملين ويقوم بتعيين النتيجة للمتغير ‪ AND‬بإجراء عملية ‪ Bitwise AND Assignment‬يقوم عامل‬
‫للبت والتخصيص ✅‬ ‫مثال ⇣⇣‬

‫;‪let x = 10‬‬
‫;‪x &= 5‬‬
‫=| المشغل‬
‫‪.‬على معاملين ويقوم بتعيين النتيجة للمتغير ‪ bitwise OR‬بإجراء عملية ‪ Bitwise OR Assignment‬يقوم عامل‬
‫مثال ✅‬ ‫أو الواجب ‪⇣⇣ Bitwise‬‬

‫;‪let x = 10‬‬
‫;‪x |= 5‬‬
‫=^ المشغل‬
‫‪.‬على معاملين ويقوم بتعيين النتيجة للمتغير ‪ XOR‬بإجراء عملية ‪ Bitwise XOR‬يقوم عامل تعيين‬
‫لتعيين ✅‬ ‫‪ Bitwise XOR‬مثال ⇣⇣‬
‫;‪let x = 10‬‬
‫;‪x ^= 5‬‬
‫=&& المشغل‬
‫‪.‬بين قيمتين ‪ AND‬يتم استخدام عامل التشغيل المنطقي‬
‫‪.‬إذا كانت القيمة األولى صحيحة‪ ،‬يتم تعيين القيمة الثانية‬
‫منطقي والواجب ✅‬ ‫مثال ⇣⇣‬

‫;‪let x = 10‬‬
‫;‪x &&= 5‬‬
‫تم اصدارة فى‪ &&= ES2020 .‬المشغل‬
‫=|| المشغل‬
‫‪.‬بين قيمتين ‪ OR‬يتم استخدام عامل التعيين المنطقي‬
‫‪.‬إذا كانت القيمة األولى خاطئة‪ ،‬يتم تعيين القيمة الثانية‬
‫التنازل ✅‬ ‫مثال ⇣⇣ منطقي أو‬

‫;‪let x = 10‬‬
‫;‪x ||= 5‬‬
‫‪ ES2020 .‬المشغل ||= تم اصدارة فى‬
‫المشغل =??‬
‫‪.‬بين قيمتين ‪ Nullish‬يتم استخدام عامل تعيين الدمج‬
‫‪.‬إذا كانت القيمة األولى غير محددة أو فارغة‪ ،‬فسيتم تعيين القيمة الثانية‬
‫الفارغة ✅‬ ‫مثال ⇣⇣ على مهمة الدمج‬

‫;‪let x = 10‬‬
‫;‪x ??= 5‬‬
‫أنواع البيانات العامة‬
‫جافاسكربت لديها ‪ 8‬أنواع البيانات‬
‫نص ‪1.‬‬
‫رقم ‪2.‬‬
‫رقم كبير ‪3.‬‬
‫منطقي ‪4.‬‬
‫غير محدد ‪5.‬‬
‫فارغ ‪5.‬‬
‫رمز ‪7.‬‬
‫كائن ‪8.‬‬
‫نوع بيانات الكائن‬
‫‪:‬يمكن أن يحتوي نوع بيانات الكائن على‬
‫كائن ‪1.‬‬
‫مصفوفة ‪2.‬‬
‫تاريخ ‪3.‬‬
‫أمثلة على انشاء انواع من البيانات العامة‬
‫‪// Num:‬‬
‫;‪let length = 16‬‬
‫;‪let weight = 7.5‬‬
‫‪// Strings:‬‬
‫;"‪let color = "Yellow‬‬
‫;"‪let lastName = "tariq ibn Ziad‬‬
‫‪// Booleans‬‬
‫;‪let x = true‬‬
‫;‪let y = false‬‬
‫‪// Object:‬‬
‫;}"😂😁😀 ‪const hAbiB = {firstName:"Habib", lastName:"Al Husini‬‬
‫‪// Array object:‬‬

‫‪// Date object:‬‬

‫;)"‪const date = new Date("2022-03-25‬‬
‫ملحوظة‬
‫يمكن لمتغير جافاسكربت االحتفاظ بأي نوع من البيانات‪ .‬فى المصفوفة وغير المصفوفة والتحول السريع‬
‫مفهوم أنواع البيانات‬

‫مهما‬
‫ً‬ ‫مفهوما‬
‫ً‬ ‫‪.‬في البرمجة‪ ،‬تعد أنواع البيانات‬
‫قادرا على العمل على المتغيرات‪ ،‬من المهم أن تعرف شيًئا عن النوع‬
‫‪.‬لتكون ً‬
‫‪:‬بدون أنواع البيانات‪ ،‬ال يمكن للكمبيوتر حل هذه المشكلة بأمان‬
‫;"‪let x = 16 + "Hamza‬‬
‫هل من المنطقي إضافة "حمزا" إلى الستة عشر؟ هل سينتج خطأ أم سينتج نتيجة؟‬
‫‪:‬سوف تتعامل جافاسكربت مع ال✅ مثال ⇣⇣ أعاله على النحو التالي‬
‫;"‪let x = "16" + "Hamza‬‬
‫ملحوظة‬
‫‪ .‬عند إضافة رقم ونص ‪ ،‬ستتعامل جافاسكربت مع الرقم كنص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let x = 16 + "Hamza‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = "Hamza" + 16‬‬
‫‪:‬تقوم جافاسكربت بتقييم التعبيرات من اليسار إلى اليمين‪ .‬تسلسالت مختلفة يمكن أن تنتج نتائج مختلفة‬
‫;"‪let x = 16 + 4 + "Hamza‬‬
‫‪:‬نتيجة‬
‫‪20Hamza‬‬
‫;‪let x = "Hamza" + 16 + 4‬‬
‫‪Hamza164‬‬
‫‪ "Hamza".‬في ال✅ مثال ⇣⇣ األول‪ ،‬تتعامل جافاسكربت مع الرقمين ‪ 16‬و‪ 4‬كأرقام‪ ،‬حتى تصل إلى‬
‫‪.‬في ال✅ مثال ⇣⇣ الثاني‪ ،‬بما أن المعامل األول عبارة عن نص ‪ ،‬فسيتم التعامل مع جميع المعامالت كنصوص‬
‫أنواع جافاسكربت الديناميكية‬

‫تحتوي جافاسكربت على أنواع ديناميكية‪ .‬وهذا يعني أنه يمكن استخدام نفس المتغير لالحتفاظ بأنواع بيانات مختلفة او‬
‫‪ :‬بمعنى اصح تستطيع تغير النوع بمجرد اسناد قيمة النوع الجديد وهذا يعنى ان جافاسكربت لغة سهلة جدا وذكية‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x‬‬ ‫‪// Now x is undefined‬‬
‫;‪x = 5‬‬ ‫‪// Now x is a Number‬‬
‫‪x = "Habib"; // Now x is a String‬‬
‫نصوص جافاسكربت‬
‫‪ "Abu Bakr Al-Siddiq".‬عبارة عن سلسة نصية من األحرف مثل‬
‫‪:‬تتم كتابة النصوص مع عالمات االقتباس‪ .‬يمكنك استخدام عالمات االقتباس المفردة أو المزدوجة‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪// Using double quotes:‬‬
‫;" ‪let hAbiB41 = "Hamza‬‬
‫‪// Using single quotes:‬‬

‫;' ‪let hAbiB42 = 'Hamza‬‬
‫‪ :‬يمكنك استخدام عالمات االقتباس داخل النص ‪ ،‬طالما أنها ال تتطابق مع عالمات االقتباس المحيطة بالنص‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪// Single quote inside double quotes:‬‬
‫;"‪let Text1 = "It's alright‬‬
‫‪// Single quotes inside double quotes:‬‬

‫;"'‪let Text2 = "He is called 'habib‬‬
‫‪// Double quotes inside single quotes:‬‬

‫;'"‪let Text3 = 'He is called "habib‬‬
‫‪ .‬سوف تتعلم المزيد عن النصوص باذن اهلل تعالى في هذا الكتاب او فى الجزء الثانى‬
‫األرقام فى جافاسكربت‬
‫‪.‬يتم تخزين جميع أرقام جافاسكربت كأرقام عشرية (نقطة عائمة)‬
‫‪:‬يمكن كتابة األرقام مع أو بدون الكسور العشرية‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪// With decimals:‬‬
‫;‪let x1 = 34.00‬‬
‫‪// Without decimals:‬‬

‫;‪let x2 = 34‬‬
‫األسية فى الجبر‬
‫يمكن كتابة األعداد الكبيرة ج ًدا أو الصغيرة ج ًدا بالترميز العلمي (األسي) او استخدام جميع ادوات الجبر لن نتعمق كثيرا‬
‫فى ادوات الجبر داخل الجافاسكربت ﻻنها تحتاج الى كتاب خاص بها ولكن شاهد هذا المثال البسيط فى استخدام اﻻس‬
‫‪:‬العددى‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪let y = 123e5; // 12300000‬‬
‫‪let z = 123e-5; // 0.00123‬‬
‫انتظر كتاب خاص بادوات الجبر داخل الجافاسكربت وانشاء العمليات والمعادﻻات المعقدة باذن اهلل تعالى‬
‫ملحوظة‬
‫‪:‬تحتوي معظم لغات البرمجة على العديد من أنواع األرقام‬
‫‪:‬األعداد الصحيحة (األعداد الصحيحة)‬

‫الطويله او الكبيرة (‪ 64‬بت) ‪)،‬بت ‪، int (32‬البايت (‪ 8‬بت)‪ ،‬القصير (‪ 16‬بت)‬
‫‪:‬األعداد الحقيقية (العشرية)‬
‫‪.‬مزدوج (‪ 64‬بت) ‪)،‬بت ‪(32‬‬
‫‪.‬مزدوج (نقطة عائمة ‪ 64‬بت)‬
‫ملحوظة‬
‫دائما نوع واحد‪ :‬فى االرقام لن نستخدم غيرة ال تشغل نفسك بهذة االنقسامات واالنواع الكثيرة فهى لها‬
‫ً‬ ‫جافاسكربت هي‬
‫استخدامتها فى الجبر والمعادالات الدقيقة فقط‬
‫نوع البيانات ‪BigInt‬‬
‫هذا النوع من البيانات ساشرحة من باب العلم فقط فهو نادر االستخدام النة مخصص للحسابات الفلكية الكبيرة داخل‬
‫يمكن استخدامه لتخزين قيم عددية كبيرة ج ًدا للحسابات‬ ‫جافاسكربت وهو نوع بيانات جديد تم اصدارة فى (‪)2020‬‬
‫عادي‬ ‫‪.‬الفلكية وهذا يحتاج الى اجهزة كمبيوتر قوية جدا يطلق عليها وركستيشن بحيث ال يمكن تمثيلها برقم جافاسكربت‬
‫بت‬ ‫‪.‬يتم تخزين جميع أرقام جافاسكربت بتنسيق الفاصلة العشرية ‪64‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)"‪let x = BigInt("123456789012345678901234567890‬‬
‫جافاسكربت و االساليب المنطقية‬

‫‪ false.‬أو‪: true‬يمكن أن تحتوي القيم المنطقية على قيمتين صح او خطا فقط‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 5‬‬
‫;‪let y = 5‬‬
‫;‪let z = 6‬‬
‫)‪(x == y‬‬ ‫‪// Returns true‬‬
‫)‪(x == z‬‬ ‫‪// Returns false‬‬
‫‪.‬غالبًا ما تستخدم القيم المنطقية في االختبارات الشرطية‬

‫‪ .‬سوف تتعلم المزيد عن االختبار الشرطي باذن اهلل تعالى في هذا الكتاب او فى الجزء الثانى‬
‫المصفوفات فى جافاسكربت‬
‫‪.‬تتم كتابة مصفوقات جافاسكربت بين قوسين مربعين‬
‫‪.‬يتم فصل عناصر المصفوفة بفواصل‬
‫‪:‬تحتوي على ثالثة عناصر (أسماء ) ‪ HaBiB،‬يعلن االكواد التالية بنشا مصفوفة تسمى‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪.‬تعتمد فهارس المصفوفات على الصفر‪ ،‬مما يعني أن العنصر األول هو [‪ ،]0‬والثاني هو [‪ ،]1‬وهكذا‬
‫‪ .‬سوف تتعلم المزيد عن المصفوفات باذن اهلل تعالى في هذا الكتاب او فى الجزء الثانى‬
‫الكائنات فى جافاسكربت‬
‫‪ {}.‬تتم كتابة كائنات جافاسكربت باستخدام األقواس المتعرجة‬
‫‪.‬تتم كتابة خصائص الكائن على هيئة أزواج االسم‪ :‬القيمة‪ ،‬مفصولة بفواصل‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪const hAbiB = {firstName:"Habib", lastName:"Al Husini 😀😁😂", age:70,‬‬
‫;}"😂😁😀‪eyeColor:"blue‬‬
‫‪.‬الكائن (الشخص) في ال✅ مثال ⇣⇣ أعاله له ‪ 4‬خصائص‪ :‬االسم األول‪ ،‬االسم األخير‪ ،‬العمر‪ ،‬ولون العين‬
‫‪ .‬سوف تتعلم المزيد عن الكائنات باذن اهلل تعالى في هذا الكتاب او فى الجزء الثانى‬
‫كيف معرفة االنواع للبيانات‬
‫‪.‬عامل تشغيل جافاسكربت للعثور على نوع متغير جافاسكربت‪ typeof‬يمكنك استخدام‬
‫‪:‬التشغيل بإرجاع نوع المتغير أو التعبير‪ typeof‬يقوم عامل‬
‫مثال ✅‬ ‫⇣⇣‬
‫"" ‪typeof‬‬ ‫"‪// Returns "string‬‬
‫"‪typeof "Habib‬‬ ‫"‪// Returns "string‬‬
‫"‪typeof "Abu Bakr Al-Siddiq" // Returns "string‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪typeof 0‬‬ ‫"‪// Returns "number‬‬
‫‪typeof 314‬‬ ‫"‪// Returns "number‬‬
‫‪typeof 3.14‬‬ ‫"‪// Returns "number‬‬
‫)‪typeof (3‬‬ ‫"‪// Returns "number‬‬
‫)‪typeof (3 + 4‬‬ ‫"‪// Returns "number‬‬
‫‪ .‬باذن اهلل تعالى في هذا الكتاب او فى الجزء الثانى ‪ typeof‬سوف تتعلم المزيد من االمثلة عن‬
‫االعالن عن نوع غير معرف وليس له قيمة‬

‫‪ .‬النوع هو ‪ undefined.‬في جافاسكربت‪ ،‬المتغير بدون قيمة لة‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪let $_Habib; // Value is undefined, type is undefined‬‬
‫أيضا ‪ undefined.‬يمكن إفراغ أي متغير عن طريق ضبط القيمة على‬

‫‪ undefined.‬سيكون النوع ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪$_Habib= undefined; // Value is undefined, type is undefined‬‬
‫القيم الفارغة‬
‫‪ undefined.‬القيمة الفارغة ليس لها عالقة بـ‬
‫‪.‬تحتوي النص الفارغة على قيمة قانونية ونوع‬
‫مثال ✅‬ ‫⇣⇣‬
‫"‪let $_Habib= ""; // The value is "", the typeof is "string‬‬
‫الوظائف فى جافاسكربت‬
‫‪.‬وظيفة جافاسكربت عبارة عن كتلة من التعليمات البرمجية مصممة ألداء مهمة معينة‬
‫‪.‬يتم تنفيذ وظيفة جافاسكربت عندما يستدعيها "شيء ما" (يستدعيها)‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪// Function to compute the product of p1 and p2‬‬
‫{ )‪function Husini(p1, p2‬‬
‫;‪return p1 * p2‬‬
‫}‬
‫كيف بناء جملة الوظيفة‬

‫متبوعا باألقواس‪ function‬يتم تعريف دالة جافاسكربت باستخدام الكلمة‬
‫ً‬ ‫المحجوزة‪ ،‬متبوعة باالسم ‪،‬‬
‫‪.‬يمكن أن تحتوي أسماء الوظائف على أحرف وأرقام وشرطات سفلية وعالمات الدوالر (نفس قواعد المتغيرات)‬
‫‪:‬قد تتضمن األقواس أسماء البرمترات مفصولة بفواصل‬
‫) ‪( parameter1,parameter2,...‬‬
‫}{ ‪:‬يتم وضع الكود الذي سيتم تنفيذه بواسطة الوظيفة داخل قوسين متعرجين‬
‫{ )‪function name(parameter1, parameter2, parameter3‬‬

‫‪// code to be executed‬‬
‫}‬
‫‪.‬يتم إدراج معلمات الوظيفة داخل األقواس () في تعريف الوظيفة‬

‫‪.‬وسيطات الدالة هي القيم التي تتلقاها الدالة عند استدعائها‬
‫‪.‬داخل الدالة‪ ،‬تعمل الوسيطات (البرامترات ) كمتغيرات محلية‬
‫كيف استدعاء الوظيفة‬

‫‪:‬سيتم تنفيذ التعليمات البرمجية الموجودة داخل الوظيفة عندما يقوم "ربط حدث ما" باستدعاء الوظيفة‬
‫عند وقوع حدث (عندما ينقر المستخدم على زر)•‬

‫عندما يتم استدعاؤه من كود جافاسكربت•‬
‫تلقائيا (االستدعاء الذاتي) داخل االقواس وهذا يعنى تنفيذ مباشر•‬
‫‪ .‬سوف تتعلم الكثير عن استدعاء الوظائف باذن اهلل تعالى في هذا الكتاب او فى الجزء الثانى‬
‫التحكم فى االرجاع من داخل الوظيفة‬

‫‪.‬عبارة‪ ،‬ستتوقف الوظيفة عن التنفيذ‪ return‬عندما تصل جافاسكربت إلى‬
‫‪.‬إذا تم استدعاء الوظيفة من عبارة‪ ،‬فسوف تعود جافاسكربت لتنفيذ التعليمات البرمجية بعد عبارة االستدعاء‬
‫‪":‬غالبًا ما تحسب الوظائف قيمة اإلرجاع ‪ .‬يتم "إرجاع" القيمة المرجعة إلى "المتصل‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪:‬حساب حاصل ضرب رقمين وإرجاع النتيجة‬
‫‪let x = Husini(4, 3); // Function is called, return value will end up in x‬‬
‫{ )‪function Husini(a, b‬‬

‫;‪return a * b‬‬ ‫‪// Function returns the product of a and b‬‬
‫}‬
‫‪:‬ستكون ‪ x‬النتيجة في‬
‫‪12‬‬
‫لماذا نستخدم الوظائف؟‬

‫يمكنك إعادة استخدام الكود‪ :‬حدد الكود مرة واحدة‪ ،‬واستخدمه عدة مرات‪.‬وبتالى هى مهمة جدا لتوفير الوقت والمجهود‬
‫‪.‬يمكنك استخدام نفس الكود عدة مرات مع وسائط مختلفة للحصول على نتائج مختلفة‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪:‬تحويل فهرنهايت إلى مئوية‬
‫{ )‪function toCelsius(fahrenheit‬‬
‫;)‪return (5/9) * (fahrenheit-32‬‬
‫}‬
‫;)‪document.getElementById("Habib").innerHTML = toCelsius(77‬‬
‫استخدام الوظيفة الرجاع ناتج العملية‬

‫‪.‬ويشير إلى نتيجة الوظيفة)(‪، toCelsius‬يشير إلى كائن الوظيفة‪، toCelsius‬باستخدام ال✅ مثال ⇣⇣ أعاله‬
‫‪.‬سيؤدي الوصول إلى وظيفة بدون إلى إرجاع كائن الوظيفة بدال ً من نتيجة الوظيفة‬
‫مثال ✅‬ ‫⇣⇣‬
‫{ )‪function toCelsius(fahrenheit‬‬
‫;)‪return (5/9) * (fahrenheit-32‬‬
‫}‬
‫;‪document.getElementById("Habib").innerHTML = toCelsius‬‬
‫كيف استخدام الوظائف كقيم متغيرة‬

‫‪.‬يمكن استخدام الوظائف بنفس الطريقة التي تستخدم بها المتغيرات‪ ،‬في كافة أنواع الصيغ والواجبات والحسابات‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪:‬بدال ً من استخدام متغير لتخزين القيمة المرجعة للدالة‬
‫;)‪let x = toCelsius(77‬‬
‫;"‪let text = "The temperature is " + x + " Celsius‬‬
‫‪:‬يمكنك استخدام الدالة مباشرة كقيمة متغيرة‬
‫;"‪let text = "The temperature is " + toCelsius(77) + " Celsius‬‬
‫‪ .‬سوف تتعلم الكثير عن الوظائف باذن اهلل تعالى في هذا الكتاب او فى الجزء الثانى‬
‫نطاق المتغيرات المحلية‬

‫‪.‬المتغيرات المعلنة داخل وظيفة جافاسكربت‪ ،‬تصبح محلية للوظيفة‬
‫‪.‬ال يمكن الوصول إلى المتغيرات المحلية إال من داخل الوظيفة‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪// code here can NOT use hAbiB4‬‬
‫‪// code here CAN use hAbiB4‬‬
‫}‬
‫‪// code here can NOT use hAbiB4‬‬
‫وبما أنه يتم التعرف على المتغيرات المحلية فقط داخل وظائفها‪ ،‬فيمكن استخدام المتغيرات التي تحمل االسم نفسه في‬
‫‪.‬وظائف مختلفة‬
‫‪.‬يتم إنشاء المتغيرات المحلية عند بدء تشغيل الدالة‪ ،‬ويتم حذفها عند اكتمال الدالة‬
‫كائنات جافاسكربت‬
‫‪.‬لقد تعلمت بالفعل أن متغيرات جافاسكربت عبارة عن حاويات لقيم البيانات‬
‫‪ $_Habib:‬لمتغير اسمه )‪ (Mohamed‬يعين هذا الكود قيمة بسيطة‬
‫;"‪let $_Habib= "Mohamed‬‬
‫‪.‬الكائنات هي متغيرات أيضا‪ .‬لكن الكائنات يمكن أن تحتوي على العديد من القيم‬
‫‪ $_Habib:‬لمتغير اسمه )‪ (Mohamed، 500، White‬يعين هذا الكود العديد من القيم‬
‫‪.‬تتم كتابة القيم على هيئة أزواج االسم‪ :‬القيمة (االسم والقيمة مفصولة بنقطتين)‬
‫‪ const .‬من الممارسات الشائعة اإلعالن عن الكائنات باستخدام الكلمة المحجوزة‬
‫‪: JS Const .‬مع الكائنات في الفصل ‪ const‬تعرف على المزيد حول استخدام‬
‫تعريف الكائن‬
‫‪:‬يمكنك تعريف (وإنشاء) كائن جافاسكربت بكائن حرفي‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪const hAbiB = {firstName:"Habib", lastName:"Al Husini 😀😁😂", age:50,‬‬
‫;}"‪eyeColor:"blue‬‬
‫‪:‬المسافات وفواصل األسطر ليست مهمة‪ .‬يمكن أن يمتد تعريف الكائن على عدة أسطر‬
‫مثال ✅‬ ‫⇣⇣‬
‫{ = ‪const hAbiB‬‬
‫‪firstName: "Habib",‬‬
‫‪lastName: "Al Husini 😀😁😂",‬‬
‫‪age: 50,‬‬
‫"‪eyeColor: "blue‬‬
‫;}‬
‫خصائص الكائنات‬
‫الخصائص هى عبارة مجموعة من القيم تصف الكائن‬
‫الوصول إلى خصائص الكائن‬

‫‪:‬يمكنك الوصول إلى خصائص الكائن بطريقتين‬
‫‪objectName.propertyName‬‬
‫أو‬
‫]"‪objectName["propertyName‬‬
‫‪✅1‬‬ ‫مثال ⇣⇣‬
‫;‪hAbiB.lastName‬‬
‫⇣⇣‪✅ 2‬‬ ‫مثال‬

‫;]"‪hAbiB["lastName‬‬
‫‪.‬كائنات جافاسكربت عبارة عن حاويات لقيم مسماة تسمى الخصائص‬
‫طرق الكائن‬
‫أيضا على طرق‬
‫‪ .‬يمكن أن تحتوي الكائنات ً‬
‫‪.‬األساليب هي اإلجراءات التي يمكن تنفيذها على الكائنات‬
‫‪ .‬يتم تخزين األساليب في الخصائص كتعريفات الوظيفة‬
‫‪.‬الطريقة هي وظيفة مخزنة كخاصية‬
‫مثال ✅‬ ‫⇣⇣‬
‫{ = ‪const hAbiB‬‬
‫‪firstName: "Habib",‬‬
‫‪lastName : "Al Husini 😀😁😂",‬‬
‫‪id‬‬ ‫‪: 5566,‬‬
‫{ )(‪fullName : function‬‬
‫;‪return this.firstName + " " + this.lastName‬‬
‫}‬
‫;}‬
‫‪ .‬يشير إلى كائن الشخص‪، this‬في ال✅ مثال ⇣⇣ أعاله‬

‫‪ .‬يعني خاصية االسم األول لهذا ‪IE this.firstName‬‬
‫‪ .‬يعني خاصية االسم األول للشخص ‪IE this.firstName‬‬
‫كيف االشارة الى الكائن بدون ذكر اسمة‬

‫‪ .‬تشير الكلمة المحجوزة إلى كائن‪، this‬‬
‫‪.‬استدعائه (استخدامه أو استدعائه)‪ this‬يعتمد الكائن على كيفية‬
‫اعتمادا على كيفية استخدامها‪ this‬تشير الكلمة‬
‫ً‬ ‫‪:‬المحجوزة إلى كائنات مختلفة‬
‫ملحوظة‬
‫‪ this.‬ليس متغيرا‪ .‬إنها كلمة محجوزة ‪ .‬ال يمكنك تغيير قيمة‪this‬‬
‫‪:‬أنظر أيضا‬
‫اقراء قسم الكالسات فى كتاب الكافى فى ‪php‬‬
‫كيف استخدام كلمة ذيس‬

‫‪.‬يشير إلى "مالك" الوظيفة‪، this‬في تعريف الوظيفة‬
‫‪.‬الوظيفة‪" fullName‬هو كائن الشخص الذي "يمتلك‪، this‬في ال✅ مثال ⇣⇣ أعاله‬
‫‪ .‬خاصية هذا الكائن‪ firstName‬يعني‪، this.firstName‬وبعبارة أخرى‬
‫‪ .‬في كتاب المرجع الكامل لجافاسكربت‪ this‬تعرف على المزيد حول الكلمة‬
‫كيف الوصول الى اعضاء الكائن‬

‫‪:‬يمكنك الوصول إلى أسلوب كائن باستخدام بناء الجملة التالي‬
‫)(‪objectName.methodName‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)(‪name = hAbiB.fullName‬‬
‫ملحوظة‬
‫‪ :‬إذا قمت بالوصول إلى طريقة بدون األقواس ()‪ ،‬فسوف تُرجع تعريف الوظيفة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪name = hAbiB.fullName‬‬
‫ال تستخدم هذة الطريقة‬

‫!ال تعلن عن النصوص واألرقام والقيم المنطقية ككائنات بستخدام الكلمة نيو‬
‫‪:‬يتم إنشاء المتغير ككائن ‪ " new"،‬عندما يتم اإلعالن عن متغير جافاسكربت باستخدام الكلمة المحجوزة‬
‫;)(‪x = new String‬‬ ‫‪// Declares x as a String object‬‬

‫;)(‪y = new Number‬‬ ‫‪// Declares y as a Number object‬‬
‫;)(‪z = new Boolean‬‬ ‫‪// Declares z as a Boolean object‬‬
‫‪.‬األشياء‪ .‬إنها تعقد التعليمات البرمجية وتبطئ سرعة التنفيذ‪ Boolean‬و و‪ Number‬و‪ String‬تجنب‬
‫‪ .‬سوف تتعلم المزيد عن الكائنات باذن اهلل تعالى في هذا الكتاب او فى الجزء الثانى‬
‫أحداث جافاسكربت‬
‫‪ HTML.‬هي "أشياء" تحدث لعناصر ‪ HTML‬أحداث‬

‫‪.‬يمكن لـ جافاسكربت "التفاعل" مع هذه األحداث ‪ HTML،‬عند استخدام جافاسكربت في صفحات‬
‫‪ HTML‬أحداث‬
‫‪.‬يمكن أن يكون حدث اى شيًئا يفعله المتصفح‪ ،‬أو اى شيًئا يفعله المستخدم‬
‫‪ HTML:‬فيما يلي بعض األمثلة على أحداث‬
‫‪ HTML‬تم االنتهاء من تحميل صفحة ويب•‬
‫‪ HTML‬تم تغيير حقل إدخال•‬
‫‪ HTML‬تم النقر على زر•‬
‫‪.‬في كثير من األحيان‪ ،‬عندما تحدث األحداث‪ ،‬قد ترغب في القيام بشيء ما‬
‫‪.‬تتيح لك جافاسكربت تنفيذ التعليمات البرمجية عند اكتشاف األحداث‬
‫‪ HTML.‬بإضافة سمات معالج األحداث‪ ،‬مع كود جافاسكربت ‪ ،‬إلى عناصر ‪ HTML‬يسمح‬
‫‪:‬مع عالمات االقتباس المفردة‬
‫>’‪<element event='some javascript‬‬
‫‪:‬مع عالمات االقتباس المزدوجة‬
‫>"‪<element event="some javascript‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪<button onclick="document.getElementById('Habib').innerHTML = Date()">The time‬‬
‫>‪is?</button‬‬
‫عند الضغط على الزر سيعرض الوقت الحالى‬
‫‪ = "Habib".‬في ال✅ مثال ⇣⇣ أعاله‪ ،‬يقوم كود جافاسكربت بتغيير محتوى العنصر بالمعرف‬
‫‪ this.innerHTML):‬باستخدام( في ال✅ مثال ⇣⇣ التالي‪ ،‬يغير الكود محتوى العنصر الخاص به‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<button onclick="this.innerHTML = Date()">The time is?</button‬‬
‫شيوعا رؤية سمات الحدث التي تستدعي الوظائف‬

‫ً‬ ‫‪:‬غالبًا ما يتكون كود جافاسكربت من عدة أسطر‪ .‬من األكثر‬
‫مثال ✅‬ ‫⇣⇣‬
‫>‪<button onclick="displayDate()">The time is?</button‬‬
‫أالحداث الشائعة لــ ‪HTML‬‬

‫‪:‬الشائعة ‪ HTML‬فيما يلي قائمة ببعض أحداث‬
‫‪Event‬‬ ‫وصف‬
‫‪onchange‬‬ ‫‪ HTML‬تم تغيير عنصر‬
‫‪onclick‬‬ ‫‪ HTML‬يقوم المستخدم بالنقر فوق عنصر‬
‫‪onmouseover‬‬ ‫‪ HTML‬يقوم المستخدم بتحريك الماوس فوق عنصر‬
‫‪onmouseout‬‬ ‫‪ HTML‬يقوم المستخدم بتحريك الماوس بعي ًدا عن عنصر‬
‫‪onkeydown‬‬ ‫يقوم المستخدم بالضغط على مفتاح لوحة المفاتيح‬
‫‪onload‬‬ ‫لقد انتهى المتصفح من تحميل الصفحة‬
‫معالجات أحداث جافاسكربت‬

‫‪:‬يمكن استخدام معالجات األحداث للتعامل مع إدخاالت المستخدم وإجراءات المستخدم وإجراءات المتصفح والتحقق منها‬
‫األشياء التي يجب القيام بها في كل مرة يتم فيها تحميل الصفحة•‬
‫األشياء التي يجب القيام بها عند إغالق الصفحة•‬
‫اإلجراء الذي يجب تنفيذه عندما ينقر المستخدم على زر•‬
‫المحتوى الذي يجب التحقق منه عندما يقوم المستخدم بإدخال البيانات•‬
‫‪ ...‬و اكثر•‬
‫‪:‬يمكن استخدام العديد من الطرق المختلفة للسماح لـ جافاسكربت بالعمل مع األحداث‬
‫تنفيذ كود جافاسكربت مباشر ًة ‪ HTML‬يمكن لسمات حدث•‬

‫استدعاء وظائف جافاسكربت ‪ HTML‬يمكن لسمات حدث•‬
‫‪ HTML‬يمكنك تعيين وظائف معالج األحداث لعناصر•‬
‫يمكنك منع إرسال األحداث أو معالجتها•‬
‫‪ ...‬و اكثر•‬
‫‪ .‬سوف تتعلم الكثير عن األحداث ومعالجات األحداث في كتاب الكافى فى ‪HTML‬‬
‫التعامل مع النصوص‬
‫‪.‬نصوص جافاسكربت مخصصة لتخزين النص ومعالجته‬
‫‪.‬نص جافاسكربت عبارة عن صفر أو أكثر من األحرف المكتوبة داخل عالمات االقتباس‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let text = "Abu Bakr Al-Siddiq‬‬
‫‪:‬يمكنك استخدام عالمات االقتباس المفردة أو المزدوجة‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪let hAbiB41 = "Hamza "; // Double quotes‬‬
‫‪let hAbiB42 = 'Hamza '; // Single quotes‬‬
‫‪ :‬يمكنك استخدام عالمات االقتباس داخل النص ‪ ،‬طالما أنها ال تتطابق مع عالمات االقتباس المحيطة بالنص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let Text1 = "It's alright‬‬
‫;"'‪let Text2 = "He is called 'habib‬‬
‫;'"‪let Text3 = 'He is called "habib‬‬
‫كيف معرفة عدد حروف النصوص‬
‫‪ length:‬للعثور على طول نص ‪ ،‬استخدم الخاصية المضمنة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ‬‬
‫;‪let length = text.length‬‬
‫كيف استثناء بعض الحروف‬

‫نظرا ألنه يجب كتابة النصوص بين عالمتي اقتباس‪ ،‬فسوف تسيء جافاسكربت فهم هذه النص‬
‫‪ً :‬‬
‫;"‪let text = "We are the so-called "Vikings" from the north.‬‬
‫‪ "".‬سيتم قطع النص إلى نهاية العﻻمة‬

‫‪ .‬الحل لتجنب هذه المشكلة هو استخدام حرف االستثناء للشرطة المائلة العكسية‬
‫‪ :‬يقوم حرف االستثناء الخاص بالشرطة المائلة العكسية ( \) بتحويل األحرف الخاصة إلى أحرف نص‬
‫‪Code Result‬‬ ‫وصف‬

‫'\‬ ‫'‬ ‫اقتباس واحد‬
‫"\‬ ‫"‬ ‫اقتباس مزدوج‬
‫\\‬ ‫\‬ ‫شرطة مائلة عكسية‬
‫‪ :‬يُدرج التسلسل \" عالمة اقتباس مزدوجة في نص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let text = "We are the so-called \"Vikings\" from the north.‬‬
‫‪ :‬يقوم التسلسل \' بإدراج اقتباس واحد في نص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;'‪let text= 'It\'s alright.‬‬
‫‪ :‬يُدرج التسلسل \\ شرطة مائلة عكسية في نص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let text = "The character \\ is called backslash.‬‬
‫‪:‬ستة تسلسالت هروب أخرى صالحة في جافاسكربت‬
‫‪Code‬‬ ‫نتيجة‬
‫‪\b‬‬ ‫مسافة للخلف‬
‫‪\f‬‬ ‫نموذج اضافة‬
‫‪\n‬‬ ‫خط جديد‬
‫‪\r‬‬ ‫إرجاع‬
‫‪\t‬‬ ‫جدول أفقي‬
‫‪\v‬‬ ‫جدول عمودي‬
‫تم تصميم أحرف االستثناء الستة المذكورة أعاله في األصل للتحكم في اآلالت الكاتبة وأجهزة المبرقة وأجهزة الفاكس‪ .‬أنها ال‬
‫‪ HTML.‬معنى لها في‬
‫كيف تحديد طول السطر‬

‫للحصول على أفضل سهولة للقراءة‪ ،‬غالبًا ما يرغب المبرمجون في تجنب سطور التعليمات البرمجية التي يزيد طولها عن ‪80‬‬
‫‪.‬حرفًا‬
‫‪:‬إذا كانت عبارة جافاسكربت ال تتناسب مع سطر واحد‪ ،‬فإن أفضل مكان لفصلها هو بعد عامل التشغيل‬
‫مثال ✅‬ ‫⇣⇣‬
‫= ‪document.getElementById("Habib").innerHTML‬‬
‫أيضا تقسيم سطر التعليمات البرمجية داخل نصوص ة باستخدام شرطة مائلة عكسية واحدة‬
‫مثال ✅‬ ‫⇣⇣‬
‫\ ‪document.getElementById("Habib").innerHTML = "Easy-to‬‬
‫;"!‪HABIB‬‬
‫‪.‬الطريقة \ليست الطريقة المفضلة‪ .‬ربما ال تحظى بدعم عام‬

‫‪.‬بعض المتصفحات ال تسمح بمسافات خلف \الحرف‬
‫‪ :‬الطريقة األكثر أمانًا لتقسيم النص هي استخدام إضافة النص‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪document.getElementById("Habib").innerHTML = "Easy-to " +‬‬
‫;"!‪"HABIB‬‬
‫‪:‬ال يمكنك تقسيم سطر التعليمات البرمجية بشرطة مائلة عكسية‬
‫مثال ✅‬ ‫⇣⇣‬
‫\ = ‪document.getElementById("Habib").innerHTML‬‬
‫طريقة استخدام النصوص ككائنات‬

‫‪:‬عاد ًة ما تكون نصوص جافاسكربت عبارة عن قيم بدائية‪ ،‬يتم إنشاؤها من القيم الحرفية‬
‫;"‪let x = "Habib‬‬
‫أيضا تعريف النصوص ككائنات باستخدام الكلمة المحجوزة‬

‫‪ new:‬ولكن يمكن ً‬
‫;)"‪let y = new String("Habib‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪.‬ال تقم بإنشاء كائنات نصوص‬
‫‪.‬المحجوزة على تعقيد التعليمات البرمجية وإبطاء سرعة التنفيذ‪ new‬تعمل الكلمة‬
‫‪:‬يمكن أن تنتج كائنات النص نتائج غير متوقعة‬
‫‪ :‬متساويان ‪y‬و ‪، x‬عند استخدام ==المعامل‬
‫‪ :‬غير متساويين ‪y‬و ‪، x‬عند استخدام ===المعامل‬
‫‪ (x===y).‬و)‪ (x==y‬الحظ الفرق بين‬
‫صحيحة أو خاطئة؟)‪(x == y‬‬
‫;)"‪let x = new String("Habib‬‬

‫صحيحة أو خاطئة؟)‪(x === y‬‬
‫;)"‪let x = new String("Habib‬‬

‫دائما ما تؤدي المقارنة بين كائنين في جافاسكربت إلى إرجاع‬

‫ً‬ ‫‪false .‬‬
‫دوال النصوص‬
‫ملحوظة‬
‫اذا اردة الحصول على شرح كامل لدوال جافاسكربت اقرا كتاب المرجع الكامل فى الجافاسكربت‬
‫‪.‬يحتوي المرجع على أوصاف وأمثلة لجميع الخصائص والدوال وأالساليب‬
‫شرح بعض دوال النصوص فى هذا الكتاب‬
‫‪String length‬‬
‫)(‪String trim‬‬
‫)(‪String slice‬‬
‫)(‪String trimStart‬‬
‫)(‪String substring‬‬
‫)(‪String trimEnd‬‬
‫)(‪String substr‬‬
‫)(‪String padStart‬‬
‫)(‪String replace‬‬
‫)(‪String padEnd‬‬
‫)(‪String replaceAll‬‬
‫)(‪String charAt‬‬
‫)(‪String toUpperCase‬‬
‫)(‪String charCodeAt‬‬
‫)(‪String toLowerCase‬‬
‫)(‪String split‬‬
‫)(‪String concat‬‬
‫‪.‬يتم تناول طرق البحث عن النص في الفصل التالي‬
‫الدالة ‪length‬‬
‫‪ :‬بإرجاع طول النص‪ length‬تقوم الخاصية‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ‬‬
‫;‪let length = text.length‬‬
‫كيف استخراج أجزاء من النص‬

‫‪ :‬هناك ثالث طرق الستخراج جزء من النص‬
‫)‪•slice(start, end‬‬
‫)‪•substring(start, end‬‬
‫)‪•substr(start, length‬‬
‫طرق التقطيع الدالة االولى‬

‫جزءا من النص ويعيد الجزء المستخرج في نص جديدة)(‪slice‬‬
‫‪.‬يستخرج ً‬
‫‪.‬تأخذ الطريقة معلمتين‪ :‬موضع البداية‪ ،‬وموضع النهاية (النهاية غير متضمنة)‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪:‬قم بقطع جزء من النص من الموضع ‪ 7‬إلى الموضع ‪13‬‬
‫;"‪let text = "Abu Habib, Al-Husini, Hamza‬‬

‫;)‪let part = text.slice(7, 13‬‬
‫ملحوظة‬
‫‪.‬جافاسكربت تحسب المواضع من الصفر‬
‫‪.‬المركز األول هو ‪0‬‬
‫‪.‬المركز الثاني هو ‪1‬‬
‫أمثلة‬
‫‪ :‬إذا قمت بحذف المعلمة الثانية‪ ،‬فسوف تقوم الطريقة بتقسيم بقية النص‬

‫;)‪let part = text.slice(7‬‬
‫‪ :‬إذا كانت المعلمة سالبة‪ ،‬فسيتم حساب الموضع من نهاية النص‬

‫;)‪let part = text.slice(-12‬‬
‫جزءا من النص من الموضع ‪ 12-‬إلى الموضع ‪6-‬‬

‫‪:‬يقطع هذا ال✅ مثال ⇣⇣ ً‬

‫;)‪let part = text.slice(-12, -6‬‬
‫تابع طرق تقطيغ النصوص‬
‫‪ slice().‬مشابه ل)(‪substring‬‬
‫‪ substring().‬الفرق هو أن قيم البداية والنهاية األقل من ‪ 0‬يتم التعامل معها على أنها ‪ 0‬في‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let str = "Abu Habib, Al-Husini, Hamza‬‬
‫;)‪let part = str.substring(7, 13‬‬
‫‪ .‬سيتم قطع بقية النص)(‪، substring‬إذا قمت بحذف المعلمة الثانية‬
‫دالة ‪Substr‬‬
‫‪ slice().‬مشابه ل)(‪substr‬‬
‫‪.‬الفرق هو أن المعلمة الثانية تحدد طول الجزء المستخرج‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)‪let part = str.substr(7, 6‬‬
‫‪ .‬سيتم قطع بقية النص)(‪، substr‬إذا قمت بحذف المعلمة الثانية‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)‪let part = str.substr(7‬‬
‫‪ .‬إذا كانت المعلمة األولى سلبية‪ ،‬يتم حساب الموضع من نهاية النص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)‪let part = str.substr(-4‬‬
‫كيف البحث واالستبدال فى النصوص‬

‫‪ :‬قيمة محددة بقيمة أخرى في نص)(‪ replace‬تستبدل الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"!‪let text = "Please visit Hamza‬‬
‫;)" ‪let newText = text.replace("Hamza", "Abu Habib alhosiny‬‬
‫ملحوظة‪1‬‬
‫‪ .‬ال تغير طريقة النص التي يتم استدعاؤها عليها)(‪replace‬‬
‫‪.‬بإرجاع نص جديدة)(‪ replace‬تقوم الطريقة‬
‫تستبدل الطريقة المطابقة األولى فقط)(‪replace‬‬
‫تعبيرا عاديًا مع مجموعة العالمات‬

‫ً‬ ‫‪.‬انظر األمثلة أدناه ‪ /g.‬إذا كنت تريد استبدال كافة التطابقات‪ ،‬فاستخدم‬
‫‪ :‬تستبدل الطريقة المطابقة األولى فقط)(‪، replace‬افتراضيًا‬
‫مثال ✅‬ ‫⇣⇣‬
‫;" !‪let text = "Please visit Hamza and Omar‬‬
‫سيتم استبدال حمزا االولى فقط‬
‫‪):‬باألحرف الكبيرة( ‪ Hamza‬األسلوب حساس لحالة األحرف‪ .‬لن تنجح كتابة)(‪، replace‬بشكل افتراضي‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"!‪let text = "Please visit hamza‬‬
‫تعبيرا عاديًا بعالمة‬

‫ً‬ ‫‪):‬غير حساسة(‪ /i‬الستبدال الحالة غير الحساسة لحالة األحرف‪ ،‬استخدم‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"!‪let text = "Please visit Hamza‬‬
‫;)" ‪let newText = text.replace(/Hamza/i, "Abu Habib alhosiny‬‬
‫‪.‬تتم كتابة التعبيرات العادية دون عالمات االقتباس‬
‫تعبيرا عاديًا بعالمة‬

‫ً‬ ‫‪):‬مطابقة عامة(‪ /g‬الستبدال جميع التطابقات‪ ،‬استخدم‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"!‪let text = "Please visit Hamza and Hamza‬‬
‫;)" ‪let newText = text.replace(/Hamza/g, "Abu Habib alhosiny‬‬
‫‪ .‬سوف تتعلم الكثير عن دوال النصوص والتحكم الكامل في ;كتاب المرجع الكامل لدوال جافاسكربت‬
‫دالة)(‪replaceAll‬‬
‫‪ replaceAll():‬في عام ‪ ،2021‬قدمت جافاسكربت طريقة لستبدال جميع التطابقات فى النص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)"‪text = text.replaceAll("Habib","Mahmoud‬‬
‫;)"‪text = text.replaceAll("Habib","Mahmoud‬‬
‫‪.‬تحديد تعبير عادي بدال ً من نص ليتم استبدالها)(‪ replaceAll‬تتيح لك الطريقة‬

‫تعبيرا عاديًا‪ ،‬فيجب تعيين العالمة العامة‬
‫ً‬ ‫‪ .‬وإال فسيتم طرح خطأ ‪ (g)،‬إذا كانت المعلمة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)"‪text = text.replaceAll(/Habib/g,"Mahmoud‬‬
‫;)"‪text = text.replaceAll(/Habib/g,"Mahmoud‬‬
‫‪.‬ال يعمل في إنترنت إكسبلورر)(‪replaceAll‬‬
‫التحويل إلى األحرف الكبيرة والصغيرة‬

‫‪ toUpperCase():‬يتم تحويل النص إلى أحرف كبيرة باستخدام‬
‫‪ toLowerCase():‬يتم تحويل النص إلى أحرف صغيرة باستخدام‬
‫دالة)( ‪toUpperCase‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"!*_* ‪let text1 = "Abu Habib Al Husini‬‬
‫*_* ‪let text2 = text1.toUpperCase(); // ABU HABIB AL HUSINI‬‬
‫دالة)(‪toLowerCase‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"!*_* ‪let text1 = "ABU HABIB AL HUSINI‬‬ ‫‪// String‬‬
‫‪let text2 = text1.toLowerCase(); // text2 is text1 converted to lower‬‬
‫الدالة ‪concat‬‬
‫‪:‬دمج النصوص والمتعيرات والبيات نصين أو أكثر)(‪concat‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let text1 = "Easy-to‬‬
‫;"‪let text2 = "Arabic‬‬
‫;)‪let text3 = text1.concat(" ", text2," ", " ", text1‬‬
‫‪:‬هذان الخطان يفعالن نفس الشيء ‪ plus .‬يمكن استخدام الطريقة بدال ً من عامل التشغيل)(‪concat‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"!‪text = "Easy-to" + " " + "Arabic‬‬
‫;)"!‪text = "Easy-to".concat(" ", "Arabic‬‬
‫ملحوظة‬
‫‪.‬تقوم كافة أساليب النص بإرجاع نص جديدة‪ .‬ال يقومون بتعديل النص األصلية‬
‫‪:‬قال رسميًا‬
‫‪.‬النصوص غير قابلة للتغيير‪ :‬ال يمكن تغيير النصوص‪ ،‬بل استبدالها فقط‬
‫دالة )(‪Trim‬‬
‫‪ :‬بإزالة المسافة الفارغة من كال جانبي النص )(‪ trim‬تقوم الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫!*_* ‪let text1 = " Abu Habib Al Husini‬‬ ‫;"‬
‫;)(‪let text2 = text1.trim‬‬
‫المسافة الفارغة‬
‫الدالة)( ‪TrimStart‬‬
‫‪ .‬ولكنها تزيل المسافات البيضاء فقط من بداية النص)(‪ ، trim‬تعمل الطريقة مثل)(‪trimStart‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)(‪let text2 = text1.trimStart‬‬
‫‪:‬مدعومة في جميع المتصفحات منذ يناير ‪ trimStart()2020‬نص جافاسكربت‬
‫دالة)( ‪TrimEnd‬‬
‫‪ .‬ولكنها تزيل المسافات البيضاء فقط من نهاية النص)(‪ ، trim‬تعمل الطريقة مثل)(‪trimEnd‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)(‪let text2 = text1.trimEnd‬‬
‫‪:‬مدعومة في جميع المتصفحات منذ يناير ‪ trimEnd()2020‬نص جافاسكربت‬
‫دوال اخرى لالضافة‬

‫‪.‬الربط في بداية النص وفي نهايتها)(‪ padEnd‬ولدعم )(‪ : padStart‬طريقتين للنص ‪ ECMAScript 2017‬أضاف‬
‫دالة)( ‪PadStart‬‬
‫‪:‬على ربط نص بنص أخرى)(‪ padStart‬تعمل الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let text = "5‬‬
‫;)"‪let padded = text.padStart(4,"x‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let text = "5‬‬
‫;)"‪let padded = text.padStart(4,"0‬‬
‫ملحوظة‬
‫‪.‬إلضافة رقم‪ ،‬قم بتحويل الرقم إلى نص أوال ً‬
‫‪.‬انظر ال✅ مثال ⇣⇣ أدناه‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let numb = 5‬‬
‫;)(‪let text = numb.toString‬‬
‫;)"‪let padded = text.padStart(4,"0‬‬
‫دعم المتصفحات‬
‫‪ ECMAScript 2017.‬هي إحدى ميزات)(‪padStart‬‬
‫‪:‬وهو مدعوم في جميع المتصفحات الحديثة‬
‫الدالة)( ‪PadEnd‬‬
‫‪:‬على ربط نص بنص أخرى)(‪ padEnd‬تعمل الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let text = "5‬‬
‫;)"‪let padded = text.padEnd(4,"x‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let text = "5‬‬
‫;)"‪let padded = text.padEnd(4,"0‬‬
‫ملحوظة‬
‫‪.‬مثل الدالة السابقة تمام إلضافة رقم‪ ،‬قم بتحويل الرقم إلى نص أوال ً‬
‫‪.‬انظر ال✅ مثال ⇣⇣ أدناه‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let numb = 5‬‬
‫;)(‪let text = numb.toString‬‬
‫;)"‪let padded = text.padEnd(4,"0‬‬
‫تمت االضافة فى‪padEnd() ECMAScript 2017.‬‬
‫‪ Internet Explorer.‬غير مدعوم في)(‪padEnd‬‬
‫كيف استخراج أحرف معينة من النص‬

‫‪ :‬هناك ثالث طرق الستخراج أحرف النص‬
‫)‪•charAt(position‬‬
‫)‪•charCodeAt(position‬‬
‫] [ الوصول إلى الخصائص•‬
‫الدالة)( ‪charAt‬‬
‫‪ :‬بإرجاع الحرف في فهرس (موضع) محدد في نص)(‪ charAt‬تقوم الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"*_* ‪let text = "Abu Habib Al Husini‬‬
‫;)‪let char = text.charAt(0‬‬
‫الدالة)(‪charCodeAt‬‬
‫‪ :‬بإرجاع الكود الموحد للحرف في فهرس محدد في نص)(‪ charCodeAt‬تقوم الطريقة‬
‫‪).‬عدد صحيح بين ‪ 0‬و‪ UTF-16 (65535‬تقوم الطريقة بإرجاع رمز‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)‪let char = text.charCodeAt(0‬‬
‫جلب الحرف بالفهرس‬

‫‪:‬بالوصول إلى الخاصية [ ] على النصوص )‪ ECMAScript 5 (2009‬يسمح‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪let char = text[0‬‬
‫ملحوظة‬
‫‪:‬قد يكون الوصول إلى الخصائص غير متوقع إلى حد ما‬
‫يجعل النصوص تبدو مثل المصفوفات (لكنها ليست كذلك) •‬
‫‪.‬نص فارغة )(‪ charAt‬إذا لم يتم العثور على أي حرف‪ ،‬فإن [ ] يُرجع غير محدد‪ ،‬بينما يُرجع •‬
‫ال يعطي أي خطأ (لكنه ال يعمل!) "‪. str[0] = "A‬يتم قراءته فقط •‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪text[0] = "A"; // Gives no error, but Al Husini 😀😁😂s not work‬‬
‫تحويل نص إلى مصفوفة‬

‫‪.‬إذا كنت تريد العمل مع نص كمصفوفة‪ ،‬فيمكنك تحويلها إلى مصفوفة بسهولة وبطرق عديدة‬
‫الطريقة العادية للتحويل‬

‫‪:‬الطريقة)(‪ split‬يمكن تحويل النص إلى مصفوفة باستخدام‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪text.split(",") // Split on commas‬‬
‫‪text.split(" ") // Split on spaces‬‬
‫‪text.split("|") // Split on pipe‬‬
‫‪ .‬إذا تم حذف الفاصل‪ ،‬فإن المصفوفة التي تم إرجاعها ستحتوي على النص بأكملها في الفهرس [‪]0‬‬
‫‪:‬إذا كان الفاصل هو "" ‪ ،‬فستكون المصفوفة التي تم إرجاعها عبارة عن مصفوفة من األحرف المفردة‬
‫مثال ✅‬ ‫⇣⇣‬
‫)""(‪text.split‬‬
‫كتاب المرجع الكامل فى الجافاسكربت‬
‫للتعمق فى جميع دوال المصفوفة والنصوص والتحكم الكامل لكل الدوال بال استثناء‬
‫‪.‬يحتوي المرجع على أوصاف وأمثلة لجميع خصائص النص وأساليبها‬
‫كيف جلب الفهرس للحرف‬

‫‪ :‬فهرس (موضع) التواجد األول لنص في نص)(‪ indexOf‬تُرجع الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"*_* ‪let str = "Abu Habib Al Husini‬‬
‫;)"‪str.indexOf("Habib‬‬
‫ملحوظة‬
‫‪.‬نعيد للتذكير جافاسكربت تحسب المواضع من الصفر‬
‫… ‪،‬هو الموضع األول في النص ‪ 1 ،‬هو الثاني‪ 2 ،‬هو الثالث ‪0‬‬
‫الدالة )( ‪lastIndexOf‬‬
‫‪ :‬بإرجاع فهرس آخر تواجد لنص محدد في نص)(‪ lastIndexOf‬تقوم الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"*_* ‪let text = "Abu Habib Al Husini Habib‬‬
‫;)"‪text.lastIndexOf("Habib‬‬
‫سيتم جلب حبيب اﻻخيرة فقط‬
‫‪:‬وإرجاع ‪ 1-‬إذا لم يتم العثور على النص)(‪ indexOf()، lastIndexOf‬كالهما‬
‫مثال ✅‬ ‫⇣⇣‬
‫;" ‪let text = "Abu Habib Al Husini *_* Habib Habib‬‬
‫;)"‪text.lastIndexOf("Habib‬‬
‫‪:‬تقبل كلتا الطريقتين معلمة ثانية كنقطة بداية للبحث‬
‫مثال ✅‬ ‫⇣⇣‬
‫;" ‪let text = "Abu Habib Al Husini *_* Habib‬‬
‫;)‪text.indexOf("Habib", 15‬‬
‫بشكل عكسي (من النهاية إلى البداية)‪ ،‬أي‪ :‬إذا كان المعامل الثاني هو ‪ ،15‬يبدأ البحث من)(‪ lastIndexOf‬تبحث الطرق‬
‫‪ .‬الموضع ‪ ،15‬ويبحث حتى بداية النص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)‪text.lastIndexOf("Habib", 15‬‬
‫استخدام دالة البحث‬
‫‪:‬عن نص (أو تعبير عادي) وترجع موضع المطابقة)(‪ search‬تبحث الطريقة‬
‫أمثلة‬
‫;)"‪str.search("Habib‬‬

‫;)‪str.search(/Habib/‬‬
‫ملحوظة‬
‫هل الدالتين متساويتين؟ ‪ search()،‬و)(‪، indexOf‬‬
‫الطريقتين ليستا متساويتين ‪.‬كما تظن ‪ :‬لن اخبرك باالختالف جربة بنفسك وستعرفة من النتيجة‬
‫كيف البحث اﻻحترافى فى النصوص‬

‫‪.‬بإرجاع مصفوفة تحتوي على نتائج مطابقة نص مع نص (أو تعبير عادي))(‪ match‬تقوم الطريقة‬
‫أمثلة‬
‫‪":‬إجراء بحث عن "عين‬
‫;"*_* *_* *_* ‪let text = "Abu Habib Al Husini‬‬

‫;)"‪text.match("Habib‬‬
‫‪":‬إجراء بحث عن "حبيب‬
‫;"*_* *_* *_* ‪let text = "Abu Habib Al Husini‬‬

‫;)‪text.match(/Habib/‬‬
‫‪":‬إجراء بحث عام عن "حبيب لكل التطابقات‬
‫;"*_*‪let text = "Abu Habib Al Husini *_* Habib*_* Habib‬‬

‫;)‪text.match(/Habib/g‬‬
‫‪ "Habib":‬قم بإجراء بحث عام غير حساس لحالة األحرف عن‬
‫;"*_* ‪let text = "Abu Habib Al Husini *_* haBib *_* HABIB‬‬
‫;)‪text.match(/hAbIB/gi‬‬
‫ملحوظة‬
‫المع ِّدل‬
‫‪ .‬فسيُرجع فقط المطابقة األولى في النص)(‪)، match‬البحث العام( ‪ g‬إذا كان التعبير العادي ال يتضمن ُ‬
‫الدالة)( ‪matchAll‬‬
‫‪.‬بإرجاع مكرر يحتوي على نتائج مطابقة نص مع نص (أو تعبير عادي))(‪ matchAll‬تقوم الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)"‪const iterator = text.matchAll("Habib‬‬
‫تعبيرا عاديًا‪ ،‬فيجب تعيين العالمة العامة‬

‫ً‬ ‫‪ .‬وإال فسيتم طرح خطأ ‪ (g)،‬إذا كانت المعلمة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)‪const iterator = text.matchAll(/Habib/g‬‬
‫‪ (i):‬إذا كنت تريد البحث غير حساس لحالة األحرف‪ ،‬فيجب تعيين العالمة غير الحساسة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)‪const iterator = text.matchAll(/Habib/gi‬‬
‫ملحوظات‬
‫‪.‬ال يعمل في إنترنت إكسبلورر)(‪matchAll‬‬
‫كيف معرفة نص البحث موجود ام ﻻ‬

‫صحيحا إذا كان النص موجود على قيم المحددة)(‪ includes‬ترجع الطريقة‬
‫ً‬ ‫‪.‬ترجع‬
‫‪ false.‬وإال فإنه يعود‬
‫أمثلة‬
‫‪":‬تحقق مما إذا كانت النص تتضمن "العالم‬
‫;"‪let text = "Abu Habib Al Husini *_*, welcome to the Arabic.‬‬

‫;)"‪text.includes("Arabic‬‬
‫‪:‬تحقق مما إذا كانت النص يتضمن "الكلمة المراد البحث عنها و ‪ .‬ابدأ من الموضع ‪12‬‬

‫;)‪text.includes("Arabic", 12‬‬
‫‪.‬حاله اﻻحرف حساسه)(‪includes‬‬
‫‪ Internet Explorer.‬غير مدعوم في)(‪includes‬‬
‫طرق اخرى للتشييك على النصوص‬

‫كانت موجود ترجع ‪ true‬الطريقة إذا )(‪startsWith‬‬
‫أمثلة‬
‫‪:‬يعود صحيحا‬
‫;"‪let text = "Abu Habib Al Husini *_*, welcome to the universe.‬‬

‫;)"‪text.startsWith("Husini‬‬
‫‪:‬إرجاع كاذبة‬

‫)"‪text.startsWith("Arabic‬‬
‫‪:‬يمكن تحديد موضع البدء للبحث‬
‫‪:‬إرجاع كاذبة‬

‫)‪text.startsWith("Arabic", 5‬‬
‫‪:‬يعود صحيحا‬

‫)‪text.startsWith("Arabic", 6‬‬
‫‪.‬مثل الدالة السابقة حاله اﻻحرف حساسه)(‪startsWith‬‬
‫‪ Internet Explorer.‬غير مدعوم في)(‪startsWith‬‬
‫كيف البحث فى نهاية النصوص‬

‫‪.‬انتهت النصوص بقيمة محددة ‪ true‬تُرجع الطريقة إذا)(‪endsWith‬‬
‫‪ false:‬وإال فإنه يعود‬
‫أمثلة‬
‫‪ "Al Husini 😀😁😂":‬تحقق مما إذا كانت النصوص تنتهي بـ‬
‫;"‪let text = "Abu Bakr Al-Siddiq‬‬

‫;)"😂😁😀 ‪text.endsWith("Al Husini‬‬
‫‪ "Arabic":‬تحقق مما إذا كانت األحرف الـ ‪ 11‬األولى من النص تنتهي بـ‬

‫;)‪text.endsWith("Arabic", 11‬‬
‫‪.‬مثل الدالة السابقة حاله حساسه)(‪endsWith‬‬
‫االقتباس الحر‬
‫تستخدم القيم الحرفية للنموذج عالمات التجزئة الخلفية (``) بدال ً من عالمات االقتباس ("") لتحديد نص حر غير مقيد بقوانين‬
‫‪ :‬جافاسكربت‬
‫مثال ✅‬ ‫⇣⇣‬
‫;`!*_* ‪let text = `Abu Habib Al Husini‬‬
‫اقتباسات داخل االقتباس الحر‬
‫باستخدام االقتباس الحر ‪ ،‬يمكنك استخدام عالمات االقتباس المفردة والمزدوجة داخل نص ونقل النصوص والرموز وكل شى‬
‫‪ :‬بحرية بدون تطبيق قوانين جافاسكربت عل النصوص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;`"‪let text = `He's often called "habib‬‬
‫تابع اﻻقتباس الحر‬

‫‪:‬تسمح القيم الحرفية لالقتباس الحر بنصوص متعددة األسطر‬
‫مثال ✅‬ ‫⇣⇣‬
‫= ‪let text‬‬
‫‪`The quick‬‬
‫‪brown fox‬‬
‫‪jumps over‬‬
‫;`‪the lazy dog‬‬
‫ملحوظة‬
‫تستطيع دمج التغيرات داخل اﻻقتباس الحر و توفر القيم الحرفية لالقتباس الحر طريقة سهلة الستكمال المتغيرات والتعبيرات‬
‫‪.‬في نصوص‬
‫‪ .‬تسمى هذه الطريقة استيفاء النص‬
‫‪:‬بناء الجملة هو‬
‫}‪${...‬‬
‫مثال اخر لستخدام االقتباس الحر‬
‫‪:‬كما ذكرنا تسمح القيم الحرفية لالقتباس الحر بالمتغيرات في النصوص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let firstName = "Habib‬‬
‫;"😂😁😀 ‪let lastName = "Al Husini‬‬
‫;`!}‪let text = `Welcome ${firstName}, ${lastName‬‬
‫‪ .‬يسمى االستبدال التلقائي للمتغيرات بالقيم الحقيقية باستيفاء النص‬
‫طريقة دمج اكواد داخل النصوص‬

‫‪:‬تسمح القيم الحرفية لالقتباس الحر بالتعبيرات واالكواد في النصوص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let hAbiB3= 10‬‬
‫;‪let VAT = 0.25‬‬
‫;`})‪let total = `Total: ${(hAbiB3* (1 + VAT)).toFixed(2‬‬
‫‪ .‬يسمى االستبدال التلقائي للتعبيرات بالقيم الحقيقية استيفاء النص‬
‫قوالب ‪HTML‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let header = "Templates Literals‬‬
‫;]"‪let tags = ["template literals", "habib‬‬
‫;`>‪let html = `<h2>${header}</h2><ul‬‬

‫{ )‪for (const x of tags‬‬
‫;`>‪html += `<li>${x}</li‬‬
‫}‬
‫;`>‪html += `</ul‬‬
‫‪ Internet Explorer.‬غير مدعوم في‪Template Literals‬‬
‫كتاب المرجع الكامل فى جاسكربت‬

‫‪:‬للحصول على مرجع الدوال كامل‪ ،‬انتقل إلى‬
‫‪ .‬يحتوي المرجع على أوصاف وأمثلة لجميع خصائص النص وأساليبها‬
‫طرق التعامل مع اﻻرقام‬
‫نعيد للتذكير تحتوي جافاسكربت على نوع واحد فقط من األرقام‪ .‬يمكن كتابة األرقام مع أو بدون الكسور العشرية االنواع‬
‫‪ .‬االخرى لن تحتاج اليها فهى لمحترفى الجبر والرياضيات‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪let x = 3.14; // A number with decimals‬‬
‫;‪let y = 3‬‬ ‫‪// A number without decimals‬‬
‫‪:‬يمكن كتابة األعداد الكبيرة ج ًدا أو الصغيرة ج ًدا باستخدام التدوين العلمي (األس)‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪let x = 123e5; // 12300000‬‬
‫‪let y = 123e-5; // 0.00123‬‬
‫دائما عبارة عن نقطة عائمة او عشرية بحجم ‪ 64‬بت‬

‫ً‬ ‫تكون أرقام جافاسكربت‬
‫أنواعا مختلفة من األرقام‪ ،‬مثل األعداد الصحيحة والقصيرة‬

‫ً‬ ‫على عكس العديد من لغات البرمجة األخرى‪ ،‬ال تحدد جافاسكربت‬
‫‪.‬والطويلة والفاصلة العشرية وما إلى ذلك‬
‫دائما تخزين أرقام جافاسكربت كأرقام فاصلة عائمة مزدوجة المكون‪ ،‬وفقًا لمعيار‬
‫ً‬ ‫‪.‬الدولي ‪ IEEE 754‬يتم‬
‫يقوم هذا التنسيق بتخزين األرقام في ‪ 64‬بت‪ ،‬حيث يتم تخزين الرقم (الكسر) في البتات من ‪ 0‬إلى ‪ ،51‬واألس في البتات من‬
‫‪ 52:‬إلى ‪ ،62‬وتسجيل الدخول بت ‪63‬‬
‫االعداد الصحيحة‬
‫‪.‬األعداد الصحيحة (األرقام التي ال تحتوي على نقطة أو تدوين أسي) تصل دقتها إلى ‪ً 15‬‬
‫رقما‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪let x = 999999999999999; // x will be 999999999999999‬‬
‫‪let y = 9999999999999999; // y will be 10000000000000000‬‬
‫ملحوظة‬
‫‪.‬الحد األقصى لعدد الكسور العشرية هو ‪17‬‬
‫االعداد العشرية‬
‫دائما دقيقًا بنسبة ‪100‬‬
‫ً‬ ‫‪٪:‬حساب النقطة العشرية ليس‬
‫;‪let x = 0.2 + 0.1‬‬
‫‪:‬لحل المشكلة أعاله يساعد على الضرب والقسمة‬
‫;‪let x = (0.2 * 10 + 0.1 * 10) / 10‬‬
‫إضافة األرقام والنصوص معا‬

‫!! تحذير‬
‫‪.‬تستخدم جافاسكربت عامل التشغيل ‪ +‬لكل من اإلضافة والتسلسل‬
‫‪ .‬تتم إضافة األرقام‪ .‬النصوص متنص‬
‫‪:‬إذا قمت بإضافة رقمين‪ ،‬ستكون النتيجة رقما‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 10‬‬
‫;‪let y = 20‬‬
‫;‪let z = x + y‬‬
‫‪ :‬إذا قمت بإضافة سلسلتين‪ ،‬ستكون النتيجة نص نص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let x = "10‬‬
‫;"‪let y = "20‬‬
‫;‪let z = x + y‬‬
‫‪ :‬إذا قمت بإضافة رقم ونص ‪ ،‬ستكون النتيجة نص نص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 10‬‬
‫;"‪let y = "20‬‬
‫;‪let z = x + y‬‬
‫‪ :‬إذا قمت بإضافة نص ورقم‪ ،‬ستكون النتيجة نص نص‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let x = "10‬‬
‫;‪let y = 20‬‬
‫;‪let z = x + y‬‬
‫‪:‬من األخطاء الشائعة توقع أن تكون هذه النتيجة ‪30‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 10‬‬
‫;‪let y = 20‬‬
‫;‪let z = "The result is: " + x + y‬‬
‫‪:‬من األخطاء الشائعة توقع أن تكون هذه النتيجة ‪102030‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 10‬‬
‫;‪let y = 20‬‬
‫;"‪let z = "30‬‬
‫;‪let result = x + y + z‬‬
‫‪.‬يعمل مترجم جافاسكربت من اليسار إلى اليمين‬
‫‪.‬كالهما رقمان ‪y‬و ‪ x‬تمت إضافة أول ‪ 20 + 10‬ألن‬
‫‪ .‬عبارة عن نص ‪ z‬ثم يتم ربط ‪ "30" + 30‬ألن‬
‫النصوص الرقمية‬
‫‪:‬يمكن أن تحتوي نصوص جافاسكربت على محتوى رقمي‬
‫;‪let x = 100‬‬ ‫‪// x is a number‬‬
‫;"‪let y = "100‬‬ ‫‪// y is a string‬‬
‫‪:‬ستحاول جافاسكربت تحويل النصوص إلى أرقام في جميع العمليات الرقمية‬

‫‪:‬هذا سيفي بالغرض‬
‫;"‪let x = "100‬‬
‫;"‪let y = "10‬‬
‫;‪let z = x / y‬‬
‫أيضا‬
‫‪:‬سيعمل هذا ً‬
‫;"‪let x = "100‬‬
‫;"‪let y = "10‬‬
‫;‪let z = x * y‬‬
‫‪:‬وهذا سوف يعمل‬
‫;"‪let x = "100‬‬
‫;"‪let y = "10‬‬
‫;‪let z = x - y‬‬
‫‪:‬لكن هذا لن ينجح‬
‫;"‪let x = "100‬‬
‫;"‪let y = "10‬‬
‫;‪let z = x + y‬‬
‫‪.‬في ال✅ مثال ⇣⇣ األخير‪ ،‬يستخدم جافاسكربت عامل التشغيل ‪ +‬لتسلسل النصوص‬
‫الكلمة ‪NaN‬‬
‫‪.‬هي كلمة محجوزة في جافاسكربت تشير إلى أن الرقم ليس ً‬
‫رقما قانونيًا‪NaN‬‬
‫رقما(‪ NaN‬ستؤدي محاولة إجراء العمليات الحسابية باستخدام نص غير رقمية إلى‬
‫‪):‬ليس ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let x = 100 / "Abu Habib‬‬
‫رقما‬
‫‪:‬ومع ذلك‪ ،‬إذا كانت النص تحتوي على قيمة رقمية‪ ،‬فستكون النتيجة ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪let x = 100 / "10‬‬
‫رقما أم ال )(‪ isNaN‬يمكنك استخدام وظيفة جافاسكربت العامة‬

‫‪:‬لمعرفة ما إذا كانت القيمة ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)‪isNaN(x‬‬
‫أيضا‪ NaN‬إذا استخدمت ‪ NaN.‬احترس من‬

‫‪ NaN:‬في عملية رياضية‪ ،‬ستكون النتيجة ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = NaN‬‬
‫;‪let y = 5‬‬
‫;‪let z = x + y‬‬
‫‪ NaN5:‬أو قد تكون النتيجة نص مثل‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = NaN‬‬
‫;"‪let y = "5‬‬
‫;‪let z = x + y‬‬
‫‪ number:‬يعود‪: typeof NaN‬هو رقم‪NaN‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪typeof NaN‬‬
‫القيمة اال نهاية‬

‫‪.‬هي القيمة التي سيرجعها جافاسكربت إذا قمت بحساب رقم خارج أكبر رقم ممكن )‪ -Infinity‬أو(‪Infinity‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let myNumber = 2‬‬
‫‪// Execute until Infinity‬‬
‫{ )‪while (myNumber != Infinity‬‬
‫;‪myNumber = myNumber * myNumber‬‬
‫}‬
‫‪ Infinity:‬القسمة على ‪( 0‬صفر) تولد ً‬

‫أيضا‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 2 / 0‬‬
‫;‪let y = -2 / 0‬‬
‫‪ number.‬يعود‪ : typeof Infinity‬هو رقم‪Infinity‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪typeof Infinity‬‬
‫السداسي عشري‬
‫‪x.‬تفسر جافاسكربت الثوابت الرقمية على أنها أرقام ست عشرية إذا كانت مسبوقة بـ ‪0‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 0xFF‬‬
‫رقما بصفر بادئ (مثل ‪)07‬‬

‫‪.‬ال تكتب أب ًدا ً‬
‫‪.‬تفسر بعض إصدارات جافاسكربت األرقام على أنها ثماني إذا كانت مكتوبة بصفر بادئ‬
‫‪ .‬افتراضيًا‪ ،‬تعرض جافاسكربت األرقام على هيئة أرقام عشرية ذات أساس ‪10‬‬
‫‪ .‬الطريقة إلخراج األرقام من األساس ‪ 2‬إلى األساس ‪ toString()36‬ولكن يمكنك استخدام‬
‫‪ .‬النظام الست عشري هو األساس ‪ . 16‬العدد العشري هو األساس ‪ . 10‬الثماني هو قاعدة ‪ . 8‬ثنائي هو قاعدة ‪2‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let myNumber = 32‬‬
‫;)‪myNumber.toString(32‬‬
‫أالرقام ككائنات‬
‫‪:‬عاد ًة ما تكون أرقام جافاسكربت عبارة عن قيم بدائية تم إنشاؤها من القيم الحرفية‬
‫;‪let x = 123‬‬
‫أيضا تعريف األرقام ككائنات باستخدام الكلمة المحجوزة‬

‫‪ new:‬ولكن يمكن ً‬
‫;)‪let y = new Number(123‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 123‬‬
‫ال ينصح باستخدامها‬

‫‪.‬ال تقم بإنشاء كائنات رقمية‬
‫‪.‬المحجوزة على تعقيد التعليمات البرمجية وإبطاء سرعة التنفيذ‪ new‬تعمل الكلمة‬
‫‪:‬يمكن أن تؤدي الكائنات الرقمية إلى نتائج غير متوقعة‬
‫‪ :‬متساويان ‪y‬و ‪، x‬عند استخدام ==المعامل‬
‫;‪let x = 500‬‬
‫‪ .‬ليسا متساويين ‪ y‬و ‪، x‬عند استخدام ===المعامل‬
‫;‪let x = 500‬‬
‫‪ (x===y).‬و)‪ (x==y‬الحظ الفرق بين‬
‫صحيحة أو خاطئة؟)‪(x == y‬‬
‫;)‪let x = new Number(500‬‬

‫صحيحة أو خاطئة؟)‪(x === y‬‬
‫;)‪let x = new Number(500‬‬

‫دائما ما تؤدي المقارنة بين كائنين في جافاسكربت إلى إرجاع‬

‫ً‬ ‫‪false .‬‬
‫امثلة على ‪BigInt‬‬
‫تُستخدم متغيرات جافاسكربت لتخزين قيم أعداد صحيحة كبيرة ج ًدا بحيث ال يمكن تمثيلها بواسطة جافاسكربت ‪BigInt‬‬
‫‪ Number.‬عادي‬
‫مكون اﻻعداد الصحيحة‬

‫‪:‬تعد أعداد جافاسكربت الصحيحة دقيقة حتى ‪ً 15‬‬
‫رقما فقط‬
‫مكون عدد صحيح‬
‫;‪let x = 999999999999999‬‬
‫;‪let y = 9999999999999999‬‬
‫‪ IEEE 754).‬معيار( في جافاسكربت‪ ،‬يتم تخزين جميع األرقام بتنسيق الفاصلة العشرية ‪ 64‬بت‬
‫‪.‬باستخدام هذا المعيار‪ ،‬ال يمكن تمثيل األعداد الصحيحة الكبيرة بشكل دقيق وسيتم تقريبها‬
‫‪:‬ولهذا السبب‪ ،‬يمكن لـ جافاسكربت تمثيل األعداد الصحيحة بشكل آمن فقط‬
‫حتى ‪)1- 2 53(+ 9007199254740991‬‬

‫و‬
‫‪.‬نزوال ً إلى ‪)1- 2 53(- 9007199254740991-‬‬

‫‪.‬القيم الصحيحة خارج هذا النطاق تفقد المكون‬
‫كيفية إنشاء نوع البيانات ‪BigInt‬‬

‫‪ BigInt():‬بنهاية عدد صحيح أو قم باستدعاء ‪ n‬قم بإلحاق ‪ BigInt،‬إلنشاء ملف‬
‫أمثلة‬
‫;‪let x = 9999999999999999‬‬
‫;‪let y = 9999999999999999n‬‬
‫;‪let x = 1234567890123456789012345n‬‬
‫)‪let y = BigInt(1234567890123456789012345‬‬
‫تابع ‪BigInt:‬‬
‫‪":‬عدد كبير"‪ typeofa BigInt‬جافاسكربت‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)‪let x = BigInt(999999999999999‬‬
‫;‪let type = typeof x‬‬
‫‪ Number).‬بعد( هو نوع البيانات الرقمية الثاني في جافاسكربت‪BigInt‬‬
‫‪:‬إجمالي عدد أنواع البيانات المدعومة في جافاسكربت هو ‪ BigInt8‬مع‬

‫نص ‪1.‬‬
‫رقم ‪2.‬‬
‫كبير ‪3.‬‬
‫منطقي ‪4.‬‬
‫غير محدد ‪5.‬‬
‫فارغ ‪6.‬‬
‫رمز ‪7.‬‬
‫كائن ‪8.‬‬
‫مشغل ‪BigInt‬‬
‫أيضا استخدام العوامل التي يمكن استخدامها في جافاسكربت على ‪Number‬‬
‫‪ BigInt.‬يمكن ً‬
‫الضرب ✅‬ ‫‪ BigInt‬مثال ⇣⇣‬

‫;‪let x = 9007199254740995n‬‬
‫;‪let y = 9007199254740995n‬‬
‫;‪let z = x * y‬‬
‫‪.‬غير مسموح به (تحويل النوع يفقد المعلومات فى االرقام الكبيرة)‪ a Number‬و ‪ a BigInt‬الحساب بين‬
‫‪).‬ليس له عرض ثابت( ‪ BigInt‬ال يمكن إجراء التحول األيمن غير الموقع بهذة العالمة (>>>) على‬
‫الكسور العشرية الكبيرة‬
‫‪.‬يمكن أن تحتوي على أرقام عشرية‪ BigInt‬ال‬
‫القسمة ✅‬ ‫مثال ⇣⇣ على‬

‫;‪let x = 5n‬‬
‫;‪let y = x / 2‬‬
‫‪// Error: Cannot mix BigInt and other types, use explicit conversion.‬‬
‫;‪let x = 5n‬‬
‫;‪let y = Number(x) / 2‬‬
‫استخدم الهيكس‪ ،‬أوالكتال اوالثنائي فى ‪BigInt‬‬

‫أيض ا يمكن كتابته بالترميز السداسي العشري أو الثماني أو الثنائي اذا كنت ال تعرف شى لغة الباينارى فال تقراء هذا‬
‫ً‬
‫‪ :‬الفصل اطلع اوال على كتاب تعلم لغة الباينارى للكمبيوتر الجزء االول‬
‫مثال ✅‬ ‫‪⇣⇣ BigInt Hex‬‬

‫;‪let hex = 0x20000000000003n‬‬
‫‪let oct = 0o400000000000000003n‬‬
‫;‪let bin = 0b100000000000000000000000000000000000000000000000000011n‬‬
‫تقريب المكون‬
‫تقريب المكون لتقليل الرقم وهو ال ينصح بستخدامة‬
‫‪:‬يمكن أن يؤدي التقريب إلى تعريض أمان البرنامج للخطر‬
‫⇣⇣ مثال ✅ ‪MAX_SAFE_INTEGER‬‬
‫!!! ‪9007199254740992 === 9007199254740993; // is true‬‬
‫‪:‬مدعوم في جميع المتصفحات منذ سبتمبر ‪BigInt2020‬‬
‫الحد األدنى والحد األقصى لألعداد الصحيحة اآلمنة‬

‫‪:‬خصائص الحد األقصى والحد األدنى إلى كائن الرقم فى ‪ ES6‬أضاف‬
‫‪•MAX_SAFE_INTEGER‬‬
‫‪•MIN_SAFE_INTEGER‬‬
‫⇣⇣ مثال ✅ ‪MAX_SAFE_INTEGER‬‬

‫;‪let x = Number.MAX_SAFE_INTEGER‬‬
‫;‪let x = Number.MIN_SAFE_INTEGER‬‬
‫طرق او دوال األرقام‬

‫‪:‬أيضا طريقتين جديدتين إلى كائن الرقم ‪ ES6‬أضاف‬
‫ً‬
‫)(‪•Number.isInteger‬‬
‫)(‪•Number.isSafeInteger‬‬
‫طريقة )(‪Number.isInteger‬‬
‫صحيحا‪ true‬تُرجع الطريقة إذا)(‪Number.isInteger‬‬
‫ً‬ ‫عددا‬
‫ً‬ ‫‪.‬كانت الوسيطة‬
‫مثال ✅‬ ‫)(‪⇣⇣: isInteger‬‬
‫;)‪Number.isInteger(10‬‬
‫;)‪Number.isInteger(10.5‬‬
‫طريقة )(‪Number.isSafeInteger‬‬
‫‪.‬العدد الصحيح اآلمن هو عدد صحيح يمكن تمثيله بمكون كرقم مزدوج المكون‬
‫صحيحا آمنًا‪ true‬تُرجع الطريقة إذا)(‪Number.isSafeInteger‬‬
‫هو ✅‬ ‫)(‪SafeInteger‬مثال ⇣⇣‬

‫;)‪Number.isSafeInteger(10‬‬
‫‪.‬األعداد الصحيحة اآلمنة هي جميع األعداد الصحيحة من ‪ )1 - 2 53(-‬إلى ‪)1 - 2 53(+‬‬

‫‪.‬هذا آمن‪ .9007199254740991 :‬هذا غير آمن‪9007199254740992 :‬‬
‫طرق رقم جافاسكربت‬
‫طرق ا رقام جافاسكربت‬

‫‪:‬يمكن استخدام طرق األرقام هذه على جميع أرقام جافاسكربت‬
‫‪ toString ().‬طريقة‬
‫‪ .‬بإرجاع رقم كنص)(‪ toString‬تقوم الطريقة‬
‫‪:‬يمكن استخدام جميع طرق األرقام على أي نوع من األرقام (األحرف الحرفية أو المتغيرات أو التعبيرات)‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 123‬‬
‫;)(‪x.toString‬‬
‫;)(‪(123).toString‬‬
‫;)(‪(100 + 23).toString‬‬
‫)(‪ toExponential‬طريقة‬
‫‪.‬تقوم بإرجاع نص تحتوي على رقم مقرب ومكتوب باستخدام التدوين األسي)(‪toExponential‬‬
‫‪:‬تحدد المعلمة عدد األحرف خلف العالمة العشرية‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 9.656‬‬
‫;)‪x.toExponential(2‬‬
‫‪.‬المعلمة اختيارية‪ .‬إذا لم تحدده‪ ،‬فلن تقوم جافاسكربت بتقريب الرقم‬
‫)(‪ toFixed‬طريقة‬
‫‪:‬تُرجع نصوص ة تحتوي على الرقم المكتوب بعدد محدد من الكسور العشرية)(‪toFixed‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 9.656‬‬
‫;)‪x.toFixed(0‬‬
‫‪.‬مثال ⇣⇣ي للعمل بالمال ✅)‪toFixed(2‬‬
‫)(‪ toPrecision‬طريقة‬
‫‪:‬إرجاع نص برقم مكتوب بطول محدد)(‪toPrecision‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 9.656‬‬
‫;)(‪x.toPrecision‬‬
‫;)‪x.toPrecision(2‬‬
‫طرق اخرى لجلب القيمة‬

‫‪.‬إرجاع القيمة كرقم)(‪valueOf‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 123‬‬
‫;)(‪x.valueOf‬‬
‫;)(‪(123).valueOf‬‬
‫;)(‪(100 + 23).valueOf‬‬
‫‪ (typeof = object).‬أو كائنًا )‪ (typeof = number‬في جافاسكربت‪ ،‬يمكن أن يكون الرقم قيمة أولية‬
‫‪.‬الطريقة داخليًا في جافاسكربت لتحويل كائنات األرقام إلى قيم أولية)(‪ valueOf‬يتم استخدام هذه‬
‫‪.‬ال يوجد سبب الستخدامه في التعليمات البرمجية‬
‫‪ toString().‬و)(‪ valueOf‬تحتوي جميع أنواع بيانات جافاسكربت على طريقة‬
‫لتحويل المتغيرات إلى أرقام‬
‫‪:‬هناك ثالث طرق جافاسكربت يمكن استخدامها لتحويل متغير إلى رقم‬
‫الطريقة االولى )(‪Number‬‬

‫‪:‬لتحويل متغيرات جافاسكربت إلى أرقام)(‪ Number‬يمكن استخدام الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)‪Number(true‬‬
‫;)‪Number(false‬‬
‫;)"‪Number("10‬‬
‫;)"‪Number(" 10‬‬
‫;)" ‪Number("10‬‬
‫;)" ‪Number(" 10‬‬
‫;)"‪Number("10.33‬‬
‫;)"‪Number("10,33‬‬
‫;)"‪Number("10 33‬‬
‫;)"‪Number("Habib‬‬
‫رقما)‪، NaN‬إذا تعذر تحويل الرقم‬

‫‪.‬فسيتم إرجاع (ليس ً‬
‫كيف تحويل التاريخ)(‪Number‬‬

‫أيضا تحويل التاريخ إلى رقم باستخدام)(‪Number‬‬
‫‪ .‬يمكن ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫))"‪Number(new Date("1970-01-01‬‬
‫‪.‬بإرجاع عدد المللي ثانية منذ ‪ Number()1.1.1970‬تقوم الطريقة‬
‫‪:‬عدد المللي ثانية بين ‪ 1970-01-02‬و‪ 1970-01-01‬هو ‪86400000‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫))"‪Number(new Date("1970-01-02‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫))"‪Number(new Date("2017-09-30‬‬
‫الطريقة الثانية )(‪parseInt‬‬

‫‪:‬ياخذ نص ويعيد عددا صحيحا‪ .‬المساحات مسموحة‪ .‬يتم إرجاع الرقم األول فقط)(‪parseInt‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)"‪parseInt("-10‬‬
‫;)"‪parseInt("-10.33‬‬
‫;)"‪parseInt("10‬‬
‫;)"‪parseInt("10.33‬‬
‫;)"‪parseInt("10 20 30‬‬
‫;)"‪parseInt("10 years‬‬
‫;)"‪parseInt("years 10‬‬

‫الطريقة الثالثة )( ‪parseFloat‬‬

‫رقما‪ .‬المساحات مسموحة‪ .‬يتم إرجاع الرقم األول فقط)(‪parseFloat‬‬
‫‪:‬ياخذ نص ويعيد ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)"‪parseFloat("10‬‬
‫;)"‪parseFloat("10.33‬‬
‫;)"‪parseFloat("10 20 30‬‬
‫;)"‪parseFloat("10 years‬‬
‫;)"‪parseFloat("years 10‬‬

‫شرح اهم دوال االرقام‬

‫‪ :‬تنتمي أساليب الكائن هذه إلى كائن او كالس الرقم‬
‫طريقة‬ ‫وصف‬
‫)(‪Number.isInteger‬‬ ‫صحيحا‬
‫ً‬ ‫صحيحا إذا كانت الوسيطة‬
‫)(‪Number.isSafeInteger‬‬ ‫صحيحا آمنًا‬
‫ً‬ ‫صحيحا إذا كانت الوسيطة عد ًدا‬
‫)(‪Number.parseFloat‬‬ ‫تحويل نص إلى رقم‬
‫)(‪Number.parseInt‬‬ ‫تحويل نص إلى عدد صحيح‬
‫ال يمكن استخدام األساليب الرقمية في المتغيرات‬

‫‪ .‬تنتمي طرق األرقام المذكورة أعاله إلى كائنا رقام جافاسكربت‬
‫‪ Number.isInteger().‬ال يمكن الوصول إلى هذه األساليب فى حالة المتغير وإال ستؤدى الى‬
‫‪:‬إلى حدوث خطأ ‪ X‬حيث )(‪ X.isInteger‬سيؤدي استخدام‬
‫‪TypeError X.isInteger is not a function.‬‬
‫دالة)(‪Number.isInteger‬‬
‫صحيحا‪ true‬تُرجع الطريقة إذا)(‪Number.isInteger‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)‪Number.isInteger(10‬‬
‫;)‪Number.isInteger(10.5‬‬
‫دالة)(‪Number.isSafeInteger‬‬
‫‪.‬العدد الصحيح اآلمن هو عدد صحيح يمكن تمثيله بمكون كرقم مزدوج المكون‬
‫صحيحا آمنًا‪ true‬تُرجع الطريقة إذا)(‪Number.isSafeInteger‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪.‬األعداد الصحيحة اآلمنة هي جميع األعداد الصحيحة من ‪ )1 - 2 53(-‬إلى ‪)1 - 2 53(+‬‬

‫‪.‬هذا آمن‪ .9007199254740991 :‬هذا غير آمن‪9007199254740992 :‬‬
‫دالة)(‪Number.parseFloat‬‬
‫رقما)(‪Number.parseFloat‬‬
‫‪.‬ياخذ نص ويعيد ً‬
‫‪:‬المساحات مسموحة‪ .‬يتم إرجاع الرقم األول فقط‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)"‪Number.parseFloat("10‬‬
‫;)"‪Number.parseFloat("10.33‬‬
‫;)"‪Number.parseFloat("10 20 30‬‬
‫;)"‪Number.parseFloat("10 years‬‬
‫;)"‪Number.parseFloat("years 10‬‬

‫ملحوظة‬
‫)(‪ .Number.parseInt()Number.parseFloat‬الطريقتان متشابهتان فى النفيذ‬
‫)(‪parseInt()parseFloat‬‬
‫‪.‬والغرض من ذلك هو تقسيم الوحدات العامة (لتسهيل استخدام نفس كود جافاسكربت خارج المتصفح)‬
‫الدالة)(‪Number.parseInt‬‬
‫‪.‬ياخذ نص ويعيد عددا صحيحا)(‪Number.parseInt‬‬
‫‪:‬المساحات مسموحة‪ .‬يتم إرجاع الرقم األول فقط‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)"‪Number.parseInt("-10‬‬
‫;)"‪Number.parseInt("-10.33‬‬
‫;)"‪Number.parseInt("10‬‬
‫;)"‪Number.parseInt("10.33‬‬
‫;)"‪Number.parseInt("10 20 30‬‬
‫;)"‪Number.parseInt("10 years‬‬
‫;)"‪Number.parseInt("years 10‬‬
‫كتاب المرجع الكامل لجافاسكربت‬

‫للحصول على مرجع لدوال االرقام فى جافا سكربت كاملة‪ ،‬قم بزيارة موقع القافلة المهنية بمجرد التسجيل ستجد جميع كتب‬
‫ابو حبيب الحسينى كاملة والغير موجودة فى المكتبات االخرى ‪ :‬تحميل مجانى‬
‫‪.‬يحتوي المرجع على أوصاف وأمثلة لجميع خصائص وأساليبو و دوال جافاسكربت بال استثناء‬
‫خصائص االرقام‬
‫‪Property‬‬ ‫وصف‬
‫‪EPSILON‬‬ ‫‪ JS.‬الفرق بين ‪ 1‬وأصغر رقم‬
‫‪MAX_VALUE‬‬ ‫أكبر عدد ممكن في جافاسكربت‬
‫‪MIN_VALUE‬‬ ‫أصغر رقم ممكن في جافاسكربت‬
‫‪MAX_SAFE_INTEGER‬‬ ‫الحد األقصى لعدد صحيح آمن (‪)1 - 253‬‬
‫‪MIN_SAFE_INTEGER‬‬ ‫الحد األدنى لعدد صحيح آمن ‪)1 - 253(-‬‬
‫‪POSITIVE_INFINITY‬‬ ‫إنفينيتي (يرجع الفائض)‬
‫‪NEGATIVE_INFINITY‬‬ ‫الالنهاية السالبة (التي تم إرجاعها عند الفائض)‬
‫‪NaN‬‬ ‫رقما‬
‫‪".‬قيمة "ليست ً‬
‫خاصية ابسيلون‬
‫‪.‬يمثل الفرق بين ‪ 1‬وأصغر رقم الفاصلة العشرية‪Number.EPSILON‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = Number.EPSILON‬‬
‫ملحوظة‬
‫‪ ES6 .‬هي ميزة‪Number.EPSILON‬‬
‫‪.‬أنها ال تعمل في إنترنت إكسبلورر‬
‫خاصية ‪MAX_VALUE‬‬
‫‪.‬هو ثابت يمثل أكبر عدد ممكن في جافاسكربت‪Number.MAX_VALUE‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = Number.MAX_VALUE‬‬
‫ال يمكن استخدام خصائص األرقام في المتغيرات‬

‫‪ .‬تنتمي خصائص األرقام إلى كائن اال رقام‬
‫‪ Number.MAX_VALUE.‬ال يمكن استخدام هذه الخاصية إال كـنوع البيانات االرقام الكبيرة بيج انت‬
‫‪ undefined:‬متغير أو قيمة‪ ،‬سيتم إرجاع ‪ x‬حيث ‪ x.MAX_VALUE،‬باستخدام‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = 6‬‬
‫‪x.MAX_VALUE‬‬
‫خاصية ‪MIN_VALUE‬‬
‫‪.‬هو ثابت يمثل أقل رقم ممكن في جافاسكربت‪Number.MIN_VALUE‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = Number.MIN_VALUE‬‬
‫خاصية ‪MAX_SAFE_INTEGER‬‬
‫‪.‬يمثل الحد األقصى لعدد صحيح آمن في جافاسكربت‪Number.MAX_SAFE_INTEGER‬‬
‫‪.‬هو (‪Number.MAX_SAFE_INTEGER)1 - 2 53‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = Number.MAX_SAFE_INTEGER‬‬
‫خاصية‪MIN_SAFE_INTEGER‬‬
‫‪.‬يمثل الحد األدنى لعدد صحيح آمن في جافاسكربت‪Number.MIN_SAFE_INTEGER‬‬
‫‪.‬هو ‪Number.MIN_SAFE_INTEGER)1 - 2 53(-‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = Number.MIN_SAFE_INTEGER‬‬
‫خاصية‪POSITIVE_INFINITY‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = Number.POSITIVE_INFINITY‬‬
‫‪:‬يتم إرجاعها عند الفائض‪POSITIVE_INFINITY‬‬
‫;‪let x = 1 / 0‬‬
‫خاصية‪NEGATIVE_INFINITY‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪let x = Number.NEGATIVE_INFINITY‬‬
‫‪:‬يتم إرجاعها عند الفائض‪NEGATIVE_INFINITY‬‬
‫;‪let x = -1 / 0‬‬
‫شرح ‪NaN‬‬
‫‪.‬هي كلمة جافاسكربت محجوزة تعنى انه ليس ً‬
‫رقما قانونيًا‪NaN‬‬
‫أمثلة‬
‫;‪let x = Number.NaN‬‬
‫رقما(‪ NaN‬ستؤدي محاولة إجراء العمليات الحسابية باستخدام نص غير رقمية إلى‬
‫‪):‬ليس ً‬
‫المصفوفات‬
‫‪:‬المصفوفة عبارة عن متغير خاص يمكنه االحتفاظ بأكثر من قيمة واحدة‬
‫لماذا استخدام المصفوفات؟‬
‫‪:‬إذا كانت لديك قائمة بالعناصر (قائمة بأسماء ‪ ،‬على سبيل ال✅ مثال ⇣⇣)‪ ،‬فقد يبدو تخزين في متغيرات فردية كما يلي‬
‫;"‪let $_Habib1 = "Habib‬‬
‫;"‪let $_Habib2 = "Hamza‬‬
‫;"‪let $_Habib3 = "Abu Habib Al-Husini‬‬
‫كما ترى فى االعلى هذة ثالث متغيرات لها قيم ماذا لو كنت تريد التنقل والعثور على قيمة معينة بين هذة ‪،‬‬
‫المتغيرات ؟ وماذا لو لم يكن لديك ‪ 3‬متغيرات فقط بل مليون ماذا ستفعل؟‬
‫!الحل هو المصفوفة‬
‫يمكن للمصفوفة أن تحتوي على العديد من القيم تحت اسم واحد‪ ،‬ويمكنك الوصول إلى تخزين كبير جدا لتصبح قاغدة بيانات‬
‫‪ .‬كبيرة من القيم ليسهل الوصول اليها عن طريق اإلشارة إلى رقم الفهرس او بطرق اخرى كثيرة جدا فقد اعدت لذلك‬
‫كيف إنشاء مصفوفة‬

‫‪.‬يعد استخدام المصفوفة الحرفية أسهل طريقة إلنشاء مصفوفة جافاسكربت‬
‫‪:‬بناء الجملة‬
‫;]‪const array_name = [item1, item2, ...‬‬
‫‪ .‬من الممارسات الشائعة اإلعالن عن المصفوفات باستخدام الكلمة المحجوزة كونست و ليست اجبارىه‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪:‬المسافات وفواصل األسطر ليست مهمة‪ .‬يمكن أن يمتد اإلعالن على عدة أسطر‬
‫مثال ✅‬ ‫⇣⇣‬
‫[ =‪const HaBiB‬‬
‫‪"Habib",‬‬
‫‪"Hamza",‬‬
‫"‪"Abu Habib Al-Husini‬‬
‫;]‬
‫أيضا إنشاء مصفوفة‪ ،‬ثم توفير العناصر‬

‫مثال ✅‬ ‫⇣⇣‬
‫;][ =‪const HaBiB‬‬
‫;"‪HaBiB[0]= "Habib‬‬
‫;"‪HaBiB[1]= "Hamza‬‬
‫;"‪HaBiB[2]= "Abu Habib Al-Husini‬‬
‫استخدام الكلمة كونست‬

‫أيضا بإنشاء مصفوفة‪ ،‬وتعيين قيم لها شاهد‬
‫‪:‬يقوم ال✅ مثال ⇣⇣ التالي ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)"‪const HaBiB= new Array("Habib", "Hamza", "Abu Habib Al-Husini‬‬
‫تماما‬
‫ً‬ ‫‪.‬ال✅ مثال ⇣⇣ان أعاله يفعالن نفس الشيء‬
‫‪ new Array().‬ليست هناك حاجة لالستخدام‬
‫‪.‬من أجل البساطة وسهولة القراءة وسرعة التنفيذ‪ ،‬استخدم الطريقة الحرفية للمصفوفة‬
‫الوصول إلى عناصر المصفوفة‬

‫‪ :‬يمكنك الوصول إلى عنصر المصفوفة بالرجوع إلى رقم الفهرس‬

‫;]‪let $_Habib= HaBiB[0‬‬
‫‪.‬ملحوظة‪ :‬فهارس المصفوفات تبدأ بالرقم ‪0‬‬
‫‪.‬هو العنصر األول‪ ]1[ .‬هو العنصر الثاني ]‪[0‬‬
‫كيف تغيير عناصر المصفوفة‬

‫‪ HaBiB:‬يغير هذا قيمة العنصر األول في‬
‫;"* ‪HaBiB[0] = "Omar‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]"‪const HaBiB= ["Habib", "Samir", "Abu Habib Al-Husini‬‬
‫;"* ‪HaBiB[0] = "Hamza‬‬
‫الوصول إلى المصفوفة بلكاملة‬

‫‪:‬باستخدام جافاسكربت‪ ،‬يمكن الوصول إلى المصفوفة بلكامل من خالل اإلشارة إلى اسم المصفوفة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪document.getElementById("Habib").innerHTML = HaBiB‬‬
‫المصفوفات هي كائنات‬
‫المصفوفات هي نوع خاص من الكائنات‪.‬او البيانات يقوم عامل التشغيل في جافاسكربت بإرجاع "كائن" للمصفوفات او‬
‫‪ .‬العنصر‬
‫‪ :‬يُرجع ]‪ ⇣⇣، hAbiB[0‬تستخدم المصفوفات األرقام للوصول إلى "عناصرها"‪ .‬في هذا ال✅ مثال‬
‫مثال‬
‫;]‪const hAbiB = ["Habib", "Al Husini 😀😁😂", 406, 4006, 4566‬‬
‫‪:‬يُرجع الناتج ب حبيب ‪ ⇣⇣، hAbiB.firstName‬تستخدم الكائنات األسماء للوصول إلى "أعضائها"‪ .‬في هذا ال✅ مثال‬
‫‪:‬هدف‬
‫;}‪const hAbiB = {firstName:"Habib", lastName:"Al Husini 😀😁😂", age:40‬‬
‫يمكن أن تكون عناصر المصفوفة كائنات‬

‫‪.‬يمكن أن تكون متغيرات جافاسكربت كائنات‪ .‬المصفوفات هي أنواع خاصة من الكائنات‬
‫‪.‬وبسبب هذا‪ ،‬يمكن أن يكون لديك متغيرات من أنواع مختلفة في نفس المصفوفة‬
‫يمكن أن يكون لديك كائنات في مصفوفة ‪ .‬يمكن أن يكون لديك وظائف في مصفوفة ‪ .‬يمكن أن يكون لديك مصفوقات في‬
‫‪ :‬مصفوفة‬
‫;‪Habib_Array[0] = Date.now‬‬
‫;‪Habib_Array[1] = Husini‬‬
‫;‪Habib_Array[2] = myHaBiB‬‬
‫خصائص المصفوفة وطرقها‬

‫‪:‬تكمن القوة الحقيقية لمصفوفات جافاسكربت في خصائص وأساليب المصفوفة المضمنة‬
‫‪HaBiB.length // Returns the number of elements‬‬

‫‪HaBiB.sort() // Sorts the array‬‬
‫‪.‬سيتم تناول طرق المصفوفة في الفصول التالية‬
‫كيف معرفة طول المصفوفة‬

‫‪.‬المصفوفة بإرجاع طول المصفوفة (عدد عناصر المصفوفة)‪ length‬تقوم خاصية‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]"‪const HaBiB= ["Al-Husini", "Osman", "Abu Habib", "Abu Zedan‬‬
‫;‪let length = HaBiB.length‬‬
‫سيرجع هذا المثال برقم يذيد بواحد عن رقم المصفوفة ﻻن المصفوفة تبدا من الصفر‬
‫كيف الوصول إلى العنصر األول‬

‫مثال ✅‬ ‫⇣⇣‬
‫;]‪let fruit = HaBiB[0‬‬
‫كيف الوصول إلى العنصر األخير‬
✅ ‫مثال‬ ⇣⇣
const HaBiB= ["Al-Husini", "Osman", "Abu Habib", "Abu Zedan"];
let fruit = HaBiB[HaBiB.length - 1];
‫كيف عرض جميع العناصر‬

‫ إحدى الطرق للتكرار عبر المصفوفة هي استخدام‬for‫حلقة‬:
✅ ‫مثال‬ ⇣⇣
let fLen = HaBiB.length;
let text = "<ul>";

for (let i = 0; i < fLen; i++) {
text += "<li>" + HaBiB[i] + "</li>";
}
text += "</ul>";
ً ‫ يمكنك‬Array.forEach()‫ هذة الوظيفة‬:

‫أيضا استخدامها وستحصل على نفس الناتج‬
✅ ‫مثال‬ ⇣⇣
let text = "<ul>";

HaBiB.forEach(Husini);
text += "</ul>";
function Husini(value) {
text += "<li>" + value + "</li>";
}
‫كيف إضافة عناصر فى نهاية المصفوفة‬

‫‪:‬الطريقة)(‪ push‬أسهل طريقة إلضافة عنصر جديد إلى مصفوفة هي استخدام‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]"‪const HaBiB= ["Al-Husini", "Osman", "Abu Habib‬‬
‫‪HaBiB.push("Osama"); // Adds a new element (Osama) to HaBiB‬‬
‫‪:‬هذة الخاصية‪ length‬يمكن ً‬

‫أيضا إضافة عنصر جديد إلى نهاية المصفوفة باستخدامها شاهد‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]"‪const HaBiB= ["Al-Husini", "HamZA", "Abu Habib‬‬
‫‪HaBiB[HaBiB.length] = "Osama"; // Adds "Osama" to HaBiB‬‬
‫! تحذير‬
‫يمكن أن تؤدي إضافة عناصر ذات فهارس عالية إلى إنشاء "فجوات" غير محددة في المصفوفة واﻻفضل ان تترك الترتيب‬
‫التلقائى ياخذ مجراه و اتباع الدوال التى سنشرحها للحفاظ على المفاتيح ويجب عمل ملف مستقل للمصفوفة اذا كانت كبيرة‬
‫‪ :‬الحجم ﻻن الكمبيوتر سيعتبرها قاعدة بيانات‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]"‪const HaBiB= ["Al-Husini", " * ", "Abu Habib‬‬
‫‪HaBiB[6] = "Osama"; // Creates undefined "holes" in HaBiB‬‬
‫هنا اصبحت المصفوفة تحتوى على فجوات بين رقم خمسة ورقم ثالثة واال استخدم الكائنات لتحكم اكثر فى‬
‫المفاتيح‬
‫المصفوفات الترابطية‬
‫‪.‬تدعم العديد من لغات البرمجة المصفوفات ذات الفهارس المسماة‬
‫‪.‬تسمى المصفوفات ذات الفهارس المسماة المصفوفات الترابطية (أو التجزئة)‬

‫‪.‬ال تدعم جافاسكربت المصفوفات ذات الفهارس المسماة‬
‫دائما فهارس مرقمة‬

‫ً‬ ‫‪ .‬في جافاسكربت‪ ،‬تستخدم المصفوفات‬
‫البديل لها هى الكائنات سنتناولها فى دروس قادمة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;][ = ‪const hAbiB‬‬
‫;"‪hAbiB[0] = "Habib‬‬
‫;"😂😁😀 ‪hAbiB[1] = "Al Husini‬‬
‫;‪hAbiB[2] = 46‬‬
‫‪hAbiB.length; // Will return 3‬‬
‫;]‪hAbiB[0‬‬ ‫"‪// Will return "Habib‬‬
‫!! تحذير‬
‫فهارسا مسماة‪ ،‬فسوف تقوم جافاسكربت بإعادة تعريف المصفوفة لكائن ما‬
‫ً‬ ‫‪.‬إذا كنت تستخدم‬
‫‪ .‬لبعد ذلك‪ ،‬ستؤدي بعض أساليب وخصائص المصفوفة إلى نتائج غير صحيحة الن المفاتيح او الفهارس ستتغير‬
‫مثال ✅‬ ‫‪⇣⇣:‬‬
‫;][ = ‪const hAbiB‬‬
‫;"‪hAbiB["firstName"] = "Habib‬‬
‫;"😂😁😀 ‪hAbiB["lastName"] = "Al Husini‬‬
‫;‪hAbiB["age"] = 46‬‬
‫‪hAbiB.length; // Will return 0‬‬
‫;]‪hAbiB[0‬‬ ‫‪// Will return undefined‬‬
‫الفرق بين المصفوفات والكائنات‬
‫‪ .‬في جافاسكربت‪ ،‬تستخدم المصفوفات فهارس مرقمة‬
‫‪ .‬في جافاسكربت‪ ،‬تستخدم الكائنات الفهارس المسماة وهى اكثر فاعلية‬
‫‪.‬المصفوفات هي نوع خاص من الكائنات‪ ،‬مع فهارس مرقمة ال تقبل نصوص فى المفاتيح‬
‫‪.‬متى تستخدم المصفوفات و متى تستخدم الكائنات‬

‫فى الغالب ننصح بستخدام الكائنات غوضا عن المصفوفا ولكن فى بعض االمور ستطر الى استخدام المصفوفات•‬
‫‪ .‬يجب عليك استخدام الكائنات عندما تريد أن تكون أسماء العناصر عبارة عن نصوص (نص)•‬
‫أرقاما•‬
‫ً‬ ‫‪ .‬يجب عليك استخدام المصفوفات عندما تريد أن تكون أسماء العناصر‬
‫كيف استخدام)(‪new Array‬‬

‫‪ new Array().‬تحتوي جافاسكربت على ُمنشئ مصفوفة مدمج‬
‫‪.‬ولكن يمكنك استخدامها بأمان []بدال من ذلك‬

‫‪:‬تقوم هاتان العبارتان المختلفتان بإنشاء مصفوفة فارغة جديدة تسمى االراية‬
‫;)(‪const hAbIB = new Array‬‬

‫;][ = ‪const hAbIB‬‬
‫‪:‬تقوم هاتان العبارتان المختلفتان بإنشاء مصفوفة جديدة تحتوي على ‪ 6‬أرقام‬
‫;)‪const hAbIB = new Array(40, 100, 1, 5, 25, 10, 100, 1, 5, 25, 10‬‬
‫;]‪const hAbIB = [40, 100, 1, 5, 25, 10, 100, 1, 5, 25, 10, 0, 1, 5, 25, 10‬‬
‫‪:‬المحجوزة بعض النتائج غير المتوقعة‪ new‬يمكن أن تنتج الكلمة‬
‫‪// Create an array with three elements:‬‬

‫;)‪const hAbIB = new Array(40, 100, 1‬‬
‫‪// Create an array with two elements:‬‬
‫;)‪const hAbIB = new Array(40, 100‬‬
‫??? ‪// Create an array with one element‬‬

‫;)‪const hAbIB = new Array(40‬‬
‫خطأ شائع‬
‫;]‪const hAbIB = [40‬‬
‫هذا وصول الى العنصر رقم اربعة واربعين‬
‫‪:‬ليس هو نفسه كما يلي‬
‫انما هذا انشاء مصفوفة من اربعة واربعين عنصر‬
‫‪// Create an array with one element:‬‬

‫;]‪const hAbIB = [40‬‬
‫‪// Create an array with 40 undefined elements:‬‬

‫كيفية التعرف على المصفوفة‬

‫السؤال الشائع هو‪ :‬كيف أعرف ما إذا كان المتغير مصفوفة؟‬
‫‪ " object":‬يُرجع‪ typeof‬تكمن المشكلة في أن عامل تشغيل جافاسكربت‬
‫;‪let type = typeof HaBiB‬‬
‫‪.‬بإرجاع كائن ألن مصفوفة جافاسكربت عبارة عن كائن ‪ typeof‬يقوم عامل التشغيل‬
‫‪1‬‬ ‫‪:‬الحل‬
‫‪ Array.isArray():‬لحل هذه المشكلة‪ ،‬حدد (جافاسكربت ‪ )2009‬طريقة جديدة‬
‫;)‪Array.isArray(HaBiB‬‬
‫‪2‬‬ ‫‪:‬الحل‬
‫‪:‬إذا تم إنشاء كائن بواسطة ُمنشئ معين ‪ true‬القيمة‪ instanceof‬يُرجع العامل‬
‫;‪HaBiB instanceof Array‬‬
‫طرق المصفوفات‬
‫اوالا تحويل المصفوفات إلى نصوص‬

‫‪.‬بتحويل مصفوفة إلى نص من قيم المصفوفة (مفصولة بفواصل))(‪ toString‬تقوم طريقة جافاسكربت‬
‫⇣⇣ا ✅‬ ‫مثال‬
‫;)(‪document.getElementById("Habib").innerHTML = HaBiB.toString‬‬
‫‪Al-Husini,Osman,Abu Habib,Abu Zedan‬‬
‫أيضا بدمج كافة عناصر المصفوفة في نص)(‪ join‬تقوم الطريقة‬

‫‪ً .‬‬
‫تماما مثل‬
‫ً‬ ‫‪:‬ولكن باإلضافة إلى ذلك يمكنك تحديد الفاصل ‪ toString()،‬إنه يتصرف‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)" * "(‪document.getElementById("Habib").innerHTML = HaBiB.join‬‬
‫‪Al-Husini * Osman * Abu Habib * Abu Zedan‬‬
‫تعديل المصفوفات‬
‫‪.‬عند العمل مع المصفوفات‪ ،‬يكون من السهل إزالة العناصر وإضافة عناصر جديدة‬
‫‪:‬وهذا ما هو الفرقع والدفع‬
‫‪.‬إخراج العناصر من المصفوفة‪ ،‬أو دفع العناصر إلى مصفوفة‬
‫كيف ازالة العنصر االخير من المصفوفة‬

‫‪:‬بإزالة العنصر األخير من المصفوفة)(‪ pop‬تقوم الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)(‪HaBiB.pop‬‬
‫‪":‬القيمة التي "برزت)(‪ pop‬تُرجع الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)(‪let fruit = HaBiB.pop‬‬
‫سيتم ازالة ابو حمزا النه العنصر االخير‬
‫كيف اضافة عنصر جديد فى النهاية‬

‫عنصرا جدي ًدا إلى المصفوفة (في النهاية))(‪ push‬تضيف الطريقة‬
‫ً‬ ‫‪:‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)"‪HaBiB.push("Hamza‬‬
‫‪:‬بإرجاع طول المصفوفة الجديد)(‪ push‬تقوم الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)"‪let length = HaBiB.push("Hamza‬‬
‫اساليب الحذف‬
‫‪.‬بمثابةتعديل‪ ،‬ولكنه يعمل على العنصر األول بدال ً من العنصر األخير ‪ Shifting‬يعتبر‬
‫كيف حذف العنصر اﻻول من المصفوفة‬
‫‪.‬بإزالة عنصر المصفوفة األول وازاحة مفاتيح جميع العناصر األخرى إلى فهرس أقل)(‪ shift‬تقوم الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)(‪HaBiB.shift‬‬
‫‪":‬القيمة التي تم "إزاحتها للخارج)(‪ shift‬تُرجع الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)(‪let fruit = HaBiB.shift‬‬
‫كيف اضافة عنصر الى البداية والغاء اﻻزاحة للمفاتيح‬

‫عنصرا جدي ًدا إلى المصفوفة (في البداية)‪ ،‬وتقوم بإلغاء إزاحة العناصر القديمة)(‪ unshift‬تضيف الطريقة‬
‫ً‬ ‫‪:‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]"‪const HaBiB= ["Al-Husini", "Abu Habib", "Abu Habib", "Abu Zedan‬‬
‫;)"‪HaBiB.unshift("Osama‬‬
‫‪:‬بإرجاع طول المصفوفة الجديد)(‪ unshift‬تقوم الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)"‪HaBiB.unshift("Osama‬‬
‫كيف استبدال قيمة عنصر معين‬
‫‪ :‬يتم الوصول إلى عناصر المصفوفة باستخدام رقم الفهرس الخاص بها‬
‫‪:‬تبدأ فهارس المصفوفات بـ ‪0‬‬
‫هو عنصر المصفوفة األول ]‪[0‬‬

‫هو الثاني ]‪[1‬‬
‫‪ ...‬هو الثالث ]‪[2‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪HaBiB[0] = "Hamza‬‬
‫كيف استخدام مجموع العناصر لالضافة‬

‫‪:‬طريقة سهلة إللحاق عنصر جديد بالمصفوفة‪ length‬توفر الخاصية‬
‫مثال ✅‬ ‫⇣⇣‬
‫;"‪HaBiB[HaBiB.length] = "Hamza‬‬
‫حذف عناصر من المصفوفة‬
‫! تحذير‬
‫الكثير يستخدم هذا اﻻجراء ويظن ان العنصر تم حذفا بالكامل ولكن يمكن حذف عناصر المصفوفة باستخدام عامل تشغيل‬
‫‪ delete.‬وستبقى مكان العنصر موجودة فى المصفوفة فارغ ﻻ يوجد بها قيمة تستطيع استدعئه من جديد والحل هنا‬
‫‪.‬استخدم بدال ً من ذلك)(‪ Shift‬أو )(‪ pop‬للحذف التام‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪delete HaBiB[0‬‬
‫كيف دمج المصفوفات‬

‫‪:‬بإنشاء مصفوفة جديدة عن طريق دمج المصفوفات الموجودة)(‪ concat‬تقوم الطريقة‬
‫مصفوفتين) ✅‬ ‫مثال ⇣⇣ (دمج‬

‫;]"‪const HAbIB$ = ["zedan", "Braa‬‬
‫;]"‪const HuSin$ = ["Emil", "MoHamed", "Ahmid‬‬
‫;)‪const Habib_myChildren = HAbIB$.concat(HuSin$‬‬
‫دائما بإرجاع مصفوفة جديدة)(‪concat‬‬

‫ً‬ ‫‪.‬ال تغير الطريقة المصفوفات الموجودة ‪ .‬يقوم‬
‫‪:‬أي عدد من وسيطات المصفوفة)(‪ concat‬يمكن أن تأخذ الطريقة‬
‫)✅‬ ‫مثال ⇣⇣ (دمج ثالث مصفوقات‬
‫;]"‪const arr1 = ["zedan", "Braa‬‬
‫;]"‪const arr2 = ["Emil", "MoHamed", "Ahmid‬‬
‫;]"‪const arr3 = ["Hamza", "Ali‬‬
‫;)‪const Habib_myChildren = arr1.concat(arr2, arr3‬‬
‫‪:‬أيضا أن تأخذ نصوص كوسيطات)(‪ concat‬يمكن للطريقة‬

‫ً‬
‫القيم) ✅‬ ‫مثال ⇣⇣ (دمج مصفوفة مع‬

‫;]"‪const arr1 = ["Emil", "MoHamed", "Ahmid‬‬
‫;)"‪const Habib_myChildren = arr1.concat("Habib‬‬
‫اضافة عناصر فى وسط المصفوفة‬

‫)(‪. splice‬تضيف الطريقة عناصر جديدة إلى المصفوفة‬
‫‪.‬المصفوفة لالضافة )(‪ slice‬تقطع الطريقة‬
‫كيف اضافة عناصر فى وسط المصفوفة‬

‫‪:‬الطريقة إلضافة عناصر جديدة إلى المصفوفة)(‪ splice‬يمكن استخدام هذه‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)"‪HaBiB.splice(2, 0, "Osama", "Hamza‬‬
‫‪.‬تحدد المعلمة األولى (‪ )2‬الموضع الذي يجب إضافة عناصر جديدة (مقسمة إليها)‬
‫‪ .‬تحدد المعلمة الثانية (‪ )0‬عدد العناصر التي يجب إزالتها‬
‫‪ .‬العناصر الجديدة التي سيتم إضافتها )"‪"Hamza‬و "‪ ("Osama‬تحدد بقية البرمترات‬
‫‪:‬بإرجاع مصفوفة تحتوي على العناصر المحذوفة)(‪ splice‬تقوم الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)"‪HaBiB.splice(2, 2, "Osama", "Hamza‬‬
‫ازالة عناصر من محددة فى المصفوفة‬

‫‪:‬إلزالة العناصر دون ترك "ثقوب" في المصفوفة)(‪ splice‬باستخدام إعداد البرمترات الذكي‪ ،‬يمكنك استخدامه‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)‪HaBiB.splice(0, 1‬‬
‫‪.‬تحدد المعلمة األولى (‪ )0‬الموضع الذي يجب إضافة عناصر جديدة (مقسمة إليها)‬
‫‪ .‬تحدد المعلمة الثانية (‪ )1‬عدد العناصر التي يجب إزالتها‬
‫‪.‬يتم حذف بقية البرمترات‪ .‬لن يتم إضافة أي عناصر جديدة‬
‫كيف تجزئة المصفوفة‬

‫‪.‬بتقسيم قطعة من المصفوفة إلى مصفوفة جديدة)(‪ slice‬تقوم الطريقة‬
‫بدءا من عنصر المصفوفة ‪"( 1‬البرتقالي")‬
‫جزءا من مصفوفة ً‬
‫‪:‬يقطع هذا ال✅ مثال ⇣⇣ ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]"‪const HaBiB= ["Al-Husini", "Osman", "Osama", "Abu Habib", "Abu Zedan‬‬
‫;)‪const citrus = HaBiB.slice(1‬‬
‫ملحوظة‬
‫‪.‬بإنشاء مصفوفة جديدة)(‪ slice‬تقوم الطريقة‬
‫‪.‬بإزالة أي عناصر من المصفوفة المصدر)(‪ slice‬ال تقوم الطريقة‬
‫بدءا من عنصر المصفوفة ‪3‬‬

‫جزءا من مصفوفة ً‬
‫‪ ("Abu Habib"):‬يقسم هذا ال✅ مثال ⇣⇣ ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪ slice(1, 3).‬وسيطتين مثل)(‪ slice‬يمكن أن تأخذ الطريقة‬

‫‪.‬تقوم الطريقة بعد ذلك بتحديد العناصر من وسيطة البداية وحتى (ولكن ليس بما في ذلك) وسيطة النهاية‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)‪const citrus = HaBiB.slice(1, 3‬‬
‫‪.‬تقوم بتقسيم بقية المصفوفة )(‪ slice‬إذا تم حذف وسيطة النهاية‪ ،‬كما هو الحال في األمثلة األولى‪ ،‬فإن الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫كيف تحويل المصفوف الى نص عادى‬
‫‪.‬تقوم جافاسكربت تلقائيًا بتحويل المصفوفة إلى نص مفصولة بفواصل عندما تكون القيمة األولية متوقعة‬
‫دائما عندما تحاول إخراج مصفوفة‬
‫ً‬ ‫‪.‬هذا هو الحال‬
‫‪:‬سيؤدي هذان ال✅ مثال ⇣⇣ان إلى نفس النتيجة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)(‪document.getElementById("Habib").innerHTML = HaBiB.toString‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;‪document.getElementById("Habib").innerHTML = HaBiB‬‬
‫ملحوظة‬
‫‪ toString().‬تحتوي جميع كائنات جافاسكربت على طريقة‬
‫كيف إيجاد القيم القصوى والصغرى في المصفوفة‬

‫‪.‬ال توجد وظائف مضمنة للعثور على أعلى أو أدنى قيمة في مصفوفة جافاسكربت‬
‫‪.‬سوف تتعلم كيفية حل هذه المشكلة في الفصل التالي من هذا الكتاب‬
‫كيف الفرز والترتيب للمصفوفات‬
‫اشهر طرق الفرز للمصفوفة‬
‫‪:‬بفرز مصفوفة أبجديًا)(‪ sort‬تقوم الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)(‪HaBiB.sort‬‬
‫كيف عكس ترتيب المصفوفة‬

‫‪.‬بعكس العناصر الموجودة في المصفوفة)(‪ reverse‬تقوم الطريقة‬
‫‪:‬يمكنك استخدامه لفرز مصفوفة بترتيب تنازلي‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)(‪HaBiB.sort‬‬
‫;)(‪HaBiB.reverse‬‬
‫كيف عمل ترتيب رقمى للمصفوفة‬

‫‪ .‬الدالة بفرز القيم كنصوص)(‪ sort‬بشكل افتراضي‪ ،‬تقوم‬
‫‪ "Al-Husini").‬تأتي قبل "‪ ("Abu Habib‬يعمل هذا بشكل جيد مع النصوص‬
‫‪".‬ومع ذلك‪ ،‬إذا تم فرز األرقام كنصوص‪ ،‬فإن "‪ "25‬أكبر من "‪ ،"100‬ألن "‪ "2‬أكبر من "‪1‬‬
‫‪.‬ستنتج الطريقة نتيجة غير صحيحة عند فرز األرقام)(‪، sort‬ولهذا السبب‬
‫‪ :‬يمكنك إصالح ذلك من خالل توفير وظيفة المقارنة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const hAbIB = [40, 100, 1, 5, 25, 10‬‬
‫;)}‪hAbIB.sort(function(a, b){return a - b‬‬
‫‪:‬استخدم نفس الخدعة لفرز مصفوفة تنازليًا‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const hAbIB = [40, 100, 1, 5, 25, 10‬‬
‫;)}‪hAbIB.sort(function(a, b){return b - a‬‬
‫وظيفة المقارنة‬
‫‪.‬الغرض من وظيفة المقارنة هو تحديد ترتيب فرز بديل‬
‫اعتمادا على الوسائط‬
‫ً‬ ‫‪:‬يجب أن تُرجع دالة المقارنة قيمة سالبة أو صفرية أو موجبة‪،‬‬
‫}‪function(a, b){return a - b‬‬
‫تقارن الدالة قيمتين‪ ،‬فإنها ترسل القيم إلى دالة المقارنة‪ ،‬وتقوم بفرز القيم وفقًا للقيمة التي تم إرجاعها (سلبية‪ sort() ،‬عندما‬
‫‪.‬صفر‪ ،‬إيجابية)‬
‫‪ b.‬يتم فرزها قبل‪، a‬إذا كانت النتيجة سلبية‬
‫‪ a.‬يتم فرزها قبل‪، b‬إذا كانت النتيجة إيجابية‬
‫‪.‬إذا كانت النتيجة ‪ ،0‬فلن يتم إجراء أي تغييرات على ترتيب فرز القيمتين‬
‫‪ ⇣⇣:‬مثال ✅‬
‫‪ (a, b).‬تقوم دالة المقارنة بمقارنة جميع القيم الموجودة في المصفوفة‪ ،‬قيمتين في المرة الواحدة‬
‫‪.‬تستدعي الطريقة دالة المقارنة (‪، sort())100 ،40‬عند مقارنة ‪ 40‬و‪100‬‬
‫‪.‬وبما أن النتيجة سالبة (‪ ،)60-‬فستقوم دالة الفرز بفرز ‪ 40‬كقيمة أقل من ‪ (a - b)، 100‬تحسب الدالة ‪100 - 40‬‬
‫‪:‬يمكنك استخدام مقتطف الشفرة هذا لتجربة الفرز رقميًا وأبجديًا‬
‫>‪<button onclick="Husini1()">Sort Alphabetically</button‬‬

‫>‪<button onclick="Husini2()">Sort Numerically</button‬‬
‫>‪<p id="Habib"></p‬‬
‫;]‪const hAbIB = [40, 100, 1, 5, 25, 10‬‬
‫;‪document.getElementById("Habib").innerHTML = hAbIB‬‬
‫{ )(‪function Husini1‬‬
‫;)(‪hAbIB.sort‬‬
‫}‬
‫{ )(‪function Husini2‬‬
‫}‬
‫فرز مصفوفة بترتيب عشوائي‬

‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const hAbIB = [40, 100, 1, 5, 25, 10‬‬
‫;)})(‪hAbIB.sort(function(){return 0.5 - Math.random‬‬
‫طريقة فيشر ييتس‬

‫‪.‬ليس دقيقًا‪ .‬وسوف تفضل بعض األرقام على غيرها ‪، array .sort()،‬ال✅ مثال ⇣⇣ أعاله‬
‫شيوعا‪ ،‬تسمى طريقة فيشر ييتس‪ ،‬وتم تقديمها في علم البيانات في وقت مبكر من عام ‪1938‬‬
‫ً‬ ‫!الطريقة الصحيحة األكثر‬
‫‪:‬في جافاسكربت يمكن ترجمة الطريقة إلى هذا‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const hAbIB = [40, 100, 1, 5, 25, 10‬‬
‫{ )‪for (let i = hAbIB.length -1; i > 0; i--‬‬

‫;))‪let j = Math.floor(Math.random() * (i+1‬‬
‫;]‪let k = hAbIB[i‬‬
‫;]‪hAbIB[i] = hAbIB[j‬‬
‫;‪hAbIB[j] = k‬‬
‫}‬
‫ابحث عن أعلى أو أدنى قيمة للمصفوفة‬

‫‪.‬ال توجد وظائف مضمنة للعثور على القيمة القصوى أو الدنيا في المصفوفة‬
‫‪.‬ومع ذلك‪ ،‬بعد فرز مصفوفة ‪ ،‬يمكنك استخدام الفهرس للحصول على القيم األعلى واألدنى‬
‫‪:‬الترتيب تصاعديا ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const hAbIB = [40, 100, 1, 5, 25, 10‬‬
‫‪// now hAbIB[0] contains the lowest value‬‬
‫‪// and hAbIB[hAbIB.length-1] contains the highest value‬‬
‫‪:‬الترتيب تنازليا ً‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const hAbIB = [40, 100, 1, 5, 25, 10‬‬
‫;)}‪hAbIB.sort(function(a, b){return b - a‬‬
‫‪// now hAbIB[0] contains the highest value‬‬
‫‪// and hAbIB[hAbIB.length-1] contains the lowest value‬‬
‫‪.‬يعد فرز مصفوفة كاملة طريقة غير فعالة للغاية إذا كنت تريد فقط العثور على القيمة األعلى (أو األدنى)‬
‫)(‪ Math.max‬استخدام‬
‫‪:‬للعثور على أعلى رقم في مصفوفة‪ Math.max.apply‬يمكنك استخدامه‬
‫مثال ✅‬ ‫⇣⇣‬
‫{ )‪function Habib_ArrayMax(arr‬‬
‫;)‪return Math.max.apply(null, arr‬‬
‫}‬
‫‪ Math.max(1, 2, 3).‬يعادل)]‪Math.max.apply(null, [1, 2, 3‬‬
‫)(‪ Math.min‬استخدام‬
‫‪:‬للعثور على أقل رقم في المصفوفة‪ Math.min.apply‬يمكنك استخدامه‬
‫مثال ✅‬ ‫⇣⇣‬
‫{ )‪function Habib_ArrayMin(arr‬‬
‫;)‪return Math.min.apply(null, arr‬‬
‫}‬
‫‪ Math.min(1, 2, 3).‬يعادل)]‪Math.min.apply(null, [1, 2, 3‬‬
‫‪ Min / Max‬طرق خاصة بي‬

‫‪".‬الحل األسرع هو استخدام طريقة "شائعة االستخدام وسهلة‬
‫‪:‬تتكرر هذه الوظيفة عبر مصفوفة تقارن كل قيمة بأعلى قيمة تم العثور عليها‬
‫األقصى) ✅‬ ‫مثال ⇣⇣ (البحث عن الحد‬
‫{ )‪function Habib_ArrayMax(arr‬‬
‫;‪let len = arr.length‬‬
‫;‪let max = -Infinity‬‬
‫{ )‪while (len--‬‬
‫{ )‪if (arr[len] > max‬‬
‫;]‪max = arr[len‬‬
‫}‬
‫}‬
‫;‪return max‬‬
‫}‬
‫‪:‬تتكرر هذه الوظيفة عبر مصفوفة تقارن كل قيمة بأقل قيمة تم العثور عليها‬
‫األدنى) ✅‬ ‫مثال ⇣⇣ (البحث عن الحد‬

‫{ )‪function Habib_ArrayMin(arr‬‬
‫;‪let len = arr.length‬‬
‫;‪let min = Infinity‬‬
‫{ )‪while (len--‬‬
‫{ )‪if (arr[len] < min‬‬
‫;]‪min = arr[len‬‬
‫}‬
‫}‬
‫;‪return min‬‬
‫}‬
‫فرز مصفوفات الكائنات‬

‫‪:‬تحتوي مصفوقات جافاسكربت غالبًا على كائنات‬
‫مثال ✅‬ ‫⇣⇣‬
‫[ =‪const HaBiB‬‬
‫‪{use:"Hamza", year:2016},‬‬
‫‪{use:"Habib", year:2001},‬‬
‫}‪{use:"Abu Habib Al-Husini", year:2010‬‬
‫;]‬
‫‪.‬فيمكن استخدام الطريقة لفرز المصفوفة)(‪، sort‬حتى لو كانت الكائنات لها خصائص أنواع بيانات مختلفة‬
‫‪:‬الحل هو كتابة دالة مقارنة لمقارنة قيم الخاصية‬
‫مثال ✅‬ ‫⇣⇣‬
‫;)}‪HaBiB.sort(function(a, b){return a.year - b.year‬‬
‫‪:‬تعد مقارنة خصائص النص أكثر تعقي ًدا بعض الشيء‬
‫مثال ✅‬ ‫⇣⇣‬
‫{)‪HaBiB.sort(function(a, b‬‬
‫;)(‪let x = a.type.toLowerCase‬‬
‫;)(‪let y = b.type.toLowerCase‬‬
‫};‪if (x < y) {return -1‬‬
‫};‪if (x > y) {return 1‬‬
‫;‪return 0‬‬
‫;)}‬
‫تكرار مصفوفة جافاسكربت‬
‫‪.‬تعمل طرق تكرار المصفوفة على كل عنصر من عناصر المصفوفة‬
‫)( ‪forEach‬‬
‫‪.‬دالة (دالة رد اتصال) مرة واحدة لكل عنصر من عناصر المصفوفة)(‪ forEach‬تستدعي الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num = [45, 4, 9, 16, 25‬‬
‫;"" = ‪let hAbiB‬‬
‫;)‪Habib_Num.forEach(Husini‬‬
‫{ )‪function Husini(value, index, array‬‬

‫;">‪hAbiB += value + "<br‬‬
‫}‬
‫‪:‬الحظ أن الدالة تأخذ ‪ 3‬وسيطات‬

‫قيمة السلعة•‬
‫فهرس البند•‬
‫المصفوفة نفسها•‬
‫‪:‬يستخدم ال✅ مثال ⇣⇣ أعاله معلمة القيمة فقط‪ .‬يمكن إعادة كتابة ال✅ مثال ⇣⇣ إلى‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num = [45, 4, 9, 16, 25‬‬
‫;"" = ‪let hAbiB‬‬
‫;)‪Habib_Num.forEach(Husini‬‬
‫{ )‪function Husini(value‬‬
‫;">‪hAbiB += value + "<br‬‬
‫}‬
‫استخدام دالة الخريطة‬

‫‪.‬بإنشاء مصفوفة جديدة عن طريق تنفيذ دالة على كل عنصر من عناصر المصفوفة)(‪ map‬تقوم الطريقة‬
‫‪.‬بتنفيذ الوظيفة لعناصر المصفوفة بدون قيم)(‪ map‬ال تقوم الطريقة‬
‫‪ .‬ال تغير الطريقة المصفوفة األصلية)(‪map‬‬
‫‪:‬يقوم هذا ال✅ مثال ⇣⇣ بضرب كل قيمة مصفوفة بمقدار ‪2‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num1 = [45, 4, 9, 16, 25‬‬
‫;)‪const Habib_Num2 = Habib_Num1.map(Husini‬‬

‫;‪return value * 2‬‬
‫}‬

‫‪ :‬عندما تستخدم دالة رد االتصال معلمة القيمة فقط‪ ،‬يمكن حذف معلمات الفهرس والمصفوفة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num1 = [45, 4, 9, 16, 25‬‬
‫;)‪const Habib_Num2 = Habib_Num1.map(Husini‬‬
‫;‪return value * 2‬‬
‫}‬
‫كيف تصفية المصفوفة والبحث فيها‬

‫‪.‬بإنشاء مصفوفة جديدة تحتوي على عناصر المصفوفة التي تجتاز االختبار)(‪ filter‬تقوم الطريقة‬
‫‪:‬ينشئ هذا ال✅ مثال ⇣⇣ مصفوفة جديدة من عناصر ذات قيمة أكبر من ‪18‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num = [45, 4, 9, 16, 25‬‬
‫;)‪const over18 = Habib_Num.filter(Husini‬‬
‫;‪return value > 18‬‬
‫}‬

‫‪:‬في ال✅ مثال ⇣⇣ أعاله‪ ،‬ال تستخدم وظيفة رد االتصال معلمات الفهرس والمصفوفة‪ ،‬لذا يمكن حذفها‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num = [45, 4, 9, 16, 25‬‬
‫;)‪const over18 = Habib_Num.filter(Husini‬‬
‫}‬
‫كيف التقليل والتصفية للمصفوفات‬

‫‪.‬بتشغيل دالة على كل عنصر من عناصر المصفوفة إلنتاج (تقليلها إلى) قيمة واحدة)(‪ reduce‬تقوم الطريقة‬
‫‪ reduceRight().‬من اليسار إلى اليمين في المصفوفة‪ .‬أنظر أيضا)(‪ reduce‬تعمل الطريقة‬
‫‪ .‬ال تقلل الطريقة من المصفوفة األصلي)(‪reduce‬‬
‫‪ :‬يجد هذا ال✅ مثال ⇣⇣ مجموع جميع األرقام في مصفوفة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num = [45, 4, 9, 16, 25‬‬
‫;)‪let sum = Habib_Num.reduce(Husini‬‬
‫{ )‪function Husini(total, value, index, array‬‬

‫;‪return total + value‬‬
‫}‬
‫اإلجمالي (القيمة األولية ‪ /‬القيمة التي تم إرجاعها مسبقًا)•‬

‫‪:‬ال يستخدم ال✅ مثال ⇣⇣ أعاله معلمات الفهرس والمصفوفة ‪ .‬يمكن إعادة كتابته إلى‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num = [45, 4, 9, 16, 25‬‬
‫;)‪let sum = Habib_Num.reduce(Husini‬‬
‫{ )‪function Husini(total, value‬‬

‫}‬
‫‪:‬قيمة أولية)(‪ reduce‬يمكن أن تقبل الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num = [45, 4, 9, 16, 25‬‬
‫;)‪let sum = Habib_Num.reduce(Husini, 100‬‬

‫}‬
‫ازاحة المصفوفة الى اليمين‬

‫‪.‬بتشغيل دالة على كل عنصر من عناصر المصفوفة إلنتاج (تقليلها إلى) قيمة واحدة)(‪ reduceRight‬تقوم الطريقة‬
‫‪ reduce().‬من اليمين إلى اليسار في المصفوفة‪ .‬أنظر أيضا)(‪ reduceRight‬األعمال‬
‫‪ .‬ال تقلل الطريقة من المصفوفة األصلي)(‪reduceRight‬‬
‫‪ :‬يجد هذا ال✅ مثال ⇣⇣ مجموع جميع األرقام في مصفوفة‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num = [45, 4, 9, 16, 25‬‬
‫;)‪let sum = Habib_Num.reduceRight(Husini‬‬
‫{ )‪function Husini(total, value, index, array‬‬

‫}‬
‫اإلجمالي (القيمة األولية ‪ /‬القيمة التي تم إرجاعها مسبقًا)•‬

‫‪:‬ال يستخدم ال✅ مثال ⇣⇣ أعاله معلمات الفهرس والمصفوفة ‪ .‬يمكن إعادة كتابته إلى‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num = [45, 4, 9, 16, 25‬‬
‫;)‪let sum = Habib_Num.reduceRight(Husini‬‬

‫}‬
‫تابع طرق المصفوفة‬

‫‪.‬مما إذا كانت جميع قيم المصفوفة تجتاز االختبار)(‪ every‬تتحقق الطريقة‬
‫‪:‬يتحقق هذا ال✅ مثال ⇣⇣ مما إذا كانت جميع قيم المصفوفة أكبر من ‪18‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num = [45, 4, 9, 16, 45, 4, 9, 16, 45, 4, 9, 16, 25‬‬
‫;)‪let All_Habib_Num_Over18 = Habib_Num.every(Husini‬‬
‫}‬

‫‪:‬عندما تستخدم دالة رد االتصال المعلمة األولى فقط (القيمة)‪ ،‬فيمكن حذف البرمترات األخرى‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num = [45, 4, 9, 16, 25‬‬
‫;)‪let All_Habib_Num_Over18 = Habib_Num.every(Husini‬‬
‫}‬
‫طريقة اخرى للبحث‬

‫‪.‬مما إذا كانت بعض قيم المصفوفة تجتاز االختبار)(‪ some‬تتحقق الطريقة‬
‫‪:‬يتحقق هذا ال✅ مثال ⇣⇣ مما إذا كانت بعض قيم المصفوفة أكبر من ‪18‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num = [45, 4, 9, 16, 25‬‬
‫;)‪let someOver18 = Habib_Num.some(Husini‬‬

‫}‬

‫كيف التحكم عن طريق الفهارس‬

‫‪.‬في مصفوفة عن قيمة عنصر وترجع موضعها)(‪ indexOf‬تبحث الطريقة‬
‫‪.‬مالحظة‪ :‬العنصر األول له الموضع ‪ ،0‬والعنصر الثاني له الموضع ‪ ،1‬وهكذا‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪ "Abu Habib":‬ابحث في مصفوفة عن العنصر‬
‫;]"‪const HaBiB= ["Abu Habib", "Osman", "Abu Habib", "Abu Zedan‬‬

‫;‪let position = HaBiB.indexOf("Abu Habib") + 1‬‬
‫بناء الجملة‬
‫)‪array.indexOf(item, start‬‬
‫‪item‬‬ ‫‪.‬مطلوب‪ .‬العنصر المطلوب البحث عنه‬

‫خياري‪ .‬من أين تبدأ البحث‪ .‬ستبدأ القيم السالبة عند الموضع المحدد‪ ،‬ويتم العد من النهاية‪ ،‬والبحث‬
‫‪start‬‬ ‫‪.‬حتى النهاية‬
‫‪.‬ترجع ‪ 1-‬إذا لم يتم العثور على العنصر)(‪Array.indexOf‬‬

‫موجودا أكثر من مرة‪ ،‬فإنه يُرجع موضع التواجد األول‬
‫ً‬ ‫‪.‬إذا كان العنصر‬
‫)( ‪ lastIndexOf‬مصفوفة جافاسكربت‬

‫‪.‬ولكنه يُرجع موضع آخر تواجد للعنصر المحدد ‪ Array.indexOf()،‬هو نفسه)(‪Array.lastIndexOf‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪ "Abu Habib":‬ابحث في مصفوفة عن العنصر‬
‫;]"‪const HaBiB= ["Abu Habib", "Osman", "Abu Habib", "Abu Zedan‬‬

‫;‪let position = HaBiB.lastIndexOf("Abu Habib") + 1‬‬
‫)‪array.lastIndexOf(item, start‬‬
‫‪item‬‬ ‫مطلوب‪ .‬العنصر المطلوب البحث عنه‬

‫‪start‬‬ ‫خياري‪ .‬من أين تبدأ البحث‪ .‬ستبدأ القيم السالبة عند الموضع المحدد من النهاية‪ ،‬وتبحث حتى البداية‬
‫طريقة اخرى للبحث‬

‫‪.‬قيمة عنصر المصفوفة األول الذي يمرر دالة اختبار)(‪ find‬تُرجع الطريقة‬
‫‪:‬يبحث هذا ال✅ مثال ⇣⇣ عن (يعيد قيمة) العنصر األول األكبر من ‪18‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num = [4, 9, 16, 25, 29‬‬
‫;)‪let first = Habib_Num.find(Husini‬‬

‫}‬

‫دعم المتصفح‬
‫‪).‬جافاسكربت ‪ ES6 (2015‬هي إحدى ميزات)(‪find‬‬
‫‪ Internet Explorer.‬غير مدعوم في)(‪find‬‬
‫دالة)( ‪findIndex‬‬
‫‪.‬بإرجاع فهرس عنصر المصفوفة األول الذي يمرر وظيفة االختبار)(‪ findIndex‬تقوم الطريقة‬
‫‪:‬يعثر هذا ال✅ مثال ⇣⇣ على فهرس العنصر األول األكبر من ‪18‬‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]‪const Habib_Num = [4, 9, 16, 25, 29‬‬
‫;)‪let first = Habib_Num.findIndex(Husini‬‬

‫}‬

‫‪).‬جافاسكربت ‪ ES6 (2015‬هي إحدى ميزات)(‪findIndex‬‬
‫‪ Internet Explorer.‬غير مدعوم في)(‪findIndex‬‬
‫)(‪Array.from‬‬
‫‪.‬بإرجاع كائن مصفوفة من أي كائن له خاصية الطول أو أي كائن قابل للتكرار)(‪ Array.from‬تقوم الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪ :‬إنشاء مصفوفة من نص‬
‫;)"‪Array.from("ABCDEFG‬‬
‫‪).‬جافاسكربت ‪ ES6 (2015‬هي إحدى ميزات)(‪from‬‬
‫‪ Internet Explorer.‬غير مدعوم في)(‪from‬‬
‫كيف الحصول على مفاتيح المصفوفة‬

‫‪.‬مع مفاتيح المصفوفة ‪ Array Iterator‬بإرجاع كائن)(‪ Array.keys‬تقوم الطريقة‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪:‬الذي يحتوي على مفاتيح المصفوفة ‪ Array Iterator،‬قم بإنشاء كائن‬

‫;)(‪const keys = HaBiB.keys‬‬
‫{ )‪for (let x of keys‬‬

‫;">‪text += x + "<br‬‬
‫}‬
‫‪).‬جافاسكربت ‪ ES6 (2015‬هي إحدى ميزات)(‪keys‬‬
‫‪ Internet Explorer.‬غير مدعوم في)(‪keys‬‬
‫إدخاالت المصفوفة‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪:‬أنشئ مكرر المصفوفة‪ ،‬ثم كرره على أزواج المفتاح‪/‬القيمة‬

‫;)(‪const f = HaBiB.entries‬‬
‫{ )‪for (let x of f‬‬

‫;‪document.getElementById("Habib").innerHTML += x‬‬
‫}‬
‫‪:‬مع أزواج المفتاح‪/‬القيمة ‪ Array Iterator‬بإرجاع كائن)(‪ entries‬تقوم الطريقة‬

‫]"موز" ‪[0،‬‬
‫]"برتقالي" ‪[1،‬‬
‫]"تفاحة" ‪[2،‬‬
‫]"مانجو" ‪[3،‬‬
‫‪ .‬ال تغير الطريقة المصفوفة األصلية)(‪entries‬‬
‫‪).‬جافاسكربت ‪ ES6 (2015‬هي إحدى ميزات)(‪entries‬‬
‫‪ Internet Explorer.‬غير مدعوم في)(‪entries‬‬
‫التتضمن فى المصفوفة‬
‫إلى المصفوفات‪ .‬يتيح لنا هذا التحقق من وجود عنصر في المصفوفة)(‪ ECMAScript 2016 Array.includes‬تم تقديم‬
‫‪ IndexOf).‬على عكس ‪ NaN،‬بما في ذلك(‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪HaBiB.includes("Abu Zedan"); // is true‬‬
‫)‪array.includes(search-item‬‬
‫‪ Array.indexOf().‬على عكس ‪ NaN.‬بالتحقق من قيم )(‪ Array.includes‬يسمح‬
‫‪Edge 12/13.‬غير مدعوم في و )(‪Array.includes‬‬

‫‪:‬إصدارات المتصفح األولى مع الدعم الكامل هي‬
‫‪ ECMAScript 2016.‬هي إحدى ميزات)(‪includes‬‬
‫استخدام كونست مع المصفوفة‬
‫)‪ (ES6‬إيكماسكربت ‪2015‬‬

‫‪: const.‬في عام ‪ ،2015‬قدمت جافاسكربت كلمة محجوزة جديدة مهمة‬
‫‪ const:‬لقد أصبح من الممارسات الشائعة اإلعالن عن المصفوفات باستخدام‬
‫مثال ✅‬ ‫⇣⇣‬
‫ال يمكن إعادة تعيينها‬

‫‪ const:‬ال يمكن إعادة تعيين مصفوفة تم اإلعالن عنه‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪HaBiB= ["Abu Bakr Al-Siddiq!!!", "Hamza", "Omar ibn Al-khattab"]; // ERROR‬‬
‫المصفوفات ليست ثوابت‬

‫‪.‬مضللة بعض الشيء‪ const‬الكلمة المحجوزة‬
‫مرجعا ثابتًا إلى مصفوفة‬
‫ً‬ ‫‪ .‬ال يحددمصفوفةا ثابتًا‪ .‬يحدد‬
‫‪.‬ولهذا السبب‪ ،‬ال يزال بإمكاننا تغيير عناصر المصفوفة الثابتة‬
‫يمكن إعادة تعيين العناصر‬

‫‪:‬يمكنك تغيير عناصر مصفوفة ثابتة‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪// You can create a constant array:‬‬
‫‪// You can change an element:‬‬

‫;"!!!‪HaBiB[0] = "Abu Bakr Al-Siddiq‬‬
‫‪// You can add an element:‬‬
‫;)"‪HaBiB.push("Omar ibn Al-khattab‬‬
‫‪.‬المحجوزة غير مدعومة في ‪ 10‬أو إصدار سابق‪ const‬الكلمة‬
‫‪:‬المحجوزة‪ const‬يحدد الجدول التالي إصدارات المتصفح األولى مع الدعم الكامل للكلمة‬
‫تم تعيينه عندما أعلن‬

‫‪:‬يجب تعيين قيمة لمتغيرات جافاسكربت عند اإلعالن عنها‪const‬‬
‫‪.‬المعنى‪ :‬يجب تهيئة المصفوفة التي تم اإلعالن عنها عند اإلعالن عنها‪const‬‬
‫‪:‬دون تهيئة المصفوفة خطًأ في بناء الجملة‪ const‬يعد االستخدام‬
‫مثال ✅‬ ‫⇣⇣‬
‫‪:‬هذا لن يعمل‬
‫;‪const HaBiB‬‬
‫;]"‪HaBiB= ["Habib", "Hamza", "Abu Habib Al-Husini‬‬
‫‪.‬يمكن تهيئة المصفوفات المعلنة في أي وقت‪var‬‬

‫أيضا استخدام المصفوفة قبل اإلعالن عنها‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]"‪HaBiB= ["Habib", "Hamza", "Abu Habib Al-Husini‬‬

‫;‪var HaBiB‬‬
‫نطاق كتلة كونست‬
‫‪ Block Scope .‬تحتوي على‪ const‬المصفوفة التي تم اإلعالن عنها‬
‫‪:‬المصفوفة المعلن عنها في كتلة ليست هي نفسها المصفوفة المعلنة خارج الكتلة‬
‫مثال ✅‬ ‫⇣⇣‬
‫"‪// Here HaBiB[0] is "Habib‬‬
‫{‬
‫;]"‪const HaBiB= ["Abu Bakr Al-Siddiq!!!", "Hamza", "Abu Habib Al-Husini‬‬
‫"!!!‪// Here HaBiB[0] is "Abu Bakr Al-Siddiq‬‬
‫}‬
‫‪:‬بـ ال تحتوي على نطاق كتلة‪ var‬المصفوفة التي تم اإلعالن عنها‬
‫مثال ✅‬ ‫⇣⇣‬
‫;]"‪var HaBiB= ["Habib", "Hamza", "Abu Habib Al-Husini‬‬
‫{‬
‫;]"‪var HaBiB= ["Abu Bakr Al-Siddiq!!!", "Hamza", "Abu Habib Al-Husini‬‬
‫}‬
‫للمذيد اقراء كتاب المرجع الكامل لجافا سكربت‬
‫إعادة تعريف المصفوفات‬

‫‪:‬في أي مكان في البرنامج‪ var‬يُسمح بإعادة اإلعالن عن مصفوفة تم اإلعالن عنها‬
✅ ‫مثال‬ ⇣⇣
var HaBiB= ["Hamza", "Abu Habib Al-Husini"]; // Allowed
var HaBiB= ["Abu Bakr Al-Siddiq!!!", "Abu Habib Al-Husini"]; // Allowed
HaBiB= ["Hamza", "Habib"]; // Allowed
‫ ال يُسمح بإعادة اإلعالن عن مصفوفة أو إعادة تعيينها‬const‫إلى نفس النطاق أو في نفس الكتلة‬:
✅ ‫مثال‬ ⇣⇣
const HaBiB= ["Hamza", "Abu Habib Al-Husini"]; // Not allowed
{
}
‫ ال يُسمح بإعادة اإلعالن عن مصفوفة موجودة أو إعادة تعيينها‬const، ‫ أو في نفس الكتلة‬،‫في نفس النطاق‬:
✅ ‫مثال‬ ⇣⇣
const HaBiB= ["Hamza", "Abu Habib Al-Husini"]; // Allowed
var HaBiB= ["Hamza", "Abu Habib Al-Husini"]; // Not allowed
HaBiB= ["Hamza", "Abu Habib Al-Husini"]; // Not allowed
{
var HaBiB= ["Hamza", "Abu Habib Al-Husini"]; // Not allowed
HaBiB= ["Hamza", "Abu Habib Al-Husini"]; // Not allowed
}
const‫ أو في كتلة أخرى‬،‫ في نطاق آخر‬، ‫يُسمح بإعادة تعريف مصفوفة بـ‬:
✅ ‫مثال‬ ⇣⇣
{
}
{
‫‪const HaBiB= ["Hamza", "Abu Habib Al-Husini"]; // Allowed‬‬
‫}‬
‫كتاب المرجع الكامل لجافاسكربت‬

‫للحصول على مرجع كامل لجميع الدوال فى جافا سكربت حمل مرجع جافاسكربت من موقع القافلة المهنية‬
‫التكملة فى الجزء الثانى‬
‫باذن اهلل تعالى‬

Kotobati - الكافى فى برمجة جافاسكربت الجزء الاول

Uploaded by

Copyright:

Available Formats

You might also like

Kotobati - الكافى فى برمجة جافاسكربت الجزء الاول

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Kotobati - الكافى فى برمجة جافاسكربت الجزء الاول

Uploaded by

Copyright:

Available Formats

‫‪8‬‬ ‫‪4‬‬

‫ابو حبيب الحسينى‬

‫مثال على هذا الكالم‬

‫او>‪ <body‬يمكن وضع الكود في‬ ‫‪.‬أو في كليهما ‪ HTML‬صفحة>‪<head‬‬

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

‫مقدمة قصيرة عن جافاسكربت‬

‫فوائد التعلم من خالل األمثلة‬

‫لتحديد محتوى صفحات الويب ‪1. HTML‬‬

‫لتحديد تخطيط صفحات الويب ‪2. CSS‬‬

‫ونشاء شروط لدخال البيانات بلجافاسكربت ‪3.‬‬

‫برمجة سلوك صفحات الويب والتحكم فى الخصائص‬

‫يغطي هذا الكتاب كل إصدار من جافاسكربت‪:‬ان شاء اهلل تعالى‬

‫كيف استخدام جافاسكربت فى تغير المحتوى‬

‫‪:‬تقبل جافاسكربت عالمات االقتباس المزدوجة والمفردة‬

‫;"‪document.getElementById("Habib").innerHTML = "Easy-to Abu Habib Al-Husini‬‬

‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬

‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬

‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬

‫كيف تغيير قيم الخصائص‬

‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬

‫كيف اخفاء العناصر‬

‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬

‫كيف اظهار العناصر المخفية‬

‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬

‫هل كنت تعلم؟‬

‫تماما‪ ،‬سواء من حيث المفهوم أو التصميم‬

‫‪.‬هو االسم الرسمي للغة ‪. ECMAScript‬هو االسم الرسمي للمعيار ‪ECMA-262‬‬

‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬

‫‪: <script type="text/javascript">.‬قد تستخدم أمثلة جافاسكربت القديمة سمة النوع‬

‫‪.‬سوف تتعلم المزيد عن الوظائف واألحداث في الفصول الالحقة‬

‫كيف اضافة بلوكات من اﻻكواد فى نفس الصفحة‬

‫‪:‬يتم استدعاء (استدعاء) الوظيفة عند النقر فوق الزر‬

‫>‪<h2>Abo Habib Al-Husini</h2‬‬

‫>‪<p id="Habib">Abo Habib Al-Husini</p‬‬

‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬

‫اكتب جافاسكربت داخل البودى واستدعيها من داخل‬

‫‪:‬يتم استدعاء (استدعاء) الوظيفة عند النقر فوق الزر‬

‫>‪<h2>Abo Habib Al-Husini</h2‬‬

‫>‪<p id="Habib">Abo Habib Al-Husini</p‬‬

‫>‪<button type="button" onclick="Husini()">Try it</button‬‬

‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬

‫احظر هذة الطريقة بطيئة فى التنفيذ‬

‫كتابة جافاسكربت فى ملف خارجى‬

‫‪: Habib_Script.js‬الملف الخارجي‬

‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬

‫‪.‬عالمات>‪ <script‬ال يمكن أن تحتوي الكود الخارجية على‬

‫مزايا جافاسكربت فى ملف خارجى‬

‫كامل (عنوان ويب كامل) ‪ URL‬مع عنوان•‬

‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬

‫‪ Habib_Script.js:‬يستخدم هذا ال✅ مثال ⇣⇣ مسار ملف لالرتباط بـ‬

‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬

‫‪ Habib_Script.js:‬ال يستخدم هذا ال✅ مثال ⇣⇣ أي مسار لالرتباط بـ‬

‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬

‫دوال تمكنك من عرض البيانات‬

‫‪HTML‬استخدام المحتوى الداخلي‬

<h1>Thank God The Lord Of Arabics</h1>

‫كتاب الكافى فى جافاسكربت الجزء االول ابو حبيب الحسينى‬

‫ يعد تغيير خاصية‬InternalHTML ‫ لعنصر‬HTML ‫ طريقة شائعة لعرض البيانات بتنسيق‬HTML.

‫كيف كتابة البيانات فى الصفحة‬