1
00:00:00,420 --> 00:00:01,690
Bem-vindo de volta.

2
00:00:01,980 --> 00:00:03,600
Então eu tenho algumas boas notícias.

3
00:00:03,600 --> 00:00:08,130
Finalmente, é hora de tirar o javascript e combiná-lo com o H. M. S. avaliar.

4
00:00:08,250 --> 00:00:10,160
Esta é, de longe, minha unidade favorita.

5
00:00:10,170 --> 00:00:13,800
Meu tópico favorito para ensinar tudo o que passei ensinando minha vida.

6
00:00:13,860 --> 00:00:16,180
É realmente onde o javascript começa a pagar.

7
00:00:16,200 --> 00:00:18,480
Então, estamos fazendo alguns aplicativos simples até este ponto.

8
00:00:18,540 --> 00:00:23,340
muito emocionante, mas isso vai mudar agora porque estamos prestes a liberar o poder do Javascript.

9
00:00:23,340 --> 00:00:27,310
Lista fácil de usar usando alertas e avisos e eu sei que não é

10
00:00:27,510 --> 00:00:31,830
E então, esta unidade, vamos fazer coisas como fazer um jogo interativo, vamos fazer uma

11
00:00:31,830 --> 00:00:38,070
lista real para fazer com um formulário real com botões e caixas de seleção reais e Javascript por trás dele e animações

12
00:00:38,070 --> 00:00:43,200
e todo tipo de coisas interessantes realmente interessantes onde você realmente sente que fez algo não apenas uma

13
00:00:43,200 --> 00:00:48,360
pequena linha de comando ou um pequeno aplicativo de console javascript, mas algo real que você poderia compartilhar.

14
00:00:48,840 --> 00:00:55,410
Assim, a maneira como fazemos tudo isso é através de uma tecnologia chamada DOM. Isso é isso.

15
00:00:55,530 --> 00:01:00,210
Então, esta lição vai servir como uma introdução ao DOM que vai falar sobre algumas coisas

16
00:01:00,210 --> 00:01:01,090
nos próximos vídeos.

17
00:01:01,140 --> 00:01:05,450
Eu quero começar por definir o que o DOM é o que essas cartas representam.

18
00:01:05,460 --> 00:01:08,300
Eu quero que você tenha uma boa compreensão de por que isso é emocionante.

19
00:01:08,310 --> 00:01:12,180
Eu vou mostrar-lhe alguns aplicativos legais que outras pessoas construíram usando essas coisas que vamos

20
00:01:12,180 --> 00:01:17,000
aprender, então vamos falar sobre o que eu chamo de selecione, em seguida, manipule o fluxo de trabalho.

21
00:01:17,250 --> 00:01:19,230
Então vamos começar.

22
00:01:19,230 --> 00:01:20,910
Então, por que você se importaria com tudo isso.

23
00:01:21,000 --> 00:01:22,550
Bem, há tantos motivos.

24
00:01:22,680 --> 00:01:29,550
o cão interagindo com cada equipe e com a SS Então, interagimos com o Dom para fazer coisas como jogos.

25
00:01:29,790 --> 00:01:35,610
Praticamente todos os grandes aplicativos da Web lá, agora, coisas como Twitter e Facebook Instagram YouTube Gmail,

26
00:01:35,610 --> 00:01:40,890
todos eles usam uma tonelada de javascript e a maioria desses javascript está interagindo com

27
00:01:41,130 --> 00:01:46,740
Poderíamos fazer tic tac toe, poderíamos fazer uma plataforma como um jogo como o Mario, podemos

28
00:01:46,740 --> 00:01:50,780
usá-lo para fazer coisas mais práticas, como menus suspensos, como validações.

29
00:01:50,980 --> 00:01:52,760
É assim que fazemos as páginas da web interativas.

30
00:01:52,770 --> 00:01:54,470
É como podemos adicionar animações.

31
00:01:54,600 --> 00:01:59,520
últimos anos, use muitos JavaScript para manipular o Dom, como mencionei anteriormente, vou mostrar alguns

32
00:01:59,520 --> 00:02:04,710
exemplos antes de começarmos a definir Estes termos falam sobre o que o DOM é como funciona.

33
00:02:04,710 --> 00:02:09,270
E o último aqui realmente resume tudo praticamente todo o site fantástico, embora, mesmo

34
00:02:09,270 --> 00:02:10,040
que nos

35
00:02:10,080 --> 00:02:11,870
Quero mostrar-lhe alguns sites.

36
00:02:12,540 --> 00:02:17,370
Então, o primeiro é apenas o google e não sei o quanto você presta atenção nisso,

37
00:02:17,370 --> 00:02:20,910
mas quando você começa a procurar algo no Google, como o Halo.

38
00:02:21,000 --> 00:02:27,060
Observe como eu obtenho essa coisa que parece que isso é tudo seu Timo. Este é algum tipo de div ou

39
00:02:27,060 --> 00:02:33,000
algo que está sendo atingido e mostrado e está mudando à medida que escrevo coisas como se eu digite hello kitty.

40
00:02:33,000 --> 00:02:34,020
Obtenho novos resultados.

41
00:02:34,020 --> 00:02:38,190
Isso é feito com javascript, mas esse é o tipo de coisa que poderemos fazer depois

42
00:02:38,190 --> 00:02:39,080
de alguns vídeos.

43
00:02:39,120 --> 00:02:43,140
Claro que não seremos capazes de escrever o backend que o Google tem, mas nós poderemos fazer as coisas

44
00:02:43,140 --> 00:02:43,770
do front-end aqui.

45
00:02:43,770 --> 00:02:49,090
Todo o HMO, todo o sucesso, todos esses efeitos que você vê serão facilmente replicáveis.

46
00:02:49,110 --> 00:02:54,000
Então, a próxima coisa que eu quero destacar é no site do Tomi, há um botão de cursos do Brough

47
00:02:54,380 --> 00:02:59,280
e quando eu clicar nisso, eu recebo o menu de deslize para fora, que empurra tudo para a direita e

48
00:02:59,280 --> 00:03:01,000
eu tenho todas essas categorias para escolher.

49
00:03:01,290 --> 00:03:06,400
E, como um hover sobre uma categoria, você pode ver esse submenu que aparece.

50
00:03:06,660 --> 00:03:11,140
Então, é tudo isso que javascript as coisas estão sendo adicionadas à página que ele novo criou.

51
00:03:11,140 --> 00:03:13,230
Estes são provavelmente itens de lista e tags de âncora.

52
00:03:13,350 --> 00:03:17,970
Eles estão sendo adicionados à página que está sendo escondida e mostrada na cor está mudando à medida que

53
00:03:18,420 --> 00:03:19,790
eu rolo sobre coisas muito interatividade.

54
00:03:19,830 --> 00:03:22,430
Então, a próxima coisa que eu quero mostrar é um dos meus favoritos.

55
00:03:22,650 --> 00:03:24,560
É um site chamado ataque pad.

56
00:03:24,780 --> 00:03:26,030
Então isso é um pouco diferente.

57
00:03:26,100 --> 00:03:31,410
Não é realmente uma aplicação web que você usaria, mas é um brinquedo muito divertido e uma excelente demonstração tecnológica do que você pode

58
00:03:31,410 --> 00:03:33,210
fazer com H. T. rato.

59
00:03:33,250 --> 00:03:37,940
SS Em javascript, recomendo que você vá em frente e tente isso por conta própria.

60
00:03:38,080 --> 00:03:45,660
Patta tap dot com e eu tenho que fazer é começar a digitar no meu teclado em cada tecla que eu pressionar corresponde a um

61
00:03:45,660 --> 00:03:48,810
som que toca e uma animação legal que é reproduzida.

62
00:03:48,900 --> 00:03:51,940
Então, deixe-me mostrar um exemplo.

63
00:03:52,080 --> 00:03:54,100
Aqui está mais um.

64
00:03:55,860 --> 00:03:57,040
Então você pode se perder em algum lugar.

65
00:04:03,510 --> 00:04:06,010
Então, isso resume o tipo de coisa que podemos fazer.

66
00:04:06,120 --> 00:04:11,880
Nós temos interatividade onde eu estou pressionando uma tecla para que o código esteja sendo executado somente

67
00:04:11,890 --> 00:04:19,710
quando eu pressionar uma determinada chave e esse código não está apenas sendo reproduzido como som, mas também está mudando o que vemos visualmente.

68
00:04:19,710 --> 00:04:23,970
Portanto, não é apenas o login constante, não é apenas o uso de alertas, está realmente mudando

69
00:04:24,200 --> 00:04:26,280
a tela que saiu na CSSA que vemos.

70
00:04:26,700 --> 00:04:31,110
Então, espero que esses exemplos tenham ficado um pouco excitados sobre todas as coisas incríveis que estamos

71
00:04:31,110 --> 00:04:31,790
prestes a aprender.