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

2
00:00:00,380 --> 00:00:03,000
>> HÖGTALARE 1: Nu i det sista exemplet,
minns att vi varvat några

3
00:00:03,000 --> 00:00:07,170
JavaScript-kod på insidan av min HTML,
specifikt insidan av värdet av

4
00:00:07,170 --> 00:00:10,460
attributet kallade On Submit
för denna form taggen.

5
00:00:10,460 --> 00:00:12,850
Nu för små sidor, detta
är inte så stor roll.

6
00:00:12,850 --> 00:00:15,950
Men som en webbsida blir längre och mer
komplex, helt enkelt sätta din

7
00:00:15,950 --> 00:00:19,660
JavaScript-kod här och där inne
av värdet av attribut inte är den

8
00:00:19,660 --> 00:00:20,830
bästa design.

9
00:00:20,830 --> 00:00:23,440
Bäst om vi faktor att ut och
åtminstone lägga den inuti

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

11
00:00:25,200 --> 00:00:26,080
>> Hur man gör detta?

12
00:00:26,080 --> 00:00:30,040
Nåväl låt oss återgå till mitt formulär tag och
först ta bort detta attribut och dess

13
00:00:30,040 --> 00:00:31,780
värde helt och hållet.

14
00:00:31,780 --> 00:00:35,730
Sedan upp här, snarare än definierar en
Funktionen kallas Greet, låt oss hänga på

15
00:00:35,730 --> 00:00:39,405
till kodraden som i slutändan vi
kommer ändå vill köra och ersätta

16
00:00:39,405 --> 00:00:41,560
den Greet på följande funktioner.

17
00:00:41,560 --> 00:00:48,190
Document.get Element By ID
citera unquote demo -

18
00:00:48,190 --> 00:00:52,410
där demo, minns, är det unika
identifierare för själva formuläret -

19
00:00:52,410 --> 00:00:56,600
prick på skicka, som minns är namnet
av händelsehanteraren där

20
00:00:56,600 --> 00:00:57,710
vi är intresserade.

21
00:00:57,710 --> 00:01:01,990
Och låt oss tilldela på skicka handler
det värde som är faktiskt en

22
00:01:01,990 --> 00:01:03,740
fungera själv.

23
00:01:03,740 --> 00:01:06,390
>> Nu märker att jag faktiskt inte
anropa en funktion här.

24
00:01:06,390 --> 00:01:10,650
Jag är i stället definiera en anonym,
annars känd som en lambda-funktion,

25
00:01:10,650 --> 00:01:14,100
genom att ange mellan dessa klammerparenteser
en massa kod som ska

26
00:01:14,100 --> 00:01:15,490
faktiskt verkställas.

27
00:01:15,490 --> 00:01:18,500
Specifikt den kod som jag skulle vilja
att köra är den linjen som jag hade

28
00:01:18,500 --> 00:01:23,370
tidigare, och sedan ska vi lägga till det
return false så att denna form är inte

29
00:01:23,370 --> 00:01:26,950
slutligen in till avsluta fjärr webben
servern på det traditionella sättet.

30
00:01:26,950 --> 00:01:30,345
>> Låt oss nu spara filen, öppna den
i en webbläsare, och se vad som händer.

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
Låt oss nu skriva in mitt namn,
David, Submit.

34
00:01:43,060 --> 00:01:46,900
Och ingenting verkar ha hänt
förutom webbadressen till min sida tycks

35
00:01:46,900 --> 00:01:52,580
har förändrats som om formen var
faktiskt in till samma fil.

36
00:01:52,580 --> 00:01:53,870
>> Nu varför skulle det vara?

37
00:01:53,870 --> 00:01:55,340
Jo jag behöver lite mer information.

38
00:01:55,340 --> 00:01:58,700
Så låt oss gå vidare och öppna upp Chromes
Utvecklarverktyg så att jag kan faktiskt

39
00:01:58,700 --> 00:02:01,440
titta på konsolen fönstret för att se
om jag har gjort något fel.

40
00:02:01,440 --> 00:02:03,330
Jag kan komma åt det via
ett par olika sätt.

41
00:02:03,330 --> 00:02:07,250
Varav en är via denna meny här,
sedan under Verktyg, sedan ner till

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

43
00:02:08,509 --> 00:02:12,890
>> Och märker här på fliken Konsol,
det finns en ej infångade typ fel, kan inte

44
00:02:12,890 --> 00:02:15,390
satt egendom på skicka null.

45
00:02:15,390 --> 00:02:16,900
Nu varför skulle det vara?

46
00:02:16,900 --> 00:02:21,380
Väl tillbaka i min källkod här, meddelande
som på submit jag tycker är en

47
00:02:21,380 --> 00:02:25,360
egenskap hos elementet, vars
unik identifierare är demo.

48
00:02:25,360 --> 00:02:27,810
Ett element, återigen, är bara
en nod i ett träd.

49
00:02:27,810 --> 00:02:30,870
>> Så det verkar som att min webbläsare inte
tror att det elementet

50
00:02:30,870 --> 00:02:32,500
eller nod existerar ännu.

51
00:02:32,500 --> 00:02:33,790
Och faktiskt, det gör det inte.

52
00:02:33,790 --> 00:02:37,690
Minns att en webbsida analyseras eller läsa
genom en webbläsare, uppifrån och ned,

53
00:02:37,690 --> 00:02:38,430
vänster till höger.

54
00:02:38,430 --> 00:02:41,810
Och så när JavaScript-kod är
stött på, oftast, det avrättades

55
00:02:41,810 --> 00:02:42,700
direkt.

56
00:02:42,700 --> 00:02:46,460
>> Men i det här fallet, vi har inte ens fått
yet till den del av dom, den

57
00:02:46,460 --> 00:02:51,100
HTML, där denna form med en unik
identifierare demo har förklarats.

58
00:02:51,100 --> 00:02:54,320
Och så vi försöker köra min
JavaScript-kod innan den noden till och med

59
00:02:54,320 --> 00:02:58,530
existerar i det träd som, naturligtvis, är
problematiskt för då, säkert,

60
00:02:58,530 --> 00:03:01,390
själva elementet kommer att vara null
vid denna tidpunkt.

61
00:03:01,390 --> 00:03:02,390
>> Så hur man fixar?

62
00:03:02,390 --> 00:03:03,810
Jo vi har ett par lösningar.

63
00:03:03,810 --> 00:03:07,200
Men låt oss försöka enklast genom att flytta
mitt manus tagg från huvudet

64
00:03:07,200 --> 00:03:11,560
tagga till min kropp, men särskilt mot
ner på min sida kropp så

65
00:03:11,560 --> 00:03:14,170
att det är lägre än de noder
och frågor.

66
00:03:14,170 --> 00:03:19,930
Specifikt ska vi lyfta fram och skär
den öppna etiketten och nära tag för skriptet

67
00:03:19,930 --> 00:03:24,720
och flytta det hela kodblock
till botten av filen här.

68
00:03:24,720 --> 00:03:27,690
>> Nu är detta inte nödvändigtvis är den renaste
designar, men åtminstone det kommer

69
00:03:27,690 --> 00:03:29,530
driva rätt ordning av verksamheten.

70
00:03:29,530 --> 00:03:31,495
Låt oss spara filen och
ladda om i min webbläsare.

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

72
00:03:34,620 --> 00:03:40,240
Låt oss ladda om sidan, re-ingång mitt namn,
och det är Hej David tillbaka.

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