‫المحاضرة ‪11‬‬

‫مقدمة‪:‬‬
‫سنتعلم في هذه المحاضرة عدة أفكار في لغة ‪ Java Script‬مثل ‪ event‬وبعض الـ‪ methods‬التي‬
‫تساعدنا في البرمجة‪ ،‬وأيضا ً عن أنواع األخطاء‪ ،‬و ‪.strict mode‬‬
‫فكرة ‪ event‬و‪:target‬‬
‫‪ -‬ليكن لدينا زر في ‪ HTML‬له ‪ id‬تساوي ”‪ “myBtn‬على الشكل التالي‪:‬‬
‫>‪<button id="myBtn">Add</button‬‬
‫‪ -‬في ملف الـ‪ java script‬نريد أن نُفعل حدث ‪ click‬على هذا الزر‪ ،‬بحيث عندما اضغط عليه‪ ،‬يُشغل‬
‫تابع‪ ،‬عمل هذا التابع هي طباعة ‪:event.target‬‬
‫)'‪var mtBtn = document.getElementById('myBtn‬‬

‫)‪mtBtn.addEventListener('click', Code‬‬

‫{ )‪function Code(event‬‬
‫;)‪console.log(event.target‬‬
‫}‬

‫التابع ‪ Code‬لديه بارامتر "‪ "event‬حيث هذا البارامتر يمكن أن نسميه ما نشاء‪ ،‬مثل "‪ "e‬وغيرها‪.‬‬
‫وظيفة هذا التابع هي طباعة ‪ event.target‬في الـ‪.console‬‬
‫ما المقصود بعبارة ‪event.target‬؟‬
‫عبارة ‪ event.target‬في ‪ JavaScript‬تشير إلى العنصر الذي أطلق الحدث فعليًا (أي الذي تم‬
‫التفاعل معه)‪ ،‬وفي مثالنا‪ ،‬الزر ‪ Add‬المتمثل بالعنصر ‪ button‬هو الذي أطلق الحدث ‪.click‬‬

‫ما هو ‪event‬؟‬
‫عندما يُطلق حدث (مثل ‪ ،)click‬يقوم المتصفح تلقائيًا بتمرير كائن (‪ )object‬يُمثل هذا الحدث إلى‬
‫التابع‪ .‬هذا الكائن يُعرف بـ ‪( event‬أو أي اسم آخر أمرره إلى بارامتر التابع‪ ،‬لكن التسمية الشائعة هي‬
‫‪.)event‬‬
‫ما هو ‪event.target‬؟‬
‫هو العنصر ‪ HTML‬الذي تسبب في الحدث‪.‬‬

‫‪1‬‬
 ‫في مثالنا‪ ،‬عندما تضغط على الزر ‪ Add‬فإن الخرج سيكون‪:‬‬

‫الخرج هو عنصر الزر "‪ "button‬الذي تسبب بهذا الحدث‪.‬‬

‫مثال عملي‪ :‬لو أريد أن أطبع معرف هذا العنصر‪ ،‬أي أريد طباعة الـ‪ id‬الخاص بهذا الزر‪ ،‬سيصبح‬
‫الكود‪:‬‬
‫{ )‪function Code(event‬‬
‫;)‪console.log(event.target.id‬‬
‫}‬
‫بالتالي سيصبح الخرج في ‪ console‬بعد الضغط على الزر بالشكل التالي‪:‬‬

‫باختصار إن تعليمة ‪ event.target‬تعبر عن العنصر ككل‪ ،‬وهذه الفكرة سنستخدمها الحقا ً في‬
‫المشاريع‪.‬‬

‫‪2‬‬
 ‫فكرة ‪ client‬و ‪( offset‬استخدام عملي نادر)‪:‬‬
‫‪ .1‬فكرة ‪:clientX‬‬
‫‪ clientX‬هو خاصية موجودة داخل كائن الحدث (‪ )event‬في جافاسكريبت‪ ،‬وتُستخدم للحصول على‪:‬‬
‫المسافة األفقية (‪ )X‬لمؤشر الماوس من الحافة اليسرى لنافذة المتصفح (‪ ،)viewport‬عند حدوث حدث‬
‫معين (مثل ‪ click‬أو ‪.)mousemove‬‬
‫مثال‪:‬‬
‫كود ‪:HTML‬‬
‫>‪<button id="myBtn" style="margin: 120px; padding: 40px;">Add</button‬‬
‫كود ‪:JS‬‬
‫)'‪var mtBtn = document.getElementById('myBtn‬‬

‫)‪mtBtn.addEventListener('click', Code‬‬

‫{ )‪function Code(event‬‬
‫;)‪console.log(event.cleintX‬‬
‫}‬

‫ماذا يحدث عند النقر داخل الزر؟‬

‫عندما تضغط على الزر‪ ،‬يتم تشغيل التابع ‪ ،Code‬الذي يطبع ‪.event.clientX‬‬
‫‪ = event.clientX‬المسافة باألرقام بين الحافة اليسرى لنافذة المتصفح ومكان ضغطة الماوس األفقية‪.‬‬
‫أي أنه يقيس من حافة المتصفح إلى مكان الضغط داخل الزر‪.‬‬
‫مثال عملي‪:‬‬
‫لنفترض أن المتصفح بعرض ‪ 1000‬بكسل‪.‬‬
‫الزر لديه ‪ margin: 120px‬و ‪padding: 40px‬‬ ‫•‬

‫يعني أن الزر بعيد ‪ 120‬بكسل عن يسار الصفحة (بسبب المارجن)‬ ‫•‬

‫لو ضغطت داخل الزر‪ ،‬بعد ‪ 30‬بكسل من بدايته‪ ،‬فإن‪:‬‬ ‫•‬

‫‪( clientX ≈ 120 (margin) + 30‬داخل الزر) = ‪ 150‬بكسل تقريبًا‬

‫‪ clientX‬ال يهتم بالزر نفسه‪ ،‬بل يهتم بالمكان الذي ضغطت فيه داخل نافذة العرض (‪.)viewport‬‬

‫‪3‬‬
 ‫‪ .2‬فكرة ‪:clientY‬‬
‫‪ clientY‬هو خاصية داخل كائن الحدث ‪ event‬تُظهر‪:‬‬
‫كم يبعد مكان ضغطة الماوس (عموديًا) عن الحافة العلوية لنافذة المتصفح (‪.)viewport‬‬

‫تحليل المثال عمليًا بعد استبدال ‪ clientX‬بـ ‪:clientY‬‬

‫الزر فيه‪:‬‬
‫• ‪( margin: 120px‬يعني أن الزر نازل ‪ 120‬بكسل من أعلى الصفحة)‬
‫• ‪( padding: 40px‬يعني هناك مسافة ‪ 40‬بكسل داخلية قبل ظهور النص)‬

‫ماذا يحدث عند الضغط على الزر؟‬

‫افترض أنك ضغطت داخل الزر‪ ،‬في منتصفه عموديًا‪.‬‬
‫• الزر نفسه يبدأ تقريبًا من ‪ 120‬بكسل من األعلى (بسبب الـ ‪)margin‬‬
‫• إذا ضغطت في منتصف الزر تقريبًا‪ ،‬ستكون الضغطة في حدود‪:‬‬

‫تقريبا ً ‪( = 180px‬جزء من المحتوى) ‪clientY ≈ 120 (margin) + 40 (padding) + 20‬‬

‫الزر يحتوي على‪:‬‬

‫• ‪ ← margin: 120px‬يُبعد الزر نفسه عن أعلى الصفحة‪.‬‬

‫• ‪← padding: 40px‬يُضيف مساحة داخلية بين حد الزر ومحتواه (مثل النص "‪.)"Add‬‬

‫• محتوى الزر نفسه (الكلمة "‪ — )"Add‬له ارتفاع معين‪ ،‬لنفترض مثالً أنه حوالي ‪.px20‬‬

‫‪4‬‬
 ‫‪ .3‬فكرة ‪:offsetX‬‬
‫‪ offsetX‬هو خاصية ضمن كائن الحدث (‪ )event‬في ‪ ،JavaScript‬وتُستخدم لمعرفة‪:‬‬
‫كم يبعد مؤشر الماوس أفقيًا (‪ )X‬عن الحافة اليسرى للعنصر نفسه الذي تم عليه الحدث (مثل زر أو‬
‫صورة أو أي عنصر ‪.)HTML‬‬
‫المهم‪:‬‬
‫• يقيس داخل العنصر فقط‪ ،‬أي يبدأ العد من الحافة اليسرى للعنصر‪ ،‬وليس من نافذة المتصفح‪.‬‬
‫• إذا ضغطت في منتصف الزر ً‬
‫مثال‪ ،‬فـ ‪ offsetX‬سيكون قريبًا من نصف عرض الزر‪.‬‬

‫لنشرح عن نفس المثال السابق‪:‬‬

‫كود ‪:HTML‬‬
‫>‪<button id="myBtn" style="margin: 120px; padding: 40px;">Add</button‬‬
‫كود ‪:JS‬‬
‫)'‪var mtBtn = document.getElementById('myBtn‬‬

‫)‪mtBtn.addEventListener('click', Code‬‬

‫{ )‪function Code(event‬‬
‫;)‪console.log(event.offsetX‬‬
‫}‬

‫شرح ‪ offsetX‬في هذا السياق‪:‬‬

‫عندما تضغط بالماوس داخل الزر‪:‬‬
‫• ‪ offsetX‬يعطيك المسافة األفقية (من اليسار) من بداية الزر إلى مكان الضغط‪.‬‬
‫• ال يهتم بموضع الزر على الصفحة‪ ،‬وال يهتم بـ ‪ margin‬أو ‪.position‬‬
‫• فقط يقيس النقطة التي ضغطت فيها داخل الزر نفسه‬

‫كيف تُحسب؟‬
‫الزر فيه ‪ ،padding: 40px‬أي أن هناك ‪ px40‬فرا ً‬
‫غا داخليًا من كل طرف‪.‬‬ ‫◦‬
‫فإذا ضغطت داخل الزر عند بداية النص تقريبًا‪ ،‬ستكون‪( offsetX ≈ 40 :‬بسبب ‪)padding‬‬ ‫◦‬
‫وإذا ضغطت على اليمين أكثر داخل الزر‪ ،‬ستزيد القيمة‪.‬‬ ‫◦‬
‫وإذا ضغطت تما ًما على يسار الزر‪ ،‬ستكون‪offsetX ≈ 0 :‬‬ ‫◦‬

‫‪5‬‬
 ‫‪ .4‬فكرة ‪:offsetY‬‬
‫‪ offsetY‬هي خاصية في كائن الحدث (‪ )event‬تُعبر عن‪:‬‬
‫المسافة العمودية (من األعلى) من العنصر الذي تم النقر عليه إلى مكان الضغطة بالماوس داخل هذا‬
‫العنصر‪.‬‬

‫مثال عملي‬ ‫نقطة البداية (المصدر)‬ ‫ماذا تقيس؟‬ ‫الخاصية‬

‫المسافة من حافة المتصفح إلى‬ ‫من يسار نافذة المتصفح‬ ‫الموقع األفقي لمؤشر‬
‫‪clientX‬‬
‫مكان النقر أفقيًا‬ ‫)‪(viewport‬‬ ‫الماوس عند الحدث‬
‫المسافة من أعلى المتصفح إلى‬ ‫من أعلى نافذة المتصفح‬ ‫الموقع العمودي لمؤشر‬
‫‪clientY‬‬
‫مكان النقر عموديًا‬ ‫)‪(viewport‬‬ ‫الماوس عند الحدث‬
‫المسافة من يسار الزر إلى‬ ‫من يسار العنصر‬ ‫الموقع األفقي للضغط‬
‫‪offsetX‬‬
‫مكان الضغط داخله أفقيًا‬ ‫)‪(element‬‬ ‫داخل العنصر نفسه‬
‫المسافة من أعلى الزر إلى‬ ‫من أعلى العنصر‬ ‫الموقع العمودي للضغط‬
‫‪offsetY‬‬
‫مكان الضغط داخله عموديًا‬ ‫)‪(element‬‬ ‫داخل العنصر نفسه‬

‫‪6‬‬
 ‫دالة ‪:find‬‬
‫دالة ‪ find‬هي واحدة من دوال المصفوفات في لغة جافاسكريبت‪ ،‬وتُستخدم للبحث عن أول عنصر في‬
‫المصفوفة يحقق شر ً‬
‫طا معي ًنا تحدده‪.‬‬
‫كيفية عمل دالة ‪:find‬‬
‫▪ تأخذ دالة ‪ find‬تابعًا (‪ )Callback Function‬كمعامل‪.‬‬
‫▪ يتم تطبيق هذا التابع على كل عنصر داخل المصفوفة‪.‬‬
‫▪ تعيد أول عنصر يحقق الشرط (‪ )true‬الموجود في التابع‪.‬‬
‫▪ إذا لم يتم العثور على عنصر يحقق الشرط‪ ،‬تعيد القيمة ‪.undefined‬‬

‫صيغة االستخدام العامة‪:‬‬

‫{ )‪array.find(function(element, index, array‬‬
‫‪ false‬أو ‪ true‬الشرط الذي يعيد ‪//‬‬
‫;)}‬
‫حيث‪:‬‬
‫◦ ‪ :element‬العنصر الحالي في المصفوفة أثناء التكرار‪.‬‬
‫◦ ‪ :index‬رقم موقع العنصر داخل المصفوفة‪.‬‬
‫◦ ‪ :array‬المصفوفة األصلية التي نبحث فيها‪.‬‬
‫مثال عملي‪:‬‬
‫;]‪const numbers = [10, 20, 30, 40, 50‬‬

‫{ )‪const found = numbers.find(function(num‬‬

‫;‪return num > 25‬‬
‫;)}‬

‫النتيجة‪console.log(found); // 30 :‬‬
‫شرح المثال‪:‬‬
‫نبحث عن أول رقم أكبر من ‪ 25‬في المصفوفة‪.‬‬
‫الرقم ‪ 30‬هو أول عنصر يحقق هذا الشرط‪ ،‬لذا تُرجع الدالة القيمة ‪.30‬‬

‫‪7‬‬
 ‫مالحظة‪:‬‬
‫يمكن كتابة التابع )‪ (Callback‬باستخدام دوال السهم )‪ (Arrow Functions‬لتقليل الكود‪،‬‬ ‫•‬

‫مثل‪:‬‬
‫;]‪const numbers = [10, 20, 30, 40, 50‬‬
‫;)‪const found = numbers.find(num => num > 25‬‬
‫مثال آخر‪ :‬بفرض لدينا المصفوفة التالية‪:‬‬
‫;]} "‪var arr = [{ id: "a" }, { id: "b" }, { id: "c" }, { id: "d‬‬

‫نريد تطبيق دالة ‪ find‬بحيث أبحث عن العنصر الذي لهُ ‪ id‬تساوي ‪:b‬‬
‫{ >= )‪const result = arr.find((item‬‬
‫'‪return item.id === 'b‬‬
‫)}‬
‫;)‪console.log(result‬‬
‫بما أن العنصر موجود في المصفوفة بالتالي يكون الخرج‪:‬‬

‫مالحظة‪ :‬الدالة ‪ find‬تبحث عن أول عنصر يحقق الشرط المطلوب‪ ،‬وعندما تجد هذا العنصر‪ ،‬تتوقف‬
‫عن البحث في باقي المصفوفة‪.‬‬

‫‪ -‬الدالة ‪:findIndex‬‬
‫نفس مبدأ عمل الدالة ‪ ،find‬لكن هذه الدالة تقوم بإرجاع رقم الـ‪ index‬الخاص بالعنصر‬
‫مثال‪:‬‬
‫;]} "‪var arr = [{ id: "a" }, { id: "b" }, { id: "c" }, { id: "d‬‬

‫{ >= )‪const result = arr.findIndex((item‬‬

‫'‪return item.id === 'b‬‬
‫)}‬

‫‪console.log(result); //1‬‬

‫‪8‬‬
 ‫نالحظ أن رقم أول عنصر يحقق الشرط يساوي ‪ ،1‬بالتالي الخرج ‪1‬‬

‫دالة ‪:sort‬‬
‫دالة ‪ sort‬هي دالة مدمجة في جافاسكريبت تُستخدم لترتيب عناصر المصفوفة بترتيب معين‪.‬‬

‫كيف تعمل دالة ‪:sort‬‬

‫◦ تقوم ‪ sort‬بترتيب عناصر المصفوفة في مكانها (‪ ،)in-place‬أي أنها تعدل المصفوفة األصلية‪.‬‬
‫◦ بشكل افتراضي‪ ،‬تقوم بترتيب العناصر كنصوص (‪ )strings‬بترتيب أبجدي تصاعدي‪.‬‬
‫◦ يمكن تخصيص الترتيب باستخدام تابع مقارنة (‪.)compare function‬‬

‫صيغة االستخدام العامة‪:‬‬

‫;)]‪array.sort([compareFunction‬‬

‫حيث‪:‬‬
‫◦ ‪( compareFunction‬اختياري)‪ :‬تابع يحدد كيفية مقارنة عنصرين‪.‬‬
‫◦ إذا لم يتم تمرير ‪ ،compareFunction‬يتم ترتيب العناصر كنصوص‪.‬‬
‫مثال ‪ :1‬ترتيب أرقام بدون تابع مقارنة‬
‫;]‪const numbers = [40, 100, 1, 5, 25, 10‬‬

‫;)(‪numbers.sort‬‬

‫;)‪console.log(numbers‬‬
‫الخرج‪:‬‬

‫‪9‬‬
 ‫لماذا يظهر الخرج بهذه الطريقة؟‬
‫السبب في ظهور النتيجة بهذا الشكل هو أن دالة )(‪ sort‬بدون تابع مقارنة ترتب العناصر كنصوص‬
‫(‪ )Strings‬وليس كأرقام‪.‬‬
‫شرح السبب‪:‬‬
‫◦ عند استدعاء ()‪ numbers.sort‬بدون تحديد دالة مقارنة‪ ،‬يقوم جافاسكريبت بتحويل كل عنصر‬
‫إلى نص (‪.)string‬‬
‫◦ ثم يقوم بترتيب هذه النصوص حسب الترتيب األبجدي (‪.)lexicographical order‬‬
‫◦ لذلك‪ ،‬األرقام تُرتب بنا ًء على أول حرف في النص ثم الثاني وهكذا‪.‬‬

‫كيف يتم الترتيب هنا؟‬

‫◦ "‪ "1‬يأتي أوالً ألنه يبدأ بـ"‪."1‬‬

‫◦ "‪ "10‬يأتي بعد "‪ "1‬ألن "‪ "1‬متساوي ثم يقارن الحرف الثاني "‪."0‬‬

‫◦ "‪ "100‬يأتي بعد "‪ "10‬بنفس الطريقة‪.‬‬

‫◦ ثم "‪ "25‬ألن "‪ "2‬تأتي بعد "‪."1‬‬

‫◦ ثم "‪ "40‬ألن "‪ "4‬تأتي بعد "‪."2‬‬

‫وأخيرا "‪ "5‬ألن "‪ "5‬تأتي بعد "‪."4‬‬

‫ً‬ ‫◦‬

‫بالتالي‪ ،‬الترتيب األبجدي هو‪:‬‬

‫"‪"1" < "10" < "100" < "25" < "40" < "5‬‬
‫مثال ‪ :2‬ترتيب أرقام باستخدام تابع مقارنة‪:‬‬
‫;]‪const numbers = [40, 100, 1, 5, 25, 10‬‬

‫{ )‪numbers.sort(function(a, b‬‬
‫;‪return a - b‬‬
‫;)}‬

‫;)‪console.log(numbers‬‬

‫‪10‬‬
 ‫الخرج سيكون‪:‬‬

‫كيف يعمل تابع المقارنة؟‬

‫)‪ compareFunction(a, b‬يجب أن تُرجع‪:‬‬
‫◦ قيمة سالبة إذا كان ‪ a‬يجب أن يأتي قبل ‪b‬‬
‫◦ قيمة صفر إذا كان ‪ a‬و ‪ b‬متساويان‬
‫◦ قيمة موجبة إذا كان ‪ a‬يجب أن يأتي بعد ‪b‬‬

‫بالنسبة للمصفوفة ;]‪numbers = [40, 100, 1, 5, 25, 10‬‬

‫النتيجة‬ ‫‪a-b‬‬ ‫‪b‬‬ ‫‪a‬‬

‫‪ 40‬قبل ‪100‬‬ ‫‪-60‬‬ ‫‪100‬‬ ‫‪40‬‬

‫‪ 100‬بعد ‪ ← 1‬تبديل‬ ‫‪99‬‬ ‫‪1‬‬ ‫‪100‬‬

‫‪ 40‬بعد ‪ ← 1‬تبديل‬ ‫‪39‬‬ ‫‪1‬‬ ‫‪40‬‬

‫‪ 100‬بعد ‪ ← 5‬تبديل‬ ‫‪95‬‬ ‫‪5‬‬ ‫‪100‬‬

‫‪ 40‬بعد ‪ ← 5‬تبديل‬ ‫‪35‬‬ ‫‪5‬‬ ‫‪40‬‬

‫‪ 100‬بعد ‪ ← 25‬تبديل‬ ‫‪75‬‬ ‫‪25‬‬ ‫‪100‬‬

‫‪ 40‬بعد ‪ ← 25‬تبديل‬ ‫‪15‬‬ ‫‪25‬‬ ‫‪40‬‬

‫‪ 100‬بعد ‪ ← 10‬تبديل‬ ‫‪90‬‬ ‫‪10‬‬ ‫‪100‬‬

‫‪ 40‬بعد ‪ ← 10‬تبديل‬ ‫‪30‬‬ ‫‪10‬‬ ‫‪40‬‬

‫‪11‬‬
 :)‫ ترتيب المنتجات حسب السعر (من األرخص إلى األغلى‬:‫مثال‬
:)‫البيانات (مصفوفة من المنتجات‬
const products = [
{ name: "Keyboard", price: 250 },
{ name: "Monitor", price: 1200 },
{ name: "Mouse", price: 150 },
{ name: "Laptop", price: 3500 }
];

:)(sort ‫الحل باستخدام‬

products.sort(function(a, b) {
return a.price - b.price;
});
:)Arrow Function( ‫أو باستخدام دالة سهم‬
products.sort((a, b) => a.price - b.price);

:‫الطباعة‬
console.log(products);

:‫النتيجة‬

12
 ‫كيف يعمل الترتيب خطوة بخطوة؟‬
‫المرحلة األولى‪ :‬مقارنة أول عنصرين‪:‬‬
‫◦ ‪)250( a = Keyboard‬‬
‫◦ ‪)1200( b = Monitor‬‬
‫‪950- = 1200 - 250‬‬
‫النتيجة‪ :‬ال يتغير الترتيب‪ Keyboard ،‬يبقى قبل ‪.Monitor‬‬

‫المرحلة الثانية‪:‬‬
‫◦ ‪)1200( a = Monitor‬‬
‫◦ ‪)150( b = Mouse‬‬
‫‪1050 = 150 - 1200‬‬
‫النتيجة‪ :‬يتم تبديل الموضع ← ‪ Mouse‬يأتي قبل ‪Monitor‬‬
‫الترتيب المؤقت اآلن‪:‬‬
‫]‪[Keyboard, Mouse, Monitor, Laptop‬‬

‫المرحلة الثالثة‪:‬‬
‫◦ ‪)1200( a = Monitor‬‬
‫◦ ‪)3500( b = Laptop‬‬
‫‪2300- = 3500 - 1200‬‬
‫النتيجة‪ :‬ال تغيير في الترتيب‪.‬‬

‫المرحلة الرابعة‪:‬‬
‫◦ ‪)250( a = Keyboard‬‬
‫◦ ‪)150( b = Mouse‬‬
‫‪100 = 150 - 250‬‬
‫‪ Mouse‬يجب أن يأتي قبل ‪ ← Keyboard‬تبديل الموضع‬

‫‪13‬‬
 ‫إذا أردت الترتيب تنازليًا (من األغلى إلى األرخص)‪ :‬فقط بدل ترتيب الطرح‪:‬‬
‫;)‪products.sort((a, b) => b.price - a.price‬‬

‫أنواع األخطاء في ‪:Java Script‬‬

‫في‪ ، JavaScript‬هناك أنواع مختلفة من األخطاء )‪ (Errors‬التي قد تحدث أثناء كتابة أو تنفيذ الكود‪.‬‬
‫فهم هذه األنواع يساعدك في تشخيص المشكالت بدقة وتحسين تجربة التطوير‪.‬‬
‫‪:SyntaxError .1‬‬
‫يعني أن الكود مكتوب بطريقة غير مفهومة للمترجم‪.‬‬
‫"‪console.log("Hello‬‬ ‫قوس مفقود ← ‪//‬‬
‫‪:ReferenceError .2‬‬
‫يحدث عند استدعاء متغير غير معرف‪:‬‬
‫;)‪console.log(x‬‬ ‫غير معرف ‪// x‬‬

‫‪:TypeError .3‬‬
‫محاولة تنفيذ عملية على نوع غير مناسب‪:‬‬
‫;‪const num = 5‬‬
‫محاولة استدعاء رقم كدالة ‪num(); //‬‬

‫‪14‬‬
 ‫‪:RangeError .4‬‬
‫عند تجاوز حدود المقبول في عمليات معينة‪:‬‬
‫;)‪const arr = new Array(1e309‬‬ ‫حجم غير منطقي ‪//‬‬

‫التعامل مع األخطاء‪:‬‬
‫الكتلة ‪ try...catch‬في ‪ JavaScript‬تُستخدم للتعامل مع األخطاء (‪ )Errors‬التي قد تحدث أثناء تنفيذ‬
‫الكود‪ً ،‬‬
‫بدال من أن يتوقف البرنامج بالكامل عند حدوث خطأ‪.‬‬

‫الفكرة ببساطة‪:‬‬
‫‪ :try‬تضع فيه الكود الذي "قد" يحتوي على خطأ‪.‬‬ ‫◦‬
‫‪ :catch‬تكتب فيه ما تريد أن يحدث إذا وقع خطأ داخل ‪.try‬‬ ‫◦‬

‫الصيغة العامة‪:‬‬
‫{ ‪try‬‬
‫كود قد ينتج عنه خطأ ✅ ‪//‬‬
‫{ )‪} catch (error‬‬
‫التعامل مع الخطأ هنا ❌ ‪//‬‬
‫}‬

‫‪15‬‬
 ‫مثال عملي‪:‬‬
‫{ ‪try‬‬
‫غير معرف ‪let result = 10 / y; // y‬‬
‫;)‪console.log(result‬‬
‫{ )‪} catch (err‬‬
‫يتم تنفيذ هذا ← ‪:", err.message); //‬حدث خطأ"(‪console.log‬‬
‫}‬

‫في هذا المثال‪:‬‬

‫◦ ‪ JavaScript‬تحاول تنفيذ ‪ y / 10‬داخل ‪.try‬‬
‫◦ يحدث ‪ ReferanceError‬ألن ‪ y‬غير معرف‬
‫◦ يتم تجاوز الخطأ بأمان وتنفيذ الكود داخل ‪.catch‬‬

‫في الخرج‪:‬‬

‫‪16‬‬
 ‫ما هو ‪Strict Mode‬؟‬
‫‪ Strict Mode‬هو وضع خاص في ‪ JavaScript‬يجعل المترجم أكثر صرامة في تحليل الكود‪ ،‬ويمنع‬
‫بعض األخطاء الشائعة أو الممارسات السيئة‪.‬‬
‫كيف أفعّله؟‬
‫ببساطة‪ ،‬تضيف ;"‪ "use strict‬في أعلى الكود‪:‬‬
‫;"‪"use strict‬‬

‫;‪let x = 5‬‬
‫أو داخل دالة فقط‪:‬‬
‫{ )(‪function test‬‬
‫;"‪"use strict‬‬
‫الكود هنا يعمل بصرامة ‪//‬‬
‫}‬

‫مثال عملي‪:‬‬
‫بدون ‪:Strict Mode‬‬
‫تعرف ‪x = 10; //‬‬
‫‪ x‬يعمل‪ ،‬حتى لو لم ّ‬
‫‪console.log(x); //10‬‬

‫في الكود السابق‪ ،‬يعمل المتحول ‪ x‬حتى لو لم نستخدم الكلمات المحجوزة ‪ var‬أو ‪ let‬أو ‪const‬؛ ألن‬
‫لغة جافا سكريبت ليست غبية لهذا الدرجة‪.‬‬
‫مع ‪:Strict Mode‬‬
‫;"‪"use strict‬‬

‫;‪x = 10‬‬ ‫‪// ❌ ReferenceError: x is not defined‬‬

‫هنا لن يعمل ‪ x‬بدون الكلمات المحجوزة‪ ،‬وسيظهر الخطأ ‪ ReferenceError‬في ‪ ،console‬وبالتالي‬
‫‪ Strict Mode‬يُحب أن يكون كل شيء على أصوله ‪.‬‬
‫لماذا أستخدم ‪Strict Mode‬؟‬
‫• يمنع األخطاء الغبية (مثل نسيان ‪.)let‬‬
‫• يجعل الكود أسهل للفهم والصيانة‪.‬‬
‫• يساعد في جعل ‪ JavaScript‬تعمل بشكل أقرب للمعايير الحديثة‪.‬‬
‫• يمهد الطريق لتشغيل الكود في بيئات صارمة أو متقدمة‪.‬‬
‫‪17‬‬
 .strict mode ‫ أيضا ً ال يمكن حذف المتحول بعد استخدام‬-
:‫مثال‬
:Strict Mode ‫بدون‬
var x = 70
delete x //✅

:Strict Mode ‫مع‬

'use strict';
var y = 10
delete y //❌ Uncaught SyntaxError: Delete of an unqualified identifier in strict mode.

:duplicated parameter ‫مثال عن‬

:‫ليكن لدينا التابع التالي‬
function code(x, x) {
console.log(x + x);
}
code(20, 50)

‫) إلى‬50( ‫ في هذه الحالة سيتم إسناد القيمة الثانية التي هي‬،‫ بارامتر بنفس االسم‬2 ‫هذا التابع لديه‬
.100 console‫ وسيطبع في الـ‬،‫البارامترين‬
:Strict Mode ‫أما عندما نستخدم‬
'use strict';
function code(x, x) {
console.log(x + x);
}
code(20, 50)

:‫يصبح الخرج كما يلي‬

‫انتهت المحاضرة‬
18