>> SPEAKER 1: Nu i det sidste eksempel, minde om, at vi afbrudt nogle
JavaScript-kode inde i min HTML, specifikt inden for værdien af
attribut kaldet On Indsend for denne form tag.
Nu til små sider, dette er ikke sådan en big deal.
Men som en webside bliver længere og mere kompleks, blot at sætte dit
JavaScript-kode her og der inde af værdien af ​​attributter er ikke
bedste design.
Bedste, hvis vi faktor, ud og i det mindste sætte det inde i
script-tag centralt.
>> Hvordan du gør dette?
Jamen så lad os vende tilbage til mit formular tag og først slette denne attribut, og dens
værdsætter helt.
Derefter op, end til at definere en funktion kaldet Greet, lad os hænge på
til den linje kode, der i sidste ende vi vil stadig ønsker at udføre og erstatte
funktionen Velkommen som følger.
Document.get Element Af ID citere citat slut demo -
hvor demo, husker, er det unikke identifikator for selve formularen -
prik på indsende, som husker er navnet af arrangementet handleren, hvor
vi er interesseret.
Og lad os tildele den pågældende på indsende handleren den værdi, der er faktisk en
fungere selv.
>> Læg nu mærke til, at jeg faktisk ikke kalde en funktion her.
Jeg stedet definere en anonym, ellers kendt som en lambda-funktion,
ved at angive mellem disse krøllede parenteser en flok af kode, der skulle
faktisk blive henrettet.
Konkret den kode, jeg gerne vil at udføre, er, at linje, som jeg havde
før, og så lad os føje til, at return false så denne formular er ikke
i sidste ende forelægges ende remote web server på den traditionelle måde.
>> Lad os nu gemme denne fil, åbne den op i en browser, og se hvad der sker.
http://localhost/dom-1.html.
Lad os nu skrive i mit navn, David Send.
Og intet ser ud til at være sket undtagen webadressen på min side ser ud til at
har ændret sig, som om formen var faktisk indsendes til samme fil.
>> Nu hvorfor kan det være?
Jamen jeg har brug for nogle flere oplysninger.
Så lad os gå videre og åbne op Chromes Developer Tools, så jeg kan faktisk
se på konsollen vinduet for at se hvis jeg har gjort noget forkert.
Jeg kan få adgang til det via et par måder.
Hvoraf den ene er via denne menu her, derefter under Funktioner, derefter ned til
Developer Tools.
>> Og bemærk her på fanen Console der er en ikke-fanget typen fejl, kan ikke
sæt ejendom på indsende nul.
Nu hvorfor kan det være?
Nå tilbage i min kildekode her, varsel at der på indsende jeg synes er en
egenskab af elementet, hvis entydig identifikator er demo.
Et element, igen, er bare en knude i et træ.
>> Så det lader til, at min browser ikke mener, at dette element
eller node eksisterer endnu.
Og ja, det gør det ikke.
Husk på, at en webside analyseres eller læse af en webbrowser, top til bund,
venstre til højre.
Og så når JavaScript-kode er stødt på, typisk, det er henrettet
højre væk.
>> Men i dette tilfælde, vi har ikke engang fået endnu til den del af den frihed, det
HTML, hvor denne form med en unik identifikator demo er blevet erklæret.
Og så vi forsøger at udføre mit JavaScript-kode, før denne node selv
eksisterer i træet, som naturligvis er problematisk, fordi da, helt sikkert,
elementet i sig selv vil være nul på daværende tidspunkt.
>> Så hvordan du løser?
Nå vi har et par løsninger.
Men lad os prøve den enkleste ved at flytte mit script-tag fra hovedet
tag til min krop, men specifikt mod bunden af ​​min side krop så
at det er under knudepunkterne og spørgsmål.
Specifikt, lad os fremhæve og skære det åbne tag og tæt tag til script
og flytte det hele blok af kode til bunden af ​​filen her.
>> Nu er det ikke nødvendigvis den reneste designe, men i det mindste vil
håndhæve den rigtige rækkefølge af operationer.
Lad os gemme filen og reload i min browser.
Lad os genindlæse siden, re-input mit navn, og der, Hej David er tilbage.