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

2
00:00:00,380 --> 00:00:03,000
>> COLUNA 1: Agora nesse último exemplo,
recordar que nós intercalados alguns

3
00:00:03,000 --> 00:00:07,170
O código JavaScript dentro do meu HTML,
especificamente, dentro do valor de

4
00:00:07,170 --> 00:00:10,460
o atributo chamado On Enviar
para esse tag form.

5
00:00:10,460 --> 00:00:12,850
Agora para pequenas páginas, este
não é um negócio tão grande.

6
00:00:12,850 --> 00:00:15,950
Mas, como uma página web fica mais e mais
complexa, simplesmente colocando o seu

7
00:00:15,950 --> 00:00:19,660
O código JavaScript aqui e lá dentro
do valor de atributos não é o

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

9
00:00:20,830 --> 00:00:23,440
Melhor se levarmos isso e
pelo menos colocá-lo dentro de

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

11
00:00:25,200 --> 00:00:26,080
>> Como fazer isso?

12
00:00:26,080 --> 00:00:30,040
Bem, vamos voltar à minha forma e tag
primeiro excluir este atributo e seu

13
00:00:30,040 --> 00:00:31,780
valorizar completamente.

14
00:00:31,780 --> 00:00:35,730
Então, aqui em cima, ao invés de definir um
função chamada Greet, vamos pendurar

15
00:00:35,730 --> 00:00:39,405
para a linha de código que em última análise,
ainda vai querer executar e substituir

16
00:00:39,405 --> 00:00:41,560
a função Greet como se segue.

17
00:00:41,560 --> 00:00:48,190
Document.get elemento por ID
citar demonstração unquote -

18
00:00:48,190 --> 00:00:52,410
onde demo, recall, é o único
identificador para o próprio formulário -

19
00:00:52,410 --> 00:00:56,600
ponto em enviar, o que lembro é o nome
do manipulador de eventos em que

20
00:00:56,600 --> 00:00:57,710
estamos interessados.

21
00:00:57,710 --> 00:01:01,990
E vamos atribuir esse em enviar manipulador
o valor que é realmente um

22
00:01:01,990 --> 00:01:03,740
funcionar em si.

23
00:01:03,740 --> 00:01:06,390
>> Agora note que eu não sou realmente
chamar uma função aqui.

24
00:01:06,390 --> 00:01:10,650
Estou em vez definindo um anônimo,
de outro modo conhecida como uma função lambda,

25
00:01:10,650 --> 00:01:14,100
especificando entre essas chaves
um monte de código que deveria

26
00:01:14,100 --> 00:01:15,490
na verdade, ser executado.

27
00:01:15,490 --> 00:01:18,500
Especificamente, o código que eu gostaria
para executar é que a linha que eu tinha

28
00:01:18,500 --> 00:01:23,370
antes, e, em seguida, vamos adicionar a isso
return false para que essa forma não é

29
00:01:23,370 --> 00:01:26,950
em última análise, acabam submetidos a web remoto
servidor da maneira tradicional.

30
00:01:26,950 --> 00:01:30,345
>> Vamos agora salvar o arquivo, abra-se
em um navegador, e ver o que acontece.

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
Vamos agora escrever em meu nome,
David, em Enviar.

34
00:01:43,060 --> 00:01:46,900
E nada parece ter acontecido
exceto o URL da minha página parece

35
00:01:46,900 --> 00:01:52,580
mudaram a forma como se foi
realmente submetidos ao mesmo arquivo.

36
00:01:52,580 --> 00:01:53,870
>> Agora, por que pode ser isso?

37
00:01:53,870 --> 00:01:55,340
Bem, eu preciso de mais informações.

38
00:01:55,340 --> 00:01:58,700
Então, vamos em frente e abrir Chrome
Ferramentas de Desenvolvimento para que eu possa realmente

39
00:01:58,700 --> 00:02:01,440
olhar para a janela do console para ver
se eu tivesse feito algo errado.

40
00:02:01,440 --> 00:02:03,330
Eu posso acessar essa via
um par de formas.

41
00:02:03,330 --> 00:02:07,250
Uma delas é através deste menu aqui,
em seguida, em Ferramentas, em seguida, para baixo para

42
00:02:07,250 --> 00:02:08,509
Ferramentas de Desenvolvimento.

43
00:02:08,509 --> 00:02:12,890
>> E note aqui na guia Console,
há um erro de tipo não capturada, não pode

44
00:02:12,890 --> 00:02:15,390
definir a propriedade em enviar nulo.

45
00:02:15,390 --> 00:02:16,900
Agora, por que pode ser isso?

46
00:02:16,900 --> 00:02:21,380
Bem de volta no meu código fonte aqui, aviso
que em Submit Eu acho que é uma

47
00:02:21,380 --> 00:02:25,360
propriedade do elemento cujo
identificador único é demonstração.

48
00:02:25,360 --> 00:02:27,810
Um elemento, de novo, é apenas
um nó em uma árvore.

49
00:02:27,810 --> 00:02:30,870
>> Assim, parece que o meu computador não faz
acha que esse elemento

50
00:02:30,870 --> 00:02:32,500
ou nó existe ainda.

51
00:02:32,500 --> 00:02:33,790
E, de fato, isso não acontece.

52
00:02:33,790 --> 00:02:37,690
Lembre-se que uma página da web é analisado ou ler
por um navegador web, de cima para baixo,

53
00:02:37,690 --> 00:02:38,430
esquerda para a direita.

54
00:02:38,430 --> 00:02:41,810
E assim, quando o código JavaScript é
encontrado, normalmente, é executada

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

56
00:02:42,700 --> 00:02:46,460
>> Mas, neste caso, não temos sequer chegado
Ainda que a parte do dom, o

57
00:02:46,460 --> 00:02:51,100
HTML, em que esse formulário com um único
demonstração identificador foi declarado.

58
00:02:51,100 --> 00:02:54,320
E assim estamos tentando executar o meu
O código JavaScript que antes mesmo nó

59
00:02:54,320 --> 00:02:58,530
existe na árvore que, é claro, é
problemático porque então, com certeza,

60
00:02:58,530 --> 00:03:01,390
o próprio elemento será nulo
naquele momento.

61
00:03:01,390 --> 00:03:02,390
>> Então, como resolver?

62
00:03:02,390 --> 00:03:03,810
Bem, temos um par de soluções.

63
00:03:03,810 --> 00:03:07,200
Mas vamos tentar o mais simples realocando
minha tag script da cabeça

64
00:03:07,200 --> 00:03:11,560
marcar para o meu corpo, mas especificamente, na direção
a parte inferior do corpo da minha página, para

65
00:03:11,560 --> 00:03:14,170
que é abaixo dos nós
e perguntas.

66
00:03:14,170 --> 00:03:19,930
Especificamente, vamos destacar e cortar
a tag abrir e fechar tag para o script

67
00:03:19,930 --> 00:03:24,720
e realocar todo esse bloco de código
para a parte inferior do arquivo aqui.

68
00:03:24,720 --> 00:03:27,690
>> Agora, isso não é necessariamente o mais limpo
projetar, mas pelo menos ele vai

69
00:03:27,690 --> 00:03:29,530
fazer cumprir a ordem correta das operações.

70
00:03:29,530 --> 00:03:31,495
Vamos salvar o arquivo e
recarregar no meu navegador.

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

72
00:03:34,620 --> 00:03:40,240
Vamos recarregar a página, re-entrada de meu nome,
e ali, Olá David está de volta.

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