From 67bde1739ea5b38be242b58ffaeaed5c193565f2 Mon Sep 17 00:00:00 2001 From: Raymond Xu <2rayxu+github@gmail.com> Date: Mon, 1 Feb 2021 21:13:13 -0600 Subject: [PATCH 01/27] Fix typos --- 7-bank-project/4-state-management/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/7-bank-project/4-state-management/README.md b/7-bank-project/4-state-management/README.md index 2901fd06..689335e0 100644 --- a/7-bank-project/4-state-management/README.md +++ b/7-bank-project/4-state-management/README.md @@ -31,7 +31,7 @@ There's 3 issues with the current code: - The state is not persisted, as a browser refresh takes you back to the login page. - There are multiple functions that modify the state. As the app grows, it can make it difficult to track the changes and it's easy to forget updating one. -- The state is not cleaned up, when you click on *Logout* the account data is still there even though you're on the login page. +- The state is not cleaned up, so when you click on *Logout* the account data is still there even though you're on the login page. We could update our code to tackle these issues one by one, but it would create more code duplication and make the app more complex and difficult to maintain. Or we could pause for a few minutes and rethink our strategy. @@ -42,7 +42,7 @@ We could update our code to tackle these issues one by one, but it would create - How to keep the data flows in an app understandable? - How to keep the state data always in sync with the user interface (and vice versa)? -Once you've taken care of these, any other issues you might have may either be fixed already or have become easier to fix. There are many possible approaches for solving these problems, but we'll go with a common solution that consists in **centralizing the data and the ways to change it**. The data flows would go like this: +Once you've taken care of these, any other issues you might have may either be fixed already or have become easier to fix. There are many possible approaches for solving these problems, but we'll go with a common solution that consists of **centralizing the data and the ways to change it**. The data flows would go like this: ![Schema showing the data flows between the HTML, user actions and state](./images/data-flow.png) @@ -82,7 +82,7 @@ This refactoring by itself did not bring much improvements, but the idea was to Now that we have put in place the `state` object to store our data, the next step is centralize the updates. The goal is to make it easier to keep track of any changes and when they happen. -To avoid having changes made to the `state` object it's also a good practice to consider it [*immutable*](https://en.wikipedia.org/wiki/Immutable_object), meaning that it cannot be modified at all. It also means that you have to create a new state object if you want to change anything in it. By doing this, you build a protection about potentially unwanted [side effects](https://en.wikipedia.org/wiki/Side_effect_(computer_science)), and open up possibilities for new features in your app like implementing undo/redo, while also making it easier to debug. For example, you could log every changes made to the state and keep an history of the changes to understand the source of a bug. +To avoid having changes made to the `state` object, it's also a good practice to consider it [*immutable*](https://en.wikipedia.org/wiki/Immutable_object), meaning that it cannot be modified at all. It also means that you have to create a new state object if you want to change anything in it. By doing this, you build a protection about potentially unwanted [side effects](https://en.wikipedia.org/wiki/Side_effect_(computer_science)), and open up possibilities for new features in your app like implementing undo/redo, while also making it easier to debug. For example, you could log every change made to the state and keep a history of the changes to understand the source of a bug. In JavaScript, you can use [`Object.freeze()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) to create an immutable version of an object. If you try to make changes to an immutable object, an exception will be raised. @@ -195,9 +195,9 @@ init(); Here we retrieve the saved data, and if there's any we update the state accordingly. It's important to do this *before* updating the route, as there might be code relying on the state during the page update. -We can also make the *Dashboard* page our application default page, as we are now persisting the account data. If no data is found, the dashboard takes care of redirecting to the *Login* page anyways. In `updateRoute()`, replace the fallback `return navigate('/login');` with `return navigate('dashboard');`. +We can also make the *Dashboard* page our application default page, as we are now persisting the account data. If no data is found, the dashboard takes care of redirecting to the *Login* page anyways. In `updateRoute()`, replace the fallback `return navigate('/login');` with `return navigate('/dashboard');`. -Now login in the app and try refreshing the page, you should stay on the dashboard. With that update we've taken care of all our initial issues... +Now login in the app and try refreshing the page. You should stay on the dashboard. With that update we've taken care of all our initial issues... ## Refresh the data From b3a64cf551788e56f8e434d9ab0bfa4bf66773da Mon Sep 17 00:00:00 2001 From: Roberto Pauletto Date: Tue, 2 Feb 2021 16:46:05 +0100 Subject: [PATCH 02/27] Ch. 6 - main readme plus sub chapters 1, 2, 3 translated --- .../1-introduction/translations/README.it.md | 225 ++++++++++ .../translations/assignment.it.md | 11 + .../translations/README.it.md | 217 ++++++++++ .../translations/assignment.it.md | 11 + .../2-drawing-to-canvas/your-work/app.js | 32 +- .../translations/README.it.md | 389 ++++++++++++++++++ .../translations/assignment.it.md | 11 + 6-space-game/translations/README.it.md | 31 ++ 8 files changed, 911 insertions(+), 16 deletions(-) create mode 100644 6-space-game/1-introduction/translations/README.it.md create mode 100644 6-space-game/1-introduction/translations/assignment.it.md create mode 100644 6-space-game/2-drawing-to-canvas/translations/README.it.md create mode 100644 6-space-game/2-drawing-to-canvas/translations/assignment.it.md create mode 100644 6-space-game/3-moving-elements-around/translations/README.it.md create mode 100644 6-space-game/3-moving-elements-around/translations/assignment.it.md create mode 100644 6-space-game/translations/README.it.md diff --git a/6-space-game/1-introduction/translations/README.it.md b/6-space-game/1-introduction/translations/README.it.md new file mode 100644 index 00000000..4caeabb0 --- /dev/null +++ b/6-space-game/1-introduction/translations/README.it.md @@ -0,0 +1,225 @@ +# Costruire un Gioco Spaziale Parte 1: Introduzione + +![video](../../images/pewpew.gif) + +## Quiz Pre-Lezione + +[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/29) + +### Ereditarietà e Composizione nello sviluppo del gioco + +Nelle lezioni precedenti, non c'era molto bisogno di preoccuparsi dell'architettura di progettazione delle app che sono state create, poiché i progetti erano di portata molto ridotta. Tuttavia, quando le dimensioni e l'ambito delle applicazioni aumentano, le decisioni sull'architettura diventano una preoccupazione maggiore. Esistono due approcci principali per creare applicazioni più grandi in JavaScript: *composizione* o *ereditarietà*. Ci sono pro e contro in entrambi, che verranno spiegiati dall'interno del contesto di un gioco. + +✅ Uno dei libri di programmazione più famosi mai scritti ha a che fare con [i modelli di progettazione](https://it.wikipedia.org/wiki/Design_Patterns). + +In un gioco ci sono `oggetti di gioco` che esistono su uno schermo. Ciò significa che hanno una posizione su un sistema di coordinate cartesiane, caratterizzati dall'avere una coordinata `x` e una `y` . Man mano che si sviluppa un gioco si noterà che tutti gli oggetti di gioco hanno una proprietà standard, comune a ogni gioco che si crea, ovvero elementi che sono: + +- **basati sulla posizione** La maggior parte, se non tutti, gli elementi del gioco sono basati sulla posizione. Ciò significa che hanno una posizione, una `x` e una `y`. +- **mobili** Questi sono oggetti che possono spostarsi in una nuova posizione. Tipicamente un eroe, un mostro o un personaggio non giocante (NPC - Non Player Character), ma non, ad esempio, un oggetto statico come un albero. +- **autodistruggenti** Questi oggetti esistono solo per un determinato periodo di tempo prima che vengano contrassegnati per l'eliminazione. Di solito questo è rappresentato da un booleano `morto` o `distrutto` che segnala al motore di gioco che questo oggetto non dovrebbe più essere renderizzato. +- **raffreddamento** Il "raffreddamento" è una proprietà tipica tra gli oggetti di breve durata. Un classico esempio è un pezzo di testo o un effetto grafico come un'esplosione che dovrebbe essere visto solo per pochi millisecondi. + +✅ Si pensi a un gioco come Pac-Man. Si riescono a identificare i quattro tipi di oggetti sopra elencati in questo gioco? + +### Esprimere il comportamento + +Quanto descritto sopra è il comportamento che possono avere gli oggetti di gioco. Allora come vanno codificati? Si può esprimere questo comportamento tramite metodi associati a classi o oggetti. + +**Classi** + +L'idea è di usare `classi` insieme all'`ereditarietà` per ottenere l'aggiunta di un determinato comportamento a una classe. + +✅ L'ereditarietà è un concetto importante da comprendere. Ulteriori informazioni sull'[articolo di MDN sull'ereditarietà](https://developer.mozilla.org/it/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). + +Espresso tramite codice, un oggetto di gioco può tipicamente avere questo aspetto: + +```javascript + +//Imposta la classe GameObject +class GameObject { + constructor(x, y, type) { + this.x = x; + this.y = y; + this.type = type; + } +} + +//Questa classe estenderà le proprietà di classe di GameObject +class Movable extends GameObject { + constructor(x,y, type) { + super(x,y, type) + } + +//questo oggetto movibile può essere spostato nello schermo + moveTo(x, y) { + this.x = x; + this.y = y; + } +} + +//classe specifica che estende la classe Movable, per poter approfittare di tutte le proprietà che eredita +class Hero extends Movable { + constructor(x,y) { + super(x,y, 'Hero') + } +} + +//questa classe, d'altro canto, eredita solo le proprietà di GameObject +class Tree extends GameObject { + constructor(x,y) { + super(x,y, 'Tree') + } +} + +//un eroe può spostarsi... +const hero = new Hero(); +hero.moveTo(5,5); + +//ma un albero no +const tree = new Tree(); +``` + +✅ Ci si prenda qualche minuto per rivedere un eroe di Pac-Man (Inky, Pinky o Blinky, per esempio) e come sarebbe scritto in JavaScript. + +**Composizione** + +Un modo diverso di gestire l'ereditarietà degli oggetti consiste nell'usare la *composizione*. Con questo sistema gli oggetti esprimono il loro comportamento in questo modo: + +```javascript +//crea una costante gameObject +const gameObject = { + x: 0, + y: 0, + type: '' +}; + +//...e una costante movable +const movable = { + moveTo(x, y) { + this.x = x; + this.y = y; + } +} +//poi la costante movableObject viene composta dalle costanti gameObject e movable +const movableObject = {...gameObject, ...movable}; + +//quindi si scrive una funzione per crear un nuovo eroe che eredita le proprietà di movableObject +function createHero(x, y) { + return { + ...movableObject, + x, + y, + type: 'Hero' + } +} +//...e un oggetto statico che eredita solo le proprietà di gameObject +function createStatic(x, y, type) { + return { + ...gameObject + x, + y, + type + } +} +//crea l'eroe e lo muove +const hero = createHero(10,10); +hero.moveTo(5,5); +//e crea un albero statico immobile +const tree = createStatic(0,0, 'Tree'); +``` + +**Quale modello si dovrebbe usare?** + +Dipende dallo sviluppatore quale modello scegliere. JavaScript supporta entrambi questi paradigmi. + +-- + +Un altro modello comune nello sviluppo di giochi affronta il problema della gestione dell'esperienza utente e delle prestazioni del gioco. + +## Modello pub/sub + +✅ Pub/Sub sta per pubblica/sottoscrivi ('publish-subscribe') + +Questo modello indirizza l'idea che parti disparate della propria applicazione non dovrebbero sapere l'una dell'altra. Perché? Rende molto più facile vedere cosa sta succedendo in generale se le varie parti sono separate. Inoltre, è più facile cambiare improvvisamente un comportamento se necessario. Come si realizza? Si fa stabilendo alcuni concetti: + +- **messaggio**: un messaggio è solitamente una stringa di testo accompagnata da un payload opzionale (un dato che chiarisce di cosa tratta il messaggio). Un messaggio tipico in un gioco può essere `KEY_PRESSED_ENTER`. +- **publisher**: questo elemento *pubblica* un messaggio e lo invia a tutti i sottoscrittori. +- **subscriber**: questo elemento *ascolta* messaggi specifici e svolge alcune attività come risultato della ricezione di questo messaggio, come sparare con un laser. + +L'implementazione è di dimensioni piuttosto ridotte ma è un modello molto potente. Ecco come può essere implementato: + +```javascript +//imposta la classe EventEmitter che contiene i listener +class EventEmitter { + constructor() { + this.listeners = {}; + } +//quando un messaggio viene ricevuto, si fa gestire il suo payload al listener + on(message, listener) { + if (!this.listeners[message]) { + this.listeners[message] = []; + } + this.listeners[message].push(listener); + } +//quando un messaggio viene ricevuto, si invia a un listener con un payload + emit(message, payload = null) { + if (this.listeners[message]) { + this.listeners[message].forEach(l => l(message, payload)) + } + } +} + +``` + +Per utilizzare il codice qui sopra si può creare un'implementazione molto piccola: + +```javascript +//impostazione di una struttura di messaggio +const Messages = { + HERO_MOVE_LEFT: 'HERO_MOVE_LEFT' +}; +//invoca l'eventEmitter impostato sopra +const eventEmitter = new EventEmitter(); +//imposta un eroe +const hero = createHero(0,0); +//fa in modo che eventEmitter sappia come monitorare i messages di pertinenza dell'eroe per spostarsi a sinistra, e agisce di conseguenza +eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { + hero.move(5,0); +}); + +//imposta window per ascoltare un evento keyup, nello specifico se viene premuto freccia sinistra emette un messaggio che fa spostare l'eroe a sinistra +window.addEventListener('keyup', (evt) => { + if (evt.key === 'ArrowLeft') { + eventEmitter.emit(Messages.HERO_MOVE_LEFT) + } +}); +``` + +Sopra si collega un evento della tastiera, `ArrowLeft` e si invia il messaggio `HERO_MOVE_LEFT` (spostamento a sinistra - n.d.t.). Questo messaggio viene recepito e come risultato si sposta l'eroe (`hero`). Il punto di forza di questo modello è che l'event listener e l'eroe non sanno nulla l'uno dell'altro. Si può rimappare `ArrowLeft` sul tasto `A`. Inoltre sarebbe possibile fare qualcosa di completamente diverso su `ArrowLeft` apportando alcune modifiche alla funzione `on` di eventEmitter: + +```javascript +eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { + hero.move(5,0); +}); +``` + +Man mano che le cose diventano più complicate quando il gioco cresce, questo modello rimane lo stesso in termini di complessità e il proprio codice rimane pulito. Si consiglia vivamente di adottare questo modello. + +--- + +## 🚀 Sfida + +Pensare a come il modello pub/sub può migliorare un gioco. Quali parti dovrebbero emettere eventi e come dovrebbe reagire a questi il gioco? Ora si ha la possibilità di essere creativi, pensando a un nuovo gioco e a come potrebbero comportarsi le sue parti. + +## Quiz Post-Lezione + +[ +Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/30) + +## Revisione e Auto Apprendimento + +Saperne di più su Pub/Sub [leggendo qui](https://docs.microsoft.com/it-it/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-4621-cxa). + +## Compito + +[Produrre uno schizzo di un gioco](assignment.it.md) diff --git a/6-space-game/1-introduction/translations/assignment.it.md b/6-space-game/1-introduction/translations/assignment.it.md new file mode 100644 index 00000000..d58cc438 --- /dev/null +++ b/6-space-game/1-introduction/translations/assignment.it.md @@ -0,0 +1,11 @@ +# Produrre uno schizzo di un gioco + +## Istruzioni + +Utilizzando gli esempi di codice nella lezione, scrivere una rappresentazione di un gioco che piace. Dovrà essere un gioco semplice, ma l'obiettivo è usare la classe o il modello di composizione e il modello pub/sub per mostrare come potrebbe essere avviato un gioco. Si dia sfogo alla propria creatività! + +## Rubrica + +| Criteri | Ottimo | Adeguato | Necessita miglioramento | +| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- | +| | Tre elementi vengono posizionati sullo schermo e manipolati | Due elementi vengono posizionati sullo schermo e manipolati | Un elemento viene posizionato sullo schermo e manipolato | \ No newline at end of file diff --git a/6-space-game/2-drawing-to-canvas/translations/README.it.md b/6-space-game/2-drawing-to-canvas/translations/README.it.md new file mode 100644 index 00000000..e819db12 --- /dev/null +++ b/6-space-game/2-drawing-to-canvas/translations/README.it.md @@ -0,0 +1,217 @@ +# Costruire un Gioco Spaziale Parte 2: Disegnare Eroi e Mostri sull'elemento Canvas + +## Quiz Pre-Lezione + +[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/31) + +## Canvas + +Canvas è un elemento HTML che per impostazione predefinita non ha contenuto; è una lavagna vuota. Si può riempirla disegnandoci sopra. + +✅ [Ulteriori informazioni sull'API Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) su MDN. + +Ecco come viene tipicamente dichiarato, come parte dell'elemento body della pagina: + +```html + +``` + +Sopra si è impostato l'`id`entificativo, la larghezza `(width)` e l'altezza (`height`). + +- `id`: va impostato in modo da poter ottenere un riferimento quando si deve interagire con l'elemento. +- `width`: questa è la larghezza dell'elemento. +- `height`: questa è l'altezza dell'elemento. + +## Disegnare una geometria semplice + +Canvas utilizza un sistema di coordinate cartesiane per disegnare le cose. Quindi utilizza un asse x e un asse y per esprimere dove si trova qualcosa. La posizione `0,0` è la posizione in alto a sinistra e quella in basso a destra è ciò che si è determinato come larghezza (WIDTH) e altezza (HEIGHT) del canvas + +![la griglia del canvas](../canvas_grid.png) +> Immagine da [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) + +Per disegnare sull'elemento canvas si dovranno eseguire i seguenti passaggi: + +1. **Ottenere un riferimento** all'elemento Canvas. +1. **Ottenere un riferimento** all'elemento Context che si trova sull'elemento canvas. +1. **Eseguire un'operazione di disegno** utilizzando l'elemento context. + +Il codice per i passaggi precedenti di solito ha questo aspetto: + +```javascript +// disegna un rettangolo rosso +//1. ottiene il riferimento per il canvas +canvas = document.getElementById("myCanvas"); + +//2. ottiene l'oggetto context per disegnare forme basiche in 2D +ctx = canvas.getContext("2d"); + +//3. lo riempie con il colore rosso +ctx.fillStyle = 'red'; + +//4. e disegna un rettangolo con questi parametri, impostando posizione e dimensione +ctx.fillRect(0,0, 200, 200) // x,y,larghezza, altezza +``` + +✅ L'API Canvas si concentra principalmente su forme 2D, ma si possono anche disegnare elementi 3D su un sito web; per questo, si potrebbe utilizzare l' [API WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API). + +Si può disegnare ogni sorta di cose con l'API Canvas come: + +- **Forme geometriche**, è già stato mostrato come disegnare un rettangolo, ma c'è molto di più che si può disegnare. +- **Testo**, si può disegnare un testo con qualsiasi carattere e colore si desideri. +- **Immagini**, si puòdisegnare un'immagine basandosi su una risorsa immagine come .jpg o .png, ad esempio. + +Si faccia una prova! Si sa come disegnare un rettangolo, si può disegnare un cerchio su una pagina? Si dia un'occhiata ad alcuni interessanti disegni su canvas su CodePen. Ecco un [esempio particolarmente degno di nota](https://codepen.io/dissimulate/pen/KrAwx). + +## Caricare e disegnare una risorsa immagine + +Si carica una risorsa immagine creando un oggetto `Image` e impostando la sua proprietà `src` . Quindi ci si mette in ascolto per l'evento di caricamento (`load`) per sapere quando è pronto per essere utilizzato. Il codice si presenta cosí: + +### Caricamento risorsa + +```javascript +const img = new Image(); +img.src = 'path/to/my/image.png'; +img.onload = () => { + // immagine caricata e pronta all'uso +} +``` + +### Modello di Caricamento Risorsa + +Si consiglia di racchiudere quanto sopra in un costrutto come questo, così è più facile da usare e si tenta di manipolarlo solo quando è completamente caricato: + +```javascript +function loadAsset(path) { + return new Promise((resolve) => { + const img = new Image(); + img.src = path; + img.onload = () => { + // immagine caricata e pronta all'uso + resolve(img); + } + }) +} + +// usarlo in questo modo + +async function run() { + const heroImg = await loadAsset('hero.png') + const monsterImg = await loadAsset('monster.png') +} + +``` + +Per disegnare risorse di gioco su uno schermo, il codice sarà simile a questo: + +```javascript +async function run() { + const heroImg = await loadAsset('hero.png') + const monsterImg = await loadAsset('monster.png') + + canvas = document.getElementById("myCanvas"); + ctx = canvas.getContext("2d"); + ctx.drawImage(heroImg, canvas.width/2,canvas.height/2); + ctx.drawImage(monsterImg, 0,0); +} +``` + +## Ora è il momento di iniziare a costruire il gioco + +### Cosa costruire + +Si costruirà una pagina web con un elemento Canvas. Si dovrebbe rendere uno schermo nero `1024 * 768`. Sono state fornite due immagini: + +- Astronave dell'eroe + + ![Nave dell'eroe](../solution/assets/player.png) + +- Mostro 5*5 + + ![Nave del mostro](../solution/assets/enemyShip.png) + +### Passaggi consigliati per iniziare lo sviluppo + +Individuare i file che già sono stati creati nella sottocartella `your-work` della cartella di lavoro Dovrebbe contenere le seguenti informazioni: + +```bash +-| assets + -| enemyShip.png + -| player.png +-| index.html +-| app.js +-| package.json +``` + +Aprire una copia di questa cartella in Visual Studio Code. È necessario disporre di una configurazione di ambiente di sviluppo locale, preferibilmente con Visual Studio Code con NPM e Node installati. Se non si è impostato `npm` sul proprio computer, [ecco come farlo](https://www.npmjs.com/get-npm). + +Inizializzare il proprio progetto accedendo alla cartella `your_work` : + +```bash +cd your-work +npm start +``` + +Quanto sopra avvierà un server HTTP sull'indirizzo `http://localhost:5000`. Aprire un browser e inserire quell'indirizzo. Al momento è una pagina vuota, ma cambierà + +> Nota: per vedere le modifiche sullo schermo, aggiornare il contenuto del browser. + +### Aggiungere codice + +Aggiungi il codice necessario al file `your-work/app.js` per risolvere quanto segue + +1. **Disegnare** un oggetto canvas con sfondo nero + > suggerimento: aggiungere due righe sotto il TODO appropriato in `/app.js`, impostando l'elemento `ctx` in modo che sia nero e le coordinate alto/sinistra a 0,0 e l'altezza e la larghezza uguali a quelle del canvas. +2. **Caricare** le strutture di gioco + > suggerimento: aggiungere le immagini del giocatore e del nemico usando `await loadTexture`, passando il percorso dell'immagine. Non saranno ancora visibili sullo schermo! +3. **Disegnare** l'eroe al centro dello schermo nella metà inferiore + > suggerimento: usare l'API `drawImage` per disegnare `heroImg` sullo schermo, impostando `canvas.width / 2 - 45` e `canvas.height - canvas.height / 4` come valori di coordinate x, y +4. **Disegnare** mostri 5*5 + > suggerimento: ora si può rimuovere il commento dal codice per disegnare i nemici sullo schermo. Successivamente, passare alla funzione `createEnemies` e crearla. + + Per prima cosa, impostare alcune costanti: + + ```javascript + const MONSTER_TOTAL = 5; + const MONSTER_WIDTH = MONSTER_TOTAL * 98; + const START_X = (canvas.width - MONSTER_WIDTH) / 2; + const STOP_X = START_X + MONSTER_WIDTH; + ``` + + quindi, creare un ciclo per disegnare l'array di mostri sullo schermo: + + ```javascript + for (let x = START_X; x < STOP_X; x += 98) { + for (let y = 0; y < 50 * 5; y += 50) { + ctx.drawImage(enemyImg, x, y); + } + } + ``` + +## Risultato + +Il risultato finale dovrebbe essere così: + +![Schermo nero con un eroe e mostri 5*5](../partI-solution.png) + +## Soluzione + +Per favore provare a risolverlo da soli, ma se si rimane bloccati, dare un'occhiata alla [soluzione](../solution/app.js) + +--- + +## 🚀 Sfida + +Si è imparato a disegnare con l'API Canvas incentrata sul 2D; dare un'occhiata all['API WebGL API](https://developer.mozilla.org/it/docs/Web/API/WebGL_API) e provare a disegnare un oggetto 3D. + +## Quiz Post-Lezione + +[ +Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/32) + +## Revisione e Auto Apprendimento + +Scoprire di più sull'API Canvas raccogliendo [informazioni su di essa](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API). + +## Compito + +[Giocare con l'API Canvas](assignment.it.md) \ No newline at end of file diff --git a/6-space-game/2-drawing-to-canvas/translations/assignment.it.md b/6-space-game/2-drawing-to-canvas/translations/assignment.it.md new file mode 100644 index 00000000..47dc1657 --- /dev/null +++ b/6-space-game/2-drawing-to-canvas/translations/assignment.it.md @@ -0,0 +1,11 @@ +# Giocare con l'API Canvas + +## Istruzioni + +Sceglire un elemento dell'API Canvas e creare qualcosa di interessante attorno ad esso. Si è in grado di creare una piccola galassia di stelle ripetute? Si riesce a creare una interessante struttura di linee colorate? Si puoi guardare CodePen per l'ispirazione (ma non copiare) + +## Rubrica + +| Criteri | Ottimo | Adeguato | Necessita miglioramento | +| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- | +| | Il codice viene inviato mostrando una struttura o una forma interessante | Il codice viene inviato, ma non viene eseguito | Il codice non è stato inviato | \ No newline at end of file diff --git a/6-space-game/2-drawing-to-canvas/your-work/app.js b/6-space-game/2-drawing-to-canvas/your-work/app.js index eb80d910..2eca878d 100644 --- a/6-space-game/2-drawing-to-canvas/your-work/app.js +++ b/6-space-game/2-drawing-to-canvas/your-work/app.js @@ -1,24 +1,24 @@ function loadTexture(path) { - return new Promise((resolve) => { - const img = new Image(); - img.src = path; - img.onload = () => { - resolve(img); - }; - }); + return new Promise((resolve) => { + const img = new Image() + img.src = path + img.onload = () => { + resolve(img) + } + }) } function createEnemies(ctx, canvas, enemyImg) { - // TODO draw enemies + // TODO disegnare i nemici } window.onload = async () => { - canvas = document.getElementById('canvas'); - ctx = canvas.getContext('2d'); - // TODO load textures + canvas = document.getElementById('canvas') + ctx = canvas.getContext('2d') + // TODO 2 - caricare le strutture di gioco - // TODO draw black background - // TODO draw hero - // TODO uncomment the next line when you add enemies to screen - //createEnemies(ctx, canvas, enemyImg); -}; + // TODO 1 - disegnare lo sfondo nero + // TODO 3 - disegnare l'eroe + // TODO 4 - togliere il commento dalla riga successiva quando si aggiungono nemici sullo schermo + //createEnemies(ctx, canvas, enemyImg); +} diff --git a/6-space-game/3-moving-elements-around/translations/README.it.md b/6-space-game/3-moving-elements-around/translations/README.it.md new file mode 100644 index 00000000..dda320dc --- /dev/null +++ b/6-space-game/3-moving-elements-around/translations/README.it.md @@ -0,0 +1,389 @@ +# Costruire un Gioco Spaziale parte 3: Aggiungere il Movimento + +## Quiz Pre-Lezione + +[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/33) + +I giochi non sono molto divertenti finché non si hanno alieni che scorazzano per lo schermo! In questo gioco, si utilizzeranno due tipi di movimenti: + +- **Movimento tastiera/mouse**: quando l'utente interagisce con la tastiera o il mouse per spostare un oggetto sullo schermo. +- **Movimento indotto dal gioco**: quando il gioco sposta un oggetto con un certo intervallo di tempo. + +Quindi come si spostano le cose su uno schermo? Dipende tutto dalle coordinate cartesiane: si cambia la posizione (x, y) di un oggetto, poi si ridisegna lo schermo. + +In genere sono necessari i seguenti passaggi per eseguire il *movimento* su uno schermo: + +1. **Impostare una nuova posizione** per un oggetto; questo è necessario per percepire l'oggetto come se si fosse spostato. +2. **Cancellare lo schermo, lo** schermo deve essere cancellato tra un disegno e un altro. Si può cancellarlo disegnando un rettangolo che viene riempito con un colore di sfondo. +3. **Ridisegnare l'oggetto** in una nuova posizione. In questo modo si può finalmente spostare l'oggetto da una posizione all'altra. + +Ecco come può apparire nel codice: + +```javascript +//imposta la posizione dell'eroe +hero.x += 5; +// pulisce il rettangolo che ospita l'eroe +ctx.clearRect(0, 0, canvas.width, canvas.height); +// ridisegna lo sfondo del gioco e l'eroe +ctx.fillRect(0, 0, canvas.width, canvas.height) +ctx.fillStyle = "black"; +ctx.drawImage(heroImg, hero.x, hero.y); +``` + +✅ Si riesce a pensare a un motivo per cui ridisegnare il proprio eroe con molti fotogrammi al secondo potrebbe far aumentare i costi delle prestazioni? Leggere le [alternative a questo modello](https://www.html5rocks.com/en/tutorials/canvas/performance/). + +## Gestire eventi da tastiera + +Gli eventi si gestiscono allegando eventi specifici al codice. Gli eventi della tastiera vengono attivati sull'intera finestra mentre gli eventi del mouse come un `clic` possono essere collegati al clic su un elemento specifico. Si useranno gli eventi della tastiera durante questo progetto. + +Per gestire un evento è necessario utilizzare il metodo `addEventListener()` dell'oggetto window e fornirgli due parametri di input. Il primo parametro è il nome dell'evento, ad esempio `keyup`. Il secondo parametro è la funzione che dovrebbe essere invocata come risultato dell'evento in corso. + +Ecco un esempio: + +```javascript +window.addEventListener('keyup', (evt) => { + // `evt.key` = rappresentazione stringa del tasto + if (evt.key === 'ArrowUp') { + // fa qualcosa + } +}) +``` + +Per gli eventi da tastiera ci sono due proprietà sull'evento che si possono usare usare per vedere quale tasto è stato premuto: + +- `key`, questa è una rappresentazione di stringa del tasto premuto, ad esempio `ArrowUp` +- `keyCode`, questa è una rappresentazione numerica, ad esempio `37`, corrisponde a `ArrowLeft`. + +✅ La manipolazione degli eventi da tastiera è utile al di fuori dello sviluppo del gioco. Quali altri usi possono venire in mente per questa tecnica? + +### Tasti speciali: un avvertimento + +Ci sono alcuni tasti *speciali* che influenzano la finestra. Ciò significa che se si sta ascoltando un evento `keyup` e si usano questi tasti speciali per muovere l'eroe, verrà eseguito anche lo scorrimento orizzontale. Per questo motivo si potrebbe voler *disattivare* questo comportamento del browser integrato mentre si sviluppa il gioco. Serve un codice come questo: + +```javascript +let onKeyDown = function (e) { + console.log(e.keyCode); + switch (e.keyCode) { + case 37: + case 39: + case 38: + case 40: // Tasti freccia + case 32: + e.preventDefault(); + break; // Barra spazio + default: + break; // non bloccare altri tasti + } +}; + +window.addEventListener('keydown', onKeyDown); +``` + +Il codice precedente assicurerà che i tasti freccia e la barra spaziatrice abbiano il loro comportamento *predefinito* disattivato. Il meccanismo *di disattivazione* si verifica quando si chiama `e.preventDefault()`. + +## Movimento indotto dal gioco + +E' possibile far muovere le cose da sole utilizzando timer come la funzione `setTimeout()` o `setInterval()` che aggiornano la posizione dell'oggetto a ogni tick o intervallo di tempo. Ecco come può apparire: + +```javascript +let id = setInterval(() => { + //sposta il nemico sull'asse y + enemy.y += 10; +}) +``` + +## Il ciclo di gioco + +Il ciclo di gioco è un concetto che è essenzialmente una funzione che viene invocata a intervalli regolari. Si chiama ciclo di gioco poiché tutto ciò che dovrebbe essere visibile all'utente viene disegnato nel ciclo. Il ciclo di gioco utilizza tutti gli oggetti che fanno parte del gioco, disegnandoli tutti a meno che per qualche motivo non debbano più far parte del gioco. Ad esempio, se un oggetto è un nemico che è stato colpito da un laser ed esplode, non fa più parte del ciclo di gioco corrente (maggiori informazioni nelle lezioni successive). + +Ecco come può apparire tipicamente un ciclo di gioco, espresso in codice: + +```javascript +let gameLoopId = setInterval(() => + function gameLoop() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = "black"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + drawHero(); + drawEnemies(); + drawStaticObjects(); +}, 200); +``` + +Il ciclo precedente viene richiamato ogni `200` millisecondi per ridisegnare il canvas. Si ha la possibilità di scegliere l'intervallo migliore che abbia senso per il proprio gioco. + +## Continuare il Gioco Spaziale + +Si prenderà il codice esistente per estenderlo. Si inizia con il codice che si è completato durante la parte I o si usa il codice nella [parte II-starter](../your-work). + +- **Muovere l'eroe**: si aggiungerà un codice per assicurarsi di poter muovere l'eroe usando i tasti freccia. +- **Muovere i nemici**: si dovrà anche aggiungere del codice per assicurarsi che i nemici si muovano dall'alto verso il basso a una determinata velocità. + +## Passaggi consigliati + +Individuare i file che già sono stati creati nella sottocartella `your-work` Dovrebbe contenere quanto segue: + +```bash +-| assets + -| enemyShip.png + -| player.png +-| index.html +-| app.js +-| package.json +``` + +Si fa partire il progetto nella cartella `your_work` digitando: + +```bash +cd your-work +npm start +``` + +Quanto sopra avvierà un server HTTP all'indirizzo `http://localhost:5000`. Aprire un browser e inserire quell'indirizzo, in questo momento dovrebbe rendere l'eroe e tutti i nemici; niente si muove - ancora! + +### Aggiungere codice + +1. **Aggiungere oggetti dedicati** per `eroe`, `nemico` e `oggetto di gioco`, dovrebbero avere proprietà `x` e `y` . (Ricorda la parte su [ereditarietà o composizione](../../1-introduction/translations/README.it.md). + + *SUGGERIMENTO* l'`oggetto di gioco` (GameObject) dovrebbe essere quello con `x` e `y` e la capacità di disegnare se stesso sul canvas. + + > suggerimento: iniziare aggiungendo una nuova classe GameObject con il suo costruttore delineato come di seguito, quindi disegnarlo sul canvas: + + ```javascript + + class GameObject { + constructor(x, y) { + this.x = x; + this.y = y; + this.dead = false; + this.type = ""; + this.width = 0; + this.height = 0; + this.img = undefined; + } + + draw(ctx) { + ctx.drawImage(this.img, this.x, this.y, this.width, this.height); + } + } + ``` + + Ora, si estende questo GameObject per creare eroe (classe Hero) e nemico (clsse Enemy). + + ```javascript + class Hero extends GameObject { + constructor(x, y) { + ...servono x, y, tipo, e velocità + } + } + ``` + + ```javascript + class Enemy extends GameObject { + constructor(x, y) { + super(x, y); + (this.width = 98), (this.height = 50); + this.type = "Enemy"; + let id = setInterval(() => { + if (this.y < canvas.height - this.height) { + this.y += 5; + } else { + console.log('Stopped at', this.y) + clearInterval(id); + } + }, 300) + } + } + ``` + +2. **Aggiungere gestori di eventi di tastiera** per gestire la navigazione con i tasti (spostare l'eroe su/giù, sinistra/destra) + + *RICORDARE* che è un sistema cartesiano, la posizione in alto a sinistra è `0,0`. Ricordare anche di aggiungere il codice per interrompere *il comportamento predefinito* + + > suggerimento: creare la funzione onKeyDown e attaccarla all'oggetto window: + + ```javascript + let onKeyDown = function (e) { + console.log(e.keyCode); + ...aggiungere il codice dalla lezione più sopra per fermare il comportamento predefinito + } + }; + + window.addEventListener("keydown", onKeyDown); + ``` + + Controllare la console del browser a questo punto e osservare le sequenze di tasti che vengono registrate. + +3. **Implementare** il [modello Pub/Sub](../../1-introduction/translations/README.it.md), questo manterrà il codice pulito mentre si seguono le parti rimanenti. + + Per fare quest'ultima parte, si può: + + 1. **Aggiungere un event listener** all'oggetto window: + + ```javascript + window.addEventListener("keyup", (evt) => { + if (evt.key === "ArrowUp") { + eventEmitter.emit(Messages.KEY_EVENT_UP); + } else if (evt.key === "ArrowDown") { + eventEmitter.emit(Messages.KEY_EVENT_DOWN); + } else if (evt.key === "ArrowLeft") { + eventEmitter.emit(Messages.KEY_EVENT_LEFT); + } else if (evt.key === "ArrowRight") { + eventEmitter.emit(Messages.KEY_EVENT_RIGHT); + } + }); + ``` + + 1. **Creare una classe EventEmitter** per pubblicare e sottoscrivere i messaggi: + + ```javascript + class EventEmitter { + constructor() { + this.listeners = {}; + } + + on(message, listener) { + if (!this.listeners[message]) { + this.listeners[message] = []; + } + this.listeners[message].push(listener); + } + + emit(message, payload = null) { + if (this.listeners[message]) { + this.listeners[message].forEach((l) => l(message, payload)); + } + } + } + ``` + + 1. **Aggiungere costanti** e impostare EventEmitter: + + ```javascript + const Messages = { + KEY_EVENT_UP: "KEY_EVENT_UP", + KEY_EVENT_DOWN: "KEY_EVENT_DOWN", + KEY_EVENT_LEFT: "KEY_EVENT_LEFT", + KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT", + }; + + let heroImg, + enemyImg, + laserImg, + canvas, ctx, + gameObjects = [], + hero, + eventEmitter = new EventEmitter(); + ``` + + 1. **Inizializzare il gioco** + + ```javascript + function initGame() { + gameObjects = []; + createEnemies(); + createHero(); + + eventEmitter.on(Messages.KEY_EVENT_UP, () => { + hero.y -=5 ; + }) + + eventEmitter.on(Messages.KEY_EVENT_DOWN, () => { + hero.y += 5; + }); + + eventEmitter.on(Messages.KEY_EVENT_LEFT, () => { + hero.x -= 5; + }); + + eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => { + hero.x += 5; + }); + } + ``` + +1. **Impostare il ciclo di gioco** + + Rifattorizzare la funzione window.onload per inizializzare il gioco e impostare un ciclo di gioco su un buon intervallo. Aggiungere anche un raggio laser: + + ```javascript + window.onload = async () => { + canvas = document.getElementById("canvas"); + ctx = canvas.getContext("2d"); + heroImg = await loadTexture("assets/player.png"); + enemyImg = await loadTexture("assets/enemyShip.png"); + laserImg = await loadTexture("assets/laserRed.png"); + + initGame(); + let gameLoopId = setInterval(() => { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = "black"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + drawGameObjects(ctx); + }, 100) + + }; + ``` + +5. **Aggiungere il codice** per spostare i nemici a un certo intervallo + + Rifattorizzare la funzione `createEnemies()` per creare i nemici e inserirli nella nuova classe gameObjects: + + ```javascript + function createEnemies() { + const MONSTER_TOTAL = 5; + const MONSTER_WIDTH = MONSTER_TOTAL * 98; + const START_X = (canvas.width - MONSTER_WIDTH) / 2; + const STOP_X = START_X + MONSTER_WIDTH; + + for (let x = START_X; x < STOP_X; x += 98) { + for (let y = 0; y < 50 * 5; y += 50) { + const enemy = new Enemy(x, y); + enemy.img = enemyImg; + gameObjects.push(enemy); + } + } + } + ``` + + e aggiungere una `funzione createHero()` per eseguire un processo simile per l'eroe. + + ```javascript + function createHero() { + hero = new Hero( + canvas.width / 2 - 45, + canvas.height - canvas.height / 4 + ); + hero.img = heroImg; + gameObjects.push(hero); + } + ``` + + infine, aggiungere una funzione `drawGameObjects()` per avviare il disegno: + + ```javascript + function drawGameObjects(ctx) { + gameObjects.forEach(go => go.draw(ctx)); + } + ``` + + I nemici dovrebbero iniziare ad avanzare verso l'astronave dell'eroe! + +--- + +## 🚀 Sfida + +Come si può vedere, il proprio codice può trasformarsi in ["spaghetti code"](https://it.wikipedia.org/wiki/Spaghetti_code) quando si inizia ad aggiungere funzioni, variabili e classi. Come si puo organizzare meglio il codice in modo che sia più leggibile? Disegnare un sistema per organizzare il proprio codice, anche se risiede ancora in un file. + +## Quiz Post-Lezione + +[ +Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/34) + +## Revisione e Auto Apprendimento + +Mentre questo gioco viene scritto senza utilizzare infrastutture Javascript (framework), ci sono molti framework canvas basati su JavaScript per lo sviluppo di giochi. Ci si prenda un po' di tempo per [leggere qualcosa su questi](https://github.com/collections/javascript-game-engines). + +## Compito + +[Commentare il proprio codice](assignment.it.md) diff --git a/6-space-game/3-moving-elements-around/translations/assignment.it.md b/6-space-game/3-moving-elements-around/translations/assignment.it.md new file mode 100644 index 00000000..c02ddf2d --- /dev/null +++ b/6-space-game/3-moving-elements-around/translations/assignment.it.md @@ -0,0 +1,11 @@ +# Commentare il proprio codice + +## Istruzioni + +Eseminare il file /app.js corrente nella cartella del gioco e trovare i modi per commentarlo e riordinarlo. È molto facile che il codice sfugga al controllo e ora è una buona occasione per aggiungere commenti per assicurarsi di avere codice leggibile in modo da poterlo utilizzare in seguito. + +## Rubrica + +| Criteri | Ottimo | Adeguato | Necessita miglioramento | +| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- | +| | Il codice in `app.js` è completamente commentato e organizzato in blocchi logici | Il codice in `app.js` è adeguatamente commentato | Il codice in `app.js` è in qualche modo disorganizzato e manca di buoni commenti | \ No newline at end of file diff --git a/6-space-game/translations/README.it.md b/6-space-game/translations/README.it.md new file mode 100644 index 00000000..69b7e550 --- /dev/null +++ b/6-space-game/translations/README.it.md @@ -0,0 +1,31 @@ +# Costruire un Gioco Spaziale + +Un gioco spaziale per insegnare fondamenti di JavaScript più avanzati + +In questa lezione si imparerà come costruire un gioco spaziale. Se mai si è giocato a "Space Invaders", questo gioco ha la stessa idea: guidare un'astronave e sparare sui mostri che scendono dall'alto. Ecco come apparirà il gioco finito: + +![Gioco completato](../images/pewpew.gif) + +In queste sei lezioni si imparerà quanto segue: + +- **Interagire** con l'elemento Canvas per disegnare oggetti su uno schermo +- **Comprendere** il sistema di coordinate cartesiane +- **Imparare** il modello Pub-Sub per creare una solida architettura di gioco più facile da mantenere ed estendere +- **Sfruttare** Async/Await per caricare le risorse di gioco +- **Gestire** gli eventi da tastiera + +## Panoramica + +- Teoria + - [Introduzione alla creazione di giochi con JavaScript](1-introduction/translations/README.it.md) +- Esercitazione + - [Disegnare sull'elemento canvas](2-drawing-to-canvas/translations/README.it.md) + - [Spostamento di elementi sullo schermo](3-moving-elements-around/translations/README.it.md) + - [Rilevamento della collisione.](4-collision-detection/translations/README.it.md) + - [Tenere il punteggio](5-keeping-score/translations/README.it.md) + - [Terminare e riavviare il gioco](6-end-condition/translations/README.it.md) + +## Crediti + +Le risorse utilizzate provengono da https://www.kenney.nl/. +Se interessa costruire giochi, queste sono alcune risorse davvero buone, molte sono gratuite e alcune sono a pagamento. From 4d8441886e571af94bb5303e49b4e207d537afa1 Mon Sep 17 00:00:00 2001 From: Roberto Pauletto Date: Thu, 4 Feb 2021 11:06:08 +0100 Subject: [PATCH 03/27] Chapter 6 - Part 4 translated --- .../translations/README.it.md | 298 ++++++++++++++++++ .../translations/assignment.it.md | 11 + 2 files changed, 309 insertions(+) create mode 100644 6-space-game/4-collision-detection/translations/README.it.md create mode 100644 6-space-game/4-collision-detection/translations/assignment.it.md diff --git a/6-space-game/4-collision-detection/translations/README.it.md b/6-space-game/4-collision-detection/translations/README.it.md new file mode 100644 index 00000000..dd37d9c0 --- /dev/null +++ b/6-space-game/4-collision-detection/translations/README.it.md @@ -0,0 +1,298 @@ +# Costruire un Gioco Spaziale Parte 4: Aggiungere un Laser e Rilevare le Collisioni + +## Quiz Pre-Lezione + +[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/35) + +In questa lezione si imparererà come fare fuoco con i laser con JavaScript! Verranno aggiunte due cose al gioco: + +- **Un laser**: questo laser viene sparato dall'astronave del proprio eroe e verticalmente verso l'alto +- **Rilevamento delle collisioni**, come parte dell'implementazione della capacità di *sparare* , si aggiungeranno anche alcune simpatiche regole di gioco: + - Il **laser colpisce il nemico**: il nemico muore se colpito da un laser + - Il **laser raggiunge lo schermo superiore**: un laser viene distrutto se raggiunge la parte superiore dello schermo + - **Collisione tra nemico ed eroe**: un nemico e l'eroe vengono distrutti se entrano in collisione + - Il **nemico raggiunge la parte inferiore dello schermo**: un nemico e un eroe vengono distrutti se il nemico raggiunge la parte inferiore dello schermo + +In breve, il giocatore - *l'eroe* - deve colpire tutti i nemici con un laser prima che riescano a raggiungere la parte inferiore dello schermo. + +✅ Fare una piccola ricerca sul primissimo gioco per computer mai scritto. Qual era la sua funzionalità? + +Diventiamo eroici insieme! + +## Rilevamento della collisione. + +Come si rilevano le collisioni? Occorre pensare agli oggetti di gioco come rettangoli che si muovono. Perché, ci si potrebbe chiedere? Bene, l'immagine usata per disegnare un oggetto di gioco è un rettangolo: ha una `x`, una `y`, una larghezza (`width`) e un'altezza (`height`). + +Se due rettangoli, cioè un eroe e un nemico *si intersecano*, si verifica una collisione. Ciò che dovrebbe accadere dipende dalle regole del gioco. Per implementare il rilevamento delle collisioni è quindi necessario quanto segue: + +1. Un modo per ottenere una rappresentazione rettangolare di un oggetto di gioco, qualcosa del genere: + + ```javascript + rectFromGameObject() { + return { + top: this.y, + left: this.x, + bottom: this.y + this.height, + right: this.x + this.width + } + } + ``` + +2. Una funzione di confronto, questa funzione può assomigliare a questa: + + ```javascript + function intersectRect(r1, r2) { + return !(r2.left > r1.right || + r2.right < r1.left || + r2.top > r1.bottom || + r2.bottom < r1.top); + } + ``` + +## Come si distruggono le cose + +Per distruggere le cose in un gioco si deve far sapere al gioco stesso che non dovrebbe più disegnare un certo oggetto nel ciclo di gioco che si attiva in un certo intervallo. Un modo per farlo è contrassegnare un oggetto del gioco come *morto* quando succede qualcosa, in questo modo: + +```javascript +// si è verificata una collisione +enemy.dead = true +``` + +Quindi si procede a filtrare gli oggetti *morti* prima di ridipingere lo schermo, in questo modo: + +```javascript +gameObjects = gameObject.filter(go => !go.dead); +``` + +## Come si spara un laser + +Sparare un laser si traduce nel rispondere a un evento da tastiera e creare un oggetto che si muove in una certa direzione. Occorre quindi eseguire i seguenti passaggi: + +1. **Creare un oggetto laser**: dalla cima dell' astronave dell'eroe, che al momento della creazione inizia a muoversi in alto verso la parte superiore dello schermo. +2. **Allegare codice a un evento da tastiera**: si deve scegliere un tasto sulla tastiera che rappresenti il giocatore che spara il laser. +3. **Creare un oggetto di gioco che assomigli a un laser** quando viene premuto il tasto. + +## Raffreddamento del laser + +Il laser deve attivarsi ogni volta che si preme un tasto, come ad esempio la *barra spazio*. Per evitare che il gioco produca troppi laser in breve tempo, si deve risolvere questo problema. La soluzione è implementando un cosiddetto raffreddamento (*cooldown*), un timer, che garantisce che un laser possa essere sparato solo a intervallo determinato. Su può implementare nel modo seguente: + +```javascript +class Cooldown { + constructor(time) { + this.cool = false; + setTimeout(() => { + this.cool = true; + }, time) + } +} + +class Weapon { + constructor { + } + fire() { + if (!this.cooldown || this.cooldown.cool) { + // produce un laser + this.cooldown = new Cooldown(500); + } else { + // non fa nulla - non si è ancora raffreddato + } + } +} +``` + +✅ Fare riferimento alla lezione 1 della serie gioco spaziale per quanto riguarda i tempi di *cooldown* (raffreddamento). + +## Cosa costruire + +Si prende il codice esistente (che dovrebbe essere stato ripulito e rifattorizzato) dalla lezione precedente e lo si estende Si inizia con il codice della parte II o si usa il codice [della parte III-starter](../your-work). + +> suggerimento: il laser con cui lavorare è già nella cartella asset ed è referenziato nel proprio codice + +- **Aggiungere il rilevamento delle collisioni**, quando un laser entra in collisione con qualcosa dovrebbero essere applicate le seguenti regole: + 1. Il **laser colpisce il nemico**: il nemico muore se colpito da un laser + 2. Il **laser raggiunge lo schermo superiore**: un laser viene distrutto se raggiunge la parte superiore dello schermo + 3. **Collisione tra nemico ed eroe**: un nemico e l'eroe vengono distrutti se entrano in collisione + 4. Il **nemico colpisce la parte inferiore dello schermo**: un nemico e un eroe vengono distrutti se il nemico raggiunge la parte inferiore dello schermo + +## Passaggi consigliati + +Individuare i file che già sono stati creati nella sottocartella `your-work`. Dovrebbe contenere quanto segue: + +```bash +-| assets + -| enemyShip.png + -| player.png + -| laserRed.png +-| index.html +-| app.js +-| package.json +``` + +Si fa partire il progetto nella cartella `your_work` digitando: + +```bash +cd your-work +npm start +``` + +Quanto sopra avvierà un server HTTP sull'indirizzo `http://localhost:5000`. Aprire un browser e inserire quell'indirizzo, in questo momento dovrebbe rendere l'eroe e tutti i nemici. + +### Aggiungere codice + +1. **Impostare una rappresentazione di un rettangolo di un oggetto di gioco, per gestire la collisione**. Il codice seguente consente di ottenere una rappresentazione di un rettangolo di un `GameObject`. Modificare la classe GameObject per estenderla: + + ```javascript + rectFromGameObject() { + return { + top: this.y, + left: this.x, + bottom: this.y + this.height, + right: this.x + this.width, + }; + } + ``` + +2. **Aggiungere il codice che controlla la collisione** Questa sarà una nuova funzione che verifica se due rettangoli si intersecano: + + ```javascript + function intersectRect(r1, r2) { + return !( + r2.left > r1.right || + r2.right < r1.left || + r2.top > r1.bottom || + r2.bottom < r1.top + ); + } + ``` + +3. **Aggiungere capacità di fuoco laser** + 1. **Aggiungere messaggio per un evento da tastiera**. Il tasto spazio (*space*) dovrebbe creare un laser appena sopra la astronave dell'eroe. Aggiungere tre costanti nell'oggetto Messages: + + ```javascript + KEY_EVENT_SPACE: "KEY_EVENT_SPACE", + COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER", + COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO", + ``` + + 1. **Gestire il tasto barra spazio** Modificare la funzione keyup di `window.addEventListener` per gestire la barra spazio: + + ```javascript + } else if(evt.keyCode === 32) { + eventEmitter.emit(Messages.KEY_EVENT_SPACE); + } + ``` + + 1. **Aggiungere listener**. Modificare la funzione `initGame()` per assicurarsi che l'eroe possa sparare quando viene premuta la barra spazio: + + ```javascript + eventEmitter.on(Messages.KEY_EVENT_SPACE, () => { + if (hero.canFire()) { + hero.fire(); + } + ``` + + e aggiungere una nuova funzione `eventEmitter.on()` per garantire il comportamento quando un nemico si scontra con un laser: + + ```javascript + eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { + first.dead = true; + second.dead = true; + }) + ``` + + 1. **Spostare l'oggetto**, assicurarsi che il laser si muova gradualmente verso parte superiore dello schermo. Creare una nuova classe Laser che estende `GameObject`, come fatto precedentemente: + + ```javascript + class Laser extends GameObject { + constructor(x, y) { + super(x,y); + (this.width = 9), (this.height = 33); + this.type = 'Laser'; + this.img = laserImg; + let id = setInterval(() => { + if (this.y > 0) { + this.y -= 15; + } else { + this.dead = true; + clearInterval(id); + } + }, 100) + } + } + ``` + + 1. **Gestire le collisioni**, implementare le regole di collisione per il laser. Aggiungere una funzione `updateGameObjects()` che verifica gli oggetti in collisione per quelli colpiti + + ```javascript + function updateGameObjects() { + const enemies = gameObjects.filter(go => go.type === 'Enemy'); + const lasers = gameObjects.filter((go) => go.type === "Laser"); + // il laser ha colpito qualcosa + lasers.forEach((l) => { + enemies.forEach((m) => { + if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) { + eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, { + first: l, + second: m, + }); + } + }); + }); + + gameObjects = gameObjects.filter(go => !go.dead); + } + ``` + + Assicurarsi di aggiungere `updateGameObjects()` nel ciclo di gioco in `window.onload`. + + 4. **Implementare il** raffreddamento sul laser, in modo che possa essere sparato solo a determinati intervalli. + + Infine, modificare la classe Hero in modo che possa eseguire il raffreddamento: + + ```javascript + class Hero extends GameObject { + constructor(x, y) { + super(x, y); + (this.width = 99), (this.height = 75); + this.type = "Hero"; + this.speed = { x: 0, y: 0 }; + this.cooldown = 0; + } + fire() { + gameObjects.push(new Laser(this.x + 45, this.y - 10)); + this.cooldown = 500; + + let id = setInterval(() => { + if (this.cooldown > 0) { + this.cooldown -= 100; + } else { + clearInterval(id); + } + }, 200); + } + canFire() { + return this.cooldown === 0; + } + } + ``` + +A questo punto, il tuo gioco ha alcune funzionalità! Si può navigare con i tasti freccia, sparare un laser con la barra spaziatrice e i nemici scompaiono quando colpiti. Ottimo lavoro! + +--- + +## 🚀 Sfida + +Aggiungere un'esplosione! Dare un'occhiata alle risorse di gioco [nel repository Space Art](../solution/spaceArt/readme.txt) e provare ad aggiungere un'esplosione quando il laser colpisce un alieno + +## Quiz Post-Lezione + +[ +Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/36) + +## Revisione e Auto Apprendimento + +Sperimentare con gli intervalli nel proprio gioco fino ad ora. Cosa succede quando si cambiano? Ulteriori informazioni sugli [eventi di temporizzazione JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/). + +## Compito + +[Esplorare le collisioni](assignment.it.md) diff --git a/6-space-game/4-collision-detection/translations/assignment.it.md b/6-space-game/4-collision-detection/translations/assignment.it.md new file mode 100644 index 00000000..8b55bf75 --- /dev/null +++ b/6-space-game/4-collision-detection/translations/assignment.it.md @@ -0,0 +1,11 @@ +# Esplorare Collisioni + +## Istruzioni + +Per una migliore comprensione del funzionamento delle collisioni, costruire un gioco molto piccolo con alcuni elementi che collidono. Farli muovere tramite pressioni di tasto o clic di mouse, fare accadere qualcosa a uno di questi elementi quando viene colpito. Potrebbe essere qualcosa tipo un meteorite che colpisce la terra oppure un autoscontro. Si usi la propria creatività! + +## Rubrica + +| Criteri | Ottimo | Adeguato | Necessita miglioramento | +| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- | +| | Viene prodotto un campione di codice completo e funzionante con elementi disegnati sul canvas, verificarsi di collisioni basiche e reazioni| Il codice è incompleto in qualche modo | Malfunzionamenti del codice | \ No newline at end of file From f7a8288edcf95230df87b89d1f70d30bb85322a5 Mon Sep 17 00:00:00 2001 From: Jen Looper Date: Fri, 5 Feb 2021 10:09:22 -0500 Subject: [PATCH 04/27] removing stray hard-coded quiz --- .../.github/post-lecture-quiz.hi.md | 24 ------------------- .../.github/pre-lecture-quiz.hi.md | 19 --------------- 2 files changed, 43 deletions(-) delete mode 100644 lesson-template/translations/.github/post-lecture-quiz.hi.md delete mode 100644 lesson-template/translations/.github/pre-lecture-quiz.hi.md diff --git a/lesson-template/translations/.github/post-lecture-quiz.hi.md b/lesson-template/translations/.github/post-lecture-quiz.hi.md deleted file mode 100644 index 928337d7..00000000 --- a/lesson-template/translations/.github/post-lecture-quiz.hi.md +++ /dev/null @@ -1,24 +0,0 @@ -_प्रति प्रश्न के एक उत्तर की जाँच करके अपने प्रस्तुतिकरण के साथ इस प्रश्नोत्तरी को पूरा करें._ - -क्विज़ को पूरा करने के लिए आपको निम्नलिखित लर्निंग मॉड्यूल(एस) को पूरा करना होगा: - -[लर्न लिंक १]() -[लर्न लिंक २]() - -1. [Q1] - -- [ ] [विकल्प १] -- [ ] [विकल्प २] -- [ ] [विकल्प ३] - -2. [Q2] - -- [ ] [विकल्प १] -- [ ] [विकल्प २] -- [ ] [विकल्प ३] - -3. [Q3] - -- [ ] [विकल्प १] -- [ ] [विकल्प २] -- [ ] [विकल्प ३] diff --git a/lesson-template/translations/.github/pre-lecture-quiz.hi.md b/lesson-template/translations/.github/pre-lecture-quiz.hi.md deleted file mode 100644 index 5bf490b3..00000000 --- a/lesson-template/translations/.github/pre-lecture-quiz.hi.md +++ /dev/null @@ -1,19 +0,0 @@ -_इस क्विज को कक्षा में पूरा करें_ - -1. [Q1] - -- [ ] [विकल्प १] -- [ ] [विकल्प २] -- [ ] [विकल्प ३] - -2. [Q2] - -- [ ] [विकल्प १] -- [ ] [विकल्प २] -- [ ] [विकल्प ३] - -3. [Q3] - -- [ ] [विकल्प १] -- [ ] [विकल्प २] -- [ ] [विकल्प ३] From 3e2a36a3ab16fe357273c8794860d898a26a7982 Mon Sep 17 00:00:00 2001 From: Roberto Pauletto Date: Fri, 5 Feb 2021 17:15:38 +0100 Subject: [PATCH 05/27] Ch. 6.5 / 6.5 translated --- .../5-keeping-score/translations/README.it.md | 190 +++++++++++++++ .../translations/assignment.it.md | 11 + .../6-end-condition/translations/README.it.md | 223 ++++++++++++++++++ .../translations/assignment.it.md | 19 ++ 4 files changed, 443 insertions(+) create mode 100644 6-space-game/5-keeping-score/translations/README.it.md create mode 100644 6-space-game/5-keeping-score/translations/assignment.it.md create mode 100644 6-space-game/6-end-condition/translations/README.it.md create mode 100644 6-space-game/6-end-condition/translations/assignment.it.md diff --git a/6-space-game/5-keeping-score/translations/README.it.md b/6-space-game/5-keeping-score/translations/README.it.md new file mode 100644 index 00000000..f2f82c6b --- /dev/null +++ b/6-space-game/5-keeping-score/translations/README.it.md @@ -0,0 +1,190 @@ +# Costruire un Gioco Spaziale parte 5: Punteggio e Vite + +## Quiz Pre-Lezione + +[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/37) + +In questa lezione si imparerà come aggiungere punteggi a una partita e calcolare le vite. + +## Disegnare testo sullo schermo + +Per poter visualizzare il punteggio di una partita sullo schermo, serve sapere come posizionare il testo sullo schermo. La risposta è usando il metodo `fillText()` sull'oggetto canvas. Si possono anche controllare altri aspetti come il tipo di carattere da usare, il colore del testo e anche il suo allineamento (sinistra, destra, centro). Di seguito è riportato del codice che disegna testo sullo schermo. + +```javascript +ctx.font = "30px Arial"; +ctx.fillStyle = "red"; +ctx.textAlign = "right"; +ctx.fillText("show this on the screen", 0, 0); +``` + +✅ Si legga di più su [come aggiungere testo a un oggetto canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text), ci si senta liberi di far sembrare il proprio più elaborato! + +## La vita, come concetto di gioco + +Il concetto di avere una vita in un gioco è solo un numero. Nel contesto di un gioco spaziale è comune assegnare una serie di vite che vengono detratte una per una quando la propria astronave subisce danni. Sarebbe bello se si potesse mostrare una rappresentazione grafica di questo come mini astronavi o cuori invece di un numero. + +## Cosa costruire + +Si aggiunge quanto segue al gioco: + +- **Punteggio del gioco**: per ogni astronave nemica che viene distrutta, l'eroe dovrebbe ricevere alcuni punti, si suggerisce 100 punti per astronave. Il punteggio del gioco dovrebbe essere mostrato in basso a sinistra. +- **Vita**: la propria astronave ha tre vite. Si perde una vita ogni volta che una astronave nemica si scontra con la propria. Un punteggio di vita dovrebbe essere visualizzato in basso a destra ed essere ricavato dalla seguente immagine ![immagine grafica di una vita](../solution/assets/life.png). + +## Passaggi consigliati + +Individuare i file che già sono stati creati nella sottocartella `your-work`. Dovrebbe contenere le seguenti informazioni: + +```bash +-| assets + -| enemyShip.png + -| player.png + -| laserRed.png +-| index.html +-| app.js +-| package.json +``` + +Si fa partire il progetto dalla cartella `your_work` digitando: + +```bash +cd your-work +npm start +``` + +Quanto sopra avvierà un server HTTP all'indirizzo `http://localhost:5000`. Aprire un browser e inserire quell'indirizzo, in questo momento dovrebbe rendere l'eroe e tutti i nemici, e premendo le frecce sinistra e destra, si fa muovere l'eroe che può abbattere i nemici. + +### Aggiungere codice + +1. **Copiare le risorse necessarie** dalla cartella `solution/assets` nella cartella `your-work`; aggiungere una risorsa `life.png`. Aggiungere lifeImg alla funzione window.onload: + + ```javascript + lifeImg = await loadTexture("assets/life.png"); + ``` + +1. Aggiungere `lifeImg` all'elenco delle risorse: + + ```javascript + let heroImg, + ... + lifeImg, + ... + eventEmitter = new EventEmitter(); + ``` + +2. **Aggiungere variabili**. Aggiungere il codice che rappresenta il punteggio totale (0) e le vite rimaste (3), visualizzare questi punteggi sullo schermo. + +3. **Estendere la funzione `updateGameObjects()`** . Estendere la funzione `updateGameObjects()` per gestire le collisioni con il nemico: + + ```javascript + enemies.forEach(enemy => { + const heroRect = hero.rectFromGameObject(); + if (intersectRect(heroRect, enemy.rectFromGameObject())) { + eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy }); + } + }) + ``` + +4. **Aggiungere vita (`life`) e punti (`points`)**. + 1. **Inizializzare le variabili**. Sotto `this.cooldown = 0` nella classe `Hero`, impostare la vita e i punti: + + ```javascript + this.life = 3; + this.points = 0; + ``` + + 1. **Disegnare variabili sullo schermo**. Disegnare questi valori sullo schermo: + + ```javascript + function drawLife() { + // TODO, 35, 27 + const START_POS = canvas.width - 180; + for(let i=0; i < hero.life; i++ ) { + ctx.drawImage( + lifeImg, + START_POS + (45 * (i+1) ), + canvas.height - 37); + } + } + + function drawPoints() { + ctx.font = "30px Arial"; + ctx.fillStyle = "red"; + ctx.textAlign = "left"; + drawText("Points: " + hero.points, 10, canvas.height-20); + } + + function drawText(message, x, y) { + ctx.fillText(message, x, y); + } + + ``` + + 1. **Aggiungere metodi al ciclo di gioco**. Assicurarsi di aggiungere queste funzioni alla funzione window.onload sotto `updateGameObjects()`: + + ```javascript + drawPoints(); + drawLife(); + ``` + +1. **Implementare le regole del gioco**. Implementare le seguenti regole di gioco: + + 1. **Per ogni collisione di eroi e nemici**, togliere una vita. + + Estendere la classe `Hero` per eseguire questa sottrazione: + + ```javascript + decrementLife() { + this.life--; + if (this.life === 0) { + this.dead = true; + } + } + ``` + + 2. **Per ogni laser che colpisce un nemico**, aumentare il punteggio del gioco di 100 punti. + + Estendere la classe Hero per fare questo incremento: + + ```javascript + incrementPoints() { + this.points += 100; + } + ``` + + Aggiungere queste funzioni agli event listener di Collision: + + ```javascript + eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { + first.dead = true; + second.dead = true; + hero.incrementPoints(); + }) + + eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => { + enemy.dead = true; + hero.decrementLife(); + }); + ``` + +✅ Fare una piccola ricerca per scoprire altri giochi creati utilizzando JavaScript/Canvas. Quali sono i loro tratti comuni? + +Alla fine di questo lavoro, si dovrebbero vedere le piccole astronavi che rappresentano le vite in basso a destra, i punti in basso a sinistra, e si dovrebbe vedere il numero di vite diminuire quando si entra in collisione con i nemici e i punti aumentare quando si colpiscono i nemici. Ottimo lavoro! Il gioco è quasi completo. + +--- + +## 🚀 Sfida + +Il codice è quasi completo. Si riescono a immaginare i prossimi passi? + +## Quiz Post-Lezione + +[ +Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/38) + +## Revisione e Auto Apprendimento + +Cercare alcuni modi per aumentare e diminuire i punteggi e le vite del gioco. Ci sono alcuni motori di gioco interessanti come [PlayFab](https://playfab.com). In che modo l'utilizzo di uno di questi potrebbe migliorare il proprio gioco? + +## Compito + +[Costruire un Gioco di Punteggio](assignment.it.md) diff --git a/6-space-game/5-keeping-score/translations/assignment.it.md b/6-space-game/5-keeping-score/translations/assignment.it.md new file mode 100644 index 00000000..7082f3c8 --- /dev/null +++ b/6-space-game/5-keeping-score/translations/assignment.it.md @@ -0,0 +1,11 @@ +# Costruire un Gioco di Punteggio + +## Istruzioni + +Creare un gioco in cui si mostrano vite e punti in modo creativo. Un suggerimento è quello di mostrare le vite come cuori e i punti come un numero grande nella parte centrale in basso dello schermo. Dare un'occhiata qui per [risorse di gioco gratuite](https://www.kenney.nl/) + +# Rubrica + +| Criteri | Ottimo | Adeguato | Necessita miglioramento | +| -------- | ---------------------- | --------------------------- | -------------------------- | +| | Viene presentato un gioco completo | Il gioco è presentato parzialmente | il gioco parziale contiene bug | \ No newline at end of file diff --git a/6-space-game/6-end-condition/translations/README.it.md b/6-space-game/6-end-condition/translations/README.it.md new file mode 100644 index 00000000..814901a9 --- /dev/null +++ b/6-space-game/6-end-condition/translations/README.it.md @@ -0,0 +1,223 @@ +# Costruire un Gioco Spaziale Parte 6: Fine e Riavvio + +## Quiz Pre-Lezione + +[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/39) + +Esistono diversi modi per esprimere una *condizione di fine gioco*. Spetta al creatore del gioco dire perché il gioco è finito. Ecco alcuni motivi, si supponga di parlare del gioco spaziale costruito finora: + +- Un **numero `N` di astronavi nemiche sono state distrutte**: è abbastanza comune se il gioco viene diviso in diversi livelli che si debba distruggere `N` astronavi nemiche per completare un livello +- **La propria nave è stata distrutta**: ci sono sicuramente giochi in si perde la partita se la propria astronave viene distrutta. Un altro approccio comune è il concetto di vite. Ogni volta che una propria astronave viene distrutta, sottrae una vita. Una volta perse tutte le vite, si perde la partita. +- **Sono stati raccolti `N` punti**: un'altra condizione finale comune è che il giocatore raccolga punti. Il modo in cui ottenere punti dipende dallo sviluppatore, ma è abbastanza comune assegnare punti a varie attività come distruggere una astronave nemica o forse raccogliere elementi che vengono *rilasciati* quando gli oggetti vengono distrutti. +- **Completare un livello**: questo potrebbe coinvolgere diverse condizioni come `X` astronavi nemiche distrutte, `Y` punti raccolti o forse che è stato raccolto un oggetto specifico. + +## Riavvio + +Se le persone apprezzano il gioco, è probabile che vogliano rigiocarlo. Una volta che il gioco finisce per qualsiasi motivo, si dovrebbe offrire un'alternativa per il riavvio. + +✅ Si pensi alle condizioni per le quali si ritiene che un gioco finisca e poi a come viene chiesto di riavviare + +## Cosa costruire + +Aggiungere queste regole al gioco: + +1. **Vincere il gioco**. Una volta che tutte le navi nemiche sono state distrutte, si vince la partita. Mostrare inoltre una sorta di messaggio di vittoria. +1. **Riavvio**. Una volta perse tutte le vite o si è vinto il gioco, si dovrebbe offrire un modo per riavviare il gioco. Ricordare! Si dovrà reinizializzare il gioco e lo stato del gioco precedente dovrebbe essere cancellato. + +## Passaggi consigliati + +Individuare i file che già sono stati creati nella sottocartella `your-work`. Dovrebbe contenere le seguenti informazioni: + +```bash +-| assets + -| enemyShip.png + -| player.png + -| laserRed.png + -| life.png +-| index.html +-| app.js +-| package.json +``` + +Si fa partire il progetto dalla cartella `your_work` digitando: + +```bash +cd your-work +npm start +``` + +Quanto sopra avvierà un server HTTP all'indirizzo `http://localhost:5000`. Aprire un browser e inserire quell'indirizzo. Il gioco dovrebbe essere in uno stato giocabile. + +> suggerimento: per evitare avvertimenti in Visual Studio Code, modificare la funzione `window.onload` per chiamare `gameLoopId` così com'è (senza `let`) e dichiarare gameLoopId all'inizio del file, indipendentemente: `let gameLoopId;` + +### Aggiungere codice + +1. **Tracciare la condizione di fine**. Aggiungere codice che tenga traccia del numero di nemici o se l'astronave dell'eroe è stata distrutta aggiungendo queste due funzioni: + + ```javascript + function isHeroDead() { + return hero.life <= 0; + } + + function isEnemiesDead() { + const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead); + return enemies.length === 0; + } + ``` + +1. **Aggiungere logica ai gestori di messaggi**. Modificare `eventEmitter` per gestire queste condizioni: + + ```javascript + eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { + first.dead = true; + second.dead = true; + hero.incrementPoints(); + + if (isEnemiesDead()) { + eventEmitter.emit(Messages.GAME_END_WIN); + } + }); + + eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => { + enemy.dead = true; + hero.decrementLife(); + if (isHeroDead()) { + eventEmitter.emit(Messages.GAME_END_LOSS); + return; // loss before victory + } + if (isEnemiesDead()) { + eventEmitter.emit(Messages.GAME_END_WIN); + } + }); + + eventEmitter.on(Messages.GAME_END_WIN, () => { + endGame(true); + }); + + eventEmitter.on(Messages.GAME_END_LOSS, () => { + endGame(false); + }); + ``` + +1. **Aggiungere nuovi tipi di messaggi**. Aggiungere questi messaggi alle costanti assegnate agli oggetti: + + ```javascript + GAME_END_LOSS: "GAME_END_LOSS", + GAME_END_WIN: "GAME_END_WIN", + ``` + +2. **Aggiungere il codice di riavvio** che fa ripartire il gioco con la semplice pressione di un pulsante selezionato. + + 1. **Mettersi in ascolto per la pressione del tasto `Invio`**. Modificare l'eventListener di window per ascoltare questa pressione + + ```javascript + else if(evt.key === "Enter") { + eventEmitter.emit(Messages.KEY_EVENT_ENTER); + } + ``` + + 1. **Aggiungere messaggio di riavvio**. Aggiungere questo messaggio alle costanti in Messages: + + ```javascript + KEY_EVENT_ENTER: "KEY_EVENT_ENTER", + ``` + +1. **Implementare le regole del gioco**. Implementare le seguenti regole di gioco: + + 1. **Condizione di vittoria del giocatore**. Quando tutte le astronavi nemiche vengono distrutte, mostrare un messaggio di vittoria. + + 1. Innanzitutto, creare una funzione `displayMessage()` : + + ```javascript + function displayMessage(message, color = "red") { + ctx.font = "30px Arial"; + ctx.fillStyle = color; + ctx.textAlign = "center"; + ctx.fillText(message, canvas.width / 2, canvas.height / 2); + } + ``` + + 1. Creare una funzione `endGame()` : + + ```javascript + function endGame(win) { + clearInterval(gameLoopId); + + // imposta un ritardo per assicurarsi che tutte sia stato disegnato + setTimeout(() => { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = "black"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + if (win) { + displayMessage( + "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew", + "green" + ); + } else { + displayMessage( + "You died !!! Press [Enter] to start a new game Captain Pew Pew" + ); + } + }, 200) + } + ``` + + 1. **Logica di riavvio**. Quando tutte le vite sono perse o il giocatore ha vinto la partita, mostrare che il gioco può essere riavviato. Inoltre, riavviare il gioco quando viene premuto il tasto di *riavvio* (si può decidere quale tasto deve essere mappato per il riavvio). + + 1. Creare la funzione `resetGame()` : + + ```javascript + function resetGame() { + if (gameLoopId) { + clearInterval(gameLoopId); + eventEmitter.clear(); + initGame(); + gameLoopId = setInterval(() => { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = "black"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + drawPoints(); + drawLife(); + updateGameObjects(); + drawGameObjects(ctx); + }, 100); + } + } + ``` + + 1. Aggiungere una chiamata a `eventEmitter` per riazzerare il gioco in `initGame()`: + + ```javascript + eventEmitter.on(Messages.KEY_EVENT_ENTER, () => { + resetGame(); + }); + ``` + + 1. Aggiungere una funzione `clear()` a EventEmitter: + + ```javascript + clear() { + this.listeners = {}; + } + ``` + +👽 💥 🚀 Congratulazioni, Capitano! Il gioco è completo! Ottimo lavoro! 🚀 💥 👽 + +--- + +## 🚀 Sfida + +Aggiungere un suono! Si può aggiungere un suono per migliorare il gioco, magari quando un colpo di laser va a segno, o l'eroe muore o vince? Si dia un'occhiata a questo [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) per imparare a riprodurre il suono utilizzando JavaScript + +## Quiz Post-Lezione + +[ +Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/40) + +## Revisione e Auto Apprendimento + +Il compito è creare un nuovo gioco di esempio, quindi esplorare alcuni dei giochi interessanti esistenti per vedere che tipo di gioco si potrebbe costruire. + +## Compito + +[Creare un Gioco di Esempio](assignment.it.md) diff --git a/6-space-game/6-end-condition/translations/assignment.it.md b/6-space-game/6-end-condition/translations/assignment.it.md new file mode 100644 index 00000000..95cf3295 --- /dev/null +++ b/6-space-game/6-end-condition/translations/assignment.it.md @@ -0,0 +1,19 @@ +# Creare un Gioco di Esempio + +## Istruzioni + +Provare a costruire un piccolo gioco in cui esercitarsi in diverse condizioni di fine. Variare tra ottenere un numero di punti, l'eroe perde tutte le vite o tutti i mostri vengono sconfitti. Costruire qualcosa di semplice come un gioco di avventura basato su console. Usare il seguente flusso di gioco come ispirazione: + +``` +Eroe> Colpisce con lo spadone - l'orco riceve 3 punti di danno +Orco> Colpisce con la mazza - l'eroe riceve 2 punti di danno +Eroe> Calcia - l'orco takes 1 punto di danno +Gioco> l'orco è sconfitto - L'eroe guadagna 2 monete +Gioco> ****Non ci sono più mostri, la fortezza del male è stata conquistata**** +``` + +## Rubrica + +| Criteri | Ottimo | Adeguato | Necessita miglioramento | +| -------- | ---------------------- | --------------------------- | -------------------------- | +| | Viene presentato un gioco completo | Il gioco è presentato parzialmente | il gioco parziale contiene bug | \ No newline at end of file From a9d82a2f14463048f1129d870dc93fe0e03eb5d3 Mon Sep 17 00:00:00 2001 From: Muhammad Atif Ali Date: Sat, 6 Feb 2021 09:31:31 +0500 Subject: [PATCH 06/27] fix: dependabot vulnerablity --- 5-browser-extension/solution/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-browser-extension/solution/package.json b/5-browser-extension/solution/package.json index 28aa0348..2775a1e6 100644 --- a/5-browser-extension/solution/package.json +++ b/5-browser-extension/solution/package.json @@ -20,6 +20,6 @@ "webpack-cli": "^3.3.12" }, "dependencies": { - "axios": "^0.19.2" + "axios": ">=0.21.1" } } From 070b7120bf27d3dc76b949d64bb85292ab66f4ec Mon Sep 17 00:00:00 2001 From: Jen Looper Date: Sat, 6 Feb 2021 10:47:28 -0500 Subject: [PATCH 07/27] Update TRANSLATIONS.md --- TRANSLATIONS.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/TRANSLATIONS.md b/TRANSLATIONS.md index 81e3ef90..3b43ea3a 100644 --- a/TRANSLATIONS.md +++ b/TRANSLATIONS.md @@ -6,12 +6,18 @@ We welcome translations for the lessons in this curriculum! There are [**translations**](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages/translations) folders which contain the translated markdown files. -Translated lessons should follow this naming convention: +> Note, please do not translate any code in the code sample files; the only things to translate are README, assignments, and the quizzes. Thanks! + +Translated files should follow this naming convention: **README._[language]_.md** where _[language]_ is a two letter language abbreviation following the ISO 639-1 standard (e.g. `README.es.md` for Spanish and `README.nl.md` for Dutch). +**assignment._[language]_.md** + +Similar to Readme's, please translate the assignments as well. + **Quizzes** 1. Add your translation to the quiz-app by adding a file here: https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/quiz-app/src/assets/translations, with proper naming convention (en.json, fr.json). **Please don't localize the words 'true' or 'false' however. thanks!** From 75e2aa6ce5a6b3890cede5633fc899368d0d9daf Mon Sep 17 00:00:00 2001 From: Roberto Pauletto Date: Sun, 7 Feb 2021 10:09:24 +0100 Subject: [PATCH 08/27] Ch. 6.2/your-work restored original app.js --- 6-space-game/2-drawing-to-canvas/your-work/app.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/6-space-game/2-drawing-to-canvas/your-work/app.js b/6-space-game/2-drawing-to-canvas/your-work/app.js index 2eca878d..82c8e20d 100644 --- a/6-space-game/2-drawing-to-canvas/your-work/app.js +++ b/6-space-game/2-drawing-to-canvas/your-work/app.js @@ -9,16 +9,16 @@ function loadTexture(path) { } function createEnemies(ctx, canvas, enemyImg) { - // TODO disegnare i nemici + // TODO draw enemies } window.onload = async () => { canvas = document.getElementById('canvas') ctx = canvas.getContext('2d') - // TODO 2 - caricare le strutture di gioco + // TODO load textures - // TODO 1 - disegnare lo sfondo nero - // TODO 3 - disegnare l'eroe - // TODO 4 - togliere il commento dalla riga successiva quando si aggiungono nemici sullo schermo + // TODO draw black background + // TODO draw hero + // TODO uncomment the next line when you add enemies to screen //createEnemies(ctx, canvas, enemyImg); } From 76f72cd99979d51d8bbdac6b876d6a3938086a81 Mon Sep 17 00:00:00 2001 From: Jen Looper Date: Sun, 7 Feb 2021 13:26:37 -0500 Subject: [PATCH 09/27] Update package.json --- 5-browser-extension/solution/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-browser-extension/solution/package.json b/5-browser-extension/solution/package.json index 2775a1e6..93481470 100644 --- a/5-browser-extension/solution/package.json +++ b/5-browser-extension/solution/package.json @@ -20,6 +20,6 @@ "webpack-cli": "^3.3.12" }, "dependencies": { - "axios": ">=0.21.1" + "axios": "^0.21.1" } } From 535f3e2a1c4c1977d57ae49f3e24b81d8403ffcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Mon, 8 Feb 2021 20:57:17 +0900 Subject: [PATCH 10/27] =?UTF-8?q?=E6=97=A5=E6=9C=AC=E8=AA=9E=E8=A8=B3?= =?UTF-8?q?=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .docs/about.md | 12 ++++ .../translations/README.ja.md | 4 +- .../3-accessibility/translations/README.ja.md | 6 +- .../1-data-types/translations/README.ja.md | 6 +- .../translations/README.ja.md | 2 +- .../translations/README.ja.md | 2 +- .../4-arrays-loops/translations/README.ja.md | 4 +- .../1-intro-to-html/translations/README.ja.md | 4 +- .../2-intro-to-css/translations/README.ja.md | 21 ++++--- .../translations/README.ja.md | 12 ++-- 3-terrarium/translations/README.ja.md | 8 +-- 4-typing-game/translations/README.ja.md | 2 +- .../translations/README.ja.md | 2 +- .../translations/README.ja.md | 14 ++--- .../translations/README.ja.md | 8 +-- .../start/translations/README.ja.md | 2 + 5-browser-extension/translations/README.ja.md | 8 +-- .../1-introduction/translations/README.ja.md | 4 +- .../translations/README.ja.md | 2 +- 6-space-game/translations/README.ja.md | 4 +- .../translations/README.ja.md | 2 +- .../2-forms/translations/README.ja.md | 2 +- .../3-data/translations/README.ja.md | 2 +- .../translations/README.ja.md | 4 +- .../translations/assignment.ja.md | 2 +- _sidebar.md | 56 +++++++++++++++++++ index.html | 26 ++++++--- translations/README.ja.md | 4 +- 28 files changed, 151 insertions(+), 74 deletions(-) create mode 100644 .docs/about.md create mode 100644 _sidebar.md diff --git a/.docs/about.md b/.docs/about.md new file mode 100644 index 00000000..cae1ee45 --- /dev/null +++ b/.docs/about.md @@ -0,0 +1,12 @@ +# このサイトについて + +- このWebサイトは、[MITライセンス](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/LICENSE)で公開されているMicrosoftのプロジェクト「[Web Development for Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)」を[namosuke](https://github.com/namosuke)がフォークし、日本語話者がより学習しやすくなるよう編纂し、GitHub Pagesで公開したものです。 +- このWebサイトは[こちらのリポジトリ](https://github.com/namosuke/Web-Dev-For-Beginners)からビルドされています。日本語訳以外のファイルはMicrosoftから公開されているものと同一です。 +- 日本語訳の大半はMicrosoftによる翻訳です。一部明らかな誤訳等は運営者が修正しています。 +- PR及びissueは歓迎します。 +- フォーク元との最終同期日は 2021年2月8日 です。 + +## カリキュラム + +- [カリキュラム](/) +- [教育者の方へ](/translations/for-teachers.ja) \ No newline at end of file diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md index 8244f76c..b0361fba 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md @@ -88,7 +88,7 @@ back add r0,r1 信じられないかもしれませんが、両者は同じ処理をしています。 いずれもフィボナッチ数を順番に10個出力します。 -✅ [フィボナッチ数](https://en.wikipedia.org/wiki/Fibonacci_number)とは、各数がその手前の二つの値の和である値の集合です。 +✅ [フィボナッチ数](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%9C%E3%83%8A%E3%83%83%E3%83%81%E6%95%B0)とは、各数がその手前の二つの値の和である値の集合です。 ## プログラムの基本要素 @@ -244,4 +244,4 @@ COBOLとGoについては？ ## 課題 -[assignment.md](assignment.ja.md) +[ドキュメントを読む](assignment.ja.md) diff --git a/1-getting-started-lessons/3-accessibility/translations/README.ja.md b/1-getting-started-lessons/3-accessibility/translations/README.ja.md index c0d9af3d..f30838d3 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.ja.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.ja.md @@ -1,6 +1,6 @@ # アクセシブルな Web ページの作成 -![All About Accessibility](webdev101-a11y.png) +![All About Accessibility](../webdev101-a11y.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## レッスン前の小テスト @@ -84,7 +84,7 @@ CSS は、ページ上のあらゆる要素の外観を完全に制御するこ ご想像の通り、スクリーンリーダーはリンクテキストをページ上の他のテキストと同じように読みます。このことを念頭に置いて、以下に示すテキストは完全に許容できると感じるかもしれません。 -> 妖精ペンギンと呼ばれることもあるコガタペンギンは、世界最小のペンギンです。[詳しくはこちら](https://en.wikipedia.org/wiki/Little_penguin) をご覧ください。 +> 妖精ペンギンと呼ばれることもあるコガタペンギンは、世界最小のペンギンです。[詳しくはこちら](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%82%AC%E3%82%BF%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3) をご覧ください。 > 妖精ペンギンと呼ばれることもあるリトルペンギンは、世界最小のペンギンです。詳しくは https://ja.wikipedia.org/wiki/%E3%82%B3%E3%82%AC%E3%82%BF%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3 をご覧ください。 @@ -224,6 +224,6 @@ CSS は、ページ上のあらゆる要素の外観を完全に制御するこ ## 課題 -[Analyze a non-accessible web site](assignment.ja.md) +[アクセスできない Web サイトを分析する](assignment.ja.md) Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument diff --git a/2-js-basics/1-data-types/translations/README.ja.md b/2-js-basics/1-data-types/translations/README.ja.md index 65801862..71594a0b 100644 --- a/2-js-basics/1-data-types/translations/README.ja.md +++ b/2-js-basics/1-data-types/translations/README.ja.md @@ -1,6 +1,6 @@ # JavaScript の基本: データ型 -![JavaScript Basics - Data types](images/webdev101-js-datatypes.png) +![JavaScript Basics - Data types](../images/webdev101-js-datatypes.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## レッスン前の小テスト @@ -111,7 +111,7 @@ const MY_VARIABLE = 123; `let myVariable = 123;` -変数は、小数や負の数を含むあらゆるタイプの数値を格納することができます。数値は、[次のセクション](#operators)で説明する算術演算子と一緒に使用することもできます。 +変数は、小数や負の数を含むあらゆるタイプの数値を格納することができます。数値は、[次のセクション](#算術演算子)で説明する算術演算子と一緒に使用することもできます。 ### 算術演算子 @@ -171,7 +171,7 @@ let myString2 = "World"; ### ブール値 -ブール値は2つの値だけを持つことができます。`true` か `false` です。ブール値は、特定の条件が満たされたときにどの行のコードを実行するかを決定するのに役立ちます。多くの場合、[演算子](#operators) がブール値の設定を支援し、変数が初期化されたり、演算子で値が更新されたりしていることに気付いたり、書いたりすることが多いでしょう。 +ブール値は2つの値だけを持つことができます。`true` か `false` です。ブール値は、特定の条件が満たされたときにどの行のコードを実行するかを決定するのに役立ちます。多くの場合、[演算子](#算術演算子) がブール値の設定を支援し、変数が初期化されたり、演算子で値が更新されたりしていることに気付いたり、書いたりすることが多いでしょう。 - `let myTrueBool = true` - `let myFalseBool = false` diff --git a/2-js-basics/2-functions-methods/translations/README.ja.md b/2-js-basics/2-functions-methods/translations/README.ja.md index 411fd731..94681031 100644 --- a/2-js-basics/2-functions-methods/translations/README.ja.md +++ b/2-js-basics/2-functions-methods/translations/README.ja.md @@ -1,6 +1,6 @@ # JavaScript の基本: メソッドと関数 -![JavaScript Basics - Functions](images/webdev101-js-functions.png) +![JavaScript Basics - Functions](../images/webdev101-js-functions.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## レッスン前の小テスト diff --git a/2-js-basics/3-making-decisions/translations/README.ja.md b/2-js-basics/3-making-decisions/translations/README.ja.md index 730755ad..93e0e701 100644 --- a/2-js-basics/3-making-decisions/translations/README.ja.md +++ b/2-js-basics/3-making-decisions/translations/README.ja.md @@ -1,6 +1,6 @@ # JavaScript の基本: 意思決定 -![JavaScript Basics - Making decisions](images/webdev101-js-decisions.png) +![JavaScript Basics - Making decisions](../images/webdev101-js-decisions.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## レッスン前の小テスト diff --git a/2-js-basics/4-arrays-loops/translations/README.ja.md b/2-js-basics/4-arrays-loops/translations/README.ja.md index 6c67ebd1..fd1eb9a3 100644 --- a/2-js-basics/4-arrays-loops/translations/README.ja.md +++ b/2-js-basics/4-arrays-loops/translations/README.ja.md @@ -1,6 +1,6 @@ # JavaScript の基本: 配列とループ -![JavaScript Basics - Arrays](images/webdev101-js-arrays.png) +![JavaScript Basics - Arrays](../images/webdev101-js-arrays.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## レッスン前の小テスト @@ -89,7 +89,7 @@ while (i < 10) { } ``` -✅ for loop と while loop のどちらかを選ぶ理由は何ですか? 17K の視聴者が StackOverflow で同じ質問をしていましたが、その意見の中には[あなたにとって興味深いものもあるかもしれません](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。 +✅ for loop と while loop のどちらかを選ぶ理由は何ですか? 同じ質問が StackOverflow で約2万回閲覧されていましたが、その意見の中には[あなたにとって興味深いものもあるかもしれません](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。 ## ループと配列 diff --git a/3-terrarium/1-intro-to-html/translations/README.ja.md b/3-terrarium/1-intro-to-html/translations/README.ja.md index 9071b9a3..c80ac593 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ja.md +++ b/3-terrarium/1-intro-to-html/translations/README.ja.md @@ -1,6 +1,6 @@ # テラリウムプロジェクト その1: HTML 入門 -![Introduction to HTML](images/webdev101-html.png) +![Introduction to HTML](../images/webdev101-html.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## レッスン前の小テスト @@ -17,7 +17,7 @@ HTML (HyperText Markup Language) は、Web の「骨格」です。CSS が HTML コンピュータ上に 'terrarium' というフォルダを作成し、その中に 'index.html' というファイルを作成します。テラリウムのフォルダを作成した後、Visual Studio Code で新しい VS Code ウィンドウを開き、「フォルダを開く」をクリックして新しいフォルダに移動することで、この作業を行うことができます。エクスプローラペインの「ファイル」ボタンをクリックして、新しいファイルを作成してください。 -![explorer in VS Code](images/vs-code-index.png) +![explorer in VS Code](../images/vs-code-index.png) もしくは diff --git a/3-terrarium/2-intro-to-css/translations/README.ja.md b/3-terrarium/2-intro-to-css/translations/README.ja.md index b7816599..f7e45c57 100644 --- a/3-terrarium/2-intro-to-css/translations/README.ja.md +++ b/3-terrarium/2-intro-to-css/translations/README.ja.md @@ -1,6 +1,6 @@ # テラリウムプロジェクト その2: CSS 入門 -![Introduction to CSS](images/webdev101-css.png) +![Introduction to CSS](../images/webdev101-css.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## レッスン前の小テスト @@ -11,7 +11,7 @@ CSS (カスケードスタイルシート) は、Web 開発の重要な問題である、Web サイトの見栄えを良くする方法を解決します。また、CSS を使用してレスポンシブ ウェブ デザイン (RWD) を作成することもできます。CSS の仕様には、アプリケーションの洗練されたインタラクションを可能にするアニメーションや変換が含まれています。CSS Working Group は現在の CSS 仕様の維持を支援しており、[World Wide Web Consortium のサイト](https://www.w3.org/Style/CSS/members) でその活動を追うことができます。 -> 注: CSS は Web 上のすべてのものと同様に進化する言語であり、すべてのブラウザが仕様の新しい部分をサポートしているわけではありません。常に [CanIUse.com](caniuse.com) に相談して実装を確認してください。 +> 注: CSS は Web 上のすべてのものと同様に進化する言語であり、すべてのブラウザが仕様の新しい部分をサポートしているわけではありません。常に [CanIUse.com](https://caniuse.com) を参照して実装を確認してください。 このレッスンでは、オンラインテラリウムにスタイルを追加し、カスケード、継承、セレクタの使用、配置、CSS を使ったレイアウトの作成など、CSS の概念について学びます。その過程で、テラリウムをレイアウトし、実際のテラリウムを作成していきます。 @@ -37,13 +37,13 @@ CSS (カスケードスタイルシート) は、Web 開発の重要な問題で インラインスタイル "color: red" を `

` タグに追加します。 -```HTML +```html

My Terrarium

``` 次に、以下のコードを `style.css` ファイルに追加します。 -```CSS +```css h1 { color: blue; } @@ -61,7 +61,7 @@ h1 { body のフォントを指定されたフォントに設定し、入れ子になっている要素のフォントを確認します。 -``` +```css body { font-family: helvetica, arial, sans-serif; } @@ -69,7 +69,7 @@ body { ブラウザのコンソールから「要素」タブを開き、h1 のフォントを観察してください。ブラウザ内で述べられているように、フォントは body から継承されています。 -![inherited font](images/1.png) +![inherited font](../images/1.png) ✅ 入れ子になったスタイルを別のプロパティを継承させることはできますか? @@ -81,7 +81,7 @@ body { これまでのところ、`style.css` ファイルにはいくつかのタグがスタイリングされているだけで、アプリはかなり変な感じになっています。 -``` +```css body { font-family: helvetica, arial, sans-serif; } @@ -94,12 +94,11 @@ h1 { このようにタグをスタイリングすることで、ユニークな要素をコントロールすることができますが、テラリウム内の多くの植物のスタイルをコントロールする必要があります。そのためには、CSS セレクタを利用する必要があります。 -### Id +### id -Add some style to layout the left and right containers. Since there is only one left container and only one right container, they are given ids in the markup. To style them, use `#`: 左と右のコンテナをレイアウトするためのスタイルを追加します。左のコンテナと右のコンテナは1つしかないので、マークアップでは id が与えられます。スタイルを設定するには、`#` を使用します。 -``` +```css #left-container { background-color: #eee; width: 15%; @@ -247,7 +246,7 @@ HTML マークアップの各植物には、id とクラスの組み合わせが 瓶の左下の部分に「泡」のような輝きを加えて、よりガラスのように見えるようにします。`.jar-glossy-long` と `.jar-glossy-short` は反射光のように見えるようにスタイリングします。このようになります。 -![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?WT.mc_id=academic-13441-cxa) diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md index 4df3bb3b..2c400ff7 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md @@ -1,6 +1,6 @@ # テラリウムプロジェクト その3: DOM の操作とクロージャ -![DOM and a closure](images/webdev101-js.png) +![DOM and a closure](../images/webdev101-js.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## レッスン前の小テスト @@ -19,7 +19,7 @@ DOM (Document Object Model) を操作することは、Web 開発の重要な DOM をツリーと考え、Web ページのドキュメントを操作できるすべての方法を表しています。様々な API (Application Program Interfaces) が書かれており、プログラマーが自分の好きなプログラミング言語を使って DOM にアクセスし、編集、変更、再配置、その他の管理ができるようになっています。 -![DOM tree representation](./images/dom-tree.png) +![DOM tree representation](../images/dom-tree.png) > DOM とそれを参照する HTML マークアップの表現。[Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) より @@ -34,7 +34,7 @@ DOM をツリーと考え、Web ページのドキュメントを操作できる terrarium フォルダ内に `script.js` というファイルを作成します。このファイルを `` セクションにインポートします。 ```html - + ``` > 注: HTML ファイルが完全に読み込まれた後にのみ JavaScript を実行できるようにするために、外部の JavaScript ファイルを HTML ファイルにインポートする際には `defer` を使用してください。また、`async` 属性を使用することもできます。これは HTML ファイルのパース中にスクリプトを実行できるようにしますが、私たちの場合は、ドラッグスクリプトを実行する前に HTML 要素を完全に利用できるようにしておくことが重要です。 @@ -46,7 +46,7 @@ terrarium フォルダ内に `script.js` というファイルを作成します ### タスク -```html +```javascript dragElement(document.getElementById('plant1')); dragElement(document.getElementById('plant2')); dragElement(document.getElementById('plant3')); @@ -141,7 +141,7 @@ function pointerDrag(e) { `pos4 = e.clientY` の下にポインタイベントの操作を2つ追加して、初期関数を完成させます。 -```html +```javascript document.onpointermove = elementDrag; document.onpointerup = stopElementDrag; ``` @@ -191,7 +191,7 @@ function stopElementDrag() { これでプロジェクトが完成しました! -🥇おめでとうございます。素敵なテラリウムが完成しましたね。 ![finished terrarium](./images/terrarium-final.png) +🥇おめでとうございます。素敵なテラリウムが完成しましたね。 ![finished terrarium](../images/terrarium-final.png) --- diff --git a/3-terrarium/translations/README.ja.md b/3-terrarium/translations/README.ja.md index 152673e5..af8ca18e 100644 --- a/3-terrarium/translations/README.ja.md +++ b/3-terrarium/translations/README.ja.md @@ -2,13 +2,13 @@ ちょっとしたドラッグ＆ドロップのコードメディテーション。少しの HTML、JS、CSS で、Web インターフェースを構築し、スタイルを設定し、インタラクションを追加することができます。 -![my terrarium](images/screenshot_gray.png) +![my terrarium](../images/screenshot_gray.png) # レッスン -1. [HTML 入門](./1-intro-to-html/README.md) -2. [CSS 入門](./2-intro-to-css/README.md) -3. [DOM と JS Closures の紹介](./3-intro-to-DOM-and-closures/README.md) +1. [HTML 入門](../1-intro-to-html/translations/README.ja) +2. [CSS 入門](../2-intro-to-css/translations/README.ja) +3. [DOM の操作とクロージャ](../3-intro-to-DOM-and-closures/translations/README.ja) ## クレジット diff --git a/4-typing-game/translations/README.ja.md b/4-typing-game/translations/README.ja.md index 89f4410a..f6fcd18c 100644 --- a/4-typing-game/translations/README.ja.md +++ b/4-typing-game/translations/README.ja.md @@ -23,7 +23,7 @@ ## レッスン -[イベント駆動型プログラミングを用いたタイピングゲームの作成](./typing-game/translations/README.ja.md) +[イベント駆動型プログラミングを用いたタイピングゲームの作成](../typing-game/translations/README.ja.md) ## クレジット diff --git a/5-browser-extension/1-about-browsers/translations/README.ja.md b/5-browser-extension/1-about-browsers/translations/README.ja.md index a5fea876..76602525 100644 --- a/5-browser-extension/1-about-browsers/translations/README.ja.md +++ b/5-browser-extension/1-about-browsers/translations/README.ja.md @@ -65,7 +65,7 @@ - [API キー](https://www.co2signal.com/); このページのボックスにメールアドレスを入力します - [電力地図](https://www.electricitymap.org/map) に対応する地域のコード (例えばボストンでは 'US-NEISO' を使用しています) -- [スターターコード](../../start)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。 +- [スターターコード](/5-browser-extension/start/translations/README.ja)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。 - [NPM](https://www.npmjs.com) - NPM はパッケージ管理ツールです。ローカルにインストールすると、`package.json` ファイルに記載されているパッケージがインストールされ、Web アセットで使用されます。 ✅ この[優れた Learn モジュール](https://docs.microsoft.com/ja-jp/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)では、パッケージ管理の詳細を学ぶことができます。 diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md index df194736..c6ff28b9 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md @@ -12,11 +12,11 @@ ### 拡張機能で操作する要素の設定: -この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `
` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](.../.../1-about-browsers/translations/README.ja.md) を参照してください。 +この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `
` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](/5-browser-extension/1-about-browsers/translations/README.ja) を参照してください。 `index.js` ファイルの中で作業を行うには、様々なフィールドに関連付けられた値を保持するための `const` 変数を作成することから始めます。 -```JavaScript +```javascript // フォームフィールド const form = document.querySelector('.form-data'); const region = document.querySelector('.region-name'); @@ -38,7 +38,7 @@ const clearBtn = document.querySelector('.clear-btn'); 次に、フォームにイベントリスナーを追加し、フォームをリセットするクリアボタンを追加します。ユーザーがフォームを送信したり、リセットボタンをクリックしたりした場合に、そのリセットボタンをクリックするようにします。何かが起こるときのため、ファイルの一番下にアプリを初期化するための呼び出しを追加します。 -```JavaScript +```javascript form.addEventListener('submit', (e) => handleSubmit(e)); clearBtn.addEventListener('click', (e) => reset(e)); init(); @@ -50,7 +50,7 @@ init(); 今度は拡張機能を初期化する関数を作ります。これは init() と呼ばれています。 -```JavaScript +```javascript function init() { //何かがローカルストレージにある場合は、それをピックアップします。 const storedApiKey = localStorage.getItem('apiKey'); @@ -112,7 +112,7 @@ API キーに文字列の値を設定して、例えば Edge では Web ペー イベント引数 `(e)` を受け取る関数 `handleSubmit` を作成します。イベントの伝播を停止し (この場合、ブラウザの更新を停止したい)、新しい関数 `setUpUser` を呼び出し、引数 `apiKey.value` と `region.value` を渡します。このようにして、適切なフィールドが入力されたときに初期フォームから取得される2つの値を利用します。 -```JavaScript +```javascript function handleSubmit(e) { e.preventDefault(); setUpUser(apiKey.value, region.value); @@ -124,7 +124,7 @@ function handleSubmit(e) { 次に `setUpUser` 関数に進み、ここで apiKey と regionName のローカルストレージの値を設定します。新しい関数を追加します。 -```JavaScript +```javascript function setUpUser(apiKey, regionName) { localStorage.setItem('apiKey', apiKey); localStorage.setItem('regionName', regionName); @@ -153,7 +153,7 @@ function setUpUser(apiKey, regionName) { C02Signal API に問い合わせを行うための新しい関数を作成します: -```JavaScript +```javascript import axios from '../node_modules/axios'; async function displayCarbonUsage(apiKey, region) { diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md index c40e23b2..68f921eb 100644 --- a/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md @@ -60,7 +60,7 @@ `src/index.js` の中で作業し、`calculateColor()` という関数を、DOM にアクセスするために設定した一連の変数 `const` の後に追加します。 -```JavaScript +```javascript function calculateColor(value) { let co2Scale = [0, 150, 600, 750, 800]; let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02']; @@ -93,7 +93,7 @@ chrome.runtime には、あらゆる種類のバックグラウンドタスク ここで、`init()` 関数の中で、アイコンをジェネリックグリーンに設定して、chrome の `updateIcon` アクションを再度呼び出して起動します。 -```JavaScript +```javascript chrome.runtime.sendMessage({ action: 'updateIcon', value: { @@ -105,14 +105,14 @@ chrome.runtime.sendMessage({ 次に、C02Signal API が返すプロミスに追加して、先ほど作成した関数を呼び出します。 -```JavaScript +```javascript //let CO2... calculateColor(CO2); ``` 最後に、`/dist/background.js` で、これらのバックグラウンドアクションの呼び出し用のリスナーを追加します。 -```JavaScript +```javascript chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action === 'updateIcon') { chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); diff --git a/5-browser-extension/start/translations/README.ja.md b/5-browser-extension/start/translations/README.ja.md index 6121aa49..6f0a21bd 100644 --- a/5-browser-extension/start/translations/README.ja.md +++ b/5-browser-extension/start/translations/README.ja.md @@ -1,5 +1,7 @@ # カーボントリガーブラウザ拡張機能： スターターコード +**ローカルフォルダのWeb-Dev-For-Beginners/5-browser-extension/startをご覧ください** + tmrow の C02 シグナル API を使用して電力使用量を追跡するために、あなたの地域の電力使用量がどれだけ多いかをブラウザ上でリマインダーとして表示できるようにブラウザ拡張機能を構築します。この拡張機能をアドホックに使用することで、この情報に基づいてあなたの活動を判断することができます。 ![extension screenshot](../../extension-screenshot.png) diff --git a/5-browser-extension/translations/README.ja.md b/5-browser-extension/translations/README.ja.md index 88055778..ab869b57 100644 --- a/5-browser-extension/translations/README.ja.md +++ b/5-browser-extension/translations/README.ja.md @@ -8,13 +8,13 @@ Edge、Chrome、Firefox で動作するブラウザ拡張機能を構築しま ### トピック -1. [ブラウザについて](1-about-browsers/translations/README.ja.md) -2. [フォームとローカルストレージ](2-forms-browsers-local-storage/translations/README.ja.md) -3. [バックグラウンドタスクとパフォーマンス](3-background-tasks-and-performance/translations/README.ja.md) +1. [ブラウザのすべて](../1-about-browsers/translations/README.ja.md) +2. [API の呼び出し、ローカルストレージの使用](../2-forms-browsers-local-storage/translations/README.ja.md) +3. [バックグラウンドタスクとパフォーマンスについて学ぶ](../3-background-tasks-and-performance/translations/README.ja.md) ### クレジット -![a green browser extension](extension-screenshot.png) +![a green browser extension](../extension-screenshot.png) ## クレジット diff --git a/6-space-game/1-introduction/translations/README.ja.md b/6-space-game/1-introduction/translations/README.ja.md index ba772b7a..f2aa31af 100644 --- a/6-space-game/1-introduction/translations/README.ja.md +++ b/6-space-game/1-introduction/translations/README.ja.md @@ -29,7 +29,7 @@ クラスに特定の振る舞いを追加するために `クラス` を `継承` と組み合わせて使うという考え方です。 -✅ 継承は理解しておくべき重要な概念です。[継承に関する MdN の記事](https://developer.mozilla.org/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)で詳しく解説しています。 +✅ 継承は理解しておくべき重要な概念です。[継承に関する MDN の記事](https://developer.mozilla.org/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)で詳しく解説しています。 コードで表現すると、ゲームオブジェクトは通常このようになります。 @@ -136,7 +136,7 @@ const tree = createStatic(0,0, 'Tree'); ゲーム開発に共通するもう一つのパターンは、ゲームのユーザーエクスペリエンスとパフォーマンスを処理する問題を扱っています。 -## Pub/sub パターン +## Pub/Sub パターン ✅ Pub/Sub は 'publish-subscribe' の略です。 diff --git a/6-space-game/2-drawing-to-canvas/translations/README.ja.md b/6-space-game/2-drawing-to-canvas/translations/README.ja.md index 5ba9d1aa..50bbf243 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.ja.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.ja.md @@ -195,7 +195,7 @@ npm start ## Solution -まずはご自身で解決してみていただきたいですが、行き詰った場合は [solution](../solution/app.js) を参考にしてみてください。 +まずはご自身で解決してみていただきたいですが、行き詰った場合は [solution](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/2-drawing-to-canvas/solution) を参考にしてみてください。 --- diff --git a/6-space-game/translations/README.ja.md b/6-space-game/translations/README.ja.md index 29ce5995..f0d4b9d9 100644 --- a/6-space-game/translations/README.ja.md +++ b/6-space-game/translations/README.ja.md @@ -19,11 +19,11 @@ - 理論 - [JavaScript を使ったゲーム構築入門](../1-introduction/translations/README.ja.md) - 実践 - - [キャンバスへの描画](../2-drawing-to-canvas/translations/README.ja.md) + - [Canvas への描画](../2-drawing-to-canvas/translations/README.ja.md) - [画面の周りの要素の移動](../3-moving-elements-around/translations/README.ja.md) - [衝突の検出](../4-collision-detection/translations/README.ja.md) - [スコアの保持](../5-keeping-score/translations/README.ja.md) - - [ゲームの終了と再開](../6-end-condition/translations/README.ja.md) + - [ゲームの終了と再起動](../6-end-condition/translations/README.ja.md) ## クレジット diff --git a/7-bank-project/1-template-route/translations/README.ja.md b/7-bank-project/1-template-route/translations/README.ja.md index 9205b0e2..61447857 100644 --- a/7-bank-project/1-template-route/translations/README.ja.md +++ b/7-bank-project/1-template-route/translations/README.ja.md @@ -202,7 +202,7 @@ function updateRoute() { 2番目の部分はすでに `updateRoute` 関数で処理したので、現在の URL を更新する方法を見つけなければなりません。 -JavaScript、特に [history.pushState`](https://developer.mozilla.org/ja/docs/Web/API/History/pushState) を使う必要があります。これは HTML をリロードせずに URL を更新して閲覧履歴に新しいエントリを作成することができます。 +JavaScript、特に [`history.pushState`](https://developer.mozilla.org/ja/docs/Web/API/History/pushState) を使う必要があります。これは HTML をリロードせずに URL を更新して閲覧履歴に新しいエントリを作成することができます。 > 注: HTML アンカー要素[``](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a)は単独で使用して異なる URL へのハイパーリンクを作成することができますが、ブラウザはデフォルトで HTML をリロードさせることになります。カスタム javascript でルーティングを扱う際には、クリックイベントの preventDefault() 関数を使用して、この動作を防ぐ必要があります。 diff --git a/7-bank-project/2-forms/translations/README.ja.md b/7-bank-project/2-forms/translations/README.ja.md index 1d183066..619254b5 100644 --- a/7-bank-project/2-forms/translations/README.ja.md +++ b/7-bank-project/2-forms/translations/README.ja.md @@ -12,7 +12,7 @@ ### 前提条件 -このレッスンでは、Web アプリの [HTML テンプレートとルーティング](../../1-template-route/README.md)が完了している必要があります。また、アカウントを作成するためのデータを送信できるように、ローカルに [Node.js](https://nodejs.org/ja) と[サーバー API を実行する](../../api/translations/README.ja.md)をインストールする必要があります。 +このレッスンでは、Web アプリの [HTML テンプレートとルーティング](../../1-template-route/translations/README.ja)が完了している必要があります。また、アカウントを作成するためのデータを送信できるように、ローカルに [Node.js](https://nodejs.org/ja) と[サーバー API を実行する](../../api/translations/README.ja.md)をインストールする必要があります。 ターミナルでこのコマンドを実行することで、サーバーが正常に動作していることを確認することができます。 diff --git a/7-bank-project/3-data/translations/README.ja.md b/7-bank-project/3-data/translations/README.ja.md index c1f6e57c..ecec6b03 100644 --- a/7-bank-project/3-data/translations/README.ja.md +++ b/7-bank-project/3-data/translations/README.ja.md @@ -321,7 +321,7 @@ function updateElement(id, textOrNode) { ダッシュボードページのスタイリング例です。 -![スタイリング後のダッシュボードの結果例のスクリーンショット](../images/screen2.png) +![スタイリング後のダッシュボードの結果例のスクリーンショット](../../images/screen2.png) ## レッスン後の小テスト diff --git a/7-bank-project/4-state-management/translations/README.ja.md b/7-bank-project/4-state-management/translations/README.ja.md index 46592e0c..6f630f96 100644 --- a/7-bank-project/4-state-management/translations/README.ja.md +++ b/7-bank-project/4-state-management/translations/README.ja.md @@ -12,7 +12,7 @@ Web アプリケーションが成長するにつれて、すべてのデータ ### 前提条件 -このレッスンでは、Web アプリの[データ取得](./././3-data/translations/README.ja.md)の部分が完了している必要があります。また、アカウントデータを管理するためには、ローカルに [Node.js](https://nodejs.org/ja) をインストールし、[サーバー API を実行する](.../../api/translations/README.ja.md)をインストールする必要があります。 +このレッスンでは、Web アプリの[データ取得](../../3-data/translations/README.ja.md)の部分が完了している必要があります。また、アカウントデータを管理するためには、ローカルに [Node.js](https://nodejs.org/ja) をインストールし、[サーバー API を実行する](../../api/translations/README.ja.md)をインストールする必要があります。 ターミナルでこのコマンドを実行することで、サーバーが正常に動作しているかどうかをテストすることができます。 @@ -82,7 +82,7 @@ const account = state.account; データを保存するために `state` オブジェクトを配置したので、次のステップは更新を一元化することです。目的は、いつ変更があったのか、いつ変更が発生したのかを簡単に把握できるようにすることです。 -`state` オブジェクトに変更が加えられないようにするためには、`state` オブジェクトを [*immutable*](https://en.wikipedia.org/wiki/Immutable_object) と考えるのも良い方法です。これはまた、何かを変更したい場合には新しいステートオブジェクトを作成しなければならないことを意味します。このようにすることで、潜在的に望ましくない[副作用](https://en.wikipedia.org/wiki/Side_effect_(computer_science)についての保護を構築し、アンドゥ/リドゥの実装のようなアプリの新機能の可能性を開くと同時に、デバッグを容易にします。例えば、ステートに加えられたすべての変更をログに記録し、バグの原因を理解するために変更の履歴を保持することができます。 +`state` オブジェクトに変更が加えられないようにするためには、`state` オブジェクトを [*immutable*](https://en.wikipedia.org/wiki/Immutable_object) と考えるのも良い方法です。これはまた、何かを変更したい場合には新しいステートオブジェクトを作成しなければならないことを意味します。このようにすることで、潜在的に望ましくない[副作用](https://ja.wikipedia.org/wiki/%E5%89%AF%E4%BD%9C%E7%94%A8_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0))についての保護を構築し、アンドゥ/リドゥの実装のようなアプリの新機能の可能性を開くと同時に、デバッグを容易にします。例えば、ステートに加えられたすべての変更をログに記録し、バグの原因を理解するために変更の履歴を保持することができます。 JavaScript では、[`Object.freeze()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) を使って、オブジェクトの不変バージョンを作成することができます。不変オブジェクトに変更を加えようとすると例外が発生します。 diff --git a/7-bank-project/4-state-management/translations/assignment.ja.md b/7-bank-project/4-state-management/translations/assignment.ja.md index f1b25f22..b707bf65 100644 --- a/7-bank-project/4-state-management/translations/assignment.ja.md +++ b/7-bank-project/4-state-management/translations/assignment.ja.md @@ -16,7 +16,7 @@ 以下は、課題を完了した後の結果の例です。 -![「トランジションの追加」ダイアログの例を示すスクリーンショット](../../images/dialog.png) +![「トランジションの追加」ダイアログの例を示すスクリーンショット](../images/dialog.png) ## ルーブリック diff --git a/_sidebar.md b/_sidebar.md new file mode 100644 index 00000000..ad65ae9d --- /dev/null +++ b/_sidebar.md @@ -0,0 +1,56 @@ +- [このサイトについて](/.docs/about) + +- 入門 + + - [プログラミング言語と開発ツール入門](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja) + - [GitHub 入門(英語)](/1-getting-started-lessons/2-github-basics/) + - [アクセシブルな Web ページの作成](/1-getting-started-lessons/3-accessibility/translations/README.ja) + +- JavaScript の基本 + + - [データ型](/2-js-basics/1-data-types/translations/README.ja) + - [メソッドと関数](/2-js-basics/2-functions-methods/translations/README.ja) + - [意思決定](/2-js-basics/3-making-decisions/translations/README.ja) + - [配列とループ](/2-js-basics/4-arrays-loops/translations/README.ja) + +- マイテラリウム + + - [はじめに](/3-terrarium/translations/README.ja) + - [1. HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja) + - [2. CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja) + - [3. DOM の操作とクロージャ](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja) + - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) + +- タイピングゲーム + + - [はじめに](/4-typing-game/translations/README.ja) + - [タイピングゲームの作成](/4-typing-game/typing-game/translations/README.ja) + - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/4-typing-game/solution) + +- ブラウザ拡張機能 + + - [はじめに](/5-browser-extension/translations/README.ja) + - [1. ブラウザのすべて](/5-browser-extension/1-about-browsers/translations/README.ja) + - [2. API とローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja) + - [3. バックグラウンドとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja) + - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) + +- スペースゲーム + + - [はじめに](/6-space-game/translations/README.ja) + - [1. ゲーム構築入門](/6-space-game/1-introduction/translations/README.ja) + - [2. Canvas への描画](/6-space-game/2-drawing-to-canvas/translations/README.ja) + - [3. 画面の周りの要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja) + - [4. 衝突の検出](/6-space-game/4-collision-detection/translations/README.ja) + - [5. スコアの保持](/6-space-game/5-keeping-score/translations/README.ja) + - [6. ゲームの終了と再起動](/6-space-game/6-end-condition/translations/README.ja) + - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) + +- バンキングアプリ + + - [はじめに](/7-bank-project/translations/README.ja) + - [1. Web アプリの HTML テンプレートとルート](/7-bank-project/1-template-route/translations/README.ja) + - [2. ログインと登録フォームの構築](/7-bank-project/2-forms/translations/README.ja) + - [3. データの取得と利用方法](/7-bank-project/3-data/translations/README.ja) + - [4. 状態管理の概念](/7-bank-project/4-state-management/translations/README.ja) + - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) \ No newline at end of file diff --git a/index.html b/index.html index 202a4877..51fe3220 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,29 @@ - + + - Document + 初心者のためのWeb開発 by Microsoft [Web Development for Beginners] (forked by namosuke for Japanese) - - - + + + + +
- + + \ No newline at end of file diff --git a/translations/README.ja.md b/translations/README.ja.md index 31613077..c82b1c33 100644 --- a/translations/README.ja.md +++ b/translations/README.ja.md @@ -4,11 +4,11 @@ **著者の Jen Looper さん、Chris Noring さん、Christopher Harrison さん、Jasmine Greenaway さん、Yohan Lasorsa さん、Floor Drees さん、そしてスケッチノートアーティストの Tomomi Imura さんに心から感謝します。** -> **先生方**、このカリキュラムをどのように使用するか、[いくつかの提案があります](for-teachers.ja.md)。あなた自身のレッスンを作成したい場合は、[レッスンテンプレート](lesson-template/translations/README.ja.md)もご用意しています。 +> **先生方**、このカリキュラムをどのように使用するか、[いくつかの提案があります](/translations/for-teachers.ja.md)。あなた自身のレッスンを作成したい場合は、[レッスンテンプレート](/lesson-template/)もご用意しています。 > **学生の皆さん**、このカリキュラムを自分で使うためには、リポジトリ全体をフォークして、講義前の小テストから始めて、講義を読んで、残りのアクティビティを自分で完成させてください。解答コードは各レッスンの /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") > 上の画像をクリックすると、プロジェクトとそれを作成した人々についてのビデオを見ることができます。 From 540beaee3d6d662b4d9c042cdbcd6ed86c0d1cb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Mon, 8 Feb 2021 21:21:20 +0900 Subject: [PATCH 11/27] =?UTF-8?q?=E3=83=91=E3=82=B9=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- {.docs => _docs}/about.md | 2 +- _sidebar.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename {.docs => _docs}/about.md (52%) diff --git a/.docs/about.md b/_docs/about.md similarity index 52% rename from .docs/about.md rename to _docs/about.md index cae1ee45..e5ff0fcf 100644 --- a/.docs/about.md +++ b/_docs/about.md @@ -1,6 +1,6 @@ # このサイトについて -- このWebサイトは、[MITライセンス](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/LICENSE)で公開されているMicrosoftのプロジェクト「[Web Development for Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)」を[namosuke](https://github.com/namosuke)がフォークし、日本語話者がより学習しやすくなるよう編纂し、GitHub Pagesで公開したものです。 +- このWebサイトは、運営者である[namosuke](https://github.com/namosuke)が[MITライセンス](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/LICENSE)で公開されているMicrosoftのプロジェクト「[Web Development for Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)」をフォークし、日本語話者がより学習しやすくなるよう編纂し、公開したものです。 - このWebサイトは[こちらのリポジトリ](https://github.com/namosuke/Web-Dev-For-Beginners)からビルドされています。日本語訳以外のファイルはMicrosoftから公開されているものと同一です。 - 日本語訳の大半はMicrosoftによる翻訳です。一部明らかな誤訳等は運営者が修正しています。 - PR及びissueは歓迎します。 diff --git a/_sidebar.md b/_sidebar.md index ad65ae9d..ce7f7b23 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -1,4 +1,4 @@ -- [このサイトについて](/.docs/about) +- [このサイトについて](/_docs/about) - 入門 From 169c2763049eaf866a1cbd4f79ed5f4a89ac0457 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Mon, 8 Feb 2021 21:26:02 +0900 Subject: [PATCH 12/27] =?UTF-8?q?OGP=E7=AD=89=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.html b/index.html index 51fe3220..06dab976 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,11 @@ + + + + + From 44591f03d88bb5d7077e8a0fe5301418cd3f44bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Mon, 8 Feb 2021 21:52:22 +0900 Subject: [PATCH 13/27] =?UTF-8?q?=E3=83=87=E3=83=A2=E3=81=AE=E3=83=AA?= =?UTF-8?q?=E3=83=B3=E3=82=AF=E8=BF=BD=E5=8A=A0,=20=E3=82=AB=E3=83=AA?= =?UTF-8?q?=E3=82=AD=E3=83=A5=E3=83=A9=E3=83=A0=E3=81=AE=E3=83=AA=E3=83=B3?= =?UTF-8?q?=E3=82=AF=E5=88=87=E3=82=8C=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _sidebar.md | 4 ++++ translations/README.ja.md | 36 ++++++++++++++++++------------------ 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/_sidebar.md b/_sidebar.md index ce7f7b23..768e18da 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -19,12 +19,14 @@ - [1. HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja) - [2. CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja) - [3. DOM の操作とクロージャ](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja) + - [(デモ)](https://wdfb.netlify.app/3-terrarium/solution/) - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) - タイピングゲーム - [はじめに](/4-typing-game/translations/README.ja) - [タイピングゲームの作成](/4-typing-game/typing-game/translations/README.ja) + - [(デモ)](https://wdfb.netlify.app/4-typing-game/solution/) - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/4-typing-game/solution) - ブラウザ拡張機能 @@ -44,6 +46,7 @@ - [4. 衝突の検出](/6-space-game/4-collision-detection/translations/README.ja) - [5. スコアの保持](/6-space-game/5-keeping-score/translations/README.ja) - [6. ゲームの終了と再起動](/6-space-game/6-end-condition/translations/README.ja) + - [(デモ)](https://wdfb.netlify.app/6-space-game/solution/) - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) - バンキングアプリ @@ -53,4 +56,5 @@ - [2. ログインと登録フォームの構築](/7-bank-project/2-forms/translations/README.ja) - [3. データの取得と利用方法](/7-bank-project/3-data/translations/README.ja) - [4. 状態管理の概念](/7-bank-project/4-state-management/translations/README.ja) + - [(デモ)](https://wdfb.netlify.app/7-bank-project/solution) - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) \ No newline at end of file diff --git a/translations/README.ja.md b/translations/README.ja.md index c82b1c33..570631da 100644 --- a/translations/README.ja.md +++ b/translations/README.ja.md @@ -42,29 +42,29 @@ | | プロジェクト名 | 教える概念 | 学習の目的 | 関連するレッスン | レッスンの記載 | スケッチノート | 課題 | レッスン前の小テスト | レッスン後の小テスト | ビデオ | 著者 | | :---: | :-----------------------------------------------------------: | :--------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------: | :------------: | :------------: | :---: | :------------------: | :------------------: | :----: | :---------------------: | | 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/) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Floor | | 03 | 入門 | アクセシビリティ | Web アクセシビリティの基礎を学ぶ | [アクセシビリティの基本](/1-getting-started-lessons/3-accessibility/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Christopher | | 04 | JS の基礎 | JavaScript のデータ型 | JavaScript のデータ型の基礎 | [データ型](/2-js-basics/1-data-types/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | | 05 | JS の基礎 | 関数とメソッド | アプリケーションのロジックフローを管理するための機能とメソッドを学ぶ | [関数とメソッド](/2-js-basics/2-functions-methods/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine and Christopher | | 06 | JS の基礎 | JS での意思決定 | 意思決定の方法を使ってコードに条件を作成する方法を学ぶ | [意思決定](/2-js-basics/3-making-decisions/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | | 07 | JS の基礎 | 配列とループ | JavaScript で配列やループを使ってデータを扱う | [配列とループ](/2-js-basics/4-arrays-loops/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | -| 08 | [テラリウム](/3-terrarium/solution/translations/README.ja.md) | HTML の実践 | レイアウトの構築を中心に、オンラインテラリウムを作成するための HTML を構築する | [HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 09 | [テラリウム](/3-terrarium/solution/translations/README.ja.md) | CSS の実践 | レスポンシブ対応など CSS の基本を中心に、オンラインテラリウムのスタイルを整える CSS を構築します。 | [CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 10 | [テラリウム](/3-terrarium/solution) | JavaScript のクロージャ、DOM の操作 | テラリウムをドラッグ＆ドロップのインターフェイスとして機能させるための JavaScript を構築します。 | [JavaScript のクロージャ、DOM の操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 11 | [タイピングゲーム](/4-typing-game/solution) | タイピングゲームを構築 | キーボードイベントを使用して JavaScript アプリのロジックを駆動する方法を学びます。 | [イベント駆動型プログラミング](/4-typing-game/typing-game/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher | -| 12 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 13 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen | -| 14 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen | -| 15 | [スペースゲーム](/6-space-game/solution) | JavaScript を使ったより高度なゲーム開発 | ゲーム構築に備えて、クラスとコンポジションの両方を使った継承と Pub/Sub パターンを学ぶ | [高度なゲーム開発入門](/6-space-game/1-introduction/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 16 | [スペースゲーム](/6-space-game/solution) | キャンバスへの描画 | 画面に要素を描画するために使用される Canvas API について説明します。 | [キャンバスへの描画](/6-space-game/2-drawing-to-canvas/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 17 | [スペースゲーム](/6-space-game/solution) | 画面の周りの要素の移動 | 直交座標と Canvas API を使用して、要素がどのように動きを得ることができるかをご覧ください。 | [要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 18 | [スペースゲーム](/6-space-game/solution) | 衝突の検出 | 要素を衝突させ、キープレスでお互いに反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します。 | [衝突の検出](/6-space-game/4-collision-detection/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 19 | [スペースゲーム](/6-space-game/solution) | スコアの保持 | ゲームのステータスや成績に応じて計算を行う | [スコアの保持](/6-space-game/5-keeping-score/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 20 | [スペースゲーム](/6-space-game/solution) | ゲームの終了と再開 | アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学ぶことができます。 | [終了条件](/6-space-game/6-end-condition/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 21 | [バンキングアプリケーション](/7-bank-project/solution) | Web アプリの HTML テンプレートとルート | ルーティングと HTML テンプレートを使ったマルチページサイトのアーキテクチャの足場の作り方を学ぶ | [HTML テンプレートとルート](/7-bank-project/1-template-route/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | -| 22 | [バンキングアプリケーション](/7-bank-project/solution) | ログインと登録フォームの構築 | フォームの構築と検証ルーチンの渡し方について学ぶ | [フォーム](/7-bank-project/2-forms/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | -| 23 | [バンキングアプリケーション](/7-bank-project/solution) | データの取得と利用方法 | アプリのデータの出入り、データの取得方法、保存方法、廃棄方法 | [データ](/7-bank-project/3-data/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | -| 24 | [バンキングアプリケーション](/7-bank-project/solution) | 状態管理の概念 | アプリの状態を保持する方法とプログラムで管理する方法を学ぶ | [状態管理](/7-bank-project/4-state-management/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan | +| 08 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | HTML の実践 | レイアウトの構築を中心に、オンラインテラリウムを作成するための HTML を構築する | [HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 09 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | CSS の実践 | レスポンシブ対応など CSS の基本を中心に、オンラインテラリウムのスタイルを整える CSS を構築します。 | [CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 10 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | JavaScript のクロージャ、DOM の操作 | テラリウムをドラッグ＆ドロップのインターフェイスとして機能させるための JavaScript を構築します。 | [JavaScript のクロージャ、DOM の操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 11 | [タイピングゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/4-typing-game/solution) | タイピングゲームを構築 | キーボードイベントを使用して JavaScript アプリのロジックを駆動する方法を学びます。 | [イベント駆動型プログラミング](/4-typing-game/typing-game/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher | +| 12 | グリーンブラウザ拡張機能 | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 13 | グリーンブラウザ拡張機能 | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen | +| 14 | グリーンブラウザ拡張機能 | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen | +| 15 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | JavaScript を使ったより高度なゲーム開発 | ゲーム構築に備えて、クラスとコンポジションの両方を使った継承と Pub/Sub パターンを学ぶ | [高度なゲーム開発入門](/6-space-game/1-introduction/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 16 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | キャンバスへの描画 | 画面に要素を描画するために使用される Canvas API について説明します。 | [キャンバスへの描画](/6-space-game/2-drawing-to-canvas/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 17 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | 画面の周りの要素の移動 | 直交座標と Canvas API を使用して、要素がどのように動きを得ることができるかをご覧ください。 | [要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 18 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | 衝突の検出 | 要素を衝突させ、キープレスでお互いに反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します。 | [衝突の検出](/6-space-game/4-collision-detection/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 19 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | スコアの保持 | ゲームのステータスや成績に応じて計算を行う | [スコアの保持](/6-space-game/5-keeping-score/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 20 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | ゲームの終了と再開 | アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学ぶことができます。 | [終了条件](/6-space-game/6-end-condition/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 21 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | Web アプリの HTML テンプレートとルート | ルーティングと HTML テンプレートを使ったマルチページサイトのアーキテクチャの足場の作り方を学ぶ | [HTML テンプレートとルート](/7-bank-project/1-template-route/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | +| 22 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | ログインと登録フォームの構築 | フォームの構築と検証ルーチンの渡し方について学ぶ | [フォーム](/7-bank-project/2-forms/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | +| 23 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | データの取得と利用方法 | アプリのデータの出入り、データの取得方法、保存方法、廃棄方法 | [データ](/7-bank-project/3-data/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | +| 24 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | 状態管理の概念 | アプリの状態を保持する方法とプログラムで管理する方法を学ぶ | [状態管理](/7-bank-project/4-state-management/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan | ## オフラインアクセス From 7078ef6cd45c963898ca056c5b3607e5ac84f970 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Mon, 8 Feb 2021 21:55:36 +0900 Subject: [PATCH 14/27] =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=AF=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- translations/README.ja.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/translations/README.ja.md b/translations/README.ja.md index 570631da..e27ec14c 100644 --- a/translations/README.ja.md +++ b/translations/README.ja.md @@ -52,9 +52,9 @@ | 09 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | CSS の実践 | レスポンシブ対応など CSS の基本を中心に、オンラインテラリウムのスタイルを整える CSS を構築します。 | [CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | | 10 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | JavaScript のクロージャ、DOM の操作 | テラリウムをドラッグ＆ドロップのインターフェイスとして機能させるための JavaScript を構築します。 | [JavaScript のクロージャ、DOM の操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | | 11 | [タイピングゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/4-typing-game/solution) | タイピングゲームを構築 | キーボードイベントを使用して JavaScript アプリのロジックを駆動する方法を学びます。 | [イベント駆動型プログラミング](/4-typing-game/typing-game/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher | -| 12 | グリーンブラウザ拡張機能 | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 13 | グリーンブラウザ拡張機能 | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen | -| 14 | グリーンブラウザ拡張機能 | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen | +| 12 | [グリーンブラウザ拡張機能](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 13 | [グリーンブラウザ拡張機能](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen | +| 14 | [グリーンブラウザ拡張機能](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen | | 15 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | JavaScript を使ったより高度なゲーム開発 | ゲーム構築に備えて、クラスとコンポジションの両方を使った継承と Pub/Sub パターンを学ぶ | [高度なゲーム開発入門](/6-space-game/1-introduction/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | | 16 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | キャンバスへの描画 | 画面に要素を描画するために使用される Canvas API について説明します。 | [キャンバスへの描画](/6-space-game/2-drawing-to-canvas/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | | 17 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | 画面の周りの要素の移動 | 直交座標と Canvas API を使用して、要素がどのように動きを得ることができるかをご覧ください。 | [要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | From 3c752f334f5efd29387830f928f5a9a3ec4e8c51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Tue, 9 Feb 2021 04:47:54 +0900 Subject: [PATCH 15/27] =?UTF-8?q?PR=E7=94=A8=E3=81=AB=E7=8B=AC=E8=87=AA?= =?UTF-8?q?=E3=81=AE=E5=A4=89=E6=9B=B4=E3=82=92=E5=8F=96=E6=B6=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../translations/README.ja.md | 2 +- .../start/translations/README.ja.md | 2 - .../translations/README.ja.md | 2 +- _docs/about.md | 12 ---- _sidebar.md | 60 ------------------- translations/README.ja.md | 38 ++++++------ 6 files changed, 21 insertions(+), 95 deletions(-) delete mode 100644 _docs/about.md delete mode 100644 _sidebar.md diff --git a/5-browser-extension/1-about-browsers/translations/README.ja.md b/5-browser-extension/1-about-browsers/translations/README.ja.md index 76602525..a5fea876 100644 --- a/5-browser-extension/1-about-browsers/translations/README.ja.md +++ b/5-browser-extension/1-about-browsers/translations/README.ja.md @@ -65,7 +65,7 @@ - [API キー](https://www.co2signal.com/); このページのボックスにメールアドレスを入力します - [電力地図](https://www.electricitymap.org/map) に対応する地域のコード (例えばボストンでは 'US-NEISO' を使用しています) -- [スターターコード](/5-browser-extension/start/translations/README.ja)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。 +- [スターターコード](../../start)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。 - [NPM](https://www.npmjs.com) - NPM はパッケージ管理ツールです。ローカルにインストールすると、`package.json` ファイルに記載されているパッケージがインストールされ、Web アセットで使用されます。 ✅ この[優れた Learn モジュール](https://docs.microsoft.com/ja-jp/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)では、パッケージ管理の詳細を学ぶことができます。 diff --git a/5-browser-extension/start/translations/README.ja.md b/5-browser-extension/start/translations/README.ja.md index 6f0a21bd..6121aa49 100644 --- a/5-browser-extension/start/translations/README.ja.md +++ b/5-browser-extension/start/translations/README.ja.md @@ -1,7 +1,5 @@ # カーボントリガーブラウザ拡張機能： スターターコード -**ローカルフォルダのWeb-Dev-For-Beginners/5-browser-extension/startをご覧ください** - tmrow の C02 シグナル API を使用して電力使用量を追跡するために、あなたの地域の電力使用量がどれだけ多いかをブラウザ上でリマインダーとして表示できるようにブラウザ拡張機能を構築します。この拡張機能をアドホックに使用することで、この情報に基づいてあなたの活動を判断することができます。 ![extension screenshot](../../extension-screenshot.png) diff --git a/6-space-game/2-drawing-to-canvas/translations/README.ja.md b/6-space-game/2-drawing-to-canvas/translations/README.ja.md index 50bbf243..5ba9d1aa 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.ja.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.ja.md @@ -195,7 +195,7 @@ npm start ## Solution -まずはご自身で解決してみていただきたいですが、行き詰った場合は [solution](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/2-drawing-to-canvas/solution) を参考にしてみてください。 +まずはご自身で解決してみていただきたいですが、行き詰った場合は [solution](../solution/app.js) を参考にしてみてください。 --- diff --git a/_docs/about.md b/_docs/about.md deleted file mode 100644 index e5ff0fcf..00000000 --- a/_docs/about.md +++ /dev/null @@ -1,12 +0,0 @@ -# このサイトについて - -- このWebサイトは、運営者である[namosuke](https://github.com/namosuke)が[MITライセンス](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/LICENSE)で公開されているMicrosoftのプロジェクト「[Web Development for Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)」をフォークし、日本語話者がより学習しやすくなるよう編纂し、公開したものです。 -- このWebサイトは[こちらのリポジトリ](https://github.com/namosuke/Web-Dev-For-Beginners)からビルドされています。日本語訳以外のファイルはMicrosoftから公開されているものと同一です。 -- 日本語訳の大半はMicrosoftによる翻訳です。一部明らかな誤訳等は運営者が修正しています。 -- PR及びissueは歓迎します。 -- フォーク元との最終同期日は 2021年2月8日 です。 - -## カリキュラム - -- [カリキュラム](/) -- [教育者の方へ](/translations/for-teachers.ja) \ No newline at end of file diff --git a/_sidebar.md b/_sidebar.md deleted file mode 100644 index 768e18da..00000000 --- a/_sidebar.md +++ /dev/null @@ -1,60 +0,0 @@ -- [このサイトについて](/_docs/about) - -- 入門 - - - [プログラミング言語と開発ツール入門](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja) - - [GitHub 入門(英語)](/1-getting-started-lessons/2-github-basics/) - - [アクセシブルな Web ページの作成](/1-getting-started-lessons/3-accessibility/translations/README.ja) - -- JavaScript の基本 - - - [データ型](/2-js-basics/1-data-types/translations/README.ja) - - [メソッドと関数](/2-js-basics/2-functions-methods/translations/README.ja) - - [意思決定](/2-js-basics/3-making-decisions/translations/README.ja) - - [配列とループ](/2-js-basics/4-arrays-loops/translations/README.ja) - -- マイテラリウム - - - [はじめに](/3-terrarium/translations/README.ja) - - [1. HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja) - - [2. CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja) - - [3. DOM の操作とクロージャ](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja) - - [(デモ)](https://wdfb.netlify.app/3-terrarium/solution/) - - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) - -- タイピングゲーム - - - [はじめに](/4-typing-game/translations/README.ja) - - [タイピングゲームの作成](/4-typing-game/typing-game/translations/README.ja) - - [(デモ)](https://wdfb.netlify.app/4-typing-game/solution/) - - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/4-typing-game/solution) - -- ブラウザ拡張機能 - - - [はじめに](/5-browser-extension/translations/README.ja) - - [1. ブラウザのすべて](/5-browser-extension/1-about-browsers/translations/README.ja) - - [2. API とローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja) - - [3. バックグラウンドとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja) - - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) - -- スペースゲーム - - - [はじめに](/6-space-game/translations/README.ja) - - [1. ゲーム構築入門](/6-space-game/1-introduction/translations/README.ja) - - [2. Canvas への描画](/6-space-game/2-drawing-to-canvas/translations/README.ja) - - [3. 画面の周りの要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja) - - [4. 衝突の検出](/6-space-game/4-collision-detection/translations/README.ja) - - [5. スコアの保持](/6-space-game/5-keeping-score/translations/README.ja) - - [6. ゲームの終了と再起動](/6-space-game/6-end-condition/translations/README.ja) - - [(デモ)](https://wdfb.netlify.app/6-space-game/solution/) - - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) - -- バンキングアプリ - - - [はじめに](/7-bank-project/translations/README.ja) - - [1. Web アプリの HTML テンプレートとルート](/7-bank-project/1-template-route/translations/README.ja) - - [2. ログインと登録フォームの構築](/7-bank-project/2-forms/translations/README.ja) - - [3. データの取得と利用方法](/7-bank-project/3-data/translations/README.ja) - - [4. 状態管理の概念](/7-bank-project/4-state-management/translations/README.ja) - - [(デモ)](https://wdfb.netlify.app/7-bank-project/solution) - - [(参考コード)](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) \ No newline at end of file diff --git a/translations/README.ja.md b/translations/README.ja.md index e27ec14c..db1a236e 100644 --- a/translations/README.ja.md +++ b/translations/README.ja.md @@ -4,7 +4,7 @@ **著者の Jen Looper さん、Chris Noring さん、Christopher Harrison さん、Jasmine Greenaway さん、Yohan Lasorsa さん、Floor Drees さん、そしてスケッチノートアーティストの Tomomi Imura さんに心から感謝します。** -> **先生方**、このカリキュラムをどのように使用するか、[いくつかの提案があります](/translations/for-teachers.ja.md)。あなた自身のレッスンを作成したい場合は、[レッスンテンプレート](/lesson-template/)もご用意しています。 +> **先生方**、このカリキュラムをどのように使用するか、[いくつかの提案があります](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-13441-cxa) や以下のビデオを見ることをお勧めします。 @@ -42,29 +42,29 @@ | | プロジェクト名 | 教える概念 | 学習の目的 | 関連するレッスン | レッスンの記載 | スケッチノート | 課題 | レッスン前の小テスト | レッスン後の小テスト | ビデオ | 著者 | | :---: | :-----------------------------------------------------------: | :--------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------: | :------------: | :------------: | :---: | :------------------: | :------------------: | :----: | :---------------------: | | 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/) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | 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 | | 04 | JS の基礎 | JavaScript のデータ型 | JavaScript のデータ型の基礎 | [データ型](/2-js-basics/1-data-types/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | | 05 | JS の基礎 | 関数とメソッド | アプリケーションのロジックフローを管理するための機能とメソッドを学ぶ | [関数とメソッド](/2-js-basics/2-functions-methods/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine and Christopher | | 06 | JS の基礎 | JS での意思決定 | 意思決定の方法を使ってコードに条件を作成する方法を学ぶ | [意思決定](/2-js-basics/3-making-decisions/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | | 07 | JS の基礎 | 配列とループ | JavaScript で配列やループを使ってデータを扱う | [配列とループ](/2-js-basics/4-arrays-loops/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine | -| 08 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | HTML の実践 | レイアウトの構築を中心に、オンラインテラリウムを作成するための HTML を構築する | [HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 09 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | CSS の実践 | レスポンシブ対応など CSS の基本を中心に、オンラインテラリウムのスタイルを整える CSS を構築します。 | [CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 10 | [テラリウム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/3-terrarium/solution) | JavaScript のクロージャ、DOM の操作 | テラリウムをドラッグ＆ドロップのインターフェイスとして機能させるための JavaScript を構築します。 | [JavaScript のクロージャ、DOM の操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 11 | [タイピングゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/4-typing-game/solution) | タイピングゲームを構築 | キーボードイベントを使用して JavaScript アプリのロジックを駆動する方法を学びます。 | [イベント駆動型プログラミング](/4-typing-game/typing-game/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher | -| 12 | [グリーンブラウザ拡張機能](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | -| 13 | [グリーンブラウザ拡張機能](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen | -| 14 | [グリーンブラウザ拡張機能](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension/solution) | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen | -| 15 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | JavaScript を使ったより高度なゲーム開発 | ゲーム構築に備えて、クラスとコンポジションの両方を使った継承と Pub/Sub パターンを学ぶ | [高度なゲーム開発入門](/6-space-game/1-introduction/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 16 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | キャンバスへの描画 | 画面に要素を描画するために使用される Canvas API について説明します。 | [キャンバスへの描画](/6-space-game/2-drawing-to-canvas/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 17 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | 画面の周りの要素の移動 | 直交座標と Canvas API を使用して、要素がどのように動きを得ることができるかをご覧ください。 | [要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 18 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | 衝突の検出 | 要素を衝突させ、キープレスでお互いに反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します。 | [衝突の検出](/6-space-game/4-collision-detection/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 19 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | スコアの保持 | ゲームのステータスや成績に応じて計算を行う | [スコアの保持](/6-space-game/5-keeping-score/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 20 | [スペースゲーム](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game/solution) | ゲームの終了と再開 | アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学ぶことができます。 | [終了条件](/6-space-game/6-end-condition/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | -| 21 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | Web アプリの HTML テンプレートとルート | ルーティングと HTML テンプレートを使ったマルチページサイトのアーキテクチャの足場の作り方を学ぶ | [HTML テンプレートとルート](/7-bank-project/1-template-route/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | -| 22 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | ログインと登録フォームの構築 | フォームの構築と検証ルーチンの渡し方について学ぶ | [フォーム](/7-bank-project/2-forms/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | -| 23 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | データの取得と利用方法 | アプリのデータの出入り、データの取得方法、保存方法、廃棄方法 | [データ](/7-bank-project/3-data/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | -| 24 | [バンキングアプリケーション](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project/solution) | 状態管理の概念 | アプリの状態を保持する方法とプログラムで管理する方法を学ぶ | [状態管理](/7-bank-project/4-state-management/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan | +| 08 | [テラリウム](/3-terrarium/solution/translations/README.ja.md) | HTML の実践 | レイアウトの構築を中心に、オンラインテラリウムを作成するための HTML を構築する | [HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 09 | [テラリウム](/3-terrarium/solution/translations/README.ja.md) | CSS の実践 | レスポンシブ対応など CSS の基本を中心に、オンラインテラリウムのスタイルを整える CSS を構築します。 | [CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 10 | [テラリウム](/3-terrarium/solution) | JavaScript のクロージャ、DOM の操作 | テラリウムをドラッグ＆ドロップのインターフェイスとして機能させるための JavaScript を構築します。 | [JavaScript のクロージャ、DOM の操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 11 | [タイピングゲーム](/4-typing-game/solution) | タイピングゲームを構築 | キーボードイベントを使用して JavaScript アプリのロジックを駆動する方法を学びます。 | [イベント駆動型プログラミング](/4-typing-game/typing-game/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher | +| 12 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen | +| 13 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen | +| 14 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen | +| 15 | [スペースゲーム](/6-space-game/solution) | JavaScript を使ったより高度なゲーム開発 | ゲーム構築に備えて、クラスとコンポジションの両方を使った継承と Pub/Sub パターンを学ぶ | [高度なゲーム開発入門](/6-space-game/1-introduction/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 16 | [スペースゲーム](/6-space-game/solution) | キャンバスへの描画 | 画面に要素を描画するために使用される Canvas API について説明します。 | [キャンバスへの描画](/6-space-game/2-drawing-to-canvas/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 17 | [スペースゲーム](/6-space-game/solution) | 画面の周りの要素の移動 | 直交座標と Canvas API を使用して、要素がどのように動きを得ることができるかをご覧ください。 | [要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 18 | [スペースゲーム](/6-space-game/solution) | 衝突の検出 | 要素を衝突させ、キープレスでお互いに反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します。 | [衝突の検出](/6-space-game/4-collision-detection/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 19 | [スペースゲーム](/6-space-game/solution) | スコアの保持 | ゲームのステータスや成績に応じて計算を行う | [スコアの保持](/6-space-game/5-keeping-score/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 20 | [スペースゲーム](/6-space-game/solution) | ゲームの終了と再開 | アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学ぶことができます。 | [終了条件](/6-space-game/6-end-condition/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris | +| 21 | [バンキングアプリケーション](/7-bank-project/solution) | Web アプリの HTML テンプレートとルート | ルーティングと HTML テンプレートを使ったマルチページサイトのアーキテクチャの足場の作り方を学ぶ | [HTML テンプレートとルート](/7-bank-project/1-template-route/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | +| 22 | [バンキングアプリケーション](/7-bank-project/solution) | ログインと登録フォームの構築 | フォームの構築と検証ルーチンの渡し方について学ぶ | [フォーム](/7-bank-project/2-forms/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | +| 23 | [バンキングアプリケーション](/7-bank-project/solution) | データの取得と利用方法 | アプリのデータの出入り、データの取得方法、保存方法、廃棄方法 | [データ](/7-bank-project/3-data/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan | +| 24 | [バンキングアプリケーション](/7-bank-project/solution) | 状態管理の概念 | アプリの状態を保持する方法とプログラムで管理する方法を学ぶ | [状態管理](/7-bank-project/4-state-management/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan | ## オフラインアクセス From 962caa22df55bb46feca08e54a0650784635181e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Tue, 9 Feb 2021 04:57:12 +0900 Subject: [PATCH 16/27] =?UTF-8?q?PR=E7=94=A8=E3=81=AB=E7=8B=AC=E8=87=AA?= =?UTF-8?q?=E3=81=AE=E5=A4=89=E6=9B=B4=E3=81=AE=E5=8F=96=E6=B6=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 06dab976..75775de4 100644 --- a/index.html +++ b/index.html @@ -1,31 +1,23 @@ - + - 初心者のためのWeb開発 by Microsoft [Web Development for Beginners] (forked by namosuke for Japanese) + Document - - - - - - + - +
From 67fa25a120bc7b2ecf4e44f9a11930b7cb7fd235 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Tue, 9 Feb 2021 05:10:24 +0900 Subject: [PATCH 17/27] =?UTF-8?q?=E8=87=AA=E5=8B=95=E6=95=B4=E5=BD=A2?= =?UTF-8?q?=E3=81=AE=E5=8F=96=E6=B6=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 75775de4..202a4877 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,12 @@ - Document - - - - + +
- - \ No newline at end of file + From 641c905b5dcdde3ce852fb98e5802e82bdfc9992 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=8A=E3=83=A2=E3=81=99=E3=81=91?= Date: Tue, 9 Feb 2021 06:28:25 +0900 Subject: [PATCH 18/27] =?UTF-8?q?=E6=8B=A1=E5=BC=B5=E5=AD=90=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 3-terrarium/translations/README.ja.md | 6 +++--- .../translations/README.ja.md | 2 +- 7-bank-project/2-forms/translations/README.ja.md | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/3-terrarium/translations/README.ja.md b/3-terrarium/translations/README.ja.md index af8ca18e..7c0ef58e 100644 --- a/3-terrarium/translations/README.ja.md +++ b/3-terrarium/translations/README.ja.md @@ -6,9 +6,9 @@ # レッスン -1. [HTML 入門](../1-intro-to-html/translations/README.ja) -2. [CSS 入門](../2-intro-to-css/translations/README.ja) -3. [DOM の操作とクロージャ](../3-intro-to-DOM-and-closures/translations/README.ja) +1. [HTML 入門](../1-intro-to-html/translations/README.ja.md) +2. [CSS 入門](../2-intro-to-css/translations/README.ja.md) +3. [DOM の操作とクロージャ](../3-intro-to-DOM-and-closures/translations/README.ja.md) ## クレジット diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md index c6ff28b9..257fdf1b 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md @@ -12,7 +12,7 @@ ### 拡張機能で操作する要素の設定: -この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `
` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](/5-browser-extension/1-about-browsers/translations/README.ja) を参照してください。 +この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `
` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](/5-browser-extension/1-about-browsers/translations/README.ja.md) を参照してください。 `index.js` ファイルの中で作業を行うには、様々なフィールドに関連付けられた値を保持するための `const` 変数を作成することから始めます。 diff --git a/7-bank-project/2-forms/translations/README.ja.md b/7-bank-project/2-forms/translations/README.ja.md index 619254b5..d92e307b 100644 --- a/7-bank-project/2-forms/translations/README.ja.md +++ b/7-bank-project/2-forms/translations/README.ja.md @@ -12,7 +12,7 @@ ### 前提条件 -このレッスンでは、Web アプリの [HTML テンプレートとルーティング](../../1-template-route/translations/README.ja)が完了している必要があります。また、アカウントを作成するためのデータを送信できるように、ローカルに [Node.js](https://nodejs.org/ja) と[サーバー API を実行する](../../api/translations/README.ja.md)をインストールする必要があります。 +このレッスンでは、Web アプリの [HTML テンプレートとルーティング](../../1-template-route/translations/README.ja.md)が完了している必要があります。また、アカウントを作成するためのデータを送信できるように、ローカルに [Node.js](https://nodejs.org/ja) と[サーバー API を実行する](../../api/translations/README.ja.md)をインストールする必要があります。 ターミナルでこのコマンドを実行することで、サーバーが正常に動作していることを確認することができます。 From 5a4c2c9907f59a749f9692b289cfac0269a6ace1 Mon Sep 17 00:00:00 2001 From: Roberto Pauletto Date: Wed, 10 Feb 2021 16:08:25 +0100 Subject: [PATCH 19/27] Ch. 7 - italian translation --- .../translations/README.it.md | 307 ++++++++++++++++ .../translations/assignment.it.md | 14 + .../2-forms/translations/README.it.md | 294 +++++++++++++++ .../2-forms/translations/assignment.it.md | 13 + .../3-data/translations/README.it.md | 334 ++++++++++++++++++ .../3-data/translations/assignment.it.md | 15 + .../translations/README.it.md | 281 +++++++++++++++ .../translations/assignment.it.md | 25 ++ 7-bank-project/api/translations/README.it.md | 33 ++ .../solution/translations/README.it.md | 13 + 7-bank-project/translations/README.it.md | 21 ++ 11 files changed, 1350 insertions(+) create mode 100644 7-bank-project/1-template-route/translations/README.it.md create mode 100644 7-bank-project/1-template-route/translations/assignment.it.md create mode 100644 7-bank-project/2-forms/translations/README.it.md create mode 100644 7-bank-project/2-forms/translations/assignment.it.md create mode 100644 7-bank-project/3-data/translations/README.it.md create mode 100644 7-bank-project/3-data/translations/assignment.it.md create mode 100644 7-bank-project/4-state-management/translations/README.it.md create mode 100644 7-bank-project/4-state-management/translations/assignment.it.md create mode 100644 7-bank-project/api/translations/README.it.md create mode 100644 7-bank-project/solution/translations/README.it.md create mode 100644 7-bank-project/translations/README.it.md diff --git a/7-bank-project/1-template-route/translations/README.it.md b/7-bank-project/1-template-route/translations/README.it.md new file mode 100644 index 00000000..f7cbb804 --- /dev/null +++ b/7-bank-project/1-template-route/translations/README.it.md @@ -0,0 +1,307 @@ +# Creazione di un'App Bancaria Parte 1: Modelli HTML e Rotte in un'app web + +## Quiz Pre-Lezione + +[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/41) + +### Introduzione + +Dall'avvento di JavaScript nei browser, i siti web stanno diventando più interattivi e complessi che mai. Le tecnologie web sono ora comunemente utilizzate per creare applicazioni completamente funzionali che vengono eseguite direttamente in un browser che vengono chiamate [applicazioni web](https://it.wikipedia.org/wiki/Applicazione_web). Poiché le app web sono altamente interattive, gli utenti non desiderano attendere il ricaricamento di una pagina intera ogni volta che viene eseguita un'azione. Ecco perché JavaScript viene utilizzato per aggiornare l'HTML direttamente utilizzando il DOM, per fornire un'esperienza utente più fluida. + +In questa lezione, getteremo le basi per creare un'app web bancaria, utilizzando modelli HTML per creare più schermate che possono essere visualizzate e aggiornate senza dover ricaricare l'intera pagina HTML. + +### Prerequisito + +È necessario un server web locale per testare l'app web che verrà creata in questa lezione. Se non ne ha uno, si può installare [Node.js](https://nodejs.org) e utilizzare il comando `npx lite-server` dalla cartella del progetto. Creerà un server web locale e aprirà la propria app in un browser. + +### Preparazione + +Sul proprio computer, creare una cartella denominata `bank` con un file denominato `index.html` al suo interno. Si inizierà da questo codice [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code) HTML: + +```html + + + + + + Bank App + + + + + +``` + +--- + +## Modelli HTML. + +Se si desidera creare più schermate per una pagina Web, una soluzione potrebbe essere la creazione di un file HTML per ogni schermata che si desidera visualizzare. Tuttavia, questa soluzione presenta alcuni inconvenienti: + +- È necessario ricaricare l'intero HTML quando si cambia schermata, il che può essere lento. +- È difficile condividere i dati tra le diverse schermate. + +Un altro approccio consiste nell'avere un solo file HTML e definire più [modelli HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) utilizzando l'elemento `