أساسيات JavaScript

توضح هذه المقالة أساسيات JavaScript۔

YouTube Video

تنفيذ مرحبًا بالعالم!

نظرة عامة على JavaScript

JavaScript هي واحدة من أكثر لغات البرمجة استخدامًا في تطوير الويب۔ تُستخدم بشكل أساسي لإضافة عناصر ديناميكية إلى صفحات الويب، مما يسمح بالتلاعب بواجهة المستخدم، ونقل البيانات، وإنشاء الرسوم المتحركة۔ يمكن أن تعمل على جانب العميل (في المتصفح) وجانب الخادم باستخدام تقنيات مثل Node.js۔ نظرًا لبساطتها ومرونتها، فإنها سهلة التعلم للمبتدئين وتستخدم على نطاق واسع من قبل المطورين المحترفين۔

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

المتغيرات في جافاسكريبت تشبه الحاويات التي تُستخدم لتخزين البيانات وإعادة استخدامها.۔ باستخدام المتغيرات، يمكنك الحفاظ على القيم والتعامل معها في برنامجك.۔

تصريح المتغير

في جافاسكريبت، توجد ثلاث كلمات مفتاحية للتصريح عن المتغيرات۔

• var: طريقة قديمة للتصريح عن المتغيرات، ولكن التعامل مع نطاقها معقد ويتطلب الحذر.۔ يعتمد على نطاق الدالة۔

1var x = 10;

• let: تم تقديمه في ES6، وهو طريقة للتصريح عن المتغيرات بنطاق الكتلة.۔ يمكن إعادة تعيينه ولكن لا يمكن إعادة التصريح عنه في نفس النطاق.۔

1let y = 20;

• const: تُستخدم لتصريح المتغيرات التي تكون غير قابلة للتغيير (ثوابت)۔ لها نطاق الكتلة ولا يمكن إعادة تعيينها أو التصريح بها مجددًا بعد التصريح الأولي۔

1const z = 30;

النطاق

للمتغيرات مفهوم النطاق۔

نطاق عام

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• يمكن الوصول إلى المتغيرات في النطاق العام من أي مكان۔ المتغيرات المصَرَّح بها باستخدام var لها نطاق عام أو نطاق تابع للدالة، بينما المتغيرات باستخدام let وconst لها نطاق الكتلة۔

نطاق الكتلة

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• نطاق الكتلة: المتغيرات المصَرَّح بها باستخدام let أو const تكون صالحة فقط داخل {} (الأقواس المتعرجة)۔

• يحدث خطأ عند الوصول من خارج {} (الأقواس المعقوفة)۔

نطاق الدالة

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• نطاق الدالة: المتغيرات والدوال المعرفة داخل الدالة لا يمكن الوصول إليها من خارجها۔ المتغيرات المصرّح بها داخل دالة باستخدام var تنتمي إلى هذا النطاق۔

• في هذا المثال، يمكن الوصول إلى المتغير functionVar من خارج الأقواس المعقوفة {} طالما أنه داخل نطاق الدالة.۔ من ناحية أخرى، يؤدي الوصول إلى المتغير functionScoped من خارج نطاق الدالة إلى حدوث خطأ.۔

لذا، المتغيرات المصرّح بها باستخدام var لها نطاق خاص بالدوال فقط وليس نطاق الكتلة، مما يشكل خطراً باستخدامها في نطاقات غير متوقعة۔ يفضل استخدام const للمتغيرات التي لا تتغير وعادةً استخدام let، مع تجنب استخدام var قدر الإمكان۔

أنواع البيانات

يمكن لمتغيرات JavaScript تخزين قيم من أنواع بيانات مختلفة۔ توجد string للتعامل مع النصوص وnumber للتعامل مع القيم العددية۔

أنواع البيانات الرئيسية هي كما يلي:۔

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• الأنواع الأولية:
  • number: للتعامل مع القيم العددية (الأعداد الصحيحة والأعداد العشرية)۔
  • string: للتعامل مع السلاسل النصية۔
  • boolean: يعالج القيم البوليانية true أو false۔
  • null: يمثل صراحةً قيمة 'لا شيء'۔
  • غير معرّف: قيمة يتم تعيينها تلقائيًا للمتغيرات التي لم تتم تهيئتها۔
  • Symbol: نوع بيانات يستخدم لإنشاء قيم فريدة۔

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• أنواع الكائنات:
  • الكائن: هيكل بيانات يحتوي على خصائص متعددة۔
  • Array: قائمة تحتوي على قيم متعددة۔
  • Function: كائن دالة۔

تعيين وإعادة تعيين للقيم المتغيرة

يمكن إعادة تعيين المتغيرات المعلنة باستخدام let أو var، لكن const لا يمكن إعادة تعيينها بمجرد إعلانها۔

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

رفع المتغيرات

في JavaScript، هناك ظاهرة يتم فيها 'رفع' تعريفات المتغيرات إلى قمة نطاقها۔ المتغيرات المعلنة باستخدام var تُرفع، ولكن استخدام let أو const قبل الإعلان عنها يؤدي إلى خطأ۔

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• في هذه الحالة، يتم رفع المتغيرات المُعلنة باستخدام var ويتم إخراج قيمها.۔

1console.log(b); // ReferenceError
2let b = 20;

• المتغيرات المُعلنة باستخدام let لا يتم رفعها، مما يؤدي إلى حدوث خطأ.۔

الاستخدام الصحيح للمتغيرات

خذ بعين الاعتبار النقاط التالية للاستخدام الصحيح للمتغيرات۔

• يفضل استخدام const وتجنب استخدام var۔
• اتبع قواعد تسمية المتغيرات۔
  • استخدم camelCase، مثل userName أو totalPrice۔
  • تجنب الأسماء الغامضة مثل data أو value، واستخدم أسماء ذات مغزى لتحسين القابلية للقراءة۔
  • لا يمكن لاسم المتغير أن يبدأ برقم، لذا فإن الأسماء مثل 1variable غير مسموح بها۔
• الاستخدام المفرط للمتغيرات العامة يمكن أن يسبب غموضاً في النطاق ويؤدي إلى الأخطاء، لذا تجنب استخدامها قدر الإمكان۔

الملخص

• var: طريقة قديمة لإعلان المتغيرات ذات نطاق الوظيفة۔
• let: متغير ذو نطاق كتلة يمكن إعادة تعيينه۔
• const: متغير ذو نطاق كتلة لا يمكن إعادة تعيينه (ثابت)۔
• من المهم استخدام المتغيرات وفقًا لأنواع بياناتها والانتباه إلى نطاقها۔

ما هي أحرف الهروب في JavaScript؟

أحرف الهروب هي طريقة تُستخدم لتمثيل الأحرف ذات المعاني الخاصة داخل النصوص العادية۔ في JavaScript، يتم تقديم أحرف الهروب باستخدام الخط المائل العكسي \ لإضفاء تأثيرات خاصة على النص أو لإدراج أحرف التحكم۔ أحرف الهروب مفيدة لإدراج عناصر مثل السطور الجديدة، علامات التبويب، أو علامات الاقتباس داخل النص۔

أمثلة على استخدام أحرف الهروب

فيما يلي بعض أمثلة الأكواد التي تستخدم أحرف الهروب۔

الهروب من علامات الاقتباس المزدوجة والمفردة

استخدم أحرف الهروب لتمثيل علامات الاقتباس المزدوجة أو المفردة داخل النص۔

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

الهروب من الخط المائل العكسي

لإدراج خط مائل عكسي في النص نفسه، استخدم الهروب بكتابة \۔

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

الهروب من السطور الجديدة وعلامات التبويب

يمكنك إدراج سطور جديدة وعلامات تبويب لجعل النصوص الطويلة أكثر قابلية للقراءة۔

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

الهروب من أحرف Unicode

استخدام تسلسلات الهروب الخاصة بـ Unicode يتيح لك تمثيل أحرف معينة باستخدام رموز سداسية عشرية۔

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

ملاحظات

الاستخدام المفرط لأحرف الهروب قد يضر بقابلية قراءة الكود

الاستخدام الزائد عن الحد لأحرف الهروب يمكن أن يقلل من قابلية قراءة الكود الخاص بك۔ من المهم بشكل خاص استخدام أحرف الهروب بحكمة في النصوص الطويلة۔

فكّر في استخدام النصوص النموذجية

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

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

الملخص

أحرف الهروب ضرورية لتمثيل الأحرف الخاصة أو أحرف التحكم داخل النصوص۔ من خلال الهروب من علامات الاقتباس الفردية أو المزدوجة وإضافة السطور الجديدة أو علامات التبويب، يمكنك إنشاء نصوص أكثر مرونة۔ ومع ذلك، فإن الاستخدام المفرط لأحرف الهروب يمكن أن يجعل الكود أكثر صعوبة في القراءة، لذلك فكّر في استخدام النصوص النموذجية عند الحاجة۔

إصدارات JavaScript

تمتلك JavaScript مواصفة قياسية تُعرف باسم ECMAScript (ES)۔ تطورت JavaScript بناءً على هذه المواصفة القياسية۔ فيما يلي وصف موجز للإصدارات الرئيسية۔

• ES3 (1999)

  أول إصدار تم اعتماده على نطاق واسع۔ تم وضع القواعد الأساسية والمزايا الرئيسية۔

• ES5 (2009)

  تم تقديم وضع strict mode، وإضافة ميزات جديدة مثل Array.prototype.forEach، وObject.keys، وغيرها.۔

• ES6 / ES2015 (2015)

  تم إجراء تحديث رئيسي لـ JavaScript۔ تم تقديم العديد من الميزات الأساسية لجافاسكريبت الحديثة، مثل let، const، arrow functions، classes، promises، modules، وغيرها.۔

• إي إس7 / إي إس2016 (2016)

  تمت إضافة Array.prototype.includes و عامل الأس (**).۔

• إي إس8 / إي إس2017 (2017)

  تم تقديم async/await، مما جعل كتابة العمليات غير المتزامنة أبسط.۔

• إي إس9 / إي إس2018 (2018)

  تمت إضافة المكررات غير المتزامنة وخصائص Rest/Spread.۔

• إي إس10 / إي إس2019 (2019)

  تمت إضافة flatMap و Object.fromEntries.۔

• إي إس11 / إي إس2020 (2020)

  تمت إضافة Optional Chaining (?.) و Nullish Coalescing Operator (??)، مما يسمح بكتابة الكود بطريقة أبسط وأكثر أماناً.۔

• ES12 / ES2021 (2021)

  تمت إضافة String.prototype.replaceAll و Promise.any، من بين ميزات أخرى۔

• ES13 / ES2022 (2022)

  تمت إضافة Array.prototype.at وحقول private في الصفوف (#field)، من بين ميزات أخرى۔

• ES14 / ES2023 (2023)

  تمت إضافة Array.prototype.toSorted و Symbol.prototype.description، من بين ميزات أخرى۔

• ES15 / ES2024 (2024)

  تمت إضافة Promise.withResolvers لإدارة Promise بشكل أسهل و ArrayBuffer قابل للتغيير في الحجم، من بين ميزات أخرى۔

يتم تحديث جافاسكريبت الحالية كل عام، وتُضاف ميزات جديدة حتى في أحدث الإصدارات.۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video