Eugene Goh
5 years ago
commit
ea432937cc
@ -0,0 +1,45 @@
|
||||
name: Azure Static Web Apps CI/CD
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
types: [opened, synchronize, reopened, closed]
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
build_and_deploy_job:
|
||||
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
|
||||
runs-on: ubuntu-latest
|
||||
name: Build and Deploy Job
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
with:
|
||||
submodules: true
|
||||
- name: Build And Deploy
|
||||
id: builddeploy
|
||||
uses: Azure/static-web-apps-deploy@v0.0.1-preview
|
||||
with:
|
||||
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_BEACH_0FE9E9D0F }}
|
||||
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
|
||||
action: "upload"
|
||||
###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
|
||||
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
|
||||
app_location: "/quiz-app" # App source code path
|
||||
api_location: "api" # Api source code path - optional
|
||||
output_location: "dist" # Built app content directory - optional
|
||||
###### End of Repository/Build Configurations ######
|
||||
|
||||
close_pull_request_job:
|
||||
if: github.event_name == 'pull_request' && github.event.action == 'closed'
|
||||
runs-on: ubuntu-latest
|
||||
name: Close Pull Request Job
|
||||
steps:
|
||||
- name: Close Pull Request
|
||||
id: closepullrequest
|
||||
uses: Azure/static-web-apps-deploy@v0.0.1-preview
|
||||
with:
|
||||
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_BEACH_0FE9E9D0F }}
|
||||
action: "close"
|
||||
@ -0,0 +1 @@
|
||||
/.DS_Store
|
||||
@ -1,18 +0,0 @@
|
||||
*Complete this quiz along with your submission by checking one answer per question.*
|
||||
|
||||
1. What language would you most likely use to create a website?
|
||||
|
||||
- [ ] Machine Code
|
||||
- [ ] JavaScript
|
||||
- [ ] Bash
|
||||
|
||||
2. Development environments are unique to each developer
|
||||
|
||||
- [ ] True
|
||||
- [ ] False
|
||||
|
||||
3. What will a developer do to fix buggy code?
|
||||
|
||||
- [ ] Syntax highlighting
|
||||
- [ ] Debugging
|
||||
- [ ] Code formatting
|
||||
@ -1,18 +0,0 @@
|
||||
*Complete this quiz in class*
|
||||
|
||||
1. A program can be created without the creator writing any code
|
||||
|
||||
- [ ] True
|
||||
- [ ] False
|
||||
|
||||
2. Low level languages are a popular choice for:
|
||||
|
||||
- [ ] Websites
|
||||
- [ ] Hardware
|
||||
- [ ] Video game software
|
||||
|
||||
3. Which one of these tools would most likely be in a web developer's environment?
|
||||
|
||||
- [ ] Hardware, like a Raspberry Pi
|
||||
- [ ] Browser DevTools
|
||||
- [ ] Operating system documentation
|
||||
@ -1,18 +0,0 @@
|
||||
*Selesaikan kuis ini bersama dengan kiriman Anda dengan memeriksa satu jawaban per pertanyaan.*
|
||||
|
||||
1. Bahasa apa yang kemungkinan besar akan Anda gunakan untuk membuat situs web?
|
||||
|
||||
- [ ] Machine Code (Kode Mesin)
|
||||
- [ ] JavaScript
|
||||
- [ ] Bash
|
||||
|
||||
2. Lingkungan pengembangan unik untuk setiap pengembang
|
||||
|
||||
- [ ] Benar
|
||||
- [ ] Salah
|
||||
|
||||
3. Apa yang akan dilakukan pengembang untuk memperbaiki kode buggy (mudah rusak)?
|
||||
|
||||
- [ ] Syntax highlighting (Penyorotan sintaks)
|
||||
- [ ] Debugging
|
||||
- [ ] Code formatting (Pemformatan kode)
|
||||
@ -1,18 +0,0 @@
|
||||
*Selesaikan kuis ini di kelas*
|
||||
|
||||
1. Sebuah program dapat dibuat tanpa pembuatnya menulis kode apapun
|
||||
|
||||
- [ ] Benar
|
||||
- [ ] Salah
|
||||
|
||||
2. Bahasa tingkat rendah adalah pilihan populer untuk:
|
||||
|
||||
- [ ] Website
|
||||
- [ ] Hardware
|
||||
- [ ] Perangkat lunak permainan video
|
||||
|
||||
3. Manakah dari alat berikut yang kemungkinan besar ada di lingkungan pengembang web?
|
||||
|
||||
- [ ] Hardware, like a Raspberry Pi
|
||||
- [ ] Browser DevTools
|
||||
- [ ] Operating system documentation
|
||||
@ -0,0 +1,192 @@
|
||||
# Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari
|
||||
|
||||
Questa lezione tratta delle basi dei linguaggi di programmazione. Gli argomenti trattati qui si applicano alla maggior parte dei moderni linguaggi di programmazione di oggi. Nella sezione 'Strumenti Necessari' conoscerete utili software che vi aiuteranno come programmatore.
|
||||
|
||||
|
||||
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz Pre-Lezione
|
||||
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=it)
|
||||
|
||||
## Introduzione
|
||||
|
||||
In questa lezione tratteremo di:
|
||||
|
||||
- Cos'è la programmazione?
|
||||
- Tipi di linguaggi di programmazione
|
||||
- Elementi base di un programma
|
||||
- Software utili e strumenti per lo sviluppatore professionista
|
||||
|
||||
## Cos'è la programmazione?
|
||||
|
||||
La programmazione (conosciuta anche come scrivere codice) è il processo con il quale si scrivono istruzioni a un dispositivo, tipo un computer o dispositivo mobile. Queste istruzioni vengono scritte con un linguaggio di programmazione, quindi vengono interpretate dal dispositivo. Ci si può riferire a questo insieme di istruzioni in vari modi, ma *programma*, *programma di computer*, *applicazione (app)*, ed *eseguibile* sono alcuni dei nomi più conosciuti.
|
||||
|
||||
Un *programma* può essere qualsiasi cosa che sia scritta con codice; siti web, giochi, app per telefono sono programmi. Mentre è possibile creare un programma senza scrivere codice, la logica sottostante viene interpretata dal dispositivo e quella logica è molto probabile che sia stata scritta con codice. Un programma che sta *girando* o sta*eseguendo codice* sta effettuando istruzioni. Il dispositivo con il quale state attualmente leggendo questa lezione sta eseguendo un programma per stamparla sul vostro schermo.
|
||||
|
||||
✅ Fate una piccola ricerca: quale si ritiene sia stato il primo programmatore al mondo?
|
||||
|
||||
## Linguaggi di programmazione
|
||||
|
||||
I linguaggi di programmazione servono uno scopo principale: fare in modo che gli sviluppatori costruiscano istruzioni da inviare a un dispositivo. I dispositivi possono comprendere solo codice binario (gli 1 e gli 0), e per la *maggior parte* degli sviluppatori questo non è un modo molto efficace di comunicare. I linguaggi di programmazione sono un veicolo per comunicare tra umani e computer.
|
||||
|
||||
I linguaggi di programmazione sono disponibili in diversi formati e possono servire per scopi diversi. Ad esempio, JavaScript è principalmente usato per applicazioni web, mentre Bash è principalmente usato per sistemi operativi.
|
||||
|
||||
I *linguaggi a basso livello* richiedono in genere a un dispositivo meno passi per interpretare le istruzioni rispetto ai *linguaggi di alto livello*. Tuttavia ciò che rende popolari i *linguaggi di alto livello* è la loro leggibilità e supporto. JavaScript è considerato un *linguaggio di alto livello*
|
||||
|
||||
Il codice seguente illustra le differenze tra un linguaggio ad alto livello come JavaScript e un linguaggio a basso livello come il codice assembly ARM.
|
||||
|
||||
```javascript
|
||||
let number = 10
|
||||
let n1 = 0, n2 = 1, nextTerm;
|
||||
|
||||
for (let i = 1; i <= number; i++) {
|
||||
console.log(n1);
|
||||
nextTerm = n1 + n2;
|
||||
n1 = n2;
|
||||
n2 = nextTerm;
|
||||
}
|
||||
```
|
||||
|
||||
```c
|
||||
area ascen,code,readonly
|
||||
entry
|
||||
code32
|
||||
adr r0,thumb+1
|
||||
bx r0
|
||||
code16
|
||||
thumb
|
||||
mov r0,#00
|
||||
sub r0,r0,#01
|
||||
mov r1,#01
|
||||
mov r4,#10
|
||||
ldr r2,=0x40000000
|
||||
back add r0,r1
|
||||
str r0,[r2]
|
||||
add r2,#04
|
||||
mov r3,r0
|
||||
mov r0,r1
|
||||
mov r1,r3
|
||||
sub r4,#01
|
||||
cmp r4,#00
|
||||
bne back
|
||||
end
|
||||
```
|
||||
|
||||
Credeteci o no, *stanno entrambi facendo la stessa cosa*: stampare una successione di Fibonacci fino a 10.
|
||||
|
||||
✅ Una successione di Fibonacci è [definita](https://www.wikiwand.com/it/Successione_di_Fibonacci) come un insieme di numeri tali che ciascun numero è la somma dei due precedenti, a partire da 0 e 1.
|
||||
|
||||
## Elementi di un programma
|
||||
|
||||
Una singola istruzione in un programma è detta *istruzione* e in genere avrà un carattere o spaziatura di riga che identifica dove essa finisce, o *termina*. Il modo nel quale un programma termina varia per ogni linguaggio.
|
||||
|
||||
La maggior parte dei programmi dipende dall'utilizzo di dati ricevuti da un utente o altrove, dove le istruzioni potrebbero dipendere da dati per essere effettuate. I dati possono modificare il comportamento di un programma, quindi i linguaggi di programmazione sono dotati della possibilità di conservare temporaneamente dati che possono essere usati successivamente. Questi dati sono detti *variabili*. Le variabili sono istruzioni che richiedono a un dispositivo di salvare dati nella sua memoria. Le variabili nei programmi sono simili a quelle dell'algebra, dove devono avere un nome univoco e il loro valore potrebbe mutare nel tempo.
|
||||
|
||||
Esiste la possibilità che alcune istruzioni non saranno eseguite da un dispositivo. In genere è una cosa voluta quando scritta dallo sviluppatore oppure per caso quando si verifica un errore inaspettato. Questo tipo di controllo di un'applicazione la rende più robusta e mantenibile. In genere queste modifiche nel controllo accadono quando si verificano certe condizioni. Una istruzione comune nei moderni linguaggi di programmazione per controllare come viene eseguito un programma è `if..else`.
|
||||
|
||||
✅ Saprete di più circa questo tipo di istruzione nelle lezioni successive
|
||||
|
||||
## Strumenti Necessari
|
||||
|
||||
[](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
|
||||
|
||||
In questa sezione conoscerete qualche software che potreste trovare molto utile per iniziare il vostro viaggio come programmatori professionisti.
|
||||
|
||||
Un *ambiente di sviluppo* è un insieme univoco di strumenti e caratteristiche che uno sviluppatore usa spesso quando scrive software. Alcuni di questi strumenti sono stati personalizzati per specifiche necessità dello sviluppatore e potrebbero cambiare nel tempo se lo sviluppatore cambia le priorità dei progetti di lavoro o personali, oppure quando usa un diverso linguaggio di programmazione. Gli ambienti di sviluppo sono unici tanto quanto gli sviluppatori che li utilizzano.
|
||||
|
||||
### Editor
|
||||
|
||||
Uno degli strumenti cruciali per lo sviluppo del software è l'editor. Gli editor sono dove scrivete il vostro codice e talvolta dove eseguirete il vostro codice.
|
||||
|
||||
Gli sviluppatori si affidano agli editor per qualche altra ragione aggiuntiva:
|
||||
|
||||
- *Debugging* La scoperta di bug ed errori seguendo passo passo il codice, riga per riga. Alcuni editor hanno capacita di debugging o possono essere personalizzate e aggiunte per linguaggi di programmazione specifici.
|
||||
- *Evidenziazione della Sintassi* Aggiunge colorazione e formattazione al testo del codice, rendendone più facile la lettura. La maggior parte degli editor consente la personalizzazione dell'evidenziazione della sintassi.
|
||||
- *Estensioni e integrazioni* Aggiunte specializzate per gli sviluppatori, dagli sviluppatori, per accedere a strumenti addizionali che non sono incluse come caratteristiche base dell'editor. Ad esempio molti sviluppatori hanno bisogno di un modo per documentare il proprio codice e spiegare come funziona e installeranno una estensione in grado di verificare la sintassi per trovare errori di ortografia. La maggior parte di queste aggiunte sono rivolte all'uso per un editor specifico, e molti editor hanno un modo per ricercare le estensioni disponibili.
|
||||
- *Personalizzazione* La maggior parte degli editor sono estremamente personalizzabili, e ciascun sviluppatore avrà il suo proprio ambiente di programmazione in grado di soddisfare le sue necessità. Molti consentono agli sviluppatori di creare le loro proprie estensioni.
|
||||
|
||||
#### Popolari Editor ed Estensioni per lo Sviluppo Web
|
||||
|
||||
- [Visual Studio Code](https://code.visualstudio.com/)
|
||||
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
|
||||
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
|
||||
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
|
||||
- [Atom](https://atom.io/)
|
||||
- [spell-check](https://atom.io/packages/spell-check)
|
||||
- [teletype](https://atom.io/packages/teletype)
|
||||
- [atom-beautify](https://atom.io/packages/atom-beautify)
|
||||
|
||||
### Browser
|
||||
|
||||
Un altro strumento cruciale è il browser. Gli sviluppatori web fanno affidamento sul browser per osservare come il proprio codice viene eseguito nel web, viene anche usato per vedere elementi grafici di una pagina web che sono scritti nell'editor, come HTML.
|
||||
|
||||
Molti browser dispongono di *strumenti per lo sviluppatore* (DevTools) che contengono un insieme di caratteristiche e informazioni per aiutare gli sviluppatori nella raccolta e cattura di importanti approfondimenti in merito alle proprie applicazioni. Ad esempio: se una pagina web ha errori, è talvolta utile sapere dove questi errori sono capitati. DevTools in un browser può essere configurato per catturare queste informazioni.
|
||||
|
||||
#### Popolari Browser e DevTools
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium)
|
||||
- [Chrome](https://sviluppatori.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://sviluppatore.mozilla.org/docs/Tools)
|
||||
|
||||
### Strumenti da Riga di Comando
|
||||
|
||||
Alcuni sviluppatori preferiscono una visione meno grafica per i propri compiti quotidiani e si appoggiano alla riga di comando per completarli. Lo sviluppo del codice richiede un significativo ammontare di digitazione e taluni sviluppatori preferiscono non interrompere il proprio flusso sulla tastiere e usano scorciatoie da tastiera per spostarsi tra finestre del desktop, lavorare su file diversi, e usare strumenti. La maggior parte dei compiti può essere completata con un mouse, ma un vantaggio dell'usare la riga di comando è che molto può essere fatto con essa senza dover passare dalla tastiera al mouse e viceversa. Un altro vantaggio è che è configurabile ed è possibile salvare la propria configurazione, modificarla successivamente, e anche importarla su nuove macchine di sviluppo. Poiché gli ambienti di sviluppo sono così particolari per ciascun sviluppatore, alcuni eviteranno l'uso della riga di comando, altri la utilizzeranno esclusivamente e altri preferiranno mescolare le due tattiche.
|
||||
|
||||
### Popolari Alternative per Riga di Comando
|
||||
|
||||
Le alternative per la riga di comando differiriscono in base al sistema operativo che si sta usando.
|
||||
|
||||
*💻 = preinstallate nel sistema operativo.*
|
||||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7)
|
||||
|
||||
#### Popolari Strumenti da Riga di Comando
|
||||
|
||||
- [Git](https://git-scm.com/) (💻 nella maggior parte dei sistemi operativi)
|
||||
- [NPM](https://www.npmjs.com/)
|
||||
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
|
||||
|
||||
### Documentazione
|
||||
|
||||
Quando uno sviluppatore vuole imparare qualcosa di nuovo, per la maggior parte delle volte farà riferimento alla documentazione per imparare come usarlo. Gli sviluppatori fanno spesso affidamento alla documentazione per essere guidati all'utilizzo corretto degli strumenti e dei linguaggi, oltre a ottenere una più profonda conoscenza del funzionamento.
|
||||
|
||||
#### Popolari Documentazioni sullo Sviluppo Web
|
||||
|
||||
- [Mozilla sviluppatore Network](https://sviluppatore.mozilla.org/docs/Web)
|
||||
- [Frontend Masters](https://frontendmasters.com/learn/)
|
||||
|
||||
✅ Fate qualche ricerca: Ora che sapete le basi per un ambiente di sviluppo web, confrontate e rilevate le differenze rispetto all'ambiente di sviluppo di un web designer.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Confrontate alcuni linguaggi di programmazione. Quali sono i tratti univoci di JavaScript rispetto a Java? E COBOL rispetto a Go?
|
||||
|
||||
## Quiz Post-Lezione
|
||||
[Quiz Post-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2?loc=it)
|
||||
|
||||
## Revisione e Auto Istruzione
|
||||
|
||||
Studiate un poco sui diversi linguaggi di programmazione a disposizione di un programmatore. Cercate di scrivere una riga in un linguaggio, poi rifatelo con altri due. Cosa avete imparato?
|
||||
|
||||
## Compito
|
||||
|
||||
[Leggere la documentazione](assignment.md)
|
||||
@ -0,0 +1,193 @@
|
||||
# Introductie van Programmeertalen en Bijbehorend Vakgereedschap
|
||||
|
||||
Deze les beschrijft de basis over programmeertalen. De onderwerpen zijn van toepassing op de meeste hedendaagse programeertalen. In het 'Vakgereedschap' onderdeel leer je over nuttige toepassingen die je helpen als web ontwikkelaar.
|
||||
|
||||
|
||||
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1)
|
||||
|
||||
## Introductie
|
||||
|
||||
In deze les hebben we het over:
|
||||
|
||||
- Wat is programmeren?
|
||||
- Verschillende typen programmeertalen.
|
||||
- Basis elementen van een programma.
|
||||
- Nuttige toepassingen en gereedschap voor de professionele web ontwikkelaar.
|
||||
|
||||
## Wat is programmeren?
|
||||
|
||||
Programmeren (ook wel coderen genoemd) is het process van het schrijven van instructies voor een apparaat, zoals een computer of een mobieltje. We schrijven deze instructies met een programmeertaal, welke wordt geinterpreteerd door het apparaat. Deze sets van instructies staan bekend onder verschillende namen zoals; *programma*, *computer programma*, *applicatie (app)*, *script* en *executable*.
|
||||
|
||||
Een *programma* kan van alles zijn wat met code is geschreven; websites, spellen, en mobiele apps zijn programmas. Hoewel het mogelijk is om een programma te maken zonder code te schrijven, is de onderliggende logica, dat wordt geinterpreteerd door het apparaat, hoogstwaarschijnlijk wel geschreven met code. Een programma dat *draait* of *code uitvoert* voert instructies uit. Het apparaat wat je nu gebruikt om deze les te volgen draait een programma om deze tekst op het scherm te tonen.
|
||||
|
||||
✅ Doe wat onderzoek: wie wordt gezien als werelds eerste computer programmeur?
|
||||
|
||||
## Programmeertalen
|
||||
|
||||
Programmeertalen hebben maar één hoofddoel: het voor ontwikkelaars mogelijk maken om instructies te sturen naar een apparaat. Apparaten begrijpen slechts binaire instructies (1-en en 0-en), en voor de meeste ontwikkelaars is dit niet een erg efficiënte manier om instructies te schrijven. Programmeertalen zijn daarom een mooi communicatiemiddel tussen mensen en computers.
|
||||
|
||||
Programmeertalen zijn er in verschillende uitvoeringen en hebben soms specifieke doeleinden. JavaScript wordt bijvoorbeeld voornamelijk gebruikt voor webapplicaties terwijl Bash hoofdzakelijk wordt gebruikt voor besturingssystemen.
|
||||
|
||||
*Lagere programmertalen* hebben over het algemeen minder stappen nodig dan *hogere programmeertalen* om door een apparaat geinterpreteerd te worden. Hogere programmeertalen zijn echter populairder omdat ze veel leesbaarder zijn. Een voorbeeld van een hogere programmeertaal is JavaScript.
|
||||
|
||||
Het volgende codevoorbeeld laat het verschil zien tussen een hogere (JavaScript) en een lagere (ARM assembly) programeertaal.
|
||||
|
||||
```javascript
|
||||
let number = 10
|
||||
let n1 = 0, n2 = 1, nextTerm;
|
||||
|
||||
for (let i = 1; i <= number; i++) {
|
||||
console.log(n1);
|
||||
nextTerm = n1 + n2;
|
||||
n1 = n2;
|
||||
n2 = nextTerm;
|
||||
}
|
||||
```
|
||||
|
||||
```c
|
||||
area ascen,code,readonly
|
||||
entry
|
||||
code32
|
||||
adr r0,thumb+1
|
||||
bx r0
|
||||
code16
|
||||
thumb
|
||||
mov r0,#00
|
||||
sub r0,r0,#01
|
||||
mov r1,#01
|
||||
mov r4,#10
|
||||
ldr r2,=0x40000000
|
||||
back add r0,r1
|
||||
str r0,[r2]
|
||||
add r2,#04
|
||||
mov r3,r0
|
||||
mov r0,r1
|
||||
mov r1,r3
|
||||
sub r4,#01
|
||||
cmp r4,#00
|
||||
bne back
|
||||
end
|
||||
```
|
||||
|
||||
Geloof het of niet, maar beide codevoorbeelden *doen exact hetzelfde*: het printen van een Fibonacci reeks tot en met het tiende getal.
|
||||
|
||||
✅ Een Fibonacci reeks is [gedefinieerd](https://nl.wikipedia.org/wiki/Rij_van_Fibonacci) als een set van getallen waarvan elk getal de som is van de vorige twee getallen, beginnend met 0 en 1.
|
||||
|
||||
## Elementen van een programma
|
||||
|
||||
Een enkele instructie in een programma wordt ook wel *statement* genoemd en bevat vaak een karakter of witruimte om aan te geven waar de instructie begint en eindigt. Hoe een programma eindigt varieert per programmertaal.
|
||||
|
||||
De meeste programma's zijn afhankelijk van gegevens, die ofwel door een gebruiker wordt ingevoerd, ofwel ergens vandaan wordt gehaald. De statements zijn afhankelijk van deze data om instructies uit te voeren. Data is van invloed hoe een programma reageert. Daarom hebben programmeertalen een manier om tijdelijk data op te slaan wat later weer gebruikt wordt. Deze data wordt ook wel *variabelen* genoemd. Variabelen zijn statements die een apparaat een instructie geven om de data op te slaan in het geheugen van het apparaat. Variabelen in programma's zijn gelijkwaardig aan hun tegenhanger in algebra. Ook daar hebben variabelen een unieke naam en kan de waarde veranderen in de loop der tijd.
|
||||
|
||||
Niet alle statements in een programma worden altijd uitgevoerd. Dit is meestal zo bedacht door de ontwikkelaar of het treed onbedoeld op bij onverwachte fouten. Het is een vorm van controle in een applicatie, dat het robuuster en onderhoudbaarder maakt. De keuze in welke statements worden uitgevoerd hangt vaak af van de data en of dit voldoet aan bepaalde condities. Een veelvoorkomend statement in een moderne programmeertaal om de controle van een programma te beïnvloeden is het `if..else` statement.
|
||||
|
||||
✅ Je leert meer over het `if..else` statement in de volgende lessen.
|
||||
|
||||
## Vakgereedschap
|
||||
|
||||
[](https://youtube.com/watch?v=69WJeXGBdxg "Vakgereedschap")
|
||||
|
||||
In dit onderdeel leer je welke applicaties je wellicht handig vindt om mee te werken als je je professionele web ontwikkelaar carrière start.
|
||||
|
||||
Een **ontwikkelomgeving** is een unieke set van applicaties wat een ontwikkelaar regelmatig gebruikt om software te schrijven. Sommige van deze applicaties zijn aangepast voor de specifieke eisen die de ontwikkelaar heeft en kunnen veranderen over de tijd. Dit kan te maken hebben met het type werk wat de ontwikkelaar uitvoert, bijvoorbeeld persoonlijke projecten versus projecten voor werk, of als er een andere programmeertaal moet worden gebruikt. Ontwikkelomgevingen zijn zo uniek als de ontwikkelaars die ze gebruiken.
|
||||
|
||||
### Editors
|
||||
|
||||
Een van de meest cruciale applicaties voor software ontwikkeling is de code editor. In een editor schrijf je je code en soms run je daar ook je code.
|
||||
|
||||
Ontwikkelaars gebruiken editors ook om de volgende redenen:
|
||||
|
||||
- *Debugging* Het regel voor regel runnen van je code om bugs te ontdekken. Sommige editors hebben debugging mogelijkheden, of kunnen aangepast worden voor specifieke programmeertalen.
|
||||
- *Syntax markering* Voegt kleuren en tekst opmaak toe aan code om het leesbaarder te maken. De meeste editors hebben de mogelijkheid om dit aan te passen naar je eigen smaak.
|
||||
- *Extensies en Integraties* Uitbreidingen van de editor, speciaal voor ontwikkelaars en gemaakt door ontwikkelaars, om extra functionaliteiten toe te voegen die standaard niet in de editor inzitten. Bijvoorbeeld een spellingscontrole extensie wat documentatie kan controleren op spelfouten. Vaak zijn extensies ontwikkeld voor een specifieke code editor. De meeste editors bieden een zoekfunctie om relevante extensies te vinden.
|
||||
- *Persoonlijke instellingen* De meeste editors hebben instellingen die volledig aan te passen zijn naar de wens van de ontwikkelaar. Elke ontwikkelaar zal daarom een unieke ontwikkelomgeving hebben wat voldoet aan hun specifieke wensen.
|
||||
|
||||
#### Populaire Editors en Web Ontwikkeling Extensies
|
||||
|
||||
- [Visual Studio Code](https://code.visualstudio.com/)
|
||||
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
|
||||
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
|
||||
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
|
||||
- [Atom](https://atom.io/)
|
||||
- [spell-check](https://atom.io/packages/spell-check)
|
||||
- [teletype](https://atom.io/packages/teletype)
|
||||
- [atom-beautify](https://atom.io/packages/atom-beautify)
|
||||
|
||||
### Browsers
|
||||
|
||||
Nog een zeer belangrijke applicatie is de webbrowser. Web ontwikkelaars zijn afhankelijk van de browser om na te gaan hoe hun code draait op het web. De browser wordt ook gebruikt om de visuele elementen van een web pagina weer te geven die geschreven zijn in de editor, zoals HTML.
|
||||
|
||||
Veel browsers hebben ingebouwd *ontwikkel gereedschap* (DevTools) waarmee ontwikkelaars makkelijk inzicht kunnen krijgen over hun applicatie. Bijvoorbeeld: als een webpagina fouten heeft, is het handig om te weten wanneer die fouten zijn opgetreden. In zo'n situatie kan DevTools kan geconfigureerd worden om deze informatie te verzamelen.
|
||||
|
||||
#### Populaire Browsers en DevTools
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium)
|
||||
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||
|
||||
### Command Line Applicaties
|
||||
|
||||
Sommige ontwikkelaars hebben de voorkeur om minder grafische applicaties te gebruiken voor hun dagelijks werk. Zij gebruiken *command line applicaties* om hun werk te doen. Voor het schrijven van code is veel typewerk nodig, en aangezien sommige ontwikkelaars niet teveel afgeleid willen worden in hun keyboardgebruik maken zij daarom gebruik van keyboard shortcuts om bijvoorbeeld met verschillende bestanden te werken en tussen applicaties te wisselen. De meeste taken kunnen met een muis worden uitgevoerd, maar één van de voordelen van de command line is dat je heel veel kunt doen zonder te wisselen van keyboard en muis. Een bijkomend voordeel is dat command line applicaties aanpasbaar zijn en je deze naar wens kunt instellen. De instellingen kunnen opgeslagen worden op een andere computer weer herbruikt worden. Omdat elke ontwikkelaar een andere voorkeur heeft qua ontwikkelomgeving, gebruiken sommigen de command line nooit, sommigen doen juist alles ermee, en anderen gebruiken zowel de command line als grafische applicaties.
|
||||
|
||||
### Populaire Command Lines
|
||||
|
||||
Beschikbaarheid van command lines verschilt op basis van het besturingssysteem wat je gebruikt.
|
||||
|
||||
*💻 = is geïnstalleerd met het besturingssysteem.*
|
||||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (ook bekend als CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7)
|
||||
|
||||
#### Populaire Command Line Applicaties
|
||||
|
||||
- [Git](https://git-scm.com/) (💻 op de meeste besturingssystemen)
|
||||
- [NPM](https://www.npmjs.com/)
|
||||
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
|
||||
|
||||
### Documentatie
|
||||
|
||||
Wanneer een ontwikkelaar iets nieuws wil leren dan zullen ze waarschijnlijk de bijbehorende documentatie (Docs) raadplegen. Ontwikkelaars zijn erg afhankelijk van goede documentatie, wat hun verder helpt om nieuwe programmeertalen of applicaties te gebruiken waardoor ze een beter inzicht krijgen hoe dit toe te passen in hun dagelijks werk.
|
||||
|
||||
#### Populaire Documentatie over Web Ontwikkeling
|
||||
|
||||
- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web)
|
||||
- [Frontend Masters](https://frontendmasters.com/learn/)
|
||||
|
||||
✅ Doe wat onderzoek: Nu je de basis weet van de omgeving van een web ontwikkelaar, probeer eens uit te zoeken in hoeverre dit verschilt van een omgeving voor een web designer.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Uitdaging
|
||||
|
||||
Vergelijk wat programmeertalen. Wat zijn unieke kenmerken van JavaScript vs. Java. En het verschil tussen COBOL en Go?
|
||||
|
||||
## Post-Lecture Quiz
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2)
|
||||
|
||||
## Review & Zelfstudie
|
||||
|
||||
Bestudeer wat voor verschillende programmeertalen er zijn. Zoek in 3 talen een 'Hello World' voorbeeld op. Zo krijg je een goed idee wat er voor nodig is om tekst in de browser te tonen.
|
||||
|
||||
## Opdracht
|
||||
|
||||
[Lees de documentatie](../assignment.md)
|
||||
@ -0,0 +1,11 @@
|
||||
# डॉक्स पढ़ना
|
||||
|
||||
## अनुदेश
|
||||
|
||||
ऐसे कई उपकरण हैं जिनकी आवश्यकता वेब डेवलपर को हो सकती है जो [एमडीएन प्रलेखन के क्लाइंट-साइड टूलिंग](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) पे उपलब्ध है । पाठ में शामिल नहीं किए गए 3 टूल चुनें, बताएं कि एक वेब डेवलपर इसका उपयोग क्यों करेगा, और इस टूल के लिए खोज करेगा जो इस श्रेणी में आता है और इसके प्रलेखन को साझा करता है । MDN डॉक्स पर समान टूल उदाहरण का उपयोग न करें.
|
||||
|
||||
## सरनामा
|
||||
|
||||
| उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||
| -------------------------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------- |
|
||||
| बताया कि वेब डेवलपर टूल का उपयोग क्यों करेगा | समझाया कि कैसे, लेकिन डेवलपर टूल का उपयोग क्यों नहीं करेगा | यह उल्लेख नहीं किया कि एक डेवलपर उपकरण का उपयोग कैसे या क्यों करेगा |
|
||||
@ -0,0 +1,11 @@
|
||||
# Leggere la Documentazione
|
||||
|
||||
## Istruzioni
|
||||
|
||||
Ci sono molti strumenti dei quali uno sviluppatore web potrebbe avere bisogno che non sono nella [documentazione MDN per strumenti lato client](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selezionare 3 strumenti non trattati nella lezione, spiegare perchè uno sviluppatore web dovrebbe usarli, cercare uno strumento che possa rientrare in questa categoria e condivere la sua documentazione. Non usare lo stesso strumento di esempio citato nei documenti MDN.
|
||||
|
||||
## Rubrica
|
||||
|
||||
Ottimo | Adeguato | Necessari miglioramenti
|
||||
--- | --- | -- |
|
||||
|Spiega perchè uno sviluppatore web dovrebbe usare lo strumento| Spiega come, ma non perchè uno sviluppatore web dovrebbe usare lo strumento| Non menziona come o perchè uno sviluppatore web dovrebbe usare lo strumento |
|
||||
@ -0,0 +1,11 @@
|
||||
# ドキュメントを読む
|
||||
|
||||
## 説明書
|
||||
|
||||
Web 開発者が必要とする可能性のあるツールは、[クライアントサイドツールの MDN ドキュメント](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)に記載されているものが多くあります。このレッスンでカバーされていないツールを3つ選び、Web 開発者がそれを使う理由を説明し、このカテゴリに該当するツールを検索し、そのドキュメントを共有してください。同じツールの例を MDN ドキュメント上で使用しないでください。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
模範的な例 | 適切な | 改善が必要
|
||||
--- | --- | -- |
|
||||
|Web 開発者がツールを使う理由を説明| 開発者がツールを使用する理由ではなく、どのように使用するかを説明しました。| 開発者がツールを使用する方法や理由については言及していません。 |
|
||||
@ -1,19 +0,0 @@
|
||||
*Complete this quiz by checking one answer per question.*
|
||||
|
||||
1. A place to compare and discuss the differences introduced on a branch with reviews, comments, integrated tests, and more is:
|
||||
|
||||
- [ ] GitHub
|
||||
- [ ] A Pull Request
|
||||
- [ ] A feature branch
|
||||
|
||||
2. How would you get all the commits from a remote branch?
|
||||
|
||||
- [ ] `git fetch`
|
||||
- [ ] `git pull`
|
||||
- [ ] `git commits -r`
|
||||
|
||||
3. How do you switch to a branch?
|
||||
|
||||
- [ ] `git switch [branch-name]`
|
||||
- [ ] `git checkout [branch-name]`
|
||||
- [ ] `git load [branch-name]`
|
||||
@ -1,13 +0,0 @@
|
||||
*Complete this quiz in class*
|
||||
|
||||
1. How do you create a Git repo?
|
||||
|
||||
- [ ] git create
|
||||
- [ ] git start
|
||||
- [ ] git init
|
||||
|
||||
2. What does `git add` do?
|
||||
|
||||
- [ ] Commits your code
|
||||
- [ ] Adds your files to a staging area for tracking
|
||||
- [ ] Adds your files to GitHub
|
||||
@ -1,19 +0,0 @@
|
||||
*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.*
|
||||
|
||||
1. Tempat untuk membandingkan dan mendiskusikan perbedaan yang diperkenalkan pada cabang dengan review, komentar, tes terintegrasi, dan banyak lagi adalah:
|
||||
|
||||
- [ ] GitHub
|
||||
- [ ] Pull Request (Tarik Permintaan)
|
||||
- [ ] Feature branch (Cabang fitur)
|
||||
|
||||
2. Bagaimana Anda mendapatkan semua komit dari cabang remote (jarak jauh)?
|
||||
|
||||
- [ ] `git fetch`
|
||||
- [ ] `git pull`
|
||||
- [ ] `git commits -r`
|
||||
|
||||
3. Bagaimana Anda beralih ke sebuah cabang (branch)?
|
||||
|
||||
- [ ] `git switch [branch-name]`
|
||||
- [ ] `git checkout [branch-name]`
|
||||
- [ ] `git load [branch-name]`
|
||||
@ -1,13 +0,0 @@
|
||||
*Selesaikan kuis ini di kelas*
|
||||
|
||||
1. Bagaimana Anda membuat repo Git?
|
||||
|
||||
- [ ] git create
|
||||
- [ ] git start
|
||||
- [ ] git init
|
||||
|
||||
2. Apa fungsi `git add`?
|
||||
|
||||
- [ ] Commit (menyerahkan) kode Anda
|
||||
- [ ] Menambahkan file Anda ke area pementasan (staging area) untuk dilacak
|
||||
- [ ] Menambahkan file Anda ke GitHub
|
||||
@ -0,0 +1,315 @@
|
||||
# Introduzione a GitHub
|
||||
|
||||
Questa lezione tratta delle basi di GitHub, una piattaforma per ospitare e gestire modifiche al proprio codice.
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz Pre-lezione
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3?loc=it)
|
||||
|
||||
## Introduzione
|
||||
|
||||
In questa lezione tratteremo come:
|
||||
|
||||
- tracciare il lavoro che si fa sulla propria macchina
|
||||
- lavorare con altri su progetti
|
||||
- come contribuire a software open source
|
||||
|
||||
### Prerequisiti
|
||||
|
||||
Prima di iniziare, si dovrebbe verificare se Git è installato. Dal terminale digitare:
|
||||
`git --version`
|
||||
|
||||
Se Git non è installato, [scaricare Git](https://git-scm.com/downloads). Poi impostare il proprio profilo locale Git dal terminale:
|
||||
* `git config --global user.name "il-proprio-nominativo"`
|
||||
* `git config --global user.email "la-propria-email"`
|
||||
|
||||
Per verificare se Git è già configurato si può digitare:
|
||||
`git config --list`
|
||||
|
||||
E' anche necessario un account GitHub, un editor di codice (tipo Visual Studio Code), e sarà necessario aprire il proprio terminale (o prompt di comando).
|
||||
|
||||
Navigare su [github.com](https://github.com/) e creare un account se non se ne dispone già di uno, oppure accedere e compilare il proprio profilo.
|
||||
|
||||
✅ GitHub non è il solo deposito di codice nel mondo, ce ne sono altri, ma GitHub è il più conosciuto.
|
||||
|
||||
### Preparazione
|
||||
|
||||
Servirà sia una cartella con il codice di un progetto sulla propria macchina locale (laptop o PC), e un repository pubblico su GitHub, che servirà come esempio su come contribuire a progetti di altri.
|
||||
|
||||
---
|
||||
|
||||
## Gestione del codice
|
||||
|
||||
Diciamo che si ha una cartella in locale con del codice di un progetto e che si vuole iniziare a tracciarne lo sviluppo usando git - il sistema di controllo di versione. Alcuni paragonano l'uso di git alla scrittura di una lettera d'amore a se stessi nel futuro. Leggendo i messaggi di commit giorni, settimane o mesi più tardi si dovrà essere in grado di ricordare perchè è stata presa una certa decisione, o ripristinare ("rollback") una modifica - questo è, quando si scrivono dei buoni "messaggi di commit".
|
||||
|
||||
### Compito: Creare un repository e inserirvi codice via commit
|
||||
|
||||
1. **Creare un repository su GitHub**. Su GitHub.com, nella scheda repositories, o dalla barra di navigazione in alto a destra, trovare il bottone **new repository**.
|
||||
|
||||
1. Dare un nome al proprio repository (cartella)
|
||||
1. Selezionare **create repository**.
|
||||
|
||||
1. **Navigare verso la propria cartella di lavoro**. Nel proprio terminale, portarsi nella cartella (detta anche directory) che si vuole iniziare a tracciare. Digitare:
|
||||
|
||||
```bash
|
||||
cd [nome della cartella]
|
||||
```
|
||||
|
||||
1. **Inizializzare un repository git**. Nel proprio progetto digitare:
|
||||
|
||||
```bash
|
||||
git init
|
||||
```
|
||||
|
||||
1. **Verifica stato**. Per verificare lo stato del proprio repository digitare:
|
||||
|
||||
```bash
|
||||
git status
|
||||
```
|
||||
|
||||
il risultato potrebbe essere qualcosa tipo:
|
||||
|
||||
```output
|
||||
Changes not staged for commit:
|
||||
(use "git add <file>..." to update what will be committed)
|
||||
(use "git checkout -- <file>..." to discard changes in working directory)
|
||||
|
||||
modified: file.txt
|
||||
modified: file2.txt
|
||||
```
|
||||
|
||||
In genere un comando `git status` informa circa quali file sono pronti per essere _salvati_ nel repository o quali modifiche sono state effettuate che si vogliono persistere.
|
||||
|
||||
1. **Aggiungere tutti i file per la tracciatura**
|
||||
Fase nota anche come aggiungere file nell'area di staging.
|
||||
|
||||
```bash
|
||||
git add .
|
||||
```
|
||||
|
||||
Gli argomenti `git add` più `.` indicano che tutti i propri file e modifiche sono selezionati per la tracciatura.
|
||||
|
||||
1. **Aggiungere file selezionati per la tracciatura**
|
||||
|
||||
```bash
|
||||
git add [file o nome cartella]
|
||||
```
|
||||
|
||||
Questo consente di aggiungere file nell'area di staging quando non si vogliono aggiungere tutti in una volta.
|
||||
|
||||
1. **Togliere dall'area di staging tutti i file**
|
||||
|
||||
```bash
|
||||
git reset
|
||||
```
|
||||
|
||||
Questo comando consente di togliere tutti i file dall'area di staging.
|
||||
|
||||
1. **Togliere dall'area di staging uno specifico file**
|
||||
|
||||
```bash
|
||||
git reset [file o nome cartella]
|
||||
```
|
||||
|
||||
Questo comando consente di togliere dall'area di staging uno specifico file che non si vuole includere nel commit successivo.
|
||||
|
||||
1. **Persistere il proprio lavoro**. A questo punto sono stati aggiunti tutti i file alla cosiddetta _area di staging_. Un posto nel quale Git sta tracciando i propri file. Per rendere permanenti le modifiche occorre eseguire un'azione di _commit_ dei file. Per farlo si crea un _commit_ con il comando `git commit`. Un _commit_ rappresenta un punto di salvataggio nella storia del proprio repository. Digitare questo per creare un _commit_:
|
||||
|
||||
```bash
|
||||
git commit -m "primo commit"
|
||||
```
|
||||
|
||||
Questo esegue il commit di tutti i file a suo tempo inclusi, aggiungendo il messaggio 'primo commit'. Per messaggi di commit successivi si vorrà essere più descrittivi nell'esposizione per identificare il tipo di modifiche effettuate.
|
||||
|
||||
1. **Connettere il repository Git locale a GitHub**. Un repository Git va bene sulla propria macchina ma a un certo punto si vuole avere una copia dei propri file da qualche altra parte e anche invitare altre persone a lavorare al proprio progetto. Un gran posto per fare questo è GitHub. Si ricorderà che è stato già creato un repository in GitHub quindi la sola cosa da fare è connettere il repository Git locale con GitHub. Il comando `git remote add` farà proprio questo. Digitare il comando:
|
||||
|
||||
> Nota, prima di digitare il comando portarsi sulla propria pagina del repository su GitHub per trovare l'URL del repository. Dovrà essere usato nel comando seguente. Sostituire `repository_name` con il proprio URL di GitHub e `username` con il proprio nome utente di github.
|
||||
|
||||
```bash
|
||||
git remote add origin https://github.com/username/repository_name.git
|
||||
```
|
||||
|
||||
Questo crea un _remote_, o connessione, chiamata "origin" che punta al repository GitHub precedentemente creato.
|
||||
|
||||
1. **Inviare file locali a GitHub**. Fino ad ora è stata creata una _connessione_ tra il repository locale e quello GitHub. Ora si inviano i file locali a GitHub usando il comando `git push`, in questo modo:
|
||||
|
||||
```bash
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
Questo invia i propri commit nel ramo "main" di GitHub.
|
||||
|
||||
1. **Aggiungere ulteriori modifiche**. Se si vuole continuare a fare modifiche e inviarle a GitHub occorre usare uno dei tre comandi seguenti:
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "digitare qui il messaggio di commit"
|
||||
git push
|
||||
```
|
||||
|
||||
> Suggerimento, Si potrebbe anche utilizzare un file `.gitignore` per evitare che alcuni file che non si vogliono tracciare finiscano su GitHub - come le note che si salvano sulla cartella del progetto ma che non sono adatte in un repository pubblico. Si possono trovare modelli di file `.gitignore` a [modelli .gitignore](github.com/github/gitignore).
|
||||
|
||||
#### Messaggi di commit
|
||||
|
||||
Una grande riga di oggetto per un commit Git completa la seguente frase:
|
||||
Se applicato, questo commit farà ... (qui la vostra riga oggetto)
|
||||
|
||||
Per l'oggetto utilizzare l'imperativo presente: "modifica" non "modificato" o "modifiche"- Come per l'oggetto nel corpo (opzionale) usar4 l'imperativo presente. Il corpo dovrebbe includere il motivo della modifica e il confronto con il precedente comportamento. Si sta spiegando il `perchè`, non il `come`.
|
||||
|
||||
✅ Si prenda qualche minuto per esplorare GitHub. E' possibile scovare un bel messaggio di commit? Se ne puà trovare uno assolutamente minimale? Quali informazioni si pensa che siano le più importanti e utili per un messaggio di commit?
|
||||
|
||||
### Compito: Collaborare
|
||||
|
||||
La ragione principale per inserire cose in GitHub è di fare in modo che si possa collaborare tra sviluppatori.
|
||||
|
||||
## Lavorare su progetti con altri
|
||||
|
||||
Nel proprio repository, portarsi a `Insights > Community` per vedere come il proprio progetto si confronta con gli standard della comunità.
|
||||
|
||||
Ecco alcune cose che possono migliorare il proprio repository GitHub:
|
||||
- **Descrizione**. E' stata aggiunta una descrizione per il proprio progetto?
|
||||
- **README**. E' stato aggiunto un README (leggimi)? GitHub fornisce una traccia per scrivere un [README](https://docs.github.com/articles/about-readmes/).
|
||||
- **Linee guida per contribuire**. Il proprio progetto fornisce [linne guida per contribuire](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/),
|
||||
- **Codice di Condotta**. un [Codice di Condotta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/),
|
||||
- **Licenza**. Forse la più imporatante, una [licenza](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
|
||||
|
||||
Tutte queste risorse favoriranno la salita a bordo di nuovi elementi nella squadra. Queste sono in genere il tipo di cose che i nuovi contributori cercano anche prima di dare un'occhiata al codice, per scoprire se il progetto è il posto giusto per spendere il loro tempo.
|
||||
|
||||
✅ I file README, sebbene richiedono tempo per prepararli, sono spesso trascurati da manutentori troppo occupati. E' possibile trovare un esempio di uno particolarmente descrittivo? Nota: ci sono alcuni [strumenti per aiutare la creazione di buoni README](https://www.makeareadme.com/) che si potrebbero provare.
|
||||
|
||||
### Compito: Fondere del codice
|
||||
|
||||
La documentazione per la collaborazione aiuta a fare sì che la gente contribuisca al progetto. Spiega che tipo di collaborazione ci si deve attendere e come funziona il processo. I contributori dovranno compiere una serie di passi per poter contribuire a un repository su GitHub:
|
||||
|
||||
1. **Biforcare il repository** Probabilmente si vorrà che la gente possa _biforcare_ il proprio progetto (forking). Questa azione crea una replica di un repository al quale si vuole contribuire sul profilo del contributore su GitHub.
|
||||
1. **Clonare**. Da qui verrà eseguita una azione di clonazione del progetto sulla macchina locale del contributore.
|
||||
1. **Creare un ramo**. Sarà richiesto al contributore di creare un _ramo_ (branch) per il suo lavoro.
|
||||
1. **Concentrare le modifiche del contributore su una area**. Richiedere ai contributori di concentrarsi su una cosa sola alla volta - in questo modo le possibilità che si possa _fondere_ (merge) il lavoro del contributore sono più alte. Se viene scritta la risoluzione di un bug, o viene aggiunta una nuova funzionalità o vengono aggiornati parecchi test - cosa succede se si vuole o si può, solo implementarne 2 su 3 o 1 su 3 di queste modifiche?
|
||||
|
||||
✅ Si immagini una situazione dove i rami sono particolarmente critici per la scrittura e lo sviluppo di buon codice. A quali casi d'uso sono stati individuati?
|
||||
|
||||
> Nota, siate il cambiamento che volete vedere nel mondo, e si creino rami anche per il proprio lavoro. Qualsiasi commit che verrà fatto sarà su rami che si sta attualmente *verificando* (check out). Usare `git status` per vedere su quale ramo ci si trova attualmente.
|
||||
|
||||
Si analizza il flusso di lavoro di un contributore. Si assume che egli abbia già eseguito il _fork_ e _clonato_ il repository in modo che lo stesso sia pronto per lavorarci, sulla sua macchina locale:
|
||||
|
||||
1. **Creare un ramo**. Usare il comando `git branch` per creare un ramo che conterrà le modifiche per le quali si è offerta la collaborazione:
|
||||
|
||||
```bash
|
||||
git branch [branch-name]
|
||||
```
|
||||
|
||||
1. **Passare al ramo di lavoro**. Passare al ramo specificato e aggiornare la directory di lavoro con `git checkout`:
|
||||
|
||||
```bash
|
||||
git checkout [nome ramo]
|
||||
```
|
||||
|
||||
1. **Eseguire il lavoro**. A questo punto si vorranno aggiungere i propri cambiamenti. Non dimenticarsi di dirlo a Git tramite questi comandi:
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "le mie modifiche"
|
||||
```
|
||||
|
||||
Assicurarsi che il commit abbia un buon messaggio, a beneficio proprio e del manutentore del repository sul quale si sta collaborando.
|
||||
|
||||
1. **Combinare il proprio lavoro con il ramo `main`**. Una volta terminato il lavoro occorre combinarlo con quello del ramo principale (`main`). Il ramo principale potrebbe avere subito cambiamenti nel mentre quindi ci si deve assicurare di eseguire prima un aggiornamento all'ultima versione con i comandi:
|
||||
|
||||
```bash
|
||||
git checkout main
|
||||
git pull
|
||||
```
|
||||
|
||||
A questo punto occorre assicurarsi che qualsiasi eventuale _conflitto_ (conflict), situazioni dove Git non è in grado di determinare facilmente come _combinare_ le modifiche effettuate nel proprio ramo di lavoro. Eseguire i seguenti comandi:
|
||||
|
||||
```bash
|
||||
git checkout [branch_name]
|
||||
git merge main
|
||||
```
|
||||
|
||||
Questo porterà tutte le modifiche da `main` verso il proprio ramo, augurandosi che si possa poi continuare. In caso contrario VS Code vi può indicare dove Git si _confonde_ e si potranno modificare i file coinvolti per determinare quale contenuto sia il più accurato.
|
||||
|
||||
1. **Inviare il proprio lavoro a GitHub**. Questo significa due cose. Spingere il proprio ramo verso il proprio repository, quindi aprire una PR, Pull Request.
|
||||
|
||||
```bash
|
||||
git push --set-upstream origin [nome-ramo]
|
||||
```
|
||||
|
||||
Il comando qui sopra crea il ramo sulla propria biforcazione del repository.
|
||||
|
||||
1. **Aprire una PR**. Successivamente, si vorrà aprire una Pull Request. Si fa portandosi nel repository biforcato su GitHub. Si vedrà una indicazione su GitHub dove viene chiesto se si vuol creare una nuova PR, cliccando su questa si verrà portati su una interfaccia dove si potrà cambiare il titolo del messaggio di commit e fornire una descrizione più adatta. Ora il manutentore del repository che è stato biforcato vedrà questa PR e _incrociando le dita_ apprezzerà e _fonderà_ (merge) la PR. Ora si avrà contribuito, yay :)
|
||||
|
||||
1. **Pulire**. E' considerata buona pratica effettuare una _pulizia_ dopo il lavoro compiuto. Si vorrà pulire sia il ramo locale che quello spinto su GitHub. Per prima cosa cancellarlo localmente con il comando:
|
||||
|
||||
```bash
|
||||
git branch -d [nome-ramo]
|
||||
```
|
||||
|
||||
Successivamente assicurarsi di andare nella pagina GitHub per del repository biforcato per eliminare il ramo remoto che è stato appena spinto.
|
||||
|
||||
`Pull request` sembra un termine sciocco in quanto in realtà si vogliono portare le proprie modifiche al progetto. Ma il manutentore (proprietario del progetto) o la squadra base deve valutare i cambiamenti dei contributori prima di fonderli con il ramo principale del progetto, quindi in realtà il contributore sta chiedendo una decisione sulle modifiche al manutentore.
|
||||
|
||||
Una pull request è il posto dove confrontare e discutere le differenze introdotte su un ramo con valutazioni, commenti, verifiche integrate e altro. Una buona pull request segue grossolanmente le stesse regole di un messaggio di commit. Si può aggiungere un riferimento al problema nel tracciatore di problemi (issue tracker), quando il proprio lavoro risolve ad esempio un problema. Questo viene fatto usando un `#` seguito dal numero del vostro problema. Ad esempio `#97`.
|
||||
|
||||
🤞Incrociando le dita si spera che tutte le verifiche vengano superate e che il proprietario(i) del progetto voglia incorporare le modifiche all'interno del progetto🤞
|
||||
|
||||
Aggiornare il proprio ramo corrente locale con tutti i nuovi commit per il ramo remoto corrispondente su GitHub:
|
||||
|
||||
`git pull`
|
||||
|
||||
## Come contribuire a progetti open source
|
||||
|
||||
Per prima cosa, trovare un repository - o repo - che interessi su GitHub e per il quale si desideri contribuire con una modifica. Si vorrà copiare il contenuto sulla propria macchina.
|
||||
|
||||
✅ Un buon modo di trovare repository 'adatti per i principianti' è di [cercare il tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
|
||||
|
||||
|
||||
|
||||
Ci sono parecchi modi di copiare il codice. Un modo è "clonare" il contenuto del repository, usando HTTPS, SSH, o usando l'interfaccia da riga di comando GitHub CLI.
|
||||
|
||||
Aprire il proprio terminale e clonare il repository così:
|
||||
`git clone https://github.com/URLdelProgetto`
|
||||
|
||||
Per lavorare su un progetto, passare alla corretta cartella:
|
||||
`cd URLdelProgetto`
|
||||
|
||||
Si può anche aprire l'intero progetto usando [Codespaces](https://github.com/features/codespaces), l'editor di codice incorporato di GitHub, oppure un ambiente di sviluppo nel cloud, oppure [GitHub Desktop](https://desktop.github.com/).
|
||||
|
||||
Infine si può scaricare il codice in una cartella compressa.
|
||||
|
||||
### Qualche altra cosa interessante riguardo a GitHub
|
||||
|
||||
E' possibile attribuire una stella, osservare, e/o "biforcare" un qualsiasi progetto pubblico su GitHub. Si possono trovare i propri repository che hanno stelle nel menù a tendina in alto a destra. E' come mettere un segnalibro, ma per il codice.
|
||||
|
||||
I progetti che hanno un tracciatore di problemi, per la maggior parte nella scheda "Issues" di GitHub a meno di indicazioni diverse, è dove la gente discute dei problemi relativi al progetto. E la scheda Pull Requests è dove la gente discute e verifica le modifiche in corso d'opera.
|
||||
|
||||
I progetti potrebbero anche essere discussi nei forum, liste di distribuzione, o canali chat come Slack, Discord o IRC.
|
||||
|
||||
✅ Dare una occhiata al proprio nuovo repository in GitHub e provare alcune cose, come modificare la configurazione, aggiungere informazioni al repository e creare un progetto come un tabellone Kanban. C'è tanto che si può fare!
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Fare coppia con un amico per lavorare al codice dei progetti l'uno dell'altro. Creare un progetto in modo collaborativo, biforcare il codice, craare rami e fondere modifiche.
|
||||
|
||||
## Quiz Post-lezione
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4?loc=it)
|
||||
|
||||
## Revisione e Auto Apprendimento
|
||||
|
||||
Leggene di più al riguardo: [contribuire a software open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
|
||||
|
||||
[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
|
||||
|
||||
Esercizio, esercizio, esercizio. GitHub ha ottimi percorsi di apprendimento disponibili via [lab.github.com](https://lab.github.com/):
|
||||
|
||||
- [Prima settimana su GitHub](https://lab.github.com/githubtraining/first-week-on-github)
|
||||
|
||||
Si potranno trovare anche altri laboratori più avanzati.
|
||||
|
||||
## Compito
|
||||
|
||||
Completare [la prima settimana nel laboratorio di apprendimento di GitHub](https://lab.github.com/githubtraining/first-week-on-github)
|
||||
@ -1,17 +0,0 @@
|
||||
*Complete this quiz by checking one answer per question.*
|
||||
|
||||
1. Lighthouse only checks for accessibility problems
|
||||
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
2. Color-safe palettes help people with
|
||||
|
||||
- [ ] color-blindness
|
||||
- [ ] visual impairments
|
||||
- [ ] both the above
|
||||
|
||||
3. Descriptive links are vital for accessible web sites
|
||||
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
@ -1,17 +0,0 @@
|
||||
*Complete this quiz in class*
|
||||
|
||||
1. An accessible web site can be checked in which browser tool
|
||||
|
||||
- [ ] Lighthouse
|
||||
- [ ] Deckhouse
|
||||
- [ ] Cleanhouse
|
||||
|
||||
2. You need a physical screen reader to test accessibility for visually-impaired users
|
||||
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
3. Accessibility is only important on government web sites
|
||||
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
@ -1,17 +0,0 @@
|
||||
*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.*
|
||||
|
||||
1. Lighthouse hanya memeriksa masalah aksesibilitas
|
||||
|
||||
- [ ] benar
|
||||
- [ ] salah
|
||||
|
||||
2. Palet warna aman membantu orang dengan
|
||||
|
||||
- [ ] buta warna
|
||||
- [ ] gangguan penglihatan
|
||||
- [ ] keduanya di atas
|
||||
|
||||
3. Tautan deskriptif sangat penting untuk situs web yang dapat diakses
|
||||
|
||||
- [ ] benar
|
||||
- [ ] salah
|
||||
@ -1,17 +0,0 @@
|
||||
*Selesaikan kuis ini di kelas*
|
||||
|
||||
1. Situs web yang dapat diakses dapat diperiksa di alat browser mana
|
||||
|
||||
- [ ] Lighthouse
|
||||
- [ ] Deckhouse
|
||||
- [ ] Cleanhouse
|
||||
|
||||
2. Anda memerlukan pembaca layar fisik untuk menguji aksesibilitas bagi pengguna dengan gangguan penglihatan
|
||||
|
||||
- [ ] benar
|
||||
- [ ] salah
|
||||
|
||||
3. Aksesibilitas hanya penting di situs web pemerintah
|
||||
|
||||
- [ ] benar
|
||||
- [ ] salah
|
||||
@ -0,0 +1,228 @@
|
||||
# Creare Pagine Web Accessibili
|
||||
|
||||
|
||||
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz Pre-Lezione
|
||||
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5?loc=it)
|
||||
|
||||
> La forza del Web è nella usa universalità. L'accesso garantito a tutti a prescindere dalla disabilità è us aspetto essenziale.
|
||||
>
|
||||
> \- Sir Timothy Berners-Lee, Direttore W3C e Inventore del World Wide Web
|
||||
|
||||
Questa frase evidenzia perfettamente l'importanza di crerare siti web accessibili. Una applicazione che non può essere acceduta da tutti diventa per definizione esclusivista. Come sviluppatori web si dovrebbe sempre tenere a mente l'accessibilità. Focalizzandosi su questo fin dal principio si sarà sulla buona strada per garantire a chiunque l'accesso alle pagine che si sono create. In questa lezione, si apprenderanno gli strumenti che possono aiutare a rendere le proprie risorse web accessibili e che siano costruite con in mente l'accessibilità.
|
||||
|
||||
## Strumenti da usare
|
||||
|
||||
### Lettori di schermo
|
||||
|
||||
Uno dei più noti strumenti di accessibilità sono i lettori di schermo (screen reader)
|
||||
|
||||
I [lettori di schermo](https://www.wikiwand.com/it/Screen_reader) sono strumenti client comunemente usati per persone con menomazioni visive. Poiché dedichiamo tempo a garantire che un browser trasmetta correttamente le informazioni che desideriamo condividere, dobbiamo anche assicurarci che uno screen reader faccia lo stesso.
|
||||
|
||||
Nella sua forma più elementare, uno screen reader leggerà una pagina dall'alto verso il basso in modo udibile. Se una pagina è tutta testo, il lettore trasmetterà le informazioni in modo simile a un browser. Naturalmente, le pagine web sono raramente puramente testuali; contengono collegamenti, grafica, colore e altri componenti visivi. È necessario prestare attenzione per garantire che queste informazioni vengano lette correttamente da uno screen reader.
|
||||
|
||||
Ogni sviluppatore web dovrebbe acquisire familiarità con uno screen reader. Come evidenziato sopra, è il client che gli utenti dello sviluppatore utilizzeranno. Allo stesso modo in cui si ha familiarità con il funzionamento di un browser, si dovrebbe imparare come funziona uno screen reader. Fortunatamente, gli screen reader sono integrati nella maggior parte dei sistemi operativi.
|
||||
|
||||
Alcuni browser hanno anche strumenti incorporati ed estensioni che possono leggere il testo ad alta voce o persino fornire alcune funzionalità di navigazione di base, come [questi strumenti orientati all'accessibilità del browser Edge](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features) . Anche questi sono importanti strumenti di accessibilità, ma funzionano in modo molto diverso dagli screen reader e non dovrebbero essere scambiati per strumenti di test per uno screen reader.
|
||||
|
||||
✅ Provare un lettore di schermo e un lettore di testo del browser. In Windows, l'[Assistente vocale](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) (Narrator) è incluso per impostazione predefinita e anche [JAWS](https://webaim.org/articles/jaws/) e [NVDA](https://www.nvaccess.org/about-nvda/) possono essere installati Su macOS e iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) è installato per impostazione predefinita.
|
||||
|
||||
### Zoom
|
||||
|
||||
Un altro strumento comunemente utilizzato dalle persone con problemi di vista è lo zoom. Il tipo più semplice di zoom è lo zoom statico, controllato tramite `Control + segno più (+)` o diminuendo la risoluzione dello schermo. Questo tipo di zoom provoca il ridimensionamento dell'intera pagina, quindi l'utilizzo [di una progettazione responsive](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) della pagina è importante per fornire una buona esperienza utente a livelli di zoom aumentati.
|
||||
|
||||
Un altro tipo di zoom si basa su un software specializzato per ingrandire un'area dello schermo e fare una panoramica, proprio come usare una vera lente di ingrandimento. Su Windows, [Magnifier](https://support.microsoft.com/en-us/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) è integrato e [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) è un software di ingrandimento di terze parti con più funzionalità e una base di utenti più ampia. Sia macOS che iOS hanno un software di ingrandimento integrato chiamato [Zoom](https://www.apple.com/accessibility/mac/vision/).
|
||||
|
||||
### Verificatori di contrasto
|
||||
|
||||
I colori sui siti web devono essere scelti con cura per rispondere alle esigenze degli utenti daltonici o delle persone che hanno difficoltà a vedere i colori a basso contrasto.
|
||||
|
||||
✅ Provare un sito web che piace usare per l'utilizzo del colore con un'estensione del browser come [il controllo del colore WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Cosa si è appreso?
|
||||
|
||||
### Lo strumento Faro (Lighthouse)
|
||||
|
||||
Nell'area degli strumenti per sviluppatori del browser, si troverà lo strumento Lighthouse. Questo strumento è importante per ottenere una prima visione dell'accessibilità (così come altre analisi) di un sito web. Sebbene sia importante non fare affidamento esclusivamente su Lighthouse, un punteggio del 100% è molto utile come riferimento.
|
||||
|
||||
✅ Trovare Lighthouse nel pannello degli strumenti per sviluppatori del proprio browser ed eseguire un'analisi su qualsiasi sito. Cosa si è scoperto?
|
||||
|
||||
## Progettare per l'accessibilità
|
||||
|
||||
L'accessibilità è un argomento relativamente ampio. A supporto, sono disponibili numerose risorse.
|
||||
|
||||
- [Accessibile U - Università del Minnesota](https://accessibility.umn.edu/your-role/web-developers)
|
||||
|
||||
Sebbene non si sarà in grado di coprire ogni aspetto della creazione di siti accessibili, di seguito sono riportati alcuni dei principi fondamentali che si vorranno implementare. Progettare una pagina accessibile dall'inizio è **sempre** più facile che tornare a una pagina esistente per renderla accessibile.
|
||||
|
||||
## Buoni principi di visualizzazione
|
||||
|
||||
### Tavolozze di colori sicuri
|
||||
|
||||
Le persone vedono il mondo in modi diversi, e questo include i colori. Quando si seleziona una combinazione di colori per il proprio sito, ci si dovrebbe assicurare che sia accessibile a tutti. Un ottimo [strumento per generare tavolozze di colori è Color Safe](http://colorsafe.co/).
|
||||
|
||||
✅ Identificare un sito web che è molto problematico nel suo uso del colore. Perché?
|
||||
|
||||
### Usa l'HTML corretto
|
||||
|
||||
Con CSS e JavaScript è possibile far sembrare qualunque elemento come un qualsiasi tipo di controllo. `<span>` potrebbe essere usato per creare un `<button>`, e `<b>` potrebbe diventare un collegamento ipertestuale. Sebbene questo possa essere considerato più facile da definire, non trasmette nulla a uno screen reader. Occorre usare l'HTML appropriato quando si creano i controlli su una pagina. Se si vuole un collegamento ipertestuale usare `<a>`. L'utilizzo dell'HTML corretto per il controllo corretto è chiamato fare uso dell'HTML semantico.
|
||||
|
||||
✅ Portarsi su qualsiasi sito web e controllare se i progettisti e gli sviluppatori stanno usando l'HTML correttamente. Si riesce a trovare un pulsante che dovrebbe essere un collegamento? Suggerimento: fare clic con il tasto destro e scegliere "Visualizza sorgente pagina" nel browser per esaminare il codice relativo.
|
||||
|
||||
### Creare una gerarchia descrittiva delle intestazioni
|
||||
|
||||
Gli utenti di screen reader [fanno molto affidamento sui titoli](https://webaim.org/projects/screenreadersurvey8/#finding) per trovare informazioni e navigare in una pagina. La scrittura di contenuto di intestazione descrittiva e l'utilizzo di tag di intestazione semantici sono importanti per creare un sito facilmente navigabile per gli utenti di lettori di schermo.
|
||||
|
||||
### Usare buoni indizi visivi
|
||||
|
||||
CSS offre il controllo completo sull'aspetto di qualsiasi elemento in una pagina. È possibile creare caselle di testo senza un contorno o collegamenti ipertestuali senza una sottolineatura. Sfortunatamente rimuovere questi indizi può rendere più difficile per qualcuno che dipende da loro essere in grado di riconoscere il tipo di controllo.
|
||||
|
||||
## L'importanza del testo del collegamento
|
||||
|
||||
I collegamenti ipertestuali sono fondamentali per la navigazione sul Web. Di conseguenza, assicurarsi che uno screen reader possa leggere correttamente i collegamenti consente a tutti gli utenti di navigare nel proprio sito.
|
||||
|
||||
### Lettori di schermo e collegamenti
|
||||
|
||||
Come ci si potrebbe aspettare, gli screen reader leggono il testo del collegamento nello stesso modo in cui leggono qualsiasi altro testo nella pagina. Tenedo presente questo, il testo mostrato di seguito potrebbe sembrare perfettamente accettabile.
|
||||
|
||||
> Il pinguino minore, a volte noto come il pinguino delle fate, è il più piccolo pinguino del mondo. [Fare clic qui](https://en.wikipedia.org/wiki/Little_penguin) per ulteriori informazioni.
|
||||
|
||||
> Il Il pinguino minore, a volte noto come il pinguino delle fate, è il più piccolo pinguino del mondo. Visitare https://en.wikipedia.org/wiki/Little_penguin per ulteriori informazioni.
|
||||
|
||||
> **NOTA** Come si leggerà di seguito, non si dovrebbero **mai** creare collegamenti che assomigliano all'esempio precedente
|
||||
|
||||
Si ricordi che gli screen reader sono un'interfaccia diversa dai browser con un diverso insieme di funzionalità.
|
||||
|
||||
### Il problema con l'utilizzo dell'URL
|
||||
|
||||
I lettori di schermo leggono il testo. Se nel testo viene visualizzato un URL, lo screen reader leggerà l'URL. In generale, l'URL non trasmette informazioni significative e può sembrare al suono fastidioso. Si potrebbe averlo riscontrato se il proprio telefono ha mai letto in modo udibile un messaggio di testo con un URL.
|
||||
|
||||
### Il problema con "clicca qui"
|
||||
|
||||
I lettori di schermo hanno anche la capacità di leggere solo i collegamenti ipertestuali su una pagina, molto nello stesso modo in cui una persona vedente scorrerebbe una pagina per cercare collegamenti. Se il testo del link è sempre "clicca qui", tutto ciò che l'utente sentirà sarà "clicca qui, clicca qui, clicca qui, clicca qui, clicca qui, ..." Tutti i collegamenti sono ora indistinguibili l'uno dall'altro.
|
||||
|
||||
### Buon testo del collegamento
|
||||
|
||||
Un buon testo del collegamento descrive brevemente cosa c'è dall'altra parte del collegamento. Nell'esempio sopra che parla di piccoli pinguini, il collegamento è alla pagina di Wikipedia sulla specie. La frase *piccoli pinguini* renderebbe il testo del collegamento perfetto in quanto chiarisce ciò che qualcuno imparerà se fa clic sul collegamento: piccoli pinguini.
|
||||
|
||||
> Il [pinguino minore](https://www.wikiwand.com/it/Eudyptula_minor), a volte noto come il pinguino delle fate, è il più piccolo pinguino del mondo.
|
||||
|
||||
✅ Navigare sul Web per alcuni minuti per trovare pagine che utilizzano oscure strategie di collegamento. Confrontarle con altri siti con collegamenti migliori. Cosa si è appreso?
|
||||
|
||||
#### Note sui motori di ricerca
|
||||
|
||||
Come bonus aggiuntivo per garantire che il proprio sito sia accessibile a tutti, si dovranno aiutare anche i motori di ricerca a navigare nel sito. I motori di ricerca utilizzano il testo del collegamento per apprendere gli argomenti delle pagine. Quindi usare un buon testo per i link aiuta tutti!
|
||||
|
||||
### ARIA
|
||||
|
||||
Si Immagini la pagina seguente:
|
||||
|
||||
| Prodotto | Descrizione | Ordine |
|
||||
| ---------------- | ------------------ | ------------- |
|
||||
| Widget | [Descrizione]('#') | [Ordine]('#') |
|
||||
| DMX Super Widget | [Descrizione]('#') | [Ordine]('#') |
|
||||
|
||||
In questo esempio, la duplicazione del testo della descrizione e dell'ordine ha senso per qualcuno che utilizza un browser. Tuttavia, qualcuno che utilizza uno screen reader ascolterebbe solo le parole *descrizione* e *ordine* ripetute senza contesto.
|
||||
|
||||
Per supportare questi tipi di scenari, HTML supporta una serie di attributi noti come [ARIA (Accessible Rich Internet Applications)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Questi attributi consentono di fornire informazioni aggiuntive agli screen reader.
|
||||
|
||||
> **NOTA**: come molti aspetti dell'HTML, il supporto del browser e dello screen reader può variare. Tuttavia, la maggior parte dei client principali supporta gli attributi ARIA.
|
||||
|
||||
E' possibile utilizzare `aria-label` per descrivere il collegamento quando il formato della pagina non lo consente. La descrizione del widget potrebbe essere impostata come
|
||||
|
||||
```html
|
||||
<a href="#" aria-label="Widget description">description</a>
|
||||
```
|
||||
|
||||
✅ In generale, l'uso del markup semantico come descritto sopra sostituisce l'uso di ARIA, ma a volte non esiste un equivalente semantico per diversi widget HTML. Un buon esempio è una struttura ad albero. Non esiste un equivalente HTML per una struttura ad albero, quindi si identifica il generico `<div>` per questo elemento con un ruolo e valori aria appropriati. La [documentazione MDN su ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) contiene ulteriori utili informazioni.
|
||||
|
||||
```html
|
||||
<h2 id="tree-label">File Viewer</h2>
|
||||
<div role="tree" aria-labelledby="tree-label">
|
||||
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Immagini
|
||||
|
||||
Inutile dire che gli screen reader non sono in grado di leggere automaticamente il contenuto di un'immagine. Assicurarsi che le immagini siano accessibili non richiede molto lavoro: è ciò di cui tratta l'attributo `alt` . Tutte le immagini significative dovrebbero avere un `alt` per descrivere cosa sono. Le immagini che sono puramente decorative dovrebbero avere il loro attributo `alt` impostato su una stringa vuota: `alt = ""`. Ciò impedisce ai lettori di schermo di annunciare inutilmente l'immagine decorativa.
|
||||
|
||||
✅ Come ci si potrebbe aspettare, anche i motori di ricerca non sono in grado di capire cosa c'è in un'immagine. Anch'essi usano il testo alternativo. Quindi, ancora una volta, assicurandosi che la propria pagina sia accessibile fornisce bonus aggiuntivi!
|
||||
|
||||
## La tastiera
|
||||
|
||||
Alcuni utenti non sono in grado di utilizzare un mouse o un trackpad, affidandosi invece alle interazioni della tastiera per passare da un elemento all'altro. È importante che il proprio sito web presenti i contenuti in ordine logico in modo che un utente usando la tastiera possa accedere a ogni elemento interattivo mentre si sposta nel flusso di un documento. Se si creano le proprie pagine web con markup semantico e si utilizza CSS per definire lo stile del layout visivo, il proprio sito dovrebbe essere navigabile da tastiera, ma è importante testare manualmente questo aspetto. Per saperne di più su ulteriori informazioni sulle [strategie di navigazione da tastiera](https://webaim.org/techniques/keyboard/).
|
||||
|
||||
✅ Andare su qualsiasi sito web e provare a navigarlo utilizzando solo la tastiera. Cos'è che funziona e cos'è che non funziona? Perché?
|
||||
|
||||
## Riepilogo
|
||||
|
||||
Un Web accessibile ad alcuni non è un vero "world-wide web". Il modo migliore per garantire che i siti che si creano siano accessibili è incorporare le migliori pratiche di accessibilità sin dall'inizio. Sebbene siano necessari passaggi aggiuntivi, incorporare queste abilità nel flusso di lavoro ora significa che tutte le pagine che si creeranno saranno accessibili.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Prendere questo HTML e riscriverlo per essere il più accessibile possibile, date le strategie che sono state apprese.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Example
|
||||
</title>
|
||||
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-header">
|
||||
<p class="site-title">Turtle Ipsum</p>
|
||||
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
|
||||
</div>
|
||||
<div class="main-nav">
|
||||
<p class="nav-header">Resources</p>
|
||||
<div class="nav-list">
|
||||
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div>
|
||||
<p class="page-title">Welcome to Turtle Ipsum.
|
||||
<a href="">Click here</a> to learn more.
|
||||
</p>
|
||||
<p class="article-text">
|
||||
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-section">
|
||||
<span class="button">Sign up for turtle news</span>
|
||||
</div><div class="footer-section">
|
||||
<p class="nav-header footer-title">
|
||||
Internal Pages
|
||||
</p>
|
||||
<div class="nav-list">
|
||||
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="footer-copyright">© 2016 Instrument</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Quiz post-lezione
|
||||
[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/6?loc=it)
|
||||
|
||||
## Revisione e auto apprendimento
|
||||
|
||||
Molti governi hanno leggi riguardanti i requisiti di accessibilità. Consultare le leggi sull'accessibilità del proprio paese d'origine. Cosa è coperto e cosa no? Un esempio è [questo sito web del governo inglese](https://accessibility.blog.gov.uk/).
|
||||
|
||||
## Assegnazione
|
||||
|
||||
[Analizzare un sito web non accessibile](assignment.md)
|
||||
|
||||
Crediti: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) da Instrument
|
||||
@ -0,0 +1,12 @@
|
||||
# एक गैर-सुलभ वेब साइट का विश्लेषण करें
|
||||
|
||||
## अनुदेश
|
||||
|
||||
एक ऐसी वेब साइट की पहचान करें जिसे आप मानते हैं कि वह सुलभ नहीं है, और उसकी पहुँच में सुधार के लिए एक कार्य योजना बनाएँ. आपका पहला काम इस साइट की पहचान करना होगा, उन तरीकों को विस्तार से बताएं जो आपको लगता है कि यह विश्लेषणात्मक उपकरणों का उपयोग किए बिना दुर्गम है, और फिर इसे लाइटहाउस विश्लेषण के माध्यम से डालें. इस विश्लेषण के परिणामों को लें और कम से कम दस बिंदुओं के साथ एक विस्तृत योजना की रूपरेखा दिखाएं कि साइट को कैसे बेहतर बनाया जा सकता है.
|
||||
|
||||
## सरनामा
|
||||
|
||||
| मानदंड | उदाहरणात्मक |
|
||||
पर्याप्त | सुधार की जरूरत |
|
||||
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
|
||||
| छात्र की रिपोर्ट | साइट कैसे अपर्याप्त है, इस पर पैराग्राफ शामिल हैं, पीडीएफ के रूप में कैप्चर की गई लाइटहाउस रिपोर्ट, सुधार करने के लिए दस बिंदुओं की एक सूची, इसे कैसे सुधारें, इस पर विवरण के साथ। | आवश्यक का 20% गायब है | आवश्यक का 50% गायब है |
|
||||
@ -0,0 +1,11 @@
|
||||
# Analizzare un sito web non accessibile
|
||||
|
||||
## Istruzioni
|
||||
|
||||
Identificare un sito web che si ritiene NON accessibile e creare un piano d'azione per migliorarne l'accessibilità. Il primo compito sarà identificare questo sito, dettagliare i modi in cui si ritiene che sia inaccessibile senza utilizzare strumenti analitici e quindi sottoporlo a un'analisi Lighthouse. Prendere i risultati di questa analisi e delineare un piano dettagliato con un minimo di dieci punti che mostrano come il sito potrebbe essere migliorato.
|
||||
|
||||
## Rubrica
|
||||
|
||||
| Criteri | Ottimo | Adeguato | Necessita miglioramento |
|
||||
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
|
||||
| rapporto dello studente | include paragrafi su come il sito è inadeguato, il report Lighthouse catturato come pdf, un elenco di dieci punti da migliorare, con dettagli su come migliorarlo | manca il 20% del richiesto | manca il 50% del richiesto |
|
||||
@ -0,0 +1,11 @@
|
||||
# アクセスできない Web サイトを分析する
|
||||
|
||||
## 説明書
|
||||
|
||||
あなたがアクセシブルではないと思う Web サイトを特定し、そのアクセシビリティを改善するためのアクションプランを作成してください。あなたの最初のタスクは、このサイトを特定し、分析ツールを使用せずにアクセスできないと思う方法を詳細に説明し、Lighthouse 分析にかけることです。この分析結果をもとに、サイトがどのように改善されるかを示す最低10点の詳細な計画を作成してください。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
|
||||
| student report | サイトがどのように不十分であるかについての段落、PDFとしてキャプチャ灯台のレポート、それを改善する方法の詳細と、改善すべき10のポイントのリストが含まれています。 | 必要な 20% が欠落している | 必要な 50% が欠落している |
|
||||
@ -0,0 +1,17 @@
|
||||
# Getting Started with Web Development
|
||||
|
||||
In questa sezione del curriculum, vi saranno introdotti concetti non relativi al progetto importanti per diventare uno sviluppatore professionista.
|
||||
|
||||
### Argomenti
|
||||
|
||||
1. [Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari](1-intro-to-programming-languages/translations/README.id.md)
|
||||
2. [Concetti base di GitHub](2-github-basics/translations/README.it.md)
|
||||
3. [Concetti base di Accessibilità](3-accessibility/translations/README.it.md)
|
||||
|
||||
### Riconoscimenti
|
||||
|
||||
Concetti Base di Accessibilità è stato scritto con il ♥️ da [Christopher Harrison](https://twitter.com/geektrainer)
|
||||
|
||||
Introduzione a GitHub è stato scritto con il ♥️ da [Floor Drees](https://twitter.com/floordrees)
|
||||
|
||||
Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari sono stati scritti con il ♥️ da [Jasmine Greenaway](https://twitter.com/paladique)
|
||||
@ -0,0 +1,17 @@
|
||||
# Web 開発を始めるにあたって
|
||||
|
||||
このセクションでは、プロの開発者になるために重要なプロジェクトベースではない概念を紹介します。
|
||||
|
||||
### トピック
|
||||
|
||||
1. [プログラミング言語と開発ツール入門](1-intro-to-programming-languages/README.md)
|
||||
2. [GitHub の基本](2-github-basics/README.md)
|
||||
3. [アクセシビリティの基本](3-accessibility/README.md)
|
||||
|
||||
### Credits
|
||||
|
||||
Basics of Accessibility was written with ♥️ by [Christopher Harrison](https://twitter.com/geektrainer)
|
||||
|
||||
Introduction to GitHub was written with ♥️ by [Floor Drees](https://twitter.com/floordrees)
|
||||
|
||||
Introduction to Programming Languages and Tools of the Trade was written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique)
|
||||
@ -1,18 +0,0 @@
|
||||
*Complete this quiz after the lesson by checking one answer per question.*
|
||||
|
||||
1. Constants are the same as `let` and `var` to declare variables except
|
||||
|
||||
- [ ] Constants must be initialized
|
||||
- [ ] Constants can be altered
|
||||
- [ ] Constants can be reassigned
|
||||
|
||||
2. Numbers and ____ are JavaScript primitives that handle numeric data
|
||||
|
||||
- [ ] bigint
|
||||
- [ ] boolean
|
||||
- [ ] star
|
||||
|
||||
3. Strings can reside between both single and double quotes
|
||||
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
@ -1,17 +0,0 @@
|
||||
*Complete this quiz in class*
|
||||
|
||||
1. Booleans are a data type you can use to test the length of a string
|
||||
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
1. The following is an operation you can perform on a string
|
||||
|
||||
- [ ] concatenation
|
||||
- [ ] appending
|
||||
- [ ] splicing
|
||||
|
||||
3. `==` and `===` are interchangeable
|
||||
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
@ -0,0 +1,199 @@
|
||||
# Dasar-dasar JavaScript: Tipe Data
|
||||
|
||||
|
||||
|
||||
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
|
||||
[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7?loc=id)
|
||||
|
||||
Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web.
|
||||
|
||||
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Jenis data di JavaScript")
|
||||
|
||||
Mari kita mulai dengan variabel dan tipe data yang mengisinya!
|
||||
|
||||
## Variabel
|
||||
|
||||
Variabel menyimpan nilai yang dapat digunakan dan diubah di seluruh kode Anda.
|
||||
|
||||
Membuat dan **mendeklarasikan** variabel memiliki sintaks berikut **[kata kunci] [nama]**. Itu terdiri dari dua bagian:
|
||||
|
||||
- **Kata kunci (Keywords)**. Kata kunci bisa `let` atau `var`.
|
||||
|
||||
> Catatan, Mereka kata kunci `let` diperkenalkan di ES6 dan memberi variabel Anda apa yang disebut _block scope_. Anda disarankan untuk menggunakan `let` di atas `var`. Kita akan membahas cakupan blok lebih mendalam di bagian mendatang.
|
||||
|
||||
- **Nama variabel**, ini adalah nama yang Anda pilih sendiri.
|
||||
|
||||
### Tugas - bekerja dengan variabel
|
||||
|
||||
1. **Deklarasikan variabel**. Mari kita deklarasikan variabel menggunakan kata kunci `let`:
|
||||
|
||||
```javascript
|
||||
let variabelSaya;
|
||||
```
|
||||
|
||||
`variabelSaya` sekarang telah dideklarasikan menggunakan kata kunci `let`. Saat ini tidak memiliki nilai.
|
||||
|
||||
1. **Tetapkan nilai**. Simpan nilai dalam variabel dengan operator `=`, diikuti dengan nilai yang diharapkan.
|
||||
|
||||
```javascript
|
||||
variabelSaya = 123;
|
||||
```
|
||||
|
||||
> Catatan: penggunaan `=` dalam pelajaran ini berarti kita menggunakan "operator penugasan (assignment operator)", yang digunakan untuk menetapkan nilai ke variabel. Itu _tidak menunjukkan kesetaraan_.
|
||||
|
||||
`variabelSaya` sekarang telah _diinisialisasi (initialized)_ dengan nilai 123.
|
||||
|
||||
1. **Refaktor**. Ganti kode Anda dengan pernyataan berikut.
|
||||
|
||||
```javascript
|
||||
let variabelSaya = 123;
|
||||
```
|
||||
|
||||
Di atas disebut inisialisasi _explisit_ saat variabel dideklarasikan dan diberi nilai pada saat yang sama.
|
||||
|
||||
1. **Ubah nilai variabel**. Ubah nilai variabel dengan cara berikut:
|
||||
|
||||
```javascript
|
||||
variabelSaya = 321;
|
||||
```
|
||||
|
||||
Setelah variabel dideklarasikan, Anda dapat mengubah nilainya di titik mana pun dalam kode Anda dengan operator `=` dan nilai baru.
|
||||
|
||||
✅ Cobalah! Anda dapat menulis JavaScript langsung di browser Anda. Buka jendela browser dan arahkan ke Alat Pengembang. Di konsol, Anda akan menemukan prompt; ketik `let variabelSaya = 123`, tekan enter, lalu ketik `variabelSaya`. Apa yang terjadi? Catatan, Anda akan mempelajari lebih lanjut tentang konsep ini di pelajaran berikutnya.
|
||||
|
||||
## Konstanta (Constants)
|
||||
|
||||
Deklarasi dan inisialisasi konstanta mengikuti konsep yang sama sebagai variabel, dengan pengecualian kata kunci `const`. Konstanta biasanya dideklarasikan dengan semua huruf besar.
|
||||
|
||||
```javascript
|
||||
const VARIABEL_SAYA = 123;
|
||||
```
|
||||
|
||||
Konstanta mirip dengan variabel, dengan dua pengecualian:
|
||||
|
||||
- **Harus punya nilai**. Konstanta harus diinisialisasi, atau kesalahan akan terjadi saat menjalankan kode.
|
||||
- **Referensi tidak dapat diubah**. Referensi konstanta tidak dapat diubah setelah diinisialisasi, atau kesalahan akan terjadi saat menjalankan kode. Mari kita lihat dua contoh:
|
||||
|
||||
- **Nilai sederhana**. Berikut ini TIDAK diperbolehkan:
|
||||
|
||||
```javascript
|
||||
const PI = 3;
|
||||
PI = 4; // tidak diperbolehkan
|
||||
```
|
||||
|
||||
- **Referensi objek dilindungi**. Berikut ini TIDAK diperbolehkan.
|
||||
|
||||
```javascript
|
||||
const obj = { a: 3 };
|
||||
obj = { b: 5 }; // tidak diperbolehkan
|
||||
```
|
||||
|
||||
- **Nilai objek tidak dilindungi**. Berikut diperbolehkan:
|
||||
|
||||
```javascript
|
||||
const obj = { a: 3 };
|
||||
obj.a = 5; // diperbolehkan
|
||||
```
|
||||
|
||||
Di atas Anda mengubah nilai objek tetapi bukan referensi itu sendiri, yang membuatnya diizinkan.
|
||||
|
||||
> Catatan, `const` berarti referensi dilindungi dari penugasan ulang. Nilainya tidak _immutable_ dan bisa berubah, terutama jika itu adalah konstruksi kompleks seperti sebuah objek.
|
||||
|
||||
## Tipe Data
|
||||
|
||||
Variabel dapat menyimpan berbagai jenis nilai, seperti angka dan teks. Berbagai jenis nilai ini dikenal sebagai **tipe data**. Tipe data adalah bagian penting dari pengembangan perangkat lunak karena membantu pengembang membuat keputusan tentang bagaimana kode harus ditulis dan bagaimana perangkat lunak harus dijalankan. Selain itu, beberapa tipe data memiliki fitur unik yang membantu mengubah atau mengekstrak informasi tambahan dalam sebuah nilai.
|
||||
|
||||
✅ Tipe Data juga disebut sebagai data primitif JavaScript, karena mereka adalah tipe data tingkat terendah yang disediakan oleh bahasa. Ada 6 tipe data primitif: string, number, bigint, boolean, undefined, dan symbol. Luangkan waktu sebentar untuk memvisualisasikan apa yang mungkin diwakili oleh masing-masing primitif ini. Apa itu `zebra`? Bagaimana dengan `0`? `true`?
|
||||
|
||||
### Angka (Numbers)
|
||||
|
||||
Pada bagian sebelumnya nilai `variabelSaya` adalah tipe data angka.
|
||||
|
||||
`let variabelSaya = 123;`
|
||||
|
||||
Variabel dapat menyimpan semua jenis angka, termasuk desimal atau angka negatif. Angka juga dapat digunakan dengan operator aritmatika, yang dibahas di [bagian selanjutnya](#Operator-Aritmatika).
|
||||
|
||||
### Operator Aritmatika
|
||||
|
||||
Ada beberapa jenis operator untuk digunakan saat menjalankan fungsi aritmatika, dan beberapa di antaranya tercantum di sini:
|
||||
|
||||
| Simbol | Deskripsi | Contoh |
|
||||
| ------ | --------------------------------------------------- | ------------------------------------------ |
|
||||
| `+` | **Penjumlahan**: Menghitung jumlah dari dua angka | `1 + 2 //hasil yang diharapkan adalah 3` |
|
||||
| `-` | **Pengurangan**: Menghitung selisih dua angka | `1 - 2 //hasil yang diharapkan adalah -1` |
|
||||
| `*` | **Perkalian**: Menghitung hasil kali dua angka | `1 * 2 //hasil yang diharapkan adalah 2` |
|
||||
| `/` | **Pembagian**: Menghitung hasil bagi dari dua angka | `1 / 2 //hasil yang diharapkan adalah 0.5` |
|
||||
| `%` | **Sisa**: Menghitung sisa dari pembagian dua angka | `3 % 2 //hasil yang diharapkan adalah 1` |
|
||||
|
||||
✅ Cobalah! Coba operasi aritmatika di konsol browser Anda. Apakah hasilnya mengejutkan Anda?
|
||||
|
||||
### String
|
||||
|
||||
String adalah kumpulan karakter yang berada di antara tanda kutip tunggal atau ganda.
|
||||
|
||||
- `'Ini string'`
|
||||
- `"Ini juga string"`
|
||||
- `let myString = 'Ini adalah nilai string yang disimpan dalam variabel';`
|
||||
|
||||
Ingatlah untuk menggunakan tanda kutip saat menulis string, atau JavaScript akan menganggapnya sebagai nama variabel.
|
||||
|
||||
### Memformat String
|
||||
|
||||
String bersifat tekstual, dan akan membutuhkan pemformatan dari waktu ke waktu.
|
||||
|
||||
Untuk **menggabungkan (concatenate)** dua string atau lebih, atau menggabungkannya, gunakan operator `+`.
|
||||
|
||||
```javascript
|
||||
let myString1 = "Hello";
|
||||
let myString2 = "World";
|
||||
|
||||
myString1 + myString2 + "!"; //HelloWorld!
|
||||
myString1 + " " + myString2 + "!"; //Hello World!
|
||||
myString1 + ", " + myString2 + "!"; //Hello, World!
|
||||
```
|
||||
|
||||
✅ Mengapa `1 + 1 = 2` di JavaScript, tetapi`'1' + '1' = 11?`Pikirkanlah. Bagaimana dengan `'1' + 1`?
|
||||
|
||||
**Template literals** adalah cara lain untuk memformat string, kecuali sebagai pengganti tanda kutip, digunakan backtick. Apa pun yang bukan teks biasa harus ditempatkan di dalam placeholder `${ }`. Ini termasuk variabel apa pun yang mungkin berupa string.
|
||||
|
||||
```javascript
|
||||
let myString1 = "Hello";
|
||||
let myString2 = "World";
|
||||
|
||||
`${myString1} ${myString2}!` //Hello World!
|
||||
`${myString1}, ${myString2}!`; //Hello World!
|
||||
```
|
||||
|
||||
Anda dapat mencapai tujuan pemformatan Anda dengan salah satu metode, tetapi template literal akan menghormati spasi dan jeda baris apa pun.
|
||||
|
||||
✅ Kapan Anda akan menggunakan template literal dibanding string biasa?
|
||||
|
||||
### Boolean
|
||||
|
||||
Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean dapat membantu membuat keputusan tentang baris kode mana yang harus dijalankan ketika kondisi tertentu terpenuhi. Dalam banyak kasus, [operator](#operator) membantu pengaturan nilai Boolean dan Anda akan sering melihat dan menulis variabel yang diinisialisasi atau nilainya diperbarui dengan operator.
|
||||
|
||||
- `let myTrueBool = true`
|
||||
- `let myFalseBool = false`
|
||||
|
||||
✅ Variabel dapat dianggap 'benar (truthy)' jika dievaluasi ke boolean `true`. Menariknya, di JavaScript, [semua nilai adalah benar (truthy) kecuali jika didefinisikan sebagai salah](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Tantangan
|
||||
|
||||
JavaScript terkenal karena cara yang mengejutkan dalam menangani tipe data pada kesempatan tertentu. Lakukan sedikit riset tentang 'kejutaan' ini. Misalnya: sensitivitas kasus bisa menggigit! Coba ini di konsol Anda: `let usia = 1; let Usia = 2; usia == Usia` (meghasilkan `false` - kenapa?). Kejutan lain apa yang bisa kamu temukan?
|
||||
|
||||
## Kuis Pasca-Kuliah
|
||||
|
||||
[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8?loc=id)
|
||||
|
||||
## Review & Belajar Mandiri
|
||||
|
||||
Lihat [daftar latihan JavaScript ini](https://css-tricks.com/snippets/javascript/) dan coba salah satunya. Apa yang kamu pelajari?
|
||||
|
||||
## Tugas
|
||||
|
||||
[Praktek Tipe Data](assignment.id.md)
|
||||
@ -0,0 +1,11 @@
|
||||
# डेटा प्रकार अभ्यास
|
||||
|
||||
## अनुदेश
|
||||
|
||||
कल्पना कीजिए कि आप एक शॉपिंग कार्ट बना रहे हैं। डेटा प्रकारों पर कुछ दस्तावेज लिखें, जिन्हें आपको अपने खरीदारी के अनुभव को पूरा करने की आवश्यकता होगी। आप अपनी पसंद पर कैसे पहुंचे?
|
||||
|
||||
## सरनामा
|
||||
|
||||
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||
| ------ | ---------------------------------------------------------------------------------- | --------------------------- | -------------------------- |
|
||||
| | छह डेटा प्रकार सूचीबद्ध हैं और विस्तार से पता लगाया है, उनके उपयोग का दस्तावेजीकरण | चार डेटाप्रकार की खोज की है | दो डेटाप्रकार की खोज की है |
|
||||
@ -0,0 +1,11 @@
|
||||
# Praktek Tipe Data
|
||||
|
||||
## Instruksi
|
||||
|
||||
Bayangkan Anda sedang membuat keranjang belanja. Tulislah beberapa dokumentasi tentang tipe data yang Anda perlukan untuk melengkapi pengalaman berbelanja Anda. Bagaimana Anda sampai pada pilihan Anda?
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Contoh | Memenuhi Syarat | Perlu Perbaikan |
|
||||
|----------|----------------------------------------------------------------------------------------|------------------------------|----------------------------|
|
||||
| | Enam tipe data didaftar dan dieksplorasi secara rinci, mendokumentasikan penggunaannya | Empat tipe data dieksplorasi | Dua tipe data dieksplorasi |
|
||||
@ -0,0 +1,11 @@
|
||||
# データ型の練習
|
||||
|
||||
## 説明書
|
||||
|
||||
あなたがショッピングカートを構築していると想像してください。ショッピング体験を完成させるために必要なデータ型について、いくつかの文書を書いてください。どのようにして選択にたどり着いたのでしょうか？
|
||||
|
||||
## ルーブリック
|
||||
|
||||
基準 | 模範的な例 | 適切な | 改善が必要
|
||||
--- | --- | --- | -- |
|
||||
||6つのデータタイプをリストアップして詳細に調査し、その使用法を文書化しています。|4つのデータ型が探索されています。|2つのデータタイプが探索されています。|
|
||||
@ -0,0 +1,12 @@
|
||||
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||
|
||||
1. किसी फ़ंक्शन में सभी मापदंडों के लिए तर्क प्रदान किए जाने चाहिए
|
||||
|
||||
- [ ] सही
|
||||
- [ ] गलत
|
||||
|
||||
2. एक डिफ़ॉल्ट मान क्या करता है?
|
||||
|
||||
- [ ] एक सही मूल्य निर्धारित करता है
|
||||
- [ ] एक पैरामीटर के लिए एक स्टार्टर मूल्य देता है ताकि आपका कोड अभी भी व्यवहार करता है यदि आप इसके लिए एक तर्क छोड़ देते हैं
|
||||
- [ ] कोई उपयोगिता नहीं है
|
||||
@ -0,0 +1,12 @@
|
||||
_इस क्विज को कक्षा में पूरा करें_
|
||||
|
||||
1. तर्क क्या है?
|
||||
|
||||
- [ ] यह कुछ है जिसे आप फ़ंक्शन परिभाषा में घोषित करते हैं
|
||||
- [ ] यह ऐसा कुछ है जिसे आप एक समारोह में भेजते हैं
|
||||
- [ ] यह कुछ ऐसा है जो आप उन लोगों के साथ हैं जिन्हें आप जानते हैं
|
||||
|
||||
2. सही या गलत: एक फ़ंक्शन को कुछ वापस करना होगा
|
||||
|
||||
- [ ] सही
|
||||
- [ ] गलत
|
||||
@ -0,0 +1,194 @@
|
||||
# Dasar-dasar JavaScript: Metode dan Fungsi
|
||||
|
||||
|
||||
|
||||
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
|
||||
[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9?loc=id)
|
||||
|
||||
Ketika kita berpikir tentang menulis kode, kita selalu ingin memastikan kode kita dapat dibaca. Meskipun ini terdengar berlawanan dengan intuisi, kode dibaca lebih banyak kali daripada yang tertulis. Salah satu alat inti dalam kotak alat pengembang untuk memastikan kode yang dapat dipelihara adalah **function (fungsi)**.
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Metode dan Fungsi")
|
||||
|
||||
## Fungsi
|
||||
|
||||
Pada intinya, fungsi adalah sekumpulan kode yang dapat kita jalankan sesuai permintaan. Ini sempurna untuk skenario di mana kita perlu melakukan tugas yang sama beberapa kali; daripada menduplikasi logika di beberapa lokasi (yang akan menyulitkan pembaruan saat waktunya tiba), kita dapat memusatkannya di satu lokasi, dan memanggilnya kapan pun kita membutuhkan operasi dilakukan - Anda bahkan dapat memanggil fungsi dari fungsi lain!.
|
||||
|
||||
Sama pentingnya adalah kemampuan untuk menamai suatu fungsi. Meskipun ini mungkin tampak sepele, nama tersebut memberikan cara cepat untuk mendokumentasikan bagian kode. Anda bisa menganggap ini sebagai label pada sebuah tombol. Jika saya mengklik tombol yang bertuliskan "Batalkan pengatur waktu", saya tahu itu akan berhenti menjalankan jam.
|
||||
|
||||
## Membuat dan memanggil suatu fungsi
|
||||
|
||||
Sintaks untuk suatu fungsi terlihat seperti berikut:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() {
|
||||
// definisi fungsi
|
||||
// definisi fungsi/tubuh
|
||||
}
|
||||
```
|
||||
|
||||
Jika saya ingin membuat fungsi untuk menampilkan salam, mungkin akan terlihat seperti ini:
|
||||
|
||||
```javascript
|
||||
function tampilkanSapaan() {
|
||||
console.log("Hello, world!");
|
||||
}
|
||||
```
|
||||
|
||||
Kapanpun kita ingin memanggil (atau memanggil) fungsi kita, kita menggunakan nama fungsi yang diikuti dengan `()`. Perlu diperhatikan fakta bahwa fungsi kita dapat didefinisikan sebelum atau sesudah kita memutuskan untuk memanggilnya; kompilator JavaScript (JavaScript compiler) akan menemukannya untuk Anda.
|
||||
|
||||
```javascript
|
||||
// memanggil fungsi kita
|
||||
tampilkanSapaan();
|
||||
```
|
||||
|
||||
> **CATATAN:** Ada jenis fungsi khusus yang dikenal sebagai **method**, yang telah Anda gunakan! Faktanya, kita melihat ini di demo kita di atas ketika kita menggunakan `console.log`. Apa yang membuat metode berbeda dari fungsi adalah metode dilampirkan ke objek (`konsol` dalam contoh kita), sementara fungsi mengambang bebas. Anda akan mendengar banyak pengembang menggunakan istilah ini secara bergantian.
|
||||
|
||||
### Praktik terbaik fungsi
|
||||
|
||||
Ada beberapa praktik terbaik yang perlu diperhatikan saat membuat fungsi
|
||||
|
||||
- Seperti biasa, gunakan nama deskriptif agar Anda tahu fungsinya
|
||||
- Gunakan **camelCasing** untuk menggabungkan kata-kata
|
||||
- Jaga agar fungsi Anda tetap fokus pada tugas tertentu
|
||||
|
||||
## Memasukkan informasi ke suatu fungsi
|
||||
|
||||
Agar suatu fungsi lebih dapat digunakan kembali, Anda sering kali ingin menyampaikan informasi ke dalamnya. Jika kita mempertimbangkan contoh `tampilkanSapaan` di atas, itu hanya akan menampilkan **Halo, dunia!**. Bukan fungsi paling berguna yang bisa dibuat seseorang. Jika kita ingin membuatnya sedikit lebih fleksibel, seperti mengizinkan seseorang untuk menentukan nama orang yang akan disapa, kita dapat menambahkan **parameter**. Parameter (juga terkadang disebut **argumen**), adalah informasi tambahan yang dikirim ke suatu fungsi.
|
||||
|
||||
Parameter dicantumkan di bagian definisi dalam tanda kurung dan dipisahkan dengan koma seperti ini:
|
||||
|
||||
```javascript
|
||||
function nama(param, param2, param3) {}
|
||||
```
|
||||
|
||||
Kita dapat memperbarui `tampilkanSapaan` kita untuk menerima sebuah nama dan menampilkannya.
|
||||
|
||||
```javascript
|
||||
function tampilkanSapaan(nama) {
|
||||
const pesan = `Hello, ${nama}!`;
|
||||
console.log(pesan);
|
||||
}
|
||||
```
|
||||
|
||||
Ketika kita ingin memanggil fungsi kita dan memasukkan parameternya, kita tentukan di dalam tanda kurung.
|
||||
|
||||
```javascript
|
||||
tampilkanSapaan("Christopher");
|
||||
// Menampilkan "Hello, Christopher!" ketika dijalankan
|
||||
```
|
||||
|
||||
## Nilai dasar (Nilai Default)
|
||||
|
||||
Kita dapat membuat fungsi kita lebih fleksibel dengan menambahkan lebih banyak parameter. Tetapi bagaimana jika kita tidak ingin setiap nilai ditentukan? Sesuai dengan contoh sapaan kita, kita bisa membiarkan nama sesuai kebutuhan (kita perlu tahu siapa yang kita sapa), tapi kita ingin membiarkan sapaan itu sendiri disesuaikan sesuai keinginan. Jika seseorang tidak ingin menyesuaikannya, kita memberikan nilai default sebagai gantinya. Untuk memberikan nilai default ke parameter, kita menyetelnya dengan cara yang sama seperti kita menyetel nilai untuk variabel - `namaParameter = 'nilaiDefault'`. Berikut contoh lengkapnya:
|
||||
|
||||
```javascript
|
||||
function tampilkanSapaan(nama, salam = "Hello") {
|
||||
console.log(`${salam}, ${nama}`);
|
||||
}
|
||||
```
|
||||
|
||||
Ketika kita memanggil fungsi tersebut, kita kemudian dapat memutuskan apakah kita ingin menetapkan nilai dari `salam`.
|
||||
|
||||
```javascript
|
||||
tampilkanSapaan("Christopher");
|
||||
// menampilkan "Hello, Christopher"
|
||||
|
||||
tampilkanSapaan("Christopher", "Hi");
|
||||
// menampilkan "Hi, Christopher"
|
||||
```
|
||||
|
||||
## Nilai Kembali (Return values)
|
||||
|
||||
Hingga saat ini fungsi yang kita buat akan selalu menghasilkan [konsol](https://developer.mozilla.org/en-US/docs/Web/API/console). Terkadang ini persis seperti yang kita cari, terutama saat kita membuat fungsi yang akan memanggil layanan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan kalkulasi dan memberikan nilai kembali sehingga saya dapat menggunakannya di tempat lain?
|
||||
|
||||
Kita bisa melakukan ini dengan menggunakan **nilai kembali (return value)**. Nilai kembali dikembalikan oleh fungsi, dan dapat disimpan dalam variabel sama seperti kita dapat menyimpan nilai literal seperti string atau angka.
|
||||
|
||||
Jika suatu fungsi mengembalikan sesuatu maka kata kunci `return` digunakan. Kata kunci `return` mengharapkan nilai atau referensi dari apa yang dikembalikan seperti:
|
||||
|
||||
```javascript
|
||||
return variabelSaya;
|
||||
```
|
||||
|
||||
Kita bisa membuat fungsi untuk membuat pesan ucapan dan mengembalikan nilainya ke pemanggil
|
||||
|
||||
```javascript
|
||||
function buatPesanSapaan(nama) {
|
||||
const pesan = `Hello, ${nama}`;
|
||||
return pesan;
|
||||
}
|
||||
```
|
||||
|
||||
Saat memanggil fungsi ini, kita akan menyimpan nilai dalam variabel. Ini hampir sama dengan cara kita menetapkan variabel ke nilai statis (seperti `const nama = 'Christopher'`).
|
||||
|
||||
```javascript
|
||||
const pesanSapaan = buatPesanSapaan("Christopher");
|
||||
```
|
||||
|
||||
## Fungsi sebagai parameter untuk fungsi
|
||||
|
||||
Saat Anda maju dalam karir pemrograman Anda, Anda akan menemukan fungsi yang menerima fungsi sebagai parameter. Trik rapi ini biasanya digunakan ketika kita tidak tahu kapan sesuatu akan terjadi atau selesai, tetapi kita tahu kita perlu melakukan operasi sebagai tanggapan.
|
||||
|
||||
Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulai timer dan akan mengeksekusi kode setelah selesai. Kita perlu memberi tahu kode apa yang ingin kita jalankan. Kedengarannya seperti pekerjaan yang sempurna untuk suatu fungsi!
|
||||
|
||||
Jika Anda menjalankan kode di bawah ini, setelah 3 detik Anda akan melihat pesan **3 detik telah berlalu**.
|
||||
|
||||
```javascript
|
||||
function tampilkanSelesai() {
|
||||
console.log("3 detik telah berlalu");
|
||||
}
|
||||
// nilai timer dalam milidetik
|
||||
setTimeout(3000, tampilkanSelesai);
|
||||
```
|
||||
|
||||
### Fungsi anonim
|
||||
|
||||
Mari kita lihat lagi apa yang telah kita bangun. Kita membuat fungsi dengan nama yang akan digunakan satu kali. Saat aplikasi kita menjadi lebih kompleks, kita dapat melihat diri kita sendiri membuat banyak fungsi yang hanya akan dipanggil sekali. Ini tidak ideal. Ternyata, kita tidak selalu perlu memberi nama!
|
||||
|
||||
Saat kita mengirimkan fungsi sebagai parameter, kita dapat mengabaikan pembuatannya terlebih dahulu dan sebagai gantinya membuatnya sebagai bagian dari parameter. Kita menggunakan kata kunci `function` yang sama, tetapi kita membuatnya sebagai parameter.
|
||||
|
||||
Mari tulis ulang kode di atas untuk menggunakan fungsi anonim:
|
||||
|
||||
```javascript
|
||||
setTimeout(3000, function () {
|
||||
console.log("3 detik telah berlalu");
|
||||
});
|
||||
```
|
||||
|
||||
Jika Anda menjalankan kode baru kita, Anda akan melihat kita mendapatkan hasil yang sama. Kita telah membuat fungsi, tetapi tidak harus memberinya nama!
|
||||
|
||||
### Fungsi panah gemuk
|
||||
|
||||
Satu pintasan yang umum di banyak bahasa pemrograman (termasuk JavaScript) adalah kemampuan untuk menggunakan apa yang disebut fungsi **panah (arrow)** atau **panah gemuk (fat arrow)**. Ini menggunakan indikator khusus `=>`, yang terlihat seperti panah - demikian namanya! Dengan menggunakan `=>`, kita dapat melewati kata kunci `function`.
|
||||
|
||||
Mari kita tulis ulang kode kita sekali lagi untuk menggunakan fungsi panah gemuk:
|
||||
|
||||
```javascript
|
||||
setTimeout(3000, () => {
|
||||
console.log("3 detik telah berlalu");
|
||||
});
|
||||
```
|
||||
|
||||
### Kapan menggunakan setiap strategi
|
||||
|
||||
Anda sekarang telah melihat bahwa kita memiliki tiga cara untuk meneruskan fungsi sebagai parameter dan mungkin bertanya-tanya kapan harus menggunakannya. Jika Anda tahu Anda akan menggunakan fungsi tersebut lebih dari sekali, buatlah seperti biasa. Jika Anda akan menggunakannya hanya untuk satu lokasi, biasanya yang terbaik adalah menggunakan fungsi anonim. Apakah Anda menggunakan fungsi panah gemuk atau tidak atau sintaks `function` yang lebih tradisional terserah Anda, tetapi Anda akan melihat sebagian besar pengembang modern lebih memilih`=>`.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Tantangan
|
||||
|
||||
Bisakah Anda mengartikulasikan dalam satu kalimat perbedaan antara fungsi dan metode? Cobalah!
|
||||
|
||||
## Kuis Pasca-Kuliah
|
||||
|
||||
[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10?loc=id)
|
||||
|
||||
## Review & Belajar Mandiri
|
||||
|
||||
Layak [membaca lebih banyak tentang fungsi panah](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), karena semakin sering digunakan dalam basis kode. Berlatihlah menulis fungsi, lalu menulis ulang dengan sintaks ini.
|
||||
|
||||
## Tugas
|
||||
|
||||
[Bersenang-senang dengan Fungsi](./assignment.id.md)
|
||||
@ -0,0 +1,192 @@
|
||||
# JavaScript の基本: メソッドと関数
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レクチャー前クイズ
|
||||
[レクチャー前クイズ](.github/pre-lecture-quiz.md)
|
||||
|
||||
コードを書くことを考えるとき、私たちは常にコードが読みやすいようにしたいと考えています。直感的ではないように聞こえるかもしれませんが、コードは書かれた回数よりも何度も読まれます。コードを確実にメンテナンスできるようにするための開発者のツールボックスの中心的なツールの一つが **関数** です。
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
|
||||
|
||||
## 関数
|
||||
|
||||
コアとなるのは、関数は必要に応じて実行できるコードのブロックです。これは、同じタスクを何度も実行する必要がある場合に最適です。ロジックを複数の場所に複製するのではなく (時間が来たときに更新するのが困難になります)、1つの場所に集中させ、実行する操作が必要なときにいつでも呼び出すことができます - 他の関数から関数を呼び出すこともできます!
|
||||
|
||||
他の関数から関数を呼び出すこともできます！同じくらい重要なのは、関数に名前を付ける機能です。これは些細なことのように思われるかもしれませんが、名前をつけることでコードのセクションを簡単に文書化することができます。これはボタンのラベルのようなものと考えることができます。もし "Cancel timer" と書かれたボタンをクリックすると、それが時計の動作を止めようとしていることがわかります。
|
||||
|
||||
## 関数の作成と呼び出し
|
||||
|
||||
関数の構文は次のようになります:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // 関数の定義
|
||||
// 関数の定義/中身
|
||||
}
|
||||
```
|
||||
|
||||
挨拶を表示する関数を作ろうと思ったら、こんな感じになるかもしれません:
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
|
||||
関数を直接呼び出したい (または別スレッド、別コンテキストの関数を呼び出したい) ときはいつでも、関数名の後に `()` をつけます。関数を呼び出す前に定義しても後に定義してもよいという事実は注目に値します; JavaScript コンパイラがそれを見つけてくれます。
|
||||
|
||||
```javascript
|
||||
// 関数の呼び出し
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **注:** **メソッド** として知られている特殊なタイプの関数がありますが、これはすでに使ったことがあるでしょう！実際、上のデモではこれを見ました。実際、上のデモでは `console.log` を使っています。メソッドが関数と異なるのは、メソッドがオブジェクト (この例では `console`) にアタッチされているのに対し、関数はフリーフローティングです。多くの開発者がこれらの用語を互換性を持って使っているのを耳にするでしょう。
|
||||
|
||||
### 関数のベストプラクティス
|
||||
|
||||
機能を作成する際に留意すべきベストプラクティスがいくつかあります。
|
||||
|
||||
- いつものように、関数が何をするのかがわかるように、記述的な名前を使用します
|
||||
- **キャメルケーシング** を使用して単語を組み合わせます
|
||||
- 関数を特定のタスクに集中させます
|
||||
|
||||
## 関数への情報の受け渡し
|
||||
|
||||
関数をより再利用可能なものにするためには、情報を渡したいことがよくあります。上の `displayGreeting` の例を考えてみると、**Hello, world!** しか表示されません。これでは、作成できる関数の中で最も有用なものとは言えません。挨拶する相手の名前を指定できるようにするなど、もう少し柔軟にしたい場合は、**パラメータ** を追加することができます。パラメータ (**引数** と呼ばれることもあります) は、関数に送られる追加情報です。
|
||||
|
||||
パラメータは定義部分に括弧内に記載されており、以下のようにカンマで区切られています:
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
名前を受け付けてそれを表示するように `displayGreeting` を更新することができます。
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
関数を呼び出してパラメータを渡すときは、括弧内で指定します。
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// 実行時に "Hello, Christopher!" と表示される
|
||||
```
|
||||
|
||||
## 初期値
|
||||
|
||||
より多くのパラメータを追加することで、関数をさらに柔軟にすることができます。しかし、すべての値を指定する必要がない場合はどうでしょうか？挨拶の例に倣って、名前は必須のままにしておくこともできますが (誰に挨拶しているのかを知る必要があります)、挨拶自体は必要に応じてカスタマイズできるようにしたいと考えています。誰かがカスタマイズしたくない場合は、代わりにデフォルト値を指定します。パラメータにデフォルト値を設定するには、変数に値を設定するのと同じ方法 - `parameterName = 'defaultValue'` でパラメータを設定します。完全な例を見るには、以下を参照してください。
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
関数を呼び出すときに、`salutation` に値を設定するかどうかを決めることができます。
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// "Hello, Christopher" と表示されます。
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// "Hi, Christopher" と表示されます。
|
||||
```
|
||||
|
||||
## 戻り値
|
||||
|
||||
今までは、私たちが作った関数は常に [console](https://developer.mozilla.org/ja/docs/Web/API/console) に出力されていました。特に他のサービスを呼び出す関数を作成する場合には、これがまさに求めているものになることがあります。しかし、計算を実行するヘルパー関数を作成して値を返し、それを他の場所で使えるようにしたい場合はどうしたらいいでしょうか？
|
||||
|
||||
これを行うには、**戻り値** を使用します。戻り値は関数から返され、文字列や数値などのリテラル値を格納するのと同じように変数に格納することができます。
|
||||
|
||||
関数が何かを返す場合は、キーワード `return` が使用されます。キーワード `return` は、以下のように返されるものの値や参照を期待しています:
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
挨拶メッセージを作成して、その値を呼び出し元に返す関数を作成することができます。
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
この関数を呼び出すときには、変数に値を格納します。これは、(`const name = 'Christopher'` のように) 変数に静的な値を設定するのと同じ方法です。
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## 関数のパラメータとしての関数
|
||||
|
||||
プログラミングのキャリアを積んでいくと、関数をパラメータとして受け入れる関数に出くわすようになります。この巧妙なトリックは、何かがいつ発生するか、または完了するかわからないが、レスポンスとして操作を実行する必要があることがわかっている場合によく使われます。
|
||||
|
||||
例として、タイマーを開始し、タイマーが完了したらコードを実行する [setTimeout](https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) を考えてみましょう。どのようなコードを実行したいかを伝える必要があります。関数としては完璧な仕事のように聞こえます。
|
||||
|
||||
以下のコードを実行すると、3秒後に **3秒が経過しました** というメッセージが表示されます。
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('3秒が経過しました');
|
||||
}
|
||||
// タイマーの値はミリ秒単位
|
||||
setTimeout(displayDone, 3000);
|
||||
```
|
||||
|
||||
### 匿名関数
|
||||
|
||||
もう一度、作ったものを見てみましょう。一度だけ使用される名前の関数を作成しています。アプリケーションが複雑になるにつれて、一度しか呼ばれない関数をたくさん作ることになるでしょう。これは理想的ではありません。しかし、常に名前を指定する必要はありません。
|
||||
|
||||
パラメータとして関数を渡すときは、事前に関数を作成する必要はなく、代わりにパラメータの一部として関数を作成することができます。同じ `function` キーワードを使用しますが、代わりにパラメータとしてビルドします。
|
||||
|
||||
上のコードを書き換えて、匿名の関数を使用してみましょう。
|
||||
|
||||
```javascript
|
||||
setTimeout(function() {
|
||||
console.log('3秒が経過しました');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
新しいコードを実行すると、同じ結果が得られることに気づくでしょう。関数を作りましたが、名前をつける必要はありませんでした。
|
||||
|
||||
### ファットアロー関数
|
||||
|
||||
多くのプログラミング言語 (JavaScript を含む) に共通するショートカットは、**アロー** または **ファットアロー** 関数と呼ばれるものを使用することです。これは、矢印のように見える `=>` という特殊なインジケータを使用します。`=>` を使うことで、`function` キーワードを省略することができます。
|
||||
|
||||
ファットアロー関数を使って、もう一度コードを書き換えてみましょう。
|
||||
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
### それぞれの戦略を使うとき
|
||||
|
||||
関数をパラメータとして渡すには3つの方法があることがわかりましたが、それぞれをいつ使うか迷っているかもしれません。関数を複数回使用することがわかっているのであれば、通常通りに作成してください。1 つの場所だけで使用する場合は、一般的には匿名関数を使用するのがベストです。太いアロー関数を使うか、より伝統的な `function` 構文を使うかはあなた次第ですが、最近の開発者の多くは `=>` を好んでいることに気づくでしょう。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
関数とメソッドの違いを一文で表現できますか？試してみてください。
|
||||
|
||||
## レクチャー後クイズ
|
||||
[レクチャー後クイズ](.github/post-lecture-quiz.md)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
コードベースで使われることが多くなってきているアロー関数については、[もう少し読み込んでみる](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)価値があると思います。この構文で関数を書いて、それを書き換える練習をしてみましょう。
|
||||
|
||||
## 課題
|
||||
|
||||
[関数で楽しむ](assignment.ja.md)
|
||||
@ -0,0 +1,13 @@
|
||||
# कार्य के साथ मज़ा
|
||||
|
||||
## अनुदेश
|
||||
|
||||
अलग-अलग फ़ंक्शंस बनाएं, दोनों फ़ंक्शंस जो कुछ लौटाते हैं और फ़ंक्शंस जो कुछ भी वापस नहीं करते हैं।
|
||||
|
||||
देखें कि क्या आप एक फ़ंक्शन बना सकते हैं जिसमें डिफ़ॉल्ट मानों के साथ मापदंडों और मापदंडों का मिश्रण है.
|
||||
|
||||
## सरनामा
|
||||
|
||||
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||
| ------ | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------- |
|
||||
| | समाधान को विभिन्न मापदंडों के साथ दो या अधिक अच्छी तरह से निष्पादित कार्यों के साथ पेश किया जाता है | कार्य समाधान को एक फ़ंक्शन और कुछ मापदंडों के साथ पेश किया जाता है | समाधान में बग्स हैं |
|
||||
@ -0,0 +1,13 @@
|
||||
# Bersenang-senang dengan Fungsi
|
||||
|
||||
## Instruksi
|
||||
|
||||
Buat fungsi yang berbeda, baik fungsi yang mengembalikan sesuatu maupun fungsi yang tidak mengembalikan apa pun.
|
||||
|
||||
Lihat apakah Anda dapat membuat fungsi yang memiliki campuran parameter dan parameter dengan nilai default.
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Contoh | Memenuhi Syarat | Perlu Perbaikan |
|
||||
|----------|---------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|---------------------|
|
||||
| | Solusi ditawarkan dengan dua atau lebih fungsi yang berkinerja baik dengan parameter yang beragam | Solusi kerja ditawarkan dengan satu fungsi dan beberapa parameter | Solusi memiliki bug |
|
||||
@ -0,0 +1,13 @@
|
||||
# 関数で楽しむ
|
||||
|
||||
## 説明書
|
||||
|
||||
何かを返す関数と何も返さない関数の両方の異なる関数を作成します。
|
||||
|
||||
デフォルト値を持つパラメータとパラメータが混在した関数を作成できるかどうかを見てみましょう。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
|
||||
| | ソリューションは、多様なパラメータを持つ2つ以上の関数で提供されます。 | ワーキングソリューションは、1つの関数と少数のパラメータで提供されます。 | ソリューションにはバグがあります。 |
|
||||
@ -0,0 +1,12 @@
|
||||
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||
|
||||
1. निम्नलिखित कोड क्या लौटाएगा: `'1' == 1`
|
||||
|
||||
- [ ] सही
|
||||
- [ ] गलत
|
||||
|
||||
2. _or_ तर्क व्यक्त करने के लिए सही ऑपरेटर चुनें
|
||||
|
||||
- [ ] `a | b`
|
||||
- [ ] `a || b`
|
||||
- [ ] `a or b`
|
||||
@ -0,0 +1,13 @@
|
||||
_इस क्विज को कक्षा में पूरा करें_
|
||||
|
||||
1. निम्नलिखित ऑपरेटर को `==` क्या जाता है
|
||||
|
||||
- [ ] समानता
|
||||
- [ ] सख्त समानता
|
||||
- [ ] असाइनमेंट
|
||||
|
||||
2. जावास्क्रिप्ट में एक तुलना किस प्रकार देता है?
|
||||
|
||||
- [ ] boolean
|
||||
- [ ] null
|
||||
- [ ] string
|
||||
@ -0,0 +1,175 @@
|
||||
# Dasar-dasar JavaScript: Membuat Keputusan
|
||||
|
||||
|
||||
|
||||
> Sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
|
||||
[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11?loc=id)
|
||||
|
||||
Membuat keputusan dan mengontrol urutan kode Anda berjalan membuat kode Anda dapat digunakan kembali dan kuat. Bagian ini membahas sintaks untuk mengontrol aliran data di JavaScript dan signifikansinya saat digunakan dengan tipe data Boolean.
|
||||
|
||||
[](https://youtube.com/watch?v=SxTp8j-fMMY "Membuat keputusan")
|
||||
|
||||
## Rekap Singkat tentang Boolean
|
||||
|
||||
Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean membantu membuat keputusan tentang baris kode mana yang harus dijalankan ketika kondisi tertentu terpenuhi.
|
||||
|
||||
Setel boolean Anda menjadi true atau false seperti ini:
|
||||
|
||||
`let myTrueBool = true`
|
||||
`let myFalseBool = false`
|
||||
|
||||
✅ Nama Boolean diambil dari ahli matematika, filsuf, dan ahli logika Inggris George Boole (1815-1864).
|
||||
|
||||
## Operator Perbandingan dan Boolean
|
||||
|
||||
Operator digunakan untuk mengevaluasi kondisi dengan membuat perbandingan yang akan menghasilkan nilai Boolean. Berikut ini adalah daftar operator yang sering digunakan.
|
||||
|
||||
| Simbol | Deskripsi | Contoh |
|
||||
| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
|
||||
| `<` | **Kurang dari**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri kurang dari kanan | `5 < 6 // true` |
|
||||
| `<=` | **Kurang dari atau sama dengan**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri kurang dari atau sama dengan kanan | `5 <= 6 // true` |
|
||||
| `>` | **Lebih besar dari**: Membandingkan dua nilai dan mengembalikan tipe data Boolean `true` jika nilai di sisi kiri lebih besar dari kanan | `5 > 6 // false` |
|
||||
| `>=` | **Lebih besar dari atau sama dengan**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri lebih besar dari atau sama dengan kanan | `5 >= 6 // false` |
|
||||
| `===` | **Kesetaraan ketat**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di kanan dan kiri sama DAN merupakan jenis data yang sama. | `5 === 6 // false` |
|
||||
| `!==` | **Ketidaksamaan**: Membandingkan dua nilai dan mengembalikan nilai Boolean yang berlawanan dari yang akan dikembalikan oleh operator persamaan ketat | `5 !== 6 // true` |
|
||||
|
||||
✅ Uji pengetahuan Anda dengan menulis beberapa perbandingan di konsol browser Anda. Apakah data yang dikembalikan mengejutkan Anda?
|
||||
|
||||
## Pernyataan If
|
||||
|
||||
Pernyataan if akan menjalankan kode di antara bloknya jika kondisinya benar.
|
||||
|
||||
```javascript
|
||||
if (kondisi) {
|
||||
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||
}
|
||||
```
|
||||
|
||||
Operator logika sering digunakan untuk membentuk kondisi tersebut.
|
||||
|
||||
```javascript
|
||||
let uangSekarang;
|
||||
let hargaLaptop;
|
||||
|
||||
if (uangSekarang >= hargaLaptop) {
|
||||
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||
console.log("Mendapatkan laptop baru!");
|
||||
}
|
||||
```
|
||||
|
||||
## Pernyataan IF..Else
|
||||
|
||||
Pernyataan `else` akan menjalankan kode di antara bloknya jika kondisinya salah. Ini opsional dengan pernyataan `if`, jadi tidak semua `if` harus diikuti dengan pernyataan `else`.
|
||||
|
||||
```javascript
|
||||
let uangSekarang;
|
||||
let hargaLaptop;
|
||||
|
||||
if (uangSekarang >= hargaLaptop) {
|
||||
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||
console.log("Mendapatkan laptop baru!");
|
||||
} else {
|
||||
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||
console.log("Belum bisa membeli laptop baru!");
|
||||
}
|
||||
```
|
||||
|
||||
✅ Uji pemahaman Anda tentang kode ini dan kode berikut dengan menjalankannya di konsol browser. Ubah nilai variabel uangSekarang dan hargaLaptop untuk mengubah `console.log()` yang dikembalikan.
|
||||
|
||||
## Operator Logis dan Boolean
|
||||
|
||||
Keputusan mungkin memerlukan lebih dari satu perbandingan, dan dapat digabungkan dengan operator logika untuk menghasilkan nilai Boolean.
|
||||
|
||||
| Simbol | Deskripsi | Contoh |
|
||||
| ------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| `&&` | **Logical AND**: Membandingkan dua ekspresi Boolean. Mengembalikan nilai benar **hanya** jika kedua sisi benar | `(5 > 6) && (5 < 6 ) //Satu sisi salah, sisi lainnya benar. Mengembalikan nilai salah` |
|
||||
| `\|\|` | **Logical OR**: Membandingkan dua ekspresi Boolean. Mengembalikan nilai benar jika setidaknya satu sisi benar | `(5 > 6) \|\| (5 < 6) //Satu sisi salah, sisi lainnya benar. Mengembalikan nilai true` |
|
||||
| `!` | **Logical NOT**: Menampilkan nilai kebalikan dari ekspresi Boolean | `!(5 > 6) // 5 tidak lebih besar dari 6, tapi "!" akan kembali benar` |
|
||||
|
||||
## Kondisi dan Keputusan dengan Operator Logis
|
||||
|
||||
Operator logika dapat digunakan untuk membentuk kondisi dalam pernyataan if..else.
|
||||
|
||||
```javascript
|
||||
let uangSekarang;
|
||||
let hargaLaptop;
|
||||
let hargaDiskonLaptop = hargaLaptop - hargaLaptop * 0.2; //Harga laptop diskon 20 persen
|
||||
|
||||
if (uangSekarang >= hargaLaptop || uangSekarang >= hargaDiskonLaptop) {
|
||||
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||
console.log("Mendapatkan laptop baru!");
|
||||
} else {
|
||||
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||
console.log("Belum bisa membeli laptop baru!");
|
||||
}
|
||||
```
|
||||
|
||||
### Operator Negasi
|
||||
|
||||
Anda telah melihat sejauh ini bagaimana jika Anda bisa menggunakan pernyataan `if ... else` untuk membuat logika kondisional. Apa pun yang menjadi `jika` perlu dievaluasi menjadi benar / salah. Dengan menggunakan operator `!` Anda dapat _negate_ ekspresi. Ini akan terlihat seperti ini:
|
||||
|
||||
```javascript
|
||||
if (!kondisi) {
|
||||
// berjalan jika kondisinya false
|
||||
} else {
|
||||
// berjalan jika kondisinya true
|
||||
}
|
||||
```
|
||||
|
||||
### Ekspresi Terner
|
||||
|
||||
`if ... else` bukanlah satu-satunya cara untuk mengekspresikan logika keputusan. Anda juga dapat menggunakan sesuatu yang disebut operator terner (ternary operator). Sintaksnya terlihat seperti ini:
|
||||
|
||||
```javascript
|
||||
let variable = kondisi ? <kembalikan ini jika benar> : <kembalikan ini jika salah>`
|
||||
```
|
||||
|
||||
Di bawah ini adalah contoh yang lebih nyata:
|
||||
|
||||
```javascript
|
||||
let nomorPertama = 20;
|
||||
let nomorKedua = 10;
|
||||
let nomorTerbesar = nomorPertama > nomorKedua ? nomorPertama : nomorKedua;
|
||||
```
|
||||
|
||||
✅ Luangkan waktu sebentar untuk membaca kode ini beberapa kali. Apakah Anda memahami cara kerja operator ini?
|
||||
|
||||
Di atas menyatakan bahwa
|
||||
|
||||
- jika `nomorPertama` lebih besar dari `nomorKedua`
|
||||
- tetapkan `nomorPertama` ke `nomorTerbesar`
|
||||
- jika tidak tetapkan `nomorKedua`.
|
||||
|
||||
Ekspresi terner hanyalah cara ringkas untuk menulis kode di bawah ini:
|
||||
|
||||
```javascript
|
||||
let nomorTerbesar;
|
||||
if (nomorPertama > nomorKedua) {
|
||||
nomorTerbesar = nomorPertama;
|
||||
} else {
|
||||
nomorTerbesar = nomorKedua;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Tantangan
|
||||
|
||||
Buat program yang ditulis pertama kali dengan operator logika, lalu tulis ulang menggunakan ekspresi terner. Apa sintaks pilihan Anda?
|
||||
|
||||
## Kuis Pasca-Kuliah
|
||||
|
||||
[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12?loc=id)
|
||||
|
||||
## Review & Belajar Mandiri
|
||||
|
||||
Baca lebih lanjut tentang banyak operator yang tersedia untuk pengguna [di MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators).
|
||||
|
||||
Lihat [pencarian operator](https://joshwcomeau.com/operator-lookup/) oleh Josh Comeau yang luar biasa!
|
||||
|
||||
## Tugas
|
||||
|
||||
[Operator](./assignment.id.md)
|
||||
@ -0,0 +1,40 @@
|
||||
# ऑपरेटर्स
|
||||
|
||||
## अनुदेश
|
||||
|
||||
ऑपरेटरों के साथ खेलते हैं। यहां एक प्रोग्राम के लिए एक सुझाव है जिसे आप कार्यान्वित कर सकते हैं:
|
||||
|
||||
आपके पास दो अलग-अलग ग्रेडिंग सिस्टम के छात्रों का एक सेट है.
|
||||
|
||||
### पहला ग्रेडिंग सिस्टम
|
||||
|
||||
एक ग्रेडिंग सिस्टम को 1-5 से ग्रेड के रूप में परिभाषित किया गया है जहां 3 और इसके बाद के संस्करण का मतलब है कि आप पाठ्यक्रम पास करते हैं।
|
||||
|
||||
### दूसरा ग्रेडिंग सिस्टम
|
||||
|
||||
अन्य ग्रेड प्रणाली में निम्न ग्रेड हैं `A, A-, B, B-, C, C-` जहां `A` शीर्ष ग्रेड है और `C` सबसे कम पासिंग ग्रेड है।
|
||||
|
||||
### काम
|
||||
|
||||
निम्नलिखित सरणी को देखते हुए `allStudents` सभी छात्रों और उनके ग्रेड का प्रतिनिधित्व करते हैं, एक नई सरणी का निर्माण करते हैं` StudentsWhoPass` जिसमें सभी छात्र पास होते हैं।
|
||||
|
||||
> सुझाब , for-loop और if...else और तुलना ऑपरेटरों का उपयोग करें :
|
||||
|
||||
```javascript
|
||||
let allStudents = [
|
||||
'A',
|
||||
'B-'
|
||||
1,
|
||||
4
|
||||
5,
|
||||
2
|
||||
]
|
||||
|
||||
let studentsWhoPass = [];
|
||||
```
|
||||
|
||||
## शीर्ष
|
||||
|
||||
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||
| ------ | ---------------------------- | ----------------------------- | ------------------------------------- |
|
||||
| | पूरा समाधान प्रस्तुत किया है | आंशिक समाधान प्रस्तुत किया है | बग के साथ समाधान प्रस्तुत किया गया है |
|
||||
@ -0,0 +1,40 @@
|
||||
# Operator
|
||||
|
||||
## Instruksi
|
||||
|
||||
Bermain-main dengan operator. Berikut adalah saran untuk program yang dapat Anda terapkan:
|
||||
|
||||
Anda memiliki satu set siswa dari dua sistem penilaian yang berbeda.
|
||||
|
||||
### Sistem Layanan pertama
|
||||
|
||||
Satu sistem didefinisikan sebagai nilai dari 1-5 di mana 3 ke atas berarti Anda lulus kursus.
|
||||
|
||||
### Sistem Produk kedua
|
||||
|
||||
Sistem nilai lain memiliki nilai berikut `A, A-, B, B-, C, C-` di mana `A` adalah nilai tertinggi dan `C` adalah nilai kelulusan terendah.
|
||||
|
||||
### Tugas
|
||||
|
||||
Diberikan array `semuaPelajar` yang mewakili semua siswa dan nilai, buat array baru `pelajarYangLulus` yang berisi semua siswa yang lulus.
|
||||
|
||||
> TIPS, gunakan for-loop dan if ... else dan operator perbandingan:
|
||||
|
||||
```javascript
|
||||
let semuaPelajar = [
|
||||
'A',
|
||||
'B-'
|
||||
1,
|
||||
4
|
||||
5,
|
||||
2
|
||||
]
|
||||
|
||||
let pelajarYangLulus = [];
|
||||
```
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Contoh | Memenuhi | Perlu Perbaikan |
|
||||
| -------- | ------------------------ | ------------------------------ | --------------------------- |
|
||||
| | Solusi lengkap disajikan | Solusi tidak lengkap disajikan | Solusi dengan bug disajikan |
|
||||
@ -0,0 +1,18 @@
|
||||
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
||||
|
||||
1. फॉर-लूप के किस भाग को आपको इसके पुनरावृत्ति को 5 से बढ़ाना होगा
|
||||
|
||||
- [ ] condition (स्थिति)
|
||||
- [ ] काउंटर
|
||||
- [ ] iteration-expression
|
||||
|
||||
2. एक `while` और एक `for-loop` के बीच क्या अंतर है
|
||||
|
||||
- [ ] एक `for-loop` में एक काउंटर और इटरेशन-एक्सप्रेशन है, जहां `while` में केवल एक शर्त है
|
||||
- [ ] एक `while` में एक काउंटर और इटरेशन-एक्सप्रेशन है, जहां `for-loop` में केवल एक शर्त है
|
||||
- [ ] वे समान हैं, बस एक दूसरे के लिए एक उपनाम
|
||||
|
||||
3. दिया गया कोड `for (let i=1; i < 5; i++)`, कितने पुनरावृत्तियों प्रदर्शन करेंगे?
|
||||
|
||||
- [ ] 5
|
||||
- [ ] 4
|
||||
@ -0,0 +1,13 @@
|
||||
_इस क्विज को कक्षा में पूरा करें_
|
||||
|
||||
1. किसी सरणी में विशिष्ट आइटम को संदर्भित करने के लिए, आप एक क्या उपयोग करेंगे
|
||||
|
||||
- [ ] square bracket `[]`
|
||||
- [ ] index
|
||||
- [ ] curly braces `{}`
|
||||
|
||||
2. आपको किसी ऐरे में आइटम की संख्या कैसे मिलती है
|
||||
|
||||
- [ ] `len(array)` मेथड
|
||||
- [ ] ऐरे पर `size` गुण
|
||||
- [ ] ऐरे पर `length` गुण
|
||||
@ -0,0 +1,141 @@
|
||||
# Dasar-dasar JavaScript: Array dan Loop
|
||||
|
||||
|
||||
|
||||
> Sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
|
||||
[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13?loc=id)
|
||||
|
||||
Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web. Dalam pelajaran ini, Anda akan belajar tentang array dan loop, yang digunakan untuk memanipulasi data.
|
||||
|
||||
[](https://youtube.com/watch?v=Q_CRM2lXXBg "Array dan Loop")
|
||||
|
||||
## Array
|
||||
|
||||
Bekerja dengan data adalah tugas umum untuk bahasa apa pun, dan ini jauh lebih mudah saat data diatur dalam format struktural, seperti array. Dengan array, data disimpan dalam struktur yang mirip dengan daftar. Salah satu manfaat utama dari array adalah Anda dapat menyimpan berbagai jenis data dalam satu array.
|
||||
|
||||
✅ Array ada di sekitar kita! Dapatkah Anda memikirkan contoh array dalam kehidupan nyata, seperti array panel surya?
|
||||
|
||||
Sintaks untuk array adalah sepasang tanda kurung siku.
|
||||
|
||||
`let arrayKu = [];`
|
||||
|
||||
Ini adalah array kosong, tetapi array dapat dideklarasikan sudah diisi dengan data. Beberapa nilai dalam array dipisahkan dengan koma.
|
||||
|
||||
`let rasaRasaEsKrim = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
|
||||
|
||||
Nilai array diberi nilai unik yang disebut **indeks**, bilangan bulat yang ditetapkan berdasarkan jaraknya dari awal array. Dalam contoh di atas, nilai string "Chocolate" memiliki indeks 0, dan indeks "Rocky Road" adalah 4. Gunakan indeks dengan tanda kurung siku untuk mengambil, mengubah, atau menyisipkan nilai array.
|
||||
|
||||
✅ Apakah Anda terkejut bahwa array mulai dari indeks nol? Dalam beberapa bahasa pemrograman, indeks dimulai dari 1. Ada sejarah menarik seputar ini, yang dapat Anda [baca di Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
|
||||
|
||||
```javascript
|
||||
let rasaRasaEsKrim = [
|
||||
"Chocolate",
|
||||
"Strawberry",
|
||||
"Vanilla",
|
||||
"Pistachio",
|
||||
"Rocky Road",
|
||||
];
|
||||
rasaRasaEsKrim[2]; //"Vanilla"
|
||||
```
|
||||
|
||||
Anda dapat memanfaatkan indeks untuk mengubah nilai, seperti ini:
|
||||
|
||||
```javascript
|
||||
rasaRasaEsKrim[4] = "Butter Pecan"; //Mengubah "Rocky Road" menjadi "Butter Pecan"
|
||||
```
|
||||
|
||||
Dan Anda dapat memasukkan nilai baru pada indeks tertentu seperti ini:
|
||||
|
||||
```javascript
|
||||
rasaRasaEsKrim[5] = "Cookie Dough"; //Ditambahkan "Cookie Dough"
|
||||
```
|
||||
|
||||
✅ Cara yang lebih umum untuk mendorong nilai ke array adalah dengan menggunakan operator array seperti array.push()
|
||||
|
||||
Untuk mengetahui berapa banyak item dalam sebuah array, gunakan properti `length`.
|
||||
|
||||
```javascript
|
||||
let rasaRasaEsKrim = [
|
||||
"Chocolate",
|
||||
"Strawberry",
|
||||
"Vanilla",
|
||||
"Pistachio",
|
||||
"Rocky Road",
|
||||
];
|
||||
rasaRasaEsKrim.length; //5
|
||||
```
|
||||
|
||||
✅ Cobalah sendiri! Gunakan konsol browser Anda untuk membuat dan memanipulasi array kreasi Anda sendiri.
|
||||
|
||||
## Loop
|
||||
|
||||
Pengulangan memungkinkan untuk tugas berulang atau **iterative**, dan dapat menghemat banyak waktu dan kode. Setiap iterasi dapat bervariasi dalam variabel, nilai, dan kondisinya. Ada berbagai jenis loop dalam JavaScript, dan mereka memiliki perbedaan kecil, tetapi pada dasarnya melakukan hal yang sama: loop di atas data.
|
||||
|
||||
### For Loop
|
||||
|
||||
Perulangan `for` membutuhkan 3 bagian untuk melakukan iterasi: - `counter` Variabel yang biasanya diinisialisasi dengan angka yang menghitung jumlah iterasi. - `condition` Expression yang menggunakan operator perbandingan untuk menyebabkan loop berhenti ketika `true`. - `iteration-expression` Berjalan di akhir setiap iterasi, biasanya digunakan untuk mengubah nilai penghitung.
|
||||
|
||||
```javascript
|
||||
//Menghitung hingga 10
|
||||
for (let i = 0; i < 10; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
```
|
||||
|
||||
✅ Jalankan kode ini di konsol browser. Apa yang terjadi jika Anda membuat perubahan kecil pada penghitung, kondisi, atau ekspresi iterasi? Bisakah Anda membuatnya berjalan mundur, membuat hitungan mundur?
|
||||
|
||||
### While loop
|
||||
|
||||
Tidak seperti sintaks untuk pengulangan `for`, pengulangan `while` hanya membutuhkan kondisi yang akan menghentikan pengulangan jika `true`. Kondisi dalam pengulangan biasanya mengandalkan nilai lain seperti penghitung, dan harus dikelola selama pengulangan. Nilai awal untuk pencacah harus dibuat di luar perulangan, dan ekspresi apa pun untuk memenuhi suatu kondisi, termasuk mengubah penghitung harus dipertahankan di dalam perulangan.
|
||||
|
||||
```javascript
|
||||
//Menghitung hingga 10
|
||||
let i = 0;
|
||||
while (i < 10) {
|
||||
console.log(i);
|
||||
i++;
|
||||
}
|
||||
```
|
||||
|
||||
✅ Mengapa Anda memilih for loop vs. a while loop? Sebanyak 17 ribu penonton memiliki pertanyaan yang sama tentang StackOverflow, dan beberapa opini [mungkin menarik bagi Anda](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
|
||||
|
||||
## Loop dan Array
|
||||
|
||||
Array sering digunakan dengan loop karena sebagian besar kondisi memerlukan panjang array untuk menghentikan loop, dan indeks juga bisa menjadi nilai counter.
|
||||
|
||||
```javascript
|
||||
let rasaRasaEsKrim = [
|
||||
"Chocolate",
|
||||
"Strawberry",
|
||||
"Vanilla",
|
||||
"Pistachio",
|
||||
"Rocky Road",
|
||||
];
|
||||
|
||||
for (let i = 0; i < rasaRasaEsKrim.length; i++) {
|
||||
console.log(rasaRasaEsKrim[i]);
|
||||
} //Berakhir saat semua rasa dicetak
|
||||
```
|
||||
|
||||
✅ Bereksperimenlah dengan melakukan perulangan pada array buatan Anda sendiri di konsol browser Anda.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Tantangan
|
||||
|
||||
Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan while. Ada [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis ulang loop array Anda menggunakan salah satu dari teknik ini.
|
||||
|
||||
## Kuis Pasca-Kuliah
|
||||
|
||||
[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=id)
|
||||
|
||||
## Review & Belajar Mandiri
|
||||
|
||||
Array dalam JavaScript memiliki banyak metode yang menyertainya, sangat berguna untuk manipulasi data. [Bacalah tentang metode ini](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) dan coba beberapa di antaranya (seperti push, pop, slice dan splice) pada array kreasi Anda.
|
||||
|
||||
## Tugas
|
||||
|
||||
[Loop sebuah Array](./assignment.id.md)
|
||||
@ -0,0 +1,13 @@
|
||||
# लूप अर्रे
|
||||
|
||||
## अनुदेश
|
||||
|
||||
एक प्रोग्राम बनाएं जो 1-20 के बीच हर तीसरे नंबर को सूचीबद्ध करता है और इसे कंसोल पर प्रिंट करता है.
|
||||
|
||||
> सुझाब : फॉर-लूप का उपयोग करें और पुनरावृत्ति-अभिव्यक्ति को संशोधित करें
|
||||
|
||||
## शीर्ष
|
||||
|
||||
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||
| ------ | ------------------------------------------------ | ------------------------- | ------------------------- |
|
||||
| | प्रोग्राम सही ढंग से चलता है और टिप्पणी की गई है | प्रोग्राम टिप्पणी नहीं है | प्रोग्राम अधूरा या बगी है |
|
||||
@ -0,0 +1,13 @@
|
||||
# Loop sebuah Array
|
||||
|
||||
## Instruksi
|
||||
|
||||
Buat program yang mencantumkan setiap nomor ke-3 antara 1-20 dan mencetaknya ke konsol.
|
||||
|
||||
> TIPS: gunakan for-loop dan ubah ekspresi iterasi
|
||||
|
||||
## Rubric
|
||||
|
||||
| Kriteria | Contoh | Memenuhi | Perlu Perbaikan |
|
||||
| -------- | ------------------------------------------------- | ----------------------------- | ------------------------------------- |
|
||||
| | Program berjalan dengan benar dan diberi komentar | Program tidak diberi komentar | Program tidak lengkap atau bermasalah |
|
||||
@ -0,0 +1,14 @@
|
||||
# जावास्क्रिप्ट का परिचय
|
||||
|
||||
जावास्क्रिप्ट वेब की भाषा है। इन चार पाठों में, आप इसकी मूल बातें जानेंगे.
|
||||
|
||||
### विषय
|
||||
|
||||
1. [वेरिएबल्स और डेटा प्रकार](1-data-types/README.md)
|
||||
2. [फंक्शंस और मेथड्स](2-functions-methods/README.md)
|
||||
3. [जावास्क्रिप्ट के साथ निर्णय करना](3-making-decisions/README.md)
|
||||
4. [अर्रेंज और लूप्स ](4-arrays-loops/README.md)
|
||||
|
||||
### आभार सूची
|
||||
|
||||
ये पाठ ♥ से [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) और [Chris Noring](https://twitter.com/chris_noring) द्वारा लिखे गए है
|
||||
@ -0,0 +1,14 @@
|
||||
# JavaScript 入門
|
||||
|
||||
JavaScript は Web の言語です。この4つのレッスンでは、その基本を学びます。
|
||||
|
||||
### トピック
|
||||
|
||||
1. [変数とデータ型](1-data-types/README.md)
|
||||
2. [関数とメソッド](2-functions-methods/README.md)
|
||||
3. [JavaScript での意思決定](3-making-decisions/README.md)
|
||||
4. [配列とループ](4-arrays-loops/README.md)
|
||||
|
||||
### Credits
|
||||
|
||||
These lessons were written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring)
|
||||
@ -1,17 +1,17 @@
|
||||
*Complete this quiz after the lesson by checking one answer per question.*
|
||||
|
||||
1. [Spans and Divs are interchangeable]
|
||||
1. Spans and Divs are interchangeable
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
2. [The head of an HTML doc can contain:]
|
||||
2. The head of an HTML doc can contain:
|
||||
|
||||
- [ ] [the title tag]
|
||||
- [ ] [metadata]
|
||||
- [ ] [all the above]
|
||||
- [ ] the title tag
|
||||
- [ ] metadata
|
||||
- [ ] all the above
|
||||
|
||||
3. [You can't use deprecated tags in your markup]
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] [false, but they have been deprecated for good reason]
|
||||
3. You can't use deprecated tags in your markup
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
- [ ] false, but they have been deprecated for good reason
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें._
|
||||
|
||||
1. [Spans और Divs विनिमेय हैं]
|
||||
|
||||
- [ ] [सही]
|
||||
- [ ] [गलत]
|
||||
|
||||
2. [HTML डॉक के प्रमुख में क्या हो सकता है:]
|
||||
|
||||
- [ ] [title टैग ]
|
||||
- [ ] [metadata]
|
||||
- [ ] [उपर्युक्त सभी]
|
||||
|
||||
3. [आप अपने मार्कअप में पदावनत टैग का उपयोग नहीं कर सकते हैं]
|
||||
|
||||
- [ ] [सही]
|
||||
- [ ] [गलत]
|
||||
- [ ] [गलत है, लेकिन उन्हें अच्छे कारण के लिए पदावनत किया गया है]
|
||||
@ -0,0 +1,19 @@
|
||||
_HTML के बारे में एक वार्म-अप क्विज़_
|
||||
|
||||
इस क्विज को कक्षा में पूरा करें
|
||||
|
||||
1. HTML का फुल फॉर्म 'HyperText Mockup Language' है
|
||||
|
||||
- [ ] [सही]
|
||||
- [ ] [गलत]
|
||||
|
||||
2. सभी HTML टैग को टैग खोलने और बंद करने दोनों की आवश्यकता होती है
|
||||
|
||||
- [ ] [सही]
|
||||
- [ ] [गलत]
|
||||
|
||||
3. क्या करने के लिए सिमेंटिक मार्कअप का उपयोग करना सबसे महत्वपूर्ण है
|
||||
|
||||
- [ ] [code readability]
|
||||
- [ ] [स्क्रीन रीडर]
|
||||
- [ ] [संरक्षण]
|
||||
@ -0,0 +1,231 @@
|
||||
# テラリウムプロジェクト その1: HTML 入門
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レクチャー前クイズ
|
||||
|
||||
[レクチャー前クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/15)
|
||||
|
||||
### イントロダクション
|
||||
|
||||
HTML (HyperText Markup Language) は、Web の「骨格」です。CSS が HTML を「ドレスアップ」し、JavaScript が HTML に命を吹き込むとすれば、HTML は Web アプリケーションの本体となります。HTML の構文は、「head」、「body」、「footer」タグを含むため、この考えを反映しています。
|
||||
|
||||
このレッスンでは、HTML を使ってバーチャルテラリウムのインターフェースの「骨格」をレイアウトします。タイトルと3つのカラムがあります。右と左のカラムにはドラッグ可能な植物を配置し、中央のエリアには実際のガラス張りのテラリウムを配置します。このレッスンが終わる頃には、列の中に植物が見えるようになると思いますが、インターフェースが少し変な感じになっているかもしれません。
|
||||
|
||||
### タスク
|
||||
|
||||
コンピュータ上に 'terrarium' というフォルダを作成し、その中に 'index.html' というファイルを作成します。テラリウムのフォルダを作成した後、Visual Studio Code で新しい VS Code ウィンドウを開き、「フォルダを開く」をクリックして新しいフォルダに移動することで、この作業を行うことができます。エクスプローラペインの「ファイル」ボタンをクリックして、新しいファイルを作成してください。
|
||||
|
||||
|
||||
|
||||
もしくは
|
||||
|
||||
git bash 上でこれらのコマンドを使用します。
|
||||
* `mkdir terrarium`
|
||||
* `cd terrarium`
|
||||
* `touch index.html`
|
||||
* `code index.html` または `nano index.html`
|
||||
|
||||
> index.html ファイルはブラウザに対して、それがフォルダ内のデフォルトファイルであることを示します。`https://anysite.com/test` のような URL は、`test` というフォルダを含むフォルダ構造を用いて構築され、その中に `index.html` が含まれているかもしれません。
|
||||
|
||||
---
|
||||
|
||||
## DocType と html タグ
|
||||
|
||||
HTML ファイルの最初の行は、その doctype です。ファイルの一番上にこの行が必要なのは少し意外ですが、これはブラウザが現在の HTML 仕様に従った標準モードでページをレンダリングする必要があることを古いブラウザに伝えています。
|
||||
|
||||
> ヒント: VS Code では、タグの上にカーソルを置くと MDN リファレンスガイドからタグの使用に関する情報を得ることができます。
|
||||
|
||||
2行目は `<html>` タグのオープニングタグであり、それに続くのがクロージングタグ `</html>` です。これらのタグはインターフェイスのルート要素です。
|
||||
|
||||
### タスク
|
||||
|
||||
これらの行を `index.html` ファイルの先頭に追加します。
|
||||
|
||||
```HTML
|
||||
<!DOCTYPE html>
|
||||
<html></html>
|
||||
```
|
||||
|
||||
✅ DocType をクエリ文字列で設定することで決定できるモードがいくつかあります。[Quirks モードと Standards モード](https://developer.mozilla.org/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)です。これらのモードは、現在では通常使用されていない本当に古いブラウザ (Netscape Navigator 4 と Internet Explorer 5) をサポートしていました。標準の doctype 宣言に固執することができます。
|
||||
|
||||
---
|
||||
|
||||
## ドキュメントの 'head'
|
||||
|
||||
HTML ドキュメントの 'head' 領域には、Web ページに関する重要な情報が含まれており、[メタデータ](https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta)としても知られています。私たちの場合、このページがレンダリングされるために送信される Web サーバーに、以下の4つのことを伝えます。
|
||||
|
||||
- ページタイトル
|
||||
- 次を含むページのメタデータ:
|
||||
- 'character set' で、ページで使われている文字エンコーディングを表します
|
||||
- IE=edge ブラウザがサポートされていることを示す `x-ua-compatible` などのブラウザ情報
|
||||
- viewport が読み込まれたときにどのように振る舞うかについての情報を提供します。viewport の初期スケールを 1 に設定すると、ページが最初に読み込まれたときのズームレベルを制御します
|
||||
|
||||
### タスク
|
||||
|
||||
ドキュメントに 'head' ブロックを `<html>` の開始タグと終了タグの間に追加します。
|
||||
|
||||
```html
|
||||
<head>
|
||||
<title>Welcome to my Virtual Terrarium</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
```
|
||||
|
||||
✅ このように viewport の meta タグを設定するとどうなるでしょうか: `<meta name="viewport" content="width=600">`? [viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) についてはこちらをご覧ください。
|
||||
|
||||
---
|
||||
|
||||
## ドキュメントの `body`
|
||||
|
||||
### HTML タグ
|
||||
|
||||
HTML では、.html ファイルにタグを追加して Web ページの要素を作成します。それぞれのタグには通常、次のような開閉タグがあります。段落を示す `<p>hello</p>` のように。`<html>` タグペアの中に `<body>` タグのセットを追加して、インターフェイスのボディを作成します。
|
||||
|
||||
### タスク
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Welcome to my Virtual Terrarium</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
これで、ページの構築を始めることができます。通常は `<div>` タグを使ってページ内の個別の要素を作成します。ここでは画像を含む一連の `<div>` 要素を作成します。
|
||||
|
||||
### 画像
|
||||
|
||||
閉じタグを必要としない html タグの一つに `<img>` タグがあります。なぜなら、ページがアイテムをレンダリングするために必要なすべての情報を含む `src` 要素を持っているからです。
|
||||
|
||||
アプリ内に `images` というフォルダを作成し、その中に[ソースコードフォルダ](../solution/images)内のすべての画像を追加します (植物の画像が14枚あります)。
|
||||
|
||||
### タスク
|
||||
|
||||
これらの植物の画像を `<body></body>` タグの間の2つのカラムに追加します。
|
||||
|
||||
```html
|
||||
<div id="page">
|
||||
<div id="left-container" class="container">
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="right-container" class="container">
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
> 注: Span と Div。Div は「ブロック」要素とみなされ、Span は「インライン」要素とみなされます。これらの Div を Spans に変換するとどうなるでしょうか。
|
||||
|
||||
このマークアップで、植物が画面に表示されるようになりました。まだ CSS を使ったスタイリングがされていないので、かなり見栄えが悪いのですが、これは次のレッスンで行います。
|
||||
|
||||
それぞれの画像には、画像が見えなくてもレンダリングできなくても表示される alt テキストがあります。これはアクセシビリティのために重要な属性です。アクセシビリティについては、今後のレッスンで詳しく説明します。今のところ、alt 属性は、何らかの理由でユーザーが画像を見ることができない場合 (接続速度が遅い、src 属性のエラー、ユーザーがスクリーンリーダーを使用している場合) に、画像の代替情報を提供することを覚えておいてください。
|
||||
|
||||
✅ それぞれの画像に同じ alt タグが付いていることに気付きましたか？これは良い習慣ですか？なぜですか、それともなぜですか? このコードを改善できますか?
|
||||
|
||||
---
|
||||
|
||||
## セマンティックマークアップ
|
||||
|
||||
一般的に、HTML を書くときには、意味のある「セマンティックス」を使うことが望ましいとされています。これはどういう意味でしょうか? それは、HTML タグを使用して、データやインタラクションの種類を表すために設計されていることを意味します。例えば、ページのメインタイトルテキストには `<h1>` タグを使うべきです。
|
||||
|
||||
`<body>` の開始タグのすぐ下に次の行を追加します。
|
||||
|
||||
```html
|
||||
<h1>My Terrarium</h1>
|
||||
```
|
||||
|
||||
ヘッダーを `<h1>` としたり、順序のないリストを `<ul>` とするなど、セマンティックマークアップを使用することで、スクリーンリーダーがページをナビゲートするのに役立ちます。一般的に、ボタンは `<button>` と書き、リストは `<li>` と書くべきです。特別なスタイルの `<span>` 要素とクリックハンドラを使ってボタンを模擬することは可能ですが、障害のあるユーザにとっては、ボタンがページ上のどこにあるかを判断し、要素がボタンとして表示されている場合にそれと対話するための技術を使った方が良いでしょう。このため、できるだけセマンティックマークアップを使うようにしてください。
|
||||
|
||||
✅ スクリーンリーダーと[それがどのようにウェブページと相互作用するか](https://www.youtube.com/watch?v=OUDV1gqs9GA)を見てみましょう。意味のないマークアップがあると、なぜユーザーをイライラさせてしまうのかわかりますか?
|
||||
|
||||
## テラリウム
|
||||
|
||||
このインターフェイスの最後の部分では、テラリウムを作成するためのマークアップを作成します。
|
||||
|
||||
### タスク
|
||||
|
||||
このマークアップを最後の `</div>` タグの上に追加します。
|
||||
|
||||
```html
|
||||
<div id="terrarium">
|
||||
<div class="jar-top"></div>
|
||||
<div class="jar-walls">
|
||||
<div class="jar-glossy-long"></div>
|
||||
<div class="jar-glossy-short"></div>
|
||||
</div>
|
||||
<div class="dirt"></div>
|
||||
<div class="jar-bottom"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
✅ このマークアップを画面に追加したにもかかわらず、何も表示されません。なぜでしょうか?
|
||||
|
||||
---
|
||||
|
||||
## チャレンジ
|
||||
|
||||
HTMLに はまだ遊んで楽しいワイルドな「古い」タグがいくつかありますが、[これらのタグ](https://developer.mozilla.org/ja/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)のような非推奨のタグをマークアップに使うべきではありません。それでも、古い `<marquee>` タグを使って h1 タイトルを水平方向にスクロールさせることはできますか？(もしそうする場合は、後から削除することを忘れないでください)
|
||||
|
||||
## レクチャー後クイズ
|
||||
|
||||
[レクチャー後クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/16)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
HTML は、今日のウェブを構築するのに役立ってきた「試行錯誤された」ビルディングブロックシステムです。古いタグと新しいタグを研究することで、その歴史について少し学びましょう。あるタグが非推奨になり、あるタグが追加された理由がわかりますか？将来的にはどのようなタグが導入されるかもしれませんか？
|
||||
|
||||
Web やモバイル向けのサイト構築については、[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=cxaall-4621-cxall) で詳しく解説しています。
|
||||
|
||||
|
||||
## 課題
|
||||
|
||||
[HTML の練習: ブログのモックアップを構築する](assignment.ja.md)
|
||||
@ -0,0 +1,11 @@
|
||||
# अपने HTML का अभ्यास करें: एक ब्लॉग मॉकअप बनाएँ
|
||||
|
||||
## अनुदेश
|
||||
|
||||
कल्पना कीजिए कि आप अपनी निजी वेब साइट को डिजाइन कर रहे हैं, या नया स्वरूप दे रहे हैं . अपनी साइट का एक चित्रमय मार्कअप बनाएं, और फिर HTML मार्कअप को लिखें, जिसका उपयोग आप साइट के विभिन्न तत्वों का निर्माण करने के लिए करेंगे . आप इसे कागज पर कर सकते हैं, और इसे स्कैन कर सकते हैं, या अपनी पसंद के सॉफ़्टवेयर का उपयोग कर सकते हैं, बस HTML मार्कअप को हाथ से कोड करना सुनिश्चित करें.
|
||||
|
||||
## शीर्ष
|
||||
|
||||
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||
| ------ | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
|
||||
| | एक ब्लॉग लेआउट को विसुआलय रूप से प्रदर्शित किया जाता है जिसमें कम से कम 10 तत्व प्रदर्शित होते हैं | प्रदर्शित लेआउट के लगभग 5 तत्वों के साथ एक ब्लॉग लेआउट नेत्रहीन दर्शाया गया है | प्रदर्शित लेआउट के अधिकांश 3 तत्वों के साथ एक ब्लॉग लेआउट नेत्रहीन रूप से दर्शाया गया है |
|
||||
@ -0,0 +1,11 @@
|
||||
# HTML の練習: ブログのモックアップを構築する
|
||||
|
||||
## 説明書
|
||||
|
||||
個人的な Web サイトをデザインしたり、再デザインしたりしていると想像してみてください。サイトのグラフィカルなマークアップを作成し、サイトの様々な要素を構築するために使用する HTML マークアップを書き留めてください。紙に書いてスキャンしてもいいですし、お好みのソフトウェアを使ってもいいですが、HTML マークアップを手でコーディングして確認してください。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
|
||||
| | ブログのレイアウトは、少なくとも10個のマークアップ要素が表示された状態で視覚的に表現されます。 | ブログのレイアウトは、マークアップの要素を5つほど表示して視覚的に表現する | ブログのレイアウトは、最大でも3つのマークアップ要素が表示された状態で視覚的に表現されます。 |
|
||||
@ -0,0 +1,22 @@
|
||||
_प्रति प्रश्न एक उत्तर की जाँच करके पाठ के बाद इस प्रश्नोत्तरी को पूरा करें._
|
||||
|
||||
क्विज़ को पूरा करने के लिए आपको निम्नलिखित सीखने के मॉड्यूल का संदर्भ देना होगा:
|
||||
|
||||
[CSS के साथ काम करें](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
|
||||
|
||||
1. [आप अपनी HTML फ़ाइल के मुख्य भाग में सीधे CSS लिख सकते हैं]
|
||||
|
||||
- [ ] [सही]
|
||||
- [ ] [गलत]
|
||||
|
||||
1. [अपने ऐप में CSS को शामिल करना हमेशा आवश्यक होता है]
|
||||
|
||||
- [ ] [सही]
|
||||
- [ ] [गलत]
|
||||
- [ ] [गलत है, लेकिन यदि आप चाहते हैं कि यह अच्छा लगे तो आपको CSS की आवश्यकता होगी]
|
||||
|
||||
1. [CSS का निरीक्षण करने के लिए कौन से ब्राउज़र टूल का उपयोग किया जा सकता है?]
|
||||
|
||||
- [ ] [Elements]
|
||||
- [ ] [Styles]
|
||||
- [ ] [Network]
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue