Skip to content

3. أساسيات JavaScript

ملاحظة: من الآن فصاعدًا، سيشير مصطلح [JavaScript] دائمًا إلى معيار ECMAScript 6.

داخل مشروع JavaScript السابق، أنشئ مجلدًا باسم [bases]. سنضع الأمثلة من هذا القسم هناك:

Image

3.1. script [bases-01]

لتقديم أساسيات PHP7، استخدمنا الكود التالي (انظر الفقرة المرتبطة):


<?php
 
// this is a comment
// variable used without being declared
$nom = "dupont";
// a screen display
print "nom=$nom\n";
// an array with elements of different types
$tableau = array("un", "deux", 3, 4);
// its number of elements
$n = count($tableau);
// a loop
for ($i = 0; $i < $n; $i++) {
  print "tableau[$i]=$tableau[$i]\n";
}
// initialize 2 variables with the contents of an array
list($chaine1, $chaine2) = array("chaine1", "chaine2");
// concatenation of the 2 strings
$chaine3 = $chaine1 . $chaine2;
// result display
print "[$chaine1,$chaine2,$chaine3]\n";
// use function
affiche($chaine1);
// the type of a variable can be known
afficheType("n", $n);
afficheType("chaine1", $chaine1);
afficheType("tableau", $tableau);
// the type of a variable can change at runtime
$n = "a changé";
afficheType("n", $n);
// a function can return a result
$res1 = f1(4);
print "res1=$res1\n";
// a function can return a table of values
list($res1, $res2, $res3) = f2();
print "(res1,res2,res3)=[$res1,$res2,$res3]\n";
// we could have retrieved these values in a table
$t = f2();
for ($i = 0; $i < count($t); $i++) {
  print "t[$i]=$t[$i]\n";
}
// testing
for ($i = 0; $i < count($t); $i++) {
  // displays only channels
  if (getType($t[$i]) === "string") {
    print "t[$i]=$t[$i]\n";
  }
}
// == and === comparison operators
if("2"==2){
  print "avec l'opérateur ==, la chaîne 2 est égale à l'entier 2\n";
}else{
  print "avec l'opérateur ==, la chaîne 2 n'est pas égale à l'entier 2\n";
}
if("2"===2){
  print "avec l'opérateur ===, la chaîne 2 est égale à l'entier 2\n";
}
else{
  print "avec l'opérateur ===, la chaîne 2 n'est pas égale à l'entier 2\n";
}
// other tests
for ($i = 0; $i < count($t); $i++) {
  // displays only integers >10
  if (getType($t[$i]) === "integer" and $t[$i] > 10) {
    print "t[$i]=$t[$i]\n";
  }
}
// a while loop
$t = [8, 5, 0, -2, 3, 4];
$i = 0;
$somme = 0;
while ($i < count($t) and $t[$i] > 0) {
  print "t[$i]=$t[$i]\n";
  $somme += $t[$i];   //$somme=$somme+$t[$i]
  $i++;               //$i=$i+1
}//while
print "somme=$somme\n";
 
// end of program
exit;
 
//----------------------------------
function affiche($chaine) {
  // displays $chaine
  print "chaine=$chaine\n";
}
 
//poster
//----------------------------------
function afficheType($name, $variable) {
  // displays the type of $variable
  print "type[variable $" . $name . "]=" . getType($variable) . "\n";
}
 
//afficheType
//----------------------------------
function f1($param) {
  // adds 10 to $param
  return $param + 10;
}
 
//----------------------------------
function f2() {
  // returns 3 values
  return array("un", 0, 100);
}
?>

عند ترجمة هذا إلى JavaScript، ينتج عنه الكود التالي:


'use strict';
// this is a comment
// constant
const nom = "dupont";
// a screen display
console.log("nom : ", nom);
// an array with elements of different types
const tableau = ["un", "deux", 3, 4];
// its number of elements
let n = tableau.length;
// a loop
for (let i = 0; i < n; i++) {
  console.log("tableau[", i, "] = ", tableau[i]);
}
// initialize 2 variables with the contents of an array
let [chaine1, chaine2] = ["chaine1", "chaine2"];
// concatenation of the 2 strings
const chaine3 = chaine1 + chaine2;
// result display
console.log([chaine1, chaine2, chaine3]);
// use function
affiche(chaine1);
// the type of a variable can be known
afficheType("n", n);
afficheType("chaine1", chaine1);
afficheType("tableau", tableau);
// the type of a variable can change at runtime
n = "a changé";
afficheType("n", n);
// a function can return a result
let res1 = f1(4);
console.log("res1=", res1);
// a function can return a table of values
let res2, res3;
[res1, res2, res3] = f2();
console.log("(res1,res2,res3)=", [res1, res2, res3]);
// we could have retrieved these values in a table
let t = f2();
for (let i = 0; i < t.length; i++) {
  console.log("t[i]=", t[i]);
}
// testing
for (let i = 0; i < t.length; i++) {
  // displays only channels
  if (typeof (t[i]) === "string") {
    console.log("t[i]=", t[i]);
  }
}
// == and === comparison operators
if ("2" == 2) {
  console.log("avec l'opérateur ==, la chaîne 2 est égale à l'entier 2");
} else {
  console.log("avec l'opérateur ==, la chaîne 2 n'est pas égale à l'entier 2");
}
if ("2" === 2) {
  console.log("avec l'opérateur ===, la chaîne 2 est égale à l'entier 2");
} else {
  console.log("avec l'opérateur ===, la chaîne 2 n'est pas égale à l'entier 2");
}
// other tests
for (let i = 0; i < t.length; i++) {
  // displays only integers >10
  if (typeof (t[i]) === "number" && Math.floor(t[i]) === t[i] && t[i] > 10) {
    console.log("t[i]=", t[i]);
  }
}
// a while loop
t = [8, 5, 0, -2, 3, 4];
let i = 0;
let somme = 0;
while (i < t.length && t[i] > 0) {
  console.log("t[i]=", t[i]);
  somme += t[i];
  i++;
}
console.log("somme=", somme);
 
// program stopped because no executable code left
 
//poster
//----------------------------------
function affiche(chaine) {
  // chain poster
  console.log("chaine=", chaine);
}
 
//afficheType
//----------------------------------
function afficheType(name, variable) {
  // displays variable type
  console.log("type[variable ", name, "]=", typeof (variable));
}
 
//----------------------------------
function f1(param) {
  // adds 10 to param
  return param + 10;
}
 
//----------------------------------
function f2() {
  // returns 3 values
  return ["un", 0, 100];
}

دعونا نناقش الاختلافات بين كود PHP وكود ECMAScript 6 مع إعلان [use strict] (السطر 1):

  • الاختلاف الأول هو أنه في ECMAScript، يتم إعلان المتغيرات باستخدام الكلمات الرئيسية التالية:
    • [let] لإعلان متغير قد تتغير قيمته أثناء تنفيذ الكود؛
    • [const] لإعلان متغير لن تتغير قيمته (أي ثابت) أثناء تنفيذ الكود؛
    • يمكنك أيضًا استخدام الكلمة الرئيسية [var] بدلاً من [let]. كانت هذه هي الكلمة الرئيسية المستخدمة في ECMAScript 5. لن نستخدمها في هذه الدورة؛
  • السطر 6: يمكن لطريقة [console.log] عرض جميع أنواع البيانات: السلاسل والأرقام والقيم المنطقية والمصفوفات والكائنات. لا يمكن لطريقة [print] في PHP عرض المصفوفات والكائنات بشكل أصلي. في تعبير [console.log]، [console] هو كائن و[log] هي طريقة لهذا الكائن؛
  • السطر 8: المصفوفات في JavaScript هي كائنات يُشار إليها بواسطة مؤشر. عندما نكتب: 

const tableau = ["un", "deux", 3, 4];

فالمتغير [array] هو مؤشر إلى المصفوفة الحرفية ["one", "two", 3, 4]. ولا يؤدي تعديل محتويات المصفوفة إلى تغيير مؤشرها. ولذلك، غالبًا ما يتم إعلان المصفوفة باستخدام الكلمة الرئيسية [const]. أما في PHP، فلا تتم الإشارة إلى المصفوفة بواسطة مؤشر. فهي قيمة حرفية؛

  • السطر 12: تم تعريف متغير الحلقة [i] (let) داخل الحلقة. الكلمة الرئيسية [let] لها نطاق كتلة (الرمز الموجود داخل الأقواس المتعرجة). وبالتالي، لا يمكن الوصول إلى المتغير [i] الموجود في السطر 12 إلا داخل الحلقة؛
  • السطر 18: عامل ربط السلاسل هو عامل + في JavaScript وعامل . في PHP. ومن السمات المميزة لهذا العامل أنه له الأسبقية على عامل الجمع +. وبالتالي:
    • في PHP، ينتج عن ‘1’ + 2 الرقم 3؛
    • في JavaScript، ينتج عن ‘1’+2 السلسلة ‘12’؛
  • السطر 20: يمكن لـ [console.log] عرض المصفوفات؛
  • السطر 82: في JavaScript، لا يمكن تحديد نوع معلمات الدالة؛
  • السطر 91: يسمح لك عامل [typeof] بتحديد نوع عنصر البيانات. هناك أربعة أنواع: number و string و boolean و object. لاحظ أنه في JavaScript لا يوجد نوع [integer] أو نوع [array]. كما ذكرنا، يتم التعامل مع المصفوفات عبر المؤشرات وتندرج ضمن فئة الكائنات؛
  • الأسطر 50–59: كما هو الحال في PHP، تحتوي JavaScript على عاملين للمقارنة، == و ‘===’، لهما نفس المعنى كما في PHP. غالبًا ما يشير ESLint إلى عامل == على أنه خطأ محتمل. سنستخدم عامل ‘===’ بشكل ثابت؛
  • السطر 79: كان بإمكاننا تضمين عبارة [return]، لكن ESLint يصدر تحذيرًا بأن [return] يجب أن تُستخدم فقط داخل دالة؛

دعونا نُشغّل هذا الكود:

Image

نتائج التنفيذ:


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\bases\bases-01.js"
nom : dupont
tableau[ 0 ] = un
tableau[ 1 ] = deux
tableau[ 2 ] = 3
tableau[ 3 ] = 4
[ 'chaine1', 'chaine2', 'chaine1chaine2' ]
chaine= chaine1
type[variable n ]= number
type[variable chaine1 ]= string
type[variable tableau ]= object
type[variable n ]= string
res1= 14
(res1,res2,res3)= [ 'un', 0, 100 ]
t[ 0 ]= un
t[ 1 ]= 0
t[ 2 ]= 100
t[ 0 ]= un
avec l'opérateur ==, la chaîne 2 est égale à l'entier 2
avec l'opérateur ===, la chaîne 2 n'est pas égale à l'entier 2
t[ 2 ]= 100
t[ 0 ]= 8
t[ 1 ]= 5
somme= 13
 
[Done] exited with code=0 in 0.316 seconds

في الكود المكتوب، أبلغ ESLint عن خطأين:

Image

  • عند تمرير المؤشر فوق خط التحذير الأحمر، تظهر رسالة الخطأ [3]. هنا، لا يتعرف ESLint على أن هناك مقارنة بين ثابتين. يجب أن يكون أحد المعاملين متغيرًا؛
  • في [4]، يتيح لك خيار [Quick Fix] تجاهل التحذير إذا قررت عدم تصحيح الخطأ؛

Image

  • في [5]، يمكنك تعطيل التحذير الخاص بالسطر الحالي أو بالملف بأكمله. ونختار الخيار الأخير هنا. ثم يتم إنشاء السطر [6] في بداية الملف؛

3.2. البرنامج النصي [bases-02]

يوضح البرنامج النصي [bases-02] استخدام الكلمتين الرئيسيتين [let] و [const]:


'use strict';
// to initialize a variable, use let or const
// let for variables
let x = 4;
x++;
console.log(x);
// const for constants
const y = 10;
x += y;
// prohibited
y++;
  • السطر 11 يتسبب في خطأ وقت التشغيل [1-2]. يتم الإبلاغ عنه بواسطة ESLint قبل التنفيذ [3]:

Image

3.3. البرنامج النصي [bases-03]

يفحص البرنامج النصي [bases-03] نطاق المتغيرات في JavaScript:


'use strict';
// variable scope
let count = 1;
function doSomething() {
  // count is known here
  console.log("count=",count);
}
// call
doSomething();
  • المتغير [count] المُعلن خارج دالة [doSomething] معروف مع ذلك داخل هذه الدالة. وهذا اختلاف جوهري عن PHP؛

التنفيذ


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\bases\bases-03.js"
count= 1
 
[Done] exited with code=0 in 0.3 seconds

3.4. نص برمجي [bases-04]

تخفي متغير محلي متغير عام يحمل نفس الاسم:


'use strict';
// variable scope
const count = 1;
function doSomething() {
  // the local variable hides the global variable
  const count = 2;
  console.log("count inside function=",count);
}
// global variable
console.log("count outside function=",count);
// local variable
doSomething();

التنفيذ


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\bases\bases-04.js"
count outside function= 1
count inside function= 2
 
[Done] exited with code=0 in 0.246 seconds

3.5. نص برمجي [bases-05]

المتغير المُعرَّف داخل الدالة غير معروف خارجها:


'use strict';
// variable scope
function doSomething() {
  // local variable to the
  const count = 2;
  console.log("count inside function=", count);
}
// here count is unknown
console.log("count outside function=", count);
doSomething();

يبلغ ESLint عن وجود خطأ في السطر 9:

Image

3.6. script [bases-06]

تحدد الكلمات الرئيسية [let] و [const] المتغيرات ذات نطاق [block] (الرمز الموجود داخل الأقواس المتعرجة)، ولكن لا تحددها الكلمة الرئيسية [var]:


'use strict';
// the [let] keyword is used to define a block-scope variable
{
  // the [count] variable is only known in this block
  let count = 1;
  console.log("count=", count);
}
// here the variable [count] is not known
count++;
 
// the [const] keyword is used to define a block-span variable
{
  // the [count2] variable is only known in this block
  const count2 = 1;
  console.log("count=", count2);
}
// here the variable [count2] is not known
count2++;
 
// the [var] keyword cannot be used to define a block-scope variable
{
  // the variable [count3] will be known globally
  var count3 = 1;
  console.log("count=", count3);
}
// here the variable [count3] is known
count3++;

تعليقات

  • السطر 5: المتغير [count] معروف فقط داخل كتلة الكود التي تم إعلانه فيها (الأسطر 3–7)؛
  • السطر 14: الثابت [count2] معروف فقط داخل كتلة الكود التي تم إعلانه فيها (الأسطر 12–16)؛
  • السطر 23: المتغير [count3] معروف خارج كتلة الكود التي تم إعلانه فيها (الأسطر 21–25)؛

يبلغ ESLint عن الأخطاء التالية:

Image

لهذه الأسباب المتعلقة بنطاق الكتلة، سنستخدم فقط الكلمات الرئيسية [let] و [const] من الآن فصاعدًا.

3.7. نص برمجي [bases-07]

أنواع البيانات في JavaScript:


'use strict';
 
// data type jS
const var1 = 10;
const var2 = "abc";
const var3 = true;
const var4 = [1, 2, 3];
const var5 = {
  nom: 'axèle'
};
const var6 = function () {
  return +3;
}
// type display
console.log("typeof(var1)=", typeof (var1));
console.log("typeof(var2)=", typeof (var2));
console.log("typeof(var3)=", typeof (var3));
console.log("typeof(var4)=", typeof (var4));
console.log("typeof(var5)=", typeof (var5));
console.log("typeof(var6)=", typeof (var6));

التنفيذ


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\bases\bases-07.js"
typeof(var1)= number
typeof(var2)= string
typeof(var3)= boolean
typeof(var4)= object
typeof(var5)= object
typeof(var6)= function
 
[Done] exited with code=0 in 0.26 seconds

تعليقات

  • السطر 7 (الكود): المصفوفة هي كائن. وبالتالي، فإن [var4] هو مؤشر إلى المصفوفة، وليس المصفوفة نفسها؛
  • السطر 8 (الكود): [var5] هو مؤشر إلى كائن حرفي. سنرى أن الكائنات الحرفية في JavaScript تشبه إلى حد كبير مثيلات الفئات في PHP. يتم الإشارة إليها أيضًا عبر المؤشرات؛
  • السطر 11 (الكود): يمكن أن يكون المتغير من النوع [function] (السطر 7 من النتائج)؛

3.8. نص برمجي [bases-08]

يوضح هذا البرنامج النصي تحويلات الأنواع الممكنة في JavaScript.


'use strict';
 
// implicit type changes
// type -->bool
console.log("---------------[Conversion implicite vers un booléen]------------------------------");
showBool("abcd");
showBool("");
showBool([1, 2, 3]);
showBool([]);
showBool(null);
showBool(0.0);
showBool(0);
showBool(4.6);
showBool({});
showBool(undefined);
 
function showBool(data) {
  // the conversion from data to Boolean is done automatically in the following test
  console.log("[data=", data, "], [type(data)]=", typeof (data), "[valeur booléenne(data)]=", data ? true : false);
}
 
// implicit type changes to a nume ric type
console.log("---------------[Conversion implicite vers un nombre]------------------------------");
showNumber("12");
showNumber("45.67");
showNumber("abcd");
 
function showNumber(data) {
  // data + 1 doesn't work, because then jS concatenates strings rather than adding them together
  const nombre = data * 1;
  console.log("[data=", data, "], [type(data)]=", typeof (data), "[nombre]=", nombre, "[type(nombre)]=", typeof (nombre));
}
 
// explicit type changes to Boolean
console.log("---------------[Conversion explicite vers un booléen]------------------------------");
showBool2("abcd");
showBool2("");
showBool2([1, 2, 3]);
showBool2([]);
showBool2(null);
showBool2(0.0);
showBool2(0);
showBool2(4.6);
showBool2({});
showBool2(undefined);
 
function showBool2(data) {
  // the conversion from data to Boolean is explicitly done in the following test
  console.log("[", data, "], [type(data)]=", typeof (data), "[valeur booléenne(data)]=", Boolean(data));
}
// changements explicites de type vers Number
console.log("---------------[Conversion explicite vers un nombre]------------------------------");
showNumber2("12.45");
showNumber2(67.8);
showNumber2(true);
showNumber2(null);
 
function showNumber2(data) {
  const nombre = Number(data);
  console.log("[data=", data, "], [type(data)]=", typeof (data), "[nombre]=", nombre, "[type(nombre)]=", typeof (nombre));
}
 
// to String
console.log("---------------[Conversion explicite vers un string]------------------------------");
showString(5);
showString(6.7);
showString(false);
showString(null);
 
function showString(data) {
  const chaîne = String(data);
  console.log("[data=", data, "], [type(data)]=", typeof (data), "[chaîne]=", chaîne, "[type(chaîne)]=", typeof (chaîne));
}
 
// some unexpected implicit conversions
console.log("---------------[Autres cas]------------------------------");
const string1 = '1000.78';
// default string concatenation
const data1 = string1 + 1.034;
console.log("data1=", data1, "type=", typeof (data1));
const data2 = 1.034 + string1;
console.log("data2=", data2, "type=", typeof (data2));
// explicit conversion to number
const data3 = Number(string1) + 1.034;
console.log("data3=", data3, "type=", typeof (data3));
// true is converted into the number 1
const data4 = true * 1.18;
console.log("data4=", data4, "type=", typeof (data4));
// false is converted into the number 0
const data5 = false * 1.18;
console.log("data5=", data5, "type=", typeof (data5));

التنفيذ


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Data\st-2019\dev\es6\javascript\bases\bases-08.js"
---------------[Conversion implicite vers un booléen]------------------------------
[data= abcd ], [type(data)]= string [valeur booléenne(data)]= true
[data= ], [type(data)]= string [valeur booléenne(data)]= false
[data= [ 1, 2, 3 ] ], [type(data)]= object [valeur booléenne(data)]= true
[data= [] ], [type(data)]= object [valeur booléenne(data)]= true
[data= null ], [type(data)]= object [valeur booléenne(data)]= false
[data= 0 ], [type(data)]= number [valeur booléenne(data)]= false
[data= 0 ], [type(data)]= number [valeur booléenne(data)]= false
[data= 4.6 ], [type(data)]= number [valeur booléenne(data)]= true
[data= {} ], [type(data)]= object [valeur booléenne(data)]= true
[data= undefined ], [type(data)]= undefined [valeur booléenne(data)]= false
---------------[Conversion implicite vers un nombre]------------------------------
[data= 12 ], [type(data)]= string [nombre]= 12 [type(nombre)]= number
[data= 45.67 ], [type(data)]= string [nombre]= 45.67 [type(nombre)]= number
[data= abcd ], [type(data)]= string [nombre]= NaN [type(nombre)]= number
---------------[Conversion explicite vers un booléen]------------------------------
[ abcd ], [type(data)]= string [valeur booléenne(data)]= true
[ ], [type(data)]= string [valeur booléenne(data)]= false
[ [ 1, 2, 3 ] ], [type(data)]= object [valeur booléenne(data)]= true
[ [] ], [type(data)]= object [valeur booléenne(data)]= true
[ null ], [type(data)]= object [valeur booléenne(data)]= false
[ 0 ], [type(data)]= number [valeur booléenne(data)]= false
[ 0 ], [type(data)]= number [valeur booléenne(data)]= false
[ 4.6 ], [type(data)]= number [valeur booléenne(data)]= true
[ {} ], [type(data)]= object [valeur booléenne(data)]= true
[ undefined ], [type(data)]= undefined [valeur booléenne(data)]= false
---------------[Conversion explicite vers un nombre]------------------------------
[data= 12.45 ], [type(data)]= string [nombre]= 12.45 [type(nombre)]= number
[data= 67.8 ], [type(data)]= number [nombre]= 67.8 [type(nombre)]= number
[data= true ], [type(data)]= boolean [nombre]= 1 [type(nombre)]= number
[data= null ], [type(data)]= object [nombre]= 0 [type(nombre)]= number
---------------[Conversion explicite vers un string]------------------------------
[data= 5 ], [type(data)]= number [chaîne]= 5 [type(chaîne)]= string
[data= 6.7 ], [type(data)]= number [chaîne]= 6.7 [type(chaîne)]= string
[data= false ], [type(data)]= boolean [chaîne]= false [type(chaîne)]= string
[data= null ], [type(data)]= object [chaîne]= null [type(chaîne)]= string
---------------[Autres cas]------------------------------
data1= 1000.781.034 type= string
data2= 1.0341000.78 type= string
data3= 1001.814 type= number
data4= 1.18 type= number
data5= 0 type= number
https://stahe.github.io
هذا البرنامج التعليمي الذي كتبه Serge Tahé متاح للجمهور وفقًا لشروط Creative Commons Attribution – Non-Commercial – ShareAlike 3.0 Unported.