♀️ 📪 🍠 دليل جافا سكريبت الجزء 7: الوضع الصارم ، هذه الكلمة الرئيسية ، الأحداث ، الوحدات ، الرياضيات 📐 🤞 🏌️

اليوم ، في الجزء السابع من ترجمة دليل جافا سكريبت ، سنتحدث عن تنفيذ التعليمات البرمجية في الوضع الصارم ، وعن ميزات هذه الكلمة الرئيسية ، وعن الأحداث ، وعن الوحدات ، وعن العمليات الحسابية الرياضية. هنا سنتناول مواضيع العمل مع المؤقتات والبرمجة غير المتزامنة.

→ الجزء 1: البرنامج الأول ، وميزات اللغة والمعايير
→ الجزء 2: نمط الرمز وهيكل البرنامج
→ الجزء 3: المتغيرات ، أنواع البيانات ، التعبيرات ، الأشياء
→ الجزء 4: الميزات
→ الجزء 5: المصفوفات والحلقات
→ الجزء 6: استثناءات ، فواصل منقوطة ، حرفي أحرف البدل
→ الجزء 7: الوضع الصارم ، هذه الكلمة الأساسية ، والأحداث ، والوحدات النمطية ، والحسابات الرياضية
→ الجزء 8: نظرة عامة على ميزات ES6
→ الجزء 9: نظرة عامة على معايير ES7 و ES8 و ES9

وضع صارم

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

mode تمكين وضع صارم

من أجل استخدام الوضع الصارم في بعض التعليمات البرمجية ، يجب تمكينه بشكل صريح. أي أننا لا نتحدث عن حقيقة أن هذا الوضع يستخدم افتراضيًا. مثل هذا النهج من شأنه أن يعطل عمل عدد لا يحصى من البرامج القائمة على أساس آليات اللغة التي كانت موجودة منذ البداية ، منذ عام 1996. في الواقع ، تهدف الجهود الكبيرة التي يبذلها أولئك الذين يطورون معايير جافا سكريبت بشكل خاص إلى ضمان التوافق ، بحيث يمكن تنفيذ التعليمات البرمجية المكتوبة استنادًا إلى الإصدارات القديمة من المعايير على محركات JS اليوم. يمكن اعتبار هذا النهج أحد مفاتيح نجاح جافا سكريبت كلغة لتطوير الويب.

من أجل تمكين الوضع الصارم ، يتم استخدام توجيه خاص يشبه هذا.

'use strict'

التوجيه المكتوب في شكل "use strict" ونفس التوجيه الذي يؤدي بعده الفاصلة المنقوطة ( 'use strict'; و "use strict"; ) إلى نفس التأثير. هذا التوجيه (تمامًا مثل هذا ، مع علامات الاقتباس) ، بحيث يتم تنفيذ جميع التعليمات البرمجية في ملف معين في وضع صارم ، في بداية هذا الملف.

 'use strict' const name = 'Flavio' const hello = () => 'hey' //...

يمكن تمكين الوضع الصارم على مستوى وظيفة منفصلة. للقيام بذلك ، يجب وضع التوجيه المقابل في بداية رمز نص الوظيفة.

 function hello() { 'use strict' return 'hey' }

قد يكون هذا مفيدًا إذا كان الوضع الصارم يحتاج إلى استخدام في قاعدة التعليمات البرمجية الحالية وفي الوقت نفسه تشغيله على مستوى الملف ليس عمليًا بسبب ضيق الوقت للاختبار الشامل للرمز لهذا الملف بأكمله.

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

فكر في بعض ميزات الوضع الصارم.

▍ مكافحة التهيئة العشوائية للمتغيرات العالمية

لقد قلنا بالفعل أنه إذا قمت عن طريق الخطأ بتعيين قيمة معينة لمتغير غير معلن ، حتى إذا قمت بذلك في رمز الوظيفة ، فسيتم جعل هذا المتغير عامًا بشكل افتراضي (ينتمي إلى الكائن العام). هذا يمكن أن يؤدي إلى مفاجآت.

على سبيل المثال ، الكود التالي ينشئ مثل هذا المتغير.

 ;(function() { variable = 'hey' })()

سيكون variable متوفرا في النطاق العالمي بعد تنفيذ IIFE.

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

 ;(function() { 'use strict' variable = 'hey' })()

rors الأخطاء التي تحدث أثناء عمليات التعيين

لا تقوم JavaScript ، في الوضع العادي ، بالإبلاغ عن أي أخطاء تحدث أثناء عمليات التعيين.

على سبيل المثال ، في JS هناك قيمة غير محددة ، وهي إحدى القيم البدائية للغة ويتم تمثيلها بخاصية كائن عالمي undefined . في JS العادي ، مثل هذا الأمر ممكن تمامًا.

 undefined = 1

يبدو أن كتابة وحدة لمتغير معين بالاسم undefined ، ولكنها في الواقع محاولة لكتابة قيمة جديدة لخاصية كائن عالمي ، والتي ، بالمناسبة ، وفقًا للمعيار ، لا يمكن استبدالها. في الوضع العادي ، على الرغم من أن مثل هذا الأمر ممكن ، إلا أنه لن يؤدي إلى أي شيء - أي ، لن يتم تغيير القيمة undefined ، ولن تظهر رسالة خطأ. في الوضع الصارم ، سيؤدي هذا إلى حدوث خطأ. من أجل رؤية رسالة الخطأ هذه ، وفي نفس الوقت تأكد من عدم تجاوز القيمة undefined في الوضع العادي ، جرب الرمز التالي في متصفح أو في Node.js.

 undefined = 1 console.log('This is '+undefined) ;(() => { 'use strict' undefined = 1 })()

كما أن نفس السلوك للنظام مميز عند العمل مع كيانات مثل NaN Infinity و NaN ، وكذلك مع كيانات أخرى مماثلة. يسمح لك الوضع الصارم بتجنب كل هذا.

في JavaScript ، يمكنك تعيين خصائص الكائنات باستخدام أسلوب Object.defineProperty () . على وجه الخصوص ، باستخدام هذه الطريقة ، يمكنك تعيين خصائص لا يمكن تغييرها.

 const car = {} Object.defineProperty(car, 'color', {  value: 'blue',  writable: false }) console.log(car.color) car.color = 'yellow' console.log(car.color)

لاحظ السمة writable: false المستخدمة عند تعيين خاصية color .

لن يؤدي الكود أعلاه ، الذي تم تنفيذه في الوضع العادي ، إلى تغيير في خاصية كائن color ، ولا إلى إخراج خطأ. ستؤدي محاولة تغيير هذه الخاصية في الوضع الصارم إلى حدوث خطأ.

 ;(() => { 'use strict' car.color = 'red' })()

وينطبق نفس الشيء على getters. سيتم تنفيذ هذا الرمز ، ولكن دون جدوى.

 const car = { get color() {   return 'blue' } } console.log(car.color) car.color = 'red' console.log(car.color)

وستؤدي محاولة القيام بنفس الشيء في الوضع الصارم إلى حدوث خطأ في الإبلاغ عن محاولة تعيين خاصية كائن لا يحتوي إلا على معلم.

 ;(() => { 'use strict' car.color = 'yellow' } )()

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

 const car = { color: 'blue' } Object.preventExtensions(car) console.log(car.model) car.model = 'Fiesta' console.log(car.model)

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

 ;(() => { 'use strict' car.owner = 'Flavio' } )()

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

 let one = 1 one.prop = 2 console.log(one.prop)

سيؤدي الشيء نفسه في الوضع الصارم إلى ظهور رسالة خطأ تشير إلى أنه لا يمكن إنشاء خاصية prop على الرقم 1 . بطريقة مماثلة ، يتصرف النظام عند العمل مع أنواع البيانات البدائية الأخرى.

▍ أخطاء حذف الكيان

في الوضع العادي ، إذا حاولت الحذف ، باستخدام عامل الحذف ، خاصية كائن لا يمكن حذفها ، فإن delete ببساطة false وسيفشل كل شيء بصمت.

 delete Object.prototype

في الوضع الصارم ، سيتم إنشاء خطأ هنا.

arg وسيطات الدالة التي تحمل الاسم نفسه

يمكن أن تحتوي الوظائف على معلمات بنفس الاسم ، وهذا لا يسبب أخطاء (على الرغم من أن هذا يبدو كخطأ من الشخص الذي أنشأ مثل هذه الوظيفة).

 ;(function(a, a, b) { console.log(a, b) })(1, 2, 3) //2 3

يعرض هذا الرمز عادة 2 3 في وحدة التحكم. في الوضع الصارم ، سيؤدي هذا إلى حدوث خطأ.

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

values القيم الثمانية

في JavaScript العادي ، يمكنك استخدام قيم ثمانية بإضافة 0 إلى البداية.

 ;(() => { console.log(010) })() //8

هنا ، سوف يدخل التمثيل العشري للرقم الثماني 10 ، أي 8 إلى وحدة التحكم. يمكن وضع هذا 0 قبل الرقم بشكل عشوائي. في الوضع الصارم ، لا يمكنك العمل مع الأرقام الثمانية المحددة في هذا التنسيق. ولكن إذا كنت بحاجة إلى استخدام الوضع الصارم والعمل مع الأرقام الثمانية ، فيمكنك 0oXX بتنسيق 0oXX . سيخرج الرمز التالي أيضًا 8 .

 ;(() => { 'use strict' console.log(0o10) })() //8

perOperator مع

لا يُسمح بعبارة with ، التي يمكن أن تؤدي إلى الارتباك ، في الوضع الصارم.
لا يقتصر تغيير سلوك الشفرة في الوضع الصارم على تلك التي ناقشناها أعلاه. على وجه الخصوص ، في هذا الوضع ، تتصرف هذه الكلمة الرئيسية بشكل مختلف ، والتي واجهناها بالفعل ، والتي سنتحدث عنها بمزيد من التفاصيل الآن.

ميزات هذه الكلمة الرئيسية

تتيح لك this ، أو سياق التنفيذ ، وصف البيئة التي يتم فيها تنفيذ رمز JS. يعتمد معناها على مكان استخدامه وعلى ما إذا كان الوضع الصارم ممكّنًا أم لا.

word الكلمات الرئيسية في وضع صارم

في الوضع الصارم ، لا يتم تحويل this القيمة التي تم تمريرها إلى الوظيفة إلى الكائن. لا يتطلب هذا التحويل موارد فحسب ، بل يمنح الوظائف أيضًا الوصول إلى الكائن العام إذا تم استدعاؤها this المجموعة إلى undefined أو null . هذا السلوك يعني أن الوظيفة قد تحصل على وصول غير مصرح به إلى الكائن العام. في الوضع الصارم ، لا يتم تحويل this تمريرها إلى الدالة. من أجل رؤية الفرق بين سلوك this في الوظائف في أوضاع مختلفة ، جرب هذا الرمز باستخدام التوجيه 'use strict' وبدونه.

 ;(function() { console.log(this) })()

▍ هذه الكلمة في أساليب الكائن

الطريقة هي وظيفة يتم الرجوع إليها في خاصية الكائن. تشير this في هذه الوظيفة إلى هذا الكائن. يمكن توضيح هذا البيان بالمثال التالي.

 const car = { maker: 'Ford', model: 'Fiesta', drive() {   console.log(`Driving a ${this.maker} ${this.model} car!`) } } car.drive() //Driving a Ford Fiesta car!

في هذه الحالة ، نستخدم الوظيفة المعتادة (وليس السهم - وهذا مهم) ، وهي الكلمة الأساسية المستخدمة التي يتم ربطها تلقائيًا بالكائن الذي يحتوي على هذه الوظيفة.

لاحظ أن الطريقة المذكورة أعلاه لتعريف طريقة كائن مماثلة لتلك:

 const car = { maker: 'Ford', model: 'Fiesta', drive: function() {   console.log(`Driving a ${this.maker} ${this.model} car!`) } }

يمكن أيضًا ملاحظة نفس سلوك this في طريقة كائن باستخدام البناء التالي.

 const car = { maker: 'Ford', model: 'Fiesta' } car.drive = function() { console.log(`Driving a ${this.maker} ${this.model} car!`) } car.drive() //Driving a Ford Fiesta car!

word الكلمات الرئيسية هذا ووظائف السهم

دعونا نحاول إعادة كتابة المثال أعلاه باستخدام طريقة السهم كوظيفة كائن.

 const car = { maker: 'Ford', model: 'Fiesta', drive: () => {   console.log(`Driving a ${this.maker} ${this.model} car!`) } } car.drive() //Driving a undefined undefined car!

كما ترى ، هنا ، بدلاً من أسماء الشركة المصنعة للسيارة وطرازها ، يتم عرض قيم undefined . والحقيقة ، كما قلنا من قبل ، أن this في وظيفة السهم يحتوي على رابط إلى السياق الذي يتضمن الوظيفة.

لا يمكن ربط هذا السهم بوظيفة السهم ، ولكن يمكنك ذلك

▍تجليد هذا

جافا سكريبت لديها مفهوم مثل this الربط. يمكنك القيام بذلك بعدة طرق. على سبيل المثال ، عند تعريف وظيفة ، يمكنك ربط هذه الكلمة الرئيسية بكائن باستخدام طريقة bind() .

 const car = { maker: 'Ford', model: 'Fiesta' } const drive = function() { console.log(`Driving a ${this.maker} ${this.model} car!`) }.bind(car) drive() //Driving a Ford Fiesta car!

باستخدام نفس الطريقة ، يمكنك ربط كائن آخر بطريقة كائن واحد ، مثل this .

 const car = { maker: 'Ford', model: 'Fiesta', drive() {   console.log(`Driving a ${this.maker} ${this.model} car!`) } } const anotherCar = { maker: 'Audi', model: 'A4' } car.drive.bind(anotherCar)() //Driving a Audi A4 car!

يمكن أيضًا تنظيم هذا الربط في مرحلة استدعاء الوظيفة باستخدام أساليب call() apply() .

 const car = { maker: 'Ford', model: 'Fiesta' } const drive = function(kmh) { console.log(`Driving a ${this.maker} ${this.model} car at ${kmh} km/h!`) } drive.call(car, 100) //Driving a Ford Fiesta car at 100 km/h! drive.apply(car, [100]) //Driving a Ford Fiesta car at 100 km/h!

this مرتبط بما يتم تمريره إلى هذه الأساليب باعتبارها الحجة الأولى. الفرق بين هذه الأساليب هو أن apply() ، حيث أن الوسيطة الثانية ، تأخذ مصفوفة مع الوسيطات التي تم تمريرها إلى الدالة ، ويأخذ call() قائمة من الوسيطات.

▍حول هذا الربط في معالجات أحداث المستعرض

في عمليات رد الأحداث ، يشير this إلى عنصر HTML الذي حدث به الحدث. للربط مع رد اتصال ، مثل this ، شيء آخر ، يمكنك استخدام طريقة bind() . هنا مثال لتوضيح هذا.

 <!DOCTYPE html> <html> <body>   <button id="el">Element (this)</button>   <button id="win">Window (this</button>   <script>     const el = document.getElementById("el")     el.addEventListener('click', function () {         alert(this) //object HTMLButtonElement     })     const win = document.getElementById("win")     win.addEventListener('click', function () {         alert(this) //object Window     }.bind(this))   </script> </body> </html>

الأحداث

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

يمكن أن يكون الحدث ، على سبيل المثال ، إكمال تحميل DOM ، وتلقي البيانات نتيجة لطلب غير متزامن ، والنقر على عنصر الصفحة ، والتمرير في الصفحة ، وإدخال حرف معين من لوحة المفاتيح. في الواقع ، هناك العديد من الأحداث التي ، عند معالجتها ، تسمح لك شفرة JS للصفحة بحل مجموعة كبيرة من المشاكل في تفاعل التطبيق مع المستخدمين ، مع عناصر الصفحة ، مع البيئة التي تعمل فيها الشفرة.

معالجات الأحداث

يمكنك الرد على الأحداث باستخدام معالجات الأحداث ، وهي الوظائف التي يتم استدعاؤها عند وقوع الأحداث.
إذا لزم الأمر ، لمعالجة نفس الحدث ، يمكنك تسجيل العديد من المعالجات التي سيتم استدعاؤها في حالة حدوث هذا الحدث. يمكن تسجيل معالجات الأحداث بطرق مختلفة. النظر في ثلاث طرق من هذا القبيل.

lers معالجات الأحداث المضمنة

في الوقت الحاضر ، نادراً ما تستخدم معالجات الأحداث المضمنة بسبب قيودها. في السابق ، تم استخدامها في كثير من الأحيان. لتعيين معالج الأحداث هذا ، تتم إضافة التعليمات البرمجية الخاصة به إلى ترميز HTML للعنصر كسمة خاصة. في المثال التالي ، يتم تعيين مثل هذا المعالج البسيط لحدث onclick الذي يحدث عند النقر فوق زر إلى زر يسمى Button 1 .

 <!DOCTYPE html> <html> <body>   <button onclick="alert('Button 1!')">Button 1</button>   <button onclick="doSomething()">Button 2</button>   <script>       function doSomething(){           const str = 'Button 2!'           console.log(str)           alert(str)       }       </script> </body> </html>

يستخدم رمز HTML للزر Button 2 نهجًا مشابهًا ، ولكنه يشير إلى وظيفة يتم تنفيذ رمزها استجابةً للنقر على زر. يخرج هذا الرمز السلسلة المعطاة إلى وحدة التحكم ويعرض نافذة تحتوي على نفس النص.

▍ تعيين معالج لخاصية عنصر HTML

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

على سبيل المثال ، يحتوي كائن window على onload ، والذي يتم استدعاؤه بعد تحميل كود HTML للصفحة وجميع الموارد الإضافية التي يحتاجها ، على سبيل المثال ، الأنماط والصور. إذا قمت بتعيين معالج لهذا الحدث ، فعندما تسميه ، يمكنك التأكد من أن المتصفح قام بتحميل جميع محتويات الصفحة ، والتي يمكنك العمل عليها برمجيًا ، دون خوف من أن بعض عناصر الصفحة لم يتم تحميلها بعد.

 window.onload = () => {   alert('Hi!') //   }

يستخدم هذا النهج غالبًا عند معالجة طلبات XHR. لذلك ، أثناء إعداد الطلب ، يمكنك تحديد معالج لحدث onreadystatechange الخاص به ، والذي سيتم استدعاؤه عندما تتغير حالة readyState الخاصة به. في ما يلي مثال على استخدام هذا الأسلوب لتحميل بيانات JSON من واجهة برمجة تطبيقات عامة.

 <!DOCTYPE html> <html> <body>   <button onclick="loadData()">Start</button>   <script>       function loadData (){           const xhr = new XMLHttpRequest()           const method = 'GET'           const url = 'https://jsonplaceholder.typicode.com/todos/1'           xhr.open(method, url, true)           xhr.onreadystatechange = function () {               if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {                   console.log(xhr.responseText)               }           }           xhr.send()      }       </script> </body> </html>

للتحقق مما إذا تم تعيين معالج لحدث معين ، يمكنك القيام بذلك.

 if (window.onload){}

seاستخدام طريقة addEventListener ()

طريقة addEventListener() ، التي رأيناها بالفعل ، هي آلية حديثة لتعيين معالجات الأحداث. يسمح لك بتسجيل معالجات متعددة لحدث واحد.

 window.addEventListener('load', () => { //  })

لاحظ أن متصفح IE8 (وإصداراته الأقدم) لا يدعم أسلوب addEventListener() . يستخدم أسلوب attachEvent() مشابه. يجب أن يؤخذ هذا في الاعتبار إذا كان برنامجك يدعم المتصفحات القديمة.

bحول تعيين معالجات الأحداث للعناصر المختلفة

يمكنك توصيل معالجات الأحداث بكائن window للتعامل مع الأحداث "العامة" ، مثل الضغط على الأزرار الموجودة على لوحة المفاتيح. في الوقت نفسه ، يتم تعيين معالجات الأحداث لعناصر HTML الفردية ، والتي تستجيب لما يحدث لهذه العناصر ، على سبيل المثال ، من خلال النقر عليها باستخدام الماوس. لذلك ، يتم استخدام الأسلوب addEventListener() مع كل من كائن window ومع العناصر العادية.

▍ كائن الحدث

كمعلمة أولى ، يمكن لمعالج الأحداث أخذ كائن Event - Event . تعتمد مجموعة خصائص هذا الكائن على الحدث الذي يصفه. هنا ، على سبيل المثال ، هو رمز يوضح معالجة أحداث ضغطات لوحة المفاتيح باستخدام حدث keydown مفتاح كائن كائن keydown .

 <!DOCTYPE html> <html> <body>   <script>       window.addEventListener('keydown', event => {           //              console.log(event.type, event.key)       })       window.addEventListener('mousedown', event => {           //             //0 -  , 2 -            console.log(event.type, event.button, event.clientX, event.clientY)       })   </script> </body> </html>

كما ترى ، هنا ، لعرض معلومات حول المفتاح الذي تم الضغط عليه لوحدة التحكم ، يتم استخدام خاصية الكائن key . تُستخدم خاصية type هنا أيضًا ، للإشارة إلى نوع الحدث. في هذا المثال ، نحن نعمل بالفعل مع كائن KeyboardEvent ، والذي يتم استخدامه لوصف الأحداث المتعلقة بلوحة المفاتيح. هذا الكائن هو سليل كائن الحدث . تعمل الكائنات المصممة للتعامل مع مجموعة متنوعة من الأحداث على توسيع إمكانيات كائن حدث قياسي.

في نفس المثال ، يتم استخدام كائن MouseEvent لمعالجة أحداث الماوس. في معالج حدث mousedown ، نطبع إلى وحدة التحكم نوع الحدث ورقم الزر (خاصية button ) وإحداثيات المؤشر في وقت النقر ( clientY و clientY ).

يتم استخدام كائن DragEvent لمعالجة الأحداث التي تحدث عند سحب عناصر الصفحة.

من بين خصائص كائن Event المتوفرة في كائنات الحدث الأخرى ، يمكننا ذكر خاصية type المذكورة بالفعل وخاصية target ، والتي تشير إلى عنصر DOM الذي حدث فيه الحدث. يحتوي كائن Event على طرق. على سبيل المثال ، تتيح لك طريقة createEvent() إنشاء أحداث جديدة.

▍ تسطيح الحدث

خذ بعين الاعتبار المثال التالي.

 <!DOCTYPE html> <html>   <head>       <style>           #container {               height: 100px;               width: 200px;               background-color: blue;           }           #child {               height: 50px;               width: 100px;               background-color: green;           }       </style>   </head>   <body>   <div id="container">       <div id="child">       </div>   </div>   <script>       const contDiv = document.getElementById('container')       contDiv.addEventListener('click', event => {           console.log('container')       })       const chDiv = document.getElementById('child')       chDiv.addEventListener('click', event => {           console.log('child')       })       window.addEventListener('click', event => {           console.log('window')       })       </script> </body> </html>

إذا فتحت الصفحة باستخدام هذا الرمز في المتصفح ، فافتح وحدة التحكم وانقر على الماوس أولاً في المنطقة الخالية من الصفحة ، ثم في المستطيل الأزرق ، ثم باللون الأخضر ، سيدخل ما يلي إلى وحدة التحكم:

 window container window child container window

فقاعات الحدث

ما يمكن ملاحظته هنا يسمى فقاعات الأحداث. أي أن الحدث الذي يحدث في العنصر الفرعي يمتد إلى العنصر الأصل. تستمر هذه العملية حتى يصل الحدث إلى العنصر "العلوي". إذا كانت العناصر التي يمر عليها الحدث المنبثق لها معالجات مقابلة محددة ، فسيتم استدعاؤها وفقًا لترتيب توزيع الحدث.

يمكن إيقاف stopPropagation() الأحداث باستخدام طريقة stopPropagation() لكائن stopPropagation() . على سبيل المثال ، إذا كان من الضروري ، بعد النقر على العنصر الفرعي ، ألا يتم نشر الحدث المقابل بشكل أكبر ، فنحن بحاجة إلى إعادة كتابة الرمز الذي نقوم بتعيين معالج حدث click له على النحو التالي.

 chDiv.addEventListener('click', event => {   console.log('child')   event.stopPropagation() })

, , — , — container , — child , .

 window container window child

▍

, .

load

load window . , , HTML- body .

click . dblclick — . click dblclick , click , — dblclick . mousedown , mousemove , mouseup , . , mousemove , , , . , - , . .

keydown . , . — keyup .

scroll

scroll window . , , , window.scrollY .

, , mousemove , .

mousemove scroll . - . . «» (throttling), Lodash . , , , , . .

 let cached = null window.addEventListener('mousemove', event => {   if (!cached) {       setTimeout(() => {           //     cached           console.log(cached.clientX, cached.clientY)           cached = null           }, 100)   }   cached = event })

, mousemove , 100 .

ES-

ES6 , ES-. , , -, , Node.js, .

, . , , . , , .

Node.js CommonJS. , ES-, , . , , ES-, , , , . , caniuse.com , 2018 ES- 80%.

ES- Node.js.

▍ ES-

Node.js ES- .

 import package from 'module-name'

CommonJS- .

 const package = require('module-name')

, JavaScript-, - . يتم ذلك باستخدام الكلمة الأساسية export . , , , , uppercase.js . .

 export default str => str.toUpperCase()

, . .
( , ) .

HTML- , <script> type="module" .

 <script type="module" src="index.js"></script>

, (defer) . , , uppercase.js , , , . -. , -. , VSCode, Live Server ( — ritwickdey.liveserver).

 <!DOCTYPE html> <html> <head> </head> <body>   <script type="module">     import toUpperCase from './uppercase.js'     console.log(toUpperCase('hello'))   </script> </body> </html>

HELLO .

URL.

 import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'

, , ./ / .

▍

, .

 export default str => str.toUpperCase()

 const a = 1 const b = 2 const c = 3 export { a, b, c }

module.js , , , .

 <html> <head> </head> <body>   <script type="module">     import * as m from './module.js'     console.log(ma, mb, mc)   </script> </body> </html>

1 2 3 .

, , .

 import { a } from './module.js' import { a, b } from './module.js'

, , .

 console.log(a)

 import { a, b as two } from './module.js'

, , , , . module.js .

 const a = 1 const b = 2 const c = 3 export { a, b, c } export default () => console.log('hi')

 import sayHi, { a } from './module.js' console.log(a) sayHi()

▍CORS

CORS . , CORS, ( Access-Control-Allow-Origin: * ).

▍ nomodule

, , , script , nomodule . , , .

 <script type="module" src="module.js"></script> <script nomodule src="fallback.js"></script>

▍ ES6 WebPack

ES6 — , , ECMAScript. , , , , . , WebPack, , , .

▍ CommonJS

, Node.js CommonJS. , . CommonJS npm.

CommonJS-, , . , up-node.js .

 exports.uppercase = str => str.toUpperCase()

, .

 const up = require('./up-node.js') console.log(up.uppercase('hello'))

HELLO .

, npm, , .

 const package = require('module-name')

CommonJS , . .

CommonJS- .

 exports.a = 1 exports.b = 2 exports.c = 3

, .

 const { a, b, c } = require('./up-node.js')

, JavaScript — . Math , . , , JS- .

▍

(+)

+ . :

 const three = 1 + 2 //3 const four = three + 1 //4

, , , .

 'three' + 1 // three1

(-)

 const two = 4 - 2 //2

(/)

 20 / 5 //4 20 / 7 //2.857142857142857

0, . Infinity ( ) - Infinity ( ).

 1 / 0 //Infinity -1 / 0 //-Infinity

(%)

% , .

 20 % 5 //0 20 % 7 //6

0 NaN (Not a Number — ).

 1 % 0 //NaN -1 % 0 //NaN

(*)

 1 * 2 //2 -1 * 2 //-2

(**)

, .

 1 ** 2 //1 2 ** 1 //2 2 ** 2 //4 2 ** 8 //256 8 ** 2 //64

▍

(++)

++ 1 . .

— 1 , .

 let x = 0 ++x //1 x //1

— , .

 let x = 0 x++ //0 x //1

(--)

-- ++ , 1 , .

 let x = 0 x-- //0 x //-1 --x //-2

(-)

 let x = 2 -x //-2 x //2

(+)

, , . — .

 let x = 2 +x //2 x = '2' +x //2 x = '2a' +x //NaN

▍

JavaScript, ( = ), , . , , += .

 let x = 2 x += 3 x //5

: « , , , , ». , .

 let x = 2 x = x + 3 x //5

-=
*=
/=
%=
**=

▍

. , .

 const a = 1 * 2 + 5 / 2 % 2

2.5 . , . , .

- + ++ -- — ,
/ % — , ,
+ - —
= += -= *= /= %= **= —

, , . , .

 const a = 1 * 2 + 5 / 2 % 2 const a = 2 + 2.5 % 2 const a = 2 + 0.5 const a = 2.5

. .

 const a = 1 * (2 + 5) / 2 % 2

1.5 .

▍ Math

Math , . . , .

, , Math.E — , e, Math.PI — , π.

 Math.E // 2.718281828459045 Math.PI //3.141592653589793

Math.abs() —
Math.ceil() — , ,
Math.cos() — ,
Math.floor() — , ,
Math.max() —
Math.min() —
Math.random() — [0, 1) ( 1)
Math.round() —
Math.sqrt() —

▍

JavaScript , .

== — . .
!= — .

, . , , , .

=== —
!== —

< — «»
> — «».
<= — « ».
>= — « ».

, .

 1 === true //false 1 == true //true

, , 1 true . 1 true , 1 true .

, , . Node.js. , :

PDF- Node.js.

ملخص

, this, , , . , ES6.

أعزائي القراء! , JavaScript?

دليل جافا سكريبت الجزء 7: الوضع الصارم ، هذه الكلمة الرئيسية ، الأحداث ، الوحدات ، الرياضيات