المتغيرات JavaScript: Variables

-

بنحكي في هذا الدرس عن المتغيرات Variables وكيف بتم التعريف، أيضا كيفية الاستخدام. واكيد بنطبق امثلة عليها.  تُستخدم المتغيرات لتخزين البيانات في كود JavaScript. واكيد قبل ما نستخدم المتغيرات في JavaScript، يجب تعريفها. 

كيفية تعريف المتغيرات Declare a JavaScript Variable

طريقة التعريف بتكون بالشكل: 
var variable_name =[new_value];
تمام نفهم التركيب 
الكلمة var كلمة محجوزة في اللغة Keywords تستخدم لتعريف المتغيرات. 

Parameters or Arguments

variable_name
هنا يتم تعريف اسم المتغير ومن الأفضل يكون الاسم له علاقة بالهدف منه، يعني اذا كان المطلوب تعريف متغير للاسم مثلا بكون اسم المتغير مثلا : 
var FirstName
أسماء المتغيرات تعتبر case-sensitive يعني اذا كان في حرف مختلف يعتبر متغير مختلف
مثال ذلك المتغيرات 
var FirstName
var firstName
متغيرات مختلفة عن بعض بسبب الحرف f في الأول حرف كبير والثاني حرف صغير.

قواعد كتابة الأسماء : 

ان يبدا الاسم ب :
الأحرف (A-Z or a-z)
او العلامة ($)
او underscore (_)
ما بعد ذلك يمكن ان يكون احرف ارقام  underscores،dollar signs 
غير مسموح باستخدام الأرقام كأول حرف في الأسماء.
بهذه الطريقة يمكن لـ JavaScript التمييز بسهولة بين identifiers  وnumbers
استخدام إشارة الطرح  -  غير مسموح في الأسماء في JavaScript لأنها محجوزة لعمليات الطرح

new_value
القيمة المراد تخصيصها إلى المتغير وهي اختيارية. يعني ممكن ما نضيفها وتكون فاضيه. إذا كانت القيمة عبارة عن string، اجباري تكون بين علامتي الاقتباس المفردة () أو المزدوجة (").
حكينا في الأول عن الكلمة المحجوزة var وحكينا ان بنستخدم لتعريف المتغير. يوجد كمان 3 طرق غيرها لتعريف المتغيرات وهي: 
var
let
const
nothing
تمام التمام  بنحكي عنهم بالتفصيل لاحقا.

الان نطبق مثال حتى نفهم الموضوع: 
var   x,y,z;
//Declare a String Variable
var FirstName = layn hatem;
//Declare a Number Variable
var age ;
age = 11;
//Declare a Boolean Variable
var found = false;
var inSchool;
inSchool = true;
//Declare Multiple Variables
var SecondName = Lareen hatem, age = 7, inSchool = true;

اول سطر عرفنا متغيرات بالأسماء x ,y ,z وما عملنا أي اجراء عليهم. 
السطر الثاني عرفنا متغير من نوع string باسم FirstName وخزنا القيمة Layan hatem داخلو. 
السطر الثالث عرفنا متغير من نوع Number باسم age وخزنا القيمة 11 داخلو
السطر الرابع عرفنا متغير من نوع Boolean باسم found وأضفنا القيمة false مباشرة. بعدها عرفنا متغير ثاني من نفس النوع باسم inSchool وبعدها في سطر ثاني اضننا القيمة true . 
السطر الأخير هو تكرار لكن عرفنا المتغيرات Variables كلها في نفس السطر.

بهيك بنكون عرفنا كيف ممكن نعرف المتغيرات . 
تمام نحاول نعرف متغير يبدأ برقم 
مثال :
5FirstName
النتيجة:
شوف الخطأ اكيد ما بنقدر نستخدم أحرف في بداية المتغير. 
تمام
نرجع الان الى طرق تعريف المتغيرات ونشوف متى يستخدم كل نوع. 

شو الفرق بين var و let   و const

تُستخدم var في اكواد JavaScript من 1995 إلى 2015.
تم إضافة let  و  const في عام 2015
تستخدم var اذا كان الاستخدام بكون على المتصفحات القديمة older browser (اكيد بتشتغل على المتصفحات الجديدة)
تستخدم const مع القواعد العامة general rule
تستخدم let اذا كان يوجد احتمالية لتغيير القيم. 
المثال التالي يوضح ذلك.

كود ملف JS 
const price1 = 50;
const price2 = 30;
let total = price1 + price2;
document.getElementById("Total").innerHTML ="The total is: " + total;

كود ملف HTML 
<!DOCTYPE html>
<html>
   
<body>
<h3>JavaScript Variables</h3>
<p id="Total"></p>
<script src="JS.js"></script>
</body>
</html> 
النتيجة: 
نفهم الكود: 
المتغيرات price1 ، price2 تم تعريفيهم باستخدام Const السبب انهم متغيرات ثابته ما بتغيرو 
المتغير total يمكن يتغير حسب لذا تم استخدام Let 

التعيين Assignment Operator

يستخدم JavaScript العلامة = لتعيين assignment القيم. ولا تستخدم للمساواة equal.
المثال التالي :
var x=100;
يعني ان تم تعيين القيمة 10 الى المتغير x 
المثال التالي: 
X=x+10;
في هذا المثال الامر مختلف عن العمليات الحسابية، في JavaScript ، يكون الأمر منطقيًا تمامًا فالعملية تعني ان سيتم حساب القيمة x+10  أولا ثم يتم تعينيها الى x (بمعنى آخر تزداد قيمة x بمقدار 10 في كل مره).
في الحساب العادي معني الجملة السابقة ان x  تساوي x+10 وهذا اكيد مختلف تماما عن JavaScript

طريقة كتابة المساواه equal في JavaScript 

تكتب المساواة باستخدام العلامة == 
مثال 
كود ملف Js
var x=100;
var y=100;
if (y==x)
{
document.getElementById("Total").innerHTML =equal;
}
كود HTML 
<!DOCTYPE html>
<html>
   
<body>
<h3>JavaScript Variables</h3>
<p id="Total"></p>
<script src="JS.js"></script>
</body>
</html> 
النتيجة: 
تم مقارنه القيمة y مع x إذا كانت القيم متساوية عملنا طباعه لكلمة equal  
الكود الي بيعمل المقارنة: 
if (y==x)
{
document.getElementById("Total").innerHTML =equal;
}

أنواع البيانات JavaScript Data Types

تدعم لغة JavaScript مجموعه من الأنواع مثل الأرقام Numbers  و  text values  مثل "Layan Lareen".
في عالم البرمجة ، تسمى text values  ب  strings.
يجب ان تكتب strings داخل علامتي اقتباس مزدوجتين أو مفردة. (أي شيء موجود داخل علامات الاقتباس يعتبر strings) 
 مثال :
var x=100;
var y=100;
var FirstName="Layan Lareen"

المتغيرات x، y من نوع Numbers وخزنا فيها قيمة عدد صحيح يساوي 100 ، المتغير FirstName من نوع string وخزنا فيه القيمة Layan Lareen 
لاحظ ان تعريف المتغير بتم باستخدام كلمة var يعني في التعريف ما في اشي بدل على نوع البيانات (يقوم JavaScript تلقائي بالتعرف على نوع البيانات بناء على المحتوى الموجود داخلو)

تعريف المتغيرات  في JavaScript  يكون باستخدام واحده من كلمات التعريف الي حكينا عنها وهم:
 
var, let , const 
وكلهم لازم يكون small letter 
يمكن تعريف متغير بالشكل التالي : 

var FirstName
النتيجة بتكون في هذا المثال undefined والسبب ان ما تم تخزين قيمة داخل المتغير. 
يمكن تعيين قيمة مباشرة مع التعريف بالشكل التالي: 

var FirstName="Layan Lareen"

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

let FirstName="Layan Lareen"
نطبق مثال 
نعدل الكود السابق الي :
var x=100;
var y=100;
var FirstName="Layan Lareen"
if (y==x)
{
document.getElementById("Total").innerHTML =Hi,+ FirstName;
}

كود HTML 
<!DOCTYPE html>
<html>
   
<body>
<h3>JavaScript Variables</h3>
<p id="Total"></p>
<script src="JS.js"></script>
</body>
</html> 
النتيجة:

ما عملنا اشي مختلف فقط اضفنا متغير جديد باسم FirstName وخزنا القيمة Layan Lreen داخلو  ومن ثم عرضنا هذه القيمة داخل <p> 
ملاحظة: تعريف المتغيرات جميعها في اول الصفحه يعتبر good programming practice 

تعريف اكثر من متغير في جملة واحده  Many Variables in one Statement 

يمكن تعريف اكثر من متغير في جملة واحده: 
المثال السابق لو بدنا نعرف هذه المتغيرات في جملة واحده بكون شكل الكود: 

var x=100 ,y=100 ,FirstName="Layan Lareen"
if (y==x)
{
document.getElementById("Total").innerHTML =Hi,+ FirstName;
}

جرب تشغل الصفحه وشوف النتيجة (اجباري تكون نفس النتيجة السابقة) 

إعادة تعريف المتغيرات Re-Declaring JavaScript Variables

إذا عملنا إعادة تعريف للمتغير في JavaScript باستخدام var ، فلن يفقد قيمته.
مثال :
var FirstName = "Layan Lareen";
var FirstName;
قيمة المتغير FirstName لن تتغير في حال التعريف مره ثانيه.

العمليات الحسابية في JavaScript 

مثل العمليات الحسابية يمكن اجراء عمليات الجمع والطرح والضرب والقسمة على الأرقام في JavaScript 
نطبق المثال التالي 
ملف JS 

var   x,y,z;
x=10;
y=15;
z =x + y;
document.write(z);
document.write("<br>");
document.write(x*y);
document.write("<br>");
document.write(y/x);
document.write("<br>");
document.write(y-x);
ملف HTML 
<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
<h3>JavaScript Variables</h3>
<script src="JS.js"></script>
</body>
</html> 

النتيجة: 
في المثال طبقنا جميع العمليات وطبعناها على الشاشة. 
ملاحظة: اذا تم وضع الأرقام بين علامات الاقتباس اكيد بتم التعامل معاهم على أساس انهم string 
مثال : 
ملف JS

let x = 5 + 5 + "5";
document.getElementById("Total").innerHTML = x;
ملف HTML 
<!DOCTYPE html>
<html>
   
<body>
<h3>JavaScript Variables</h3>
<p id="Total"></p>
<script src="JS.js"></script>
</body>
</html> 

النتيجة:  
المثال السابق بتم عملية الجمع لأول رقمين لأنهم ارقام والرقم الأخير لان داخل علامات الاقتباس بتم التعامل معو على أساس ان string وبتم دمجو مع النتيجة من الرقمين الأول والثاني. وبتكون النتيجة 

10+”5”
105
استخدام Dollar Sign $ وUnderscore  (_) في أسماء المتغيرات

يمكن استخدام إشارة $ واشارة _ مع أسماء المتغيرات عادي بدون أي مشاكل. 
امثلة 

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;
let _lastName = "Mlak";
let _x = 20;
let _100 = 555;