In questa lezione imparerai le basi del linguaggio Javascript per modificare gli oggetti del D.O.M. , memorizzare e modificare i dati.
Prerequisiti
- una conoscenza basilare del linguaggio HTML
- un editor o un IDE per scrivere il codice
- un browser per testare il software
Sebbene si possa scrivere codice Javascript all’interno di una pagina HTML, è preferibile quasi sempre utilizzare un apposito file con estensione .js che verrà richiamato dalla pagina HTML. La folder structure che dovrai utilizzare è la seguente:
Come è intuibile i fogli di stile andranno nella cartella CSS, gli script Javascript nella cartella JS e le immagini nella cartella IMG. Questo è un template che ti consiglio di applicare ai tuoi progetti client-side.
num-variable.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Numeric variable</title>
</head>
<body>
<h1> Costo biglietti </h1>
<div id="content">
Numero di posti prenotati:
<div id="seats">23</div>
Prezzo per posto:
<div id="price">4 Euro</div>
</div>
<div id="total"></div>
<script src="js/num-variable.js"></script>
</body>
</html>
num-variable.js
var price=5;
var seats=23;
var total;
total=price*seats;
console.log(total);
var element= document.getElementById("total");
element.textContent="Totale: " +total+" Euro";
Si notino i seguenti concetti:
- nel prime due righe di codice oltre alla dichiarazione delle variabili c’è l’assegnazione. Javascript è un linguaggio debolmente tipizzato e la tipizzazione è una conseguenza dell’assegnazione. Se viene assegnato un intero, la variabile sarà intera, se viene assegnata una stringa la variabile sarà una stringa e così via.
- alla riga 5 abbiamo l’oggetto console ed utilizziamo il suo metodo log() per stampare il contenuto della variabile total sulla console. Accederemo allo console cliccando con il tasto destro del mouse in un punto qualsiasi della nostra pagina web all’interno del browser e sceglieremo la voce Ispeziona elemento. Più in basso troverai la procedura passo per passo per attivare i DevTools del browser
- nella riga 6 grazie all’oggetto document, che rappresenta la pagina web corrente, possiamo tramite il metodo getElementById() utilizzare un oggetto del D.O.M. ; var element non sarà una variabile ma un oggetto
- essendo un oggetto element ha a disposizione metodi ed attributi. Nel nostro caso nella riga 7 utilizziamo l’attributo textContent per settare un testo nell’elemento
I tipi String in Javascript
str-variable.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String Variable</title>
</head>
<body>
<div>Ciao da
<span id="username">amico</span>
</div>
<div id="message"></div>
<script src="js/str-variable.js"/>
</body>
</html>
str-variable.js
var username;
var message;
username="Prometeus";
message="buon CODING spaziale ";
var elUsername=document.getElementById("username");
elUsername.textContent=username;
var elMessage=document.getElementById("message");
elMessage.textContent=message;
I tipi Boolean in Javascript
bool-variable.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Boolean Variable</title>
</head>
<body>
<div id="message"></div>
<div id="value"></div>
<div id="another-message"></div>
<div id="not-value"></div>
<script src="js/bool-variable.js"></script>
</body>
</html>
bool-variable.js
var message;
var value;
var notValue;
message="La luce è: ";
var elMessage=document.getElementById("message");
elMessage.textContent=message;
value=true;
var elValue=document.getElementById("value");
var elAnotherMessage=document.getElementById("another-message");
var elNotValue=document.getElementById("not-value");
if(value){
elValue.textContent="ACCESA";
}else{
elValue.textContent="SPENTA";
}
notValue=!value;
elAnotherMessage.textContent="quindi non è:"
if(notValue){
elNotValue.textContent="ACCESA";
}else{
elNotValue.textContent="SPENTA";
}
Accedere ad un elemento di un Array in Javascript
access-array.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Access Array</title>
</head>
<body>
<div>Scelta colore:</div>
<div id="color"></div>
<script src="js/access-array.js"/>
</body>
</html>
access-array.js
var colors=['Purple','Green','Orange'];
// si ricorda che il primo elemento di un array ha indice 0
colors[0]='Violet';
var elColor=document.getElementById("color");
elColor.textContent=colors[0];
