1
00:00:00,360 --> 00:00:01,380
Bem vindo de volta.

2
00:00:01,380 --> 00:00:04,380
Então, neste vídeo, vamos nos concentrar no front-end.

3
00:00:04,620 --> 00:00:08,790
Nós vamos aprender sobre cada TMLC avaliado em javascript em um nível alto, nós realmente não

4
00:00:08,790 --> 00:00:12,530
vamos escrever nenhum código ainda, mas nós estaremos vendo o código pela primeira vez.

5
00:00:13,140 --> 00:00:17,900
Então, há duas grandes coisas que você quer saber qual é o que é diferente entre a frente e a parte traseira.

6
00:00:18,040 --> 00:00:23,970
E então também qual é a diferença entre H. M. S. SS e Javascript e quais são os respectivos papéis.

7
00:00:25,080 --> 00:00:28,740
Então, vamos começar discutindo o Front-End versus o bacot.

8
00:00:28,860 --> 00:00:35,610
Então, quando eu vou para um você sabe, digamos Vá para o Facebook Eu bati o Facebook dot com Eu bati Enter.

9
00:00:35,610 --> 00:00:43,050
E se você se lembrará do vídeo sobre como funciona a web, crie uma solicitação HTP solicitando o Facebook dot com

10
00:00:43,050 --> 00:00:50,850
e isso vá para o servidor do Facebook ou, eventualmente, o Facebook, então, decide qual a página para me enviar de volta.

11
00:00:51,210 --> 00:00:56,760
Então, no caso do Facebook, precisa descobrir quais imagens que histórias quantos gostam de ter amigos que tenho,

12
00:00:56,760 --> 00:01:02,400
o que são posts no topo de todas as minhas configurações de imagens de alto perfil todas as

13
00:01:02,400 --> 00:01:03,790
coisas que pertencem a mim.

14
00:01:04,110 --> 00:01:10,200
E então ele envia de volta para mim me envia h tim elsea diz em javascript meu navegador exibe isso

15
00:01:10,200 --> 00:01:10,870
para mim.

16
00:01:11,370 --> 00:01:16,980
apenas a diferença entre a frente e a extremidade traseira, onde tudo que eu recebo naquele que vejo no navegador é apenas H.

17
00:01:16,980 --> 00:01:21,650
Então, este diagrama aqui explica M. S. Sim.

18
00:01:21,720 --> 00:01:24,190
E javascript apenas a ponta do iceberg.

19
00:01:24,270 --> 00:01:28,910
Mas é o que o meu navegador vê que é o front-end ou o lado do cliente.

20
00:01:29,250 --> 00:01:31,960
É construído pelo backend.

21
00:01:32,370 --> 00:01:34,360
Tudo o resto que acontece toda a lógica.

22
00:01:34,440 --> 00:01:40,680
Descobrindo se eu estou logado descobrindo quem são meus amigos que fotos eu tenho o que postagens eu publiquei

23
00:01:40,680 --> 00:01:42,000
quantos gostam de terem.

24
00:01:42,000 --> 00:01:45,970
Tudo isso vem do backend ou da lógica do lado do servidor.

25
00:01:46,200 --> 00:01:48,000
Então você pode ver que há muito mais aqui.

26
00:01:48,030 --> 00:01:50,820
A tecnologia é que há tantas opções no front-end não existe.

27
00:01:50,850 --> 00:01:58,010
É sempre HTML CSS e javascript na parte de trás, você tem idiomas diferentes como o Python ph P

28
00:01:58,020 --> 00:02:01,180
Ruby javascript, na verdade, o que vamos usar.

29
00:02:01,350 --> 00:02:06,570
Existem bancos de dados diferentes que você tem pós-graduação e Mongo e sofá D. B e Mya's.

30
00:02:06,570 --> 00:02:09,320
Q Bem e a sequela, Lightener, há muitas escolhas.

31
00:02:09,390 --> 00:02:11,010
Então é um pouco intimidante.

32
00:02:11,040 --> 00:02:15,060
Nós definitivamente conversaremos muito sobre o back-end quando chegarmos a essa unidade.

33
00:02:15,060 --> 00:02:20,940
Mas por agora, lembre-se de que a parte traseira é o que constrói o H para derreter e o C S que é

34
00:02:20,940 --> 00:02:21,770
enviado de volta.

35
00:02:21,780 --> 00:02:27,200
Então, vamos dar um exemplo aqui, o que o meu restaurante favorito em San Francisco é chamado de preguiçoso.

36
00:02:27,390 --> 00:02:28,890
Aqui está a página do restaurante.

37
00:02:29,100 --> 00:02:31,580
Esta página é sempre a mesma.

38
00:02:31,620 --> 00:02:32,810
Quero dizer, isso pode ser alterado.

39
00:02:32,820 --> 00:02:34,790
Mas para que isso seja alterado.

40
00:02:34,920 --> 00:02:38,600
O desenvolvedor tem que entrar no H. T. Montar e alterá-lo manualmente.

41
00:02:38,610 --> 00:02:44,490
Então, basicamente, atualizo a página toda vez que recebo a mesma página inicial, recebo as mesmas perguntas freqüentes

42
00:02:44,730 --> 00:02:46,540
na mesma página de contatos.

43
00:02:46,580 --> 00:02:48,650
Isso não é ruim, mas não precisa mudar.

44
00:02:48,660 --> 00:02:50,580
É apenas um restaurante uma página.

45
00:02:50,610 --> 00:02:55,520
No entanto, a página de Yelp urso preguiçoso é dinâmica.

46
00:02:55,530 --> 00:03:01,110
Isso muda assim que qualquer vez que uma nova revisão seja escrita, ela aparecerá

47
00:03:01,170 --> 00:03:05,070
aqui toda vez e digamos, neste caso, avaliemos 5 estrelas.

48
00:03:05,070 --> 00:03:06,590
Eu li uma revisão.

49
00:03:07,170 --> 00:03:11,840
Bem, você provavelmente rejeita minha revisão, mas se eu escrevi um comentário, isso apareceria aqui.

50
00:03:11,880 --> 00:03:17,000
As coisas são dinâmicas que estão acontecendo o tempo todo, então eu posso dizer que foi uma revisão útil.

51
00:03:17,190 --> 00:03:18,700
Essa foi uma revisão engraçada.

52
00:03:19,140 --> 00:03:23,510
E os votos que adicionei são armazenados em um banco de dados.

53
00:03:23,520 --> 00:03:27,060
Algo está acontecendo Eu estou interagindo com isso e está persistiendo.

54
00:03:27,060 --> 00:03:32,010
Então, se eu atualizar a página agora, não é diferente.

55
00:03:32,100 --> 00:03:36,350
Mas, enquanto antes não achava que isso fosse engraçado agora, lembra.

56
00:03:36,350 --> 00:03:37,740
Pensei que era engraçado.

57
00:03:37,740 --> 00:03:44,250
Então, basicamente, o ponto é quando eu vou para esta página, eu peço isso, você, a Arel Yelp, nem sempre

58
00:03:44,250 --> 00:03:45,650
envia exatamente o mesmo.

59
00:03:45,840 --> 00:03:49,060
Vai descobrir que o usuário está logado.

60
00:03:49,290 --> 00:03:52,600
Se assim for, queremos colocar sua foto de perfil aqui.

61
00:03:52,710 --> 00:03:53,980
Ele votou em qualquer coisa.

62
00:03:54,000 --> 00:03:54,470
Sim.

63
00:03:54,510 --> 00:03:57,990
OK, asseguremos que você saiba que o destacamos corretamente.

64
00:03:58,000 --> 00:03:59,260
Mude a cor.

65
00:03:59,310 --> 00:04:01,530
Não o deixe votar novamente e assim por diante.

66
00:04:01,530 --> 00:04:05,420
E então, isso o constrói, diz e Javascript e o envia de volta.

67
00:04:05,430 --> 00:04:10,150
Então, um outro exemplo de uma página que é definitivamente dinâmica é o Google Notícias.

68
00:04:10,620 --> 00:04:15,330
Toda vez que eu atualizar, quero dizer, quase a cada cinco minutos, alguma coisa muda aqui

69
00:04:15,330 --> 00:04:17,780
se é o clima aqui pontuações da NFL.

70
00:04:17,820 --> 00:04:19,260
Quero dizer, são atualizações ao vivo.

71
00:04:19,290 --> 00:04:23,190
Talvez seja a nova história que as novidades aconteçam.

72
00:04:23,190 --> 00:04:25,590
Isso é muito diferente de cada vez.

73
00:04:25,620 --> 00:04:28,840
No entanto, este é sempre o mesmo.

74
00:04:29,130 --> 00:04:31,020
Então, novamente, a diferença é duas coisas.

75
00:04:31,020 --> 00:04:34,530
Um é uma página estática versus uma página dinâmica.

76
00:04:34,530 --> 00:04:36,650
Ambos são páginas da web.

77
00:04:36,660 --> 00:04:39,920
Ambos são TMLC s s e Javascript está voltando.

78
00:04:40,110 --> 00:04:46,770
Um vai mudar com base em algum tipo de código do lado do servidor algo no back-end.

79
00:04:47,340 --> 00:04:49,600
Então, eu também gosto dessa analogia de um restaurante.

80
00:04:49,740 --> 00:04:52,350
Então, se você ir magicamente a um restaurante, sente-se.

81
00:04:52,380 --> 00:04:58,230
Digamos que você solicite um bife quando encomendar esse bife que está fazendo um pedido que volte para

82
00:04:58,230 --> 00:05:01,060
a cozinha, a cozinha prepara tudo para você.

83
00:05:01,080 --> 00:05:02,350
Essa é uma espécie de back-end.

84
00:05:02,460 --> 00:05:05,710
Ele decide quais ingredientes obterão quanto tempo para cozinhá-los.

85
00:05:05,970 --> 00:05:11,430
Tudo em um prato e depois um garçom ou garçonete vem e traz isso para a sua mesa.

86
00:05:11,430 --> 00:05:12,480
Então, é muito parecido.

87
00:05:12,480 --> 00:05:16,880
Você solicita que o chef ou a cozinha seja o servidor.

88
00:05:17,070 --> 00:05:22,530
e, finalmente, é enviado de volta à sua mesa, que você está no lado do cliente.

89
00:05:22,530 --> 00:05:26,040
Esta parte do iceberg que está preparando tudo cozinhando juntando

90
00:05:27,290 --> 00:05:29,840
Então, vamos quebrar essas três peças envelhecidas.

91
00:05:29,940 --> 00:05:31,610
Diz em Javascript.

92
00:05:32,390 --> 00:05:35,310
Então, vamos entrar em muitos detalhes sobre cada um desses componentes.

93
00:05:35,330 --> 00:05:39,420
Existem seções e unidades separadas, mas HDMI começará lá.

94
00:05:39,530 --> 00:05:43,760
Suporta basicamente linguagem de marcação de hipertexto.

95
00:05:43,760 --> 00:05:44,870
Imagine isso.

96
00:05:44,880 --> 00:05:47,900
E isso é o que realmente aconteceu nos primeiros dias da Internet.

97
00:05:47,960 --> 00:05:53,610
Não havia nenhuma maneira padronizada de enviar informações e enviar documentos.

98
00:05:53,720 --> 00:05:59,810
Então, inicialmente, você sabe que a Internet foi usada para enviar para se comunicar entre universidades e faculdades e

99
00:05:59,820 --> 00:06:01,510
também como uma ferramenta militar.

100
00:06:01,520 --> 00:06:06,040
Então, digamos que queria enviar um desejo de enviar isso para um amigo.

101
00:06:06,560 --> 00:06:10,160
Eu preciso dizer que isso está em negrito.

102
00:06:10,250 --> 00:06:12,170
Estes são pequenos pontos de bala.

103
00:06:12,260 --> 00:06:14,770
Eu tenho algum texto e citações sobre isso.

104
00:06:14,770 --> 00:06:19,240
Eu preciso de uma maneira de quebrar isso e descrevê-lo para enviar para outra pessoa.

105
00:06:19,580 --> 00:06:28,230
E a solução foi HMO, portanto, HMO é, na verdade, a coisa mais fácil que aprenderemos a não dizer que é insano

106
00:06:28,220 --> 00:06:35,390
fácil, mas é muito simples em que descrevemos o que queremos e o que você escreve é ​​o

107
00:06:35,390 --> 00:06:36,450
que você obtém.

108
00:06:36,440 --> 00:06:39,800
Portanto, o HMO é frequentemente referido como o substantivo de uma página da Web.

109
00:06:39,810 --> 00:06:40,830
É a estrutura.

110
00:06:40,820 --> 00:06:48,360
Algumas pessoas dizem que o esqueleto basicamente diz colocar uma imagem aqui colocar um ponto de bala aqui colocar um título aqui colocar

111
00:06:48,360 --> 00:06:50,570
um título ligeiramente menor logo abaixo disso.

112
00:06:50,570 --> 00:06:58,350
estilo de uma página que eu preciso da HVM, como usar a avaliação CSSA por conta própria, na verdade, não faz nada.

113
00:06:58,340 --> 00:07:04,720
Isso permite que você descreva a estrutura de uma página CSSA, por outro lado, é como descrevemos o

114
00:07:04,740 --> 00:07:10,540
Toda página web tem HMO algumas páginas da web não possuem C S S Alguns não possuem javascript.

115
00:07:10,540 --> 00:07:11,620
Não é obrigatório.

116
00:07:11,700 --> 00:07:18,350
H Tim L é tão c s s que as folhas de estilo em cascata aprenderão exatamente de onde esse nome vem e

117
00:07:18,360 --> 00:07:18,990
um pouco.

118
00:07:19,010 --> 00:07:26,030
Basicamente, são estilos HMO existentes para que você possa dizer coisas como fazer todos esses pontos de bala em verde.

119
00:07:26,150 --> 00:07:32,980
Dê a primeira imagem uma borda amarela dê à última imagem uma grande margem rosa com traços através dela.

120
00:07:33,000 --> 00:07:39,110
Muitas vezes, são considerados os adjetivos de uma página da web ou algumas pessoas diriam a pele ao H. T. aqui é javascript.

121
00:07:39,360 --> 00:07:44,000
um esqueleto masculino e a última peça

122
00:07:44,000 --> 00:07:49,170
Javascript provavelmente é definitivamente o mais complexo desses três.

123
00:07:49,380 --> 00:07:52,940
É como adicionamos Bahjat e interatividade a uma página.

124
00:07:53,210 --> 00:07:58,940
Então, conosco e Javascript, podemos criar um site bonito, mas não vai fazer nada realmente,

125
00:07:58,940 --> 00:08:02,830
podemos fazer animações simples, mas podemos carregar dados de outro lugar.

126
00:08:02,830 --> 00:08:08,150
Você não pode tornar as coisas interativas, não podemos adicionar lógica ou ter um jogo com javascript, podemos

127
00:08:08,150 --> 00:08:13,650
usar alguns dos exemplos que tenho aqui ou fazer alguma mudança de matemática quando o usuário clicar na carga.

128
00:08:13,640 --> 00:08:15,900
Novos dados do Twitter recebem o clima atual.

129
00:08:15,890 --> 00:08:17,640
Os resultados atuais da NFL.

130
00:08:17,730 --> 00:08:25,730
Se h tim L é o substantivo C Ss é o adjetivo, em seguida, javascript é que os verbos são as ações em uma página.

131
00:08:26,330 --> 00:08:33,400
Então eu tenho tudo bem envolvido em um código e, portanto, a caneta de código é uma visão maravilhosa.

132
00:08:33,410 --> 00:08:39,160
Não vamos usar muito, mas não começamos a escrever H-2 ele LCS e Javascript.

133
00:08:39,620 --> 00:08:45,090
Eu vou usar isso como um exemplo e o que isso faz, ele permite que você apenas escreva páginas simples no

134
00:08:45,290 --> 00:08:50,330
navegador, então não temos que usar o texto de linha que acabamos de escrever no navegador e posso compartilhá-lo

135
00:08:50,340 --> 00:08:51,260
muito com você. facilmente.

136
00:08:51,260 --> 00:08:54,900
Eu tenho três seções h TMLC SS e Javascript.

137
00:08:54,980 --> 00:08:58,100
Novamente o código em si não é o que é importante aqui.

138
00:08:58,130 --> 00:08:59,650
São os conceitos.

139
00:09:00,050 --> 00:09:06,710
Então, vamos dar uma olhada e eu realmente vou me livrar dos nossos C-s.

140
00:09:06,870 --> 00:09:11,280
Eu vou me livrar dos meus empregos e você verá o que nos resta.

141
00:09:11,270 --> 00:09:14,490
Material estrutural preto e branco liso.

142
00:09:14,510 --> 00:09:21,890
Estou especificando o meu conteúdo, então essas são minhas palavras e estou envolvendo esse conteúdo em elementos

143
00:09:21,890 --> 00:09:24,270
estruturais específicos, portanto, em H1.

144
00:09:24,530 --> 00:09:26,530
E novamente, esse é um daqueles tempos.

145
00:09:26,580 --> 00:09:28,730
Não se preocupe com a sintaxe específica.

146
00:09:28,910 --> 00:09:32,920
Temos tantos vídeos à frente que vão entrar em detalhes e cada um desses.

147
00:09:33,050 --> 00:09:36,910
Mas basicamente isso está dizendo, faça um grande texto aqui.

148
00:09:36,980 --> 00:09:43,010
Isso está dizendo fazer uma lista e torná-lo item de lista individual que diz: Me faça um ponto de bala e outro que diz

149
00:09:43,010 --> 00:09:47,510
me faça outro ponto de bala e depois faça um botão que diz: Me faça um botão aqui.

150
00:09:47,540 --> 00:09:50,950
Como você pode ver, é só isso é apenas a estrutura.

151
00:09:50,960 --> 00:09:54,110
Então, agora vamos ou nos vejamos de volta.

152
00:09:54,120 --> 00:09:55,970
Você pode ver o que estou fazendo aqui, estou dizendo.

153
00:09:56,120 --> 00:10:03,750
Faça o H-1 que está aqui torná-lo roxo para que possamos mudar isso para ser verde e ele muda para

154
00:10:04,490 --> 00:10:12,830
verde e também estou dizendo que o botão possui uma borda tem uma cor de fundo e uma cor de texto de

155
00:10:13,700 --> 00:10:17,730
branco para que possamos mudar que seja cor de texto verde.

156
00:10:17,780 --> 00:10:20,020
É difícil ver o que muda o verde.

157
00:10:20,120 --> 00:10:26,970
Posso dar uma borda muito maior de 20 pixels que ela poderia ver lá, de modo

158
00:10:26,960 --> 00:10:31,610
que existam adjetivos e a última peça é o nosso Javascript.

159
00:10:31,970 --> 00:10:35,420
Então, sem o javascript, esse botão não faz nada.

160
00:10:35,450 --> 00:10:41,180
Agora, o que fizemos é o JavaScript escrito que diz quando o usuário clica no botão.

161
00:10:41,340 --> 00:10:50,030
Escolha uma cor aleatória e mude a cor de fundo aqui para aquela cor aleatória para que eu possa clicar e eu

162
00:10:50,030 --> 00:10:51,640
obtenho uma cor aleatória.

163
00:10:52,460 --> 00:10:57,800
Então, se eu me livrar desse javascript e tentei fazer isso novamente, nada acontece porque não

164
00:10:57,810 --> 00:10:58,440
tenho verbos.

165
00:10:58,430 --> 00:11:00,410
Somente são substantivos e aditivos.

166
00:11:00,450 --> 00:11:05,840
Apenas o esqueleto estrutural e um pouco de pele no topo, como eu adiciono meu javascript, eu posso adicionar

167
00:11:05,850 --> 00:11:06,520
a lógica.

168
00:11:06,840 --> 00:11:08,300
Então javascript é realmente importante.

169
00:11:08,370 --> 00:11:14,100
Isso não é exatamente o que você faria mais provável em um site de produção real, mas você talvez tenha um

170
00:11:14,100 --> 00:11:16,110
jogo que você possa fazer mine sweeper.

171
00:11:16,130 --> 00:11:19,800
Este pode ser o Facebook, pode ser um formulário para se inscrever para uma página.

172
00:11:19,860 --> 00:11:22,080
Você usa javascript para torná-lo interativo.

173
00:11:22,280 --> 00:11:25,510
Então, novamente eu encorajo você a brincar na caneta de código.

174
00:11:25,640 --> 00:11:28,340
Você tem que ligar para isso e explorar um pouco.

175
00:11:28,350 --> 00:11:30,280
Não há pressa para mover o próximo vídeo.

176
00:11:30,290 --> 00:11:32,960
Tente alterar algumas dessas cores se desejar.

177
00:11:32,960 --> 00:11:34,590
Tente mudar algo disso.

178
00:11:34,640 --> 00:11:36,190
Não se concentre no código.

179
00:11:36,290 --> 00:11:40,020
É divertido brincar, mas não há pressão para entender nada disso.

180
00:11:40,040 --> 00:11:46,060
Além de uma visão geral do nível muito alto do que o HDMI faz o que C S faz e o que o javascript faz.

181
00:11:46,340 --> 00:11:46,630
Certo