SPEAKER 1: Ora in questo ultimo esempio, Ricordiamo che abbiamo intervallati alcuni Il codice JavaScript all'interno del mio HTML, specificamente, all'interno del valore di l'attributo chiamato On Submit per quel tag form. Ora per piccoli pagine, questa non è un grande affare. Ma come una pagina web diventa più lungo e più complesso, semplicemente mettendo il vostro Il codice JavaScript qua e là dentro del valore di attributi non è l' miglior design. Meglio se teniamo conto che fuori e almeno mettere dentro di il tag script centralmente. 

Come fare questo? Bene torniamo alla mia tag forma e innanzitutto eliminare questo attributo e la sua valore del tutto. Poi qui, piuttosto che definire una funzione chiamata Greet, cerchiamo di appendere su alla riga di codice che alla fine si sarà ancora voglia di esecuzione e sostituire la funzione Greet come segue. Document.get Element By ID citare demo unquote - dove demo, ricordo, è l'unica identificatore per il modulo stesso - puntino su submit, che ricordo è il nome del gestore eventi in cui siamo interessati. E si assegni che su submit handler il valore che è in realtà un funzione stessa. 

Ora noto che io non sono in realtà chiamare una funzione qui. Sto invece la definizione di un anonimo, altrimenti noto come funzione lambda, specificando tra le parentesi graffe un mucchio di codice che dovrebbe effettivamente eseguito. In particolare, il codice che mi piacerebbe da eseguire è quella linea che ho avuto prima, e poi aggiungiamo a tale return false in modo che questo modulo non è in ultima analisi, presentata alla fine web remoto server nel modo tradizionale. 

Vediamo ora salvare il file, aprirlo in un browser, e vedere cosa succede. http://localhost/dom-1.html. Vediamo ora digitare nel mio nome, David, Submit. E nulla sembra essere successo tranne l'URL della mia pagina sembra hanno cambiato, come se la forma era effettivamente presentate nello stesso file. 

Ora, perché potrebbe essere? Beh, ho bisogno di qualche informazione in più. Quindi cerchiamo di andare avanti e di aprire Chrome Strumenti per gli sviluppatori in modo che possa effettivamente guardare la finestra della console per vedere se ho fatto qualcosa di sbagliato. Posso accedere a tale via un paio di modi. Uno dei quali è tramite questo menu qui, quindi in Strumenti, poi giù per Strumenti per gli sviluppatori. 

E notare qui nella scheda Console, c'è un errore di tipo non rilevato, non può impostare la proprietà a presentare null. Ora, perché potrebbe essere? Bene nel mio codice sorgente qui, avviso che su Invia credo sia un proprietà dell'elemento cui identificatore univoco è demo. Un elemento, di nuovo, è solo un nodo in un albero. 

Così sembra che il mio navigatore non pensare che tale elemento o il nodo esiste ancora. E in effetti, non è così. Ricordiamo che una pagina web viene analizzata o letto da un browser web, dall'alto verso il basso, da sinistra a destra. E così quando il codice JavaScript è incontrato, in genere, è eseguito subito. 

Ma in questo caso, non abbiamo ancora ottenuto ancora la parte del dom, l' HTML, in cui tale forma con un unico identificatore demo è stata dichiarata. E così stiamo cercando di eseguire il mio Il codice JavaScript prima di quel nodo ancora esiste nella struttura che, naturalmente, è problematico perché allora, sicuramente, l'elemento stesso sarà nullo a quel punto nel tempo. 

Quindi, come risolvere? Beh, abbiamo un paio di soluzioni. Ma proviamo il più semplice da trasferire la mia tag script dalla testa tag al mio corpo, ma in particolare, verso la parte inferiore del corpo di mia pagina così che è al di sotto dei nodi e le domande. In particolare, cerchiamo di evidenziare e tagliare il tag di apertura e chiusura tag per copione e trasferire tutto quel blocco di codice alla fine del file qui. 

Ora, questo non è necessariamente il più pulito progettare, ma almeno lo farà rispettare il giusto ordine delle operazioni. Salviamo il file e reload nel mio browser. Facciamo ricaricare la pagina, reinserire il mio nome, e là, Ciao David è tornato.