August 19
JavaScript ti dà la possibilità di modificare dinamicamente i contenuti sullo schermo browser di un utente perché lo script risiede e viene eseguito all'interno del browser dell'utente. Ad esempio, è possibile modificare un valore indice di discesa in JavaScript ottenendo valore di indice del elemento dell'array <select> e modificando la proprietà di testo di tale elemento. Si dovrebbe assegnare un nome alla forma e alla <select> elemento in forma per rendere più facile fare riferimento a loro.
1 Creare una pagina Web che permetterà all'utente di ordinare materiali di consumo e cambierà il nome della voce da "tutto esaurito" quando non ci sono più a sinistra. Creare un documento HTML con il blocco note o un editor HTML e aggiungere le intestazioni HTML al documento:
<! DOCTYPE HTML>
<Html lang = "it">
<Head>
<Meta charset = "utf-8">
<Title> Ordina materiali di consumo </ title>
2 Aggiungere il codice Javascript per monitorare l'inventario e cambiare il nome della voce di Sold Out quando l'inventario va a zero. Inizializzare le variabili globali con l'inventario di partenza per ogni voce:
<Script>
var matite = 5;
var carta = 5;
var cucitrici = 5;
3 Creare una funzione JavaScript che ottiene l'elemento selezionato quando l'utente fa clic su un pulsante di ordine. Utilizzare la proprietà "selectedIndex" per ottenere l'indice della voce e il "testo" di proprietà per ottenere il suo nome:
ordine function () {
var index = document.supplies.items.selectedIndex;
articoli var = document.supplies.items [index] .text;
4 Impostare un flag che indica gli articoli è venduto a "false"
var soldOut = false;
5 Diminuire l'inventario per l'elemento selezionato. Se l'inventario scende a zero, modificare il testo indice di discesa per "tutto esaurito:"
switch (items) {
caso "matita":
--matite;
if (matite == 0) Soldout = true;
rompere;
caso "Carta":
--carta;
if (carta == 0) Soldout = true;
rompere;
caso "cucitrice":
--staplers;
if (cucitrici == 0) Soldout = true;
rompere;
}
if (Soldout) document.supplies.items [index] .text = "tutto esaurito";
}
</ Script>
</ Head>
6 Creare il modulo HTML e assegnare il nome utilizzato nella funzione JavaScript. Creare la casella a discesa con il tag <select> e utilizzare il nome dalla funzione JavaScript. Aggiungere le voci con il tag <option> e aggiungere un pulsante per chiamare la funzione JavaScript:
<Body>
<Form name = "forniture">
<Select name = "voci">
<Option> matita </ option>
<Option> Carta </ option>
<Option> cucitrice </ option>
</ Select>
<Input type = "button" name = "addtoorder" value = "ordine ();" "Ordine" onclick =>
</ Form>
</ Body>
</ Html>
7 Salvare il file HTML. Aprire in un browser e verificare la funzionalità.