JavaScripts possono essere combinati per rendere una pagina Web di carico richieste più veloce, riducendo "http" e rendendo più efficiente l'utilizzo della rete. Le seguenti istruzioni è costituito da una pagina HTML principale chiamata "iceCream.html", che restituisce il prezzo di un elemento utente selezionato. Utilizza tre script esterni JavaScript: "Functions", "flavor.js" e "holder.js". Si dovrebbe avere una comprensione di JavaScript prima di tentare questo progetto.
Istruzioni
Impostazione del codice di esempio
1
Copiare e incollare il codice seguente nel blocco note, quindi salvarlo come "iceCream.html" sul tuo desktop. Nota che "Style. css" non viene utilizzato, ma il collegamento è incluso qui come esempio.
< html >< testa >
< link rel = tipo degli 'stylesheet' href='style.css = ' text/css' >
< script >
var aFlavors = ["vaniglia 1,00", "Cioccolato 1.50", "fragola 1,70"];
var aHolders = ["Single-cono 1", "doppio-cono 2", "Piatto tipico 3"];
< / script >
< / head >
< corpo >
< div id = 'dvInfo' > Benvenuto a Gelateria < / div >
< script type = ' text/javascript' src='functions.js' >< / script >
< script type = ' text/javascript' src='flavor.js' >< / script >
< script type = ' text/javascript' src='holder.js' >< / script >
< / corpo >< / html >
2
Copiare e incollare il codice seguente nel blocco note, quindi salvarlo come "Functions" sul tuo desktop. Notare che la funzione "loadSelect()" carica un selezionare l'oggetto e "showPrice()" funzione calcola e restituisce il prezzo dell'elemento selezionato.
Function loadSelect (array, selObj) {
per (var i = 0; i < Length; i + +) {
aLine=array[i].split(' ');
selObj[i+1]=new Option(aLine[0], aLine[1]);
}
}
Function showPrice() () {
Se ((slFlavor.value>0) & &(slHolder.value>0)) {
price=slFlavor.value * slHolder.value;
var dvInfo=document.getElementById('dvInfo');
dvInfo.innerHTML=slFlavor.options[slFlavor.selectedIndex].text +
' in ' + slHolder.options[slHolder.selectedIndex].text +
' @ $' + price.toFixed(2);
}
}
3
Copiare e incollare il codice seguente nel blocco note, quindi salvarlo come "flavor.js" sul tuo desktop. Si noti che questo crea l'oggetto selezionare sapore di gelato e lo popola dalla matrice di "aFlavors" in "iceCream.html".
var oSlFlavor=document.createElement('select');
oSlFlavor.setAttribute('id','slFlavor');
document.body.appendChild(oSlFlavor);
var slFlavor=document.getElementById('slFlavor');
slFlavor [0] = nuova opzione ('Selezionare sapore...', '0');
var b1stFlavor = true;
slFlavor.onmouseover=function() () {
Se (b1stFlavor = = true) {
b1stFlavor=false;
loadSelect(aFlavors, slFlavor);
}
}
slFlavor.onchange=function() {showPrice()};
4
Copiare e incollare il codice seguente nel blocco note. Salvarlo come "holder.js" sul tuo desktop. Si noti che questo crea l'oggetto selezionare titolare di gelato e lo popola dalla matrice di aHolders in "iceCream.html".
var oSlHolder=document.createElement('select');
oSlHolder.setAttribute('id','slHolder');
document.body.appendChild(oSlHolder);
var slHolder=document.getElementById('slHolder');
slHolder [0] = nuova opzione ('Selezionare titolare...', '0');
var b1stHolder = true;
slHolder.onmouseover=function() () {
Se (b1stHolder = = true) {
b1stHolder=false;
loadSelect(aHolders, slHolder);
}
}
slHolder.onchange=function() {showPrice()};
5
Aprire "iceCream.html" nel tuo browser e testarlo. Vedere se è possibile identificare quelle parti del codice che sono necessari al caricamento della pagina e quelli che non sono richiesti fino a una volta caricata la pagina.
Combinando il tuo JavaScripts
6
Copiare le righe in "flavor.js" da "var oSlFlavor=document.createElement('select');" per
"slFlavor [0] = nuova opzione ('Selezionare sapore...', '0');" e incolla questo in un nuovo file nel blocco note. Salvare il file "pageLoad.js" sul tuo desktop.
7
Copiare le righe in "holder.js" da "var oSlHolder=document.createElement('select');" per "slHolder [0] = nuova opzione ('Select titolare...', '0');" e incolla questo nella parte inferiore della "pageLoad.js". Salvare "pageLoad.js".
8
Copiare le righe in "flavor.js" da "var b1stFlavor = true" a "slFlavor.onchange=function() {showPrice()};" e incolla questo in un nuovo file nel blocco note. Salvare il file "afterPageLoad.js" sul tuo desktop.
9
Copiare le righe in "holder.js" da "var b1stHolder = true" a "slHolder.onchange=function() {showPrice()};" e incolla questo nella parte inferiore della "afterPageLoad.js".
10
Copiare l'intero contenuto del "Functions" e incolla questo nella parte inferiore della "afterPageLoad.js".
11
Copia "iceCream.html" a "iceCream2.html" del file. Aprire "iceCream2.html" nel blocco note. Tagliare le linee di due array a partire con "var aFlavors =" e "var aHolders =" e incollarli nella parte superiore della "afterPageLoad.js". Salvare "afterPageLoad.js".
12
Rimuovere il "< script >" e "< / script >" tag nella sezione head HTML "iceCream2", quindi non c'è solo l'estremità "< / head >" tag e "< body >" tag tra il collegamento CSS e il corpo html di inizio. Questo velocizza il caricamento della pagina.
13
Rimuovere i collegamenti di tag "< script >" a "function.js", "flavor.js" e "holder.js" In "iceCream2.html". Aggiungere la seguente riga sopra il tag di fine "< / body >". Salvare "iceCream2.html".
< script type = ' text/javascript' src='pageLoad.js' >< / script >
Aggiungere codice di evento per chiamare "afterPageLoad.js"
14
Copiare e incollare le righe di sotto nella parte inferiore della "pageLoad.js", quindi salvare "pageLoad.js". Si noti che questa funzione di evento include "afterPageLoad.js", una volta caricata la pagina.
Document.onreadystatechange=function() () {
Se (document.readyState=="complete") {
var element=document.createElement('script');
element.src='afterPageLoad.js'; document.body.appendChild(element);
}
}
15
Aprire "iceCream2.html" nel tuo browser. Dovrebbe funzionare lo stesso come in "iceCream.html". Si noti che ora fa solo due richieste di "http": uno durante il caricamento della pagina e l'altra dopo il caricamento della pagina. I tre precedenti JavaScript potrebbero sono stati combinati complessivamente in un unico "pageLoad.js." Ma su una pagina ricca di contenuti, ciò potrebbe ritardare il processo di rendering della pagina.
16
Copiare e incollare il seguente codice nella parte inferiore della "Functions". Salvare "function.js".
startDt = new Date ();
Document.onreadystatechange=function() () {
endDt = new Date ();
Alert (' tempo di caricamento pagina: ' + (endDt.getTime() - startDt.getTime()) + 'millisecondi.');
}
17
Aggiungere la riga "startDt = new Date ();" sopra la linea di funzione di evento "Document. onreadystatechange", quindi le seguenti righe appena sopra la funzione di "Document. onreadystatechange" finiscono parentesi graffa. Salvare "pageLoad.js".
endDt = new Date ();
Alert (' tempo di caricamento pagina: ' + (endDt.getTime() - startDt.getTime()) + 'millisecondi.');
18
Eseguire "iceCream.html" e "iceCream2.html" nel tuo browser. Si noti la differenza in millisecondi tra le due pagine.
Consigli & Avvertenze
- Per ridurre il tempo di attesa di utente, è consigliabile modificare "document.onreadystatechange=function() {" a "document.body.onmouseover=function() {" a "pageLoad.js". Questo assicura che il "afterPageLoad.js" non viene caricato fino a dopo che un utente effettua una prima risposta. Sarà necessario aggiungere funzionalità che verifica e imposta una variabile booleana per assicurare che il codice nella funzione è chiamato una sola volta.