ﺑﺴﻢ ﷲ ﺍﻟﺮﺣﻤﻦ ﺍﻟﺮﺣﻴﻢ ﺩﻭﺭﺓ: ECMAScript 6 ) ﺗﺤﺪﻳﺪﺍ ﻟﻠﺠﺎﻓﺎ ﺳﻜﺮﺑﺖ( ﺗﻘﺪﻳﻢ: ﺃﻧﻴﺲ ﺣﻜﻤﺖ ﺃﺑﻮ ﺣﻤﻴﺪ. ﺍﻟﺒﺮﻳﺪ ﺍﻹﻟﻜﺘﺮﻭﻧﻲ: nees.com 2 aneeshikmat@ ﺍﻟﻤﻮﻗﻊ ﺍﻹﻟﻜﺘﺮﻭﻧﻲ: nees.com 2 www. ﺩﻭﺭﺓ ﻣﺠﺎﻧﻴﺔ- [email protected]
بسم هللا الرحمن الرحيم) تحديدا للجافا سكربت( ECMAScript 6: دورة.أنيس حكمت أبو حميد: تقديم
@nees.com2aneeshikmat: البريد اإللكتروني.nees.com2www: الموقع اإللكتروني
دورة مجانية -
aneeshikmat@
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
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
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
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
الشيفرة ..ناتج تطبيق المثال*_*البرمجية في الصفحة التالية
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
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في الجافا 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
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
SET OBJECT:3مثاا
و هذه الدالة تقوم على التأكد منhasفي هذا المثاا تطرقنا لدالة جديدة تدعى أم الو وتقوم بنائا على ذلك بارجاع setأن قيمة ما موجودة داخل اا
True or False ^_^
دورة مجانية -
aneeshikmat@
2nees.com
SET OBJECT:4مثاا
و شاهد هنا النتائج setلحذف عنصر موجود داخل اا deleteتستخدم الدالة ... كيف تغيرت بعد عملية الحذف
دورة مجانية -
aneeshikmat@
2nees.com
SET OBJECT:5مثاا
و هذه الدالة تقوم على لذف جميع()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
وآخر دعوانا أن الحمد ل رب العالمين