لقد أجرينا مؤخرًا
استطلاعًا حول جدوى ترجمة دليل جافا سكريبت
هذا . كما اتضح ، رد حوالي 90 ٪ من الذين صوتوا بشكل إيجابي على هذه الفكرة. لذلك ، ننشر اليوم الجزء الأول من الترجمة.
تم تصميم هذا الدليل ، كما تصوره المؤلف ، لأولئك الذين هم بالفعل على دراية بسيطة بجافا سكريبت ويريدون ترتيب معرفتهم وترتيب شيء جديد أيضًا حول اللغة. قررنا زيادة جمهور هذه المادة قليلاً ، لتشمل أولئك الذين لا يعرفون شيئًا عن JS مطلقًا ، وبدءها بكتابة عدة إصدارات من "Hello، world!".
→
الجزء الأول: البرنامج الأول وميزات اللغة والمعايير→
الجزء الثاني: نمط الكود وهيكل البرنامج→
الجزء الثالث: المتغيرات وأنواع البيانات والتعبيرات والكائنات→
الجزء 4: الميزات→
الجزء الخامس: المصفوفات والحلقات←
الجزء السادس: الاستثناءات ، الفاصلة المنقوطة ، حرفية أحرف البدل→
الجزء 7: الوضع الصارم ، هذه الكلمة الرئيسية ، والأحداث ، والوحدات ، والحسابات الرياضية→
الجزء الثامن: نظرة عامة على ميزات ES6→
الجزء التاسع: نظرة عامة على معايير ES7 و ES8 و ES9مرحبا بالعالم!
البرنامج ، الذي يسمى تقليديا "
مرحبا ، العالم! "بسيط جدا. يعرض في مكان ما عبارة "Hello، world!" ، أو عبارة أخرى مشابهة ، عن طريق لغة معينة.
JavaScript هي لغة حيث يمكن تشغيل البرامج في بيئات مختلفة. في حالتنا ، نحن نتحدث عن المتصفحات ومنصة الخادم Node.js. إذا لم تكن قد كتبت حتى الآن سطرًا واحدًا من التعليمات البرمجية في JS وكنت تقرأ هذا النص في متصفح ، على كمبيوتر سطح مكتب ، فهذا يعني أنك حرفيًا في ثوانٍ من برنامج جافا سكريبت الأول.
لكتابته ، إذا كنت تستخدم Google Chrome ، افتح قائمة المتصفح وحدد الأمر
> فيه. سيتم تقسيم نافذة المتصفح إلى قسمين. في واحدة منها ستكون الصفحة مرئية ، في لوحة أخرى ستفتح أدوات المطور تحتوي على العديد من الإشارات المرجعية. نحن مهتمون بعلامة التبويب
Console . اضغط عليها. لا تنتبه لما قد يكون موجودًا بالفعل في وحدة التحكم (يمكنك استخدام تركيبة المفاتيح
Ctrl + L لمسحها). نحن مهتمون الآن بدعوة وحدة التحكم. هذا هو المكان الذي يمكنك فيه إدخال رمز JavaScript الذي يتم تنفيذه بالضغط على مفتاح
Enter . دعنا ندخل ما يلي في وحدة التحكم:
console.log("Hello, world!")
يمكن إدخال هذا النص من لوحة المفاتيح ، يمكنك نسخه ولصقه في وحدة التحكم. ستكون النتيجة هي نفسها ، ولكن إذا كنت تتعلم البرمجة ، فمن المستحسن إدخال نصوص البرامج بنفسك ، وعدم نسخها.
بعد وجود نص البرنامج في وحدة التحكم ، اضغط على
Enter .
إذا تم كل شيء بشكل صحيح ،
Hello, world! النص
Hello, world! تحت هذا السطر
Hello, world! . لا تنتبه لأي شيء آخر.
البرنامج الأول في وحدة تحكم المستعرض هو عرض رسالة في وحدة التحكمخيار متصفح آخر "Hello، world!" يتكون في عرض مربع رسالة. يتم ذلك على النحو التالي:
alert("Hello, world!")
هنا نتيجة تشغيل هذا البرنامج.
عرض رسالة في نافذةلاحظ أن شريط أدوات المطور موجود الآن أسفل الشاشة. يمكنك تغيير موقعها باستخدام القائمة التي تحتوي على ثلاث نقاط في عنوانها وتحديد الرمز المناسب. هناك يمكنك أيضًا العثور على زر لإغلاق هذه اللوحة.
أدوات المطور ، بما في ذلك وحدة التحكم ، متوفرة أيضًا في متصفحات أخرى. وحدة التحكم جيدة من حيث أنها في متناول اليد دائمًا عند استخدام المتصفح.
هناك طرق أخرى لتشغيل كود JS في المتصفح. لذا ، إذا تحدثنا عن الاستخدام الطبيعي لبرامج JavaScript ، فسيتم تحميلها في المتصفح لضمان تشغيل صفحات الويب. كقاعدة ، يتم تنفيذ الشفرة كملفات منفصلة بملحق
.js ، المرتبط بصفحات الويب ، ولكن يمكن أيضًا تضمين رمز البرنامج مباشرة في رمز الصفحة. كل هذا يتم باستخدام علامة
<script> . عندما يكتشف المتصفح مثل هذا الرمز ، فإنه ينفذها. يمكن الاطلاع على تفاصيل علامة
البرنامج النصي في w3school.com. على وجه الخصوص ، ضع في اعتبارك مثالاً يوضح كيفية استخدام صفحة ويب باستخدام JavaScript باستخدام هذا المورد. يمكن أيضًا تشغيل هذا المثال باستخدام موارد هذا المورد (ابحث عن الزر
Try it Yourself ) ، لكننا سنفعل ذلك بشكل مختلف قليلاً. وبالتحديد ، سنقوم بإنشاء ملف جديد في بعض محرر النصوص (على سبيل المثال ، في
VS Code أو
Notepad ++ ) ، والذي سوف نسميه
hello.html ، ونضيف الكود التالي إليه:
<!DOCTYPE html> <html> <body> <p id="hello"></p> <script> document.getElementById("hello").innerHTML = "Hello, world!"; </script> </body> </html>
نحن هنا أكثر اهتمامًا بسطر
document.getElementById("hello").innerHTML = "Hello, world!"; وهو رمز JS. يتم تضمين هذا الرمز في فتح وإغلاق علامات
<script> . يعثر على عنصر HTML بمعرف
hello في المستند ويغير خصائصه الداخلية
innerHTML (أي رمز HTML الموجود داخل هذا العنصر) إلى
Hello, world! . إذا قمت بفتح ملف
hello.html في مستعرض ، فسيتم عرض النص المحدد عليه.
إخراج جافا سكريبت إلى عنصر HTMLكما ذكرنا من قبل ، يمكن تجربة الأمثلة المقدمة على w3school.com هناك. هناك بيئات متخصصة على الإنترنت لتطوير الويب ، وعلى وجه الخصوص ، لتنفيذ كود JS. من بينها ، على سبيل المثال ،
codepen.io ،
jsfiddle.net ،
jsbin.com .
هنا ، على سبيل المثال ، يبدو مثالنا ، أعيد إنشاؤه بواسطة CodePen.
يحتوي حقل HTML على كود يصف عنصر HTML ، ويحتوي حقل JS على كود JavaScript ، ويتم عرض النتيجة في أسفل الصفحة.قلنا أعلاه أنه يمكن تشغيل برامج JavaScript على منصات مختلفة ، أحدها هو بيئة خادم Node.js. إذا كنت ستتعلم جافا سكريبت ، مع التركيز بشكل خاص على التطوير من جانب الخادم ، فمن المحتمل أن تقوم بتشغيل الأمثلة باستخدام Node.js. يرجى ملاحظة أنه ، بطريقة مبسطة ، وعدم مراعاة الدعم الخاص لميزات اللغة المحددة التي تستخدمها إصدارات Node.js والمتصفح ، سيعمل نفس الرمز في Node.js وفي المتصفح ، باستخدام الآليات الأساسية للغة. هذا ، على سبيل المثال ، الأمر
console.log("Hello, world!") سيعمل هناك وهناك. لن تعمل البرامج التي تستخدم آليات خاصة بالمتصفح في Node.js (وينطبق الشيء نفسه على محاولة تشغيل البرامج المصممة لـ Node.js في متصفح).
من أجل إطلاق "Hello، world!" في بيئة Node.js ، قم بتثبيت Node.js عن طريق تنزيل حزمة التوزيع المناسبة
من هنا . الآن قم بإنشاء ملف
hello.js ووضع التعليمات البرمجية التالية فيه:
console.log('Hello, World!');
باستخدام سطر الأوامر ، سنذهب إلى المجلد الذي تم تخزين هذا الملف فيه ، وننفذ الأمر التالي:
node hello.js
هنا نتيجة تنفيذه:
رسالة مطبوعة بواسطة Node.jsبالمناسبة ، ربما لاحظت (وربما لاحظت إذا كتبت الرمز بنفسك) أن بعض الأمثلة أعلاه تستخدم فاصلة منقوطة في نهاية السطور ، والبعض الآخر لا. في بعض الحالات ، يُحاط النص الذي نريد عرضه في وحدة التحكم أو كرسالة بعلامات اقتباس مزدوجة ، وفي بعضها ، مفردة. ربما تتساءل الآن عن سبب ذلك ، وكيف ، إذا كانت الإصدارات المختلفة من التعليمات البرمجية تعمل بدون أخطاء ، اكتب هذا الرمز بشكل صحيح. إذا أجبت على هذا السؤال دون الخوض في التفاصيل ولا تأخذ في الاعتبار بعض التفاصيل الصغيرة ، فيمكننا القول أن كلا الخيارين لاستخدام الاقتباسات والفواصل المنقوطة مقبولان ، وأنهما يعملان بنفس الطريقة. يعتمد اختيار خيار معين على أسلوب كتابة الشفرة التي يلتزم بها المبرمج ، وعلى احتياجات جزء معين من البرنامج. بالإضافة إلى ذلك ، مع هذه الأمثلة البسيطة ، يمكنك أن تشعر بإحدى السمات المميزة لجافا سكريبت ، وهي أن اللغة تمنح المبرمج بعض الحرية.
الآن ، بعد أن تعرفت على جافا سكريبت لأول مرة ، نقدم لك التحدث أكثر عن هذه اللغة.
نظرة عامة على جافا سكريبت
JavaScript هي واحدة من لغات البرمجة الأكثر شعبية في العالم. لقد تم إنشاؤها منذ أكثر من 20 عامًا ، وقد قطعت شوطًا طويلاً في تطورها. تم تصميم جافا سكريبت كلغة نصية للمتصفحات. في البداية ، كانت لديه قدرات متواضعة أكثر بكثير من الآن. تم استخدامه بشكل أساسي لإنشاء رسوم متحركة بسيطة ، مثل القوائم المنسدلة ، كانوا يعرفون عنها كجزء من تقنية
HTML الديناميكية (DHTML ، HTML ديناميكي).
مع مرور الوقت ، نمت احتياجات بيئة الويب ، على وجه الخصوص ، ظهرت واجهات برمجة تطبيقات جديدة ، وجافا سكريبت ، من أجل دعم تطوير الويب ، كان من الضروري مواكبة التقنيات الأخرى.
في الوقت الحاضر ، لا يتم استخدام JS فقط في المتصفحات التقليدية ، ولكن أيضًا في ما بعد. على وجه الخصوص ، نحن نتحدث عن منصة الخادم Node.js ، حول احتمالات استخدام JavaScript في تطوير التطبيقات المدمجة والمتنقلة ، حول حل مجموعة واسعة من المهام التي لم يتم استخدام JavaScript من قبل.
ميزات جافا سكريبت الأساسية
JavaScript هي لغة بها الميزات التالية:
- مستوى عالي. يمنحك الملخصات المبرمجة التي تسمح لك بعدم الانتباه إلى ميزات الجهاز التي يتم تشغيل برامج JavaScript عليها. تدير اللغة الذاكرة تلقائيًا باستخدام جامع القمامة. ونتيجة لذلك ، يمكن للمطور التركيز على حل المهام التي تواجهه ، دون أن يشتت انتباهه بآليات منخفضة المستوى (على الرغم من أنه يجب ملاحظة أن هذا لا يلغي الحاجة إلى الاستخدام العقلاني للذاكرة). تقدم اللغة أدوات قوية ومريحة للعمل مع البيانات من أنواع مختلفة.
- ديناميكي. على عكس لغات البرمجة الثابتة ، فإن اللغات الديناميكية قادرة ، أثناء تنفيذ البرنامج ، على تنفيذ الإجراءات التي تؤديها اللغات الثابتة أثناء تجميع البرنامج. هذا النهج له إيجابياته وسلبياته ، لكنه يمنح المطور ميزات قوية مثل الكتابة الديناميكية ، والترابط المتأخر ، والتفكير ، والبرمجة الوظيفية ، وتغيير الكائنات أثناء تنفيذ البرنامج ، والإغلاق ، وأكثر من ذلك بكثير.
- كتب بشكل ديناميكي. أنواع متغيرات تطوير JS اختيارية. في نفس المتغير ، على سبيل المثال ، يمكنك أولاً كتابة سلسلة ، ثم عدد صحيح.
- كتب ضعيفة. على عكس اللغات ذات الكتابة القوية ، لا تجبر اللغات ذات الكتابة الضعيفة المبرمج ، على سبيل المثال ، على استخدام كائنات من أنواع معينة في حالات معينة ، وإجراء تحويلات نوع ضمنية ، إذا لزم الأمر. يمنح هذا المزيد من المرونة ، لكن برامج JS ليست آمنة للنوع ، مما يجعل مهام التحقق من النوع أكثر تعقيدًا (تهدف TypeScript والتدفق إلى حل هذه المشكلة).
- مفسر. يُعتقد على نطاق واسع أن JavaScript هي لغة برمجة مترجمة ، مما يعني أن البرامج المكتوبة فيها لا تحتاج إلى تجميع قبل تنفيذها. يعارض JS في هذا الصدد لغات مثل C ، Java ، Go. عمليا ، المتصفحات لتحسين أداء البرنامج ، قم بتجميع كود JS قبل تنفيذه. هذه الخطوة ، مع ذلك ، شفافة للمبرمج ؛ لا تتطلب جهودًا إضافية منه.
- Multipadadigm. لا تفرض JavaScript على المطور استخدام أي نموذج برمجة معين ، على عكس ، على سبيل المثال ، Java (البرمجة الموجهة للكائنات) أو C (البرمجة الحتمية). يمكنك كتابة برامج JS باستخدام نموذج كائني التوجه ، على وجه الخصوص ، باستخدام النماذج الأولية والفئات التي ظهرت في معيار ES6. يمكن أيضًا كتابة البرامج في JS بأسلوب وظيفي ، نظرًا لأن الوظائف هنا هي كائنات من الدرجة الأولى. جافا سكريبت تسمح بالنمط الحتمي المستخدم في C.
نعم ، بالمناسبة ، تجدر الإشارة إلى أن جافا سكريبت وجافا ليس لديهم شيء مشترك. هذه لغات مختلفة تمامًا.
جافا سكريبت والمعايير
ECMAScript ، أو ES ، هو اسم المعيار الذي يوجه مطوري محركات JavaScript ، أي تلك البيئات التي تعمل فيها برامج JS. تقدم المعايير المختلفة ميزات جديدة في اللغة ، وتتحدث عن اسم المعايير في شكل مختصر في كثير من الأحيان ، على سبيل المثال - ES6. ES6 هو نفسه ES2015 ، فقط في الحالة الأولى يعني الرقم رقم إصدار المعيار (6) ، وفي الثاني - عام اعتماد المعيار (2015).
حدث ذلك في عالم برمجة الويب لفترة طويلة جدًا أن معيار ES3 ، الذي تم اعتماده في عام 1999 ، كان مناسبًا. الإصدار الرابع من المعيار غير موجود (حاولوا إضافة العديد من الميزات الجديدة إليه ولم يقبلوه أبدًا). في عام 2009 ، تم اعتماد معيار ES5 ، والذي كان تحديثًا ضخمًا للغة ، وهو الأول منذ 10 سنوات. بعد ذلك ، في عام 2011 ، تم اعتماد معيار ES5.1 ، وكان لديه أيضًا الكثير من الأشياء الجديدة. كما أصبح معيار ES6 المعتمد في عام 2015 مهمًا جدًا من حيث الابتكار. بدءًا من عام 2015 ، يتم اعتماد إصدارات جديدة من المعيار كل عام.
أحدث إصدار للمعيار في وقت نشر هذه المواد هو
ES9 ، المعتمد في يونيو 2018.
الملخص
اليوم كتبنا "مرحبًا يا عالم!" في جافا سكريبت ، درس الميزات الرئيسية للغة وتحدث عن توحيدها. في المرة القادمة سنتحدث عن نمط نصوص جافا سكريبت والبنية المعجمية للبرامج.
أعزائي القراء! إذا لم تكن على دراية بجافا سكريبت قبل قراءة هذه المادة ، فيرجى إخبارنا عما إذا كنت قد تمكنت من تشغيل "Hello، world!".