تطبيق وصل wassll لمتابعة مخصصات المحروقات

المتغيرات variables في جافاسكربت

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

لإنشاء متغير variable في الجافا سكربت نكتب var في البداية و نعطيه إسم و من ثم إشارة يساوي =.

 

أنواع البيانات في جافاسكربت

توجد أنواع عديدة من البيانات في لغة جافاسكربت وهي:

1. متغيرات نصية String.
2. متغيرات عددية number تمثل الأعداد بجميع أنواعها الصحيحة والعشرية.
3. متغيرات منطقية boolean وتكون قيمته true أو false.
4. متغيرات غير محددة undefined.
5. متغيرات فارغة Null ويستخدم غالباً لإزالة البيانات من الذاكرة RAM.
6. متغيرات object كائن من أجل البيانات الأكثر تعقيداً.

 

قواعد أسماء المتغيرات في جافاسكربت

• ممكن أن يبدأ إسم المتغير بحرف كبير, مثال var Name.
• ممكن أن يبدأ إسم المتغير بحرف صغير, مثال var name.
• ممكن أن يبدأ إسم المتغير بهذا الشكل _ مثال var _name.
• ممكن أن يبدأ إسم المتغير بهذا الشكل $, مثال var $name.
• لا يجب أن يبدأ إسم المتغير برقم, مثال var 1name يعتبر متغير خاطئ.
• لا يجب أن يبدأ إسم المتغير بنقطه, مثال var .name يعتبر متغير خاطئ.
• لا يجب أن يحتوي إسم المتغير على شكل من اشكال الكيبورد الخاصه.
• لا يجب أن يكون إسم المتغير بكلمه من الكلمات المحجوزة في لغه الجافا سكربت مثلاً var else هذا خطأ, يمكنكم رؤية الكلمات المحجوزة في الجافا سكربت من هذا الرابط w3school.

 

المتغيرات النصية String جافاسكربت

يتم إستخدام المتغيرات النصية String في جافا سكربت من أجل تعريف النصوص. و يتم تعريفها عن طريق كتابة الكلمة المحجوزة var ثم الإسم الذي نريده للمتغير ثم إشارة يساوي و بعدها نضع علامتي تنصيص و نكتب النص بداخله.

نريد تعريف متغير نصي يحمل القيمة النصية Nusur Tech ويكون شكل هذا كما يلي

var name = "Nusur Tech";

لقد أنشأنا متغير نصي إسمه name و هذا المتغير يحمل القيمة Nusur Tech مخزنة بداخله.

 

المتغيرات العددية number في جافاسكربت

يتم إستخدام المتغيرات العددية number في جافا سكربت من أجل تعريف أرقام أو أعداد صحيحة. و يتم تعريفها عن طريق كتابة الكلمة المحجوزة var ثم الإسم الذي نريده للمتغير مثلاً number ثم إشارة يساوي وبعدها نكتب الرقم مباشرتاً.

نريد تعريف متغير عددي يحمل القيمة العددية 28 ويكون شكل هذا كما يلي

var number = 28;

لقد أنشأنا متغير عددي إسمه number و هذا المتغير يحمل القيمة 28 مخزنة بداخله.

نستطيع إستخدام عمليات حسابية ضمن الأعداد في المتغيرات, على سبيل المثال نريد إستخدام عمليه الجمع.

var number = 23.5 + 20;

عند عرض البيانات لهذا المتغير سوف تكون نتيجته

43.5

 

المتغيرات المنطقية boolean في لغة جافاسكربت

هذه المتغيرات يتم إستخدامها في العمليات المنطقية و تكون قيمتها محصورة بين true أو false فقط. و يتم تعريفها عن طريق كتابة الكلمة المحجوزة var ثم الإسم الذي نريده للمتغير مثلاً boolean ثم إشارة يساوي وبعدها نكتب القيمة.

var boolean = true;

 

المتغيرات الغير معرّفة undefined لغة جافاسكربت

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

var x;

هنا تمت كتابة هذا المتغير بطريقة غير صحيحة و عندما نقوم بعرض قيمة هذا المتغير ستكون نتيجة العرض هي

undefined

 

المتغيرات الفارغة Null جافاسكربت

يستخدم هذا النوع من البيانات لمسح البيانات من المتغير, يعني فارغ أو بأبسط معنى يُستخدَم لإزالة البيانات من الذاكرة RAM و هي من الكلمات المحجوزة بهذه اللغه. و إنَّ نوع البيانات Null في لغة Javascript له قيمة واحدة فقط و هي خالية.

إذا كانت قيمة المتغير فارغة فهذا يعني أن المتغير variable لا يحتوي على رقم أو سلسلة أو منطقي أو مصفوفة أو كائن صالح. لذلك يمكننا مسح محتويات متغير ما عن طريق تعيينه قيمة فارغة.

 

المتغيرات كائن object في جافاسكربت

طريقة كتابة بيانات من نوع object يكون بكتابة var و بعده إسم للمتغير و ثم إشارة = و ثم أقواس {}. و ضمن الأقواس نقوم بتحديد خاصية و ثم نقطتين و بعده قيمة لها و نفصل بين كل خاصية و أخرى بفاصلة.

var person = {firstName:"Muhammad", lastName:"Alush", age:28};

نلاحظ من الكود السابق أنه يتم التفريق بين البيانات وقيمها بإشارة فاصلة.

مثال

var car = {
	name:"scoda",
	modele:"2002",
	color:"white"
};

أخذنا الكائن car و أعطيناه 3 قيم هي:

• الإسم: scode.
• الموديل: 2002.
• اللون: أبيض.

و تكون طريقة عرض البيانات لهذه الطريقه هي بأن نقوم بإنشاء id في صفحة الـ html و أسميناه object كما يلي:

<div id = "object"> </div>

و طريقة عرض البيانات تكون بالشكل

var car = {
	name:"scoda",
	modele:"2002",
	color:"white"
        };
document.getElementById("object").innerHTML = "Name: " + car.name;

كتبنا document.getElementById وفتحنا بعدها قوسين وكتبنا بها كلمة object هي الأيدي الذي كتبناه في ملف ال html. وبعده كتبنا .innerHTML= يعني نريد عرض البيانات التالية. كتبنا Name لكي يكتب هذه الكلمة و بعدها قيمة البيانات الذي نريد تحديدها له. وكتبنا إسم المتغير car و حددنا له name يعني إعرض لي قيمة name من هذا الكود.

عند عرض البيانات في المتصفح ستكون النتيجة:

Name: scoda

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

و توجد طريقة ثانية لكتابة ال object و هي:

var car = {};
car.name = "mercedes";
car.model = "2014";
document.getElementById("object").innerHTML = "Name: " + car.name;

عند تشغيل الكود سنحصل على النتيجة

Name: mercedes

نستطيع مستقبلا تغيير القيم للمتغيرات و عرضها في console.

var car = {
	name:"scoda",
	modele:"2002",
	color:"white"
        };
car.modele = "scoda 2022";
console.log(car.modele);

كما لاحظنا كيف حدثنا قيمه بيانات modele لـ 2022 و نقوم بإستعراض هذه النتائج في الـ console. فإذا شغلنا هذا الكود سوف تكون نتيجته محدّثة كما يلي

scoda 2022

و إذا كنا نريد أن نحذف إحدى الخصائص من الـ object على سبيل المثال نريد حذف اللون color و يكون كود الحذف.

var car = {
	name:"scoda",
	modele:"2002",
	color:"white"
        };
car.modele = "scoda 2021";
delete car.color;
console.log(car.color);

و إذا قمنا بإستعراض هذه النتيجة ستكون بالشكل

undefined

 

طرق عرض البيانات في لغة جافاسكربت

سوف نشرح لكم طرق عرض البيانات في الجافا سكربت, في حال لدينا متغيرات نريد عرض ما بداخلها مثلاً. توجد ثلاثة طريق لعرض البيانات في لغة جافاسكربت و هي:

1. عن طريق console.
2. عن طريق ديالوك منبثق alert.
3. عن طريق html و ربطه في id و إستخدام getElementById.

 

عرض البيانات عن طريق console جافاسكربت

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

var age = 28;
console.log ("Age: \n" + age);

عندما نفتح المتصفح و الذهاب إلى console سوف نجد النتيجة بداخله.

عرض البيانات بواسطة ديالوك alert جافاسكربت

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

var age = 28;
alert ("Age: \n" + age);

عندما نفتح صفحة العمل في المتصفح

نلاحظ أنه عرض لنا البيانات كـ dialog عندما فتحنا الصفحة أو حدثناها.

 

عرض البيانات عن طريق getElementById لغة JavaScript

عبر انشاء عنصر من عناصر ال html ضمن ملف الـ html واعطاءه id محدد كما بهذا المثال.

• في ملف html.

<body>
	<h1 id="learn javascript"></h1>
</body>

لقد انشأنا عنصر h1 و اعطيناه الأيدي learn javascript كي نستدعيه عبر الجافاسكربت.

• في ملف جافاسكربت.

var age = 26;
document.getElementById("learn javascript").innerHTML = "age: \n" +age;

لقد انشأنا المتغير age و من ثم بدأنا بعرض البيانات وربطها بـ html عبر كتابة document.getElementById و فتح قوسين ووضع الأيدي الذي حددناه ضمن ملف html و تم عرضها.

ملاحظة:

لغه الجافاسكربت JavaScript حساسة لحالة الأحرف مثلاً الحرف الكبير يختلف عن الحرف الصغير. إذا أردنا معرفة نوع بيانات المتغير نكتب typeof.

var age = 28;
console.log (typeof age);

عند تشغيله وعرض النتيجة بأي طريقة عرض بيانات ستكون النتيجة

number

 

كتابة متغير var في جافاسكربت

if(4==4){
	var name = "data:";
	var age =27;
	var name1 = "amviip:";
	var age1 = 21;
}
console.log(name,age,name1,age1)

أنشأنا شرط و قلنا في إذا 4 تساوي 4 و بداخل الشرط كتبنا عدة متغيرات نصية و عددية, و عرضنا البيانات عبر console.

المتغيرات let في JavaScript

if(4==4){جافاسكربت
	let name = "data:";
	let age =27;
	let name1 = "amviip:";
	let age1 = 21;
}
console.log(name,age,name1,age1)

أنشأنا شرط و قلنا في إذا 4 تساوي 4 و بداخل الشرط كتبنا عدة متغيرات نصية و عددية let, و عرضنا البيانات عبر console.

 

كما لاحظنا قد ظهر لنا هذا الخطأ انه غير موجود, لنأخذ مثال آخر و نصححه كي نفهم الفرق اكثر.

if(4==4){
	let name = "data:";
	let age =27;
	let name1 = "amviip:";
	let age1 = 21;
console.log(name,age,name1,age1)
}

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

كما لآحظنا قد عرض لنا البيانات و إتضح لنا الفرق بين var و let. عندما نستخدم أمر عرض البيانات console في let خارج الجملة الشرطيه سوف يُعطينا خطأ. و إنما يجب أن نستخدم عرض البيانات في داخل الجملة الشرطية حتى يتنفذ الأمر بشكل صحيح.

 

المتغيرات const في جافاسكربت

if(4==4){
	const name = "data:";
	const age =27;
	const name1 = "amviip:";
	const age1 = 21;
console.log(name,age,name1,age1)
}

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

 

خلاصة درس المتغيرات في جافاسكربت

1. في var يمكن التعديل على القيمة وطريقة عرض البيانات خارج الجملة الشرطية.
2. في let يمكن التعديل على القيمة وطريقة عرض البيانات داخل الجملة الشرطية.
3. في const لا يمكن التعديل على القيمه وطريقة عرض البيانات داخل الجملة الشرطية.