مقدمة في JavaScript : الدرس الاول تعريف و شرح لبنية اللغة (Syntax )

اللَّهُمَّ انْفَعْنَا بِمَا عَلَّمْتَنَا , وَعَلِّمْنَا مَا يَنْفَعُنَا , وَزِدْنَا عِلْمًا إِلَى عِلْمِنَا

مقدمة:

في هذه الدرس إن شاء الله، ودروس قادمة تليه، سوف أقدم شرح لأساسيات لغة البرمجة الرائعة (JavaScript)، وسوف يكون مستوى هذه الدروس للمبتدئين  فهي عبارة عن مقدمة (Introduction) للغة.

تعريف لغة JavaScript هي Object-base Scripting Language وهي ليست لغة Java وإنما هي لغة مختلفة كُليًا تستخدم لمعالجة او التلاعب (Maintaining) بالكائنات المرتبطة في صفحات الويبْ.

تاريخ لغة JavaScript والتي سأرمز لها لاحقًا بـ JS بدأ من شركة Netscape عندما قامت بتطوير لغة برمجة تدعى LiveScript والتي تغير اسمها لاحقًا إلى JavaScript بعد ان تعاونت شركة Netscape مع شركة Sun Microsystems لتطوير اللغة.

تذكر JavaScript ليست Java

في الجدول التالي سابين الفروقات بين لغة Java ولغة JavaScript لكي ارسخ الفكرة لديك

جدول يصف الفروقات بين لغة Java ولغة JavaScript

JavaScript	Java
An Interpreted Language	A Compiled Language
Required only editor	Required JDK and JVM

 

 

اولًا بنية اللغة Syntax:

لغة JS لغة سهلة جدًا ذات بنية لغوية (Syntax) سهلة الفهم والحفظ مع الممارسة

ماسوف نتطرق إليه في هذا الدرس سيكون

1. المتغيرات (Variables)
2. العمليات (Operations)
3. الشروط (IF...ELSE)
4. المحدد (Switch-Case)

المتغيرات (Variables): 

ملاحظة المتغيرات في لغة JS هي Case Sensitive أي حساسة لحالة الأحرف، فالمتغير x مختلف عن المتغير X.

ملاحظة المتغيرات في لغة JS هي Loosely Typed أي انه لاداعي لتحديد نوع البيانات المراد اسنادها للمتغير.

var variable_name; // انشاء المتغير
variable_name = "Hello World"; // اسناد قيمة للمتغير

المثال اعلاه يظهر عملية انشاء متغير (Declare Variable) واسناد قيمة إليه، بحيث أن variable_name هو اسم المتغير، وكلمة var هي كلمة اساسية تبين أن ماسوف أقوم بإنشائه هو متغير.

var variable_name1, variable_name2; // انشاء أكثر من متغير
variable_name1 = 9; // اسناد العدد 9 الى المتغير 1
variable_name2 = variable_name1; // ???

المثال أعلاه يظهر عملية إنشاء اكثر من متغير في سطر واحد، وذلك بفصل اسماء المتغيرات بفاصلة، بعد ذلك قمنا بإسناد قيمة الى المتغير في السطر الثاني، اما السطر الثالث فهو لك لتعمل على فهمه (Practice)

var x = 10, y = 5, c; // انشاء متغيرات x, y, c 
c = 0; // اسناد القيمة 0 الى المتغير c

المثال أعلاه يوضح أنه بإمكاننا وضع قيم افتراضية اثناء انشاء المتغير (Declare).

 

العمليات (Operations): 

جدول يوضح العمليات الرياضية (Arithmetic Operators)

# وصف العملية +

عملية الجمع (Addition)

يوجد عملية اضافية وهي (++) وتسمى Increment وهي زيادة العدد بـ 1

مثال على ذلك

var x = 1;
x++;

// الأن قيمة المتغير x هي 2

 

-

عملية الطرح (Subtraction)

يوجد عملية إضافية وهي (--) وتسمى Decrement وهي تنقيص العدد بـ 1

var x = 1;
x--;

// الأن قيمة المتغير x هي 0

 

* عملية الضرب (Multiplication) / عملية القسمة (Division) % عملية باقي القسمة (Mod)

 

عمليات المقارنة (Comparison Operators) 

#	وصف العملية
==	عملية المساواة (Equal)
!=	عملية اللامساواة (Not Equal)
>	عملية الأكبر من (Greater than)
<	عملية الأصغر من (Less than)
>=	الأكبر من أو يساوي  (Greater than or equal to)
<=	الأصغر من أو يساوي (Less than or equal to)

 

عمليات المنطق (Logic operators)

#	وصف العملية
&&	علامة "و" (Logic AND) تذكر TRUE AND TRUE هو TRUE عدا ذلك FALSE
||	علامة "أو" (Logic OR) تذكر FALSE OR FALSE هو FALSE عدا ذلك TRUE
!	علامة النفي "لا" (NOT) تذكر NOT TRUE تساوي FALSE والعكس بالعكس

 

عمليات الإسناد (Assignment Operators)

#	وصف العملية
=	اسناد قيمة دون تغيير (Assign)
+=	اسناد قيمة بعد جمعها بالقيمة الحالية
-=	اسناد قيمة بعد طرحها من القيمة الحالية
=*	اسناد قيمة بعد مضاعفتها بالقمية الحالية
/=	اسناد قيمة بعد قسمتها على القيمة الحالية
=%	اسناد قيمة بعد اخذ باقي القسمة على القيمة الحالية

يوجد ايضًا عمليات البيتوايز (Bitwise Operators) ولكني سأجعل لها درس منصفل وذلك لعمقها.

 

والأن مع الأمثلة على العمليات

var x = 1;
var y = 10;
var z = 0;

// أمثلة على العمليات الرياضية
z = x + y; // z = 1 + 10 => 11
z = x - y; // z = 1 - 10 => -9
z = x * y; // z = 1 * 10 => 10
z = x / y; // z = 1 / 10 => 0.1
z = x % y; // z = 1 % 10 => 0.1
z = x++;   // z = 2;
z = x--;   // z = 0;

// أمثلة على عمليات المقارنة
z = x == y; // FALSE
z = x != y; // TRUE
z = x > y;  // FALSE
z = x < y;  // TRUE
z = x >= y; // FALSE
z = x <= y; // TRUE

// أمثلة على عمليات المنطق
var a1 = true;
var a2 = false;
var a3;
a3 = (a1 && a2);	 // FALSE
a3 = (a1 || a2);	// TRUE لاحظ هنا علامة النفي حول قيمة الخطأ الى صواب.
a3 = (a1 AND !a2); // TRUE

// أمثلة على عمليات الاسناد
x = y + 1; // x = 10 + 1 => 11
x += y; // x = 11 + 10 => 21
x -= y; // x = 21 - 10 => 11
x *= y; // x = 11 * 1 => 110
x /= y; // x = 110 / 10 => 11
x %= y; // x = 11 % 10 => 1.0

 

الشروط (IF...ELSE):

هذا اسهل جزء بالدرس كٌله (ان تحقق الشرط افعل كذا، ان لم يتحقق افعل كذا)، مثال واحد كافي لفهمه.

var x = 1;
var y = x + 2; // y = 3

// ان تحقق الشرط افعل شئًا ما، ان لم يتحقق افعل شيئًا أخر.
if (x != y) {
  // Do something
} else {
  // Do something
}

// ان تحقق الشرط الأول افعل شيئًا ما، ان لم يتحقق وتحقق الثاني افعل شيئًا ما.. ان لم يتحقق ايًا منهم افعل شيئًا ما
if (y >= x) {
  // Do something
} else if (x < y) {
  // Do something
} else {
  // Also do something
}

// لاحظ انت لا تحتاج لاستخدام الأقواس {} ان كان ماسوف ينفذ عبارة عن سطر واحد
if (x == y)
  // Do something

لاحظ الأقواس {} تسمى Body فكل مابينها هو تابع للشرط

 

المحدد (Switch):

تخيل أن لديك نص (Statement) يتكون من مئة شرط أو أكثر، ليس من المنطقي أن نستخدم الجملة الشرطية (If..Else) مئة مرة، فالهدف من البرمجة التبسيط وليس التعقيد، وهذه هي فكرة جملة Switch فهي تعتمد على المتغير الخاص بها والذي يعتبر المحدد لها، أي ستكون النتائج حسب قيمة ذلك المتغير، ستتضح أكثر مع الأمثلة.

var select;

select = 10;
switch (select) {
    
  case '0':
    // If value of select equal to 0 then switch will moving here.
    
    // Break statement used to tell switch to stop moving from here.
    break;
    
  case '10':
    // If value of select equal to 10 then switch will moving here.
    break;
    
  default:
    // IF value of select does not matching any case, then switch will moving here.
}

في المثال اعلاه المتغير select قيمته 10، اذا سيقوم المحدد Switch بالتوجه إلى الـ case الذي يحمل القيمة 10 وتنفيذه، جملة Break وضيفتها ان توقف المحدد من الاستمرار، يعني اننا لو لم نضعها سوف ينفذ ال case 10 ثم ينفذ الـ default او لو كان تحت ال case 10 مجموعة cases اخرى فسيقوم المحدد بتنفيذها كلها وصولًا الى default او جملة Break.

لاحظ Default دومًا نضعها في نهاية المحدد.

 

ثانيا تضمينها مع HTML:

لغة JS ليست Client-side فقط وانما من الممكن أن تكون Server-side ايضًا، ولكن ماسوف اشرحه هنا هو جزئية ال Client-side.

يوجد ثلاث طرق لتضمين JS مع HTML

1. Embedded code (كود مضمن)
2. External source (ملف خارجي)
3. Event (حدث)

سوف أشرح 1 و 2 .. وسأترك 3 عندما نصل لجزئية الأحداث (Events)

<!-- Embed Code -->
<script type="text/javascript">
  // JavaScript code come here
</script>

<!-- External source -->
<script type="text/javascript" src="PATH"></script>

 

هنا أكون قد وصلت إلى نهاية درسي لهذا اليوم.

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

1. While-loop
2. for-loop

كلمات دليلية: