ecmascript 6 (es6) جافا سكربت (6)

بسم هللا الرحمن الرحيم) تحديدا للجافا سكربت( ECMAScript 6: دورة.أنيس حكمت أبو حميد: تقديم

@nees.com2aneeshikmat: البريد اإللكتروني.nees.com2www: الموقع اإللكتروني

دورة مجانية -

aneeshikmat@

2nees.com

mailto:[email protected]�

http://www.2nees.com/�

الفهرسال تنسى اإلطالع على ما ورد في هذه المقدمة( المقدمة(ECMAScript ECMAScript & Browsers Support6Running ECMAScript let KeywordKeywordConst Destruct ValuesValuesDefault Function ArgumentsoperatorJS spread “…”Template Strings ` `


aneeshikmat@

2nees.com

الفهرسFunction =>ArrowKeyword on JSClassLoopfor ofo” Literal0“b" Literal0"Yield Keyword & Fun *()Set ObjectMap ObjectJS modules)نبذة سريعة فقط(الخاتمة


aneeshikmat@

2nees.com

المقدمةبسم هللا الرحمن الرحيم

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

الذي أنزا على عبده الكتاب ولم يجعل له عوجا و وشرع اإلسالم وجعل له منهجا و وأعز أركانه على من غالبه و فجعله أمنا لمن تمسك به و

وسلما لمن دخله و وبرهانا لمن تكلم به و وشاهدا لمن خاصم عنه و ونورا لمن استضاء به و وفهما لمن عقل و ولبا لمن تدبر و وآية لمن توسم و وتبصرة لمن عزم و وعبرة لمن اتعظ و ونجاة لمن صدق و وثقة لمن

)مقدمة كتاب ومضات في اإلسالم للدكتور النابلسي(.توكل و ورالة لمن فوض و وجنة لمن صبر

الحمد ل رب العالمينو عدد ما كانو وعدد ما يكونو وعدد الحركات .والسكون


aneeshikmat@

2nees.com

المقدمةسنتحدث اليومو بإذن هللا تعالىو عن موضوع جديدو وهو اا

ECMAScript 6و وسنبدأ هذا الموضوع بالحديث عنECMAScript بوكل مختصرو ومن ثم سننتقل سويا الى عالم المزايا

وهو موضوع) 6اإلصدار (والخصائص التي تم تقديمها مع اإلصدار الجديد .هذه الدورة المتواضعة

الذين يعملون على الجافا جميع المطورين والمبرمجين طبعا هذه الدورة تهم منهمو ألهميتهاو وأهمية FRONT ENDسكربتو وتزداد األهمية لل

^_^و فكونوا معنا ^^التحديثات التي لصلت للجافا سكربت في هذا اإلصدار


aneeshikmat@

2nees.com

المقدمة:متطلبات الدورة

(1HTML(2CSS(3JS )معرفة جيدة في الجافا سكربت ( P:و متصفح إنترنت ++notepadمحرر نصوص مثل 4)

ال يعني إصدار جديد أو إضافة جديدة لذف كل ما قبلهو بل هذا: ماللظة* يعني أن هناك تحديث وقع على ألد الجوانب في موضوع ماو وقد يكون ! ...جلهو وقد يكون كله ES6: يرمز لها ب ECMAScript6: 2ماللظة *


aneeshikmat@

2nees.com

المقدمةو وتم اعتماد التاريخ 2015-09-23تاريخ البدء في هذه الدورة : 3ماللظة * كتاريخ لجميع األمثلة بالدورة على اعتبار أن اإلصدار 01-10-2015

يدعم ما يتم قوله في هذه الدورة في لين كتابتهو ألن compilerالخاص باا هذه الدورة وفي هذا التاريخ كانت بعد إطالق اإلعتماد باإلصدار الجديد للجافا

في لين أن المتصفحات لم تدعمها بعدو وستتضح الفكرة ES6سكربت ..بالورائح القادمةو بإذن هللا تعالى


aneeshikmat@

2nees.com

ECMASCRIPTفي بادئ هذه الدورةو كنت محتاراو هل أتحدث قليال عن اا

ECMAScript أم الو وهل أفرغ لها جزئا خاصا بها أم الو ثم هداني هللاتعالى ألن أضعها في جزء منفصلو والسبب يعود الى غياب هذه الكلمة عن

..معظم المبرمجين والمطورينو وخصوصا الناشئين منهم

هي منظمة عالمية غير ربحيةو هدفها وضع المعايير ECMAScriptاا JavaScript, Action Script, JScriptالخاصة بلغات السكربت

وتقوم على وضع الوصف العام والقواعد الخاصة بالسكربتو باإلضافة الى تطوير اللغة ومكاتبهاو ولتصبح هي الجهة المسؤولة عن التطوير للسكربت

هي ECMAواا ... Client-Sideوتحديدا للجانب الذي يتعامل مع اا European Computer Manufacturers Associationإختصار ا (ECMA)


aneeshikmat@

2nees.com

ECMASCRIPTلولدها فإنه المنظمة الغير ربحية والمسؤولة عن تطوير ECMAواا

و اا C++/Cliووضع معايير العديد من اللغات واألمور األخرى مثل HVD وغيرهاو لذلك يتم تحديدها بالمجاا بعد اإلسم لتخصيص الموضوع

....ECMAScriptكما ذكرنا في الوريحة السابقة عن مفهوم

Netscapeطبعا جميعنا يعلم بأن الجافا سكربتو طورت من قبل شركة العالميةو ECMAلكن هذه الوركة قامت بنقل الجافا سكربت منها الى اا

وكان هذا في عام ..ليتم وضع أسس ومعايير واضحة عالميا لمن سيعمل عليها ... 1997عام 6و وصدر أوا إصدار في شهر 1996

واآلنو وبهذا نكون عرفنا ماذا تعني هذه الكلمةو والى ماذا تويرو وما تقدمه من مهام^_^ لمطورين السكربت عموما والجافا سكربت خصوصا ألنها موضوعنا


aneeshikmat@

2nees.com

ECMASCRIPT &BROWSERSعند تطوير أو تحديث أي مكتبةو فإنه من المعلوم أن هناك فترة زمنية ليتم

تطوير المتصفحات لتخدم جميع الخصائص الجديدة المضافةو وأقرب مثااو فمنذ تطويرهاو واعتمادهاو فإن المتصفحات تحاوا دعمCSS3هنا اا

والى اآلنو هناك متصفحات لم تدعم جل..الخصائص بأكبر شكل ممكن الخصائصو لكن المتصفحات الرئيسية في معظمها تدعم مجموعة من

الخصائص أصبحت اآلن من البداهة وجودها واستخدامهاو ووصوال الى هذه..وما تقدمه من مزايا وخدمات رائعة CSS3اللحظةو من منا لم يستخدم اا

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

القارئ للجافا سكربت من خالا رابط لهو كما نقوم Compilerاستخدام اا ). مع فارق التوبيه(من جوجل مثال Fontبتضمين


aneeshikmat@

2nees.com

ECMASCRIPT &BROWSERSواآلنو لإلطالع على المتصفحات التي تدعم خاصية أو سمة معينة من

الذي سنقوم بتضمينه كم يدعم من خصائص Compilerعدمهاو ولتى اا : ما علينا سوى الدخوا الى هذا الرابط

/6table/es-https://kangax.github.io/compat ) لرك السهم لليمين ولليسار لتى تتمكن من تصفح الجدوا: ماللظة(

واآلن قبل أن تنتقل للوريحة التالية لمواهدة صورة عن الموقع للخصائصالمدعومةو فإن الخصائص الرئيسية أو السمات الرئيسية تم دعمها في

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

فستكون الخاصة غير مدعومةو أو مدعومة من..جديدة أو غير موهورة ...متصفح وليس من الكل


aneeshikmat@

2nees.com

https://kangax.github.io/compat-table/es6/�

https://kangax.github.io/compat-table/es6/�

ECMASCRIPT &BROWSERS

RUNNING ECMASCRIPT 6^_^ ES6واآلنو لنبدء على بركة هللا في برمجة الجافا سكربت بدعم من

الخاص بالمتصفح من babelلنبدأ بوكل صحيحو علينا أوال نقوم بتحميل اا : compilerهو جافا سكربت Babelاا : (خالا هذا الرابط (

https://babeljs.io/docs/setup/#babel_in_browser .. npmيجب أن تقوم بتحميل اا babelطبعا لتحميل اا

npmمن خالا اا ..( npmوأنصحك بأن تقوم بالبحث ومن ثم تحميل اا عن طريق األمر babelلتنصيب اا npmيمكننا استخدام األمر

npm install babel ( ثم تذهب الىbable-core وتأخذ ملف ااbrowser.js ) ....طبعا سأقوم بوضع الملف في المجلد الخاص بهذه الدورة..) بإذن هللا تعالى


aneeshikmat@

2nees.com

RUNNING ECMASCRIPT 6: هي Babelطريقة استخدام اا


aneeshikmat@

2nees.com

) هذا استباق لناتج تطبيق مثاا( Babelشاهد هذا الخطأ في لاا لم تقم بتضمين اا

LET KEYWORDتم إضافتها لتقوم بعملية مهمةو وهي تعريف نطاق معين LETكلمة

)Block Scope (للمتغيرات في الجافا سكربتو أي أن المتغير يتم استخدامغير Scopeو ويعتبر خارج اا scopeقيمته والتعامل معها داخل هذا اا

:شاهد المثاا^_^ ..معرف

letاللظ هنا أنني استخدمت و واللظ varواستخدمت اا

scopeداخل اا alertأن اا قامت باظهار نتيجة كل من اا

X وااY و أما خارج ااscope x =undefinedفكان الناتج لل


aneeshikmat@

2nees.com

CONST KEYWORDو كلما لطالما شاهدناها في لغات أخرىconstالكلمة المحجوزة

واستخدمناهاو لكنه لم يكن باإلمكان استخدامها في الجافا سكربتو وكما هوو أي أن هذه القيمة ال يجوز”الثابت“توير الى constمعروف لديناو فإن اا

و وهذا يعني)في األردن% (16تغييرها أو المساس بهاو مثل قيمة الضريبة أن جميع ما سيتم تنفيذه من عمليات سيتم لساب الضريبة لهاو ستتم من خالاثابت الضريبةو وبذات الوقت لو أردت تغيير قيمة الضريبةو فهذا يعني تغيير

.... _^ *الذي قمنا بتعريفه constقيمة اا اليس من الممكن أن نقوم بتعريف متغير ونضع به قيمة اا..والسؤاا اآلن

الى إصدار الجافا سكربت ؟ constدون الحاجة الى إضافة اا % 16


aneeshikmat@

2nees.com

CONST KEYWORDنعم يمكننا ذلكو لكن طالما أنك تتحدث عن متغيرو فهل هناك لماية : الجواب

تضمن لك لفظ القيمة ثابتة دون تغيير من قبل الويفرة البرمجية الخاصة بكو! أو شيفرة برمجية أخرى من طرف ثالث ؟

كل ما عليك فعله هو استخدام هذه الكلمة المحجوزة ومن constمن خالا اا ..^_^ ثم ستتولى اآللة البرمجية عملية الحماية لهذه القيمة من أي تعديل

: واآلن لنواهد مثاال: 1مثاا دورة مجانية

- aneeshikm

[email protected]

CONST KEYWORD..اللظ هنا الخطأ: 2مثاا

constالخطأ يخبرك بأن اا Read only .. ال يمكن تغيير قيمته


aneeshikmat@

2nees.com

CONST KEYWORDعندما يتم تعريفه مثل اا constإنتبه هنا لنقطة مهمةو وهي أن اا : 3مثاا tax هنا و سيكونGlobal ويمكن استخدام قيمته كما تعلمناو لكن اذا قمنا

و فسيقوم بانواء الثابت ضمن هذاscopeداخل constبإعادت تعريف اا Globalوال يمكننا استخدام قيمته خارجا أو استخدام قيمة اا scopeاا

const داخل هذا ااblock ...


aneeshikmat@

2nees.com

CONST KEYWORDوالتي تطرقنا لذكرها على constلنواهد جميع األمثلة المتعلقة باا ..واآلن

بركة هللا _^

الهدف منه فقط توضيح مجموعة if(true)استخدام جملة الورط : ماللظة* ^_معين بأسهل أسلوبو ولذلك وجب التنويه blockاألمثلة ضمن


aneeshikmat@

2nees.com

DESTRUCT VALUESهناك الكثير من الطرق التي كنا نستخدمها في الجافا سكربت إلرجاع عدة

) function )Function Return Multiple Valuesالقيم من و والذي يقوم بدوره بجعل-التفكيك - Destructومن هنا ظهر مفهوم اا

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

دعونا..ولتى ال نطيل عليكم ... ^_^بمتغيرين دون تعريف متغير ثالث : ) 1مثاا *: (^_ P:نواهد مثاال سهال على الموضوع دورة مجانية

- aneeshikm

[email protected]

DESTRUCT VALUESفي هذا المثااو سنقوم بعملية تبديل للقيم بين متغيرين دون الحاجة الى: 2مثاا

: و هذه العملية ببساطة تتم كما في المثاا التالي^_^استخدام متغير ثالث جديد


aneeshikmat@

2nees.com

DESTRUCT VALUESباإلضافة الى ما ذكرناه في األمثلة السابقةو فهناك أيضا مزية رائعةو: 3مثاا

الى متغيرات من خالا اا objوهي إمكانية اسناد القيم الموجودة داخل Destruct و ويكون هذا من خالا وضع اسم المتغيرات بنفس اسم ااkey

والعملية هي عملية بحث ومطابقة بين ما.. objectالموجود داخل اا و وبهذا فإنه objectالمستخدمة داخل اا keyوضعته من متغيرات وبين اا

: شاهد المثاا... واسم المتغيرو فيتم اسناد القيمة keyإن توابه اا


aneeshikmat@

2nees.com

DEFAULT FUNCTIONARGUMENTS VALUES

من األمور التي كنا نفتقدها في الجافا سكربتو هي إمكانية وضع قيمةمعينو لكن هذا األمر إنتهى functionالمستخدمة في Argsإفتراضية لل

اآلنو وأصبح باإلمكان اآلن إضافة قيمة إفتراضية على شكل قيمة مباشرةو أوعلى أنها undefinedعلى شكل عملية لسابيةو كما أنه من الممكن ارساا

^^ الحمد ل على نعمه وفضله ... ^_^قيمة إفتراضية

و واللظ أيضا وجود^_^اللظ كيف يتم وضع القيم اإلفتراضية بوكل سهل و أي يمكنك استخدام العمليات الحسابيةfتخزن داخل اا concatعملية

) شاهد المثاا بالوريحة التالية..(^^ إلسناد القيم


aneeshikmat@

2nees.com

DEFAULT FUNCTIONARGUMENTS VALUES

: مثاا


aneeshikmat@

2nees.com

JS SPREAD “…” OPERATORلتعريف عدد ال نهائي من المتغيرات Spread Peratorيتم استخدام اا

التي يمكنني استخدامها لوظيفة معينةو وبمعنى أدقو القيام بإرساا عدد غيرو ومن أشهر األمثلة المفيدة لمثل هذه العمليةو فكرة عمليةArgsمعين من اا

مثل اآللة الحاسبة نقوا..الجمع الغير معروف عدد األرقام المراد جمعها قيمو فهل 10قيمو وغيري قد يقوم بجمع 4فهنا قمت بجمل .. 5+6+7+55

! من المعقوا إنواء دواا بعدد القيم الممكن إدخالها ؟الجواب طبعا الو لكن يمكنك استخدام أفكار برمجية أخرى منها اا

SPREAD ^_^و ومن األفكار واإلستخدامات الجميلة بها أيضاو إذا ثمنافإن هذه المصفوفة ستعماا وكأنها فرطت على arrayName…بوضع

وسنرى بعد قليل مثاال a, bستصبح وكأنها [a, b]شكل متغيرات مثل ^_^ يوضح أهمية لركة مثل هذه الحركة بإذن هللا تعالى


aneeshikmat@

2nees.com

JS SPREAD “…” OPERATOR: 1مثاا


aneeshikmat@

2nees.com

JS SPREAD “…” OPERATORاللظ هنا أنني قمت بإنواء مصفوفة تحتوي عناوين الدوراتو ومن: 2مثاا

.^_^ Argsثم أرسلتها على شكل courses_towليس من الضروري أن يكون عدد المتغيرات : ماللظة

^_^ array…من قبل “ فرطها “ يساوي عدد المتغيرات التي سيتم


aneeshikmat@

2nees.com

JS SPREAD “…” OPERATORاللظ أهمية هذا المثااو فهو يوضح فكرة مهمةو وهي أنني عندما : 3مثاا

والد argاعتبر المصفوفة Spread argsقمت بارساا مصفوفة اا ويمكنه أن ) عاملها على طبيعة نوعها مصفوفة(عناصر 6يحتوي على

يستقبل أكثر من مصفوفةو بينما في الحالة الثانية قمت بفرط المصفوفة وارسالها على شكل قيمو وهذا يظهر جليا في نتيجة تطبيق المثاا _^


aneeshikmat@

2nees.com

JS SPREAD “…” OPERATORو لكنني^_^وبهذا نكون انتهينا بإذن هللا تعالى من شرح هذه الفكرة الرائعة

أرغب بالتنويه الى نقطةو وهي أننا بالجافا سكربتو كنا نستخدم Array.prototype.slice.call الستقباا عدد غير معروف من اا

args كما في ااSpread التي تعلمنها قبل قليلو وهذا مثاا بسيط يوضح^_^الفكرة


aneeshikmat@

2nees.com

شعر لإلمام الوافعي رلمه هللا تعالى

TEMPLATE STRINGS ` `من multilineأو single lineعبارة عن Template Stringاا من اإلصدار(يتم تعريفها اآلن ) سطر أو مجموعة من السطور( Stringاا

ES6 ( باستخدام ااback-tick )` ... (كما تمكننا هذه المزية الجديدة منمن خالا استخدام template stringداخل اا expressionsوضع

..^_^ { }$اا : ^_^: واآلنو لنواهد مثاال معا


aneeshikmat@

2nees.com

الشيفرة ..ناتج تطبيق المثال*_*البرمجية في الصفحة التالية

TEMPLATE STRINGS ` `دورة مجانية

- aneeshikm

[email protected]

ARROW FUNCTION => Functionتم إضافة طريقة جديدة لتعريف ES6في اإلصدار

!!واستخدامهنعم ال تتعجبو لكن هذا التعريف صمم ليسهل على المبرمج عملهو وإلدى أهم

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

return وطبعاو تمكنك هذه الطريقة من تنفيذ سطر والدو... لقيمة معينة: ولنواهد مثاال معا.... ^_^كما صمم لهو أو ألكثر من سطر

يمكن استخدامه Arrow functionاا : قبل اإلنتقاا الى المثاا 1ماللظة ...Lexical thisأو Statementأو Expressionمع اا

arrow functionهناك نقاط مهمة لوا استخدام اا : 2ماللظة ^_^وأهميتهاو سنتطرق لها في األمثلة بإذن هللا لتى نسهل األمر


aneeshikmat@

2nees.com

ARROW FUNCTION =>:1مثاا

: شرح المثاا.الذي سنقوم باستدعائه functionيمثل إسم اا contactNameاا function parameterتمثل اا fname, mnameاا

وارساا القيم functionقمنا باستدعاء اا console.logفي اا “anees” و“hikmat ” ومن ثم قام ااfunction بعملية الربط بين

... ^_^اإلسمين : أي كأننا قمنا بكتابة هذا الوكل


aneeshikmat@

2nees.com

ARROW FUNCTION =>من خالا اا multiple statementsيمكننا كتابة : 2مثاا

Arrow Function كما في المثاا التالي :

فإننا مباشرة سنقوم multiple statementsفي لالة وجود ..اللظ هناكما أننا سنستخدم اا .. {}من خالا blockبحصرها ضمن نطاق

Return إلرجاع القيمة الناتجة من العملية المطلوب تنفيذها^_^


aneeshikmat@

2nees.com

ARROW FUNCTION =>ناتج من objيكون على شكل Arrow Functionناتج تنفيذ اا : 3مثاا

اإلعتياديو وهذا يتيح لنا ميزة أخرى جميلةو وهي أننا يمكن functionاا regular JavaScript function objectأن نستخدم القيمة الراجعة كأنها

: شاهد المثاا.. callback functionوهذا مفيد للتعامل على شكل


aneeshikmat@

2nees.com

ARROW FUNCTION => statements multipleكان يلزم الستخدام اا 2اآلن في المثاا : 4مثاا

ستسبب لنا موكلة في لاا رغبنا في إرساا {}و لكن هذه {}أن نقوم باستعماا literal obj ...-_-

ويكون من خالا إلاطة اا P:لكن ال تقلقو فالحل سهل وبسيط ومتوفر ^_^ : شاهد المثاا() ..من خالا اا {}

idاللظ هنا أنني أرسلت اا nameفقطو ولهذا لم يتغير اا


aneeshikmat@

2nees.com

ARROW FUNCTION =>و P:والمثاا األخير والمثاا من األهمية بمكان : 5مثاا


aneeshikmat@

2nees.com

ARROW FUNCTION =>وArrow Functionبهذا نكون انتهينا بإذن هللا تعالى من موضوع اا

: واآلنو لنواهد تطبيق لألمثلة السابقة


aneeshikmat@

2nees.com

من شعر أبو النواس

CLASS KEYWORD ON JSلقيقة هذا الموضوع جعلني محتارا جدا في طريقة عرضه لكمو ومتى هوالوقت المناسب لورح هذا الموضوعو ونسأا هللا تعالى أن نكون وفقنا في

عليكمو ونسأله أن نوفق Class Keywordاختيار هذا التوقيت لعرض اا .في الورح

لتى تكون البداية صحيحةـ اعتقد اني سأبدأ بورح مجموعة من المفاهيمو وسيكون الحديث اا Classاألساسية والمهمةو قبل الحديث عن اا

JS Object Oriented Programming ^_^و وهل يوجد فعالCLASS في الجافا سكربت كما في لغات البرمجة المختلفة ؟ !


aneeshikmat@

2nees.com

CLASS KEYWORD ON JSبوكله المعروف بين المبرمجين في اللغات األخرى objمفهوم اا

الموجود بالجافا سكربتو objيختلف عن اا ) غير الجافا سكربت(واإلختالف المفاهيمي هنا بالبناءو فمثال كان يتعجب من ينتقل من الجافا الى

و وأوا سؤااobjالجافا سكربتو كيف أن ما نستخدمه بالجافا سكربت هو يلزمه أن يؤشر على objألن تعريف اا ..؟ Classيخطر بباله أين اا

class !! لم يوجد مفهوم اا..(و وهذا المفهوم بالوكل الذي ذكر لم يوجد class لذلك يقوا) ..بهذا الوكل في الجافا سكربت أبدا Narayan Prusty مؤلف كتابLearning ECMAScript 6

“JavaScript never had the concept of classes, although it's an object-oriented programming language. ”


aneeshikmat@

2nees.com

CLASS KEYWORD ON JSواآلن بعد هذه المقدمة البسيطةو ننتقل للحديث عن الكالس بمفهوم الجافا

: و وسنتحدث بإذن هللا تعالى عن^_^سكربت

مراجعة وشرح لما سبق اا . (بالطريقة التقليدية objectإنواء اا 1)ES6(

في الجافا سكربت classesما هي اا 2)classesباستخدام اا objectإنواء اا 3)) inheritance in classes(الوراثة 4)


aneeshikmat@

2nees.com

CLASS KEYWORD ON JS: بالطريقة التقليدية JS Objectإنواء 1)ولتستطيع متابعة js objectهذه المراجعة مهمة لفهم اا : ماللظة* ...الورائح القادمة

: هناك إسلوبين لذلك) بالطريقة التقليدية( Objectإلنواء أي

1 (object literal : وتستخدم هذه الطريقة إلنواءobject ثابت )fixed... (مثل :

var person = {fname:“anees", mname:“hikmat”}

2 (constructor : وتستخدم هذه الطريقة إلنواءobject Dynamically أثناء ااruntime وهي الطريقة الفعالة للعمل

Dynamic ^_^


aneeshikmat@

2nees.com

CLASS KEYWORD ON JS: شاهد المثاا اآلتي

و واللظ أن هذا ااEmployeeالمسمى object literalلدينا اا object موظف؟ 100يخدم شخص والد هو أنيسو لكن ماذا لو كان هنالك


aneeshikmat@

2nees.com

CLASS KEYWORD ON JS obj 100تكمن الموكلة في األسلوب السابق بأننا سنحتاج مثال الى إنواء

employeeللموظفينو وهذا الكالم ال يجوزو اذن ماذا لو كان عدد اا ! ؟... ^_^متغير

ومن هنا أوا وconstructorوهنا تكمن الحاجة للوكل الثاني وهو اا functionفي الواقع هو constructorمعلومة يجب أن تعلمها أن اا

بانواء وإرجاع constructorو ويقوم هذا اا ^_^ newمضاف له كلمة object _^* و كما أن ااthis داخل ااconstructor توير الى ااobject الجديد الذي نقوم بانوائهو وعندما يتم إنتهاء التنفيذ من اا

constructor يقوم على ارجاع ااobject بوكلdynamic *_*^_^ وبعد هذا الكالم بسيطو لنواهد مثاال يوضح ما ذكرناه ..واآلن


aneeshikmat@

2nees.com

CLASS KEYWORD ON JS: و لكن انتبه لكل لون موجود)شرح المثاا بالوريحة التالية(المثاا


aneeshikmat@

2nees.com

CLASS KEYWORD ON JS: شرح المثاا

functionكما تاللظ employeeNameأوا وأهم ماللظة هي أن اا هو وجود constructorطبيعيو لكن ما جعله

new employeeName عند تعريف ااobject و وكما تاللظ أيضاواستخدمت إلضافة أي من الدواا أو الخصائصو prototypeفإن اا

وبمثالنا أضفنا دالة طباعة اإلسمو وكان الوصوا لهذه الدالة يتم من خالا ااObject الذي قمنا بإنوائه ...

في Object Letiralو تخيل أن أي P:^_^ واآلن سأخبركم بمفاجأة pointerلكن اا constructorو نعمو !! constructorالواقع هو

^^ Global Constructor Objectالخاص به يؤشر على


aneeshikmat@

2nees.com

CLASS KEYWORD ON JSواآلنو سنتطرق بإذن هللا تعالى الى مفهوم الوراثة بالجافا سكربت

)Understanding inheritance(و وأوا ما أريد منك معرفته هو أنتسمى “propertyخاصية “ لديها jsالموجودة داخل اا objectجميع اا

prototype و تقوم هذه الخاصية“property ” بالتأشير علىobject) ..كما شاهدنا في المثاا السابق( prototypeآخر يدعى

الذي وصلنا اليه هو بذاته يملك أيضا prototype objectاآلن هذا اا Prototype و وااnull تعني في ااprototype عدم وجوده

وفي الواقعو عندما نصل) ..prototypeاسناد قيمة لل –عدم وجود (فهذا يعني أننا nullتساوي prototypeلمرلة نجد فيها أن قيمة اا

لكن ما هي هذه الحلقة التي انتهت ؟.. ^_^ وصلنا الى نهاية الحلقة


aneeshikmat@

2nees.com

CLASS KEYWORD ON JS(إن الحلقة التي انتهت وسنتحدث عنها هي مفهوم الوراثة بالجافا سكربت اللظ أننا نتحدث عن مفاهيم الجافا سكربت التي تسبق هذا اإلصدارو لم

) و أما كدواا وخصائص فقد نتحدث عن كليهما معا ”كمفاهيم“نتحدث عن الجديد بعد

و وكانتobjectداخل propertyعندما نحاوا الوصوا الى : الحلقة هيو سيقوم اا objectغير موجودة بداخل هذا اا propertyهذه

property بالبحث عن ااproperty داخل ااprototypeو إذا لمو سيقوم بالبحث داخلprototypeداخل اا propertyيجد أيضا هذه اا

و وهكذا تتم السلسلة prototype objectالخاص باا prototypeاا و وهذا هو مبدأ الوراثة فيnullتساوي prototypeطالما كانت نتيجة اا

الجافا سكربتو كما تاللظ أستمر بوراثة الخصائص لتى أجد ما أريد^_^أوأنتهي


aneeshikmat@

2nees.com

CLASS KEYWORD ON JSوالد فقطو prototypeبإمكانه أن يملك JS Objectاا : ماللظة مهمة

)single inheritance(والجافا سكربت تدعم الوراثة األلادية فقط

أو الدالة __proto__يمكننا إستخدام الخاصية Object.setPrototypeOf() إلسناد ااprototype الى ااobj

يحتوي new objectإلنواء ()Object.createالدالة jsكما تدعم اا prototype معين قمنا نحن بتحديده ...

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

... في الوريحة بعد التالية


aneeshikmat@

2nees.com

CLASS KEYWORD ON JS: شاهد المثاا

__proto__ خاصيةdeprecatedو لكنها مازالت مدعومة في^_^المتصحفاتو لكن ال ينصح باستخدامهاو خصوصا إذا كانت تهتم باألداء

... ^_^ بدال منها ()createوبإمكانك استخدام اا


aneeshikmat@

2nees.com

CLASS KEYWORD ON JS


aneeshikmat@

2nees.com

التي تحدثنا عنها، وحقيقة لم تكن ببالي inheritanceواآلن، شاهد فكرة ال ^_^ هذه الصورة حتى وجدتها مصادفة في أثناء البحث في هذا الموضوع

CLASS KEYWORD ON JS:هذا المثاا يوضح فكرة عملية على مبدأ الوراثة: 2مثاا

اللظ أن الفكرة تكمن فيمن schoolاستخدام اا

و studentخالا اا واللظ كيف أنني بالنهاية

studentاستخدمت اا أوبجيكت لطباعة كل من

اسم الطالب واسم المدرسة) .. School(من اا


aneeshikmat@

2nees.com

عليه صلى هللا عنه أن رسول هللا وعن سهل بن حنيف رضي هللا:وسلم قال

مسلم رواه

CLASS KEYWORD ON JS^_^التي طاا انتظارنا لتى وصلنا اليها CLASSواآلنو نأتي معا الى اا

يعتمد على أمرين js object modelشاهدنا بالورائح السابقةو كيف أن اا التي تطرقنا له في prototypeواا constructorsرئيسيين وهما اا

syntaxموضوع الوراثةو واآلنو سنتحدث عن وسيلة جديدة لكتابة اا و فاا) وسيلة جديدة(و واللظ أنني قلت js object modelالخاص باا classes ال تقوم بإنواء مفهوم جديد للjs object model _^* و وهذا

و سيكون من بكل تأكيد Classاألسلوب والذي سنقوم باستخدامه من خالا اا و وأهم ما يقدمه هذا األسلوب هو رؤية^_^الجديدة ES6من خصائص اا

..بنية تركيبية للويفرة البرمجية ذات سهولة ومرونة وأوضح للفهم والتتبع


aneeshikmat@

2nees.com

CLASS KEYWORD ON JSجديد syntaxو لكنه ذو !؟ functionفي الواقع هو classاا : ماللظة

و لذلك ال تقمconstructorsالذي يستخدم اا Functionإلنواء اا constructing objectsإذا كنت ال تفكر في استخدام اا Classبانواء

: في الجافا سكربت وهن Classهناك طريقتين إثنتين لتعريف اا (1class declaration(2class expression

*^_ class declarationولنبدأ اآلن باا


aneeshikmat@

2nees.com

CLASS KEYWORD ON JS1 (The class declaration : لتعريفClass من خالا هذه الطريقة)Class Declaration ( يلزمك القيام باستخدام الكلمة المحجوزة

“ class “ شاهد المثاا.... “ اسم الكالس “ ومن ثم :


aneeshikmat@

2nees.com

CLASS KEYWORD ON JS2 (The class expression :هذا األسلوب شبيه باألسلوب األواو لكن

واا bodyو وتبقى طريقة كتابة اا ...هنا لن تحتاج الى كتابة اسم الكالس Method شاهد المثاا... ^_^ هي ذاتها :


aneeshikmat@

2nees.com

CLASS KEYWORD ON JSلكن شاهد سهولة..^_^ مجددا Prototypeواآلنو نعود الى موضوع اا

..^_^ هذا األمر اآلن هي أي prototype methodsما أريد منك معرفته اآلن هو أن اا

Method يتم وضعها داخل ااClass Body ^_^ ...شاهد المثاا :


aneeshikmat@

2nees.com

CLASS KEYWORD ON JSThe Set & Get Method :تستخدم هذه الدواا إلنواء دواا يمكننا من

أو تغيير قيمتها classخاللها الوصوا الى القيم التي تستخدم ضمن نطاق اا الموضوع سهل.. constructorالحالية أو التي تم اسنادها من خالا اا

^^ classو سوى أننا سنستخدمها هذه المرة في اا ES5ولم يختلف عن اا

وانتبه للنتائج قبل اإلنتقاا الستعراض): في الوريحة التالية(شاهد المثاا : الويفرة البرمجية الخاصة بالنتائج دورة مجانية

- aneeshikm

[email protected]

CLASS KEYWORD ON JSدورة مجانية

- aneeshikm

[email protected]

CLASS KEYWORD ON JSImplementing inheritance in classes : لقد تحدثنا عن

الوراثة في هذا الموضوعو وشاهدنا سويا كم كان األمر مزعجا لتتبع اا Function الخو لكن هذا األسلوب تطور باا ..ووراثة كل منهما اآلخر

ES6 و فأصبح لدينا كلمة محجوزة وهيextendsو وجدت لتقدم لنالولدهاو بل extendsو لكن لم تأتي هذه اا *^_خدماتها في عالم الوراثة

و والذي لديه أي خبرة في لغة برمجةsuperأيضا هناك الكلمة المحجوزة أخرىو سيعلم مدى روعة هذه الكلمات وأهميتهاو أما الذي ال يعلم شيء عن

... ^_^ هذه الكلماتو فستدرك روعتها اآلن بإذن هللا تعالى


aneeshikmat@

2nees.com

CLASS KEYWORD ON JSextends : تستخدم ااextends لوراثة الخصائصOR static non-static من أيConstructor آخرو

class keywordهل وجد ضمن Constructorوبغض النظر عن اا *^_و فإنه ستتم الوراثة classأم لم يوجد ضمن

super : تستخدم ااsuper ألمرين اثنين :و إلستدعاء اا classالموجود داخل Constructorتستخدم داخل اا 1)

Parent Constructor ) ااConstructor الخاص بالكالس). الذي تم وراثته

الموجود داخل كالسو الستدعاء اا methodتستخدم داخل اا 2)static or non-static method من ااclass الذي تم وراثته

: شاهد المثاا بالوريحة التالية


aneeshikmat@

2nees.com

CLASS KEYWORD ON JSدورة مجانية

- aneeshikm

[email protected]

CLASS KEYWORD ON JSفي الجافا Classوهكذا نكون انتهينا بفضل هللا تعالى من موضوع اا

وما قبل مثل طريقة اا ES6لإلصدار (سكربتو وملخص ما تحدثنا عنه هو inherit قبل ااES6 ومن ثم التطرق لورلها بااES6 : (

(1CLASS(2Extends(3Super(4Get & Set Method(5Object in javascript(6Prototype(7Constructor(8Inheritance


aneeshikmat@

2nees.com شاهد جميع األمثلة التي تم تطبيقها وغيرها من هنا

اللهم انصر أهل الحق في كل مكانيذكر فيه اسمك

ويجاهد فيه إلعالء كلمتك ورفع رايتكوينتصر فيه ألهل الحق والمستضعفين من عبادك

...اللهم كن ألهل الحق في كل مكاناللهم انصر أهل الحق وإن جهلناهم

وعليك بأهل الباطل وإن غرتنا أسماؤهم وأشكالهماللهم اجعلنا نصرا للحق وال تجعلنا دون ذلك

اللهم آمين

FOR OF LOOPأسلوب جديد تم إضافته الى الجافا سكربت من اإلصدار For Of Loopاا

إلنواء للقة دوران تدور على العناصر for...ofالسادسو ويتم استخدام اا ,object(الموجودة في أي مجموعة أو فئة موجودة داخل جافا سكربت

array, map ...و كما أن هذا األسلوب يمكننا من تنفيذ جملة برمجية)الخ* ^_على كل عنصر تم جلبه على لدى للتعديل على أي من خصائصه

)Invoking Custom Hook With Statement (

: الصيغة العامة


aneeshikmat@

2nees.com

FOR OF LOOP: شرح الصيغة العامة

Variable : في كل عملية دورانو القيم التي يتم جلبها من الخصائص)property ( للobject

الكائن الذي يتم أخذ العناصر منه أثناء الدوران كل والدة على: Objectاا * ^_لدة

هي كتابة خاطئةو والصحيح“ لدا “ أو “ لدى “ :ماللظة في اللغة العربية “ لدة “ كتابها بالتاء المربوطة

):ولد/متن اللغة (جاء في معجم :وجاء فيه. »صار ولده: ولد يحد ولدا ولدة «فعله : وتقوا. جعله على لدةو أي منفردا ولده : تقوا). مصدر(كالعدة : الحدة «

من ذات لدتهو وعلى ذات لدته ومن ذي لدتهو أي من ذات نفسه ومن ذات ».جلس على لدتهو وعلى لدتهماو وعلى لدتهمو وعلى لدتهن : وتقوا. رأيه


aneeshikmat@

2nees.com

FOR OF LOOPنستخدمها For Loopدعونا نواهد أمثلة على For Ofقبل الحديث عن اا

أو Forأو For Inمثل For each شاهد المثاا :


aneeshikmat@

2nees.com

FOR OF LOOPواآلنو لن أتحدث عن شرح المثاا السابقو فتلك من أساسيات الجافا سكربتو

لكن ما سأذكره هو سلبيات تلك األساليبو والموكلة التي جائت من أجلها ااFor OF _^ *

1 (For In : break, continueال يمكنك استخدام * اللظ المثاا (القابلة للعد“ الخصائص “ تقوم بالدوران على جميع *

) السابقتقوم على ارجاع البيانات على شكل نصيو ولتى لو كان رقمو فإن ما *

وهذه ” 3“= ” 2“+ ” 1“وعند الجمع تصبح ” 1“يتم ارجاعه هو عملية سيئة

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

...بالنتائج أن تظهر كما رتبت داخل المصفوفة


aneeshikmat@

2nees.com

FOR OF LOOP2 (Foreach:

break, continueال يمكن استخدام اا * Array Objectsيمكن استخدامها فقط مع اا *

3 (Default For Loop :طويلة نوعا ماو وتلزمني بمعرفة عدد عناصر المصفوفة من خالا *

...lengthرقم أو من خالا استخدام الدالة ال يمكن الوصوا الى القيمة مباشرة من خاللهاو فستحتاج الى استخدام *

..المتواجد فيه للحصوا على القيمة indexالمصفوفة واا

* ^_أتت لتقوم بحل هذه المواكل التي وردت For Ofاآلنو فكرة اا وعليهاو لنواهد مثاال _^


aneeshikmat@

2nees.com

FOR OF LOOP: 1مثاا


aneeshikmat@

2nees.com

FOR OF LOOPobjectفي هذا المثاا سنقوم بالدوران على مصفوفة تحتوي :2مثاا

^_^بسهولة objectبداخلهاو وكيف يمكنني الوصوا الى قيم هذا اا

قبل varأو letاذا لم يتم تعريفها من خالا empInfoإنتبه أن : ماللظةempInfoاإلستخدام أو أثناء اإلستخدام سيظهر لك خطأ is not defined


aneeshikmat@

2nees.com

“0O” LITERALهي طريقة جديدة في الجافا سكربت لتعرف األرقام من النظام الثماني 0oاا

)octal(و وهذا األسلوب جاء ليسهل على المبرمجين عملهم للتعامل مع.النظام الثماني

تحويل النظام الثماني) دون تدخلنا(إن ما يقوم به الجافا سكربت بوكل داخلي .^_^ . binaryالى النظام العوري ومن ثم لفظ القيمة على أنها

: شاهد المثاا


aneeshikmat@

2nees.com

"0b” LITERAL0b يتم استخدام هذا ااLiteral من خالا اا ) رقم(إلنواءbinary

و في الحالة اإلفتراضيةو يقوم المبرمجين بتعريف األرقام بالوكل^_^مباشرة ومن ثم يتم binaryبتحويل هذا الرقم الى jsالعوريو ومن ثم يقوم اا

binaryسيمكنك من لفظ الرقم Literalلفظه في الذاكرةو لكن هذا ...^_^مباشرة

: شاهد المثاا


aneeshikmat@

2nees.com

عظيم من عظماء اإلسالمو 100: كتاب غيرو مجرى التاريخ

YIELD KEYWORD & FUN *()تم إدراج ميزة جديدة للجافا ECMAScriptفي اإلصدار السادس من

و ويتكون هذا ااJavaScript Generatorسكربتو تسمى Generator باستخدام الكلمة المحجوزةYield واستخدام ااfunction*() في الويفرة البرمجية ^_^

Yield keyword + functon * () syntax used => JS Generator

هي إضافة JS Generatorوباختصارو فإن الوظيفة التي يقدمها اا مجموعة من قيم) return(الرجاع functionطريقة جديدة لل

)Collection( في جملة الدوران -منطقي -و كما تقوم بإضافة اسلوب جديدالموجودة باا Collectionالستقباا القيم التي سيتم استرجاعها من اا

function* ()...


aneeshikmat@

2nees.com

YIELD KEYWORD & FUN *()التي سيتم انوائها هو إمكانية التوقف Generatorمن أهم مميزات هذه اا

واإلستمرار التي يمكن استخدامهاو مثال يمكنني أن أصل للعنصر الخامس من ثم أذهب لتنفيذ شيفرة برمجية أخرىو ومن ثم أتابع العملية Generatorاا

بأخذ العنصر السادس مباشرة دون الحاجة الى إعادة الدوران مثال أو المروركما سنواهد في الورائح ()nextعلى جميع القيمو ويتم هذا من خالا

و) value(تتميز بارجاع القيمة Generatorو كما أن اا ..القادمة)done ( بحيث تكون ااvalue هي القيمة المراد ارجاعها)وتكون أي ما

يوير الى Booleanيمثل doneو واا ) yieldيمكن ارجاعه من قبل اا انتهاء عملية اإلرجاع أم ال للدالة

^_^ واآلن لنواهد أمثلة عملية على الموضوع


aneeshikmat@

2nees.com

YIELD KEYWORD & FUN *()شاهد هذا المثاا التقليدي على كيفية استقباا مجموعة ): ES6قبل اا (سابقا

* ^_اآلن لننتقل الى الوريحة التالية ..من القيمو طريقة بسيطة جدا


aneeshikmat@

2nees.com

YIELD KEYWORD & FUN *():JS Generatorمثاا باستخدام اا شاهد هذا المثاا وانتبه جيدا لكل

^_^ما هو ملون هل انتهيت ؟

هل قمت بتنفيذ الويفرة البرمجية ؟هل ظهر لك خطأ كما هو موجود فيأسفل الصورة ؟


aneeshikmat@

2nees.com

YIELD KEYWORD & FUN *()الذي قمنا باستخدامه browsers.jsرسالة الخطأ هذه تخبرك بعدم قدرة اا

babelبعد تحميل اا compiler على تنفيذ ااGenerator أثناء ااRuntime ...اذا ما الحل ؟

الخاص أيضا باا browser-polyfill.jsالحل هو باستخدام أو تضمين اا Babel _^* و ويقوم ملف الجافا سكربت هذا على تضمين ااruntime

أو Babel nodeبوكل تلقائي في لاا استخدام أي من اا core jsواا Babel register قبل أي“ و وانتبه أن هذا الملف يجب أن يتم تضمينه

” ... Babelشيفرة برمجية خاصة ب This needs to be included before all your compiled Babel code.

على شكل babelطبعا يمكنك اإلستغناء عن استدعاء هذا الملف في لالة قمت باستخدام اا (babel/polyfill


aneeshikmat@

2nees.com

YIELD KEYWORD & FUN *(): واآلن لنواهد المثاا بوكله الكامل


aneeshikmat@

2nees.com

YIELD KEYWORD & FUN *()ولكن اللظ قبل هذاو لماذا قمت..^_^ nextاللظ هنا دور اا : 2مثاا

! داخل متغير ؟ ()collection_nameبتخزين


aneeshikmat@

2nees.com

YIELD KEYWORD & FUN *()داخل ()collection_nameفي المثاا السابقو لو لم نقم بتخزين اا .... Yieldمتغيرو فإن الناتج سيكون دائما أو قيمة


aneeshikmat@

2nees.com

YIELD KEYWORD & FUN *()و كما أننيconsoleمباشرة داخل اا valueهنا قمت باستدعاء اا : 3مثاا

..و ومن ثم استدعائها yieldقمت بحفظ مصفوفة داخل ألد اا


aneeshikmat@

2nees.com

YIELD KEYWORD & FUN *()وكأنها yieldفي هذا المثاا الجميلو اللظ أنني استخدمت اا : 4مثاا

return و وبهذا استطعت ارجاع مختلف البيانات وأنواعها)data type(... yieldمن خالا اا


aneeshikmat@

2nees.com

YIELD KEYWORD & FUN *()واآلنو وبعد هذا الموضوعو ننتقل الى جزئية أخرى في هذه الدورة

المتواضعةو لكن وقبل اإلنتقاا الى الموضوع الجديدو لنواهد جميع األمثلة)وال تنسى أن التطبيق هو المهم..(التي قمنا بعرضها في هذا الموضوع


aneeshikmat@

2nees.com

أعوذ بال من الويطان الرجيم

إن هللا مت لغد واتقوا هللا ا قد ولتنظر نفس م يا أيها الذين آمنوا اتقوا هللاخبير بما تعملون

صدق هللا العظيم

18: اآلية–سورة الحور

SET OBJECTcollectionوصوال لإلصدار الخامس من الجافا سكربتو لم يكن هناك

غير رقمي نستخدم اا indexو وكنا اذا رغبنا بتعريف Arrayسوى اا object و لكن هذا األمر لم يعد يكفي بعد اليومو فظهرمفهوم اا“SET”

)الهدف أكثر الترافية وأفضل أداء لتحقيق المهام( 6بالجافا سكربت لإلصدار

ليست مفهوما جديدا على لغات البرمجةو فهي معروفة SETطبعا اا : فهو SETالخو أما تعريف اا ..والجافا pythonلمبرمجين اا

سواء كانت هذه القيمال يمكن تكرارهاو قائمة مرتبة من القيم التي primitive أوobject ...^_^.


aneeshikmat@

2nees.com

https://developer.mozilla.org/en-US/docs/Glossary/Primitive�

SET OBJECTوالتي يمكننا Setواآلن لنواهد مثاال يوضح الصيغة البسيطة من اا

: ^_^استخدامها اللظ في هذا المثاا البسيط أن

يكتب فيها لرف اا ()Setاا S Capital...

.فهي الدالة المسؤولة عن إضافة عناصر جديدة للمصفوفة: addأما اا *^_ Setهي الدالة المسؤولة عن تحديد لجم اا : sizeاا

..ثم انتقل للوريحة التالية ..قم بتنفيذ المثاا


aneeshikmat@

2nees.com

SET OBJECT:1مثاا

كانت على شكل 24اللظ الفكرة المهمة في هذا المثااو عملية اإلضافة للرقم في السطر الثالثو لكن” 24“رقمي في األوا والثانيو وعلى شكل نصي

لماذا برأيك ؟! ؟ 3سيكون Setالنتيجة النهائية لحجم اا تمنع التكرار كما ذكرناو ولذلك فإن التكرار يتم Setالجواب يكمن بأن اا

^_^النصية 24الرقمية واا 24تجاهلهو لكنه بذات الوقت ميز بين قيمة ” anees”-”24”-24ويتم اعتماد أوا قيمة ادخلت فقطو وبهذا يصبح الوكل


aneeshikmat@

2nees.com

SET OBJECTالتي نرغب بانوائها مباشرة دون Setيمكننا تعريف قيمة ابتدائية لل : 2مثاا

و ويكون ذلك من خالا ارساا القيم على شكل مصفوفة()addاستخدام الدالة : لنواهد المثاا..^_^ constructorالى

بالمناسبة عملية المقارنة (اللظ هنا أن عملية تجاهل التكرار تتم بوكل تلقائيو أو objو كم أن القيم التي تم ارسالها يمكن أن تكون === )تتم بالوكل التالي

الخ ..مصفوفة أو رقم عادي


aneeshikmat@

2nees.com


و هذه الدالة تقوم على التأكد منhasفي هذا المثاا تطرقنا لدالة جديدة تدعى أم الو وتقوم بنائا على ذلك بارجاع setأن قيمة ما موجودة داخل اا

True or False ^_^


aneeshikmat@

2nees.com


و شاهد هنا النتائج setلحذف عنصر موجود داخل اا deleteتستخدم الدالة ... كيف تغيرت بعد عملية الحذف


aneeshikmat@

2nees.com


و هذه الدالة تقوم على لذف جميع()clearفي هذا المثاا قمنا باستخدام الدالة .. Setالقيم الموجودة داخل اا


aneeshikmat@

2nees.com

SET OBJECT؟ Setواآلنو كيف يمكننا طباعة العناصر الموجودة داخل اا

^_^التي تعلمناها سابقا For ofمن خالا اا : الجواب

: 6لنواهد المثاا

اننا نضمن عدم وجود أي Setمن أهم النقاط التي تدعونا الى استخدام اا تعديل على نوع البيانات التي يتم ارسالهاو فالنصي يبقى نصيو والرقمي يبقى

الخ...رقمياو والمصفوفة تبقى مصفوفة


aneeshikmat@

2nees.com

SET OBJECTبإذن هللا تعالىو Setواآلن لنواهد المثاا األخير على اا : 7لنواهد المثاا

:^_^أخرى Setولفظها في Setوالفكرة من هذا المثاا هو طريقة نسخ

واآلنو لنواهد جميع األمثلة السابقة بإذن هللا تعالىو لكن انتبه بأن التطبيق هو ... األساس


aneeshikmat@

2nees.com

العبد الموفق هو الذي ال يغيب عن قلبه وشعوره وإلساسه نعمة هللا عليه في كل موقف وكل موهدو فيظل دائما في لمد هللا وشكره

والثناء عليه لما هو فيه

الحمد ل عدد ما كانو وعدد ما يكون ..الحمد ل رب العالمينالحمد ل رب العالمين... وعدد الحركات والسكون

لكم وفوائد

MAP OBJECTMap objو اا Map objectفي هذا الموضوع الجميلو سنتحدث عن اا

والتي ترتبط بقيم ) التي ال يمكن تكرارها(الفريدة keysهو مجموعة من اا )values( و هذه ااvalues وااkeys يمكن أن تكونobject

reference ويمكن أن تكونprimitive types..وتعريفها Setالم نتحدث عن اا ! والسؤاا اآلنو ما الجديد في الموضوع ؟

!؟ Mapوطرق استخدامهاو فلماذا جئنا باا

و“عبثا “ أوا ما أريد منك معرفتهو هو أنه ال يوجد أمر في البرمجة وضع .لذلك ففرق الكلمة يعني فرق الهدف في اإلستخدام وإن استخدما لنفس الغرض


aneeshikmat@

2nees.com

MAP OBJECT: أما بالنسبة إلجابات األسئلة السابقةو فهي

...معاو وليست القيم فقط Key/valueالجديد هنا أننا نقوم بإضافة اا !فما هو الفرق ؟! ؟ objectيوبه شكل اا Key/Valueلكن شكل اا

: الفروقات mapو لكن اا Stringالخاص به keyيمكن أن يكون اا objاا 1)

* ^_أي قيمة keyيمكن أن يكون اا trackبسهولةو بينما تحتاج لعمل mapيمكنك الحصوا على لجم اا 2)

.objectلل في لاالت منها أن تكون objectبوكل أفضل من اا mapتستخدم اا 3)

أو عندما يكون جميع اا runtimeأثناء اا unkownتمثل keyاا keys وااvalues لهما نفس ااdata type .._^*


aneeshikmat@

2nees.com

MAP OBJECTواآلن

لنواهد أمثلة

على :الموضوع

: 1مثاا


aneeshikmat@

2nees.com

MAP OBJECT: 2مثاا


aneeshikmat@

2nees.com

MAP OBJECT: 3مثاا

: واآلنو لنواهد تطبيق لجميع األمثلة السابقة


aneeshikmat@

2nees.com

JS MODULES...^_^واآلنو ركز معي في هذا الموضوع

عبارة فقط عن طريقة لتغليف الويفرة البرمجية moduleالجافا سكربت )Packaging( الخاصة بالجافا سكربت والمرتبطة معا لتنفيذ مهام محددة

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

Module ...

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

Module .. ظهر في ااES6 طريقة تدعم عدة طرق أخرىو وبذات الوقت^_^.. serverواا Browserيتم استخدامها من قبل اا


aneeshikmat@

2nees.com

JS MODULESيتم إنوائه من خالا ملف moduleيتم تمثيل أي ES6 moduleفي اا

الذي نرغب بانوائهو واآلن لنأخذ مثاال moduleمنفصل يسمى باسم اا سيقوم بحساب المعدا للطلبةو وسنضيف مثال دالة moduleا

و طبعا الموضوع سهلو لكن^^... السترجاع مجموع العالمات و الذي سيمكننا بالمستقبل من استخدامه في moduleالفكرة هي بانواء اا

... ^_^ موروع آخر دون الحاجة إلعادة الكتابة

module :calcAvgاسم اا calcAvg.js: اسم الملف


aneeshikmat@

2nees.com

JS MODULESو وهذه الكلمة هي التي ستسمح لنا exportفي هذا المثاا اللظ وجود : مثاا

بتصدير هذا الكالسويمكن استخدامها مع

..دواا منفصلة أيضا

أما الصورة التي باألسفل فهي لطريقة

: moduleتضمين


aneeshikmat@

2nees.com

JS MODULESالتي تم استخدامهاو فهي تعني تمضين اا Importبالنسبة لل : 1ماللظة Class الذي تم عملExport له من الملف المسمى “calcAvg ”)ليس

^^.... الخاص بالملف عند التضمين extمن الضرورة وضع اا

لن أقوم بالخوض مفصال في هي هذا الجزءو ولن تستطيع تطبيق: 2ماللظة المثاا الى بعد اإلطالع أو تنفيذ أو العمل على مجموعة من المكاتب المسوؤلة

و ولهذا قمت بوضع المثاا هنا فقطو وعند التنفيذ Packaging Jsإدارة اا وبإمكانك البحث عن ... require is not definedسيعطيك خطأ Webpack أو أن تعمل علىnode.js أوio.js.. الخ

وإن كان لنا نصيب بعد من هذه الحياةو فيسرني بإذن هللا تعالى أن أقدم دورة .وفقنا هللا وإياكم لكل خير.. ^_^ .....خاصة بهذا الموضوع


aneeshikmat@

2nees.com

أعوذ بال من الويطان الرجيما ن ود لم الحات سيجعل لهم الر )96(إن الذين آمنوا وعملوا الص

صدق هللا العظيم

جزء من تفسير اآلية للقرطبيإن الذين آمنوا أي صدقوا وعملوا الصالحات سيجعل لهم الرلمن ودا

....أي لبا في قلوب عباده

{96}سورة مريم

الخاتمةواآلنو وبفضل هللا تعالى ومنه ورلمته وكرمه عليناو فإننا نضع لمساتنا

األخيرة على هذه الدورة المتواضعةو لمسات قليلة وننتهي من هذه الصفحات و وكم يصعب علينا أن نودعكم الى ES6القالا التي تحدثنا فيها سويا عن اا

دورة أخرىو لكن هي الحياةو تأخذنا وإياكم لنبحر مجددا في هذه الدنيا ونتعلمونكتوف المزيدو واآلن وقبل أن نبحرو أذكر مجددا بأن هذه الدورة هي دورة

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

...اللهم قد بلغتو اللهم فاشهد..يخالف شرعه الذي شرعه لنا إخوانيو أذكركم بأن هذا العمل هو عمل بوريو ال يمكنه أن يصل الى الكماا

والتمامو وبهذا فإننا إن أصبناو فهذا بفضل هللا تعالى عليناو وإن أخطئناو فمن. وهللا ولي التوفيق... أنفسنا

اللهم اغفر لي ولوالدي وللمسلمين أليائهم وأمواتهم إنك سميع عليم رليم كريم مجيبالدعاء


aneeshikmat@

2nees.com

وآخر دعوانا أن الحمد ل رب العالمين

ecmascript 6 (es6) جافا سكربت (6)

Education