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

2
00:00:00,380 --> 00:00:03,000
>> LUIDSPREKER 1: Nu in dat laatste voorbeeld,
herinneren dat we afgewisseld sommige

3
00:00:03,000 --> 00:00:07,170
JavaScript-code binnenkant van mijn HTML,
bijzonder binnen de waarde van

4
00:00:07,170 --> 00:00:10,460
het attribuut op Submit
voor die vorm tag.

5
00:00:10,460 --> 00:00:12,850
Nu voor kleine pagina's, dit
is niet zo'n big deal.

6
00:00:12,850 --> 00:00:15,950
Maar als een webpagina langer en krijgt
complex, simpelweg uw

7
00:00:15,950 --> 00:00:19,660
JavaScript-code hier en daar binnen
van de waarde van eigenschappen is het

8
00:00:19,660 --> 00:00:20,830
beste ontwerp.

9
00:00:20,830 --> 00:00:23,440
Beste als we factor die buiten en
in ieder geval wel het inwendige van

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

11
00:00:25,200 --> 00:00:26,080
>> Hoe je dit doet?

12
00:00:26,080 --> 00:00:30,040
Nou laten we terugkeren naar mijn form tag en
eerst dit attribuut en haar verwijderen

13
00:00:30,040 --> 00:00:31,780
waarderen helemaal.

14
00:00:31,780 --> 00:00:35,730
Dan hier, dan definiëren een
functie genaamd Greet, laten we hangen

15
00:00:35,730 --> 00:00:39,405
om de regel code die uiteindelijk wij
zal toch willen uitvoeren en vervang

16
00:00:39,405 --> 00:00:41,560
Greet de functie als volgt.

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

18
00:00:48,190 --> 00:00:52,410
waar demo, rappel, is de unieke
id voor het formulier zelf -

19
00:00:52,410 --> 00:00:56,600
stip op te leggen, die herinneren aan de naam
van de event handler waarin

20
00:00:56,600 --> 00:00:57,710
we geïnteresseerd zijn.

21
00:00:57,710 --> 00:01:01,990
En laten we toewijzen dat op submit handler
de waarde die is eigenlijk een

22
00:01:01,990 --> 00:01:03,740
functie zelf.

23
00:01:03,740 --> 00:01:06,390
>> Merk nu dat ik eigenlijk niet
aanroepen van een functie hier.

24
00:01:06,390 --> 00:01:10,650
Ik plaats het definiëren van een anonieme,
ook wel bekend als een lambda functie,

25
00:01:10,650 --> 00:01:14,100
onder vermelding tussen deze accolades
een bos van code die moet

26
00:01:14,100 --> 00:01:15,490
daadwerkelijk worden uitgevoerd.

27
00:01:15,490 --> 00:01:18,500
Specifiek, de code die ik zou willen
uit te voeren, is dat lijn die ik had

28
00:01:18,500 --> 00:01:23,370
voor, en laten we dan aan toe te voegen
return false zodat deze vorm niet

29
00:01:23,370 --> 00:01:26,950
uiteindelijk voorgelegd aan het einde remote web
server in de traditionele manier.

30
00:01:26,950 --> 00:01:30,345
>> Laten we nu sla dit bestand, open het
in een browser, en zie wat er gebeurt.

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
Laten we nu typt in mijn naam,
David, Indienen.

34
00:01:43,060 --> 00:01:46,900
En lijkt er niets te zijn gebeurd
behalve de URL van mijn pagina lijkt te

35
00:01:46,900 --> 00:01:52,580
zijn veranderd alsof de vorm was
eigenlijk naar hetzelfde bestand ingediend.

36
00:01:52,580 --> 00:01:53,870
>> Waarom zou dat zijn?

37
00:01:53,870 --> 00:01:55,340
Nou ik heb wat meer informatie.

38
00:01:55,340 --> 00:01:58,700
Dus laten we verder gaan en open te stellen Chrome
Developer Tools, zodat ik kan eigenlijk

39
00:01:58,700 --> 00:02:01,440
kijken bij het console venster te zien
als ik iets verkeerd heb gedaan.

40
00:02:01,440 --> 00:02:03,330
Ik kan toegang tot die via
een paar manieren.

41
00:02:03,330 --> 00:02:07,250
Een daarvan is via dit menu hier,
vervolgens onder Tools, vervolgens naar

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

43
00:02:08,509 --> 00:02:12,890
>> En let hier op het tabblad Console,
er is een niet-afgevangen type fout, kan niet

44
00:02:12,890 --> 00:02:15,390
ingesteld woning op te leggen van null.

45
00:02:15,390 --> 00:02:16,900
Waarom zou dat zijn?

46
00:02:16,900 --> 00:02:21,380
Goed terug in mijn broncode hier, bericht
dat op submit ik denk dat is een

47
00:02:21,380 --> 00:02:25,360
eigenschap van het element waarvan
unieke identifier is demo.

48
00:02:25,360 --> 00:02:27,810
Een element, nogmaals, is gewoon
een knoop in een boom.

49
00:02:27,810 --> 00:02:30,870
>> Dus het lijkt erop dat mijn browser niet
denk dat dat element

50
00:02:30,870 --> 00:02:32,500
of knooppunt bestaat nog.

51
00:02:32,500 --> 00:02:33,790
En inderdaad, het doet niet.

52
00:02:33,790 --> 00:02:37,690
Bedenk dat een webpagina wordt ontleed of gelezen
door een web browser, van boven naar beneden,

53
00:02:37,690 --> 00:02:38,430
van links naar rechts.

54
00:02:38,430 --> 00:02:41,810
En dus wanneer JavaScript-code is
aangetroffen, meestal, het is uitgevoerd

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

56
00:02:42,700 --> 00:02:46,460
>> Maar in dit geval, we hebben nog niet eens gekregen
maar het deel van de dom, de

57
00:02:46,460 --> 00:02:51,100
HTML, waarbij die vorm met een unieke
identifier demo is verklaard.

58
00:02:51,100 --> 00:02:54,320
En dus we proberen uit te voeren mijn
JavaScript-code voor dat knooppunt nog

59
00:02:54,320 --> 00:02:58,530
bestaat in de boom die, natuurlijk
problematisch omdat dan, zeker,

60
00:02:58,530 --> 00:03:01,390
het element zelf zal nul zijn
op dat punt in de tijd.

61
00:03:01,390 --> 00:03:02,390
>> Dus hoe op te lossen?

62
00:03:02,390 --> 00:03:03,810
Nou we hebben een paar oplossingen.

63
00:03:03,810 --> 00:03:07,200
Maar laten we proberen de eenvoudigste door het verplaatsen
mijn script-tag uit het hoofd

64
00:03:07,200 --> 00:03:11,560
taggen met mijn lichaam, maar in het bijzonder, in de richting van
de onderkant van mijn pagina's lichaam zo

65
00:03:11,560 --> 00:03:14,170
dat deze onder de knooppunten
en vragen.

66
00:03:14,170 --> 00:03:19,930
In het bijzonder, laten we markeren en snijden
de open-tag en sluit tag voor script

67
00:03:19,930 --> 00:03:24,720
en verplaatsen dat hele blok van de code
het einde van het bestand hier.

68
00:03:24,720 --> 00:03:27,690
>> Nu is dit niet noodzakelijkerwijs het schoonste
ontwerpen, maar in ieder geval zal

69
00:03:27,690 --> 00:03:29,530
handhaving van de juiste volgorde van de bewerkingen.

70
00:03:29,530 --> 00:03:31,495
Laten we het bestand opslaan en
herladen in mijn browser.

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

72
00:03:34,620 --> 00:03:40,240
Laten we de pagina geladen is, opnieuw invoeren van mijn naam,
en daar, Hallo David is terug.

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