صفحة البيت | מס טלפון 04 – 6046227 | מס' פקס 04 – 8303539

جافا سكريبت - JavaScript

موقع كتابة الكود repl.it | تحميل Brackets| تحميل Notebad++

(3) متغيرات الـ JavaScript – جزء 1

المتغيرات (variables ، משתנים)

تُستخدم المتغيرات لحفظ معلومات معينة يمكن استدعائها لاحقاً واجراء عمليات حسابية عليها.

المتغير هو خلية ذاكرة التي تحتوي على قيمة واحدة كل مرة.

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

أسماء المتغيرات

· يجب كتابة أسماء المتغيرات باللغة الإنجليزية فقط.

· يمكن أن نعطي للمتغير اسم مكون من حرف مثل x أو مكون من كلمة ذات معنى

مثلا: car, age, name, math_grage, f2

· أن لغة الجافا-سكربت لغة حساسة، بمعنى انها تفرق بين أحرف صغيرة وأحرف كبيرة.

يوجد اختلاف بين x وX

كذلك أسماء المتغيرات التالية مختلفة: Name, name, nAme.

· اسم المتغير يجب أن يبدأ بحرف أو بخط سفلي ( _ ) ، (لا يجوز أن يبدأ بعدد)

امثلة مقبولة لأسماء متغيرات: a1, color, math_grade, first_name

انشاء المتغيرات والإعلان عنها

· يمكننا انشاء المتغيرات والإعلان عنها من خلال وضع كلمة var قبل اسم المتغير.

(var من كلمة variable وتعني متغير)

مثال:

أعلنا عن متغير اسمه grade

لقد حجزنا في الذاكرة مكان، لتخزين قيمة، وسميناه grade

var grade;

· بعد إنشاء الكود السابق عليا إضافة قيمة في المتغير ليصبح فعّالاً،

أي علينا تعويض قيمة في المتغير.

تعويض قيمة في المتغير نسميها إسناد قيمة للمتغير.

يتم إسناد قيمة لمتغير بواسطة عامل التعويض =

مثال:

لتعويض القيمة 90 في المتغير grade نكتب

grade = 90

var grade;

grade = 90;

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

أعلنا عن المتغير grade وأسندنا (حددنا) له القيمة 90

var grade = 90;

· إظهار، طباعة، قيمة المتغير

لإظهار قيمة متغير نستعين بالأمر:

document.write( );

هنا برنامج كامل:

عرفنا متغير باسم grade، خزنا به القيمة 90،

وعرضنا قيمة المتغير على الشاشة.

<script>

var grade;

grade = 90;

document.write(grade);

</script>

مثال:

تعريف متغيرات وتعويض قيم فيها

الأكواد التالية متطابقة – تقوم بنفس الوظيفة

</script>

var n = 5;

var m = 3;

document.write(n+m);

</script>

var n, m;

n = 5;

m = 3;

document.write(n+m);

</script>

عرفنا، أعلنا، عن كل متغير وبنفس الوقت عوضنا قيمة في كل واحد.

عرفنا، أعلنا، اولاً عن المتغيران. وبعدها عوضنا لكل واحد منهما قيمة.

المخرج الناتج من كل واحد من الاكواد البرمجية هو 8

تذكر: يتم إلغاء المتغيرات وحذفها عند اغلاق الصفحة.

تعويض قيم في المتغير (اسناد قيم للمتغير)

القيم التي يمكن تعويضها في المتغيرات:

الاعداد:

عوضنا القيمة 2020 في المتغير year

var year = 2020;

var height = 1.2

ب. النصوص والاشارات:

عوضنا القيمة Volvo في المتغير car

var car = "Volvo";

var msg = "Happy Birth Day";

تذكر: عند إسناد نص كقيمة لمتغير يجب وضع النص بين اشارتي الاقتباس " "،

كما فعلنا للقيمة "Volvo".

مثال:

المخرج:

Volvo 2020

<script>

var x = 2020;

var car = "Volvo";

document.write(car," ",x);

</script>

مثال:

الأكواد التالية متطابقة – تقوم بنفس الوظيفة، اي منهما تفضل:

Roy 12 90

<script>

var name, age, grade;

name = "Roy";

age = 12;

grade = 90;

document.write(name,' ', age,' ',grade);

</script>

Roy 12 90

<script>

var name="Roy";

var age=12;

var grade=90;

document.write(name,' ', age,' ',grade);

</script>

Roy 12 90

<script>

var name="Roy", age=12, grade=90;

document.write(name,' ', age,' ',grade);

</script>

أجراء عمليات حسابية على المتغيرات

مثال:

المخرج:

5 + 6 = 11

<script>

var x = 5;

var y = 6;

var sum = x + y;

document.write(x,"+",y,"=",sum);

</script>

في أمر الطباعة document.write();

الإشارة + تأتي بدل الفاصلة ووظيفتها دمج، لصق، القيم.

من هنا، السطر الأخير يمكن كتابته بالشكل التالي (بدل الفاصلة "," نستخدم +):

مثال:

المخرج:

5 + 6 = 11

<script>

var x = 5;

var y = 6;

var sum = x + y;

document.write(x+"+"+y+"="+sum);

</script>

لن يفقد المتغير قيمته إذا لم يتم استدعائه.

أجراء عمليات حسابية على المتغيرات

مثال:

المخرج:

12-10

-------------------

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

<script>

var x = 12;

var y = 10;

var sub = y - y;

document.write("<h1>",x,"-",y,"</h1>");

document.write("<h1>",sub,"</h1>");

</script>

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

var x = 24

var y = 7

var z = x % y

document.write(z)

var x = 5

var y = 2

var z = x / y

document.write(z)

var x = 2

var y = 3

var z = x + x * y

document.write(z)

(الباقي من القسمة) 3

2.5 المخرج

8 المخرج

تمارين

أخطاء شائعة

جد العبارة الصحيحة

معطى:

var name = "tomi"

var lastname = "bamgo"

صح

document.write("my name is " + name + " " + lastName)

خطأ

document.write("my name is " name lastName);

تمرين 1:

انسخوا إلى ملف واجيبوا على الأسئلة التالية:

1. عندما ننفذ هذا البرنامج يُطبع

2000

2016

your age is

2. كم عدد المتغيرات في هذا البرنامج 4

سجلوا أسمائهم

birth, current,

age, msg

<body>

<script>

birth = 2000;

var current= 2016;

var age=current - birth;

var msg = "your age is";

document.write (birth , "<br>");

document.write (current , "<br>");

document.write (msg , "<br>");

document.write (age , "<br>");

</script>

</body>

تمرين 2:

أمامكم أوامر كلامية لتنفيذ برنامج. ترجم هذه الأوامر إلى برنامج في JavaScript

أ‌. عوضوا في المتغير a القيمة 6

ب‌. عوضوا في المتغير b القيمة 4

ت‌. عوضوا في المتغير sum

التعبير b + a

ث‌. عوضوا في المتغير sub التعبير b - a

ج‌. عوضوا في المتغير mul التعبيرb * a

ح‌. عوضوا في المتغير div التعبيرb / a

خ‌. اطبعوا قيمة المتغيرات:

sum, sub, mul, div

<body>

<script>

var a = 6;

var b = 4;

var sum = a + b;

var sub = a - b;

var mul = a * b;

var div = a / b;

document.write(sum,"<br/>",sub,

"<br/>",mul,"<br/>",div,"<br/>");

</script>

</body>

تمرين 3:

أمامكم الغوريتم كلامي. ترجم البرنامج إلى برنامج بـ JavaScript

أ‌. عوضوا في المتغير colorR القيمة "red"

ب‌. عوضوا في المتغير colorG القيمة "green"

ت‌. عوضوا في المتغير colorB القيمة "blue"

ث‌. اطبعوا قيمة المتغيرات

colorR , colorG , colorB

<body>

<script>

var colorR = "red";

var colorG = "green";

var colorB= "blue";

document.write(colorR +"<br/>"+colorG +"<br/>"+ colorB + "<br/>");

</script>

</body>

مدرسة قفطان حلبي الإعدادية – دالية الكرمل - Copywrite – 2019