تعلم JavaScript في ساعة واحدة مع هذه الدورة التدريبية المجانية والتفاعلية

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

لذا فقد تواصلت مع Dylan C. Israel - أحد مستخدمي YouTube و freeCodeCamp grad - وطلبت منه إنشاء دورة JavaScript مجانية على Scrimba.

تحتوي الدورة على 15 محاضرة و 7 تحديات تفاعلية وهي مناسبة للمبتدئين. سيعطيك مقدمة سريعة لأهم مفاهيم JavaScript.

إليك كيفية وضع الدورة.

الجزء # 1: مقدمة

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

الجزء # 2: المتغيرات

المفهوم الأول الذي ستحتاج إلى تعلمه هو المتغيرات ، وهي مخصصة لتخزين القيم. في JavaScript الحديثة ، توجد كلمتان رئيسيتان للقيام بذلك: letو const.

دعونا نخزن اسم ديلان في letالذي سنسميه name.

let name = 'Dylan'; console.log(name); // --> 'Dylan' 

كما ترى ، يمكننا بعد ذلك الرجوع إلى هذا المتغير لاحقًا من أجل جلب القيمة ، على سبيل المثال ، لتسجيل الخروج إلى وحدة التحكم ، باستخدام console.log()الطريقة.

الجزء # 3: الأوتار

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

let name = "Dylan"; 

الجزء # 4: تحدي الأوتار

حان وقت التحدي الأول في الدورة! في هذا ، ستحاول دمج متغيرين في متغير واحد.

let firstName = "Dylan"; let lastName = "Israel"; console.log(fullName); // --> ReferenceError: fullName is not defined 

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

الجزء # 5: أرقام

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

يمكننا استخدام typeofللتحقق من نوع البيانات:

let example1 = 7; let example2 = 7.77; console.log(typeof example1); console.log(typeof example2); // --> "number" // --> "number" 

في هذه المحاضرة سوف تتعلم أيضا كيفية تحويل القيم بين السلاسل وعدد تستخدم parseInt()و parseFloat()الأساليب.

الجزء # 6: تحدي الأرقام

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

let example1 = parseInt("33 World 22"); let example2 = parseFloat('44 Dylan 33'); let example3 = 55.3333.toFixed(0); let example4 = 200.0.toFixed(2); 

قد يكون الأمر صعبًا بعض الشيء ، لذا لا تحبط إذا ارتكبت أخطاء!

الجزء # 7: القيم المنطقية

القيم المنطقية بسيطة ، إما أنها صحيحة أو خاطئة. إليك كيفية إنشاء قيمة منطقية:

let example = true; 

يمكن أن تكون حقيقة exampleضبطه الآن على " حقيقة" مفيدة عند البرمجة ، حيث تريد أحيانًا اتخاذ إجراءات بناءً على ظروف مثل هذه.

سوف تتعلم أيضا عن truthy أو falsy القيم في هذه المحاضرة، والتي هي أنواع البيانات الأخرى، مثل سلاسل أو أرقام، ولكن الذي لديه truthy أو falsy الجانب لهم.

الجزء # 8: Booleans التحدي

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

let example1 = false; let example2 = true; let example3 = null; let example4 = undefined; let example5 = ''; let example6 = NaN; let example7 = -5; let example8 = 0; 

الجزء # 9: المصفوفات

أنواع البيانات التي تعلمتها حتى الآن تسمى القيم الأولية . حان الوقت الآن للتعرف على المصفوفة ، وهي قيمة غير بدائية .

المصفوفة هي ببساطة قائمة من القيم ، مثل هذا:

let example = ['programming', 'design', 'art']; 

ستتعلم كيفية إنشاء المصفوفات وكيفية إضافة العناصر وإزالتها وحتى كيفية إجراء حلقة خلال المصفوفة بأكملها باستخدام forEach()الطريقة.

الجزء رقم 10: تحدي المصفوفات

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

let example1 = ['Dylan', 5, true]; let example2 = example1; example2.push(11); console.log(example1); console.log(example2); 

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

الجزء # 11: الأشياء

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

let example = { firstName: 'Dylan'; lastName: 'Israel' }; 

ستتعلم في هذه المحاضرة كيفية تعبئة الكائنات وجلب قيمها.

Part #12: Objects challenge

In this challenge, we’ll revisit the concept of passing by reference or value. You’ll also learn about the Object.assign() method, which allows you to create copies of objects.

let example1 = { firstName: 'Dylan' }; let example2 = example1; example2.lastName = 'Israel'; console.log(example1); console.log(example2); 

Part #13: Arithmetic operators

A programming language would be almost useless if it didn’t know how to do arithmetic operations. Doing it in JavaScript is pretty straight-forward:

let example = 5 + 5; console.log(example) // --> 10 

In this lecture, you’ll also experience how JavaScript handles expressions where multiple operations are combined.

Part #14: Relational operators

When programming we often have to compare values, to see if they’re equal to each other, or if one of them is larger than the other, so in this lecture, you’ll learn how to do that.

let example1 = 10; let example2 = 15; console.log(example1 > example2) // --> false 

And real-world example of this would be when you want to check if a user has got enough credit to purchase an item. If the credit is above the price, then they’re allowed to buy, otherwise, they’re not.

Part #15: Relational operators challenge

In this challenge you’ll be able to test how well you understand relational operators, through guessing the boolean value of these variables:

let example1 = 5 === 5; let example2 = 5 == '5'; let example3 = 6 != '6'; let example4 = 7 !== '7'; 

Part #16: Increment & decrement

Making values grow or shrink is very often done in programming, for example when you’re counting. It can be done in a few different ways, though, so it deserves its own lecture.

let example = 1; example = example + 1; console.log(example); // --> 2 

Part #17: Increment & decrement challenge

This challenge will look at the difference between doing example++ and ++example.

This might require you to experiment a bit in order to understand it, or even googling, which also is a critical skill for any developer.

Part #18: If, else if, else

Conditional statements like if, if else and else are critical when programming. It’s what allows you to have logic in your application. So in this lecture, you’ll learn how to work with all three of them.

let example = 5; if (example === 5) { console.log('Runs'); } else if ( true ) { console.log('else if'); } else { console.log('else'); } 

You’ll also learn about how to combine these conditionals with relational operators to make complex logic.

Part #19: If, else if, else challenge

In this challenge, you’ll try to guess what the following expressions evaluate to. This builds upon both what you’ve learned in the relational operators' lecture and in the previous one.

console.log(10 === 10 && 5 < 4); console.log(10 === 10 || 5 = 5 || 4 > 4) && 3 + 2 === 5); 

Again, don’t lose the courage if you don’t manage to guess correctly. This stuff is tricky for a beginner!

Part #20: Switch

In this lecture, you’ll learn about so-called switch statements, which are really handy if you have many conditions to check between. Here’s an example of that:

let studentAnswer = 'D'; switch(studentAnswer) { case 'A': console.log('A is wrong.'); break; case 'B' : console.log('B is wrong.'); break; case 'C': console.log('C is correct.'); break; default: console.log('Not a real answer.'); } 

Part #21: For loop

For loops allow you to execute a block of code a number of times. The amount is dictated by you by setting three conditionals. Here’s an example of a simple for loop:

for (let i = 0; i  // 0 // 1 // 2 // 3 // 4 

In this lecture, you’ll see how you can calculate the total sum of an array of numbers using a for loop.

Part #22: While & do while

If you want to execute a piece of code multiple times but don’t know how many times, then a while loop might be exactly what you need. It allows you to execute a block of code as long as a certain condition is met.

let count = 0; while (count < 20) { count++; } console.log(count); 

You’ll also learn about the do/while statement.

Part #23: Functions

Finally, you’ll need to learn about functions, as it’s critical for any application. You’ll learn the syntax of functions, how they’re called and how you can add parameters to them.

function add() { console.log('add'); } add(); // --> 'add' 

And when you’ve finished this lecture you’re done with the syllabus for this course, as you know have an understanding of the core concepts in JavaScript.

Part #24: What’s next?

Dylan ends the course by telling you a little bit about what you can do next in order to further improve your JavaScript skills! Remember, this course was just the beginning.

Once you’ve reached this far, I’d strongly encourage you to continue, as you’re on track to gain highly valuable skill in today's society.

Not only can JavaScript help you improve your career, but you’ll also be able to build products on your own!

لذا تأكد من أخذ هذه الدورة التدريبية المجانية اليوم. ستتمكن من إنشاء مشاريع في JavaScript بنفسك قبل أن تعرفها!

شكرا للقراءة! اسمي بير بورجن ، أنا المؤسس المشارك لـ Scrimba - أسهل طريقة لتعلم البرمجة. يجب عليك التحقق من المعسكر التدريبي لتصميم الويب سريع الاستجابة إذا كنت تريد تعلم كيفية إنشاء موقع ويب حديث على مستوى احترافي.