Un altro esempio semplice che utilizza e ricapitola gli elementi delle esercitazioni precedenti con un pizzico di calcoli e ciclo in più.
L’esempio è molto semplice per entrare un po’ nell’ottica delle potenzialità di js e il suo uso lato client. In questo caso simuliamo un carrello della spesa spartano su una singola pagina di lancio dello script. Non è molto realistico dal punto di vista tecnico ma per il momento ci basta. Il codice vede la dichiarazione e successiva inizializzazione di variabili, la funzione prompt, un ciclo while. Un altro modo di lanciare in automatico il codice js è presente in questo nostro esempio: non abbiamo direttamente una funzione da invocare ma solo codice sparso da chiamare ed includere direttamente. Vediamo il codice della pagina html.
La pagina html semplice.
<!doctype html>
<html lang="it">
<head>
<title>Test JS</title>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<main>
<h1>Test JS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit leo eu velit blandit posuere ac et sem. Nullam a turpis semper, finibus sapien vel, lobortis justo. Cras condimentum vel mi id accumsan. Nullam sed condimentum nisi. Duis non metus eros. Proin dignissim elit ut aliquet scelerisque. Pellentesque molestie gravida dolor, eu egestas nulla dapibus a. Sed vitae leo tellus. Donec convallis nulla non odio molestie, a gravida odio auctor. Aenean eu consectetur nunc.</p>
</main>
<script src="js/script.js"></script>
</body>
</html>Non viene fatta nessuna call a funzione, solo incluso il codice js del file che però non ha funzioni ma codice “sfuso”.
Lo script.js:
//Un frammento di codice che simula un carrello virtuale
//Il ciclo fa inserire dei prodotti con il loro nome ad oltranza fino a input 0
//ESERCIZIO: inserire il prezzo piuttosto che il nome e sommare il totale
//ESERCIZIO: trasforma il codice in una funzione e fallo richiamare da un bottone
var acquisti;
var parziale;
var cancella;
cancella = false;
acquisti = "";
parziale = "";
parziale = prompt("Nome prodotto? \n metti 0 se hai finito gli acquisti","0");
while (parziale != 0)
{
if (parziale != null) //o uso parseInt
{
acquisti = acquisti + " " + parziale + ",";
parziale = prompt("Acquisto? \n metti 0 se hai finito gli acquisti","0");
}
else
{
parziale = "0";
cancella = true;
}
}
if (cancella != true)
{
if (acquisti != "")
alert("Hai comperato " + acquisti + " grazie per la visita");
else
alert("Non hai comperato nulla, grazie lo stesso");
}Qui le variabili sono trattate come stringhe, tranne quando prende lo 0 per stoppare il ciclo mischiando di fatto tipi su una sola variabile, per mostrare quale sia la pericolosità della non dichiarazione. Il ciclo semplicemente effettua una concatenazione delle stringhe inserite con i prompt. Alla variabile cancella è affidata una tipologia boolean assegnandogli i valori predefiniti true e false (senza virgolette!)
Come inserito nel commento del codice, il lettore può provare a migliorare questo semplice script con due esercizi:
ESERCIZIO (difficile): inserire il prezzo oltre che il solo nome e sommare il totale. (usa i vettori paralleli)
ESERCIZIO (semplice): trasforma il codice in una funzione e fallo richiamare da un bottone
Ultima modifica 24 Gennaio 2022