## Track translation progress by opening a draft PR using this template and checking off the translations completed
Each lesson includes a translation of the README.md and the Assignment.md file, if available. Only mark the lesson complete if both those files are translated per lesson, please.
- [ ] 1
- [ ] 1-1
- [ ] 1-2
- [ ] 1-3
- [ ] 2
- [ ] 2
- [ ] 2-1
- [ ] 2-2
- [ ] 2-3
- [ ] 2-4
- [ ] 3
- [ ] 3-1
- [ ] 3-2
- [ ] 3-3
- [ ] 4
- [ ] 4-1
- [ ] 5
- [ ] 5-1
- [ ] 5-2
- [ ] 5-3
- [ ] 6
- [ ] 6-1
- [ ] 6-2
- [ ] 6-3
- [ ] 6-4
- [ ] 6-5
- [ ] 6-6
- [ ] 7
- [ ] 7-1
- [ ] 7-2
- [ ] 7-3
- [ ] 7-4
- [ ] Quiz (add a file in the quiz-app with all localizations)
## Track translation progress by opening a draft PR using this template and checking off the translations completed
Each lesson includes a translation of the README.md and the Assignment.md file, if available. Only mark the lesson complete if both those files are translated per lesson, please.
- [ x ] 1
- [ x ] 1-1
- [ x ] 1-2
- [ x ] 1-3
- [ ] 2
- [ ] 2
- [ ] 2-1
- [ ] 2-2
- [ ] 2-3
- [ ] 2-4
- [ ] 3
- [ ] 3-1
- [ ] 3-2
- [ ] 3-3
- [ ] 4
- [ ] 4-1
- [ ] 5
- [ ] 5-1
- [ ] 5-2
- [ ] 5-3
- [ ] 6
- [ ] 6-1
- [ ] 6-2
- [ ] 6-3
- [ ] 6-4
- [ ] 6-5
- [ ] 6-6
- [ ] 7
- [ ] 7-1
- [ ] 7-2
- [ ] 7-3
- [ ] 7-4
- [ ] Quiz (add a file in the quiz-app with all localizations)
- Useful software and tooling for the professional developer
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-77807-sagibbon)!
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
## What is Programming?
@ -76,7 +76,7 @@ back add r0,r1
Believe it or not, *they're both doing the same thing*: printing a Fibonacci sequence up to 10.
✅ A Fibonacci sequence is [defined](https://en.wikipedia.org/wiki/Fibonacci_number) as a set of numbers such that each number is the sum of the two preceding ones, starting from 0 and 1.
✅ A Fibonacci sequence is [defined](https://en.wikipedia.org/wiki/Fibonacci_number) as a set of numbers such that each number is the sum of the two preceding ones, starting from 0 and 1. The first 10 numbers following the Fibonacci sequence are 0, 1, 1, 2, 3, 5, 8, 13, 21 and 34.
## Elements of a Program
@ -104,7 +104,7 @@ One of the most crucial tools for software development is the editor. Editors ar
Developers rely on editors for a few additional reasons:
- *Debugging* helps uncover bugs and errors by stepping through the code, line by line. Some editors have debugging capabilities; they can be customized and added for specific programming languages.
- *Debugging* helps uncover bugs and errors by stepping through the code, line by line. Some editors have debugging capabilities; they can be customized and added for specific programming languages.
- *Syntax highlighting* adds colors and text formatting to code, making it easier to read. Most editors allow customized syntax highlighting.
- *Extensions and Integrations* are specialized tools for developers, by developers. These tools weren't built into the base editor. For example, many developers document their code to explain how it works. They may install a spell check extension to help find typos within the documentation. Most extensions are intended for use within a specific editor, and most editors come with a way to search for available extensions.
- *Customization* enables developers to create a unique development environment to suit their needs. Most editors are extremely customizable and may also allow developers to create custom extensions.
@ -112,9 +112,9 @@ Developers rely on editors for a few additional reasons:
#### Popular Editors and Web Development Extensions
- [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
@ -180,7 +180,8 @@ When a developer wants to learn something new, they'll most likely turn to docum
- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), from Mozilla, the publishers of the [Firefox](https://www.mozilla.org/firefox/) browser
- [Web.dev](https://web.dev), from Google, publishers of [Chrome](https://www.google.com/chrome/)
- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers?WT.mc_id=academic-77807-sagibbon), for [Microsoft Edge](https://www.microsoft.com/edge/?WT.mc_id=academic-77807-sagibbon)
- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), for [Microsoft Edge](https://www.microsoft.com/edge)
[Cuestionario previo a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
### Introducción
En esta lección, cubriremos:
@ -19,7 +21,6 @@ En esta lección, cubriremos:
La programación (también conocida como codificación) es el proceso de escribir instrucciones en un dispositivo, como una computadora o un celular. Escribimos estas instrucciones con un lenguaje de programación, que luego es interpretado por el dispositivo. Este conjuntos de instrucciones pueden tener varios nombres, como *programa*, *programa de computadora*, *aplicación (app)* o *ejecutable* son algunos de los más populares.
Un *programa* puede ser cualquier cosa que esté escrita con código; los sitios web, los videojuegos y las aplicaciones de teléfono son programas. Si bien es posible crear un programa sin escribir código, la lógica subyacente se interpreta al dispositivo y esa lógica probablemente se escribió con código. Un programa que está *ejecutándose* o *ejecutando código*, está ejecutando una serie de instrucciones. El dispositivo con el que estás leyendo esta lección está ejecutando un programa para imprimirlo en tu pantalla.
✅ Investigue un poco: ¿quién se considera el primer programador(a) de computadoras del mundo?
@ -30,7 +31,7 @@ Los lenguajes de programación tienen un propósito principal: que los desarroll
Los lenguajes de programación vienen en diferentes formatos y tienen diferentes propósitos. Por ejemplo, JavaScript se usa principalmente para aplicaciones web, mientras que Bash se usa principalmente para sistemas operativos.
*Los idiomas de bajo nivel* normalmente requieren menos pasos que los *idiomas de alto nivel* para que un dispositivo interprete las instrucciones. Sin embargo, lo que hace que los lenguajes de alto nivel sean populares es su legibilidad y soporte. JavaScript es considerado un lenguaje de alto nivel.
*Los lenguajes de bajo nivel* normalmente requieren menos pasos que los *lenguajes de alto nivel* para que un dispositivo interprete las instrucciones. Sin embargo, lo que hace que los lenguajes de alto nivel sean populares es su legibilidad y soporte. JavaScript es considerado un lenguaje de alto nivel.
El siguiente código ilustra la diferencia entre un lenguaje de alto nivel con JavaScript y un lenguaje de bajo nivel con código Assembly ARM.
@ -126,7 +127,7 @@ Muchos navegadores vienen con *herramientas para desarrolladores* (DevTools) que
#### Navegadores y herramientas de desarrollo populares
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
@ -178,14 +179,17 @@ Cuando un desarrollador quiere aprender algo nuevo, lo más probable es que recu
✅ Investiga un poco: ahora que conoces los conceptos básicos del entorno de un desarrollador web, compáralo y contrasta con el entorno de un diseñador web.
---
## 🚀 Reto
Compara algunos lenguajes de programación. ¿Cuáles son algunos de los rasgos únicos de JavaScript frente a Java? ¿Qué hay de COBOL vs. Go?
## [Cuestionario Posterior a la Clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
## Revisión y autoestudio
## Revisión y Autoestudio
Estudia un poco sobre los diferentes lenguajes disponibles para programar. Intenta escribir una línea en un lenguaje y luego vuelve a hacerlo en otros dos. ¿Qué aprendiste?
@ -17,7 +17,7 @@ Sa araling ito, tatalakayin natin:
- Mga pangunahing elemento ng isang programa
- Kapaki-pakinabang na software at tooling para sa propesyonal na developer
> Maaari mong kunin ang araling ito [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-77807-sagibbon)!
> Maaari mong kunin ang araling ito [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
## Ano ang Programming?
@ -128,7 +128,7 @@ Maraming browser ang kasama ng *developer tools* (DevTools) na naglalaman ng isa
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
@ -123,7 +123,7 @@ Un autre outil crucial est le navigateur. Les développeurs Web comptent sur le
De nombreux navigateurs sont livrés avec des *outils de développement* (DevTools) qui contiennent un ensemble de fonctionnalités et d'informations utiles pour aider les développeurs à collecter et capturer des informations importantes sur leur application. Par exemple: si une page Web contient des erreurs, il est parfois utile de savoir quand elles se sont produites. DevTools dans un navigateur peut être configuré pour capturer ces informations.
#### Navigateurs et outils de développement populaires
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (ook bekend als CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (ook bekend als CMD) 💻
- व्यावसायिक विकासकर्ताको लागि उपयोगी सफ्टवेयर र उपकरण
> तपाईंले [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-77807-sagibbon) मा यो पाठ लिन सक्नुहुन्छ!
> तपाईंले [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) मा यो पाठ लिन सक्नुहुन्छ!
Essa lição trata dos básicos de linguagens de programação. Os tópicos tratados aqui se aplicam na maioria das linguagens de programação modernas. Na sessão 'Ferramentas', você vai aprender sobre softwares úteis que ajudarão como uma pessoa desenvolvedora.
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
@ -137,7 +137,7 @@ Muitos navegadores vêm com _ferramentas para desenvolvimento_ (DevTools) que co
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
- Полезный софт и инструментарий для профессионального разработчика
> Этот урок можно пройти на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-77807-sagibbon)!
> Этот урок можно пройти на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-77807-sagibbon) (также известный как CMD) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (также известный как CMD) 💻
- தொழில்முறை டெவலப்பர் பயனுள்ள மென்பொருள் மற்றும் கருவி
> நீங்கள் இந்த பாடத்தை [மைக்ரோசாப்ட் கற்றல்](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-77807-sagibbon) பற்றி எடுத்துக் கொள்ளலாம்!
> நீங்கள் இந்த பாடத்தை [மைக்ரோசாப்ட் கற்றல்](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) பற்றி எடுத்துக் கொள்ளலாம்!
ഒരു വെബ് ഡെവലപ്പർക്ക് ആവശ്യമായേക്കാവുന്ന നിരവധി ടൂളുകൾ ഇതിൽ ഉണ്ട് [ക്ലയന്റ് സൈഡ് ടൂളിങ്ങിനുള്ള MDN ഡോക്യുമെന്റേഷൻ](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). പാഠത്തിൽ ഉൾപ്പെടുത്താത്ത 3 ഉപകരണങ്ങൾ തിരഞ്ഞെടുക്കുക, എന്തുകൊണ്ടാണ് ഒരു വെബ് ഡെവലപ്പർ ഇത് ഉപയോഗിക്കുന്നതെന്ന് വിശദീകരിക്കുക, കൂടാതെ ഈ വിഭാഗത്തിൽ പെടുന്ന ഒരു ടൂളിനായി തിരയുകയും അതിന്റെ ഡോക്യുമെന്റേഷൻ പങ്കിടുകയും ചെയ്യുക. MDN ഡോക്സിൽ നിന്നുള്ള ടൂൾ ഉദാഹരണം ഉപയോഗിക്കരുത്.
## റൂബ്രിക്
മാതൃകാപരമായ | മതിയായ | കൂടുതൽ നന്നാകാൻ ഉണ്ട്
--- | --- | -- |
|എന്തുകൊണ്ട് വെബ് ഡെവലപ്പർ ടൂൾ ഉപയോഗിക്കുമെന്ന് വിശദീകരിച്ചു എങ്ങനെയെന്ന് വിശദീകരിച്ചു, പക്ഷേ എന്തുകൊണ്ട് ഡവലപ്പർ ടൂൾ ഉപയോഗിക്കും| ഒരു ഡെവലപ്പർ എങ്ങനെ അല്ലെങ്കിൽ എന്തുകൊണ്ട് ഉപകരണം ഉപയോഗിക്കുമെന്ന് പരാമർശിച്ചിട്ടില്ല |
## [Cuestionario previo a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
### Introducción
En esta lección, cubriremos:
- Seguimiento de trabajo que se realiza en su maquina.
- Seguimiento de trabajo que se realiza en su máquina.
- Trabajar en proyectos con otros.
- Cómo contribuir al software de código abierto (Open Source)
@ -27,11 +27,11 @@ Si Git no está instalado, [descargue Git desde aquí](https://git-scm.com/downl
Para comprobar si Git ya está configurado, escribe:
`git config --list`
También necesitarás una cuenta de GitHub, un editor de código (como Visual Studio Code) una terminal (tambien conocida como linea de comandos o simbolo del sistema).
También necesitarás una cuenta de GitHub, un editor de código (como Visual Studio Code) una terminal (también conocida como línea de comandos o símbolo del sistema).
Ve a [GitHub.com](https://github.com/) y crea una cuenta si aún no lo has hecho, o inicia sesión y completa tu perfil.
✅ GitHub no es el único lugar para almacenar codigo; hay otros, pero GitHub es el más conocido.
✅ GitHub no es el único lugar para almacenar código; hay otros, pero GitHub es el más conocido.
### Preparación
@ -45,6 +45,10 @@ Digamos que tienes una directorio local con algún proyecto de código y deseas
### Tarea: Hacer un repositorio git y enviar código
> Revisa este video
>
> [](https://www.youtube.com/watch?v=9R31OUPpxU4)
1. **Crear repositorio en GitHub**. En GitHub.com, en la pestaña de repositorios, o en la barra de navegación superior derecha, busca el botón **nuevo repositorio**.
1. Dale un nombre a tu repositorio (directorio)
@ -113,7 +117,7 @@ Digamos que tienes una directorio local con algún proyecto de código y deseas
git reset [nombre del archivo o carpeta]
```
Este comando nos ayuda a eliminar un archivo/directorio puntual, para que este no sea enviado en el proximo commit.
Este comando nos ayuda a eliminar un archivo/directorio puntual, para que éste no sea enviado en el próximo commit.
1. **Persistir en tu trabajo**. En este punto, has agregado los archivos a lo que se denomina _stagin area_. Un lugar donde Git rastrea tus archivos. Para que el cambio sea permanente, debes realizar un _commit_. Para hacerlo, utilizas el siguiente commando `git commit`. Un _commit_ representa un punto en el historial de tu repositorio que estás guardando, este viene acompañado de un mensaje, el cual nos sirve para saber que cambios se hicieron dentro de ese commit. Ejecuta el siguiente comando para realizar tu primer commit.
@ -133,6 +137,12 @@ Digamos que tienes una directorio local con algún proyecto de código y deseas
```
Esto crea un _remote_, o conexión, llamado "origin" que apunta al repositorio de GitHub que creaste anteriormente.
Si tienes una conexión previa con algún "origin" y deseas cambiar la dirección puedes utilizar el siguiente comando:
```bash
git remote set-url https://github.com/USUARIO/NOMBRE DEL REPOSITORIO.git
```
1. **Envía archivos locales a GitHub**. Hasta ahora ha creado una _conexión_ entre el repositorio local y el repositorio de GitHub. Enviemos estos archivos a GitHub con el siguiente comando `git push`, así:
@ -151,25 +161,28 @@ Digamos que tienes una directorio local con algún proyecto de código y deseas
git push
```
> Sugerencia: es posible que también desees adoptar un archivo `.gitignore` para evitar que los archivos que no deseas rastrear aparezcan en GitHub. Puedes encontrar plantillas para archivos `.gitignore` en [.gitignore templates](github.com/github/gitignore).
> Sugerencia: es posible que también desees adoptar un archivo `.gitignore` para evitar que los archivos que no deseas rastrear aparezcan en GitHub. Puedes encontrar plantillas para archivos `.gitignore` en [.gitignore templates](https://github.com/github/gitignore).
#### Confirmar mensajes
Una buena línea de asunto (subject line), completa la siguiente frase: "Si se aplica, este commit hará..."
Para el asunto use el imperativo, tiempo presente: "cambiar" no "cambió" ni "cambiara".
Para el asunto use el imperativo, tiempo presente: "cambiar" no "cambió" ni "cambiará".
Como en el asunto, en el cuerpo (opcional) también use el presente imperativo. El cuerpo debe incluir el motivo del cambio y contrastarlo con el funcionamiento previo. Estás explicando el "por qué", no el "cómo".
✅ Tómate unos minutos para navegar por GitHub. ¿Puedes encontrar un mensaje de commit realmente bueno? ¿Puedes hallar uno aún más simple? ¿Qué información crees que es la más importante y útil de transmitir en un mensaje de commit?
### Tarea: Colaborar
La razón principal para poner cosas en GitHub fue hacer posible la colaboración con otros desarrolladores.
## Trabajando en proyectos con otros
> Revisa este video
>
> [](https://www.youtube.com/watch?v=bFCM-PC3cu8)
En tu repositorio, ve a `Insights > Community` para ver cómo se compara tu proyecto con los estándares comunitarios recomendados.
Aquí hay algunas cosas que pueden mejorar tu repositorio de GitHub:
@ -191,7 +204,7 @@ Los documentos de contribución ayudan a las personas a contribuir al proyecto.
1. **Bifurcando (forking) tu repositorio** Probablemente querrás que la gente _bifurque_ (fork) tu proyecto. Bifurcar significa crear una réplica de tu repositorio en su perfil de GitHub.
1. **Clonar**. Desde allí, clonarán el proyecto en su máquina local.
1. **Crear una rama**. Querrás pedirles que creen una _rama_ para su trabajo.
1. **Concentre su cambio en un área**. Pida a los colaboradores que concentren sus contribuciones en una cosa a la vez; de esa manera, las posibilidades de _fusionar_ su trabajo son mayores. Imagínate que escriben una corrección de errores, agregan una nueva función y actualizan varias pruebas; ¿qué sucede si quieres todos los cambios o solo puedes implementar 2 de 3 o 1 de 3 cambios?
1. **Concentre su cambio en un área**. Pida a los colaboradores que concentren sus contribuciones en una cosa a la vez; de esa manera, las posibilidades de _fusionar_ su trabajo son mayores. Imagínate que escriben una corrección de errores, agregan una nueva función y actualizan varias pruebas; ¿qué sucede si quieres todos los cambios o solo puedes implementar 2 de 3 ó 1 de 3 cambios?
✅ Imagínate una situación en la que las ramas (branches) de git son particularmente críticas para escribir y enviar buen código. ¿Qué casos de uso se te ocurren?
@ -270,6 +283,8 @@ Primero, busquemos un repositorio en GitHub que te interese y al que te gustarí
✅ Una buena forma de encontrar repositorios 'aptos para principiantes' es [buscar por la etiqueta `good-first-issue`](https://github.blog/2020-01-22-browse-good-first-issues-para-empezar-a-contribuir-al-código-abierto/).
Hay varias formas de copiar código. Una forma es "clonar" el contenido del repositorio, usando HTTPS, SSH o usando GitHub CLI (Interfaz de línea de comandos).
Abre tu terminal y clona el repositorio así:
@ -284,7 +299,7 @@ Por último, puedes descargar el código en un directorio comprimido.
### Algunas cosas más interesantes sobre GitHub
Puede destacar, ver y/o "fork" cualquier repositorio público en GitHub. Puedes encontrar tus repositorios destacados en el menú desplegable de la parte superior derecha. Es como marcar como favorito, pero por código.
Puedes destacar, ver y/o hacer "fork" cualquier repositorio público en GitHub. Asimismo, encontrar tus repositorios destacados en el menú desplegable de la parte superior derecha. Es como marcar como favorito, pero por código.
Los proyectos tienen un rastreador de problemas, principalmente en GitHub en la pestaña "Issues" a menos que se indique lo contrario, donde las personas debaten los problemas relacionados con el proyecto. Y la pestaña Pull requests es donde las personas debaten y revisan los cambios que están en curso.
@ -292,20 +307,26 @@ Los proyectos también pueden tener discusiones en foros, listas de correo o can
✅ Echa un vistazo a tu nuevo repositorio de GitHub y prueba algunas cosas, como editar la configuración, agregar información a tu repositorio y crear un proyecto (como un tablero Kanban). ¡Hay muchas cosas que puedes hacer!
🚀 Desafío: Haz pareja con un amigo(a) para trabajar juntos en el código. Crea un proyecto de forma colaborativa, haz fork del proyecto, crea ramas y combina los cambios.
Reúnete con un amigo para trabajar en el código del otro. Crea un proyecto en colaboración, haz fork del código, crea ramas y hagan merge a los cambios.
## Revisión y autoestudio
## [Cuestionario posterior a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
## Revisión y Autoestudio
Obtén más información sobre [contribución al software de código abierto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
[Hoja de referencia de Git](https://training.github.com/downloads/github-git-cheat-sheet/).
Práctica práctica práctica. GitHub tiene excelentes rutas de aprendizaje disponibles a través de [lab.github.com](https://lab.github.com/):
Practica, practica, practica. GitHub tiene excelentes rutas de aprendizaje disponibles a través de [skills.github.com](https://skills.github.com/):
- [Primera semana en GitHub](https://lab.github.com/githubtraining/first-week-on-github)
- [Primera semana en GitHub](https://skills.github.com/#first-week-on-github)
También encontrarás laboratorios más avanzados.
**Tarea**: Completa [la primera semana en el laboratorio de capacitación de GitHub](https://lab.github.com/githubtraining/first-week-on-github)
## Tarea
Completa [La Primera Semana en el Laboratorio de capacitación de GitHub](https://skills.github.com/#first-week-on-github)
This quote perfectly highlights the importance of creating accessible websites. An application that can't be accessed by all is by definition exclusionary. As web developers we should always have accessibility in mind. By having this focus from the beginning you will be well on your way to ensure everyone can access the pages you create. In this lesson, you'll learn about the tools that can help you ensure that your web assets are accessible and how to build with accessibility in mind.
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility?WT.mc_id=academic-77807-sagibbon)!
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
## Tools to use
@ -28,7 +28,7 @@ Every web developer should familiarize themselves with a screen reader. As highl
Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools.
✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1?WT.mc_id=academic-77807-sagibbon) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default.
✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default.
@ -17,13 +17,13 @@ Esta cita destaca perfectamente la importancia de crear sitios web accesibles. U
Una de las herramientas de accesibilidad más conocidas son los lectores de pantalla.
[Lectores de pantalla](https://en.wikipedia.org/wiki/Screen_reader) son clientes de uso común para personas con problemas de visión. A medida que dedicamos tiempo a asegurarnos de que un navegador transmita correctamente la información que deseamos compartir, también debemos asegurarnos de que un lector de pantalla haga lo mismo.
[Lectores de pantalla](https://es.wikipedia.org/wiki/Lector_de_pantalla) son clientes de uso común para personas con problemas de visión. A medida que dedicamos tiempo a asegurarnos de que un navegador transmita correctamente la información que deseamos compartir, también debemos asegurarnos de que un lector de pantalla haga lo mismo.
En su forma más básica, un lector de pantalla leerá una página de arriba a abajo de forma audible. Si la página es todo texto, el lector transmitirá la información de manera similar a un navegador. Por supuesto, las páginas web rara vez son puramente texto; contendrán enlaces, gráficos, color y otros componentes visuales. Debemos tener cuidado para garantizar que un lector de pantalla lea correctamente esta información.
Todo desarrollador web debería estar familiarizado con un lector de pantalla. Como se destacó anteriormente, es el cliente que utilizarán sus usuarios. De la misma manera que estás familiarizado con el funcionamiento de un navegador, debes aprender cómo funciona un lector de pantalla. Afortunadamente, los lectores de pantalla están integrados en la mayoría de los sistemas operativos y muchos navegadores contienen extensiones para emular un lector de pantalla.
✅ Prueba una extensión o herramienta del navegador de lector de pantalla. Uno que solo funciona en Windows es [JAWS](https://webaim.org/articles/jaws/). Los navegadores también tienen herramientas integradas que se pueden utilizar para este propósito; Consulta estas [herramientas de navegador Edge centradas en accesibilidad](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features).
✅ Prueba una extensión o herramienta del navegador de lector de pantalla. Uno que solo funciona en Windows es [JAWS](https://webaim.org/articles/jaws/). Los navegadores también tienen herramientas integradas que se pueden utilizar para este propósito; consulta estas [herramientas de navegador Edge centradas en accesibilidad](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features).
### Chequear contrastes
@ -136,9 +136,9 @@ Puedes usar `aria-label` para describir el enlace cuando el formato de la págin
## Imágenes
No hace falta decir que los lectores de pantalla no pueden leer automáticamente lo que hay en una imagen. Asegurarse de que las imágenes sean accesibles no requiere mucho trabajo; de eso se trata el atributo ʻalt`. Todas las imágenes deben tener un ʻalt` para describir lo que son.
No hace falta decir que los lectores de pantalla no pueden leer automáticamente lo que hay en una imagen. Asegurarse de que las imágenes sean accesibles no requiere mucho trabajo; de eso se trata el atributo `alt`. Todas las imágenes deben tener un `alt` para describir lo que son.
✅ Como era de esperar, los motores de búsqueda tampoco pueden comprender qué hay en una imagen. También usan texto alternativo. Una vez más, ¡asegurarse de que su página sea accesible proporciona bonificaciones adicionales!
✅ Como era de esperar, los motores de búsqueda tampoco pueden comprender que hay en una imagen. También usan texto alternativo. Una vez más, ¡asegurarse de que su página sea accesible proporciona bonificaciones adicionales!
## El teclado
@ -212,4 +212,4 @@ Muchos gobiernos tienen leyes sobre los requisitos de accesibilidad. Lee sobre l
Créditos: [Tortuga Ipsum](https://github.com/Instrument/semantic-html-sample) por Instrument
Cette citation met parfaitement l'accent sur l'importance de créer des sites Web accessibles. Une application qui ne peut pas être accessible par tous est par définition exclusionnaire. En tant que développeurs Web, nous devrions toujours avoir l'accessibilité à l'esprit. En ayant cet objectif dès le début, vous serez déjà bien lancé sur la façon de vous assurer que tout le monde peut accéder aux pages que vous créez. Dans cette leçon, vous découvrirez les outils pouvant vous aider à vous assurer que vos éléments Web sont accessibles et comment développer avec l'accessibilité à l'esprit.
> Vous pouvez accéder à cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility?WT.mc_id=academic-77807-sagibbon)!
> Vous pouvez accéder à cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
@ -99,7 +99,7 @@ Las constantes son similares a las variables, con dos excepciones:
Arriba está cambiando el valor del objeto pero no la referencia en sí, lo que lo permite.
> Tenga en cuenta que `const` significa que la referencia está protegida contra la reasignación. Sin embargo, el valor no es _immutable_ y puede cambiar, especialmente si es una construcción compleja como un objeto.
> Tenga en cuenta que `const` significa que la referencia está protegida contra la reasignación. Sin embargo, el valor no es _inmutable_ y puede cambiar, especialmente si es una construcción compleja como un objeto.
1. ** एक वेरिएबल्स की घोषणा **। चलो 'let' कीवर्ड का उपयोग करते हुए एक चर घोषित करते हैं:
1. **एक वेरिएबल की घोषणा**। चलो `let` कीवर्ड का उपयोग करते हुए एक चर घोषित करते हैं:
```javascript
let myVariable;
```
`myVariable` अब`let` कीवर्ड का उपयोग करके घोषित किया गया है। वर्तमान में इसका कोई मूल्य नहीं है।
`myVariable` अब`let` कीवर्ड का उपयोग करके घोषित किया गया है। वर्तमान में इसका कोई मूल्य नहीं है।
1. **एक मान असाइन करें**। वैरिएबल में `= 'ऑपरेटर के साथ एक वैल्यू स्टोर करें, उसके बाद अपेक्षित वैल्यू।
1. **एक मान असाइन करें**। वैरिएबल में `=` ऑपरेटर के साथ एक वैल्यू स्टोर करें, उसके बाद अपेक्षित वैल्यू।
```javascript
myVariable = 123;
@ -46,7 +46,7 @@
`myVariable` अब मूल्य 123 के साथ * प्रारंभ * कर दिया गया है।
1. **रिफ्लेक्टर**। निम्नलिखित कथन के साथ अपना कोड बदलें।
1. **रिफैक्टर**। निम्नलिखित कथन के साथ अपना कोड बदलें।
```javascript
let myVariable = 123;
@ -54,7 +54,7 @@
उपरोक्त को _explicit initialization_ कहा जाता है जब एक चर घोषित किया जाता है और एक ही समय में एक मान निर्दिष्ट किया जाता है।
1. **Change the variable value**. Change the variable value in the following way:
1. **वेरिएबल का मान बदलें**। वेरिएबल के मान को निम्न तरीके से बदलें:
```javascript
myVariable = 321;
@ -99,7 +99,7 @@ const MY_VARIABLE = 123;
ऊपर आप ऑब्जेक्ट के मूल्य को बदल रहे हैं, लेकिन स्वयं संदर्भ को नहीं, जो इसे अनुमति देता है।
> ध्यान दें, एक 'const' का अर्थ है कि संदर्भ को पुन: असाइनमेंट से सुरक्षित किया गया है। मान __अडिग__ नहीं है, हालांकि और बदल सकता है, खासकर अगर यह एक ऑब्जेक्ट की तरह एक जटिल निर्माण है।
> ध्यान दें, एक `const` का अर्थ है कि संदर्भ को पुन: असाइनमेंट से सुरक्षित किया गया है। मान __अडिग__ नहीं है, हालांकि और बदल सकता है, खासकर अगर यह एक ऑब्जेक्ट की तरह एक जटिल निर्माण है।
## डाटा प्रकार
@ -129,7 +129,7 @@ const MY_VARIABLE = 123;
✅ कोशिश करो! अपने ब्राउज़र के कंसोल में एक अंकगणितीय ऑपरेशन आज़माएँ। क्या परिणाम आपको आश्चर्यचकित करते हैं?
### Strings
### स्ट्रिंग्स
स्ट्रिंग्स ऐसे पात्रों के समूह हैं जो एकल या दोहरे उद्धरणों के बीच रहते हैं।
✅ जावास्क्रिप्ट में `1 + 1 = 2` क्यों करता है, लेकिन`'1' + '1' = 11?`इसके बारे में सोचो। `'1' + 1` के बारे में क्या?
✅ जावास्क्रिप्ट में `1 + 1 = 2` क्यों करता है, लेकिन`'1' + '1' = 11?`इसके बारे में सोचो। `'1' + 1` के बारे में क्या?
**टेम्पलेट लिटेरल्स** स्ट्रिंग्स को फॉर्मेट करने का एक और तरीका है, उद्धरणों के बजाय, बैकटिक का उपयोग किया जाता है। जो कुछ भी सादा पाठ नहीं है, उसे प्लेसहोल्डर्स `$ {}` के अंदर रखा जाना चाहिए। इसमें कोई भी चर शामिल है जो तार हो सकते हैं।
@ -171,7 +171,7 @@ let myString2 = "World";
✅ आप टेम्प्लेट शाब्दिक लिटेरल्स सादे स्ट्रिंग का उपयोग कब करेंगे?
### बुलैंस
### बूलियन्स
बूलियन केवल दो मूल्य हो सकते हैं: `true` या `false`। बूलियंस निर्णय लेने में मदद कर सकते हैं कि किन शर्तों को पूरा करने पर कोड की लाइनें चलनी चाहिए। कई मामलों में, [ऑपरेटर](#अंकगणितीय-आपरेटर) एक बूलियन का मूल्य निर्धारित करने में सहायता करते हैं और आप अक्सर वैरिएबल या उनके मूल्यों को एक ऑपरेटर के साथ अपडेट किए जाने पर ध्यान देंगे और लिखेंगे।
Təsəvvür edin ki, bir alış-veriş səbəti düzəldin. Alış-veriş təcrübənizi tamamlamaq üçün lazım olan məlumat növləri haqqında bəzi sənədləri yazın. Seçimlərinizə necə gəldiniz?
## Ünvan kitabçası
Meyarlar | Əla | adekvat | Təkmilləşdirmələr lazımdır
--- | --- | --- | - |
|| Altı məlumat növü onların istifadəsini sənədləşdirərək ətraflı şəkildə sadalanır və araşdırılır | Dörd növ məlumat tədqiq edilir | İki növ məlumat tədqiq edilir |
Cuando necesite su código para realizar una tarea, utilizará un función o una función. Analicemos las diferencias.
Cuando necesite su código para realizar una tarea, utilizará una función. Analicemos las diferencias.
## Funciones
@ -142,7 +142,7 @@ En el código anterior, se devuelve la variable `sum`.
### Invocación
Cuando _invocas_ una función, la llamas con 0...N conjuntos de argumentos. Los valores de los argumentos se vinculan a los parámetros correspondientes a su posición. El función `add()` introducido se puede invocar de la siguiente manera:
Cuando _invocas_ una función, la llamas con 0...N conjuntos de argumentos. Los valores de los argumentos se vinculan a los parámetros correspondientes a su posición. La función `add()` introducido se puede invocar de la siguiente manera:
जब हम कोड लिखने के बारे में सोचते हैं, तो हम हमेशा यह सुनिश्चित करना चाहते हैं कि हमारा कोड पढ़ने योग्य हो। हालांकि यह काउंटरटाइनेटिव लगता है, लेकिन कोड को लिखे जाने की तुलना में कई गुना अधिक पढ़ा जाता है। एक डेवलपर टूलबॉक्स में एक कोर टूल, जिसमें यह सुनिश्चित करने के लिए कि कोड योग्य है **फ़ंक्शन** है।
जब हम कोड लिखने के बारे में सोचते हैं, तो हम हमेशा यह सुनिश्चित करना चाहते हैं कि हमारा कोड पढ़ने योग्य हो। हालांकि यह तर्कविरूद्ध लगता है, लेकिन कोड को लिखे जाने की तुलना में कई गुना अधिक पढ़ा जाता है। एक डेवलपर टूलबॉक्स में एक कोर टूल, जिसमें यह सुनिश्चित करने के लिए कि कोड योग्य है **फ़ंक्शन** है।
[](https://youtube.com/watch?v=XgKsD6Zwvlc "मेथड्स और फ़ंक्शंस")
> मेथड्स एंड फ़ंक्शंस के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
> मेथड्स और फ़ंक्शंस के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
## फ़ंक्शंस
इसके मूल में, एक फ़ंक्शन कोड का एक ब्लॉक है जिसे हम मांग पर निष्पादित कर सकते हैं। यह उन परिदृश्यों के लिए एकदम सही है जहाँ हमें एक ही कार्य को कई बार करने की आवश्यकता होती है; कई स्थानों पर तर्क की नकल करने के बजाय (जो समय आने पर इसे अपडेट करना कठिन बना देगा), हम इसे एक स्थान पर केंद्रीकृत कर सकते हैं, और जब भी हमें ऑपरेशन की आवश्यकता हो, तब कॉल कर सकते हैं - आप अन्य कार्यों से भी कॉल कर सकते हैं!
इसके मूल में, एक फ़ंक्शन कोड का एक ब्लॉक है जिसे हम मांग पर निष्पादित कर सकते हैं। यह उन परिदृश्यों के लिए एकदम सही है जहाँ हमें एक ही कार्य को कई बार करने की आवश्यकता होती है; कई स्थानों पर तर्क की नकल करने के बजाय (जो समय आने पर इसे अपडेट करना कठिन बना देगा), हम इसे एक स्थान पर केंद्रीकृत कर सकते हैं, और जब भी हमें ऑपरेशन की आवश्यकता हो, तब कॉल कर सकते हैं - आप अन्य फंक्शन्स से भी एक फंक्शन को कॉल कर सकते हैं!
बस के रूप में महत्वपूर्ण एक समारोह का नाम करने की क्षमता है। हालांकि यह तुच्छ प्रतीत हो सकता है, लेकिन नाम कोड के एक सेक्शन का दस्तावेजीकरण करने का एक त्वरित तरीका प्रदान करता है। आप इसे एक बटन पर एक लेबल के रूप में सोच सकते हैं। अगर मैं एक बटन पर क्लिक करता हूं जिसमें लिखा है "टाइमर को रद्द करें", मुझे पता है कि यह घड़ी को चलाने से रोकने वाला है।
एक फंक्शन का नाम रखने की क्षमता भी इतनी ही महत्वपूर्ण है। हालांकि यह भ्रामक प्रतीत हो सकता है, लेकिन नाम कोड के एक सेक्शन का दस्तावेजीकरण करने का एक त्वरित तरीका प्रदान करता है। आप इसे एक बटन पर एक लेबल के रूप में सोच सकते हैं। अगर मैं एक बटन पर क्लिक करता हूं जिसमें लिखा है "टाइमर रद्द करें", मुझे पता है कि यह घड़ी को चलाने से रोकने वाला है।
## फंक्शन बनाना और कॉल करना
@ -37,14 +37,14 @@ function displayGreeting() {
}
```
जब भी हम अपने फ़ंक्शन को कॉल करना (या इनवोक करना) चाहते हैं, हम `()` के बाद फ़ंक्शन के नाम का उपयोग करते हैं। यह ध्यान देने योग्य है कि हमारे फ़ंक्शन को कॉल करने का निर्णय लेने से पहले या बाद में परिभाषित किया जा सकता है; जावास्क्रिप्ट कंपाइलर इसे आपके लिए खोजेगा।
जब भी हम अपने फ़ंक्शन को कॉल करना (या इनवोक करना) चाहते हैं, हम फ़ंक्शन के नाम के बाद `()` का उपयोग करते हैं। यह ध्यान देने योग्य है कि हमारे फ़ंक्शन को कॉल करने का निर्णय लेने से पहले या बाद में परिभाषित किया जा सकता है; जावास्क्रिप्ट कंपाइलर इसे आपके लिए खोजेगा।
```javascript
// calling our function
displayGreeting();
```
> **नोट:** एक विशेष प्रकार का फ़ंक्शन है जिसे **method** के रूप में जाना जाता है, जिसे आप पहले से ही उपयोग कर रहे हैं! वास्तव में, हमने इसे ऊपर अपने डेमो में देखा था जब हमने `console.log` का उपयोग किया था। किसी कार्य को किसी फ़ंक्शन से अलग करने वाली विधि एक ऑब्जेक्ट से जुड़ी होती है (हमारे उदाहरण में `console`), जबकि एक फ़ंक्शन फ्री फ़्लोटिंग है। आपने सुना होगा कई डेवलपर्स इन शब्दों का इस्तेमाल परस्पर करते हैं।
> **नोट:** एक विशेष प्रकार का फ़ंक्शन है जिसे **मेथड** के रूप में जाना जाता है, जिसका आप पहले से ही उपयोग कर रहे हैं! वास्तव में, हमने इसे ऊपर अपने डेमो में देखा था जब हमने `console.log` का उपयोग किया था। जो चीज मेथड को फंक्शन से अलग बनाती है वो है की मेथड एक ऑब्जेक्ट से जुड़ी होती है (हमारे उदाहरण में `console`), जबकि एक फ़ंक्शन फ्री-फ़्लोटिंग है। आप कई डेवलपर्स से इन शब्दों का इस्तेमाल परस्पर करते सुनेंगे।
### सर्वोत्तम फ़ंक्शन प्रथाएं
@ -56,9 +56,9 @@ displayGreeting();
## किसी फ़ंक्शन के लिए जानकारी पास करना
किसी फ़ंक्शन को अधिक पुन: प्रयोज्य बनाने के लिए आप अक्सर उसमें जानकारी देना चाहेंगे। अगर हम ऊपर अपने `displayGreeting` उदाहरण पर विचार करते हैं, तो यह केवल **Hello,world** प्रदर्शित करेगा। सबसे उपयोगी फ़ंक्शन कोई नहीं बना सकता है। यदि हम इसे थोड़ा और लचीला बनाना चाहते हैं, जैसे किसी व्यक्ति को बधाई देने के लिए व्यक्ति का नाम निर्दिष्ट करने की अनुमति देना, हम एक **पैरामीटर** जोड़ सकते हैं। एक पैरामीटर (जिसे कभी-कभी **आर्गुमेंट** भी कहा जाता है), एक फ़ंक्शन को भेजी जाने वाली अतिरिक्त जानकारी है।
किसी फ़ंक्शन को अधिक पुन: प्रयोज्य बनाने के लिए आप अक्सर उसमें जानकारी देना चाहेंगे। अगर हम ऊपर अपने `displayGreeting` उदाहरण पर विचार करते हैं, तो यह केवल **Hello,world** प्रदर्शित करेगा। सबसे उपयोगी फ़ंक्शन कोई नहीं बना सकता है। यदि हम इसे थोड़ा और लचीला बनाना चाहते हैं, जैसे किसी व्यक्ति को बधाई देने के लिए व्यक्ति का नाम निर्दिष्ट करने की अनुमति देना, हम एक **पैरामीटर** जोड़ सकते हैं। एक पैरामीटर (जिसे कभी-कभी **आर्गुमेंट** भी कहा जाता है), एक फ़ंक्शन को भेजी जाने वाली अतिरिक्त जानकारी है।
पैरामीटर को कोष्ठक के भीतर परिभाषा भाग में सूचीबद्ध किया गया है और अल्पविराम को अलग किया जाता है:
पैरामीटर को कोष्ठक के भीतर परिभाषा भाग में सूचीबद्ध किया जाता है और अल्पविराम को अलग किया जाता है:
अब तक हमने जो फ़ंक्शन बनाया है वह हमेशा [कंसोल](https://developer.mozilla.org/docs/Web/API/console) पर आउटपुट करेगा। कभी-कभी यह ठीक वही हो सकता है जिसकी हम तलाश कर रहे हैं, खासकर जब हम फ़ंक्शन बनाते हैं जो अन्य सेवाओं को कॉल करेगा। लेकिन क्या होगा अगर मैं गणना करने और मान प्रदान करने के लिए एक सहायक फ़ंक्शन बनाना चाहता हूं तो मैं इसे कहीं और उपयोग कर सकता हूं?
| | Həll müxtəlif parametrlərə malik iki və ya daha çox yaxşı işləyən funksiya ilə təklif olunur | İşçi həll bir funksiya və bir neçə parametr ilə təklif olunur | Həlldə səhvlər var |
| | La solución se ofrece con dos o más funciones de buen rendimiento con diversos parámetros | La solución de trabajo se ofrece con una función y pocos parámetros | La solución tiene errores |
✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the currentMoney and laptopPrice variables to change the returned `console.log()`.
## Switch Statement
The `switch` statement is used to perform different actions based on different conditions.Use the `switch` statement to select one of many code blocks to be executed.
```javascript
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
```
```javascript
// program using switch statement
let a = 2;
switch (a) {
case 1:
a = 'one';
break;
case 2:
a = 'two';
break;
default:
a = 'not found';
break;
}
console.log(`The value is ${a}`);
```
✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the varaiable a to change the returned `console.log()`.
## Logical Operators and Booleans
Decisions might require more than one comparison, and can be strung together with logical operators to produce a Boolean value.
@ -21,7 +21,7 @@ Trabalhar com dados é uma tarefa comum para qualquer língua, e é uma tarefa m
✅ Os arrays estão à nossa volta! Consegue pensar num exemplo da vida real de uma matriz, tal como uma matriz de painéis solares?
A sintaxe de uma matriz é um par de parênteses rectos.
A sintaxe de uma matriz é um par de colchetes.
```javscript
let myArray = [];
@ -33,7 +33,7 @@ Esta é uma matriz vazia, mas as matrizes podem ser declaradas já povoadas com
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
```
Aos valores da matriz é atribuído um valor único chamado **índice**, um número inteiro que é atribuído com base na sua distância desde o início da matriz. No exemplo acima, o valor da string "Chocolate" tem um índice de 0, e o índice de "Rocky Road" é 4. Use o índice com parênteses rectos para recuperar, alterar, ou inserir valores da array.
Aos valores da matriz é atribuído um valor único chamado **índice**, um número inteiro que é atribuído com base na sua distância desde o início da matriz. No exemplo acima, o valor da string "Chocolate" tem um índice de 0, e o índice de "Rocky Road" é 4. Use o índice com colchetes para recuperar, alterar, ou inserir valores da array.
✅ Surpreende-o que as arrays comecem pelo índice zero? Em algumas linguagens de programação, os índices começam em 1. Há uma história interessante em torno disto, que pode [ler na Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
@ -98,7 +98,7 @@ while (i < 10) {
}
```
✅ Porque escolheria um para loop vs. um loop de tempo? Os 17K espectadores tinham a mesma pergunta sobre o StackOverflow, e algumas das opiniões [pode ser interessante para si](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
✅ Porque escolheria um para loop vs. um loop de tempo? Os 17K espectadores tinham a mesma pergunta sobre o StackOverflow, e algumas das opiniões [pode ser interessante para você](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
@ -4,11 +4,11 @@ JavaScript это язык веб-программирования. В этих
### Уроки
1. [Переменные и типы данных](#)
2. [Функции и методы](#)
3. [Принятие решений с помощью JavaScript](#)
4. [Массивы и циклы](#)
1. [Переменные и типы данных](../1-data-types/README.md)
2. [Функции и методы](../2-functions-methods/README.md)
3. [Принятие решений с помощью JavaScript](../3-making-decisions/README.md)
4. [Массивы и циклы](../4-arrays-loops/README.md)
### Благодарность
Эти уроки были ♥️ созданы [Жасмин Гринуэй](https://twitter.com/paladique), [Кристофером Харрисоном](https://twitter.com/geektrainer) и [Крисом Норингом](https://twitter.com/chris_noring).
Эти уроки были ♥️ созданы [Жасмин Гринуэй](https://twitter.com/paladique), [Кристофером Харрисоном](https://twitter.com/geektrainer) и [Крисом Норингом](https://twitter.com/chris_noring).
@ -15,7 +15,15 @@ En esta lección, usaremos HTML para diseñar el 'esqueleto' de la interfaz de n
En su computadora, cree una carpeta llamada 'terrario' y dentro de ella, un archivo llamado 'index.html'. Puede hacer esto en Visual Studio Code después de crear su carpeta de terrario abriendo una nueva ventana de VS Code, haciendo clic en 'abrir carpeta' y navegando a su nueva carpeta. Haga clic en el botón pequeño 'archivo' en el panel del Explorador y cree el nuevo archivo:
! [explorador en VS Code](images / vs-code-index.png)
O use estos comandos en tu git bash:
`mkdir terrarium`
`cd terrarium`
`touch index.html`
`code index.html` o `nano index.html`
> Los archivos index.html indican a un navegador que es el archivo predeterminado en una carpeta; Las URL como `https://anysite.com/test` se pueden construir usando una estructura de carpetas que incluya una carpeta llamada `test` con `index.html` dentro; `Index.html` no tiene que aparecer en una URL.
@ -97,7 +105,7 @@ Ahora, puede comenzar a construir su página. Normalmente, usa etiquetas `<div>`
Una etiqueta html que no necesita una etiqueta de cierre es la etiqueta `<img>`, porque tiene un elemento `src` que contiene toda la información que la página necesita para representar el elemento.
Cree una carpeta en su aplicación llamada `images` y en ella, agregue todas las imágenes en la [carpeta del código fuente](../images); (hay 14 imágenes de plantas).
Cree una carpeta en su aplicación llamada `images` y en ella, agregue todas las imágenes en la [carpeta del código fuente](../../solution/images); (hay 14 imágenes de plantas).
To complete the post-lecture quiz, go through this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-77807-sagibbon)
To complete the post-lecture quiz, go through this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
Pour répondre au Quiz de validation des connaissances, suivez ce module d'apprentissage : [Donnez du style à votre application HTML avec CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-77807-sagibbon)
Pour répondre au Quiz de validation des connaissances, suivez ce module d'apprentissage : [Donnez du style à votre application HTML avec CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
@ -248,7 +248,7 @@ Aggiungere una lucentezza a forma di bolla nell'area inferiore sinistra del bara
Per completare il quiz post-lezione, seguire questo modulo di apprendimento: [Applicare uno stile al codice HTML con CSS](https://docs.microsoft.com/it-it/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-77807-sagibbon)
Per completare il quiz post-lezione, seguire questo modulo di apprendimento: [Applicare uno stile al codice HTML con CSS](https://docs.microsoft.com/it-it/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
강의 후 퀴즈를 완료하려면, 다음 학습 모듈을 진행하십시오: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-77807-sagibbon)
강의 후 퀴즈를 완료하려면, 다음 학습 모듈을 진행하십시오: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
@ -116,7 +116,7 @@ In addition, the terrariumElement that is passed to this function is assigned a
## The Pointerdrag function
The terrariumElement is ready to be dragged around; when the `onpointerdown` event is fired, the function pointerDrag is invoked. Add that function right under this line: `terrariumElement.onpointerdown = pointerDrag;`:
The `terrariumElement` is ready to be dragged around; when the `onpointerdown` event is fired, the function `pointerDrag` is invoked. Add that function right under this line: `terrariumElement.onpointerdown = pointerDrag;`:
Manipular el DOM, o el "Modelo de objetos de documento", es un aspecto clave del desarrollo web. Según [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "El modelo de objetos de documento (DOM) es la representación de datos de los objetos que componen la estructura y contenido de un documento en la web ". Los desafíos en torno a la manipulación de DOM en la web a menudo han sido el ímpetu detrás del uso de marcos de JavaScript en lugar de JavaScript vanilla para administrar el DOM, ¡pero lo administraremos por nuestra cuenta!
Manipular el DOM, o el "Modelo de objetos de documento", es un aspecto clave del desarrollo web. Según [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction), "El modelo de objetos de documento (DOM) es la representación de datos de los objetos que componen la estructura y contenido de un documento en la web ". Los desafíos en torno a la manipulación de DOM en la web a menudo han sido el ímpetu detrás del uso de frameworks de JavaScript en lugar de JavaScript vanilla para administrar el DOM, ¡pero lo administraremos por nuestra cuenta!
Además, esta lección presentará la idea de un [cierre de JavaScript](https://developer.mozilla.org/docs/Web/JavaScript/Closures), que puede considerar como una función encerrada por otra función para que la función interna tenga acceso al alcance de la función externa.
@ -18,7 +18,7 @@ Usaremos un cierre para manipular el DOM.
> Una representación del DOM y el marcado HTML que lo hace referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
> Una representación del DOM y el marcado HTML a modo de referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
En esta lección, completaremos nuestro proyecto de terrario interactivo creando el JavaScript que permitirá al usuario manipular las plantas en la página.
@ -135,7 +135,7 @@ Suceden varias cosas. Primero, evita que ocurran los eventos predeterminados que
En segundo lugar, abra `index.html` en una ventana del navegador e inspeccione la interfaz. Cuando hace clic en una planta, puede ver cómo se captura el evento 'e'. ¡Profundice en el evento para ver cuánta información recopila un evento de puntero hacia abajo!
A continuación, observe cómo las variables locales `pos3` y` pos4` se establecen en e.clientX. Puede encontrar los valores de `e` en el panel de inspección. Estos valores capturan las coordenadas xey de la planta en el momento en que hace clic en ella o la toca. Necesitará un control detallado sobre el comportamiento de las plantas al hacer clic en ellas y arrastrarlas, de modo que pueda realizar un seguimiento de sus coordenadas.
A continuación, observe cómo las variables locales `pos3` y` pos4` se establecen en e.clientX. Puede encontrar los valores de `e` en el panel de inspección. Estos valores capturan las coordenadas X e Y de la planta en el momento en que hace clic en ella o la toca. Necesitará un control detallado sobre el comportamiento de las plantas al hacer clic en ellas y arrastrarlas, de modo que pueda realizar un seguimiento de sus coordenadas.
✅ ¿Está cada vez más claro por qué toda esta aplicación está construida con un gran cierre? Si no fuera así, ¿cómo mantendría el alcance para cada una de las 14 plantas arrastrables?
In the last two lessons of this module, you learned how to build a form and display area for data fetched from an API. It's a very standard way of creating web presences on the web. You even learned how to handle fetching data asynchronously. Your browser extension is very nearly complete.
In the last two lessons of this module, you learned how to build a form and display area for data fetched from an API. It's a very standard way of creating a web presence on the web. You even learned how to handle fetching data asynchronously. Your browser extension is very nearly complete.
It remains to manage some background tasks, including refreshing the color of the extension's icon, so this is a great time to talk about how the browser manages this kind of task. Let's think about these browser tasks in the context of the performance of your web assets as you build them.
@ -14,17 +14,17 @@ It remains to manage some background tasks, including refreshing the color of th
> "Website performance is about two things: how fast the page loads, and how fast the code on it runs." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
The topic of how to make your websites blazingly fast on all kinds of devices, for all kinds of users, in all kinds of situations, is unsurprisingly vast. Here are some points to keep in mind as you build either a standard web project or a browser extension.
The topic of how to make your websites blazingly fast on all kinds of devices, for all kinds of users, in all kinds of situations, is unsurprisingly vast. Here are some points to keep in mind as you build either a standard web project or a browser extension.
The first thing you need to do to ensure that your site is running efficiently is to gather data about its performance. The first place to do this is in the developer tools of your web browser. In Edge, you can select the "Settings and more" button (the three dots icon on the top right of the browser), then navigate to More Tools > Developer Tools and open the Performance tab. You can also use the keyboard shortcuts `Ctrl` + `Shift` + `I` on Windows, or `Option` + `Command` + `I` on Mac to open developer tools.
The first thing you need to do to ensure that your site is running efficiently is to gather data about its performance. The first place to do this is in the developer tools of your web browser. In Edge, you can select the "Settings and more" button (the three dots icon on the top right of the browser), then navigate to More Tools > Developer Tools and open the Performance tab. You can also use the keyboard shortcuts `Ctrl` + `Shift` + `I` on Windows or `Option` + `Command` + `I` on Mac to open developer tools.
The Performance tab contains a Profiling tool. Open a website (try, for example, [https://www.microsoft.com](https://www.microsoft.com?WT.mc_id=academic-77807-sagibbon)) and click the 'Record' button, then refresh the site. Stop the recording at any time, and you will be able to see the routines that are generated to 'script', 'render', and 'paint' the site:
The Performance tab contains a Profiling tool. Open a website (try, for example, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) and click the 'Record' button, then refresh the site. Stop the recording at any time, and you will be able to see the routines that are generated to 'script', 'render', and 'paint' the site:
✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-77807-sagibbon) on the Performance panel in Edge
✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) on the Performance panel in Edge
> Tip: to get a true reading of your web site's startup time, clear your browser's cache
> Tip: to get an accurate reading of your website's startup time, clear your browser's cache
Select elements of the profile timeline to zoom in on events that happen while your page loads.
@ -40,13 +40,13 @@ Check the Event Log pane to see if any event took longer than 15 ms:
## Profiling checks
In general there are some "problem areas" that every web developer should watch for when building a site, so as to avoid nasty surprises when it's time to deploy to production.
In general, there are some "problem areas" that every web developer should watch for when building a site to avoid nasty surprises when it's time to deploy to production.
**Asset sizes**: The web has gotten 'heavier', and thus slower, over the past few years. Some of this weight has to do with the use of images.
✅ Look through the [Internet Archive](https://httparchive.org/reports/page-weight) for a historical view of page weight and more.
A good practice is to ensure that your images are optimized, delivered at the right size and resolution for your users.
A good practice is to ensure that your images are optimized and delivered at the right size and resolution for your users.
**DOM traversals**: The browser has to build its Document Object Model based on the code you write, so it's in the interest of good page performance to keep your tags minimal, only using and styling what the page needs. To this point, excess CSS associated with a page could be optimized; styles that need to be used only on one page don't need to be included in the main style sheet, for example.
@ -54,7 +54,7 @@ A good practice is to ensure that your images are optimized, delivered at the ri
✅ Try some sites on a [Site Speed Test website](https://www.webpagetest.org/) to learn more about the common checks that are done to determine site performance.
Now that you have an idea on how the browser renders the assets you send to it, let's look at the last few things you need to do to complete your extension:
Now that you have an idea of how the browser renders the assets you send to it, let's look at the last few things you need to do to complete your extension:
### Create a function to calculate color
@ -85,7 +85,7 @@ The chrome.runtime has [an API](https://developer.chrome.com/extensions/runtime)
> "Use the chrome.runtime API to retrieve the background page, return details about the manifest, and listen for and respond to events in the app or extension lifecycle. You can also use this API to convert the relative path of URLs to fully-qualified URLs."
✅ If you're developing this browser extension for Edge, it might surprise you that you're using a chrome API. The newer Edge browser versions run on the Chromium browser engine, so you can leverage these tools.
✅ If you're developing this browser extension for Edge, it might surprise you that you're using a chrome API. The newer Edge browser versions run on the Chromium browser engine, so you can leverage these tools.
> Note, if you want to profile a browser extension, launch the dev tools from within the extension itself, as it is its own separate browser instance.
@ -131,7 +131,7 @@ function drawIcon(value) {
return context.getImageData(50, 50, 100, 100);
}
```
In this code, you are adding a listener for any messages coming to the backend task manager. If it's called 'updateIcon', then the next code is run, to draw an icon of the proper color using the Canvas API.
In this code, you are adding a listener for any messages coming to the backend task manager. If it's called 'updateIcon', then the next code is run to draw an icon of the proper color using the Canvas API.
✅ You'll learn more about the Canvas API in the [Space Game lessons](../../6-space-game/2-drawing-to-canvas/README.md).
@ -143,7 +143,7 @@ Congratulations, you've built a useful browser extension and learned more about
## 🚀 Challenge
Investigate some open source websites have been around a long time ago, and, based on their GitHub history, see if you can determine how they were optimized over the years for performance, if at all. What is the most common pain point?
Investigate some open source websites that have been around a long time ago, and, based on their GitHub history, see if you can determine how they were optimized over the years for performance, if at all. What is the most common pain point?
@ -20,7 +20,7 @@ La pestaña Rendimiento contiene una herramienta de creación de perfiles. Abra
✅ Visite la [Documentación de Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-77807-sagibbon) en el panel Rendimiento en Edge
✅ Visite la [Documentación de Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) en el panel Rendimiento en Edge
> Consejo: para obtener una lectura real de la hora de inicio de su sitio web, borre la memoria caché de su navegador
@ -22,7 +22,7 @@ L'onglet Performance contient un outil de profilage. Ouvrez un site Web (essayez
✅ Consultez la [Documentation Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-77807-sagibbon) à propos du panneau Performances dans Edge
✅ Consultez la [Documentation Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) à propos du panneau Performances dans Edge
> Astuce : pour avoir une vraie lecture de l'heure de démarrage de votre site web, videz le cache de votre navigateur
@ -217,7 +217,7 @@ Think about how the pub-sub pattern can enhance a game. Which parts should emit
## Review & Self Study
Learn more about Pub/Sub by [reading about it](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-77807-sagibbon).
Learn more about Pub/Sub by [reading about it](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
@ -211,6 +211,6 @@ A medida que las cosas se complican cuando tu juego crece, este patrón permanec
## Revisión y autoestudio
Obtenga más información sobre Pub / Sub al [leer sobre él](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-77807-sagibbon).
Obtenga más información sobre Pub / Sub al [leer sobre él](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
@ -217,7 +217,7 @@ Pensez à la façon dont le modèle pub-sub peut améliorer un jeu. Quelles part
## Révision et étude personnelle
En savoir plus sur Pub/Sub en [lisant sur ce sujet](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-77807-sagibbon).
En savoir plus sur Pub/Sub en [lisant sur ce sujet](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
@ -217,7 +217,7 @@ pub-sub 패턴이 어떻게 게임을 발전시킬 수 있는지 생각해보세
## 리뷰 & 자기주도 학습
[reading about it](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-77807-sagibbon)으로 Pub/Sub에 대해 조금 더 배워봅시다.
[reading about it](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon)으로 Pub/Sub에 대해 조금 더 배워봅시다.
| | Se colocan tres elementos en la pantalla y se manipulan | Se colocan dos elementos en la pantalla y se manipulan | Un elemento se coloca en la pantalla y se manipula |
| -------- | ----- | --- | - |
| | Se colocan tres elementos en la pantalla y se manipulan | Se colocan dos elementos en la pantalla y se manipulan | Un elemento se coloca en la pantalla y se manipula |
El lienzo es un elemento HTML que por defecto no tiene contenido; es una pizarra en blanco. Necesita agregarle dibujo sobre él.
El lienzo es un elemento HTML que por defecto no tiene contenido; es una pizarra en blanco. Necesita agregarle un dibujo sobre él.
✅ Lea [más sobre la API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) en MDN.
@ -24,7 +24,7 @@ Arriba estamos configurando el `id`, `width` y `alto`.
## Dibujar geometría simple
Canvas utiliza un sistema de coordenadas cartesiano para dibujar cosas. Por lo tanto, usa un eje xy un eje y para expresar dónde se encuentra algo. La ubicación `0,0` es la posición superior izquierda y la inferior derecha es lo que dijiste que era el ANCHO y ALTO del lienzo.
Canvas utiliza un sistema de coordenadas cartesiano para dibujar cosas. Por lo tanto, usa un eje xy un eje y para expresar dónde se encuentra algo. La ubicación `0,0` es la posición superior izquierda y la inferior derecha es lo que se mencionó que era el ANCHO y ALTO del lienzo.
! [cuadrícula del lienzo](canvas_grid.png)
> Imagen de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
@ -162,7 +162,7 @@ Lo anterior iniciará un servidor HTTP en la dirección `http: // localhost: 500
Agregue el código necesario a `your-work/app.js` para resolver lo siguiente
1. **Dibuja** un lienzo con fondo negro
> consejo: agregue dos líneas debajo del TODO apropiado en `/app.js`, estableciendo el elemento `ctx` en negro y las coordenadas superior / izquierda en 0,0 y la altura y el ancho para que sean iguales a los del lienzo.
> consejo: agregue dos líneas debajo del TODO apropiado en `/app.js`, estableciendo el elemento `ctx` en negro y las coordenadas superior / izquierda en 0,0 y la altura y el ancho para que sean iguales a los del lienzo.
2. **Cargar** texturas
> consejo: agregue las imágenes del jugador y del enemigo usando `await loadTexture` y pasando la ruta de la imagen. ¡Todavía no los verá en la pantalla!
3. **Dibuja** héroe en el centro de la pantalla en la mitad inferior
@ -209,4 +209,4 @@ Intente resolverlo usted mismo primero, pero si se atasca, eche un vistazo a una
Obtenga más información sobre la API de Canvas [leyendo sobre ella](https://developer.mozilla.org/docs/Web/API/Canvas_API).
**Tarea**: [Jugar con la API de Canvas](assignment.es.md)
**Tarea**: [Jugar con la API de Canvas](assignment.es.md)
✅ Can you think of a reason why redrawing your hero many frames per second might accrue performance costs? Read about [alternatives to this pattern](https://www.html5rocks.com/en/tutorials/canvas/performance/).
✅ Can you think of a reason why redrawing your hero many frames per second might accrue performance costs? Read about [alternatives to this pattern](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas).
@ -112,7 +112,7 @@ let gameLoopId = setInterval(() =>
}, 200);
```
TEl ciclo anterior se invoca cada `200` milisegundos para volver a dibujar el lienzo. Tiene la capacidad de elegir el mejor intervalo que tenga sentido para su juego.
El ciclo anterior se invoca cada `200` milisegundos para volver a dibujar el lienzo. Tiene la capacidad de elegir el mejor intervalo que tenga sentido para su juego.
| | El código `app.js` está completamente comentado y organizado en bloques lógicos | El código `app.js` está adecuadamente comentado | El código `app.js` está algo desorganizado y carece de buenos comentarios |
| | El código `app.js` está completamente comentado y organizado en bloques lógicos | El código `app.js` está adecuadamente comentado | El código `app.js` está algo desorganizado y carece de buenos comentarios |
@ -27,8 +27,8 @@ El concepto de tener una vida en un juego es solo un número. En el contexto de
Agreguemos lo siguiente a tu juego:
- **Game score**** (Puntuación del juego): por cada barco enemigo que sea destruido, el héroe debería recibir algunos puntos, sugerimos 100 puntos por barco. La puntuación del juego debe mostrarse en la parte inferior izquierda.
- **Life** (Vida): Tu nave tiene tres vidas. Pierdes una vida cada vez que un barco enemigo choca contigo. Se debe mostrar un puntaje de vida en la parte inferior derecha y estar compuesto por el siguiente gráfico: [life image](solution/assets/life.png)..
- **Game score** (Puntuación del juego): por cada barco enemigo que sea destruido, el héroe debería recibir algunos puntos, sugerimos 100 puntos por barco. La puntuación del juego debe mostrarse en la parte inferior izquierda.
- **Life** (Vida): Tu nave tiene tres vidas. Pierdes una vida cada vez que un barco enemigo choca contigo. Se debe mostrar un puntaje de vida en la parte inferior derecha y estar compuesto por el siguiente gráfico: [life image](solution/assets/life.png).
## Pasos recomendados
@ -55,7 +55,7 @@ Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`.
### Agregar código
1. **Copie los recursos necesarios** de la carpeta `solution/assets/` a la carpeta `your-work`; agregará un activo `life.png`. Agregue el lifeImg a la función window.onload:
1. **Copie los recursos necesarios** de la carpeta `solution/assets/` a la carpeta `your-work`; agregará un activo `life.png`. Agregue el lifeImg a la función window.onload:
Um jogo espacial para ensinar fundamentos JavaScript mais avançados
Nesta lição, você aprenderá a construir seu próprio jogo espacial. Se você já jogou o jogo "Space Invaders", este jogo tem a mesma ideia: pilotar uma nave espacial e atirar em monstros que descem de cima. Veja como ficará o jogo finalizado:
Nestas seis lições, você aprenderá o seguinte:
- **Interaja** com o elemento Canvas para desenhar coisas em uma tela
- **Entenda** o sistema de coordenadas cartesianas
- **Aprenda** o padrão Pub-Sub para criar uma arquitetura de jogo de som mais fácil de manter e estender
- **Utilize** Async/Await para carregar recursos do jogo
- **Trate** eventos de teclado
## Visão Geral
- Teoria
- [Introdução à criação de jogos com JavaScript](../1-introduction/translations/README.pt-BR.md)
- Prática
- [Desenhando no Canvas](../2-drawing-to-canvas/translations/README.pt-BR.md)
- [Movendo elementos pela tela](../3-moving-elements-around/README.pt-BR.md)
- [Detecção de colisão](../4-collision-detection/README.pt-BR.md)
- [Mantendo a pontuação](../5-keeping-score/assignment.md/README.pt-BR.md)
- [Terminando e reiniciando o jogo](../6-end-condition/README.pt-BR.md)
## Créditos
Os assets utilizados para isso vieram de https://www.kenney.nl/.
Se você gosta de construir jogos, esses são alguns assets muito bons, muitos são gratuitos e alguns são pagos.
@ -301,7 +301,7 @@ Add a new template and route for a third page that shows the credits for this ap
## Review & Self Study
Routing is one of the surprisingly tricky parts of web development, especially as the web moves from page refresh behaviors to Single Page Application page refreshes. Read a little about [how the Azure Static Web App service](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-77807-sagibbon) handles routing. Can you explain why some of the decisions described on that document are necessary?
Routing is one of the surprisingly tricky parts of web development, especially as the web moves from page refresh behaviors to Single Page Application page refreshes. Read a little about [how the Azure Static Web App service](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) handles routing. Can you explain why some of the decisions described on that document are necessary?
> Nota: utilizamos una [función de flecha](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) aquí para declarar nuestro controlador de eventos `popstate` por concisión, pero un la función regular funcionaría igual.
> Nota: utilizamos una [función de flecha](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) aquí para declarar nuestro controlador de eventos `popstate` por concisión, pero la función regular funcionaría igual.
@ -302,7 +302,7 @@ Ajoutez un nouveau modèle et une route pour une troisième page qui affiche les
## Révision et étude personnelle
Le routage est l'une des parties étonnamment délicates du développement Web, d'autant plus que le Web passe des comportements d'actualisation des pages aux actualisations des pages d'application à page unique. En savoir plus sur [comment le service Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-77807-sagibbon) gère le routage . Pouvez-vous expliquer pourquoi certaines des décisions décrites dans ce document sont nécessaires?
Le routage est l'une des parties étonnamment délicates du développement Web, d'autant plus que le Web passe des comportements d'actualisation des pages aux actualisations des pages d'application à page unique. En savoir plus sur [comment le service Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) gère le routage . Pouvez-vous expliquer pourquoi certaines des décisions décrites dans ce document sont nécessaires?
रूटिंग वेब विकास के आश्चर्यजनक रूप से मुश्किल भागों में से एक है, विशेष रूप से वेब पेज रीफ्रेश बिहेवियर से लेकर सिंगल पेज एप्लीकेशन पेज रिफ्रेश तक चलता है। [कैसे Azure स्टेटिक वेब ऐप सेवा](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-77807-sagibbon) के बारे में थोड़ा पढ़ें रूटिंग । क्या आप बता सकते हैं कि उस दस्तावेज़ पर वर्णित कुछ निर्णय क्यों आवश्यक हैं?
रूटिंग वेब विकास के आश्चर्यजनक रूप से मुश्किल भागों में से एक है, विशेष रूप से वेब पेज रीफ्रेश बिहेवियर से लेकर सिंगल पेज एप्लीकेशन पेज रिफ्रेश तक चलता है। [कैसे Azure स्टेटिक वेब ऐप सेवा](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) के बारे में थोड़ा पढ़ें रूटिंग । क्या आप बता सकते हैं कि उस दस्तावेज़ पर वर्णित कुछ निर्णय क्यों आवश्यक हैं?
ルーティングは Web 開発の驚くほどトリッキーな部分の1つで、特に Web がページ更新の動作からシングルページアプリケーションのページ更新へと移行するにつれ、そのような部分が増えてきています。[Azure Static Web Apps プレビューでのルート](https://docs.microsoft.com/ja-jp/azure/static-web-apps/routes?WT.mc_id=academic-77807-sagibbon)がルーティングを扱うことについて少し読んでみてください。そのドキュメントに記載されているいくつかの決定が必要な理由を説明できますか？
ルーティングは Web 開発の驚くほどトリッキーな部分の1つで、特に Web がページ更新の動作からシングルページアプリケーションのページ更新へと移行するにつれ、そのような部分が増えてきています。[Azure Static Web Apps プレビューでのルート](https://docs.microsoft.com/ja-jp/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon)がルーティングを扱うことについて少し読んでみてください。そのドキュメントに記載されているいくつかの決定が必要な理由を説明できますか？
라우팅은 웹 개발의 놀랍고 까다로운 부분 중 하나입니다, 특히 웹의 페이지 새로고침 동작에서 단일 페이지 애플리케이션 페이지 새로고침으로 이동함에 따라 더욱 더 그렇습니다. [how the Azure Static Web App service](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-77807-sagibbon)의 라우터 제어에 대해 약간 봅니다. 그 문서에 기술된 몇 가지 결정이 필요한 이유를 설명할 수 있나요?
라우팅은 웹 개발의 놀랍고 까다로운 부분 중 하나입니다, 특히 웹의 페이지 새로고침 동작에서 단일 페이지 애플리케이션 페이지 새로고침으로 이동함에 따라 더욱 더 그렇습니다. [how the Azure Static Web App service](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon)의 라우터 제어에 대해 약간 봅니다. 그 문서에 기술된 몇 가지 결정이 필요한 이유를 설명할 수 있나요?
@ -299,7 +299,7 @@ Tambahkan templat dan laluan baru untuk halaman ketiga yang menunjukkan kredit u
## Mengkaji & Belajar Sendiri
Perutean adalah salah satu bahagian pengembangan web yang sangat mengejutkan, terutama ketika web beralih dari tingkah laku penyegaran halaman ke penyegaran halaman Aplikasi Halaman Tunggal. Baca sedikit mengenai [bagaimana perkhidmatan Aplikasi Web Statik Azure](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-77807-sagibbon) menangani penghalaan . Bolehkah anda menjelaskan mengapa beberapa keputusan yang dijelaskan pada dokumen itu diperlukan?
Perutean adalah salah satu bahagian pengembangan web yang sangat mengejutkan, terutama ketika web beralih dari tingkah laku penyegaran halaman ke penyegaran halaman Aplikasi Halaman Tunggal. Baca sedikit mengenai [bagaimana perkhidmatan Aplikasi Web Statik Azure](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) menangani penghalaan . Bolehkah anda menjelaskan mengapa beberapa keputusan yang dijelaskan pada dokumen itu diperlukan?
| | Todas las páginas se ven limpias y legibles, con un tema de color consistente y las diferentes secciones destacando correctamente. | Las páginas tienen un estilo pero sin un tema o con secciones no claramente delimitadas. | Las páginas carecen de estilo, las secciones se ven desorganizadas y la información es difícil de leer. |
Some files were not shown because too many files have changed in this diff
Show More
Darío Hereñú
1 year ago
committed by
GitHub