تركيب JavaScript Syntax

-

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

القيم JavaScript Values 

تحتوي لغة JavaScript على نوعين من القيم:

  • قيم ثابتة Fixed values و تسمى أيضا Literals
  • قيم متغيرة Variable values و تسمى المتغيرات Variables


نطبق مثال حتى نفهم الموضوع: 

أولا نفهم كيف نعمل المتغيرات . 

بنستخدم الكلمة var لتعريف متغير 

مثال : 

var x;
var y;
var z

تمام بعد التعريف وحتى نستخدم هذه المتغيرات بكون شكل الكود:

x=10;
y=50;
z=x+y
document.write(z)
document.write(x+y);

بهذه الطريقة عرفنا مجموعة متغيرات وبعدها استخدمنا هذه المتغيرات وخزنا فيها قيم. وعملنا عمليات حسابيه، وطبعنا النتيجة. 

تمام نطبق هذه الحكي بمثال عملي. 

ننتقل الى ملف JS الي عملناه ونعدل على الكود الى: 

document.getElementById("PWelcomeMessage").innerHTML = "Hi, Welcome to my first JavaScript from External";
var x;
var y;
var z
x=10;
y=50;
z=x+y
document.write(z)
document.write(x+y);

ونفس كود HTML السابق ما نعدل عليه (تأكد من مسار ملف JS يكون صحيح). 

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript in Html</h3>
<p id="PWelcomeMessage"></p>
</body>
</html> 

النتيجة بتكون: 

تمام نفهم شو عملنا

تم جمع القيم بطريقتين 

الطريقة الأولى: جمعنا x  و y وخزنا النتيجة في متغير باسم z

الطريقة الثانية: تم الجمع مباشرة والعرض. 

لاحظ في الطريقة الثانية استخدمنا الامر

 document.write()

وهو طريقة ل Output  في JavaScript 

بهيك عرفنا كيف ممكن نعمل عمليات حسابيه بسيطة في JavaScript 

JavaScript Literals

حكينا ان القيم الثابتة تسمى أيضا Literals

من امثلة ذلك الأرقام Numbers ، النصوص String 

الأرقام Numbers: 

مثال : 

لعرض قيمة رقم معين من خلال JavaScript 

طبق الكود التالي في ملف JavaScript 

document.getElementById("PNumber").innerHTML = 10.50;

كود ملف HTML 

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
<h3>External JavaScript in Html</h3>
<p id="PNumber"></p>
<script src="JS.js"></script>
</body>
</html> 

النتيجة

عرضنا الرقم وهو من نوع float (يحتوي كسور). 

النصوص String 

لإضافة نص لازم يكون النص داخل double or single quotes 

مثال : 

كود ملف JS 

document.getElementById("PWelcomeMessage").innerHTML = "Hi, Welcome to my first JavaScript from External";

كود ملف HTML 

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
<h3>External JavaScript in Html</h3>
<p id="PWelcomeMessage"></p>
<script src="JS.js"></script>
</body>
</html> 

النتيجة:

Boolean Literals

يمكن ان تكون قيم literals عبارة عن Boolean يعني بتكون القيمة صح او خطأ true or false وهي keywords في JavaScript 

مثال : 

true
false
var found = false;

Null Literals

قيم Null Literals هي قيم فارغة وتعني ان ما في قيم وتعتبر قيمة خاصة special literal value في JavaScript 

مثال :

var h = null;


المتغيرات JavaScript Variables 

حكينا ان القيم المتغيرة تسمى المتغيرات Variables، يعني هي متغيرات تستخدم لتخزين قيم البيانات data values

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

في لغة JavaScript بنستخدم الكلمات التالية (keywords) لتعريف المتغيرات: 

var, let , const

ونستخدم اكيد إشارة المساواة = لتعيين القيم الى المتغيرات. (الاشارة = في JavaScript  لا تعني المساواه)

مثال:

نطبق مثال لتعيين قيمة عدد صحيح في متغير ومن ثم طباعه هذا العدد على الشاشة: 

اضف الكود التالي الى ملف JS 

var x;
x=10;
document.write(x);

الكود الى ملف HTML 

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
<h3>JavaScript Variables</h3>
<script src="JS.js"></script>
</body>
</html> 

النتيجة:

الموضوع بسيط جدا عرفنا متغير باسم x باستخدام var وبعدها خزنا القيمة 10 داخل هذا المتغير واخر اشي طبعنا القيمة. 

استخدام let 
نفس المثال السابق الفرق استخدام let بدل var 
كود JS 
let   x;
x=10;
document.write(x);

JavaScript Operators
يستخدم JavaScript مجموعه من operators لإجراء العمليات الحسابية مثل (+، -، *، /). 
مثال : 
عدل ملف 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> 
النتيجة:

تمام نفهم شو عملنا. 
عرفنا 3 متغير بالأسماء x , y , z 
طبقنا عملية الجميع من خلال تعيين القيمة الى المتغير z وبعدها طبعنا النتيجة.
الكود 
 document.write("<br>");
لإضافة سطر جديد
باقي العمليات طبعناها مباشرة على الشاشة 
يتم تطبيق الأولوية كمان في العمليات الحسابية يعني مثلا اذا كان الكود: 
(5 + 6) * 10
بتكون الأولوية للعمليات داخل الاقواس بعدها بتم تطبيق العمليات التالية وهكذا.

الجملة السابقة (5 + 6) * 10  تسمى JavaScript Expressions 

امثلة على JavaScript Expressions
ارقام 
(5 + 6) * 10
ارقام ومتغيرات: 
x * 10
نصوص strings 
"Layan" + " " + "lareen" + 10
نشوف نتيجة الجملة الاخيرة في حال التنفيذ :
نطبع ال Expressions التالي:
document.write("Layan" + " " + "lareen" + " " + 10);
النتيجة:
ما هي Identifiers / Names في JavaScript 
Identifiers هي JavaScript names، وتُستخدم لتسمية variables و keywords و functions.
قواعد التسمية نفسها في معظم لغات البرمجة.
اهم القواعد عند التسميه في JavaScript : 
ان يبدا الاسم ب :
  • الأحرف (A-Z or a-z)
  • او العلامة ($)
  • او underscore (_)
ما بعد ذلك يمكن ان يكون احرف ارقام underscores،dollar signs 
غير مسموح باستخدام الأرقام كأول حرف في الأسماء.

بهذه الطريقة يمكن لـ JavaScript التمييز بسهولة بين identifiers  وnumbers

استخدام إشارة الطرح  -  غير مسموح في الأسماء في JavaScript لأنها محجوزة لعمليات الطرح

JavaScript is Case Sensitive
لغة JavaScript هي Case Sensitive بمعنى آخر يجب الالتزام بالأسماء كما هي وفي حال وجود أي اختلاف لا يمكن التعرف عليه على انه نفس المتغير. 
مثال ذلك: 
Var  خطأ لا تعني var لان var عباره عن keywords تكتب بالأحرف الصغيرة.
LET لا تعني let لان let عباره عن keywords تكتب بالأحرف الصغيرة.
في حال تم تعريف متغير باسم مع اختلاف في حالة الاحرف مثال: 
var FirstName, Firstname
المتغير  FirstName مختلف عن Firstname والسبب ان حرف N مختلف. 

JavaScript and Camel Case
هذا المصطلح يستخدم عند تعريف الأسماء بحيث يمكن تركيب اكثر من اسم لحصول على اسم واحد ذو معنى, 
مثال ذلك : 
FirstName
الاسم السابق مكون من Frist و Name عملنا دمج حتى يكون الاسم واضح. 
طرق تعريف هذه الأسماء 
  • استخدام Underscore 
النتيجة 
First_Name 

  • Upper Camel Case (Pascal Case):
تعتمد هذه الطريقة على شكل سنام الجمل (يعني اول حرف من كل كلمة بكون capital) 
النتيجة
FirstName
  • Lower Camel Case:
هذه الطريقة تعني ان اول حرف من اول اسم في المتغير بكون حرف صغير
النتيجة:
firstName