>> 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.