learn wpu

JSCheatsheet

مصدر آخر: https://developer.mozilla.org/id/docs/web/javaScript/A_RE-INTRODUCTION_TO_JAVASCRIPT

نوع البيانات

• الرقم: (15 رقمًا)

  1. أرقام بدون عشرية: 10 ، 123456 ، 3000
  2. الأرقام العشرية: 3.14 ، 0.5 ، 100.00
  3. الأسس: 123E5 // 12300000 ، 123E-5 // 0.00123
  4. الأرقام السلبية: -0.134 ، -2 ، -100.00
  5. رقم ثماني (قاعدة 8)
  6. أرقام سداسية عشرية (قاعدة 16)
  7. أرقام خاصة: -infinity ، نان

• المشغل

  1. Unary (يتطلب 1 تشغيل) أ. رقم typeof ، سلسلة ، منطقية
  2. ثنائي (يتطلب 2 عامل) أ. الحساب: +، -، _ ، /، ٪ (معامل) مشغل الأسبقية: كورونج ، كالي ، قسمة ، إضافة ، أقل. ب. التخصيص: = ، += ، -= ، _ = ، /= ، ٪ = c. مقارنة (مقارنة): == ،! = ، === ،! == ،> ،> = ، <، <= D. المنطق: && ، || ،! ه. السلسلة: cumatination +
  3. الثلاثية (يتطلب 3 تشغيل) أ. مشروطة (حالة)؟ الصحيح: خطأ (x ٪ 2 == 0)؟ "حتى": "غريب"

• سلسلة الهروب الحرف

  • 0 = فارغة
  • '='
  • "="
  • =
  • n = خط جديد
  • t = علامة التبويب
  • B Backspace
  • uxxxx = Unicode

عامل

• الإعلان: تسجيل المتغيرات في النطاق المناسب.

• التهيئة: توفير الذاكرة للمتغيرات.

• المهمة: تحديد قيم محددة في المتغيرات.

  المتطلبات المتغيرة:

  • بدون مسافات.
  • كاميل.
  • لا تبدأ بالأرقام.
  • لا تستخدم الكلمات الرئيسية والكلمة المحجوزة.
  • النطاق المتغير: المحلي والعالمي.

• var ، Let & const

إعادة إنشاء: عملية تغيير الكود لتكون أفضل دون تغيير وظيفتها.

 Alasan:

-   Readability
-   DRY, dont repeat yourself
-   Testability
-   Performance
-   Maintainability

• وظيفة صندوق المنبثقة:

  • يُحذًِر
  • اِسْتَدْعَى
  • يتأكد

التدفق السيطرة

• التكرار (حلقة)

  1. بينما أ. بينما (الشرط) {Action} ؛ ب. القيمة الأولية لـ While (حالة الإنهاء) {Action ؛ الزيادة/الانخفاض ؛ }

  2. لـ (القيمة الأولية ؛ شروط الإنهاء ؛ الزيادة/ الانخفاض) {Action ؛ }

  3. من أجل (سلسلة ، صفيف ، وسيطات ، typedarray ، الخريطة ، مجموعة ، تكرار المعرفة من قبل المستخدم) const name = 'rama' ؛ لـ (const n من الاسم) {console.log (n) ؛ }

  4. لـ (enumerable / property from Object) const mhs = {name: 'rama' ، العمر: 29 ، البريد الإلكتروني: '[email protected]' ،} ؛ لـ (m في mhs) {console.log (mhs [m]) ؛ }

  5. تفعل بينما

• الاختيار (الاختيار)

  1. إذا إذا (الشرط) {الإجراء 1 ؛ } آخر {Action 2 ؛ }
  2. آخر إذا (الشرط 1) {الإجراء 1 ؛ } آخر إذا (الشرط 2) {الإجراء 2 ؛ } آخر إذا (الشرط n) {Action n ؛ } آخر {الإجراء الافتراضي ؛ }
  3. تبديل التبديل (التعبير) {case "value 1": Action 1 ؛ [Break ؛] Case "Value 2": Action 2 ؛ [break ؛] case "value n": Action n ؛ [Break ؛] افتراضي: الإجراء الافتراضي [Break ؛]}

وظيفة

• وظيفة مدمجة

  1. يُحذًِر ()؛
  2. يتأكد ()؛
  3. اِسْتَدْعَى ()؛
  4. ينقسم ()؛
  5. شريحة () ؛
  6. إلخ.

• دالة المعرفة من قبل المستخدم nameFunction (المعلمة/الوسيطة *اختياري) {وظيفة الجسم ؛ قيمة الإرجاع *اختياري} console.log (nameFunction (الوسيطة)) ؛

  1. إعلان الوظيفة
  • معرف الوظيفة (ParameterList OPT) {وظيفة الجسم}
  • أكثر مرونة
  • من السهل فهم مثال المبتدئين: عدد الوظائف للأرقام (أ ، ب) {إجمالي الحروف ؛ المجموع = A + B ؛ إجمالي العائد }
  2. تعبير وظيفة
  • يجب تعريفها قبل الاتصال
  • أكثر قوة (الإغلاق ، الوسيطة للوظائف الأخرى ، معرف الإعلان Iife) = دالة (ParameterList Pest) {function body} مثال: اسمحوا عدد الأرقام = الدالة (a ، b) {Let Total ؛ المجموع = A + B ؛ إجمالي العائد }

نِطَاق

• نطاق عالمي / النافذة دع = 1 ؛ console.log (a) ؛
• اختبار وظيفة الوظيفة () {Let B = 2 ؛ } امتحان ()؛ console.log (b) ؛
• اختبار وظيفة نطاق وظيفة () {Let C = 3 ؛ console.log (c) ؛ } امتحان ()؛

العودية: وظيفة تدعو نفسه.

تطبيق:

• استبدال الحلقات
• سلسلة فيبوناتشي
• البحث والبحث في قائمة قوائم البيانات وأمثلة الشجرة: وظيفة Factorial (n) {if (n === 0) return 1 ؛ إرجاع n * factorial (n -1) ؛ }

بنية البيانات

• Array: مجموعة من العناصر (القيمة / المتغير) الذي يحتوي كل عنصر على فهرس. وظيفة الصفيف:

  • تسهيل إدارة / قيمة / إدارة البيانات
  • مثال على إدارة الذاكرة: دع Hari = ["Monday" ، "Tuesday" ، "Wednesdenne" ، 1] ؛

• التلاعب الصفيف

  • عدد العناصر: الطول
  • الجمع: انضم
  • إضافة وحذف: في النهاية: Push ، pop في البداية: Unsonshift ، Shift
  • توصيل وقطع:
    1. splice nameralarray.splice (indexawal ، maudihausu ، elementbaru1 ، new element2 ، ...) ؛
    2. شريحة Let ArrayBaru = namerarray.slice (indexawal ، end) ؛
  • الحلقات:
    1. ليس في شكل صفيف: foreach nameraray.foreach (الدالة (المعلمة) {Action ؛})
    2. في شكل صفيف: خريطة nameraray.map (وظيفة (المعلمة) {Action ؛})
  • مجموعة الفرز: فرز namerarray.sort () ؛
  • تبحث عن عناصر الصفيف:
    1. قيمة واحدة: البحث عن arraybaru = namerarray.find (وظيفة (المعلمة) {return ؛})
    2. العديد من القيم: Filter Let ArrayBaru = namerarray.filter (function (parameter) {return ؛})

• الكائن: مجموعة من العناصر (القيمة/ المتغير) التي يحتوي كل عنصر على خاصية.

  • الكائن الحرفي: غير فعال لكثير من الأشياء. دع nameBject = {property1: value1 ، property2: value2 ، method1: function1
    }
  • دالة إعلان كائن الوظيفة nameBject (param1 ، param2) {disclaration object = {} ؛ Object.prperty1 = param1 ؛ Object.prperty2 = param2 ؛ كائن إرجاع ؛ } كائن إعلان جديد = nameBject (value1 ، value2) ؛
  • وظيفة منشأة الكائنات NameBject (param1 ، param2) {this.prperty1 = param1 ؛ هذا. programrty2 = param2 ؛ } كائن إعلان جديد = nameBject (value1 ، value2) ؛ هذا هو كائن نطاق عالمي.
  • Object.create () function nameBject (param1 ، param2) {إعلان الكائن = object.create {} ؛ Object.prperty1 = param1 ؛ Object.prperty2 = param2 ؛ كائن إرجاع ؛ } كائن إعلان جديد = nameBject (value1 ، value2) ؛
  • وظيفة الوراثة النموذجية nameBject (param1 ، param2) {this.prperty1 = param1 ؛ هذا. programrty2 = param2 ؛ } nameObject.pototype.method1 = function1 ؛ nameObject.pototype.method2 = function2 ؛ nameObject.pototype.method3 = function3 ؛
  • النموذج الأولي في إصدار الفئة class namaklas {constructor (param1 ، param2) {this.property1 = param1 ؛ هذا. programrty2 = param2 ؛ } method1 ؛ الطريقة 2 ؛ الطريقة 3 ؛ }

سياق

1. مرحلة الإنشاء في Global Scope var name = undefined name function = fn () ، وهي وظيفتها نفسها.
   • نافذة رفع = الكائن العالمي هذا = النافذة
2. وظيفة مرحلة التنفيذ تجعل سياق التنفيذ المحلي

الإغلاق

• هو مزيج من الوظيفة والنطاق المعجمي في الوظيفة.
• وظيفة عندما يكون لديها إمكانية الوصول إلى نطاق الوالدين ، على الرغم من الانتهاء من نطاق الوالدين. مثال: وظيفة nameFunction (param1) {return namalocalfunction (param2) {function body}} nameVariable = namaFunction (PINGUMINE1) ؛ NameVariable (PENGUMINE2) ؛

وظيفة السهم

• شكل آخر أكثر إيجازا من تعبير الوظيفة. مثال: معرف الإعلان = (ParameterList OPT) => {الوظيفة body} مثال: اسمحوا لعدد الأرقام = (param1 ، param2) => {function body} ؛ // عودة ضمنية
• لا يمكن تطبيق هذا في وظيفة سهم دالة السهم على هذا. مثال: إعلان nameBject = function (param1) {this.prperty1 = string ؛ this.property2 = () => {function body} ؛ } إعلان nameVariable = new nameBject () ؛

وظيفة ترتيب أعلى

الوظيفة التي تعمل في وظائف أخرى (في قيمة الوسيطة / الإرجاع). يعامل JavaScript الوظيفة ككائن. لماذا: التجريد ، وهو تبسيط البرنامج لأنه كلما زاد البرنامج ، زاد التعقيد ، وأكثر إرباكًا للمبرمج.

• Array.pototype.map ()
• Array.pototype.filter ()
• Array.pototype.reduce ()

قالب حرفي

هي سلسلة حرفية تسمح للتعبير فيه. يمكن استخدام: '' ؛ "" ؛ و ؛

مع backtick ( ) يمكن أن تجعل:

• سلسلة Singline: string text
• سلسلة متعددة: string text 1 string text 2 string text 3
• التعبير المدمج: string text ${expression} string text
• شظايا HTML
• التعبير الاستيفاء
• القوالب الموسومة:
  • هروب / تطهير علامات HTML
  • الترجمة والتدويل (I18N)
  • المكونات المصممة

تدمير المهام

التعبير على JS الذي يجعلنا قادرين على تفكيك قيمة Dr. Array / Property Dr. Object في متغير منفصل.

• Array const try = ['One' ، 'اثنين' ، 'ثلاثة'] ؛ const [a ، b ، c] = حاول ؛
• كائن const mhs = {name: 'Ramadyan' ، العمر: 25 ، البريد الإلكتروني: '[email protected]' ،} ؛ const {name ، العمر ، البريد الإلكتروني} = mhs ؛
• وظيفة
  • على قيمة الإرجاع
  • على الحجج

مشغل انتشار

المشغلين الذين يكسرون itlebles إلى عناصر واحدة.

معلمة REST

يمثل الحجة في الوظيفة مع jumalh غير محدودة في صفيف.

متزامن مقابل غير متزامن

• مهمة تنفيذ البيئة المتعددة الخيوط مقابل
• حظر تقنيات Ngoding غير المحظورة (ذات الصلة بالمخرجات)
• متزامن مقابل هندسة Ngoding غير المتزامنة (طلب HTTP المتعلق)
• مهمة مهمة تنفيذ البيئة المتوازية مقابل (INFRA ، الأجهزة والمحاكاة الافتراضية)

أتصل مرة أخرى

تم إرسال الوظيفة كمعلمة في وظيفة أخرى.

مثال: وظيفة nameFunction (namacallback) {إعلان الاسم valis = value ؛ رد الاتصال (الأسماء) ؛ } nameFunction ((nameVar) => {console.log (execution) ؛}) ؛

يعد

الكائن الذي يمثل نجاح / فشل حدث غير متزامن في المستقبل. وعد (تم الوفاء به / رفض / معلق). باستخدام Callback => الإجراء (حل => ثم / رفض => catch / pending => أخيرًا).

مثال: إعلان الاسم var1 = القيمة ؛ const namevar2 = وعد جديد ((حل ، رفض) => {if (nameVar1) {solve (value) ؛} else {refect (value) ؛}}) ؛ namesvar2. that ((response) => console.log (التنفيذ)). كاتش ((استجابة) => console.log (التنفيذ)) ؛

أياكس وجلب

Fetch هي طريقة لـ API JS لاتخاذ الموارد من الشبكة وإعادة الوعد الكامل (المملوء) عندما يكون هناك استجابة متاحة. تدوين: جلب (الموارد ، init) ؛

• الموارد: عنوان URL / الطلب (تمثيل طلبات المصدر).
• init: تكوين إضافي في طلب كائن (مثال: الحصول على ، منشور ، طريقة ، رأس ، ذاكرة التخزين المؤقت ، إلخ)
• الاستجابة: نتائج الدكتور جلب في شكل وعد (الملكية والطريقة).

Async & في انتظار

• وظيفة تعمل غير متزامن (من خلال حلقة الحدث) ،
• الذي ينتج وعد (ضمني) كقيمة إرجاع ،
• لكن طريقة كتابة الكود باستخدام الكتابة المتزامنة (قياسية).

يمكن أن يكون لدالة ASYNC كلمة رئيسية في انتظارها لإيقاف تنفيذ وظيفتها مؤقتًا أثناء انتظار الانتهاء من الوعد (حل).

DOM (نموذج كائن المستند): يصبح تمثيل عنصر HTML في المستند كائنًا. مخزنة في شجرة دوم.

فوائد DOM:

• كواجهة برمجة قائمة على الكائنات التي تمثل مستندات الويب.

• يجعل DOM جميع مكونات صفحات الويب التي يمكن الوصول إليها والتلاعب بها.

• المكونات: عناصر HTML ، والسمات ، والنص ، إلخ.

• شجرة دوم

  1. Nodelist: مجموعة تحتوي على أي عقدة.
  2. HTMLCollection: مجموعة تحتوي على عناصر HTML وهي حية.

• تَسَلسُل:

  • عقدة الجذر (المستند): العقدة التي هي مصدر جميع العقد الأخرى في DOM.
  • العقدة الأصل: العقدة التي هي مستوى واحد فوق عقدة أخرى. على سبيل المثال: الجسم هو الوالد دكتور H1 ، P ، Div & A.
  • Node Child: العقدة التي هي مستوى واحد أسفل عقدة أخرى. على سبيل المثال: H1 هو الطفل الدكتور بود.

• نوع العقدة/ العقدة:

  1. عنصر
  2. يصف
  3. نص
  4. قسم CDATA
  5. مرجع الكيان
  6. كيان
  7. تعليمات المعالجة
  8. تعليق
  9. وثيقة
  10. نوع المستند
  11. شظية الوثيقة
  12. تدوين

• اختيار DOM

  • مثل استخدام العناصر في HTML:
    1. getlementbyid () = ينتج عناصر.
    2. getElementsByTagName () = ينتج htmlcollection.
    3. getElementsByClassName () = تنتج htmlcollection.
  • مثل ارتداء محدد على CSS:
    1. QuerySector () = ينتج عناصر.
    2. QuerySectorAll () = ينتج العلماء.

• معالجة DOM

  • معالجة العناصر
    1. element.innerhtml = تغيير محتويات العنصر المحدد.
    2. element.style. = تغيير نمط العنصر المحدد.
    3. element.getAttribute () = تعرف على محتويات السمة.
    4. element.SetTtribute () = إضافة سمات.
    5. element.RemoVeatTribute () = حذف السمات.
    6. element.classlist:
       • إضافة () = إضافة فئة.
       • إزالة () = حذف الفئة.
       • تبديل () = إضافة فئة إن لم يكن هناك ، حذف إذا كان هناك.
       • Item () = فئة التحقق مع الفهرس.
       • يحتوي على () = تحقق من الفصل المعني.
       • استبدال () = تغيير الفصل.
  • معالجة العقدة
    1. document.createElement ()
    2. document.createTextNode ()
    3. node.ppendchild ()
    4. node.insertbefore ()
    5. parentnode.removechild ()
    6. parentnode.replacechild ()

• حدث DOM

  • معالج الحدث = يمكن تشغيل الأمر الأخير فقط.
    1. سمة HTML المضمنة
    2. طريقة العنصر على
  • AddVentListener () = يمكن تشغيله عدة مرات.

• DOM اجتياز

  • ParentNode = عقدة النتيجة.
  • الوالدين = نتيجة العنصر.
  • nextsibling = عقدة النتيجة.
  • NextElementibling = نتيجة العنصر.
  • adcefibling = نتائج العقدة.
  • Previdelementsibling = نتيجة العنصر.

• الافتراضي منع

  • لمنع الإجراء الافتراضي ، استخدم الطريقة: event.preventDefault () ؛

• حدث الفقاعات

  • عند تشغيل الحدث ، سيتم تشغيل الحدث في الوالدين قبل الذهاب إلى الطفل. باستخدام event.stopPropagate () ؛