LUIDSPREKER 1: Nu in dat laatste voorbeeld, herinneren dat we afgewisseld sommige JavaScript-code binnenkant van mijn HTML, bijzonder binnen de waarde van het attribuut op Submit voor die vorm tag. Nu voor kleine pagina's, dit is niet zo'n big deal. Maar als een webpagina langer en krijgt complex, simpelweg uw JavaScript-code hier en daar binnen van de waarde van eigenschappen is het beste ontwerp. Beste als we factor die buiten en in ieder geval wel het inwendige van de script-tag centraal. 

Hoe je dit doet? Nou laten we terugkeren naar mijn form tag en eerst dit attribuut en haar verwijderen waarderen helemaal. Dan hier, dan definiëren een functie genaamd Greet, laten we hangen om de regel code die uiteindelijk wij zal toch willen uitvoeren en vervang Greet de functie als volgt. Document.get Element Door ID citeer unquote demo - waar demo, rappel, is de unieke id voor het formulier zelf - stip op te leggen, die herinneren aan de naam van de event handler waarin we geïnteresseerd zijn. En laten we toewijzen dat op submit handler de waarde die is eigenlijk een functie zelf. 

Merk nu dat ik eigenlijk niet aanroepen van een functie hier. Ik plaats het definiëren van een anonieme, ook wel bekend als een lambda functie, onder vermelding tussen deze accolades een bos van code die moet daadwerkelijk worden uitgevoerd. Specifiek, de code die ik zou willen uit te voeren, is dat lijn die ik had voor, en laten we dan aan toe te voegen return false zodat deze vorm niet uiteindelijk voorgelegd aan het einde remote web server in de traditionele manier. 

Laten we nu sla dit bestand, open het in een browser, en zie wat er gebeurt. http://localhost/dom-1.html. Laten we nu typt in mijn naam, David, Indienen. En lijkt er niets te zijn gebeurd behalve de URL van mijn pagina lijkt te zijn veranderd alsof de vorm was eigenlijk naar hetzelfde bestand ingediend. 

Waarom zou dat zijn? Nou ik heb wat meer informatie. Dus laten we verder gaan en open te stellen Chrome Developer Tools, zodat ik kan eigenlijk kijken bij het console venster te zien als ik iets verkeerd heb gedaan. Ik kan toegang tot die via een paar manieren. Een daarvan is via dit menu hier, vervolgens onder Tools, vervolgens naar Developer Tools. 

En let hier op het tabblad Console, er is een niet-afgevangen type fout, kan niet ingesteld woning op te leggen van null. Waarom zou dat zijn? Goed terug in mijn broncode hier, bericht dat op submit ik denk dat is een eigenschap van het element waarvan unieke identifier is demo. Een element, nogmaals, is gewoon een knoop in een boom. 

Dus het lijkt erop dat mijn browser niet denk dat dat element of knooppunt bestaat nog. En inderdaad, het doet niet. Bedenk dat een webpagina wordt ontleed of gelezen door een web browser, van boven naar beneden, van links naar rechts. En dus wanneer JavaScript-code is aangetroffen, meestal, het is uitgevoerd meteen. 

Maar in dit geval, we hebben nog niet eens gekregen maar het deel van de dom, de HTML, waarbij die vorm met een unieke identifier demo is verklaard. En dus we proberen uit te voeren mijn JavaScript-code voor dat knooppunt nog bestaat in de boom die, natuurlijk problematisch omdat dan, zeker, het element zelf zal nul zijn op dat punt in de tijd. 

Dus hoe op te lossen? Nou we hebben een paar oplossingen. Maar laten we proberen de eenvoudigste door het verplaatsen mijn script-tag uit het hoofd taggen met mijn lichaam, maar in het bijzonder, in de richting van de onderkant van mijn pagina's lichaam zo dat deze onder de knooppunten en vragen. In het bijzonder, laten we markeren en snijden de open-tag en sluit tag voor script en verplaatsen dat hele blok van de code het einde van het bestand hier. 

Nu is dit niet noodzakelijkerwijs het schoonste ontwerpen, maar in ieder geval zal handhaving van de juiste volgorde van de bewerkingen. Laten we het bestand opslaan en herladen in mijn browser. Laten we de pagina geladen is, opnieuw invoeren van mijn naam, en daar, Hallo David is terug.