1
00:00:00,000 --> 00:00:00,380

2
00:00:00,380 --> 00:00:03,000
>> SPEAKER 1: Nu i det sidste eksempel,
minde om, at vi afbrudt nogle

3
00:00:03,000 --> 00:00:07,170
JavaScript-kode inde i min HTML,
specifikt inden for værdien af

4
00:00:07,170 --> 00:00:10,460
attribut kaldet On Indsend
for denne form tag.

5
00:00:10,460 --> 00:00:12,850
Nu til små sider, dette
er ikke sådan en big deal.

6
00:00:12,850 --> 00:00:15,950
Men som en webside bliver længere og mere
kompleks, blot at sætte dit

7
00:00:15,950 --> 00:00:19,660
JavaScript-kode her og der inde
af værdien af ​​attributter er ikke

8
00:00:19,660 --> 00:00:20,830
bedste design.

9
00:00:20,830 --> 00:00:23,440
Bedste, hvis vi faktor, ud og
i det mindste sætte det inde i

10
00:00:23,440 --> 00:00:25,200
script-tag centralt.

11
00:00:25,200 --> 00:00:26,080
>> Hvordan du gør dette?

12
00:00:26,080 --> 00:00:30,040
Jamen så lad os vende tilbage til mit formular tag og
først slette denne attribut, og dens

13
00:00:30,040 --> 00:00:31,780
værdsætter helt.

14
00:00:31,780 --> 00:00:35,730
Derefter op, end til at definere en
funktion kaldet Greet, lad os hænge på

15
00:00:35,730 --> 00:00:39,405
til den linje kode, der i sidste ende vi
vil stadig ønsker at udføre og erstatte

16
00:00:39,405 --> 00:00:41,560
funktionen Velkommen som følger.

17
00:00:41,560 --> 00:00:48,190
Document.get Element Af ID
citere citat slut demo -

18
00:00:48,190 --> 00:00:52,410
hvor demo, husker, er det unikke
identifikator for selve formularen -

19
00:00:52,410 --> 00:00:56,600
prik på indsende, som husker er navnet
af arrangementet handleren, hvor

20
00:00:56,600 --> 00:00:57,710
vi er interesseret.

21
00:00:57,710 --> 00:01:01,990
Og lad os tildele den pågældende på indsende handleren
den værdi, der er faktisk en

22
00:01:01,990 --> 00:01:03,740
fungere selv.

23
00:01:03,740 --> 00:01:06,390
>> Læg nu mærke til, at jeg faktisk ikke
kalde en funktion her.

24
00:01:06,390 --> 00:01:10,650
Jeg stedet definere en anonym,
ellers kendt som en lambda-funktion,

25
00:01:10,650 --> 00:01:14,100
ved at angive mellem disse krøllede parenteser
en flok af kode, der skulle

26
00:01:14,100 --> 00:01:15,490
faktisk blive henrettet.

27
00:01:15,490 --> 00:01:18,500
Konkret den kode, jeg gerne vil
at udføre, er, at linje, som jeg havde

28
00:01:18,500 --> 00:01:23,370
før, og så lad os føje til, at
return false så denne formular er ikke

29
00:01:23,370 --> 00:01:26,950
i sidste ende forelægges ende remote web
server på den traditionelle måde.

30
00:01:26,950 --> 00:01:30,345
>> Lad os nu gemme denne fil, åbne den op
i en browser, og se hvad der sker.

31
00:01:30,345 --> 00:01:33,050

32
00:01:33,050 --> 00:01:39,800
http://localhost/dom-1.html.

33
00:01:39,800 --> 00:01:43,060
Lad os nu skrive i mit navn,
David Send.

34
00:01:43,060 --> 00:01:46,900
Og intet ser ud til at være sket
undtagen webadressen på min side ser ud til at

35
00:01:46,900 --> 00:01:52,580
har ændret sig, som om formen var
faktisk indsendes til samme fil.

36
00:01:52,580 --> 00:01:53,870
>> Nu hvorfor kan det være?

37
00:01:53,870 --> 00:01:55,340
Jamen jeg har brug for nogle flere oplysninger.

38
00:01:55,340 --> 00:01:58,700
Så lad os gå videre og åbne op Chromes
Developer Tools, så jeg kan faktisk

39
00:01:58,700 --> 00:02:01,440
se på konsollen vinduet for at se
hvis jeg har gjort noget forkert.

40
00:02:01,440 --> 00:02:03,330
Jeg kan få adgang til det via
et par måder.

41
00:02:03,330 --> 00:02:07,250
Hvoraf den ene er via denne menu her,
derefter under Funktioner, derefter ned til

42
00:02:07,250 --> 00:02:08,509
Developer Tools.

43
00:02:08,509 --> 00:02:12,890
>> Og bemærk her på fanen Console
der er en ikke-fanget typen fejl, kan ikke

44
00:02:12,890 --> 00:02:15,390
sæt ejendom på indsende nul.

45
00:02:15,390 --> 00:02:16,900
Nu hvorfor kan det være?

46
00:02:16,900 --> 00:02:21,380
Nå tilbage i min kildekode her, varsel
at der på indsende jeg synes er en

47
00:02:21,380 --> 00:02:25,360
egenskab af elementet, hvis
entydig identifikator er demo.

48
00:02:25,360 --> 00:02:27,810
Et element, igen, er bare
en knude i et træ.

49
00:02:27,810 --> 00:02:30,870
>> Så det lader til, at min browser ikke
mener, at dette element

50
00:02:30,870 --> 00:02:32,500
eller node eksisterer endnu.

51
00:02:32,500 --> 00:02:33,790
Og ja, det gør det ikke.

52
00:02:33,790 --> 00:02:37,690
Husk på, at en webside analyseres eller læse
af en webbrowser, top til bund,

53
00:02:37,690 --> 00:02:38,430
venstre til højre.

54
00:02:38,430 --> 00:02:41,810
Og så når JavaScript-kode er
stødt på, typisk, det er henrettet

55
00:02:41,810 --> 00:02:42,700
højre væk.

56
00:02:42,700 --> 00:02:46,460
>> Men i dette tilfælde, vi har ikke engang fået
endnu til den del af den frihed, det

57
00:02:46,460 --> 00:02:51,100
HTML, hvor denne form med en unik
identifikator demo er blevet erklæret.

58
00:02:51,100 --> 00:02:54,320
Og så vi forsøger at udføre mit
JavaScript-kode, før denne node selv

59
00:02:54,320 --> 00:02:58,530
eksisterer i træet, som naturligvis er
problematisk, fordi da, helt sikkert,

60
00:02:58,530 --> 00:03:01,390
elementet i sig selv vil være nul
på daværende tidspunkt.

61
00:03:01,390 --> 00:03:02,390
>> Så hvordan du løser?

62
00:03:02,390 --> 00:03:03,810
Nå vi har et par løsninger.

63
00:03:03,810 --> 00:03:07,200
Men lad os prøve den enkleste ved at flytte
mit script-tag fra hovedet

64
00:03:07,200 --> 00:03:11,560
tag til min krop, men specifikt mod
bunden af ​​min side krop så

65
00:03:11,560 --> 00:03:14,170
at det er under knudepunkterne
og spørgsmål.

66
00:03:14,170 --> 00:03:19,930
Specifikt, lad os fremhæve og skære
det åbne tag og tæt tag til script

67
00:03:19,930 --> 00:03:24,720
og flytte det hele blok af kode
til bunden af ​​filen her.

68
00:03:24,720 --> 00:03:27,690
>> Nu er det ikke nødvendigvis den reneste
designe, men i det mindste vil

69
00:03:27,690 --> 00:03:29,530
håndhæve den rigtige rækkefølge af operationer.

70
00:03:29,530 --> 00:03:31,495
Lad os gemme filen og
reload i min browser.

71
00:03:31,495 --> 00:03:34,620

72
00:03:34,620 --> 00:03:40,240
Lad os genindlæse siden, re-input mit navn,
og der, Hej David er tilbage.

73
00:03:40,240 --> 00:03:42,784