This lesson covers the basics of JavaScript, the language that provides interactivity on the web.
This lesson covers the basics of JavaScript, the language that provides interactivity on the web.
@ -189,7 +189,7 @@ Booleans can be only two values: `true` or `false`. Booleans can help make decis
JavaScript is notorious for its surprising ways of handling datatypes on occasion. Do a bit of research on these 'gotchas'. For example: case sensitivity can bite! Try this in your console: `let age = 1; let Age = 2; age == Age` (resolves `false` -- why?). What other gotchas can you find?
JavaScript is notorious for its surprising ways of handling datatypes on occasion. Do a bit of research on these 'gotchas'. For example: case sensitivity can bite! Try this in your console: `let age = 1; let Age = 2; age == Age` (resolves `false` -- why?). What other gotchas can you find?
When we think about writing code, we always want to ensure our code is readable. While this sounds counterintuitive, code is read many more times than it's written. One core tool in a developer's toolbox to ensure maintainable code is the **function**.
When we think about writing code, we always want to ensure our code is readable. While this sounds counterintuitive, code is read many more times than it's written. One core tool in a developer's toolbox to ensure maintainable code is the **function**.
@ -185,7 +185,7 @@ You've now seen we have three ways to pass a function as a parameter and might b
Can you articulate in one sentence the difference between functions and methods? Give it a try!
Can you articulate in one sentence the difference between functions and methods? Give it a try!
Making decisions and controlling the order in which your code runs makes your code reusable and robust. This section covers the syntax for controlling data flow in JavaScript and its significance when used with Boolean data types
Making decisions and controlling the order in which your code runs makes your code reusable and robust. This section covers the syntax for controlling data flow in JavaScript and its significance when used with Boolean data types
@ -205,7 +205,7 @@ Create a program that is written first with logical operators, and then rewrite
This lesson covers the basics of JavaScript, the language that provides interactivity on the web. In this lesson, you'll learn about arrays and loops, which are used to manipulate data.
This lesson covers the basics of JavaScript, the language that provides interactivity on the web. In this lesson, you'll learn about arrays and loops, which are used to manipulate data.
@ -122,7 +122,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
There are other ways of looping over arrays other than for and while loops. There are [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), and [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques.
There are other ways of looping over arrays other than for and while loops. There are [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), and [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques.
@ -197,7 +197,7 @@ Esta pequeña función restablece los eventos `onpointerup` y `onpointermove` pa
🚀Challenge: agregue un nuevo controlador de eventos a su cierre para hacer algo más en las plantas; por ejemplo, haga doble clic en una planta para traerla al frente. ¡Se creativo!
🚀Challenge: agregue un nuevo controlador de eventos a su cierre para hacer algo más en las plantas; por ejemplo, haga doble clic en una planta para traerla al frente. ¡Se creativo!
@ -145,7 +145,7 @@ Felicitaciones, ha dado los primeros pasos para crear una extensión de navegado
🚀Challenge: Eche un vistazo a una tienda de extensiones de navegador e instale una en su navegador. Puede examinar sus archivos de formas interesantes. ¿Qué descubres?
🚀Challenge: Eche un vistazo a una tienda de extensiones de navegador e instale una en su navegador. Puede examinar sus archivos de formas interesantes. ¿Qué descubres?
@ -150,7 +150,7 @@ Parabéns, você deu os primeiros passos para criar uma extensão de navegador.
Dê uma olhada em uma loja de extensões de navegador e instale uma em seu navegador. Você pode examinar seus arquivos de maneiras interessantes. O que você descobriu?
Dê uma olhada em uma loja de extensões de navegador e instale uma em seu navegador. Você pode examinar seus arquivos de maneiras interessantes. O que você descobriu?
@ -204,7 +204,7 @@ Esta es una gran función. ¿Que está pasando aqui?
🚀 Desafío: hemos discutido varios tipos de API hasta ahora en estas lecciones. Elija una API web e investigue en profundidad lo que ofrece. Por ejemplo, eche un vistazo a las API disponibles en los navegadores, como la [API HTML de arrastrar y soltar](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). En tu opinión, ¿qué hace que una API sea excelente?
🚀 Desafío: hemos discutido varios tipos de API hasta ahora en estas lecciones. Elija una API web e investigue en profundidad lo que ofrece. Por ejemplo, eche un vistazo a las API disponibles en los navegadores, como la [API HTML de arrastrar y soltar](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). En tu opinión, ¿qué hace que una API sea excelente?
@ -141,7 +141,7 @@ Felicitaciones, ha creado una extensión de navegador útil y ha aprendido más
🚀 Desafío: Investigue algunos sitios web de código abierto que han existido hace mucho tiempo y, según su historial de GitHub, vea si puede determinar cómo se optimizaron a lo largo de los años para el rendimiento, si es que lo hicieron. ¿Cuál es el punto de dolor más común?
🚀 Desafío: Investigue algunos sitios web de código abierto que han existido hace mucho tiempo y, según su historial de GitHub, vea si puede determinar cómo se optimizaron a lo largo de los años para el rendimiento, si es que lo hicieron. ¿Cuál es el punto de dolor más común?
There are different ways to express and *end condition* in a game. It's up to you as the creator of the game to say why the game has ended. Here are some reasons, if we assume we are talking about the space game you have been building so far:
There are different ways to express and *end condition* in a game. It's up to you as the creator of the game to say why the game has ended. Here are some reasons, if we assume we are talking about the space game you have been building so far:
@ -211,7 +211,7 @@ Add a sound! Can you add a sound to enhance your game play, maybe when there's a
> **A note about quizzes**: All quizzes are contained in the Quiz-app folder, 48 total quizzes of three questions each. They are available [here](https://ff-quizzes.netlify.app/) the quiz app can be run locally or deployed to Azure; follow the instruction in the `quiz-app` folder.
> **A note about quizzes**: All quizzes are contained in the Quiz-app folder, 48 total quizzes of three questions each. They are available [here](https://ff-quizzes.netlify.app/web/) the quiz app can be run locally or deployed to Azure; follow the instruction in the `quiz-app` folder.
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
## اختبار ما قبل المحاضرة
## اختبار ما قبل المحاضرة
[اختبار ما قبل المحاضرة](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
[اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/5)
> قوة الويب تكمن في عالميته. الوصول للجميع بغض النظر عن الإعاقة هو جانب أساسي.
> قوة الويب تكمن في عالميته. الوصول للجميع بغض النظر عن الإعاقة هو جانب أساسي.
> \- السير تيموثي بيرنرز لي، مدير W3C ومخترع شبكة الويب العالمية
> \- السير تيموثي بيرنرز لي، مدير W3C ومخترع شبكة الويب العالمية
@ -226,7 +226,7 @@ CO_OP_TRANSLATOR_METADATA:
```
```
## اختبار ما بعد المحاضرة
## اختبار ما بعد المحاضرة
[اختبار ما بعد المحاضرة](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/6)
## المراجعة والدراسة الذاتية
## المراجعة والدراسة الذاتية
تضع العديد من الحكومات قوانين تتعلق بمتطلبات الوصول. قم بالاطلاع على قوانين الوصول في بلدك. ما الذي يتم تغطيته، وما الذي لا يتم تغطيته؟ مثال على ذلك هو [هذا الموقع الحكومي](https://accessibility.blog.gov.uk/).
تضع العديد من الحكومات قوانين تتعلق بمتطلبات الوصول. قم بالاطلاع على قوانين الوصول في بلدك. ما الذي يتم تغطيته، وما الذي لا يتم تغطيته؟ مثال على ذلك هو [هذا الموقع الحكومي](https://accessibility.blog.gov.uk/).
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
## اختبار ما قبل المحاضرة
## اختبار ما قبل المحاضرة
[اختبار ما قبل المحاضرة](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
[اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/7)
تغطي هذه الدرس أساسيات JavaScript، اللغة التي تضيف التفاعل إلى الويب.
تغطي هذه الدرس أساسيات JavaScript، اللغة التي تضيف التفاعل إلى الويب.
@ -200,7 +200,7 @@ let myString2 = "World";
JavaScript مشهورة بطرقها المفاجئة في التعامل مع أنواع البيانات في بعض الأحيان. قم ببعض البحث حول هذه "المفاجآت". على سبيل المثال: حساسية حالة الأحرف قد تكون مشكلة! جرب هذا في وحدة التحكم الخاصة بك: `let age = 1; let Age = 2; age == Age` (يُظهر `false` -- لماذا؟). ما المفاجآت الأخرى التي يمكنك العثور عليها؟
JavaScript مشهورة بطرقها المفاجئة في التعامل مع أنواع البيانات في بعض الأحيان. قم ببعض البحث حول هذه "المفاجآت". على سبيل المثال: حساسية حالة الأحرف قد تكون مشكلة! جرب هذا في وحدة التحكم الخاصة بك: `let age = 1; let Age = 2; age == Age` (يُظهر `false` -- لماذا؟). ما المفاجآت الأخرى التي يمكنك العثور عليها؟
## اختبار ما بعد المحاضرة
## اختبار ما بعد المحاضرة
[اختبار ما بعد المحاضرة](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/8)
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
## اختبار ما قبل المحاضرة
## اختبار ما قبل المحاضرة
[اختبار ما قبل المحاضرة](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
[اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/9)
عندما نفكر في كتابة الكود، نريد دائمًا أن يكون الكود قابلًا للقراءة. على الرغم من أن هذا يبدو غير منطقي، إلا أن الكود يُقرأ مرات أكثر بكثير مما يُكتب. إحدى الأدوات الأساسية في صندوق أدوات المطور لضمان كود قابل للصيانة هي **الدالة**.
عندما نفكر في كتابة الكود، نريد دائمًا أن يكون الكود قابلًا للقراءة. على الرغم من أن هذا يبدو غير منطقي، إلا أن الكود يُقرأ مرات أكثر بكثير مما يُكتب. إحدى الأدوات الأساسية في صندوق أدوات المطور لضمان كود قابل للصيانة هي **الدالة**.
@ -194,7 +194,7 @@ setTimeout(() => {
هل يمكنك التعبير في جملة واحدة عن الفرق بين الدوال والطرق؟ جرب ذلك!
هل يمكنك التعبير في جملة واحدة عن الفرق بين الدوال والطرق؟ جرب ذلك!
## اختبار ما بعد المحاضرة
## اختبار ما بعد المحاضرة
[اختبار ما بعد المحاضرة](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/10)
[اختبار ما قبل المحاضرة](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
[اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/11)
اتخاذ القرارات والتحكم في ترتيب تشغيل الكود يجعل الكود قابلاً لإعادة الاستخدام وقويًا. يغطي هذا القسم بناء الجملة الخاص بالتحكم في تدفق البيانات في JavaScript وأهميته عند استخدامه مع أنواع البيانات المنطقية (Boolean).
اتخاذ القرارات والتحكم في ترتيب تشغيل الكود يجعل الكود قابلاً لإعادة الاستخدام وقويًا. يغطي هذا القسم بناء الجملة الخاص بالتحكم في تدفق البيانات في JavaScript وأهميته عند استخدامه مع أنواع البيانات المنطقية (Boolean).
@ -214,7 +214,7 @@ if (firstNumber > secondNumber) {
## اختبار ما بعد المحاضرة
## اختبار ما بعد المحاضرة
[اختبار ما بعد المحاضرة](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/12)
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
## اختبار ما قبل المحاضرة
## اختبار ما قبل المحاضرة
[اختبار ما قبل المحاضرة](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
[اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/13)
تغطي هذه الدرس أساسيات JavaScript، اللغة التي تضيف التفاعلية إلى الويب. في هذا الدرس، ستتعلم عن المصفوفات والحلقات، والتي تُستخدم لمعالجة البيانات.
تغطي هذه الدرس أساسيات JavaScript، اللغة التي تضيف التفاعلية إلى الويب. في هذا الدرس، ستتعلم عن المصفوفات والحلقات، والتي تُستخدم لمعالجة البيانات.
@ -131,7 +131,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
هناك طرق أخرى للتكرار على المصفوفات غير الحلقات for وwhile. هناك [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)، [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of)، و[map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). أعد كتابة حلقة المصفوفة الخاصة بك باستخدام واحدة من هذه التقنيات.
هناك طرق أخرى للتكرار على المصفوفات غير الحلقات for وwhile. هناك [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)، [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of)، و[map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). أعد كتابة حلقة المصفوفة الخاصة بك باستخدام واحدة من هذه التقنيات.
## اختبار ما بعد المحاضرة
## اختبار ما بعد المحاضرة
[اختبار ما بعد المحاضرة](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/14)
[اختبار ما قبل المحاضرة](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
[اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/quiz/39)
هناك طرق مختلفة للتعبير عن *شرط النهاية* في اللعبة. الأمر متروك لك كمصمم للعبة لتحديد سبب انتهاء اللعبة. إليك بعض الأسباب، إذا افترضنا أننا نتحدث عن لعبة الفضاء التي كنت تبنيها حتى الآن:
هناك طرق مختلفة للتعبير عن *شرط النهاية* في اللعبة. الأمر متروك لك كمصمم للعبة لتحديد سبب انتهاء اللعبة. إليك بعض الأسباب، إذا افترضنا أننا نتحدث عن لعبة الفضاء التي كنت تبنيها حتى الآن:
@ -220,7 +220,7 @@ npm start
## اختبار ما بعد المحاضرة
## اختبار ما بعد المحاضرة
[اختبار ما بعد المحاضرة](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/quiz/40)
- [اختبار ما بعد الدرس](https://ff-quizzes.netlify.app/)
- [اختبار ما بعد الدرس](https://ff-quizzes.netlify.app/web/)
> **ملاحظة حول الاختبارات**: جميع الاختبارات موجودة في مجلد Quiz-app، بإجمالي 48 اختبارًا يحتوي كل منها على ثلاثة أسئلة. وهي متاحة [هنا](https://ff-quizzes.netlify.app/) ويمكن تشغيل تطبيق الاختبار محليًا أو نشره على Azure؛ اتبع التعليمات في مجلد `quiz-app`.
> **ملاحظة حول الاختبارات**: جميع الاختبارات موجودة في مجلد Quiz-app، بإجمالي 48 اختبارًا يحتوي كل منها على ثلاثة أسئلة. وهي متاحة [هنا](https://ff-quizzes.netlify.app/web/) ويمكن تشغيل تطبيق الاختبار محليًا أو نشره على Azure؛ اتبع التعليمات في مجلد `quiz-app`.
> Скица от [Tomomi Imura](https://twitter.com/girlie_mac)
> Скица от [Tomomi Imura](https://twitter.com/girlie_mac)
## Тест преди лекцията
## Тест преди лекцията
[Тест преди лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
[Тест преди лекцията](https://ff-quizzes.netlify.app/web/quiz/7)
Тази лекция обхваща основите на JavaScript, езикът, който осигурява интерактивност в уеб.
Тази лекция обхваща основите на JavaScript, езикът, който осигурява интерактивност в уеб.
@ -199,7 +199,7 @@ let myString2 = "World";
JavaScript е известен със своите изненадващи начини за обработка на типове данни понякога. Направете малко проучване за тези 'изненади'. Например: чувствителността към главни и малки букви може да ви изненада! Опитайте това в конзолата си: `let age = 1; let Age = 2; age == Age` (резултатът е`false` -- защо?). Какви други изненади можете да откриете?
JavaScript е известен със своите изненадващи начини за обработка на типове данни понякога. Направете малко проучване за тези 'изненади'. Например: чувствителността към главни и малки букви може да ви изненада! Опитайте това в конзолата си: `let age = 1; let Age = 2; age == Age` (резултатът е`false` -- защо?). Какви други изненади можете да откриете?
## Тест след лекцията
## Тест след лекцията
[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
[Тест след лекцията](https://ff-quizzes.netlify.app/web/quiz/8)
Когато мислим за писане на код, винаги трябва да се стремим кодът ни да бъде четим. Макар това да звучи противоречиво, кодът се чете много повече пъти, отколкото се пише. Един от основните инструменти в арсенала на разработчика за създаване на поддържаем код е**функцията**.
Когато мислим за писане на код, винаги трябва да се стремим кодът ни да бъде четим. Макар това да звучи противоречиво, кодът се чете много повече пъти, отколкото се пише. Един от основните инструменти в арсенала на разработчика за създаване на поддържаем код е**функцията**.
@ -194,7 +194,7 @@ setTimeout(() => {
Можете ли да обясните с едно изречение разликата между функции и методи? Опитайте!
Можете ли да обясните с едно изречение разликата между функции и методи? Опитайте!
## Тест след лекцията
## Тест след лекцията
[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
[Тест след лекцията](https://ff-quizzes.netlify.app/web/quiz/10)
[Тест преди лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
[Тест преди лекцията](https://ff-quizzes.netlify.app/web/quiz/11)
Вземането на решения и контролирането на реда, в който се изпълнява кодът ви, прави вашия код по-гъвкав и надежден. Тази секция обхваща синтаксиса за контролиране на потока от данни в JavaScript и неговото значение, когато се използва с булеви типове данни.
Вземането на решения и контролирането на реда, в който се изпълнява кодът ви, прави вашия код по-гъвкав и надежден. Тази секция обхваща синтаксиса за контролиране на потока от данни в JavaScript и неговото значение, когато се използва с булеви типове данни.
@ -214,7 +214,7 @@ if (firstNumber > secondNumber) {
## Тест след лекцията
## Тест след лекцията
[Тест след лекцията](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
[Тест след лекцията](https://ff-quizzes.netlify.app/web/quiz/12)
Този урок обхваща основите на JavaScript, езикът, който осигурява интерактивност в уеб. В този урок ще научите за масиви и цикли, които се използват за манипулиране на данни.
Този урок обхваща основите на JavaScript, езикът, който осигурява интерактивност в уеб. В този урок ще научите за масиви и цикли, които се използват за манипулиране на данни.
@ -131,7 +131,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
Има и други начини за обхождане на масиви освен for и while цикли. Съществуват [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) и [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Пренапишете вашия цикъл за масив, използвайки една от тези техники.
Има и други начини за обхождане на масиви освен for и while цикли. Съществуват [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) и [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Пренапишете вашия цикъл за масив, използвайки една от тези техники.