جافا سكريبت الدرس التفصيلي. جافا سكريبت للمبتدئين - أمثلة بسيطة. ▍إعلان الوظيفة الكلاسيكية

نظرًا للطلب الشائع، نطلق سلسلة من دروس JavaScript. إذا كنت مصمما على إتقان JS، فيجب أن يكون لديك معرفة أساسية بـ HTML وCSS، لأن هذا هو الأساس، والذي بدونه يصعب فهم ما سيتم مناقشته.

من جانبنا، سأحاول أن أشرح بلغة مفهومة، وإظهار أمثلة الحياة الحقيقية، لأن كل شيء يتم تعلمه عن طريق المقارنة.

ما هي JavaScript، أو كيفية فهم الغرض المطلوب منها لتطوير الويب!

نحن نعيش في عالم حيث كل شيء ملموس، ونحن ندرك الأفكار التي تتبادر إلى أذهاننا. نحن نبني المنازل والسيارات ونتنقل باستخدام تقنيات مختلفة. أي أن ما يمكننا القيام به في العالم الحقيقي يمكن تخيله بالمقارنة مع HTML، حيث تعمل كمادة بناء، والأساس الذي يرتكز عليه كل شيء، وبمساعدة CSS نصمم هذا العالم، ونجعله ملونًا، بالطريقة التي أردناها نود رؤيته بنفسك.

ربما تتساءل عما إذا كان HTML وCSS هما ما نحيط به، فما هي JavaScript؟ وأين تظهر في عالمنا؟

أعتقد أنه سيكون من الأسهل الشرح باستخدام مثال فيلم غاري بوتر، وأعتقد أن الكثير منكم قد شاهده وسيفهم ما سيتم مناقشته. وفقًا لسيناريو الفيلم، نعلم أن غاري كان يتمتع بقوى خارقة، وكان ساحرًا، وقد ساعدته عصا سحرية في ذلك. لقد كانت العصا السحرية هي التي أعطته الفرصة لخلق السحر، بقدر ما كان لديه من المعرفة لجعله فريدًا.

تعد JavaScript عصا سحرية يمتلكها كل مطور ويب، ولكن السحر الذي يمكنك إنشاؤه باستخدامها يعتمد فقط على المعرفة التي يمتلكها المطور. أولئك الذين أتقنوا هذه اللغة هم سحرة ويصنعون المعجزات حقًا.

لا تكتمل JavaScript بدون مكونات HTML وCSS. يذكر العديد من المبرمجين ثلاث لغات تشكل "طبقات" صفحة الويب: HTML وCSS وJavaScript.

HTML هي أول لغة ترميزية للنص التشعبي - فهي توفر طبقات هيكلية، وتنظم محتوى الصفحة بشكل صريح، مثل النص والصور والعناصر الأخرى.

والثاني، CSS (أوراق الأنماط المتتالية)، ينشئ تصميمًا جميلاً ومظهرًا لمحتوى HTML.

والثالث - JavaScript - يضيف طبقات سلوكية، مما ينشط صفحة الويب، ويجعلها تفاعلية، أي إنشاء عناصر للتفاعل مع الزوار.

خلاصة القول، لإتقان جافا سكريبت، يجب أن يكون لديك فهم جيد لكل من HTML وCSS.

قد تبدو البرمجة وكأنها سحر لا يصدق، بعيدًا عن متناول البشر. ومع ذلك، فإن معظم مفاهيمها ليس من الصعب فهمها. تعد JavaScript مناسبة للمبتدئين إلى حد ما، ولكنها لا تزال أكثر تعقيدًا من HTML أو CSS، لذلك من خلال هذه السلسلة من الدروس، سنعلمك مفاهيم البرمجة الأساسية التي يمكنك تطبيقها على البرمجة النصية في JavaScript.

سوف تتعرف على الرموز الجديدة ( )، , ; ، ()،!، تعلم تسمية الكلمات الجديدة (var، null، else if)، سنقوم بتحليل قواعد علامات الترقيم وبناء جملة اللغة نفسها، وكل هذا من أجل خلق سحرك.

تم إعداد المادة بواسطة دينيس جوريلوف، اكتب تعليقاتك وتأكد من مشاركة هذه المادة مع أصدقائك.

• ترجمة

المادة التي ننشر ترجمتها اليوم مخصصة لأساسيات JavaScript وهي مخصصة للمبرمجين المبتدئين. ويمكن أيضًا اعتباره كتابًا مرجعيًا صغيرًا عن بنيات JS الأساسية. سنتحدث هنا، على وجه الخصوص، عن نظام نوع البيانات، والمتغيرات، والمصفوفات، والوظائف، ونماذج الكائنات، وبعض الميزات الأخرى للغة.

أنواع البيانات الأولية تحتوي جافا سكريبت على أنواع البيانات الأولية التالية: رقم، منطقي، سلسلة، غير محدد، فارغ. تجدر الإشارة على الفور إلى أنه عند العمل مع أنواع البيانات البدائية، على سبيل المثال، سلسلة حرفية، يمكننا الوصول إلى أساليبها وخصائصها حتى بدون إجراء تحويل صريح. النقطة هنا هي أنه عند محاولة تنفيذ مثل هذه العمليات، يتم تجهيز القيم الحرفية تلقائيًا بغلاف الكائن المناسب. ▍الأرقام يوجد نوع واحد فقط من الأرقام في JavaScript - أرقام الفاصلة العائمة ذات الدقة المزدوجة. وهذا يؤدي إلى حقيقة أن نتائج حساب بعض التعبيرات غير صحيحة حسابيا. ربما تعلم بالفعل أن قيمة التعبير 0.1 + 0.2 في JS لا تساوي 0.3. في الوقت نفسه، عند العمل مع الأعداد الصحيحة، لا يتم ملاحظة مثل هذه المشاكل، أي 1 + 2 === 3.

تحتوي JavaScript على كائن Number، وهو عبارة عن غلاف كائن للقيم الرقمية. يمكن إنشاء كائنات من النوع Number إما باستخدام أمر مثل var a = new Number(10) أو يمكنك الاعتماد على السلوك التلقائي للنظام الموضح أعلاه. يسمح هذا على وجه التحديد باستدعاء الطرق المخزنة في Number.prototype عند تطبيقها على القيم الحرفية الرقمية:

(123).toString(); //"123" (1.23).toFixed(1); //"1.2"
هناك وظائف عالمية مصممة لتحويل قيم الأنواع الأخرى إلى نوع رقمي. هذه هي parseInt() و parseFloat() و Number()، والتي تعمل في هذه الحالة كدالة عادية تقوم بتحويل النوع:

ParseInt("1") //1 parseInt("text") //NaN parseFloat("1.234") //1.234 Number("1") //1 Number("1.234") //1.234
إذا أدت إحدى العمليات باستخدام الأرقام إلى شيء ليس رقمًا (أثناء بعض العمليات الحسابية، أو عند محاولة تحويل شيء ما إلى رقم)، فلن تقوم JavaScript بإلقاء خطأ، ولكنها ستمثل نتيجة هذه العملية كقيمة NaN ( ليس رقمًا، وليس رقمًا). للتحقق مما إذا كانت القيمة هي NaN، يمكنك استخدام الدالة isNaN().

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

1 + 1 //2 "1" + "1" //"11" 1 + "1" //"11"

▍ السلاسل السلاسل في JavaScript هي تسلسلات من أحرف Unicode. يتم إنشاء سلسلة حرفية عن طريق إحاطة النص المراد تضمينه بين علامات الاقتباس المزدوجة ("") أو علامات الاقتباس المفردة (""). كما ذكرنا سابقًا، عند العمل مع السلسلة الحرفية، يمكننا الاعتماد على غلاف الكائن المقابل، والذي يحتوي نموذجه الأولي على العديد من الطرق المفيدة، بما في ذلك السلسلة الفرعية () وindexOf () وconcat ().

"text".substring(1,3) //ex "text".indexOf("x") //2 "text".concat("end") //نهاية النص
السلاسل النصية، مثل القيم البدائية الأخرى، غير قابلة للتغيير. على سبيل المثال، لا تقوم طريقة concat() بتعديل سلسلة موجودة، ولكنها تقوم بإنشاء سلسلة جديدة.

▍القيم المنطقية يتم تمثيل نوع البيانات المنطقية في JS بقيمتين - صحيح وخطأ. يمكن للغة تحويل القيم المختلفة تلقائيًا إلى نوع بيانات منطقي. لذا، بالإضافة إلى القيمة المنطقية false، فإن القيم التالية هي null وun المعرفة و"" (سلسلة فارغة) و0 وNaN. كل شيء آخر، بما في ذلك أي أشياء، هي قيم حقيقية. أثناء العمليات المنطقية، أي شيء يعتبر صحيحًا يتم تحويله إلى صحيح، وأي شيء يعتبر خطأ يتم تحويله إلى خطأ. نلقي نظرة على المثال التالي. وفقًا للمبادئ المذكورة أعلاه، سيتم تحويل السلسلة الفارغة إلى خطأ ونتيجة لتنفيذ هذا الرمز، سيظهر السطر "هذا خطأ" في وحدة التحكم.

دع النص = ""؛ إذا (نص) (console.log("هذا صحيح"); ) آخر (console.log("هذا خطأ"); )

الكائنات الكائنات هي هياكل ديناميكية تتكون من أزواج ذات قيمة أساسية. يمكن أن تكون القيم أنواع بيانات أو كائنات أو وظائف بدائية.

يتم إنشاء الكائنات بسهولة أكبر باستخدام بناء الجملة الحرفي للكائن:

Let obj = ( message: "A message"، doSomething: function() ())
يمكن قراءة خصائص الكائن وإضافتها وتحريرها وحذفها في أي وقت. وإليك كيف يتم ذلك:

• خصائص القراءة: object.name، object .
• كتابة البيانات إلى الخصائص (إذا كانت الخاصية التي يتم الوصول إليها غير موجودة، تتم إضافة خاصية جديدة بالمفتاح المحدد): object.name = value، object = value.
• حذف الخصائص: حذف object.name، حذف الكائن.

وهنا بعض الأمثلة:

دع obj = (); // إنشاء كائن فارغ obj.message = "رسالة"; // إضافة خاصية جديدة obj.message = "رسالة جديدة"; // تحرير الخاصية حذف object.message؛ // حذف خاصية
يتم تنفيذ الكائنات في اللغة كجداول التجزئة. يمكن إنشاء جدول تجزئة بسيط باستخدام الأمر Object.create(null):

Let French = Object.create(null); French["yes"] = "oui"; French["no"] = "non"; الفرنسية["نعم"]؛//"أوي"
إذا كنت بحاجة إلى جعل كائن غير قابل للتغيير، فيمكنك استخدام الأمر Object.freeze().

للتكرار عبر كافة خصائص الكائن، يمكنك استخدام الأمر Object.keys():

الوظيفة logProperty(name)( console.log(name); // اسم الخاصية console.log(obj); // قيمة الخاصية ) Object.keys(obj).forEach(logProperty);

▍مقارنة قيم الأنواع والكائنات البدائية عند العمل عمليًا مع القيم البدائية، يمكنك، كما قلنا سابقًا، إدراكها ككائنات لها خصائص وطرق، على الرغم من أنها ليست كائنات. القيم الأولية غير قابلة للتغيير، ويمكن تغيير البنية الداخلية للكائنات. المتغيرات في JavaScript، يمكن الإعلان عن المتغيرات باستخدام الكلمات الأساسية var، وlet، وconst.

عند استخدام الكلمة الأساسية var، يمكنك الإعلان عن متغير، وإذا لزم الأمر، تهيئته بقيمة معينة. إذا لم تتم تهيئة المتغير، فستكون قيمته غير محددة. المتغيرات المعلنة باستخدام الكلمة الأساسية var لها نطاق وظيفي.

الكلمة الأساسية Let تشبه إلى حد كبير var، والفرق هو أن المتغيرات المعلنة باستخدام الكلمة الأساسية Let لها نطاق حظر.

المتغيرات المعلنة باستخدام الكلمة الأساسية const لها أيضًا نطاق كتلة، والذي، نظرًا لأن قيم هذه المتغيرات لا يمكن تغييرها، سيكون من الأصح أن يطلق عليها "الثوابت". يمكن مقارنة الكلمة الأساسية const، التي تجمد قيمة المتغير المعلن باستخدامها، بالطريقة Object.freeze()، التي تجمد الكائنات.

إذا تم الإعلان عن متغير خارج الدالة، فإن نطاقه يكون عامًا.

المصفوفات يتم تنفيذ المصفوفات في JavaScript باستخدام الكائنات. ونتيجة لذلك، عندما نتحدث عن المصفوفات، فإننا نتحدث في الواقع عن كائنات تشبه المصفوفة. يمكنك العمل مع عناصر المصفوفة باستخدام فهارسها. يتم تحويل المؤشرات الرقمية إلى سلاسل واستخدامها كأسماء للوصول إلى قيم عناصر المصفوفة. على سبيل المثال، بناء مثل arr يشبه بناء مثل arr["1"] ، وكلاهما سيعطي الوصول إلى نفس القيمة: arr === arr["1"] . بناءً على ما سبق، يتم تعريف مصفوفة بسيطة باستخدام Let arr = ["A"، "B"، "C"] ككائن مثل هذا:

("0": "أ"، "1": "ب"، "2": "ج")
تؤدي إزالة العناصر من المصفوفة باستخدام أمر الحذف إلى ترك ثغرات فيها. لتجنب هذه المشكلة، يمكنك استخدام الأمر splice()، ولكنه بطيء لأنه بعد إزالة عنصر، فإنه ينقل العناصر المتبقية من المصفوفة، في الواقع، ينقلها إلى بداية المصفوفة، إلى اليسار.

Let arr = ["A"، "B"، "C"]؛ حذف آر؛ console.log(arr); // ["A"، فارغ، "C"] console.log(arr.length); // 3
تسهل أساليب المصفوفات تنفيذ بنيات البيانات مثل الأكوام وقوائم الانتظار:

// المكدس Let Stack = ; Stack.push(1); // المكدس.push(2); // دع الأخير = stack.pop(); // console.log(last); // 2 // قائمة الانتظار Let queue = ; queue.push(1); // queue.push(2); // Let first = queue.shift();// console.log(first); // 1

الوظائف الوظائف في JavaScript هي كائنات. يمكن تعيين الوظائف إلى متغيرات، وتخزينها في كائنات أو صفائف، وتمريرها كوسائط إلى وظائف أخرى، وإرجاعها من وظائف أخرى.

هناك ثلاث طرق للإعلان عن الوظائف:

• إعلان الوظيفة الكلاسيكية (إعلان الوظيفة أو بيان الوظيفة).
• استخدام التعبيرات الوظيفية، والتي تسمى أيضًا بالحرفية الوظيفية.
• استخدام بناء جملة دالة السهم.

▍إعلان الوظيفة الكلاسيكية مع هذا النهج لإعلان الوظيفة، تنطبق القواعد التالية:

• الكلمة الأساسية الأولى في سطر تعريف الوظيفة هي function .
• يجب إعطاء الوظيفة اسمًا.
• يمكن استخدام الدالة في الكود قبل الإعلان عنها بسبب آلية رفع إعلان الدالة إلى أعلى النطاق الذي تم الإعلان عنه فيه.

إليك ما يبدو عليه إعلان الوظيفة الكلاسيكية:

وظيفة تفعل شيئا ()

▍التعبيرات الوظيفية عند استخدام التعبيرات الوظيفية، ضع في اعتبارك ما يلي:

• لم تعد الكلمة الأساسية للوظيفة هي الكلمة الأولى في سطر إعلان الوظيفة.
• اسم الوظيفة اختياري. من الممكن استخدام كل من تعبيرات الوظائف المجهولة والمسمى.
• يجب أن تتبع أوامر استدعاء هذه الوظائف أوامر الإعلان عنها.
• يمكن تشغيل مثل هذه الوظيفة مباشرة بعد الإعلان عنها، باستخدام بناء جملة IIFE (تعبير الوظيفة الذي تم استدعاؤه فورًا).

يبدو تعبير الدالة كما يلي:

دعونا نفعل شيئا = وظيفة ()

▍وظائف السهم يمكن اعتبار وظائف السهم أساسًا "سكرًا نحويًا" لإنشاء تعبيرات دالة مجهولة. تجدر الإشارة إلى أن مثل هذه الوظائف ليس لها كيانات خاصة بها وكيانات الحجج. يبدو إعلان دالة السهم كما يلي:

دعني أفعل شيئًا = () = > ();

▍طرق استدعاء الوظائف يمكن استدعاء الوظائف بطرق مختلفة. استدعاء دالة عادية doSomething(arguments) استدعاء دالة كطريقة للكائن theObject.doSomething(arguments) theObject["doSomething"](arguments) استدعاء دالة كمنشئ new doSomething(arguments) استدعاء دالة باستخدام طريقة application() doSomething.apply(theObject, ) doSomething.call(theObject,حجج) استدعاء دالة باستخدام طريقة bind() Let doSomethingWithObject = doSomething.bind(theObject); doSomethingWithObject();
يمكن استدعاء الوظائف باستخدام وسائط أكثر أو أقل من عدد المعلمات التي تم تحديدها عند الإعلان عنها. أثناء تشغيل الدالة، سيتم ببساطة تجاهل الوسائط "الإضافية" (على الرغم من أن الدالة سيكون لها حق الوصول إليها)، وستتلقى المعلمات المفقودة القيمة unidentified .

تحتوي الوظائف على معلمتين زائفتين: هذه والوسائط.

▍ هذه الكلمة الأساسية تمثل هذه الكلمة الأساسية سياق الوظيفة. تعتمد القيمة التي تشير إليها على كيفية استدعاء الدالة. فيما يلي القيم التي تأخذها هذه الكلمة الأساسية، اعتمادًا على كيفية استدعاء الوظيفة (يتم وصفها أعلاه، مع أمثلة التعليمات البرمجية، والبنيات المستخدمة هنا):

• استدعاء الوظيفة العادي هو window / unknown .
• استدعاء دالة كطريقة للكائن - theObject .
• يعد استدعاء دالة كمنشئ كائنًا جديدًا.
• استدعاء دالة باستخدام طريقة application() - theObject .
• استدعاء دالة باستخدام طريقة bind() - theObject .

▍ الكلمة الأساسية للوسائط الكلمة الأساسية للوسائط هي معلمة زائفة تتيح الوصول إلى جميع الوسائط المستخدمة في استدعاء الوظيفة. يبدو وكأنه مصفوفة، لكنه ليس مصفوفة. على وجه الخصوص، ليس لديه أساليب الصفيف.

الدالة تقليلToSum(total, value)( إرجاع الإجمالي + القيمة; ) الدالة sum())( Let args = Array.prototype.slice.call(arguments); return args.reduce(reduceToSum, 0); ) sum(1,2) ، 3)؛
البديل للكلمة الأساسية الوسيطة هو بناء جملة جديد للمعلمات المتبقية. في المثال التالي، args عبارة عن مصفوفة تحتوي على كل ما تم تمريره إلى الوظيفة عند استدعائها.

مجموع الدالة(...args)(return args.reduce(reduceToSum, 0);)

▍بيان الإرجاع: ستُرجع الدالة التي لا تحتوي على عبارة إرجاع غير محددة. عند استخدام الكلمة الأساسية return، انتبه إلى كيفية عمل آلية الإدراج التلقائي للفاصلة المنقوطة. على سبيل المثال، لن تُرجع الدالة التالية كائنًا فارغًا، بل قيمة غير محددة:

الدالة getObject() ( return ( ) ) getObject()
لتجنب هذه المشكلة، ضع قوس الفتح المتعرج على نفس سطر عبارة الإرجاع:

الدالة getObject() ( الإرجاع ( ) )

الكتابة الديناميكية JavaScript هي لغة مكتوبة ديناميكيًا. وهذا يعني أن القيم الملموسة لها أنواع، أما المتغيرات فلا. أثناء تنفيذ البرنامج، يمكن كتابة قيم من أنواع مختلفة لنفس المتغير. فيما يلي مثال لوظيفة تعمل مع قيم من أنواع مختلفة:

سجل الوظيفة (القيمة)( console.log(value); ) سجل(1); سجل("نص"); سجل ((الرسالة: "نص"))؛
لمعرفة نوع البيانات المخزنة في متغير، يمكنك استخدام عامل التشغيل typeof():

دع ن = 1؛ typeof(n); //رقم Let s = "text"; نوع (أنواع) ؛ //سلسلة دع fn = function() (); typeof(fn); //وظيفة

نموذج التنفيذ ذو الخيط الواحد وقت تشغيل جافا سكريبت هو ذو خيط واحد. يتم التعبير عن هذا، على وجه الخصوص، في استحالة التنفيذ المتزامن لوظيفتين (إذا كنت لا تأخذ في الاعتبار إمكانية تنفيذ التعليمات البرمجية غير المتزامنة، والتي لن نتطرق إليها هنا). تحتوي بيئة وقت التشغيل على شيء يسمى قائمة انتظار الأحداث التي تخزن قائمة المهام التي تحتاج إلى المعالجة. ونتيجة لذلك، لا يواجه نظام تنفيذ JS ذو الخيط الواحد مشكلة الجمود في الموارد، لذلك ليست هناك حاجة لآلية القفل. ومع ذلك، يجب تنفيذ التعليمات البرمجية التي تدخل قائمة انتظار الأحداث بسرعة. إذا قمت بتحميل الموضوع الرئيسي في تطبيق متصفح بعمل كثيف، فلن تستجيب صفحة التطبيق لإدخال المستخدم وسيطالبك المتصفح بإغلاق هذه الصفحة. معالجة الاستثناءات لدى JavaScript آلية للتعامل مع الاستثناءات. إنه يعمل وفقًا لمبدأ معتاد تمامًا لمثل هذه الآليات: تتم كتابة التعليمات البرمجية التي يمكن أن تسبب خطأ باستخدام بنية المحاولة/التقاط. الكود نفسه موجود في كتلة المحاولة، وتتم معالجة الأخطاء في كتلة الالتقاط.

ومن المثير للاهتمام ملاحظة أنه في بعض الأحيان، عند حدوث مواقف غير طبيعية، لا تنتج JavaScript رسائل خطأ. ويرجع ذلك إلى حقيقة أن JS لم يرتكب أي أخطاء حتى اعتماد معيار ECMAScript 3.

على سبيل المثال، في مقتطف التعليمات البرمجية التالي، ستفشل محاولة تعديل كائن مجمد، ولكن لن يتم طرح أي استثناء.

Let obj = Object.freeze(); obj.message = "نص";
تظهر بعض أخطاء JS "الصامتة" في الوضع الصارم، ويمكنك تمكينها باستخدام البنية "استخدام صارم"؛ .

نظام النموذج الأولي يرتكز نظام النموذج الأولي على آليات JS مثل وظائف المنشئ، والأمر Object.create()، والكلمة الأساسية للفئة.
خذ بعين الاعتبار المثال التالي:

دع الخدمة = ( doSomething: function() ()) السماح للخدمة المتخصصة = Object.create(service); console.log(specializedService.__proto__ === خدمة); //حقيقي
هنا، تم استخدام الأمر Object.create() لإنشاء كائن خدمة متخصص كان نموذجه الأولي هو كائن خدمة. نتيجة لذلك، اتضح أنه يمكن استدعاء طريقة doSomething() عن طريق الوصول إلى كائن خدمة متخصص. بالإضافة إلى ذلك، هذا يعني أن الخاصية __proto__ لكائن SpecialService تشير إلى كائن الخدمة.

لنقم الآن بإنشاء كائن مشابه باستخدام الكلمة الأساسية class:

فئة الخدمة (doSomething()) فئة SpecializedService توسع الخدمة () Let SpecializedService = new SpecializedService(); console.log(specializedService.__proto__ === SpecializedService.prototype);
ستتم إضافة الأساليب المعلنة في فئة الخدمة إلى كائن Service.prototype. سيكون لمثيلات فئة الخدمة نفس النموذج الأولي (Service.prototype). ستقوم كافة المثيلات بتفويض استدعاءات الأسلوب إلى كائن Service.prototype. ونتيجة لذلك، اتضح أنه تم الإعلان عن الأساليب مرة واحدة فقط، في Service.prototype، وبعد ذلك يتم "توريثها" من قبل جميع مثيلات الفئة.

▍ يمكن لكائنات السلسلة النموذجية أن تكون "ورثة" لكائنات أخرى. يحتوي كل كائن على نموذج أولي تتوفر له أساليبه. إذا حاولت الوصول إلى خاصية غير موجودة في الكائن نفسه، فستبدأ JavaScript في البحث عنها في سلسلة النموذج الأولي. ستستمر هذه العملية حتى يتم العثور على الخاصية، أو حتى يصل البحث إلى نهاية السلسلة. حول البرمجة الوظيفية في JavaScript، تعتبر الوظائف في JavaScript كائنات من الدرجة الأولى، وتدعم اللغة آلية الإغلاق. وهذا يفتح الطريق لتطبيق تقنيات البرمجة الوظيفية في JS. على وجه الخصوص، نحن نتحدث عن إمكانية استخدام وظائف ذات ترتيب أعلى.

الإغلاق هو وظيفة داخلية لديها حق الوصول إلى المتغيرات المعلنة داخل الوظيفة الأصلية، حتى بعد تنفيذ الوظيفة الأصلية.

الدالة ذات الترتيب الأعلى هي دالة قادرة على أخذ دوال أخرى كوسيطات، أو إرجاع الدوال، أو القيام بكليهما.

تمت تغطية البرمجة الوظيفية في JS في العديد من المنشورات. إذا كنت مهتمًا، فإليك بعض المواد المخصصة لهذا الموضوع

جافا سكريبت بناء الجملة التعليمي

قبل أن تبدأ في قراءة البرنامج التعليمي للغة JavaScript، يجب أن تكون لديك معرفة بـ .

ستكون هذه إضافة كبيرة في تعلم بناء جملة JavaScript إذا كنت معتادًا بالفعل على بعض لغات البرمجة، مثل PHP أو C أو Pascal، وتفهم أيضًا ماهية المتغير أو نوع البيانات أو الوظيفة أو المصفوفة.

ومع ذلك، إذا لم تكن على دراية بلغات البرمجة، فلا داعي للقلق؛ فهذا البرنامج التعليمي لجافا سكريبت مخصص لأولئك الذين بدأوا في تعلم البرمجة لأول مرة.

جافا سكريبت (JavaScript) هي لغة برمجة من جانب العميل يمكن استخدامها للتحكم في عناصر صفحة HTML (علامات HTML) ومتصفح الويب، وجعلها تتحرك، والاستجابة للأحداث المختلفة (نقرات الماوس، والضغط على لوحة المفاتيح)، وإنشاء العديد من برامج (برامج نصية) مثيرة للاهتمام: الاختبارات والرسوم المتحركة ومعارض الصور (على سبيل المثال، مثل VKontakte) والألعاب وغير ذلك الكثير.

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

ينقسم تعلم JavaScript عادةً إلى أربع مراحل:
1. إتقان بناء جملة جافا سكريبت (هذا البرنامج التعليمي),
2. دراسة DOM وBOM،
3. إدارة DOM وBOM باستخدام JavaScript،
4. دراسة مكتبات جافا سكريبت المختلفة. jQuery هي المكتبة الأكثر شعبية في الوقت الحالي (يجب أن يظهر برنامج تعليمي لـ jQuery على هذا الموقع في نهاية عام 2015).

DOM هو نموذج كائن المستند. بفضل تقنية DOM، تبدأ علامات صفحة HTML في تمثيل شجرة من الكائنات ولكل كائن في هذه الشجرة عنوان فريد خاص به. يمكن للغة JavaScript، من خلال الوصول إلى هذا العنوان، الوصول إلى علامة HTML أو أخرى ومعالجتها (تغيير اللون والحجم والموضع وما إلى ذلك).

BOM هو نموذج مستند المتصفح. البنية هي نفس بنية DOM، فقط بدلاً من كائنات صفحة HTML، توجد كائنات متصفح: نافذة المتصفح، وحجم شاشة المتصفح، وسجل التصفح، وسطر الحالة، وما إلى ذلك.

بعد دراسة DOM وBOM، نبدأ في إنشاء نصوص جافا سكريبت أكثر أو أقل تعقيدًا تتفاعل مع الصفحة والمتصفح.

بعد ذلك، بعد أن أصبحوا أكثر راحة قليلا، يقومون بدراسة بعض مكتبات JavaScript، على سبيل المثال jQuery، والتي بفضلها يمكنك إنشاء نفس البرامج كما في JavaScript، فقط بشكل أسرع وأكثر كفاءة.

يبدأ بعض مشرفي المواقع على الفور في تعلم jQuery، متخطيين المراحل الثلاث السابقة، لكنني لا أوصي بذلك، لأنه في أي حال تحتاج إلى فهم بناء جملة JavaScript ومعرفة كائنات DOM/BOM وخصائصها وطرقها وأغراضها.

ما هي البرامج التي يمكنك كتابتها باستخدام جافا سكريبت؟

يمكنك استخدامه لإنشاء العديد من البرامج (البرامج النصية) المثيرة للاهتمام:
- يمكنك إنشاء برامج نصية من شأنها تغيير عناصر صفحة موقع الويب أو موقعها من خلال النقر على زر أو آخر،
- يمكنك إنشاء الرسوم المتحركة،
- التعامل مع النماذج، على سبيل المثال، التحقق من صحة البيانات التي أدخلها المستخدم،
— إنشاء اختبارات مختلفة، على سبيل المثال، مثل امتحان الدولة الموحدة (الامتحانات المدرسية) والحصول على النتيجة على الفور،
— بفضل BOM، يمكنك معرفة خصائص المتصفح وجهاز الكمبيوتر الخاص بالمستخدم الذي زار موقعك، مما يسمح لك بإنشاء عدادات زيارة متنوعة،
— باستخدام JavaScript، يمكنك أيضًا إنشاء ألعاب ورسوم متحركة والعديد من البرامج الأخرى المثيرة للاهتمام والمفيدة.

ما هو الغرض من هذا البرنامج التعليمي لجافا سكريبت؟

الغرض من كتاب JavaScript هذا هو تعليمك أساسيات بناء جملة JavaScript، وتعريفك بالبرمجة والمفاهيم مثل المتغيرات وأنواع البيانات والعمليات وبيانات الفروع والوظائف والحلقات والمصفوفات والكائنات وما إلى ذلك. كل هذا موجود في لغات برمجة أخرى، لذا بمجرد إتقان JavaScript، سيكون من الأسهل عليك تعلم لغات أخرى، مثل PHP أو C++ أو Python.

هيكل دروس جافا سكريبت

في البرنامج التعليمي لجافا سكريبت، سيتم تغطية المواضيع والدروس التالية.

• كيفية إدراج برنامج نصي في مستند HTML (معلومات عامة)؛
• التعليقات في جافا سكريبت؛
• كيفية الإعلان عن المتغيرات ومنحها الأسماء الصحيحة؛
• تحليل البرنامج النصي وبناء جملة الطريقة؛
• طريقة التنبيه () ؛
• تفاصيل مفيدة: "كعب روتين" لرابط معطل مؤقتًا

من المؤلف

هناك العديد من التفاصيل الدقيقة المختلفة في إنشاء صفحات الويب. ولكن هناك أيضًا ثلاث ركائز. هذه هي HTML، CSS وجافا سكريبت.

أوصي بتنظيم التعليم الذاتي الخاص بك على النحو التالي: بمجرد إتقان بناء جملة HTML وتعلم كيفية إنشاء صفحات بدائية تحتوي على نصوص وصور وجداول، ابدأ على الفور في تعلم CSS. بمجرد أن تفهم كيفية العمل مع CSS، ابدأ في إتقان JavaScript، مع توسيع "مفرداتك" في اللغات الثلاث في نفس الوقت. أعتقد أنه خلال ستة أشهر ستتمكن من إنشاء موقع ويب جميل وعملي للغاية.

لفترة طويلة لم أكن أعرف كيفية التعامل مع جافا سكريبت. لقد صادفت كتبًا مدرسية كانت إما مجردة جدًا - النظرية والنظرية، ولم يكن من الواضح كيفية تطبيقها على الممارسة، أو على العكس من ذلك، محددة جدًا: إليك مجموعة من الوصفات الجاهزة، خذها واستخدمها، ولكن كيف سينتهي الأمر كله ليس من شأنك.

لقد عثرت بطريقة ما على كتاب مدرسي لفاديم دوناييف. أعلم أن الكثير من الناس ينتقدون هذا الكتاب المدرسي. بالإضافة إلى ذلك، قمت بتنزيل ملف PDF ممسوح ضوئيًا مثير للاشمئزاز، حيث بدلاً من "()" يمكن أن يكون هناك، على سبيل المثال، "Q"، وتم استبدال الحروف اللاتينية في الرموز (في بعض الأماكن!) بأحرف روسية مماثلة، ولهذا السبب هذه الرموز لا تعمل. بشكل عام، اضطررت إلى النفخ. ولكي أكون صادقًا، لو لم أقرأ شيئًا عن جافا سكريبت من قبل، لما فهمت هذه الأخطاء وكنت سأنضم إلى صفوف الموبخين. لكنني كنت عاطلاً عن العمل في ذلك الوقت، وكان لدي الوقت الكافي للعمل فيه، وأعجبني الكتاب المدرسي. ولكنها مفصلة للغاية ومصممة للأشخاص الذين سبق لهم التعامل مع البرمجة.

ملاحظة 2012

والآن، بعد عدة سنوات، ما زلت أنظر إلى هذا الكتاب المدرسي دون نفس الحماس. إنه قديم، و"مصمم" لـ IE، وسطحي تمامًا؛ هناك أيضًا أخطاء حقيقية ورموز برمجية غير دقيقة، ولم يتم العثور على بعض الأشياء المفيدة. ولكن بالمقارنة مع تلك "الأدلة البلهاء" التي أنتجتها محركات البحث بكثرة، كان هذا شيئًا مميزًا.

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

الإدراج في مستند HTML

من المحتمل أنك شاهدت العلامات التالية في أكواد HTML:

هذا التعويذة بين العلامات هو البرنامج النصي.

تنتمي العلامة نفسها إلى لغة HTML، ويمكن أن تحتوي على السمات التالية:

• لغة
• يكتب

هذه السمة اختيارية. ويجب استخدامه إما لتوضيح إصدار اللغة (javascript1.1، javascript1.2، وما إلى ذلك)، أو إذا كنت تستخدم لغة أخرى (على سبيل المثال،