Javascript – Le basi del linguaggio

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:

struttura delle cartelle del progetto
struttura delle cartelle del progetto

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:

  1. 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.
  2. 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
  3. 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
  4. 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
Ispeziona la pagina nel browser Chrome
Ispeziona la pagina nel browser Chrome
schermata DevTools nel browser Chrome
schermata DevTools nel browser Chrome

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;
output dello script sulle stringhe in Javascript
output dello script sulle stringhe in Javascript

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];

LINK UTILI

Pubblicato da Carlo Contardi

Carlo Contardi, docente di informatica e sviluppatore Full Stack, condivide la sua passione per la programmazione e l’informatica attraverso il suo blog Space Coding. Offre preziosi consigli e soluzioni pratiche a chi vuole imparare a programmare o migliorare le proprie abilità. 🚀👨‍💻

Translate »