Merge remote-tracking branch 'upstream/main'

pull/90/head
Eugene Goh 4 years ago
commit de2eb70648

@ -124,7 +124,7 @@ Many browsers come with *developer tools* (DevTools) that contain a set of helpf
#### Popular Browsers and DevTools #### Popular Browsers and DevTools
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium) - [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) - [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
- [Firefox](https://developer.mozilla.org/docs/Tools) - [Firefox](https://developer.mozilla.org/docs/Tools)
@ -140,22 +140,22 @@ Options for the command line will differ based on the operating system you use.
#### Windows #### Windows
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻 - [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻 - [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/) - [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
- [mintty](https://mintty.github.io/) - [mintty](https://mintty.github.io/)
#### MacOS #### MacOS
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 - [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
- [iTerm](https://iterm2.com/) - [iTerm](https://iterm2.com/)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### Linux #### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html) - [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### Popular Command Line Tools #### Popular Command Line Tools

@ -120,7 +120,7 @@ Muchos navegadores vienen con *herramientas para desarrolladores* (DevTools) que
#### Navegadores y herramientas de desarrollo populares #### Navegadores y herramientas de desarrollo populares
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium) - [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) - [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
- [Firefox](https://developer.mozilla.org/docs/Tools) - [Firefox](https://developer.mozilla.org/docs/Tools)
@ -136,22 +136,22 @@ Las opciones para la línea de comando variarán según el sistema operativo que
#### Windows #### Windows
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻 - [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻 - [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/) - [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
- [mintty](https://mintty.github.io/) - [mintty](https://mintty.github.io/)
#### MacOS #### MacOS
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 - [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
- [iTerm](https://iterm2.com/) - [iTerm](https://iterm2.com/)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### Linux #### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html) - [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### Popular Command Line Tools #### Popular Command Line Tools

@ -125,7 +125,7 @@ Banyak browser datang dengan *alat pengembang* (DevTools) yang berisi serangkaia
#### Browser dan DevTools Populer #### Browser dan DevTools Populer
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium) - [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) - [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
- [Firefox](https://developer.mozilla.org/docs/Tools) - [Firefox](https://developer.mozilla.org/docs/Tools)
@ -141,22 +141,22 @@ Pilihan untuk command line akan berbeda berdasarkan sistem operasi yang Anda gun
#### Windows #### Windows
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻 - [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻 - [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/) - [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
- [mintty](https://mintty.github.io/) - [mintty](https://mintty.github.io/)
#### MacOS #### MacOS
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 - [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
- [iTerm](https://iterm2.com/) - [iTerm](https://iterm2.com/)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### Linux #### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html) - [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### Alat Command Line Populer #### Alat Command Line Populer

@ -124,7 +124,7 @@ Molti browser dispongono di *strumenti per lo sviluppatore* (DevTools) che conte
#### Popolari Browser e DevTools #### Popolari Browser e DevTools
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium) - [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
- [Chrome](https://sviluppatori.google.com/web/tools/chrome-devtools/) - [Chrome](https://sviluppatori.google.com/web/tools/chrome-devtools/)
- [Firefox](https://sviluppatore.mozilla.org/docs/Tools) - [Firefox](https://sviluppatore.mozilla.org/docs/Tools)
@ -140,22 +140,22 @@ Le alternative per la riga di comando differiriscono in base al sistema operativ
#### Windows #### Windows
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻 - [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻 - [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/) - [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
- [mintty](https://mintty.github.io/) - [mintty](https://mintty.github.io/)
#### MacOS #### MacOS
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 - [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
- [iTerm](https://iterm2.com/) - [iTerm](https://iterm2.com/)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### Linux #### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html) - [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### Popolari Strumenti da Riga di Comando #### Popolari Strumenti da Riga di Comando

@ -165,7 +165,7 @@ Web開発者は、自分のコードがWeb上でどのように実行される
#### 有名なブラウザ #### 有名なブラウザ
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium) - [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) - [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
- [Firefox](https://developer.mozilla.org/docs/Tools) - [Firefox](https://developer.mozilla.org/docs/Tools)
@ -190,22 +190,22 @@ Web開発者は、自分のコードがWeb上でどのように実行される
#### Windows #### Windows
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻 - [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻 - [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/) - [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
- [mintty](https://mintty.github.io/) - [mintty](https://mintty.github.io/)
#### MacOS #### MacOS
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 - [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
- [iTerm](https://iterm2.com/) - [iTerm](https://iterm2.com/)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### Linux #### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html) - [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### 有名なコマンドラインツール #### 有名なコマンドラインツール

@ -124,7 +124,7 @@ back add r0,r1
#### 인기있는 브라우저와 DevTools #### 인기있는 브라우저와 DevTools
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium) - [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) - [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
- [Firefox](https://developer.mozilla.org/docs/Tools) - [Firefox](https://developer.mozilla.org/docs/Tools)
@ -140,22 +140,22 @@ command line 옵션은 사용하는 운영체제에 따라 다릅니다.
#### 윈도우즈 #### 윈도우즈
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻 - [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻 - [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/) - [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
- [mintty](https://mintty.github.io/) - [mintty](https://mintty.github.io/)
#### 맥OS #### 맥OS
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 - [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
- [iTerm](https://iterm2.com/) - [iTerm](https://iterm2.com/)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### 리눅스 #### 리눅스
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html) - [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### 인기있는 Command Line 도구 #### 인기있는 Command Line 도구

@ -125,7 +125,7 @@ Veel browsers hebben ingebouwd *ontwikkel gereedschap* (DevTools) waarmee ontwik
#### Populaire Browsers en DevTools #### Populaire Browsers en DevTools
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium) - [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) - [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
- [Firefox](https://developer.mozilla.org/docs/Tools) - [Firefox](https://developer.mozilla.org/docs/Tools)
@ -141,22 +141,22 @@ Beschikbaarheid van command lines verschilt op basis van het besturingssysteem w
#### Windows #### Windows
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻 - [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (ook bekend als CMD) 💻 - [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (ook bekend als CMD) 💻
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/) - [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
- [mintty](https://mintty.github.io/) - [mintty](https://mintty.github.io/)
#### MacOS #### MacOS
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 - [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
- [iTerm](https://iterm2.com/) - [iTerm](https://iterm2.com/)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### Linux #### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 - [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html) - [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### Populaire Command Line Applicaties #### Populaire Command Line Applicaties

@ -1,12 +0,0 @@
*Complete this quiz by checking one answer per question.*
1. Arguments must be provided for all parameters in a function
- [ ] true
- [ ] false
2. What does a default value do?
- [ ] Sets a correct value
- [ ] Gives a starter value for a parameters so your code still behaves if you omit an argument for it
- [ ] Has no utility

@ -1,12 +0,0 @@
*Complete this quiz in class*
1. What's an argument?
- [ ] It's something you declare in the function definition
- [ ] It's something you pass into a function at invocation time
- [ ] It's something you have with people you know
2. True or false: a function must return something
- [ ] true
- [ ] false

@ -2,7 +2,7 @@
[![Methoden und Funktionen](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methoden und Funktionen") [![Methoden und Funktionen](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methoden und Funktionen")
## [Pre-Lecture Quiz](../.github/pre-lecture-quiz.md) ## [Pre-Lecture Quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9)
Wenn wir darüber nachdenken, Code zu schreiben, möchten wir immer sicherstellen, dass unser Code lesbar ist. Während dies nicht intuitiv klingt, wird Code viel öfter gelesen als geschrieben. Ein Kernwerkzeug in der Toolbox eines Entwicklers, um wartbaren Code sicherzustellen, ist die **Funktion**. Wenn wir darüber nachdenken, Code zu schreiben, möchten wir immer sicherstellen, dass unser Code lesbar ist. Während dies nicht intuitiv klingt, wird Code viel öfter gelesen als geschrieben. Ein Kernwerkzeug in der Toolbox eines Entwicklers, um wartbaren Code sicherzustellen, ist die **Funktion**.
@ -184,7 +184,7 @@ Sie haben jetzt gesehen, dass wir drei Möglichkeiten haben, eine Funktion als P
Können Sie den Unterschied zwischen Funktionen und Methoden in einem Satz artikulieren? Versuche es! Können Sie den Unterschied zwischen Funktionen und Methoden in einem Satz artikulieren? Versuche es!
## [Quiz nach der Vorlesung](../.github/post-lecture-quiz.md) ## [Quiz nach der Vorlesung](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10)
## Review & Selbststudium ## Review & Selbststudium

@ -2,7 +2,7 @@
[![Métodos y funciones](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Métodos y funciones") [![Métodos y funciones](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Métodos y funciones")
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9)
Cuando necesite su código para realizar una tarea, utilizará un método o una función. Analicemos las diferencias. Cuando necesite su código para realizar una tarea, utilizará un método o una función. Analicemos las diferencias.
@ -89,7 +89,7 @@ Cualquier parámetro con valores predeterminados debe estar al final de la lista
🚀 Desafío: 🚀 Desafío:
## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## [Post-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10)
## Revisión y autoestudio ## Revisión y autoestudio

@ -4,7 +4,7 @@
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## 강의 전 퀴즈 ## 강의 전 퀴즈
[Pre-lecture quiz](../.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9?loc=ko)
코드 작성에 대해 생각할 때 항상 코드를 읽을 수 있도록 해야합니다. 직설적이지 않지만, 코드는 작성된 것보다 더 많이 읽힙니다. 개발자의 툴 박스에서 유지관리 가능한 코드를 보장하는 핵심 도구는 **함수**입니다. 코드 작성에 대해 생각할 때 항상 코드를 읽을 수 있도록 해야합니다. 직설적이지 않지만, 코드는 작성된 것보다 더 많이 읽힙니다. 개발자의 툴 박스에서 유지관리 가능한 코드를 보장하는 핵심 도구는 **함수**입니다.
@ -181,7 +181,7 @@ setTimeout(3000, () => {
함수와 메소드의 차이점을 한 문장으로 표현할 수 있나요? 시도해보세요! 함수와 메소드의 차이점을 한 문장으로 표현할 수 있나요? 시도해보세요!
## 강의 후 퀴즈 ## 강의 후 퀴즈
[Post-lecture quiz](../.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10?loc=ko)
## 리뷰 & 자기주도 학습 ## 리뷰 & 자기주도 학습

@ -1,12 +0,0 @@
*Complete this quiz by checking one answer per question.*
1. What would the following code return: `'1' == 1`
- [ ] true
- [ ] false
2. Choose the correct operator to express _or_ logic
- [ ] `a | b`
- [ ] `a || b`
- [ ] `a or b`

@ -1,13 +0,0 @@
*Complete this quiz in class*
1. The following operator `==` is called
- [ ] Equality
- [ ] Strict equality
- [ ] Assignment
2. A comparison in JavaScript returns what type?
- [ ] boolean
- [ ] null
- [ ] string

@ -1,12 +0,0 @@
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
1. निम्नलिखित कोड क्या लौटाएगा: `'1' == 1`
- [ ] सही
- [ ] गलत
2. _or_ तर्क व्यक्त करने के लिए सही ऑपरेटर चुनें
- [ ] `a | b`
- [ ] `a || b`
- [ ] `a or b`

@ -1,13 +0,0 @@
_इस क्विज को कक्षा में पूरा करें_
1. निम्नलिखित ऑपरेटर को `==` क्या जाता है
- [ ] समानता
- [ ] सख्त समानता
- [ ] असाइनमेंट
2. जावास्क्रिप्ट में एक तुलना किस प्रकार देता है?
- [ ] boolean
- [ ] null
- [ ] string

@ -2,7 +2,7 @@
[![Entscheidungen treffen](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Entscheidungen treffen") [![Entscheidungen treffen](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Entscheidungen treffen")
## [Pre-Lecture Quiz](../.github/pre-lecture-quiz.md) ## [Pre-Lecture Quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11)
Wenn Sie Entscheidungen treffen und die Reihenfolge steuern, in der Ihr Code ausgeführt wird, ist Ihr Code wiederverwendbar und robust. Dieser Abschnitt behandelt die Syntax zur Steuerung des Datenflusses in JavaScript und ihre Bedeutung bei Verwendung mit booleschen Datentypen. Wenn Sie Entscheidungen treffen und die Reihenfolge steuern, in der Ihr Code ausgeführt wird, ist Ihr Code wiederverwendbar und robust. Dieser Abschnitt behandelt die Syntax zur Steuerung des Datenflusses in JavaScript und ihre Bedeutung bei Verwendung mit booleschen Datentypen.
@ -158,7 +158,7 @@ if (firstNumber > secondNumber) {
Erstellen Sie ein Programm, das zuerst mit logischen Operatoren geschrieben wird, und schreiben Sie es dann mit einem ternären Ausdruck neu. Was ist Ihre bevorzugte Syntax? Erstellen Sie ein Programm, das zuerst mit logischen Operatoren geschrieben wird, und schreiben Sie es dann mit einem ternären Ausdruck neu. Was ist Ihre bevorzugte Syntax?
## [Quiz nach der Vorlesung](../.github/post-lecture-quiz.md) ## [Quiz nach der Vorlesung](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12)
## Review & Selbststudium ## Review & Selbststudium

@ -1,8 +1,6 @@
# Conceptos básicos de JavaScript: tomar decisiones # Conceptos básicos de JavaScript: tomar decisiones
![video](video-url) ## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11)
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md)
Tomar decisiones y controlar el orden en que se ejecuta su código hace que su código sea reutilizable y robusto. Esta sección cubre la sintaxis para controlar el flujo de datos en JavaScript y su importancia cuando se usa con tipos de datos booleanos. Tomar decisiones y controlar el orden en que se ejecuta su código hace que su código sea reutilizable y robusto. Esta sección cubre la sintaxis para controlar el flujo de datos en JavaScript y su importancia cuando se usa con tipos de datos booleanos.
@ -23,7 +21,7 @@ Establezca su booleano en verdadero o falso de esta manera:
Los operadores se utilizan para evaluar las condiciones haciendo comparaciones que crearán un valor booleano. La siguiente es una lista de operadores que se utilizan con frecuencia. Los operadores se utilizan para evaluar las condiciones haciendo comparaciones que crearán un valor booleano. La siguiente es una lista de operadores que se utilizan con frecuencia.
| Símbolo | Descripción | Ejemplo | | Símbolo | Descripción | Ejemplo |
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `<` | **Mayor que**: compara dos valores y devuelve el tipo de datos booleano `true` si el valor del lado derecho es mayor que el del izquierdo | `5 < 6 // true` | | `<` | **Mayor que**: compara dos valores y devuelve el tipo de datos booleano `true` si el valor del lado derecho es mayor que el del izquierdo | `5 < 6 // true` |
| `<=` | **Mayor o igual que**: compara dos valores y devuelve el tipo de datos booleano `true` si el valor del lado derecho es mayor o igual que el del lado izquierdo | `5 <= 6 // true` | | `<=` | **Mayor o igual que**: compara dos valores y devuelve el tipo de datos booleano `true` si el valor del lado derecho es mayor o igual que el del lado izquierdo | `5 <= 6 // true` |
| `>` | **Menor que**: compara dos valores y devuelve el tipo de datos booleano `true` si el valor del lado izquierdo es mayor que el del derecho | `5 > 6 // false` | | `>` | **Menor que**: compara dos valores y devuelve el tipo de datos booleano `true` si el valor del lado izquierdo es mayor que el del derecho | `5 > 6 // false` |
@ -81,7 +79,7 @@ else{
Las decisiones pueden requerir más de una comparación y se pueden unir con operadores lógicos para producir un valor booleano. Las decisiones pueden requerir más de una comparación y se pueden unir con operadores lógicos para producir un valor booleano.
| Símbolo | Descripción | Ejemplo | | Símbolo | Descripción | Ejemplo |
| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | ------- | ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- |
| `&&` | **AND lógico**: compara dos expresiones booleanas. Devuelve verdadero **solo** si ambos lados son verdaderos | `(5 > 6) && (5 < 6 ) //Un lado es falso, el otro es verdadero. Devuelve falso` | | `&&` | **AND lógico**: compara dos expresiones booleanas. Devuelve verdadero **solo** si ambos lados son verdaderos | `(5 > 6) && (5 < 6 ) //Un lado es falso, el otro es verdadero. Devuelve falso` |
| `||` | **OR lógico**: compara dos expresiones booleanas. Devuelve verdadero si al menos un lado es verdadero | `(5 > 6) || (5 < 6) //Un lado es falso, el otro es verdadero. Devuelve verdadero` | | `||` | **OR lógico**: compara dos expresiones booleanas. Devuelve verdadero si al menos un lado es verdadero | `(5 > 6) || (5 < 6) //Un lado es falso, el otro es verdadero. Devuelve verdadero` |
| `!` | **NOT lógico**: Devuelve el valor opuesto de una expresión booleana | `!(5 > 6) // 5 no es mayor que 6, pero "!" devolverá verdadero` | | `!` | **NOT lógico**: Devuelve el valor opuesto de una expresión booleana | `!(5 > 6) // 5 no es mayor que 6, pero "!" devolverá verdadero` |
@ -154,7 +152,7 @@ if (firstNumber > secondNumber) {
🚀 Desafío: cree un programa que se escriba primero con operadores lógicos y luego vuelva a escribirlo utilizando una expresión ternaria. ¿Cuál es tu sintaxis preferida? 🚀 Desafío: cree un programa que se escriba primero con operadores lógicos y luego vuelva a escribirlo utilizando una expresión ternaria. ¿Cuál es tu sintaxis preferida?
## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## [Post-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12)
## Revisión y autoestudio ## Revisión y autoestudio

@ -4,7 +4,7 @@
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pre-Lezione ## Quiz Pre-Lezione
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11) [Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11?loc=it)
Prendere decisioni e controllare l'ordine in cui il proprio codice viene eseguito lo rende riutilizzabile e robusto. Questa sezione descrive la sintassi per il controllo del flusso di dati in JavaScript e il suo significato quando viene utilizzato con tipi di dato Booleani Prendere decisioni e controllare l'ordine in cui il proprio codice viene eseguito lo rende riutilizzabile e robusto. Questa sezione descrive la sintassi per il controllo del flusso di dati in JavaScript e il suo significato quando viene utilizzato con tipi di dato Booleani
@ -26,7 +26,7 @@ Si impostano i booleani come vero o falso in questo modo:
Gli operatori vengono utilizzati per valutare condizioni effettuando confronti che creeranno un valore Booleano. Di seguito è riportato un elenco di operatori utilizzati di frequente. Gli operatori vengono utilizzati per valutare condizioni effettuando confronti che creeranno un valore Booleano. Di seguito è riportato un elenco di operatori utilizzati di frequente.
| Simbolo | Descrizione | Esempio | | Simbolo | Descrizione | Esempio |
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `<` | **Minore di**: Confronta due valori e restituisce il tipo di dato booleano `true` se il valore sul lato sinistro è minore di quello del lato di destra | `5 < 6 // true` | | `<` | **Minore di**: Confronta due valori e restituisce il tipo di dato booleano `true` se il valore sul lato sinistro è minore di quello del lato di destra | `5 < 6 // true` |
| `<=` | **Minore di o uguale a**: Confronta due valori e restituisce il tipo di dato Booleano `true` se il valore sul lato sinistro è minore o uguale a quello di destra | `5 <= 6 // true` | | `<=` | **Minore di o uguale a**: Confronta due valori e restituisce il tipo di dato Booleano `true` se il valore sul lato sinistro è minore o uguale a quello di destra | `5 <= 6 // true` |
| `>` | **Maggiore di**: Confronta due valori e restituisce il tipo di dato Booleano `true` se il valore sul lato sinistro è maggiore di quello del lato destro | `5 > 6 // false` | | `>` | **Maggiore di**: Confronta due valori e restituisce il tipo di dato Booleano `true` se il valore sul lato sinistro è maggiore di quello del lato destro | `5 > 6 // false` |
@ -83,7 +83,7 @@ else{
Le decisioni potrebbero richiedere più di un confronto e possono essere combinate con operatori logici per produrre un valore Booleano. Le decisioni potrebbero richiedere più di un confronto e possono essere combinate con operatori logici per produrre un valore Booleano.
| Simbolo | Descrizione | Esempio | | Simbolo | Descrizione | Esempio |
| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | ------- | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
| `&&` | **AND logico**: Confronta due espressioni Booleane. Restituisce vero **solo** se entrambe le parti sono vere | `(5 > 6) && (5 < 6) // Un lato è falso, l'altro è vero. Restituisce false` | | `&&` | **AND logico**: Confronta due espressioni Booleane. Restituisce vero **solo** se entrambe le parti sono vere | `(5 > 6) && (5 < 6) // Un lato è falso, l'altro è vero. Restituisce false` |
| `\|\|` | **OR logico**: Confronta due espressioni Booleane. Restituisce vero se almeno una parte è vera | `(5 > 6) || (5 < 6) // Un lato è falso, l'altro è vero. Restituisce true` | | `\|\|` | **OR logico**: Confronta due espressioni Booleane. Restituisce vero se almeno una parte è vera | `(5 > 6) || (5 < 6) // Un lato è falso, l'altro è vero. Restituisce true` |
| `!` | **NOT logico**: Restituisce il valore opposto di un'espressione Booleana | `!(5 > 6) // 5 non è maggiore di 6, ma "!" restituirà true` | | `!` | **NOT logico**: Restituisce il valore opposto di un'espressione Booleana | `!(5 > 6) // 5 non è maggiore di 6, ma "!" restituirà true` |
@ -162,7 +162,7 @@ Creare un programma che viene scritto prima con operatori logici, quindi riscriv
--- ---
## Quiz Post-Lezione ## Quiz Post-Lezione
[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12) [Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12?loc=12)
## Revisione e Auto Apprendimento ## Revisione e Auto Apprendimento

@ -4,7 +4,7 @@
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## 강의 전 퀴즈 ## 강의 전 퀴즈
[Pre-lecture quiz](../.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11&loc=ko)
결정을 내리고 코드가 실행되는 순서를 제어하면 코드를 재사용하며 강력하게 만들 수 있습니다. 이 강의에서는 JavaScript에서 데이터 흐름을 제어하기 위한 구문과 논리 자료형 데이터 타입을 함께 사용하는 중요성을 다룹니다. 결정을 내리고 코드가 실행되는 순서를 제어하면 코드를 재사용하며 강력하게 만들 수 있습니다. 이 강의에서는 JavaScript에서 데이터 흐름을 제어하기 위한 구문과 논리 자료형 데이터 타입을 함께 사용하는 중요성을 다룹니다.
@ -160,7 +160,7 @@ if (firstNumber > secondNumber) {
논리 연산자로 프로그램을 먼저 만든 뒤, 삼항 표현식을 사용하여 다시 작성하십시오. 어떤 구문을 선호합니까? 논리 연산자로 프로그램을 먼저 만든 뒤, 삼항 표현식을 사용하여 다시 작성하십시오. 어떤 구문을 선호합니까?
## 강의 후 퀴즈 ## 강의 후 퀴즈
[Post-lecture quiz](../.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12?loc=ko)
## 리뷰 & 자기주도 학습 ## 리뷰 & 자기주도 학습

@ -1,18 +0,0 @@
*Complete this quiz by checking one answer per question.*
1. What part of a for-loop would you need to modify to increment its iteration by 5
- [ ] condition
- [ ] counter
- [ ] iteration-expression
2. What's the difference between a `while` and a `for-loop`
- [ ] A `for-loop` has a counter and iteration-expression, where `while` only has a condition
- [ ] A `while` has a counter and iteration-expression where `for-loop` only has a condition
- [ ] They are the same, just an alias for one another
3. Given the code `for (let i=1; i < 5; i++)`, how many iterations will it perform?
- [ ] 5
- [ ] 4

@ -1,13 +0,0 @@
*Complete this quiz in class*
1. To refer to specific item in an array, you would use a
- [ ] square bracket `[]`
- [ ] index
- [ ] curly braces `{}`
2. How do you get the number of items in an array
- [ ] The `len(array)` method
- [ ] The property `size` on the array
- [ ] The `length` property on the array

@ -1,18 +0,0 @@
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
1. फॉर-लूप के किस भाग को आपको इसके पुनरावृत्ति को 5 से बढ़ाना होगा
- [ ] condition (स्थिति)
- [ ] काउंटर
- [ ] iteration-expression
2. एक `while` और एक `for-loop` के बीच क्या अंतर है
- [ ] एक `for-loop` में एक काउंटर और इटरेशन-एक्सप्रेशन है, जहां `while` में केवल एक शर्त है
- [ ] एक `while` में एक काउंटर और इटरेशन-एक्सप्रेशन है, जहां `for-loop` में केवल एक शर्त है
- [ ] वे समान हैं, बस एक दूसरे के लिए एक उपनाम
3. दिया गया कोड `for (let i=1; i < 5; i++)`, कितने पुनरावृत्तियों प्रदर्शन करेंगे?
- [ ] 5
- [ ] 4

@ -1,13 +0,0 @@
_इस क्विज को कक्षा में पूरा करें_
1. किसी सरणी में विशिष्ट आइटम को संदर्भित करने के लिए, आप एक क्या उपयोग करेंगे
- [ ] square bracket `[]`
- [ ] index
- [ ] curly braces `{}`
2. आपको किसी ऐरे में आइटम की संख्या कैसे मिलती है
- [ ] `len(array)` मेथड
- [ ] ऐरे पर `size` गुण
- [ ] ऐरे पर `length` गुण

@ -2,7 +2,7 @@
[![Arrays und Loops](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops") [![Arrays und Loops](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops")
## [Pre-Lecture Quiz](../.github/pre-lecture-quiz.md) ## [Pre-Lecture Quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13)
Diese Lektion behandelt die Grundlagen von JavaScript, der Sprache, die Interaktivität im Web bietet. In dieser Lektion lernen Sie Arrays und Loops kennen, mit denen Daten bearbeitet werden. Diese Lektion behandelt die Grundlagen von JavaScript, der Sprache, die Interaktivität im Web bietet. In dieser Lektion lernen Sie Arrays und Loops kennen, mit denen Daten bearbeitet werden.
@ -111,7 +111,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
Es gibt andere Möglichkeiten, Arrays als for- und while-Schleifen zu durchlaufen. Es gibt [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) und [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Schreiben Sie Ihre Array-Schleife mit einer dieser Techniken neu. Es gibt andere Möglichkeiten, Arrays als for- und while-Schleifen zu durchlaufen. Es gibt [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) und [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Schreiben Sie Ihre Array-Schleife mit einer dieser Techniken neu.
## [Quiz nach der Vorlesung](../.github/post-lecture-quiz.md) ## [Quiz nach der Vorlesung](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
## Review & Selbststudium ## Review & Selbststudium

@ -3,7 +3,7 @@
[![Matrices y bucles](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Matrices y bucles") [![Matrices y bucles](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Matrices y bucles")
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13)
Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web. En esta lección, aprenderá sobre matrices y bucles, que se utilizan para manipular datos. Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web. En esta lección, aprenderá sobre matrices y bucles, que se utilizan para manipular datos.
@ -105,7 +105,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
🚀 Desafío: Hay otras formas de realizar un bucle sobre arreglos además de los bucles for y while. Existen [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), y [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Vuelva a escribir su bucle de matriz utilizando una de estas técnicas. 🚀 Desafío: Hay otras formas de realizar un bucle sobre arreglos además de los bucles for y while. Existen [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), y [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Vuelva a escribir su bucle de matriz utilizando una de estas técnicas.
## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## [Post-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
## Revisión y autoestudio ## Revisión y autoestudio

@ -4,7 +4,7 @@
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pre-Lezione ## Quiz Pre-Lezione
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13) [Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13?loc=it)
Questa lezione tratta le basi di javascript, il linguaggio che fornisce interattività sul web. In questa lezione, si conosceranno gli array e i cicli, usati per manipolare i dati. Questa lezione tratta le basi di javascript, il linguaggio che fornisce interattività sul web. In questa lezione, si conosceranno gli array e i cicli, usati per manipolare i dati.
@ -113,7 +113,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
Esistono altri modi per eseguire un ciclo sugli array. diversi dai cicli for e while. Ci sono [forEach](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Statements/for...of) e [map](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Riscrivere il ciclo sull'array usando una di queste tecniche. Esistono altri modi per eseguire un ciclo sugli array. diversi dai cicli for e while. Ci sono [forEach](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Statements/for...of) e [map](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Riscrivere il ciclo sull'array usando una di queste tecniche.
## Quiz Post-Lezione ## Quiz Post-Lezione
[Quiz Post-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14) [Quiz Post-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=14)
## Revisione e Auto Apprendimento ## Revisione e Auto Apprendimento

@ -4,7 +4,7 @@
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## 강의 전 퀴즈 ## 강의 전 퀴즈
[Pre-lecture quiz](../.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13&loc=ko)
이 강의에서는 웹에서 상호 작용을 제공하는 언어인 JavaScript의 기본 사항을 다룹니다. 데이터를 컨트롤하는 데 사용하는 배열과 반복문에 대해 알아 봅니다. 이 강의에서는 웹에서 상호 작용을 제공하는 언어인 JavaScript의 기본 사항을 다룹니다. 데이터를 컨트롤하는 데 사용하는 배열과 반복문에 대해 알아 봅니다.
@ -112,7 +112,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
for문과 while문 외에 배열을 반복하는 다른 방법이 있습니다. [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) 그리고 [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)도 있습니다. 해당 기술 중 하나를 사용하여 배열 반복을 다시 작성하십시오. for문과 while문 외에 배열을 반복하는 다른 방법이 있습니다. [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) 그리고 [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)도 있습니다. 해당 기술 중 하나를 사용하여 배열 반복을 다시 작성하십시오.
## 강의 후 퀴즈 ## 강의 후 퀴즈
[Post-lecture quiz](../.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14&loc=ko)
## 리뷰 & 자기주도 학습 ## 리뷰 & 자기주도 학습

@ -1,17 +0,0 @@
*Complete this quiz after the lesson by checking one answer per question.*
1. Spans and Divs are interchangeable
- [ ] true
- [ ] false
2. The head of an HTML doc can contain:
- [ ] the title tag
- [ ] metadata
- [ ] all the above
3. You can't use deprecated tags in your markup
- [ ] true
- [ ] false
- [ ] false, but they have been deprecated for good reason

@ -1,19 +0,0 @@
*A warm-up quiz about HTML*
Complete this quiz in class
1. HTML stands for 'HyperText Mockup Language'
- [ ] true
- [ ] false
2. All HTML tags need both opening and closing tags
- [ ] true
- [ ] false
3. Using semantic markup is most important for
- [ ] code readability
- [ ] screen readers
- [ ] maintenance

@ -223,7 +223,7 @@ There are some wild 'older' tags in HTML that are still fun to play with, though
HTML is the 'tried and true' building block system that has helped build the web into what it is today. Learn a little about its history by studying some old and new tags. Can you figure out why some tags were deprecated and some added? What tags might be introduced in the future? HTML is the 'tried and true' building block system that has helped build the web into what it is today. Learn a little about its history by studying some old and new tags. Can you figure out why some tags were deprecated and some added? What tags might be introduced in the future?
Learn more about building sites for the web and mobile devices at [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=cxaall-4621-cxall). Learn more about building sites for the web and mobile devices at [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).
## Assignment ## Assignment

@ -1,18 +0,0 @@
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें._
1. [Spans और Divs विनिमेय हैं]
- [ ] [सही]
- [ ] [गलत]
2. [HTML डॉक के प्रमुख में क्या हो सकता है:]
- [ ] [title टैग ]
- [ ] [metadata]
- [ ] [उपर्युक्त सभी]
3. [आप अपने मार्कअप में पदावनत टैग का उपयोग नहीं कर सकते हैं]
- [ ] [सही]
- [ ] [गलत]
- [ ] [गलत है, लेकिन उन्हें अच्छे कारण के लिए पदावनत किया गया है]

@ -1,19 +0,0 @@
_HTML के बारे में एक वार्म-अप क्विज़_
इस क्विज को कक्षा में पूरा करें
1. HTML का फुल फॉर्म 'HyperText Mockup Language' है
- [ ] [सही]
- [ ] [गलत]
2. सभी HTML टैग को टैग खोलने और बंद करने दोनों की आवश्यकता होती है
- [ ] [सही]
- [ ] [गलत]
3. क्या करने के लिए सिमेंटिक मार्कअप का उपयोग करना सबसे महत्वपूर्ण है
- [ ] [code readability]
- [ ] [स्क्रीन रीडर]
- [ ] [संरक्षण]

@ -3,7 +3,7 @@
![Introducción a HTML](images/webdev101-html.png) ![Introducción a HTML](images/webdev101-html.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/15)
### Introducción: ### Introducción:
@ -205,7 +205,7 @@ Agregue este marcado encima de la última etiqueta `</div>`:
🚀 Desafío: hay algunas etiquetas "antiguas" salvajes en HTML con las que todavía es divertido jugar, aunque no debes usar etiquetas obsoletas como [estas etiquetas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) en su marcado. Aún así, ¿puede usar la antigua etiqueta `<marquee>` para hacer que el título h1 se desplace horizontalmente? (si lo hace, no olvide quitarlo después) 🚀 Desafío: hay algunas etiquetas "antiguas" salvajes en HTML con las que todavía es divertido jugar, aunque no debes usar etiquetas obsoletas como [estas etiquetas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) en su marcado. Aún así, ¿puede usar la antigua etiqueta `<marquee>` para hacer que el título h1 se desplace horizontalmente? (si lo hace, no olvide quitarlo después)
## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## [Post-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/16)
## Revisión y autoestudio ## Revisión y autoestudio

@ -5,7 +5,7 @@
## Quiz Pre-Lezione ## Quiz Pre-Lezione
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/15) [Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/15?loc=it)
### Introduzione ### Introduzione
@ -218,13 +218,13 @@ Ci sono alcuni "vecchi" selvaggi tag in HTML con cui è ancora divertente giocar
## Quiz Post-Lezione ## Quiz Post-Lezione
[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/16) [Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/16?loc=it)
## Revisione e Auto Apprendimento ## Revisione e Auto Apprendimento
L'HTML è il sistema di blocchi costitutivi "collaudato e vero" che ha contribuito a trasformare il Web in quello che è oggi. Imparare un po' sulla sua storia studiando alcuni tag vecchi e nuovi. Si riusce a capire perché alcuni tag sono stati deprecati e altri aggiunti? Quali tag potrebbero essere introdotti in futuro? L'HTML è il sistema di blocchi costitutivi "collaudato e vero" che ha contribuito a trasformare il Web in quello che è oggi. Imparare un po' sulla sua storia studiando alcuni tag vecchi e nuovi. Si riusce a capire perché alcuni tag sono stati deprecati e altri aggiunti? Quali tag potrebbero essere introdotti in futuro?
Ulteriori informazioni sulla creazione di siti per il Web e i dispositivi mobili in [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=cxaall-4621-cxall). Ulteriori informazioni sulla creazione di siti per il Web e i dispositivi mobili in [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).
## Compito ## Compito

@ -223,7 +223,7 @@ HTMLに はまだ遊んで楽しいワイルドな「古い」タグがいくつ
HTML は、今日のウェブを構築するのに役立ってきた「試行錯誤された」ビルディングブロックシステムです。古いタグと新しいタグを研究することで、その歴史について少し学びましょう。あるタグが非推奨になり、あるタグが追加された理由がわかりますか?将来的にはどのようなタグが導入されるかもしれませんか? HTML は、今日のウェブを構築するのに役立ってきた「試行錯誤された」ビルディングブロックシステムです。古いタグと新しいタグを研究することで、その歴史について少し学びましょう。あるタグが非推奨になり、あるタグが追加された理由がわかりますか?将来的にはどのようなタグが導入されるかもしれませんか?
Web やモバイル向けのサイト構築については、[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=cxaall-4621-cxall) で詳しく解説しています。 Web やモバイル向けのサイト構築については、[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa) で詳しく解説しています。
## 課題 ## 課題

@ -5,7 +5,7 @@
## 강의 전 퀴즈 ## 강의 전 퀴즈
[Pre-lecture quiz](../.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/15?loc=ko)
### 소개 ### 소개
@ -217,13 +217,13 @@ HTML에는 여전히 재미있고 '오래된' 태그가 있지만, 마크업에
## 강의 후 퀴즈 ## 강의 후 퀴즈
[Post-lecture quiz](../.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/16?loc=ko)
## 리뷰 & 자기주도 학습 ## 리뷰 & 자기주도 학습
HTML은 웹을 오늘 날의 웹으로 구축하는 데 도움이 준 'tried and true' 빌딩 블록 시스템입니다. 오래된 태그와 새로운 태그를 연구하여 그 역사에 대해 조금 배우십시오. 일부는 더 이상 안 쓰고 일부는 새로 만들어진 이유를 알 수 있습니까? 앞으로 어떤 태그가 도입될까요? HTML은 웹을 오늘 날의 웹으로 구축하는 데 도움이 준 'tried and true' 빌딩 블록 시스템입니다. 오래된 태그와 새로운 태그를 연구하여 그 역사에 대해 조금 배우십시오. 일부는 더 이상 안 쓰고 일부는 새로 만들어진 이유를 알 수 있습니까? 앞으로 어떤 태그가 도입될까요?
[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=cxaall-4621-cxall)에서 웹과 모바일용 사이트 제작에 대해 자세히 알아보세요. [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa)에서 웹과 모바일용 사이트 제작에 대해 자세히 알아보세요.
## 과제 ## 과제

@ -1,21 +0,0 @@
*Complete this quiz after the lesson by checking one answer per question.*
You will need to reference the following learn module to complete the quiz:
[Work with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
1. You can write CSS directly in the head section of your HTML file
- [ ] true
- [ ] false
1. It's always necessary to include CSS in your app
- [ ] true
- [ ] false
- [ ] false, but if you want it to look good you need CSS
1. Which browser tool can be used to inspect CSS?
- [ ] Elements
- [ ] Styles
- [ ] Network

@ -1,18 +0,0 @@
*A warm-up quiz about CSS*
Complete this quiz in class
1. HTML elements must have either a class or an id in order to be styled
- [ ] true
- [ ] false
2. CSS stands for 'Complete Style Sheets'
- [ ] true
- [ ] false
3. CSS can be used to create animations
- [ ] true
- [ ] false

@ -248,7 +248,7 @@ Add a 'bubble' shine to the left bottom area of the jar to make it look more gla
![finished terrarium](./images/terrarium-final.png) ![finished terrarium](./images/terrarium-final.png)
To complete the post-lecture quiz, go through this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics) To complete the post-lecture quiz, go through this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
## Post-Lecture Quiz ## Post-Lecture Quiz

@ -1,22 +0,0 @@
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें._
क्विज़ को पूरा करने के लिए आपको निम्नलिखित सीखने के मॉड्यूल का संदर्भ देना होगा:
[CSS के साथ काम करें](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
1. [आप अपनी HTML फ़ाइल के मुख्य भाग में सीधे CSS लिख सकते हैं]
- [ ] [सही]
- [ ] [गलत]
1. [अपने ऐप में CSS को शामिल करना हमेशा आवश्यक होता है]
- [ ] [सही]
- [ ] [गलत]
- [ ] [गलत है, लेकिन यदि आप चाहते हैं कि यह अच्छा लगे तो आपको CSS की आवश्यकता होगी]
1. [CSS का निरीक्षण करने के लिए कौन से ब्राउज़र टूल का उपयोग किया जा सकता है?]
- [ ] [Elements]
- [ ] [Styles]
- [ ] [Network]

@ -1,18 +0,0 @@
_CSS के बारे में एक वार्म-अप क्विज़_
इस क्विज को कक्षा में पूरा करें
1. HTML तत्वों को स्टाइल करने के लिए एक वर्ग(क्लॉस) या एक आईडी होना चाहिए
- [ ] [सही]
- [ ] [गलत]
2. CSS का अर्थ 'Complete Style Sheets' है
- [ ] [सही]
- [ ] [गलत]
3. एनिमेशन बनाने के लिए CSS का उपयोग किया जा सकता है
- [ ] [सही]
- [ ] [गलत]

@ -3,7 +3,7 @@
![Introducción a CSS](../images/webdev101-css.png) ![Introducción a CSS](../images/webdev101-css.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/17)
### Introducción: ### Introducción:
@ -244,7 +244,7 @@ Tenga en cuenta el uso de porcentajes aquí, incluso para el `border-radius`. Si
![terrario terminado](../images/terrarium-final.png) ![terrario terminado](../images/terrarium-final.png)
## [Post-lecture prueba](../.github/post-lecture-quiz.md) ## [Post-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/18)
## Revisión y autoestudio ## Revisión y autoestudio
@ -252,6 +252,4 @@ CSS parece engañosamente sencillo, pero existen muchos desafíos cuando se trat
**Asignación**: [Refactorización CSS](assignment.es.md) **Asignación**: [Refactorización CSS](assignment.es.md)
Complete los siguientes módulos de aprendizaje para completar el [cuestionario posterior a la conferencia](../.github/post-lecture-quiz.md): [Diseñe su aplicación HTML con CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
[Diseñe su aplicación HTML con CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)

@ -5,7 +5,7 @@
## Quiz Pre-Lezione ## Quiz Pre-Lezione
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/17) [Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/17?loc=it)
### Introduzione ### Introduzione
@ -248,11 +248,11 @@ Aggiungere una lucentezza a forma di bolla nell'area inferiore sinistra del bara
![terrario finito](../images/terrarium-final.png) ![terrario finito](../images/terrarium-final.png)
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) 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-13441-cxa)
## Quiz Post-Lezione ## Quiz Post-Lezione
[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/18) [Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/18?loc=it)
## Revisione e Auto Apprendimento ## Revisione e Auto Apprendimento

@ -249,7 +249,7 @@ HTML マークアップの各植物には、id とクラスの組み合わせが
![finished terrarium](./images/terrarium-final.png) ![finished terrarium](./images/terrarium-final.png)
レッスン後の小テストを完成させるには、この Learn モジュールを通ってください: [HTML アプリを CSS でスタイルを整える](https://docs.microsoft.com/ja-jp/learn/modules/build-simple-website/4-css-basics) レッスン後の小テストを完成させるには、この Learn モジュールを通ってください: [HTML アプリを CSS でスタイルを整える](https://docs.microsoft.com/ja-jp/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
## レッスン後の小テスト ## レッスン後の小テスト

@ -5,7 +5,7 @@
## 강의 전 퀴즈 ## 강의 전 퀴즈
[Pre-lecture quiz](../.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/17?loc=ko)
### 소개 ### 소개
@ -248,11 +248,11 @@ jar 좌측 하단 부분에 'bubble' 광택을 추가하여 유리처럼 보이
![finished terrarium](.././images/terrarium-final.png) ![finished terrarium](.././images/terrarium-final.png)
강의 후 퀴즈를 완료하려면, 다음 학습 모듈을 진행하십시오: [Style your HTML app with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics) 강의 후 퀴즈를 완료하려면, 다음 학습 모듈을 진행하십시오: [Style your HTML app with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
## 강의 후 퀴즈 ## 강의 후 퀴즈
[Post-lecture quiz](../.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/18?loc=ko)
## 리뷰 & 자기주도 학습 ## 리뷰 & 자기주도 학습

@ -1,18 +0,0 @@
*Complete this quiz after the lesson by checking one answer per question.*
1. The DOM is a model to represent a document on the web
- [ ] true
- [ ] false
2. Use JavaScript closures to perform the following:
- [ ] write functions within functions
- [ ] enclose the DOM
- [ ] close script blocks
3. Fill in the blank: Closures are useful when one or more functions need to access an outer function's...
- [ ] arrays
- [ ] scope
- [ ] functions

@ -1,18 +0,0 @@
*A warm-up quiz about the DOM*
Complete this quiz in class
1. The DOM stands for 'Document Object Management'
- [ ] true
- [ ] false
2. The DOM can be thought of as a tree
- [ ] true
- [ ] false
3. Using the Web API, you can manipulate the DOM
- [ ] true
- [ ] false

@ -1,18 +0,0 @@
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें._
1. [DOM एक नमूना है जो वेब पर एक दस्तावेज़ का प्रतिनिधित्व करता है]
- [ ] सही
- [ ] गलत
2. [निम्नलिखित प्रदर्शन करने के लिए जावास्क्रिप्ट क्लोजर का उपयोग करें:]
- [ ] [फंक्शन्स के भीतर फंक्शन्स लिखें]
- [ ] [डोम को संलग्न करें]
- [ ] [स्क्रिप्ट ब्लॉक बंद करें]
3. [रिक्त स्थान भरें: क्लोजर तब उपयोगी होते हैं जब एक या अधिक फ़ंक्शन को बाहरी फ़ंक्शन के ______ तक पहुंचने की आवश्यकता होती है]
- [ ] [arrays]
- [ ] [scope]
- [ ] [functions]

@ -1,18 +0,0 @@
_DOM के बारे में एक वार्म-अप क्विज़_
इस क्विज को कक्षा में पूरा करें
1. DOM का अर्थ 'Document Object Management' है
- [ ] सही
- [ ] गलत
2. DOM को एक ट्री माना जा सकता है
- [ ] सही
- [ ] गलत
3. वेब API का उपयोग करके, आप DOM में हेरफेर कर सकते हैं
- [ ] सही
- [ ] गलत

@ -3,7 +3,7 @@
! [DOM y un cierre](../images/webdev101-js.png) ! [DOM y un cierre](../images/webdev101-js.png)
> Boceto de [Tomomi Imura](https://twitter.com/girlie_mac) > Boceto de [Tomomi Imura](https://twitter.com/girlie_mac)
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md) ## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/19)
### Introducción: ### Introducción:
@ -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!
## [Post-lecture prueba](.github/post-lecture-quiz.md) ## [Post-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/20)
## Revisión y autoestudio ## Revisión y autoestudio

@ -5,7 +5,7 @@
## Quiz Pre-Lezione ## Quiz Pre-Lezione
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/19) [Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/19?loc=it)
### Introduzione ### Introduzione
@ -201,7 +201,7 @@ Aggiungere un nuovo gestore di eventi alla closure per fare qualcosa di più con
## Quiz Post-Lezione ## Quiz Post-Lezione
[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/20) [Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/20?loc=it)
## Revisione e Auto Apprendimento ## Revisione e Auto Apprendimento

@ -5,7 +5,7 @@
## 강의 전 퀴즈 ## 강의 전 퀴즈
[Pre-lecture quiz](../.github/pre-lecture-quiz.md) [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/19?loc=ko)
### 소개 ### 소개
@ -199,7 +199,7 @@ function stopElementDrag() {
## 강의 후 퀴즈 ## 강의 후 퀴즈
[Post-lecture quiz](../.github/post-lecture-quiz.md) [Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/20?loc=ko)
## 리뷰 & 자기주도 학습 ## 리뷰 & 자기주도 학습

@ -26,7 +26,7 @@ You can deploy, or publish your terrarium to the web using Azure Static Web Apps
2. Press this button 2. Press this button
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=cxaall-4621-cxall#create/Microsoft.StaticApp) [![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
3. Walk through the wizard creating your app. Make sure you set the app root to either be `/solution` or the root of your codebase. There's no API in this app, so don't worry about adding that. A .github folder will be created in your forked repo that will help Azure Static Web Apps' build service build and publish your app to a new URL. 3. Walk through the wizard creating your app. Make sure you set the app root to either be `/solution` or the root of your codebase. There's no API in this app, so don't worry about adding that. A .github folder will be created in your forked repo that will help Azure Static Web Apps' build service build and publish your app to a new URL.

@ -24,4 +24,4 @@ Encuentre más información sobre eventos de punteros en los [documentos del W3C
Siempre verifique las capacidades del navegador usando [CanIUse.com](https://caniuse.com/). Siempre verifique las capacidades del navegador usando [CanIUse.com](https://caniuse.com/).
Obtenga más información sobre cómo crear sitios para la Web y dispositivos móviles en [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=cxaall-4621-cxall). Obtenga más información sobre cómo crear sitios para la Web y dispositivos móviles en [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).

@ -26,6 +26,6 @@
2. इस बटन को दबाएँ 2. इस बटन को दबाएँ
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=cxaall-4621-cxall#create/Microsoft.StaticApp) [![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
3. अपना ऐप बनाने वाले विज़ार्ड के माध्यम से चलें। सुनिश्चित करें कि आपने ऐप रूट को या तो `../solution` या अपने कोडबेस की जड़ के रूप में सेट किया है. इस ऐप में कोई API नहीं है, इसलिए इसे जोड़ने की चिंता न करें. एक .github फोल्डर आपके फोर्क्ड रेपो में बनाया जाएगा जो Azure Static Web Apps की बिल्ड सर्विस बनाने और आपके ऐप को एक नए URL पर प्रकाशित करने में मदद करेगा। 3. अपना ऐप बनाने वाले विज़ार्ड के माध्यम से चलें। सुनिश्चित करें कि आपने ऐप रूट को या तो `../solution` या अपने कोडबेस की जड़ के रूप में सेट किया है. इस ऐप में कोई API नहीं है, इसलिए इसे जोड़ने की चिंता न करें. एक .github फोल्डर आपके फोर्क्ड रेपो में बनाया जाएगा जो Azure Static Web Apps की बिल्ड सर्विस बनाने और आपके ऐप को एक नए URL पर प्रकाशित करने में मदद करेगा।

@ -26,7 +26,7 @@ La grafica è stata disegnata a mano da [Jen Looper](http://jenlooper.com) usand
2. Premere questo pulsante 2. Premere questo pulsante
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=cxaall-4621-cxall#create/Microsoft.StaticApp) [![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
3. Seguire la procedura guidata per creare l'app. Assicurarsi di impostare la radice dell'app su `/solution` o la radice della propria base di codice. Non ci sono API in questa app, quindi non ci si deve preoccupare di aggiungerla. Verrà creata una cartella .github nel repository oggetto di fork del punto 1 che aiuterà il servizio di compilazione di Azure Static Web Apps a creare e pubblicare l'app in un nuovo URL. 3. Seguire la procedura guidata per creare l'app. Assicurarsi di impostare la radice dell'app su `/solution` o la radice della propria base di codice. Non ci sono API in questa app, quindi non ci si deve preoccupare di aggiungerla. Verrà creata una cartella .github nel repository oggetto di fork del punto 1 che aiuterà il servizio di compilazione di Azure Static Web Apps a creare e pubblicare l'app in un nuovo URL.

@ -26,7 +26,7 @@ Azure Static Web Apps を使ってテラリウムをデプロイしたり、ウ
2. このボタンを押します 2. このボタンを押します
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=cxaall-4621-cxall#create/Microsoft.StaticApp) [![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
3. アプリを作成するウィザードに沿って進みます。アプリのルートを `/solution` またはコードベースのルートに設定してください。このアプリには API はありませんので、追加については心配しないでください。フォークされたレポに .github フォルダが作成され、Azure Static Web Apps のビルドサービスのビルドを支援し、新しい URL にアプリを公開します。 3. アプリを作成するウィザードに沿って進みます。アプリのルートを `/solution` またはコードベースのルートに設定してください。このアプリには API はありませんので、追加については心配しないでください。フォークされたレポに .github フォルダが作成され、Azure Static Web Apps のビルドサービスのビルドを支援し、新しい URL にアプリを公開します。

@ -26,6 +26,6 @@ Azure Static Web Apps를 사용하여 terrarium을 웹에 배포하거나 게시
2. 버튼을 누릅니다 2. 버튼을 누릅니다
[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=cxaall-4621-cxall#create/Microsoft.StaticApp) [![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
3. 앱을 만드는 마법사로 안내합니다. 앱 상위를 `/solution` 또는 코드베이스의 상위로 설정했는지 확인하십시오. 이 앱에는 API가 없으므로 추가할 필요가 없습니다. Azure Static Web Apps의 빌드 서비스로 빌드하고 새 URL에 앱을 게시하는 데 도움이 되는 포크 리포지토리에 .github 폴더가 생성됩니다. 3. 앱을 만드는 마법사로 안내합니다. 앱 상위를 `/solution` 또는 코드베이스의 상위로 설정했는지 확인하십시오. 이 앱에는 API가 없으므로 추가할 필요가 없습니다. Azure Static Web Apps의 빌드 서비스로 빌드하고 새 URL에 앱을 게시하는 데 도움이 되는 포크 리포지토리에 .github 폴더가 생성됩니다.

@ -1,18 +0,0 @@
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
1. किसी भी चीज़ के बारे में एक उपयोगकर्ता एक पृष्ठ पर एक घटना को बढ़ाता है
- [ ] सही
- [ ] गलत
2. आम घटनाओं में क्या शामिल हैं
- [ ] click_event
- [ ] select_event
- [ ] input_event
- [ ] all of these
3. आप ईवेंट हैंडलर बनाने के लिए अनाम फ़ंक्शंस का उपयोग कर सकते हैं
- [ ] सही
- [ ] गलत

@ -1,20 +0,0 @@
_इस क्विज को कक्षा में पूरा करें_
1. इवेंट-संचालित प्रोग्रामिंग जब एक उपयोगकर्ता
- [ ] एक बटन पर क्लिक करता है
- [ ] एक वैल्यू बदलता है
- [ ] पृष्ठ के साथ सहभागिता करता है
- [ ] ऊपर मे से कोई
2. प्रक्रियात्मक प्रोग्रामिंग में, फंक्शन्स को कहा जाता है
- [ ] किसी भी समय
- [ ] एक विशिष्ट क्रम में
- [ ] बाएं से दाएं
3. ईवेंट हैंडलर्स को पंजीकृत करने के लिए DOM में उजागर की गई सार्वभौमिक विधि को क्या जाता है
- [ ] addEventListener
- [ ] addListener
- [ ] addEvent

@ -69,7 +69,7 @@ CO2 Signal's API.
- the [starter code](../start). Download the `start` folder; you will be completing code in this folder. - the [starter code](../start). Download the `start` folder; you will be completing code in this folder.
- [NPM](https://www.npmjs.com) - NPM is a package management tool; install it locally and the packages listed in you `package.json` file will be installed for use by your web asset - [NPM](https://www.npmjs.com) - NPM is a package management tool; install it locally and the packages listed in you `package.json` file will be installed for use by your web asset
✅ Learn more about package management in this [excellent Learn module](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/) ✅ Learn more about package management in this [excellent Learn module](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)
Take a minute to look through the codebase: Take a minute to look through the codebase:

@ -68,7 +68,7 @@ API de CO2 Signal.
- el [código de inicio](../inicio). Descargue la carpeta `start`; completará el código en esta carpeta. - el [código de inicio](../inicio). Descargue la carpeta `start`; completará el código en esta carpeta.
- [NPM](https://www.npmjs.com) - NPM es una herramienta de gestión de paquetes; instálelo localmente y los paquetes enumerados en su archivo `package.json` se instalarán para que los use su recurso web - [NPM](https://www.npmjs.com) - NPM es una herramienta de gestión de paquetes; instálelo localmente y los paquetes enumerados en su archivo `package.json` se instalarán para que los use su recurso web
✅ Obtenga más información sobre la administración de paquetes en este [excelente módulo de aprendizaje](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/) ✅ Obtenga más información sobre la administración de paquetes en este [excelente módulo de aprendizaje](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)
Tómate un minuto para revisar el código base: Tómate un minuto para revisar el código base:

@ -68,7 +68,7 @@
- [スターターコード](../../start)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。 - [スターターコード](../../start)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。
- [NPM](https://www.npmjs.com) - NPM はパッケージ管理ツールです。ローカルにインストールすると、`package.json` ファイルに記載されているパッケージがインストールされ、Web アセットで使用されます。 - [NPM](https://www.npmjs.com) - NPM はパッケージ管理ツールです。ローカルにインストールすると、`package.json` ファイルに記載されているパッケージがインストールされ、Web アセットで使用されます。
✅ この[優れた Learn モジュール](https://docs.microsoft.com/ja-jp/learn/modules/create-nodejs-project-dependencies/)では、パッケージ管理の詳細を学ぶことができます。 ✅ この[優れた Learn モジュール](https://docs.microsoft.com/ja-jp/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)では、パッケージ管理の詳細を学ぶことができます。
コードベースに目を通してみてください。 コードベースに目を通してみてください。

@ -68,7 +68,7 @@
- [starter code](../start). `start` 폴더를 다운로드하세요; 이 폴더에서 코드를 완성하게됩니다. - [starter code](../start). `start` 폴더를 다운로드하세요; 이 폴더에서 코드를 완성하게됩니다.
- [NPM](https://www.npmjs.com) - NPM은 패키지 관리 도구입니다. 로컬에 설치하고 `package.json` 파일에 나열된 패키지를 웹 어셋에서 사용하도록 설치합니다. - [NPM](https://www.npmjs.com) - NPM은 패키지 관리 도구입니다. 로컬에 설치하고 `package.json` 파일에 나열된 패키지를 웹 어셋에서 사용하도록 설치합니다.
✅ 이 [excellent Learn module](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/)에서 패키지 관리에 대해 자세히 알아보세요 ✅ 이 [excellent Learn module](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)에서 패키지 관리에 대해 자세히 알아보세요
잠시 시간을 내어 코드베이스를 보세요: 잠시 시간을 내어 코드베이스를 보세요:

@ -22,7 +22,7 @@ The Performance tab contains a Profiling tool. Open a web site (try, for example
![Edge profiler](./images/profiler.png) ![Edge profiler](./images/profiler.png)
✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance) on the Performance panel in Edge ✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) 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 a true reading of your web site's startup time, clear your browser's cache

@ -20,7 +20,7 @@ La pestaña Rendimiento contiene una herramienta de creación de perfiles. Abra
![Edge profiler](./images/profiler.png) ![Edge profiler](./images/profiler.png)
✅ Visite la [Documentación de Microsoft](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance) en el panel Rendimiento en Edge ✅ Visite la [Documentación de Microsoft](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) 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 > 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 @@
![Edge profiler](../images/profiler.png) ![Edge profiler](../images/profiler.png)
✅ Edge のパフォーマンスパネルの [Microsoft ドキュメント](https://docs.microsoft.com/ja-jp/microsoft-edge/edgehtml/) を参照してください。 ✅ Edge のパフォーマンスパネルの [Microsoft ドキュメント](https://docs.microsoft.com/ja-jp/microsoft-edge/edgehtml/?WT.mc_id=academic-13441-cxa) を参照してください。
> ヒント: Web サイトの起動時間を正確に把握するには、ブラウザのキャッシュをクリアしてください。 > ヒント: Web サイトの起動時間を正確に把握するには、ブラウザのキャッシュをクリアしてください。

@ -22,7 +22,7 @@ Performance 탭에는 Profiling 도구가 있습니다. 웹 사이트를 열고
![Edge profiler](.././images/profiler.png) ![Edge profiler](.././images/profiler.png)
✅ Edge에서 Performance 패널에서 [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance)를 방문하세요 ✅ Edge에서 Performance 패널에서 [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa)를 방문하세요
> Tip: 웹 사이트의 시작 시간을 순수하게 보려면, 브라우저의 캐시를 지우세요 > Tip: 웹 사이트의 시작 시간을 순수하게 보려면, 브라우저의 캐시를 지우세요

@ -217,7 +217,7 @@ Think about how the pub-sub pattern can enhance a game. Which parts should emit
## Review & Self Study ## Review & Self Study
Learn more about Pub/Sub by [reading about it](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber). Learn more about Pub/Sub by [reading about it](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa).
## Assignment ## Assignment

@ -211,6 +211,6 @@ A medida que las cosas se complican cuando tu juego crece, este patrón permanec
## Revisión y autoestudio ## Revisión y autoestudio
Obtenga más información sobre Pub / Sub al [leer sobre él](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber). Obtenga más información sobre Pub / Sub al [leer sobre él](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa).
**Tarea**: [Mock up a game](assignment.es.md) **Tarea**: [Mock up a game](assignment.es.md)

@ -215,7 +215,7 @@ eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
## समीक्षा और स्व अध्ययन ## समीक्षा और स्व अध्ययन
pub/sub[के बारे में पढ़े](https://docs.microsoft.com/en-us/azure/altecture/patterns/publisher-subscriber) और अधिक जानें . pub/sub[के बारे में पढ़े](https://docs.microsoft.com/en-us/azure/altecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa) और अधिक जानें .
## असाइनमेंट ## असाइनमेंट

@ -217,7 +217,7 @@ pub-sub パターンがどのようにゲームを盛り上げるかを考えて
## 復習と自己学習 ## 復習と自己学習
Pub/Sub については、[こちらを読んでみてください](https://docs.microsoft.com/ja-jp/azure/architecture/patterns/publisher-subscriber)。 Pub/Sub については、[こちらを読んでみてください](https://docs.microsoft.com/ja-jp/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa)。
## 課題 ## 課題

@ -217,7 +217,7 @@ pub-sub 패턴이 어떻게 게임을 발전시킬 수 있는지 생각해보세
## 리뷰 & 자기주도 학습 ## 리뷰 & 자기주도 학습
[reading about it](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber)으로 Pub/Sub에 대해 조금 더 배워봅시다. [reading about it](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa)으로 Pub/Sub에 대해 조금 더 배워봅시다.
## 과제 ## 과제

@ -60,9 +60,10 @@ class Hero extends GameObject {
let id = setInterval(() => { let id = setInterval(() => {
if (this.cooldown > 0) { if (this.cooldown > 0) {
this.cooldown -= 100; this.cooldown -= 100;
} else { if(this.cooldown === 0) {
clearInterval(id); clearInterval(id);
} }
}
}, 200); }, 200);
} }
canFire() { canFire() {

@ -60,9 +60,10 @@ class Hero extends GameObject {
let id = setInterval(() => { let id = setInterval(() => {
if (this.cooldown > 0) { if (this.cooldown > 0) {
this.cooldown -= 100; this.cooldown -= 100;
} else { if(this.cooldown === 0) {
clearInterval(id); clearInterval(id);
} }
}
}, 200); }, 200);
} }
canFire() { canFire() {

@ -58,9 +58,10 @@ class Hero extends GameObject {
let id = setInterval(() => { let id = setInterval(() => {
if (this.cooldown > 0) { if (this.cooldown > 0) {
this.cooldown -= 100; this.cooldown -= 100;
} else { if(this.cooldown === 0) {
clearInterval(id); clearInterval(id);
} }
}
}, 200); }, 200);
} }
canFire() { canFire() {

@ -65,9 +65,10 @@ class Hero extends GameObject {
let id = setInterval(() => { let id = setInterval(() => {
if (this.cooldown > 0) { if (this.cooldown > 0) {
this.cooldown -= 100; this.cooldown -= 100;
} else { if(this.cooldown === 0) {
clearInterval(id); clearInterval(id);
} }
}
}, 200); }, 200);
} }
canFire() { canFire() {

@ -60,9 +60,10 @@ class Hero extends GameObject {
let id = setInterval(() => { let id = setInterval(() => {
if (this.cooldown > 0) { if (this.cooldown > 0) {
this.cooldown -= 100; this.cooldown -= 100;
} else { if(this.cooldown === 0) {
clearInterval(id); clearInterval(id);
} }
}
}, 200); }, 200);
} }
canFire() { canFire() {

@ -299,7 +299,7 @@ Add a new template and route for a third page that shows the credits for this ap
## Review & Self Study ## 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/en-us/azure/static-web-apps/routes) 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/en-us/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa) handles routing. Can you explain why some of the decisions described on that document are necessary?
## Assignment ## Assignment

@ -297,7 +297,7 @@ updateRoute();
## 復習と自己学習 ## 復習と自己学習
ルーティングは Web 開発の驚くほどトリッキーな部分の1つで、特に Web がページ更新の動作からシングルページアプリケーションのページ更新へと移行するにつれ、そのような部分が増えてきています。[Azure Static Web Apps プレビューでのルート](https://docs.microsoft.com/ja-jp/azure/static-web-apps/routes)がルーティングを扱うことについて少し読んでみてください。そのドキュメントに記載されているいくつかの決定が必要な理由を説明できますか? ルーティングは Web 開発の驚くほどトリッキーな部分の1つで、特に Web がページ更新の動作からシングルページアプリケーションのページ更新へと移行するにつれ、そのような部分が増えてきています。[Azure Static Web Apps プレビューでのルート](https://docs.microsoft.com/ja-jp/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa)がルーティングを扱うことについて少し読んでみてください。そのドキュメントに記載されているいくつかの決定が必要な理由を説明できますか?
## 課題 ## 課題

@ -288,7 +288,7 @@ updateRoute();
## 리뷰 & 자기주도 학습 ## 리뷰 & 자기주도 학습
라우팅은 웹 개발의 놀랍고 까다로운 부분 중 하나입니다, 특히 웹의 페이지 새로고침 동작에서 단일 페이지 애플리케이션 페이지 새로고침으로 이동함에 따라 더욱 더 그렇습니다. [how the Azure Static Web App service](https://docs.microsoft.com/en-us/azure/static-web-apps/routes)의 라우터 제어에 대해 약간 봅니다. 그 문서에 기술된 몇 가지 결정이 필요한 이유를 설명할 수 있나요? 라우팅은 웹 개발의 놀랍고 까다로운 부분 중 하나입니다, 특히 웹의 페이지 새로고침 동작에서 단일 페이지 애플리케이션 페이지 새로고침으로 이동함에 따라 더욱 더 그렇습니다. [how the Azure Static Web App service](https://docs.microsoft.com/en-us/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa)의 라우터 제어에 대해 약간 봅니다. 그 문서에 기술된 몇 가지 결정이 필요한 이유를 설명할 수 있나요?
## 과제 ## 과제

@ -111,6 +111,8 @@ navigate('/dashboard');
✅ Did you know that by default, you can only call server APIs from the *same domain and port* than the web page you are viewing? This is security mechanism enforced by browsers. But wait, our web app is running on `localhost:3000` whereas the server API is running on ` localhost:5000`, why does it work? By using a technique called [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), it is possible to perform cross-origin HTTP requests if the server adds special headers to the response, allowing exceptions for specific domains. ✅ Did you know that by default, you can only call server APIs from the *same domain and port* than the web page you are viewing? This is security mechanism enforced by browsers. But wait, our web app is running on `localhost:3000` whereas the server API is running on ` localhost:5000`, why does it work? By using a technique called [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), it is possible to perform cross-origin HTTP requests if the server adds special headers to the response, allowing exceptions for specific domains.
> Learn more about APIs by taking this [lesson](https://docs.microsoft.com/en-us/learn/modules/use-apis-discover-museum-art?WT.mc_id=academic-13441-cxa)
## Update HTML to display data ## Update HTML to display data
Now that we have the user data, we have to update the existing HTML to display it. We already know how to retrieve an element from the DOM using for example `document.getElementById()`. After you have a base element, here are some APIs you can use to modify it or add child elements to it: Now that we have the user data, we have to update the existing HTML to display it. We already know how to retrieve an element from the DOM using for example `document.getElementById()`. After you have a base element, here are some APIs you can use to modify it or add child elements to it:

@ -6,7 +6,7 @@ Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson cur
> **Teachers**, we have [included some suggestions](for-teachers.md) on how to use this curriculum. If you would like to create your own lessons, we have also included a [lesson template](lesson-template/README.md) > **Teachers**, we have [included some suggestions](for-teachers.md) on how to use this curriculum. If you would like to create your own lessons, we have also included a [lesson template](lesson-template/README.md)
> **Students**, to use this curriculum on your own, fork the entire repo and complete the exercises on your own, starting with a pre-lecture quiz, then reading the lecture and completing the rest of the activities. Try to create the projects by comprehending the lessons rather than copying the solution code; however that code is available in the /solutions folders in each project-oriented lesson. Another idea would be to form a study group with friends and go through the content together. For further study, we recommend [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-4621-cxa) and by watching the videos mentioned below. > **Students**, to use this curriculum on your own, fork the entire repo and complete the exercises on your own, starting with a pre-lecture quiz, then reading the lecture and completing the rest of the activities. Try to create the projects by comprehending the lessons rather than copying the solution code; however that code is available in the /solutions folders in each project-oriented lesson. Another idea would be to form a study group with friends and go through the content together. For further study, we recommend [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) and by watching the videos mentioned below.
[![Promo video](screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Promo video") [![Promo video](screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
@ -16,11 +16,11 @@ Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson cur
We have chosen two pedagogical tenets while building this curriculum: ensuring that it is project-based and that it includes frequent quizzes. By the end of this series, students will have built a typing game, a virtual terrarium, a 'green' browser extension, a 'space invaders' type game, and a business-type banking app, and will have learned the basics of JavaScript, HTML, and CSS along with the modern toolchain of today's web developer. We have chosen two pedagogical tenets while building this curriculum: ensuring that it is project-based and that it includes frequent quizzes. By the end of this series, students will have built a typing game, a virtual terrarium, a 'green' browser extension, a 'space invaders' type game, and a business-type banking app, and will have learned the basics of JavaScript, HTML, and CSS along with the modern toolchain of today's web developer.
By ensuring that the content aligns with projects, the process is made more engaging for students and retention of concepts will be augmented. We also wrote several starter lessons in JavaScript basics to introduce concepts, paired with video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=cxaall-4621-cxall)" collection of video tutorials, some of whose authors contributed to this curriculum. By ensuring that the content aligns with projects, the process is made more engaging for students and retention of concepts will be augmented. We also wrote several starter lessons in JavaScript basics to introduce concepts, paired with video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" collection of video tutorials, some of whose authors contributed to this curriculum.
In addition, a low-stakes quiz before a class sets the intention of the student towards learning a topic, while a second quiz after class ensures further retention. This curriculum was designed to be flexible and fun and can be taken in whole or in part. The projects start small and become increasingly complex by the end of the 12 week cycle. In addition, a low-stakes quiz before a class sets the intention of the student towards learning a topic, while a second quiz after class ensures further retention. This curriculum was designed to be flexible and fun and can be taken in whole or in part. The projects start small and become increasingly complex by the end of the 12 week cycle.
While we have purposefully avoided introducing JavaScript frameworks so as to concentrate on the basic skills needed as a web developer before adopting a framework, a good next step to completing this curriculum would be learning about Node.js via another collection of videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=cxaall-4621-cxall)". While we have purposefully avoided introducing JavaScript frameworks so as to concentrate on the basic skills needed as a web developer before adopting a framework, a good next step to completing this curriculum would be learning about Node.js via another collection of videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
> Find our [Code of Conduct](CODE_OF_CONDUCT.md), [Contributing](CONTRIBUTING.md), and [Translation](TRANSLATIONS.md) guidelines. We welcome your constructive feedback! > Find our [Code of Conduct](CODE_OF_CONDUCT.md), [Contributing](CONTRIBUTING.md), and [Translation](TRANSLATIONS.md) guidelines. We welcome your constructive feedback!
> >

@ -6,7 +6,7 @@
> **先生方**、このカリキュラムをどのように使用するか、[いくつかの提案があります](for-teachers.ja.md)。あなた自身のレッスンを作成したい場合は、[レッスンテンプレート](lesson-template/translations/README.ja.md)もご用意しています。 > **先生方**、このカリキュラムをどのように使用するか、[いくつかの提案があります](for-teachers.ja.md)。あなた自身のレッスンを作成したい場合は、[レッスンテンプレート](lesson-template/translations/README.ja.md)もご用意しています。
> **学生の皆さん**、このカリキュラムを自分で使うためには、リポジトリ全体をフォークして、講義前の小テストから始めて、講義を読んで、残りのアクティビティを自分で完成させてください。解答コードは各レッスンの /solutions フォルダにありますが、解答コードをコピーするのではなく、授業を理解した上でプロジェクトを作成するようにしてください。また、友達と勉強会を作って、一緒に勉強するのもいいでしょう。さらに勉強するには、[Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-4621-cxa) や以下のビデオを見ることをお勧めします。 > **学生の皆さん**、このカリキュラムを自分で使うためには、リポジトリ全体をフォークして、講義前の小テストから始めて、講義を読んで、残りのアクティビティを自分で完成させてください。解答コードは各レッスンの /solutions フォルダにありますが、解答コードをコピーするのではなく、授業を理解した上でプロジェクトを作成するようにしてください。また、友達と勉強会を作って、一緒に勉強するのもいいでしょう。さらに勉強するには、[Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) や以下のビデオを見ることをお勧めします。
[![Promo video](screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Promo video") [![Promo video](screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
@ -16,11 +16,11 @@
私たちは、このカリキュラムを構築する際に、2つの教育学的な考え方を選択しました。このシリーズが終わる頃には、学生はタイピングゲーム、バーチャルテラリウム、「グリーン」ブラウザ拡張機能、「スペースインベーダー」タイプのゲーム、ビジネスタイプの銀行アプリを作成し、JavaScript、HTML、CSS の基本を、今日の Web 開発者の最新のツールチェーンとともに学んでいることでしょう。 私たちは、このカリキュラムを構築する際に、2つの教育学的な考え方を選択しました。このシリーズが終わる頃には、学生はタイピングゲーム、バーチャルテラリウム、「グリーン」ブラウザ拡張機能、「スペースインベーダー」タイプのゲーム、ビジネスタイプの銀行アプリを作成し、JavaScript、HTML、CSS の基本を、今日の Web 開発者の最新のツールチェーンとともに学んでいることでしょう。
コンテンツがプロジェクトに沿ったものであることを確認することで、プロセスは学生にとってより魅力的なものとなり、概念の定着率が向上します。また、JavaScriptの基本的な概念を紹介するために、いくつかのスターターレッスンを執筆し、その中の何人かの著者がこのカリキュラムに貢献しているビデオチュートリアルのコレクション "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=cxaall-4621-cxall)" のビデオと組み合わせました。 コンテンツがプロジェクトに沿ったものであることを確認することで、プロセスは学生にとってより魅力的なものとなり、概念の定着率が向上します。また、JavaScriptの基本的な概念を紹介するために、いくつかのスターターレッスンを執筆し、その中の何人かの著者がこのカリキュラムに貢献しているビデオチュートリアルのコレクション "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" のビデオと組み合わせました。
また、授業前の小テストで学習者の学習意図を確認し、授業後に2回目の小テストを行うことで、学習の定着度を高めています。このカリキュラムは柔軟性があり、楽しく、全体的にも部分的にも受講できるように設計されています。プロジェクトは小さなものから始まり、12週間のサイクルが終わる頃には徐々に複雑なものになっていきます。 また、授業前の小テストで学習者の学習意図を確認し、授業後に2回目の小テストを行うことで、学習の定着度を高めています。このカリキュラムは柔軟性があり、楽しく、全体的にも部分的にも受講できるように設計されています。プロジェクトは小さなものから始まり、12週間のサイクルが終わる頃には徐々に複雑なものになっていきます。
フレームワークを採用する前に Web 開発者として必要とされる基本的なスキルに集中するため、JavaScript フレームワークの紹介は意図的に避けていますが、このカリキュラムを修了するための良い次のステップとして、別のビデオのコレクション "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=cxaall-4621-cxall)" を通して Node.js について学ぶことができます。 フレームワークを採用する前に Web 開発者として必要とされる基本的なスキルに集中するため、JavaScript フレームワークの紹介は意図的に避けていますが、このカリキュラムを修了するための良い次のステップとして、別のビデオのコレクション "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)" を通して Node.js について学ぶことができます。
> [行動規範](./CODE_OF_CONDUCT.md)、[貢献](./CONTRIBUTING.md)、[翻訳](./TRANSLATIONS.md)のガイドラインをご覧ください。建設的なご意見をお待ちしております。 > [行動規範](./CODE_OF_CONDUCT.md)、[貢献](./CONTRIBUTING.md)、[翻訳](./TRANSLATIONS.md)のガイドラインをご覧ください。建設的なご意見をお待ちしております。
> >
@ -40,7 +40,7 @@
## レッスン ## レッスン
| | プロジェクト名 | 教える概念 | 学習の目的 | 関連するレッスン | レッスンの記載 | スケッチノート | 課題 | レッスン前の小テスト | レッスン後の小テスト | ビデオ | 著者 | | | プロジェクト名 | 教える概念 | 学習の目的 | 関連するレッスン | レッスンの記載 | スケッチノート | 課題 | レッスン前の小テスト | レッスン後の小テスト | ビデオ | 著者 |
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :------------: | :--------: | :--------: | :-----------: | :---------: | :---: | :---------------------: | | :---: | :-----------------------------------------------------------: | :--------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------: | :------------: | :------------: | :---: | :------------------: | :------------------: | :----: | :---------------------: |
| 01 | 入門 | プログラミング言語と開発ツール入門 | ほとんどのプログラミング言語の背後にある基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学ぶことができます。 | [プログラミング言語と開発ツール入門](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | | 01 | 入門 | プログラミング言語と開発ツール入門 | ほとんどのプログラミング言語の背後にある基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学ぶことができます。 | [プログラミング言語と開発ツール入門](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
| 02 | 入門 | GitHubの基礎、チームでの作業を含む | プロジェクトでの GitHub の使い方、コードベースでの他の人との共同作業の仕方 | [GitHub 入門](/1-getting-started-lessons/2-github-basics/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Floor | | 02 | 入門 | GitHubの基礎、チームでの作業を含む | プロジェクトでの GitHub の使い方、コードベースでの他の人との共同作業の仕方 | [GitHub 入門](/1-getting-started-lessons/2-github-basics/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Floor |
| 03 | 入門 | アクセシビリティ | Web アクセシビリティの基礎を学ぶ | [アクセシビリティの基本](/1-getting-started-lessons/3-accessibility/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Christopher | | 03 | 入門 | アクセシビリティ | Web アクセシビリティの基礎を学ぶ | [アクセシビリティの基本](/1-getting-started-lessons/3-accessibility/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Christopher |

Loading…
Cancel
Save