- Struttura base html5
- Inserire il codice JavaScript nella pagina
- Commenti
- Tipi di dati in JavaScript
- Variabili
- Espressioni ed operatori
- Output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Titolo della pagina</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script src="script.js"></script>
</head>
<body>
</body>
</html>
tre modi per inserire il codice javascript all'interno della pagina
<a href="#" onclick="alert('hai cliccato!')">Clicca qui!</a><script>
alert('hey');
</script><!DOCTYPE html>
<html>
<head>
[...]
<script src="http://www.server.com/codice.js"></script>
</head>
<body>
[...]
<script src="http://www.server.com/codice.js"></script>
</body>
</html>
i commenti sono molto utili per documentare porzioni di codice o inibirne temporaneamente delle parti, non vengono mostrati all'utente o processati.
-
Commento su una sola riga. Si inserisce con
// -
Commento su più righe. Si apre con
/*e si chiude con*/<script> // commento su una riga, non ha un tag di chiusura /* commento su più righe ha un tag di apertura e uno di chiusura */ function esempio(variabile) { /* disattivo una porzione di codice ma la mantengo per un riferimento futuro if(variabile > 100) { return false; } */ if(variabile > 10) { return false; } // return 'ciao'; return true; // documento questa linea di codice } </script>
- stringhe
- numerI
- booleani
- null e undefined
- oggetti
Sono sequenze di caratteri delimitate da singoli apici ' o doppi apici ", si possono usare a piacimento, l'unica regola è di chiudere sempre con lo stesso tipo di apice che si è usato per aprire.
Per inserire caratteri speciali all'interno di una stringa qui una lista dobbiamo ricorrere al backslash (o barra rovesciata) \.
// es.1
var presentazione = 'Ciao, mi chiamo Sara.';
// es. 2 uso del carattere di escaping (\)
var fraseScema = 'Oggi c\'è il sole';
/*
Abbiamo dovuto usare il carattere di escaping altrimenti
la stringa si sarebbe interrotta, generando un errore.
In alternativa avremmo potuto usare come delimitatore il
doppio apice (")
*/In JavaScript i numeri vengono usati tutti allo stesso modo, siano essi interi o con la virgola (che in JavaScript viene rappresentata con un punto).
var numeroIntero = 25;
var numeroInteroNegativo = -15;
var numeroDecimale = 3.14;JavaScript usa null e undefined per rappresentare valori nulli e non definiti.
Questo tipo di dato prevede solo due valori:
true(vero)false(falso)
Questo tipo di dato ha un valore composto in cui è possibile assegnare delle proprietà che a loro volta possono avere valori di qualsiasi tipo.
var paprika = {
razza: 'Jack Russell Terrier',
'anni di età': 4,
indirizzo: {
via: 'piazza Americo Fanella, 9',
citta: 'Alatri',
provincia: 'Frosinone'
}
}
// Possiamo accedere alle proprietà dell'oggetto paprika in due modi:
// 1. la dot-notation
var razzaPaprica = paprika.razza;
/* 2. attraverso le parentesi quadre
meno compatto ma utile quando il nome della proprietà
non rispetta le regole per i nomi delle variabili */
var anniPaprica = paprika["anni di età"];
Le variabili servono a memorizzare valori e oggetti.
Una variabile è identificata da un nome che deve rispettare delle regole:
-
non può coincidere con una delle parole chiave di JavaScript (lista delle parole);
-
non può iniziare con un numero;
-
non può contenere caratteri speciali come:
- lo spazio
- il trattino (
-) - il punto interrogativo (
?) - il punto (
.) - ecc
-
può contenere alcuni caratteri speciali:
- l'underscore o trattino basso (
_) - il dollaro (
$)
- l'underscore o trattino basso (
// ESEMPI
// Variabili valide
pippo
_pluto
$topolino
PaPeRiNo
// variabili non valide
for
ciao-mondo
come?In JavaScript non è obbligatorio dichiarare esplicitamente le variabili, il loro semplice utilizzo fa in modo che l'engine la crei inplicitamente.
anniPaprika = 4;Queste variabili non dichiarate (con var nomevariabile) vengono create al primo utilizzo e saranno accessibili in qualunque punto del tuo script. Questo implica che, in script complessi, si può correre il rischio di riutilizzare involontariamente quel nome di variabile e generare comportamenti non previsti.
È sempre consigliato dichiarare la variabile prima del suo utilizzo:
var anniPaprika;
// poi
anniPaprika = 4;
// o anche direttamente
var anniPaprika = 4;in questo modo possiamo stabilire un ambito di accessibilità (o scope), come vedremo quando parleremo delle funzioni.
Se non vogliamo involontariamente correre il rischio di non dichiarare una variabile prima di utilizzarla possiamo abilitare lo strict mode inserendo un'istruzione speciale all'inizio del nostro script:
"use strict";ora ogni volta che utilizzeremo una variabile senza averla prima dichiarata JavaScript ci segnalerà un errore.
Un'espressione è una vombinazione di valori, variabili ed operatori che rappresentano un nuovo valore:
es: variabile * variabile2 / 4
Riguardano il tipo di dato numerico e corrispondono prevalentemente ai classici operatori matemetici
| Operatore | Significato |
|---|---|
| + | addizione |
| - | sottrazione |
| / | divisione |
| * | moltiplicazione |
| % | modulo |
| ++ | incremento |
| -- | decremento |
Gli operatori aritmetici rispettano le regole di precedenza matematiche e possiamo utilizzare le parentesi tonde per alterare l'ordine di valutazione.
var pippo = 6 + 4 * 4 + 5; // risultato: 27
var pluto = (6 + 4) * (4 + 5); // risultato: 90
pluto++; // uguale a: pluto + 1
pluto--; // uguale a: pluto - 1Sono tutti quegli operatori che servono a stabilire un confronto tra valori, restituiscono un valore booleano (true, false).
| Operatore | Significato |
|---|---|
| < | minore |
| <= | minore o uguale |
| > | maggiore |
| >= | maggiore o uguale |
| == | uguale |
| != | diverso |
| === | strettamente uguale |
| !== | strettamente diverso |
// continuando l'esempio precedente
var maggioredi = pippo > pluto // false
var minoredi = pippo < pluto // true
var ugualea = pluto == 90 // trueConsdentono la combinazione di espressioni booleane.
| Operatore | Significato |
|---|---|
| && | and |
| || | or |
| ! | not |
8 >= 5 && 3 != 7 // true
/* in pratica stiamo dicendo: 8 è maggiore o uguale di 5
e 3 * 2 è diverso da 7? Sì, true! */Come abbiamo visto con gli operatori relazionali per stabilire se un valore è uguale ad un altro volare usiamo l'operatore == ( un doppio segno di uguale) questo perché il singolo = è un operatore di assegnamento cioè assegna il valore di una espressione ad una variabile:
// Come abbiamo visto prima
var pippo = 6 + 4 * 4 + 5;
/* ⇑
assegnamo a pippo il valore dell'espressione */anche chiamato operatore ternario restituisce un valore in base ad una espressione booleana.
// condizione ? valore1 : valore 2
var condizione = pippo > pluto ? "vero" : "falso";Sono composti da un operatore aritmetico più = e ci consentono di avere una maggiore compattezza del codice.
| Operatore | Esempio | Equivalente a |
|---|---|---|
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
var pippo = 90;
pippo += 10; // risultato: 100Come abbiamo visto nel capitolo sui tipi di dati: una stringa è una sequenza di caratteri delimitata da singoli apici ' o doppi apici ".
Per le stringhe possiamo utilizzare gli operatori logici, di assegnamento e relazionali, l'unico operatore specifico per le stringhe è quello di concatenazione +
"segna" + "libro" // segnalibro
dal momento però che il + è utilizzato anche per le addizioni, si potrbbero avere comportamenti anomali e in alcune circostanze potremmo vedere l'errore NaN (Not a number), ma di questo ne parleremo più avanti.
i primi metodi per mostrare qualcosa attraverso il codice js nella nostra pagina o nella console.
-
Generiamo elementi semplici con
document.write()Gli elementi saranno generati nella posizione dove viene lanciato lo script.
<script> document.write("<p>Un paragrafo di testo</p>"); </script>
-
Generiamo una finestra di dialogo con
alert()<script> alert("Ciao!"); </script>
-
Scriviamo nella console JavaScript con
console.log()<script> console.log("ciao console"); </script> // possiamo anche riportare due o più valori separati da virgola <script> var pippo = 25; var pluto = 32; console.log(pippo, pluto); // risultato: 25 32 </script>
-
Chiediamo all'utente un input con
prompt()<script> var anni = prompt("Quanti hanni hai?"); // verrà assegnata alla variabile anni l'input dell'utente </script>
Nonostante Ginger sembri grande quanto Paprika è molto più piccola! Infatti paprika è nata a maggio del 2014 mentre ginger solo a marzo 2018. Nell'esercizio seguente dovrai scoprire e confrontare la loro età in mesi.
- Salva in variabili diverse l'anno e il mese di nascita di ciascun cane e l'anno e il mese corrente.
- Calcola e salva la loro l'età in mesi in altre due variabili.
- Crea una variabile booleana che contenga l'informazione che Paprica è più grande di Ginger.
- Trasforma in un'altra variabile il risultato del punto 4 in un risultato SI/NO.
- Usa la funzione
console.log()e la concatenazione per scrivere una stringa dove dici una cosa tipo: Paprica è più grande di Ginger? SI. - Sempre con la concatenazione, calcola la differenza in mesi e usa la funzione
console.log()per scrivere una stringa dove dici che Ginger e Paprica hanno x mesi di differenza. - Usa i commenti per descrivere i passaggi.
- Per calcolare l'età in mesi puoi sottrarre l'anno in corso con l'anno di nascita e moltiplicare per 12, poi sommi al risultato precedente la sottrazione tra il mese corrente e il mese di nascita.