September 19
JavaScript è un linguaggio di scripting lato client che permette di reagire in tempo reale per l'input dell'utente. Ad esempio, è possibile creare un modulo HTML che aggiorna automaticamente un campo totale come utente regola singole voci sul modulo. Per fare questo, è necessario assegnare un nome a ciascun elemento del modulo, scrivere una funzione che aggiorna il totale e chiamare la funzione ogni volta che uno degli elementi cambiano.
1 Creare un nuovo documento HTML utilizzando il blocco note o un editor HTML. Ingresso le intestazioni HTML nel documento:
<! DOCTYPE HTML>
<Html lang = "it">
<Head>
<Meta charset = "utf-8">
<Title> Modulo d'ordine </ title>
2 Creare styling per l'ingresso modulo si creerà:
<Style>
.orderForm {width: 250px; blocco di visualizzazione; }
.Item {width: 100px; float: left; margin-left: 10px; text-align: right}
.input {width: 50px; margin-left: 10px; text-align: left}
.total {width: 20px; margin-left: 10px; font-weight: bold; }
</ Style>
3 Creare una funzione JavaScript per accedere a ciascun elemento del modulo di input e calcolare e visualizzare un totale:
<Script>
Funzione totale () {
var total = (parseInt(document.order.apples.value) || 0)*1.05 + (parseInt(document.order.oranges.value) || 0)*1.10 + (parseInt(document.order.pears.value) || 0)*0.88;
. Document.getElementById ( "totale") innerHTML = totale;
}
</ Script>
</ Head>
4 Creare il modulo di input HTML. Assegnare il nome utilizzato nella funzione JavaScript per ogni singolo elemento. Impostare l'evento "onchange" per ogni elemento di input per calcolare e visualizzare il totale quando un elemento modifiche:
<Body>
<Div class = "Orderform">
<Form name = azione "ordine" = metodo "process.php" = "post">
<Span class = "oggetto"> Mele: 1.05 </ span> <input type = "text" class = nome "input" = "mele" onchange = "totale ()">
<Span class = "oggetto"> Arance: 1.10 </ span> <input type = "text" class = nome "input" = "arance" onchange = "totale ()">
<Span class = "oggetto"> pere: 0.88 </ span> <input type = "text" class = nome "input" = "pere" onchange = "totale ()">
<Span class = "oggetto"> Totale: </ span> <span class = "totale" id = "totale"> </ span>
</ Form>
</ Div>
</ Body>
</ Html>
5 Salvare il file HTML e aprirlo in un browser. Prova che il calcolo funziona correttamente.