تعلم جافا سكربت: الكورس الكامل ـ الجزء الثاني

سبتمبر 22، 2021 | 15 دقيقة قراءة
S
كتبها المحرر
تعلم جافا سكربت: الكورس الكامل ـ الجزء الثاني

1. ماهي المتغيرات (Variables):

اغلب ما سنقوم بتعلمه و كتابته لاحقا سيكون ضمن محرر الاوامر (console) لذلك لنفتحه ونجهز انفسنا لما يلي. لقد تعرفنا سابقا على بعض انواع البيانات (راجع المقالة الاولى هنا) وقمنا بالتعرف على بعض الامور الاساسية لكن هناك مشكلة واحدة , كيف يمكن للبرنامج ان يتذكر الامور التي نكتبها؟

مثلا لنكتب النص التالي ضمن محرر الاوامر console :

  "I like to eat Kunafa" + "!"
  // result : "I like to eat Kunafa!"

عندما نضغط enter نلاحظ يظهر النص كاملا مدموجا ("I like to eat Kunafa!") لنفرض مثلا اننا احتجنا لذلك النص في مكان أخر , وحسب ما نعرفه سابقا سنعيد كتابة هذا النص مرة ثانية يدويا لايوجد وسيلة اخرى , تخيل اننا نحتاج هذا النص في اكثر من مكان أو لاكثر من مئة مرة مثلا , هذا امر مزعج جدا في الحقيقة فالكمبيوتر اساسا هو اداة من المفترض ان تسهل علينا الامور لا ان تعقدها بان نكتب الشيء ذاته مرارا وتكرارا .

اذا نحن بحاجة لطريقة لحفظ البيانات لكي لا نضطر لفعل ذلك مجددا , لغة جافاسكربت تتيح لنا شيء جديدا يسمى المتغيرات (variables) او يمكن ان نسميها متحولات .

اذا المتغيرات أو المتحولات (variables) ببساطة هي حاويات لحفظ البيانات ضمن ذاكرة الكمبيوتر ويمكن انشاء هذه المتغيرات بعدة طرق منها استخدام الكلمة المفتاحية var , اذا يمكننا حفظ النص السابق ضمن متغير ما نستطيع انشاؤه كما يلي:

  var omar = "I like to eat Kunafa" + "!":
  // if we do this (we call to see the content of the variable)
  omar;
  // result will be: "I like to eat Kunafa!"

اذا كلما احتجنا لهذا النص في اي مكان ضمن البرنامج يكفي بان نستعين بالمتغير المسمى omar لنحصل على النص الذي نريده , تخيل -يرعاك الله- لو كانت مجموعة من العمليات الرياضية المعقدة ونريد كتابتها بدون متغيرات سيكون ذلك بمثابة تعذيب لكن المتغيرات (variables) اختصرت علينا جهدا كبيرا .

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

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

احدى مميزات المتغيرات انها تتيح اضافة نوع من التسمية المميزة (label) لمجموعة من البيانات بحيث يستطيع القارىء والبرنامج التعرف عليها من خلال تلك التسمية والرجوع اليها عند الحاجة

اي نستطيع اجراء العمليات التالية فقط على المتغيرات:

  • انشاء متغير مع تسمية واضحة تحدد نوع ومحتوى المتغير (تحدد من قبل المبرمج)
  • تخزين او تعديل المعلومات المخزنة ضمن المتغير
  • اضافة مرجع (reference) (مكان محدد ضمن الذاكرة ذي عنوان مميز) للمعلومات المخزنة ضمن المتحول

لاحظنا ضمن الامثلة السابقة اننا نستعمل المعامل الرياضي (=) لتعيين قيمة ما الى متغير , في الحقيقة ان الاشارة (=) ضمن لغة جافاسكربت تختلف تماما عن معناها الرياضي المعروف وهو المساواة , بل في لغة جافاسكربت هي تعني تعيين قيمة ما الى اخرها . ربما قد يسأل احدهم اذا كيف نقوم بالمقارنة او المساواة بين قيمتين مفترضتين ؟ والجواب ان جافاسكربت تتيح معاملين رياضين خاصين لهذا الغرض هما (==) و (===) سنقوم بمناقشة الفرق بينهما لاحقا

يجب الانتباه الى حقيقة ان المتغير بحد ذاته ليس قيمة (او نوع من البيانات الاساسية) بل هو مكان لتخزين (حاوية) القيم (البيانات) وتمثيلها باسم مميز .

في الحقيقة ان التمرين والكتابة اليدوية هي افضل وسيلة للتعلم لذلك سنلحق الاقسام اللاحقة بتمارين بسيطة لتنشيط عقل المتعلم.

2- كيف ننشىء متغير (var, let, const):

قبل ان نشرع بشرح كيفية انشاء المتغيرات (variables) لابد من ذكر القواعد العامة لتسمية المتغيرات وهي كالاتي:

  • اسماء المتغيرات يجب ان لا تبدء بارقام او رموز (باستثناء الرمزين _ و $)
  • اسماء المتغيرات حساسة لحالة الاحرف (احرف صغيرة او كبيرة) فعلى سبيل المثال ان المتحول myName هو متحول مختلف تماما عن المتحول myname ولذلك يجب – قدر الامكان – الابتعاد عن تسمية متحولين بنفس الاسم ولكن بحالات احرف مختلفة
  • لايجب تسمية المتغيرات باسماء مطابقة للكلمات المفتاحية المدمجة ضمن اللغة

يوجد ثلاث طرق معروفة لانشاء اي متغير هي كالتالي

1. عن طريق الكلمة المفتاحية var:

عموما يمكن انشاء اي متغير ضمن جافاسكربت باستخدام الكلمة المفتاحية (var) كما يلي :

  var myName = 'Arya';
  console.log(myName);
  // Output: Arya

لننظر قليلا ونرى ماذا حصل هنا:

  1. var هي اختصار لكلمة (variable) وهي كلمة مفتاحية اساسية في لغة جافاسكربت تستخدم لانشاء متغير جديد
  2. myName هو اسم المتغير, نقوم بتحويل اول حرف من القسم الثاني الى حرف كبير.
  3. المعامل المنطقي (=) يسمى معامل الاضافة (اضافة القيمة الى المتغير) (assignment operator), يقوم باضافة القيمة ('Arya') الى المتحول (myName)
  4. ('Arya') هي القيمة المضافة بواسطة (=) الى المتحول myName (لاحظ ان هذه القيمة هي نص string). يمكن التعبير عن ذلك ايضا بشكل اخر: تم انشاء المتحول myName وفق قيمة مبدئية (اولية) هي 'Arya'
  5. اخيرا وليس اخرا السطر الثاني يفيد اظهار محتوى او قيمة المتحول ('Arya') باستخدام اسم المتحول كمرجع للوصول الى هذا النص: console.log(myName)

كما لاحظنا سابقا , اذا اردنا تسمية متحول ما وكانت هذه التسمية مكونة من اكثر من عبارة فاننا نلجأ الى ما يسمى (camel case) . هذا التقليد (او الفكرة) هو فكرة اساسية مستعملة بكثرة ضمن جافاسكربت وتفيد هذه الفكرة بانه اذا اردنا اعطاء اسم متغير يحوي اكثر من كلمة وجمعها في اسم واحد فان اول حرف دائما يكون بحالة حرف صغير وبعد ذلك عند دمج الكلمة التالية فان اول حرف منها يكون حالة حرف كبير مثلا : userAccountDetails.

2. عن طريق الكلمة المفتاحية let:

حدثت الكثير من التطورات على لغة جافاسكربت في عام 2015 , كان احد ابرز هذه التطورات هو اضافة كلمات مفتاحية جديدة لانشاء المتغيرات هما const و let, لكن نظرا لوجود الكثير من البرامج المكتوبة اعتمادا على varكان لا بد من التعرف عليها ولو بشكل بسيط . في الحقيقة ان معظم الكود (الاوامر او البرامج سمها ما شئت) في هذه السلسلة تعتمد على const و let لوجود بعض المميزات التي تجعل معظم المبرمجين يلجؤون لها بدلا من var والتي سنطلع عليها الان.

لنعالج اولا الكلمة المفتاحية let , تشير الكامة المفتاحية let الى متغير يمكن تغيير قيمته لاحقا الى قيمة مختلفة عند الضرورة , لنأخذ المثال التالي:

let meal = 'Enchiladas';
console.log(meal); // Output: Enchiladas
meal = 'Burrito';
console.log(meal); // Output: Burrito

كما نلاحظ في المثال السابق انشئنا متغير يسمى meal يحوي القيمة النصية 'Enchiladas' ومن ثم نظهر القيمة بواسطة console.log(). في السطر الثالث قمنا باعادة تغيير قيمة المتحول meal الى قيمة جديدة هي 'Burrito' بواسطة معامل الانشاء او التعيين = (assignment operator =) .

هناك مفهوم اخر لابد من التعرف عليه عندما نتعامل مع الكلمات المفتاحية let و var هو انه بامكاننا انشاء متغير ما بدون تعيين اي قيمة له , في هذه الحالة يقوم الكمبيوتر بشكل تلقائي بتعيين القيمة undefined الى المتغير السابق , لنأخذ المثال التالي:

  let price;
  console.log(price); // Output: undefined
  price = 350;
  console.log(price); // Output: 350

لنناقش قليلا ما حدث:

  • عندما لا نعين قيمة ما الى متغير قمنا بانشاءه باستخدام الكلمة المفتاحية let , عندئذ يعطى ذلك المتغير بشكل تلقائي القيمة undefined
  • يمكننا اعادة تعيين قيمة ذلك المتغير باستخدام معامل التعيين (الاشارة =)

3. عن طريق الكلمة المفتاحية const:

تم اضافة الكلمة المفتاحية const وهي اختصار للكلمة (constant) ضمن التحديثات التي اضيفت عام 2015 ضمن حزمة التحديثات ES6 , كما هو الحال بالنسبة ل let و var فان هذه الكلمة المفتاحية const تتيح حفظ اي نوع من البيانات كما ايضا يمكن انشاءه بنفس الطريقة . لناخذ مثال بسيطا:

  const myName = 'Gilberto';
  console.log(myName); // Output: Gilberto

تختلف const بشكل جذري عن let حيث ان القيمة المحفوظة ضمنها لا يمكن بتاتا تغير محتواها اي هي بمثابة ثابت لا يمكن تغيير قيمته واذا حاولنا ذلك نلاحظ تظهر النتيجة TypeError ايضا نلاحظ المتغيرات الثابتة التي يتم انشاؤها بهذه الطريقة (باستخدام const) يجب دائما اعطاء قيمة لها عند انشاءها اول مرة , اذا حاولنا انشاء متغير باستخدام const بدون قيمة سوف يظهر لنا خطأ مباشرة SyntaxError.

لربما قد يحتار المبرمج ويسأل نفسه ايهما يستخدم let أم const؟ والجواب بسيط , لنفكر قليلا فيما اذا احتجنا لتغيير قيمة المتغير لاحقا ام لا , اذا احتجنا لتغيير قيمة المتغير نستعمل let , فيما عدا ذلك نستعمل const.

تمارين بسيطة:

افتح محرر الاوامر console ولنقم بالتمارين الاتية:

تمرين 1:

  • في ظل ماتعلمناه سابقا قم بانشاء المتغير وليكن اسمه favouriteFood باستعمال الكلمة المفتاحية var وقم بتعيين قيمة ما ولتكن مثلا "pizza".
  • قم باظهار قيمة المتحول favouriteFood ضمن الكونسول باستخدام الوظيفة console.log()

تمرين 2:

  • قم بانشاء متغير جديد وليكن اسمه changeMe باستخدام الكلمة المفتاحية let وقم بتعيين القيمة true ضمن هذا المتغير
  • في السطر التالي قم بتغيير قيمة المتغير السابق changeMe الى القيمة false , لكي نتأكد من ان قيمة changeMe قد تغيرت نقوم باستعمال الوظيفة console.log() لاظهار قيمة المتغير السابق.

تمرين 3:

  • قم بانشاء متغير جديد وليكن اسمه entree باستخدام الكلمة المفتاحية const وقم بتعيين القيمة مثلا "John"
  • لنقم باستعمال الوظيفة console.log() لاظهار قيمة المتغير السابق
  • حسنا , لنتأكد ماذا سيحصل اذا حاولنا تحديث (اعادة تعيين) قيمة المتغير السابق بأن نكتب السطر التالي ضمن االكونسول ولاحظ ما سيحصل
  entree = 'Tacos'

سيظهر لنا الخطأ التالي

TypeError: Assignment to constant variable.

3- استخدام معامل التعيين (=) في العمليات الرياضية (Assignment Operator Mathematical)

لننظر قليلا ونعالج كيف يمكن استعمال المتغيرات و معاملات العمليات الحسابية (جمع ,طرح, ضرب....) لحساب قيم جديدة و تعيينها الى ذلك المتغير كما في المثال التالي:

  let w = 4;
  w = w + 1;

  console.log(w); // Output: 5

في المثال السابق انشئنا المتغير w وقم بتعيين الرقم 4 لذلك المتغير . اما في السطر التالي w=w+1 فيعني اننا نريد زيادة قيمة المتحول w من القيمة 4 الى 5 (بشكل مفصل نريد ان نعطي قيمة جديدة ل w عبر اضافة الرقم 1 الى القيمة السابقة لها وهي 4 لكي تصبح القيمة الجديدة هي 5).

يوجد هناك طريقة اخرى لاعادة تعيين قيمة المتغير w عير العمليات الرياضية وهي باستخدام بعض معاملات اعادة التعيين الرياضية المدمجة ضمن اللغة بحيث يمكننا اعادة كتابة المثال السابق كما يلي:

  let w = 4;
  w += 1;

  console.log(w); // Output: 5

في هذا المثال قم باستعمال المعامل الرياضي (=+) لاعادة تعيين قيمة w. في الحقيقة اننا نقوم بالعملية رياضية للمعامل الاول وهو الجمع + بجمع الطرف الثاني الى قيمة المتغير القديمة لاعطاء القيمة الجديدة وتعيد تعيين قيمة w الى القيمة الجديدة (اي حمع قيمة المتغير الى الطرف الثاني وانتاج قيمة جديدة يتم تعيينها لذلك المتغير ).

ايضا يوجد بعض المعاملات الرياضية الاخرى التي تفيد نفس المبدأ : =- , =* , =/ . اليكم بعض الامثلة:

  let x = 20;
  x -= 5; // Can be written as x = x - 5
  console.log(x); // Output: 15

  let y = 50;
  y *= 2; // Can be written as y = y * 2
  console.log(y); // Output: 100

  let z = 8;
  z /= 2; // Can be written as z = z / 2
  console.log(z); // Output: 4
تمارين بسيطة:

افتح محرر الاوامر console ولنقم بالتمارين الاتية: تمرين:

  • لنقم بانشاء اربع متغيرات , وليكن اولها ذو الاسم levelUp ونقوم بتعيين القيمة 5 ضمنه , المتغير الثاني powerLevel ونقوم بتعيين القيمة 300 ضمنه , المتغير الثالث multiplieByTen ولتكن قيمته 12 , المتغير الرابع quarterMe ولتكن قيمته 16
  • استعمل المعامل المنطقي =+ لكي نزيد قيمة المتحول levelUp بمقدار 2 واستعمل console.log() لاظهار القيمة النهائية
  • استعمل المعامل المنطقي =- لكي ننقص قيمة المتحول powerLevel بمقدار 50 واستعمل console.log() لاظهار القيمة النهائية
  • استعمل المعامل المنطقي =* لكي نضرب قيمة المتحول multiplieByTen بالرقم 10 واستعمل console.log() لاظهار القيمة النهائية
  • استعمل المعامل المنطقي =/ لكي نقسم قيمة المتحول quarterMeعلى الرقم 4 واستعمل console.log() لاظهار القيمة النهائية

4- بعض المعاملات المنطقية (increment ++ و decrement --):

يوجد الكثير من المعاملات الرياضية لكن من اكثرها شيوعا واستخداما هما : المعامل ++ (increment operator) والمعامل - - (decrement operator)

يفيد المعامل الاول ++ بزيادة قيمة المتغير برقم واحد وكذلك المعامل الثاني - - يفيد بانقاص قيمة المتغير برقم واحد . اليك بعض الامثلة:

  let a = 10;
  a++;
  console.log(a); // Output: 11

  let b = 20;
  b--;
  console.log(b); // Output: 19

كما هو الحال مع المعاملات الرياضية السابقة ( =+ , =- , =* , =/ ) يتم تحديث و اعادة تعيين تلك القيمة الى ذلك المتغير

تمارين بسيطة:

لنفتح محرر الاوامر console ونقم بالتمارين التالية

تمرين:

  • لنقم بانشاء متحولين , الاول اسمه gainedDollar و قيمته 5 , والثاني اسمه lostDollar قيمته 7 .
  • لنستخدم المعامل (++) لكي نزيد قيمة المتحول gainedDollar ونستعمل الوظيفة console.log() لاظهار النتيجة
  • لنستخدم المعامل (--) لكي ننقص قيمة المتحول lostDollar ونستعمل الوظيفة console.log() لاظهار النتيجة

5- دمج النصوص باستخدام المتغيرات (Concatenation with variables):

كما ذكرنا ضمن الاقسام السابقة نستطبع تعيين قيم نصية الى متغيرات , لنعالج الان كيف يمكننا دمج تلك القيم النصية المحفوظة ضمن عدة متغيرات ضمن قيمة نصية واحدة.

يفيدنا معامل الجمع + في جمع قيمتين نصيتين حتى وان كانت محفوظة ضمن متغيرات ما , لنأخذ المثال التالي:

  let myPet = 'armadillo';
  console.log('I own a pet ' + myPet + '.');
  // Output: 'I own a pet armadillo.'

في المثال السابق قمنا بتعيين القيمة 'armadillo' الى المتغير myPet . في السطر الثاني يفيد معامل الجمع + يستعمل لدمج ثلاث قيم نصية وهي: 'I own a pet' , القيمة المحفوظة ضمن المتغير myPet , والنص '.' .نقوم اظهار نتيجة هذا الدمج الى الكونسول كالتالي:

  I own a pet armadillo.
تمارين بسيطة:

لنفتح محرر الاوامر console ونقوم بالتمرين التالي

تمرين:

  • لنقم بانشاء متحول ما وليكن اسمه favouriteAnimal و نحفظ ضمنه اي قيمة ولتكن "Parrot"
  • لنستعمل الوظيفة console.log() لكي نطبع ما يماثل النتيجة التالية : "My favorite animal : ANIMAL" الى الكونسول باستخدام دمج النصوص باستخدام المعامل المنطقي + لاستبدال العبارة ANIMAL بالقيمة الموجودة ضمن المتغير favouriteAnimal .

6- كيفية صياغة النصوص الكتابية (String interpolation):

ضمن حزمة التحديثات الجديدة (ES6) في لغة جافاسكربت تم اضافة مبدأ جديد لاضافة قيم متغيرات مباشرة ضمن النصوص باستخدام ما يسمى (template literals). لنأخذ المثال التالي:

  const myPet = 'armadillo';
  console.log(`I own a pet ${myPet}.`);
  // Output: I own a pet armadillo.

لنناقش ذلك:

  • النموذج الحرفي (template literal) يقوم على مبدأ احاطة النص بما يسمى (back ticks `…..`) هذا الرمز موجود في اعلى يسار لوحة المفاتيح ويوافق الحرف ذ .
  • ضمن هذين الرمزين نلاحظ الجملة ${myPet} . قيمة المتحول myPet يتم اضافتها مباشرة ضمن ذلك النموذج الحرفي (template literal).
  • عندما نطبع العبارة السابقة ضمن الكونسول `I own a pet ${myPet}.` فان النتيجة التي تظهر هو النص التالي: 'I own a pet armadillo'

يفيد النموذج الحرفي (template literal) بشكل هائل في تحسين قدرة المبرمج على قراءة الكود بسهولة فهي تتيح للمبرمج معرفة النتيجة المتوقعة للنص المراد الحصول عليه كما تسمح لنا بكتابة اي رمز نريده ضمن النص دون الحاجة للانتباه لنوعية رموز التنصيص (عادة تنشئ النصوص باستخدام رموز تنصيص احادية او ثنائية وقد ربما تصادفنا حالات نريد استعمال هذين الرمزين ضمن نص ما او بعض الرموز الاخرى و الاستغناء عن حرف التجاهل backslash / , سوف نناقش هذا لاحقا)

تمارين بسيطة:

لنفتح محرر الاوامر console ونقوم بالتمرين التالي

تمرين:

  • لنقم بانشاء متحول ما وليكن اسمه myName و نحفظ ضمنه اي قيمة ولتكن اسمك مثلا (او "Mark")
  • لنقم بانشاء متحول ثاني وليكن اسمه myCity ونحفظ ضمنه اسم اي مدينة تفضلها انت (او "Germany")
  • لنستعمل الوظيفة console.log() لكي نطبع ما يماثل النتيجة التالية :
  "My name is NAME and my favorite city is CITY"

الى الكونسول باستخدام النموذج الحرفي (template literal) لاستبدال العبارة NAME بالقيمة الموجودة ضمن المتغير myName وايضا كذلك الامر لاستبدال CITY بقيمة المتحول myCity

7- المعامل المنطقي typeof:

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

  const unknown1 = 'foo';
  console.log(typeof unknown1); // Output: string

  const unknown2 = 10;
  console.log(typeof unknown2); // Output: number

  const unknown3 = true;
  console.log(typeof unknown3); // Output: boolean

للتوضيح فقط سنتطرق للمثال الاول فقط وبما أن قيمة المتغير المسمى unknown1 هي 'foo' وكما نعرف فهي قيمة نصية فان العبارة التالية : typeof unknown1 سوف تعطينا النتيجة التالية 'string'

تمارين بسيطة:

لنفتح محرر الاوامر console ونقوم بالتمرين التالي

تمرين:

  • لننشىء متحول ما وليكن newVariable باستخدام let بدون اي قيمة مبدئية ونستعمل الوظيفة console.log() ونضع ضمن الاقواس : typeof newVariable , نلاحظ نحصل على undefined (لا يوجد اي قيمة لذلك نحصل على النتيجة السابقة)
  • لنقم بتعيين قيمة جديدة للمتحول السابق ولتكن مثلا 25 , ونعيد كتابة العبارة السابقة : typeof newVariable , نلاحظ نحصل على النتيجة number كوننا خزنا رقم ضمن ذلك المتحول

- مراجعة (الخلاصة):

لنقم بمراجعة بسيطة لكل ما تعلمناه في هذا القسم :

  • المتغيرات هي كيانات تقوم بحفظ بعض المعلومات ضمنها و تعطيها اسماء محددة

  • المتغيرات يتم حفظها بشكل مباشر ضمن ذاكرة الكمبيوتر

  • لانشاء المتغيرات يوجد ثلاث طرق :

    • باستخدام الكلمة المفتاحية var والتي كانت تستعمل قبل نزول تحديثات ES6
    • باستخدام الكلمات المفتاحية let لانشاء متغيرات يمكن تعديل قيمتها لاحقا
    • و الكلمة المفتاحية const لانشاء متغيرات ذات قيم ثابتة لايمكن تغييرها
  • اي متغير يتم انشاءه مبدئيا بدون اي قيم محددة فان الكمبيوتر يقوم بشكل تلقائي بتعيين القيمة undefined له
  • يمكن اجراء عمليات رياضية على قيمة متغير ما باستخدام العديد من المعاملات المختلفة (=+ , ++ و....الخ)
  • معامل التعيين = يستخدم لتعيين قيمة ما الى متغير محدد و لا يفيد في المساواة ضمن العمليات الحسابية والتي نستعمل لها المعاملين (==) و (===)
  • معامل الجمع الرياضي + يستخدم يمكن استعماله لدمج مجموعة من النصوص بالاضافة للقيم النصية المحفوظة ضمن المتغيرات
  • ضمن التحديثات الجديدة لجافاسكربت (ES6) , تم اضافة النموذج الحرفي (template literal) والذي يستعمل الرموز (backticks) `…..` والصيغة ${} لدمج قيم المتحولات ضمن قيم نصية
  • تستعمل الكلمة المفتاحية typeof لمعرفة نوع البيانات المخزنة ضمن قيمة ما

مشروع بسيط ألة حاسبة:

لنقم بانشاء الة حاسبة بسيطة بالاعتماد على ما تعلمناه سابقا بحيث يدخل المستخدم رقمين ونقوم بجع هذين الرقمين واظهار النتيجة (سنقوم بتطوير هذا المشروع شيئا فشيئا حتى نصل اللى مستويات اعلى باستخدام المفاهيم التي سوف نتعرف عليها لاحقا) ضمن هذا المشروع سنقوم بالاستفادة من الوظائف التالية (alert() ) و ( prompt() )

بدوون اي اطالة لنبدأ و نفتح محرر الاوامر console:

لابد من ايجاد طريقة لكي نعطي المستخدم الامكانية لادخال معطيات العملية ويمكن ذلك باستعمال الوظيفة prompt() , هنا في مشروعنا نريد ادخال قيمتين نقوم بذلك كما يلي

  let first = prompt("Enter first number")
  let second = prompt("Enter second number")
  let sum = Number(first) + Number(second)
  alert(`the result is : ${sum}`)

اما انسخ الكود السابق الى الكونسول او اكتبه يدويا ثم اضغط Enter

الكود السابق مكون من عدة اسطر ولكن ضمن الكونسول عندما نريد الحصول على سطر جديد لتكملة الكود عادة نضغط Enter ولكن نلاحظ عندما نفعل ذلك يتم تنفيذ الكود ولا يتيح لنا المجال لكي نكمل كتابة الكود والحل بانه عندما تنتهي من كتابة سطر وتريد الانتقال الى السطر التالي بأن نضغط الزرين shift+Enter مع بعض.

ايضا نلاحظ وجود الوظيفة Number والتي تفيد بتحويل القيم الموجودة ضمن المتغيرات المدخلة الى ارقام

بعد ان نكتب الكود السابق ونضغط Enter نلاحظ يظهر لدينا نافذة تطلب منا ادخال قيمة للمتغير الاول ومن ثم قيمة للمتغير الثاني . يتم اظهار نتيجة عملية الجمع باستخدام الوظبفة alert() ايضا بشكل نافذة منبثقة

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


Topics

تسجيل بنشرتنا البريدية

سجل بنشرتناالبريدية لتتلقى آخر الأخبار والتحديثات مباشرة على إيميلك.