انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 06
دورة جافا سكريبت

المتغيرات في لغة جافا سكريبت باستخدام var keywordJavaScript var Variables

سنتعلم في هذا الدرس المتغيرات في لغة جافا سكريبت JavaScript Variables وهي ان نحفظ قيم يمكن استرجاعها في اي وقت وهذه القيم متوافقة مع انواع البيانات في لغة جافا سكريبت,سنلقي نظره عامه عن المتغيرات, ثم نتطرق الي طريقة كتابتها في لغة الجافا سكريبت Variable Syntax,ثم بدون المتغيرات ما الذي يحدث Without a Variable, ايضاً سنتحدث عن قواعد او شروط الاسماء في المتغيرات Variable naming rule, ثم عملية التهئية في المتغيرات Declaring Variables,ثم عملية Initialization, ثم العمليات الحسابية باستخدام المتغيرات في لغة جافا سكريبت JavaScript Arithmetic.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
10
الأمثلة
26
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
10,571
محتوى الدرس
في هذا الدرس 10تصفّح المواضيع

JavaScript var Variables المتغيرات باستخدام var keyword في لغة جافا سكريبت

لماذا نحتاج المتغيرات Variables ؟

نحتاج المتغيرات Variables لكي نقوم تخزين البيانات او المعلومات.

  • المتغيرات Variables هي عبارة عن حاوية container يتم  تخزين  بداخلها قيمة معينة Value عن طريق ال Names الأسماء ثم نقوم باسترجاعها في أي وقت ويمكننا تغيير القيمة عن طريق لغة JavaScript اثناء التشغيل. 
  • المتغيرات تحتوي على قيم. هذا مهم جداً ان تفهمة. المتغيرات ليست القيم نفسها ؛ إنها حاويات للقيم. يمكنك التفكير في أنها مثل الصناديق الكرتونية الصغيرة التي يمكنك تخزين الأشياء فيها او وحدات الادراج التي تخزن بداخلها اوراق مهمه وهذه الاوراق هي القيم وتكون في كل مره اوراق مختلفة.
  • يتم تخزين في المتغيرات المعلومات او البيانات الخاصة مثلاً بالمستخدمين users او الخاصه بعملية الشراء عبر الانترنت كسعر منتج معين واسم المنتج الخ.
المتغيرات باستخدام var keyword في لغة جافا سكريبت
المتغيرات باستخدام var keyword في لغة جافا سكريبت

Without a Variable بدون متغير

هذا المثال سوف يوضح لك لماذا المتغيرات Variables في لغات البرمجة.

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

var Variable Syntax تعريف او الاعلان علي متغير var في لغة جافا سكريبت

تأتي المتغيرات Variables علي هيئة:

  •  [ Var ] Declare keyword وهو اعلان او اخبار المتصفحات بلغة جافا سكريبت اننا قمنا بانشاء متغير جديد.
  • [ Name ] ينطبق علي الاسماء شروط وقواعد سنتعرف عليها في هذا الدرس.
  • [ = ] assign Operators  وهي علامات رياضية لتتم عملية التعيين اي نعلن ان المتغير يساوي قيمة معينة وتستخدم ايضا اذا قمنا بتغيير قيمة المتغير.
  • [ Value ] وهي القيم التي تخزن داخل المتغيرات ويسمح لنا بتخزين اي قيمه من قيم ال Data Types في لغة الجافا سكريبت وتكون نصوص او رموز او كلمات محجوزه او مصفوفات arrays او كائنات objects او تساوي متغيرات اخري.

النص يتم حفظه في منطقة الذاكره مع اسم المتغير. نستطيع  الوصول الي القيمة التي بداخل المتغير عن طريق اسم المتغير variable name.

Variable Syntax

JavaScript 
var  username = "Ahmed";
جرّب بنفسك

Variable naming rules قواعد او شروط تسمية المتغيرات

يمكنك تسمية المتغير في Java Script إلى أي شيء تريده، ولكن هناك قيود او شروط علي الاسماء. بشكل عام .

  • الأحرف اللاتينية والأرقام شائعة في الأسماء، لكن المعرّفات ليست مقصورة على ASCII؛ ولا يجوز أن يبدأ الاسم برقم.
  • تسمح JavaScript بكثير من أحرف Unicode، ومنها العربية؛ مثل let الاسم = "أحمد";. استخدام الأسماء اللاتينية عرف شائع في الفرق وليس شرطًا في اللغة.
  • لا تستخدم الأرقام في بداية المتغيرات. هذا غير مسموح به ويسبب خطأ.
  • لا تستخدم رموز مثل @#%^&*-)( في اسماء المتغيرات هذا غير مسموح به ويسبب خطأ.
  • الرمزين المسموح بهما هم علامة ال Dollar sign $ وعلامة  underscore _.
  • يمكن استخدام underscore _ في بداية الاسم أو وسطه؛ ولا تمنح الاسم خصوصية أو معنى خاصًا تلقائيًا.
  • يمكن ان يحتوي اسم المتغير Variable علي أحرف وأرقام لا تبدأ اسم المتغير Variable بأرقام.
  • المتغيرات حساسة لحالة الأحرف - لذا فإن username متغير مختلف عن USERNAME.
  • تحتاج أيضًا إلى تجنب استخدام كلمات JavaScript المحجوزة كأسماء متغيرات - بهذا ، نعني الكلمات التي تشكل البنية الفعلية لجافا سكريبت !  مثل var و function و let و for كأسماء متغيرات. تتعرف المستعرضات عليها كعناصر تعليمات برمجية مختلفة ، وبالتالي ستحصل على أخطاء. هذه قائمة بالاسماء المحجوزه.

هذه نماذج من الاسماء المتطابقه مع الشروط.

JavaScript 
var username = "Ahmed"; 
var username1 = "Mohamed"; 
var username2 = "Aly"; 
var _username = "Khaled"; 
var user_name = "Sameh";
جرّب بنفسك

هذه امثلة علي اسماء متغيرات متطابقة مع الشروط العلوية.

JavaScript 
var age = 22;
var username = "closetag";
var myName = "Ahmed Aly";
var color = "blue";
var user_Name = "Mohamed Adly";
var password = 258622;
var email = "[email protected]";
var emailAddress = "[email protected]";
var email_Address = "[email protected]";
جرّب بنفسك

هذه امثلة علي اسماء متغيرات غير متطابقة مع الشروط العلوية ولكنها تعمل بدون مشكله ولا ننصح باستخدامها.

JavaScript 
var a = 5;
var _12 = "ahmed";
var myage = 25;
var MYAGE = 33;
var skjfnsdskjfnbsdskjfb = "add";
var adsdasdawwewefwerwerwer= "adsdasdawwewefwerwerwer";
جرّب بنفسك

المثال يتعمد أسماء غير صالحة: 2 يبدأ برقم وvar كلمة محجوزة، لذلك ينتج SyntaxError. أما Document فاسم صالح وحساس لحالة الأحرف، لكنه لا يجعل بقية المثال صحيحة.

JavaScript 
var 2 = 10;
var var = true;
var Document = 10;
جرّب بنفسك

استخدام علاامة الدولار dollar sign مع المتغيرات في البدايه وفي النهاية وفي المنتصف.

JavaScript 
var $username= "CloseTag";
var password$ = 123;
var u$rl = "www.closetag.com";
جرّب بنفسك

Declaring Variables تعريف المتغيرات الجافا سكريبت

طريقة انشاء المتغير في ال JavaScript  تسمي declaring a variable لا يشترط تعيين قيمة عند اعلان المتغير فقط ما يمكننا فعله هو اعلان فقط عن طريق المفتاح var keyword, في هذة الحالة تكون القيمة غير معروفة وتسمي برمجياً undefined يمكننا لاحقاً في اي وقت نريده اعادة تعيين القيمة من undefined الي اي قيمة نريدها واي نوع من انواع البيانات Data Types.


اعلان عن متغير دون حفظ قيم بداخله شئ منطقي ولكن قيمتة هي undefined

JavaScript 
var  username;
جرّب بنفسك

سنقوم باضافة قيمة value لهذا المتغير وسنقوم باستدعاءه عن طريق ال var name

JavaScript 
var  username;
username = "Ahmed";
document.write("<b>"+ username +"<b>");
جرّب بنفسك

قمنا باختصار سطرين في سطر واحد وهو الاعلان عن المتغير ثم نتبعه بقيمة المتغير بعد علامة التعيين assign operator وهي علامة =

JavaScript 
var username = "Ahmed";
document.write("<b>"+ username +"<b>");
جرّب بنفسك

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

JavaScript 
var user = 'Ahmed', age = 28, study= 'IT';
جرّب بنفسك

نستطيع تعريفها بهذا الشكل ايضاً

JavaScript 
var user, study, age;
جرّب بنفسك

نستطيع تعريفها بهذا الشكل ايضاً

JavaScript 
var user;
var study;
var age;
جرّب بنفسك

تكتب ايضاً بهذه الطريق بدلاً من استخدام اكثر من مره مفتاح var keyword وهذه طريقة صحيحة ومستخدمة ايضاً.

JavaScript 
var user = 'Ahmed',
age = 28,
study= 'IT';
جرّب بنفسك

Initializing a variable - Initialization تهيئة او تعين المتغيير

تهيئة المتغيرات Initializing a variable في لغة جافا سكريبت

تعني إعطاء قيمة أولية للمتغيرات قبل استخدامها أو التعديل عليها بدوال وعمليات مختلفة.

  • تصريح var يهيّئ الربط بقيمة undefined عند دخول نطاق التنفيذ؛ وتعيين قيمة أخرى يحدث عند تنفيذ الإسناد.

نقارن هنا حالتين تعليميتين: قيمة مكتوبة مع التصريح، أو إسناد لاحق بعد التصريح:

  1. Explicit : تطلق علي المتغيرات التي تم تعيين قيمة initialization لها في وقت انشائها declaration.
  2. الإسناد اللاحق: يُصرّح بالمتغير أولًا وتكون قيمته undefined، ثم تُسنَد إليه قيمة في خطوة لاحقة. 
تهيئة او تعين المتغيير

Explicit

JavaScript 
var username= "closetag";
جرّب بنفسك

Implicit

JavaScript 
var username;
username = "closetag";
جرّب بنفسك

يمكننا تغيير قيمة المتغير في اي وقت في حال ان اردنا ذلك والقيمة القديمة يتم حذفها من الصندوق او من الحاوية او من مخزن المتغير.

JavaScript 
var username = "Ahmed";
document.write("<b>"+ username +"<b><br>");
username = "Mohamed";
document.write("<b>"+ username +"<b>");
جرّب بنفسك

Declare Variables without the var Keyword انشاء متغير بدون var Keyword

  • في script تقليدي غير صارم، قد ينشئ الإسناد إلى اسم غير معلن خاصية على الكائن العام. هذا ليس تصريحًا بـvar أو let؛ وفي strict mode أو modules ينتج ReferenceError. استخدم تصريحًا صريحًا مناسبًا.
  • المثال التالي يوضح هذا السلوك القديم في الوضع غير الصارم؛ لا تستخدمه بديلًا عن التصريح.
JavaScript 
firstName = "Ahmed";
lastName =  "Hamza";
document.write("<b> First Name Is   :  "+ firstName  +"<b><br>");
document.write("<b> Last Name Is   :  "+ lastName +"<b><br>");
جرّب بنفسك

Variable declaration errors اخطاء قد تحدث عند الأعلان عن متغيرات في لغة جافا سكريبت

إعادة التصريح بـvar في النطاق نفسه مسموحة؛ يبقى الربط نفسه، ويحدّث الإسناد الجديد قيمته. التصريح وحده دون قيمة جديدة لا يلغي القيمة السابقة.

JavaScript 
var username = "closetag";
var username = "close.tag";
document.write("<b> Username  :  "+ username  +"<b>");
جرّب بنفسك

في script تقليدي غير صارم، قد ينشئ الإسناد إلى اسم غير معلن خاصية على الكائن العام. هذا ليس تصريحًا بـvar أو let؛ وفي strict mode أو modules ينتج ReferenceError. استخدم تصريحًا صريحًا مناسبًا.

JavaScript 
number = 10;
document.write("<b> First Name Is   :  "+ number   +"<b>");
جرّب بنفسك

اذا قمنا بتعريف المتغير بدون var keyword وقمنا باضافة "use strict" سوف يحدث مشكله عند التشغيل لاننا لم نقوم باتستخدام var keyword.

JavaScript 
"use strict";
number = 10;
document.write("<b> First Name Is   :  "+ number   +"<b>");
جرّب بنفسك

المتغيرات حساسة لحالة الأحرف - لذا فإن username متغير مختلف عن USERNAME وتسمح لغة جافا سكريبت باستخدام نفس الاحرف ولكن بحروف كبيره.

JavaScript 
var username= "Ahmed";
var USERNAME = "CloseTag";
document.write("<b> username Is   :  "+ username   +"<b><br>");
document.write("<b> USERNAME Is   :  "+ USERNAME +"<b>");
جرّب بنفسك

Hoisting in constants in Java Script عملية الرفع في الثوابت في لغة جافا سكريبت

في hoisting تُعالَج تصريحات var قبل تنفيذ بقية النطاق وتبدأ بقيمة undefined؛ لذلك يمكن الوصول إليها قبل موضع التصريح. الإسنادات لا تُرفع: تنفّذ في موضعها. يختلف ذلك عن let وconst ومنطقة TDZ.

Hoisting Example

JavaScript 
car = "Volvo";
document.write(car);
var car ;
جرّب بنفسك

JavaScript Arithmetic العمليات الحسابية بالجافا سكريبت

لغة ال JavaScript في المتغيرات مثل الجبر يمكنك اجراء عمليات حسابية علي المتغيرات عن طريق العلامات.

JavaScript Arithmetic Operators  عوامل الجافا سكريبت والمتغيرات: 

  1. Addition ( + ) : نستطيع جمع متغيرين أو اكثر في لغة جافا سكريبت عن طريق عامل الجمع ويجب المتغير يكون من النوع Number.
  2. Subtraction ( - ) : نستطيع طرح متغيرين أو اكثر في لغة جافا سكريبت عن طريق عامل الطرح ويجب المتغير يكون من النوع Number.
  3.  Multiplication (*) : نستطيع ضرب متغيرين أو اكثر في لغة جافا سكريبت عن طريق عامل الضرب ويجب المتغير يكون من النوع Number.
  4. Division (/) : نستطيع قسمة متغيرين أو اكثر في لغة جافا سكريبت عن طريق عامل القسمة ويجب المتغير يكون من النوع Number.
  5. Modulus (%) : نستطيع ان نحصل علي باقي القسمة بين متغيرين في لغة جافا سكريبت عن طريق عامل النسبة المئوية ويجب المتغير يكون من النوع Number.
العمليات الحسابية بالجافا سكريبت

عملية الجمع والطرح Addition and subtraction في المتغيرات بلغة جافا سكريبت

JavaScript 
var price = 1000;
var discount = 200;
var subTotal = price - discount;
var tax = 14;
var total = subTotal + tax;
document.write("<b>  Sub Total :  "+ subTotal  +"<b><br>");
document.write("<b>  Total :  "+ total  +"<b><br>");
جرّب بنفسك

يمكن جمع متغيرين او اكثر اذا كانت القيمة نصوص ففي هذه الحاله لن تتم كعملية حسابية ولكن هي اضافة النصوص بجوار بعضها لبعض باستخدام علامة Addition ( + )

JavaScript 
var firstName = "Ahmed";
var lastName = "Hamza";
var fullName = firstName + " " + lastName;
document.write("<b>  Full Name Is  :  "+ fullName  +"<b><br>");
جرّب بنفسك

عملية الضرب والقسمة Multiplication and Division في المتغيرات بلغة جافا سكريبت

JavaScript 
var price = 1000;
var discount = 200;
var quantity= 3 ;
var subTotal = (quantity * price ) - discount ;
var tax = 14;
var term = (subTotal + tax) / 2;
var total= term;
document.write("<b>  Sub Total :  "+ subTotal  +"<b><br>");
document.write("<b>  Total :  "+ total  +"<b><br>");
جرّب بنفسك

عملية خارج القسمة او المتبقي بعد قسمة عددين Modulus في المتغيرات بلغة جافا سكريبت

JavaScript 
var allPrice = 1000;
var productsNumber = 300;
var remaining = allPrice % productsNumber;
document.write("<b>  Remaining  :  "+ remaining  +"<b><br>");
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…