1
00:00:00,000 --> 00:00:02,862
>> [Música tocando]

2
00:00:02,862 --> 00:00:10,030

3
00:00:10,030 --> 00:00:11,580
>> DAVID MALAN: Este é CS50.

4
00:00:11,580 --> 00:00:12,880
Este é o início da nona semana.

5
00:00:12,880 --> 00:00:15,797
E isso é o que teria
sido 200 aniversário do Sr. Boole.

6
00:00:15,797 --> 00:00:17,630
Portanto, este é os bolseiros
a quem nós aludiu

7
00:00:17,630 --> 00:00:21,800
bastantes vezes sobre a utilização
Variáveis ​​booleanas verdadeiros e falsos,

8
00:00:21,800 --> 00:00:22,910
1 e 0 e tal.

9
00:00:22,910 --> 00:00:25,270
E este foi o do Google
Homenagem a ele hoje.

10
00:00:25,270 --> 00:00:26,489
Ele teria virado 200.

11
00:00:26,489 --> 00:00:28,280
Então, se você gostaria de
juntar a nós para almoço CS50,

12
00:00:28,280 --> 00:00:30,279
Dê uma olhada no link
no site do curso.

13
00:00:30,279 --> 00:00:33,580
E esses rostos e amigos como
estes esperam por você aqui em Cambridge.

14
00:00:33,580 --> 00:00:35,360
Faces como estes esperam por você em New Haven.

15
00:00:35,360 --> 00:00:37,800
E, de fato, Ken em
New Haven para os nadadores feitas

16
00:00:37,800 --> 00:00:41,594
o que é chamado um GIF animado de Eli
aqui em uma recente lunch-- um GIF é ainda

17
00:00:41,594 --> 00:00:44,260
outro formato de arquivo gráfico,
com o qual você está familiar-- que

18
00:00:44,260 --> 00:00:46,300
parece um pouco algo como isto.

19
00:00:46,300 --> 00:00:48,179
Portanto, apenas uma sequência de-- OK.

20
00:00:48,179 --> 00:00:49,720
Ninguém aqui em Cambridge está rindo.

21
00:00:49,720 --> 00:00:51,720
Mas em New Haven, este
é muito engraçado, né?

22
00:00:51,720 --> 00:00:52,350
Tudo certo.

23
00:00:52,350 --> 00:00:53,940
>> Portanto, se juntar a nós lá.

24
00:00:53,940 --> 00:00:55,900
Aqui em Harvard,
especificamente, esta quarta-feira,

25
00:00:55,900 --> 00:00:59,480
se você é um estudante de segundo ano de calouro ou even--
ou mesmo pensamento junior-- de tomada de

26
00:00:59,480 --> 00:01:01,563
um interruptor no computador
ciência, saber que haverá

27
00:01:01,563 --> 00:01:04,440
ser um CS aconselhando justo este
Quarta-feira, logo depois da aula

28
00:01:04,440 --> 00:01:08,040
às 4:00 PM no computador
prédio de ciências Maxwell Dworkin.

29
00:01:08,040 --> 00:01:11,890
Vamos colocar isso no curso de
website amanhã, também.

30
00:01:11,890 --> 00:01:14,430
Donuts, me disseram, será servido.

31
00:01:14,430 --> 00:01:15,180
>> Tudo certo.

32
00:01:15,180 --> 00:01:18,790
Story-- tão engraçado eu estava cutucando
em torno da internet,

33
00:01:18,790 --> 00:01:23,575
e eu encontrei alguns arquivos antigos
do meu antigo site.

34
00:01:23,575 --> 00:01:25,950
E verifica-se em torno deste out--
tempo, parece muito oportuna

35
00:01:25,950 --> 00:01:28,910
desde Percebi que as eleições de UC
está prestes a acelerar o ritmo novamente.

36
00:01:28,910 --> 00:01:32,230
Então eu corri para UC, perdeu miseravelmente.

37
00:01:32,230 --> 00:01:34,770
E talvez isso foi em parte o porquê.

38
00:01:34,770 --> 00:01:37,600
Portanto, este foi o meu site no momento.

39
00:01:37,600 --> 00:01:40,477
Por alguma razão, eu pensei que era
uma boa idéia, antes de dizer às pessoas

40
00:01:40,477 --> 00:01:43,310
o que minha plataforma era e por que eles
devem votar em mim, que eles têm

41
00:01:43,310 --> 00:01:47,770
clicar para entrar para descobrir que
informações, que, em retrospecto, é

42
00:01:47,770 --> 00:01:48,660
tipo de assustador.

43
00:01:48,660 --> 00:01:50,910
Eu realmente não sei o que era.

44
00:01:50,910 --> 00:01:53,140
>> Mas certamente não fez
ajudar a minha campanha.

45
00:01:53,140 --> 00:01:56,874
Eu também achei que por sênior
ano-- eu tive este calendário Muppet.

46
00:01:56,874 --> 00:01:58,540
Muppets foram tipo de em voga na época.

47
00:01:58,540 --> 00:01:59,456
Ou talvez eles não estavam.

48
00:01:59,456 --> 00:02:01,790
Eu tinha um calendário Muppet naquela época.

49
00:02:01,790 --> 00:02:04,860
E eu pensei que seria legal para nome
meu computador na rede da Harvard

50
00:02:04,860 --> 00:02:07,460
frogman.student.harvard.edu.

51
00:02:07,460 --> 00:02:10,370
Na época, todos nós tivemos com exclusividade
nomes de host identificáveis.

52
00:02:10,370 --> 00:02:13,150
E você poderia escolher alguma vaidade
em vez de nomear o seu próprio nome.

53
00:02:13,150 --> 00:02:15,580
E eu fui com frogman por algum motivo.

54
00:02:15,580 --> 00:02:19,040
>> E então eu started-- Passei muito
de tempo clicando através dessas ligações

55
00:02:19,040 --> 00:02:20,280
esta manhã.

56
00:02:20,280 --> 00:02:24,690
E esta foi a minha página sobre,
que agora parece tipo de adorável.

57
00:02:24,690 --> 00:02:28,210
Mas também atesta apenas
o quanto a tecnologia chegou.

58
00:02:28,210 --> 00:02:30,310
Quero dizer, de volta ao dia,
um 486 era alguma coisa.

59
00:02:30,310 --> 00:02:34,090
Estes dias, é super, super,
super slow e bem menos

60
00:02:34,090 --> 00:02:36,216
do que você pode ter em seu
próprios bolsos estes dias.

61
00:02:36,216 --> 00:02:38,465
Há mais lá que
foi ainda mais embaraçoso.

62
00:02:38,465 --> 00:02:39,770
Então, eu vou deixar por isso mesmo.

63
00:02:39,770 --> 00:02:42,640
Mas essa foi a minha primeira
incursão web-- oh, não.

64
00:02:42,640 --> 00:02:43,180
Isso não era.

65
00:02:43,180 --> 00:02:47,000
Minha primeira incursão real para programação web
foi neste site, que eu esqueci.

66
00:02:47,000 --> 00:02:50,620
Em algum ponto, eu aprendi a
tornar repetitivas imagens de fundo.

67
00:02:50,620 --> 00:02:55,260
E assim que eu encontrei esta telha eficaz,
como jogador de hóquei, futebol e golfe

68
00:02:55,260 --> 00:02:58,040
bola, ou o que quer que seja
para o site do Frosh IMs.

69
00:02:58,040 --> 00:03:01,390
E isso era realmente, verdadeiramente a
primeiro projeto baseado na web que eu tomei on--

70
00:03:01,390 --> 00:03:03,880
Eu acho que talvez estudante de segundo ano
ano, ano-- júnior

71
00:03:03,880 --> 00:03:07,622
depois de tomar CS50 e CS51, um
das classes follow-on comuns.

72
00:03:07,622 --> 00:03:09,330
Notei no olhar
através dos arquivos

73
00:03:09,330 --> 00:03:12,150
que um dos meus sucessores e
amigos, Lee, meio que mudou

74
00:03:12,150 --> 00:03:13,480
dos direitos de autor para si mesmo.

75
00:03:13,480 --> 00:03:17,520
Mas isso era de fato algo que
I deve possuir o constrangimento para.

76
00:03:17,520 --> 00:03:19,370
Mas, na época, este
foi o primeiro site,

77
00:03:19,370 --> 00:03:22,220
como eu disse, há algumas semanas,
pelo qual calouro poderia

78
00:03:22,220 --> 00:03:24,350
registrar-se para esportes internos aqui.

79
00:03:24,350 --> 00:03:27,950
E assim ele sair
que imagens de fundo

80
00:03:27,950 --> 00:03:29,530
assim não são uma boa idéia.

81
00:03:29,530 --> 00:03:31,840
Mas a web era novo, e
estávamos todos a experimentar.

82
00:03:31,840 --> 00:03:34,310
E é isso que eu
aparentemente fez na época.

83
00:03:34,310 --> 00:03:34,810
Tudo certo.

84
00:03:34,810 --> 00:03:38,020
Assim, sem mais delongas, vamos alternar
Engrenagens hoje para lhe dar, realmente,

85
00:03:38,020 --> 00:03:42,250
a última peça que você pode encontrar
especialmente útil para projetos finais

86
00:03:42,250 --> 00:03:44,780
mas também que vai começar a
fazer o wide web mundo inteiro

87
00:03:44,780 --> 00:03:46,680
sentir um pouco mais compreensível.

88
00:03:46,680 --> 00:03:49,460
Na verdade, nós estamos indo para introduzir
mais uma linguagem de programação

89
00:03:49,460 --> 00:03:52,474
chamado de JavaScript que é semelhante
e diferente de maneiras diferentes

90
00:03:52,474 --> 00:03:54,140
a partir de linguagens nós olhamos até agora.

91
00:03:54,140 --> 00:03:55,807
>> Então C, recall, é esta linguagem compilada.

92
00:03:55,807 --> 00:03:57,473
Você tem que executá-lo através de um compilador.

93
00:03:57,473 --> 00:03:59,810
Você obtém o código fonte de oposição
código, ou zeros e uns.

94
00:03:59,810 --> 00:04:03,000
E aqueles são zeros e uns que
sua CPU, Central Processing Unit,

95
00:04:03,000 --> 00:04:04,360
realmente entender.

96
00:04:04,360 --> 00:04:06,610
PHP, por contraste, não é
uma linguagem compilada.

97
00:04:06,610 --> 00:04:08,772
É uma coisa?

98
00:04:08,772 --> 00:04:09,980
É uma linguagem interpretada.

99
00:04:09,980 --> 00:04:11,750
Portanto, há algum programa
chamado um interpretador que

100
00:04:11,750 --> 00:04:13,708
tem de ler ele-- cima para
baixo, da esquerda para direita--

101
00:04:13,708 --> 00:04:16,519
e descobrir o que todos
sua sintaxe faz e significa,

102
00:04:16,519 --> 00:04:20,200
quer se trate de um loop ou uma condição
ou qualquer outro número de programação

103
00:04:20,200 --> 00:04:20,740
constrói.

104
00:04:20,740 --> 00:04:22,210
Então essa é uma linguagem interpretada.

105
00:04:22,210 --> 00:04:23,910
>> Então, nós introduzimos HTML.

106
00:04:23,910 --> 00:04:26,440
E HTML não é mesmo um
linguagem de programação.

107
00:04:26,440 --> 00:04:28,110
Nós chamá-lo o que?

108
00:04:28,110 --> 00:04:31,650
Uma linguagem de marcação, que é apenas
uma espécie de maneira elegante de dizer que

109
00:04:31,650 --> 00:04:35,820
não tem programação construções como
vimos até mesmo para trás no dia do Scratch.

110
00:04:35,820 --> 00:04:36,720
Não há lacetes.

111
00:04:36,720 --> 00:04:37,920
Não há condições.

112
00:04:37,920 --> 00:04:40,820
É realmente uma linguagem
sobre a marcação de seus dados

113
00:04:40,820 --> 00:04:43,620
e formatá-lo ou
estruturando-o de alguma forma.

114
00:04:43,620 --> 00:04:46,147
>> CSS, por sua vez, da mesma forma
não uma linguagem de programação.

115
00:04:46,147 --> 00:04:47,730
É ainda mais esteticamente orientada.

116
00:04:47,730 --> 00:04:50,470
E isso permite classificar de afinar
coisas como o tamanho e as cores da pia batismal

117
00:04:50,470 --> 00:04:51,850
e colocação e tudo isso.

118
00:04:51,850 --> 00:04:52,370
Então nós tivemos

119
00:04:52,370 --> 00:04:53,160
>> SQL.

120
00:04:53,160 --> 00:04:56,010
Então SQL é de fato uma programação
língua, em certo sentido,

121
00:04:56,010 --> 00:04:59,330
embora sob medida
especificamente a bases de dados.

122
00:04:59,330 --> 00:05:03,347
Mas mesmo que tenha apenas apresentá-lo a
selecionar e inserir e excluir e atualizar

123
00:05:03,347 --> 00:05:05,430
e um par de outros,
Acontece que você pode realmente

124
00:05:05,430 --> 00:05:07,380
funções ou escrever
procedimentos, como eles são

125
00:05:07,380 --> 00:05:11,270
chamado, em SQL que olhar e agir
bem como funções PHP e C.

126
00:05:11,270 --> 00:05:12,390
Então saiba que aqueles existe.

127
00:05:12,390 --> 00:05:15,348
Mas nós nem sequer se preocupar com eles
como acabamos de arranhar a superfície aqui.

128
00:05:15,348 --> 00:05:18,600
E então JavaScript, o último dos
nossas línguas formalmente apresentado.

129
00:05:18,600 --> 00:05:21,029
Então JavaScript, também, é
uma linguagem interpretada.

130
00:05:21,029 --> 00:05:23,070
E os que estão familiarizados, fazer
você quer para distingui-lo

131
00:05:23,070 --> 00:05:26,960
com alguma característica
de ambos C e PHP?

132
00:05:26,960 --> 00:05:28,300
O que o torna diferente?

133
00:05:28,300 --> 00:05:29,650
>> AUDIÊNCIA: Não é compilado.

134
00:05:29,650 --> 00:05:29,930
>> DAVID MALAN: Diga outra vez?

135
00:05:29,930 --> 00:05:31,200
>> AUDIÊNCIA: Não é compilado.

136
00:05:31,200 --> 00:05:31,930
>> DAVID MALAN: Não é compilado.

137
00:05:31,930 --> 00:05:33,450
Por isso, também, é interpretada.

138
00:05:33,450 --> 00:05:34,760
Portanto, não é compilado.

139
00:05:34,760 --> 00:05:37,210
Mas isso faz com que seja um pouco como PHP.

140
00:05:37,210 --> 00:05:39,545
Mas ainda é diferente do
PHP de alguma maneira marcante,

141
00:05:39,545 --> 00:05:40,920
pelo menos na forma como vamos usá-lo.

142
00:05:40,920 --> 00:05:41,205
Sim?

143
00:05:41,205 --> 00:05:41,940
>> AUDIÊNCIA: Corre-se do lado do cliente.

144
00:05:41,940 --> 00:05:44,000
>> DAVID MALAN: Ele é executado
do lado do cliente, normalmente.

145
00:05:44,000 --> 00:05:47,190
Isso é de fato o distintivo
característica para nós agora.

146
00:05:47,190 --> 00:05:51,170
C foi do lado do servidor no sentido
que fizemos tudo em CS50 IDE.

147
00:05:51,170 --> 00:05:53,630
PHP até agora tem sido
do lado do servidor, na medida

148
00:05:53,630 --> 00:05:56,550
como, também, recebe interpreted--
não compilado, mas interpreted--

149
00:05:56,550 --> 00:06:00,690
dentro CS50 IDE, o que obviamente é
apenas um servidor ou servidores na nuvem.

150
00:06:00,690 --> 00:06:03,070
>> Mas JavaScript, mesmo
se você você está indo

151
00:06:03,070 --> 00:06:07,000
para começar a escrevê-lo para, digamos, pset
oito e talvez última projects-- você é

152
00:06:07,000 --> 00:06:09,620
indo para a direita, em
CS50 IDE e salve-

153
00:06:09,620 --> 00:06:14,760
em arquivos dentro de IDE CS50, CS50 IDE
e, por sua vez, os servidores em nuvem

154
00:06:14,760 --> 00:06:19,160
em que ele está hospedado, não vão
para interpretar ou executar seu código.

155
00:06:19,160 --> 00:06:23,880
Em vez disso, ele vai ser enviado em
forma inalterada até o browser.

156
00:06:23,880 --> 00:06:26,990
E é então vai ser IE
ou Chrome ou Firefox ou Safari

157
00:06:26,990 --> 00:06:30,697
ou seja lá o que, na verdade, interpreta
ele, de cima para baixo, da esquerda para a direita.

158
00:06:30,697 --> 00:06:32,780
Assim, a distinção chave
característica para hoje

159
00:06:32,780 --> 00:06:36,110
é que é JavaScript do lado do cliente
e PHP, por exemplo,

160
00:06:36,110 --> 00:06:37,690
tem sido do lado do servidor.

161
00:06:37,690 --> 00:06:40,920
Agora, isso tem implicações interessantes
para, assim, propriedade intelectual

162
00:06:40,920 --> 00:06:42,660
e quem pode realmente ver seu código.

163
00:06:42,660 --> 00:06:44,860
E, de fato, você pode ir
na Web e veja mais

164
00:06:44,860 --> 00:06:47,530
qualquer código que alguém tem
escrito em JavaScript.

165
00:06:47,530 --> 00:06:50,230
Às vezes é legível,
às vezes é ofuscado.

166
00:06:50,230 --> 00:06:52,550
Mas mais sobre isso no devido tempo.

167
00:06:52,550 --> 00:06:57,530
>> Então JavaScript, bem o suficiente, é
Super semelhante, sintacticamente, a C.

168
00:06:57,530 --> 00:06:59,364
E bem como PHP,
não há nenhuma função principal.

169
00:06:59,364 --> 00:07:02,113
Se você quer começar a escrever
Código de JavaScript, como você vai ver hoje,

170
00:07:02,113 --> 00:07:03,270
você acabou de começar a escrevê-lo.

171
00:07:03,270 --> 00:07:06,910
Mas é, você vai ver, particularmente
útil no contexto de navegadores web.

172
00:07:06,910 --> 00:07:09,820
No entanto, a minha pequena
disclaimer-- geralmente earlier--

173
00:07:09,820 --> 00:07:13,790
foi dizer que você pode cada vez mais
uso hoje server-side JavaScript

174
00:07:13,790 --> 00:07:17,655
usando uma estrutura de fantasia chamado Node.js
que algumas das aplicações próprias do CS50

175
00:07:17,655 --> 00:07:18,280
são escritos no.

176
00:07:18,280 --> 00:07:20,640
Confira 50 realmente usa Node.js.

177
00:07:20,640 --> 00:07:24,140
Mas nós estamos indo focalizar em
JavaScript do lado do cliente daqui em diante.

178
00:07:24,140 --> 00:07:26,750
>> Então aqui está um conjunto de condições em PHP.

179
00:07:26,750 --> 00:07:29,350
Desculpe, em-- na verdade, que
declaração também está correto.

180
00:07:29,350 --> 00:07:32,200
Aqui também é um conjunto de
condições em JavaScript.

181
00:07:32,200 --> 00:07:35,560
Sintacticamente, é
idêntica a C e para o PHP.

182
00:07:35,560 --> 00:07:39,040
Expressões do Sr. Boole são,
Da mesma forma, sintacticamente

183
00:07:39,040 --> 00:07:41,190
idêntico para ambos C e PHP.

184
00:07:41,190 --> 00:07:44,100
Temos também switches
JavaScript que parecem idênticos.

185
00:07:44,100 --> 00:07:46,350
Temos para loops que são
estruturadas de forma idêntica,

186
00:07:46,350 --> 00:07:48,140
enquanto loops, fazer enquanto loops.

187
00:07:48,140 --> 00:07:49,980
>> Essa é um pouco diferente.

188
00:07:49,980 --> 00:07:53,120
PHP tinha a para cada constructo
que você pode estar usando

189
00:07:53,120 --> 00:07:55,320
ou vai usar em pset sete, talvez.

190
00:07:55,320 --> 00:07:59,460
JavaScript tem esta versão especial do
para onde você literalmente dizer alguma coisa

191
00:07:59,460 --> 00:08:03,864
como para a chave variável em objeto, que
é uma maneira muito sucinta de dizer:

192
00:08:03,864 --> 00:08:06,780
se eu tenho um object-- e nós vamos
falar sobre estes novamente em um moment--

193
00:08:06,780 --> 00:08:10,370
e eu quero fazer uma iteração sobre todos
dos pares de valores-chave dentro,

194
00:08:10,370 --> 00:08:13,620
Eu não tenho que descobrir como
índice numericamente los com zero, um,

195
00:08:13,620 --> 00:08:14,580
dois três.

196
00:08:14,580 --> 00:08:15,900
>> Eu posso dizer isso literalmente.

197
00:08:15,900 --> 00:08:20,740
E em cada iteração, JavaScript
para mim vai atualizar a chave variável

198
00:08:20,740 --> 00:08:24,810
para ser a primeira chave, em seguida, a tecla seguinte,
em seguida, a próxima chave, então a próxima chave,

199
00:08:24,810 --> 00:08:25,510
e assim por diante.

200
00:08:25,510 --> 00:08:30,000
E eu posso conseguir pelo seu valor por tratamento
um objeto em JavaScript, como veremos,

201
00:08:30,000 --> 00:08:32,584
como se fosse um
matriz associativa em PHP.

202
00:08:32,584 --> 00:08:35,750
Na verdade, se você finalmente envolto seu
mente em torno do que uma matriz associativa é

203
00:08:35,750 --> 00:08:40,140
em PHP, você pode pensar nisso por enquanto como
idêntico a um objeto em JavaScript.

204
00:08:40,140 --> 00:08:42,030
Mas isso é um pouco de
uma simplificação exagerada.

205
00:08:42,030 --> 00:08:47,230
>> Arrays olhar, bem o suficiente, idêntico
para o PHP com exceção de um personagem.

206
00:08:47,230 --> 00:08:51,425
Há uma coisa que falta aqui
que nós vimos na semana passada com PHP.

207
00:08:51,425 --> 00:08:52,050
O que está omitido?

208
00:08:52,050 --> 00:08:53,310
Sim?

209
00:08:53,310 --> 00:08:54,090
Sem sinal de dólar.

210
00:08:54,090 --> 00:08:56,240
Então, nós estamos de volta a um
mais mundo normal onde

211
00:08:56,240 --> 00:08:58,050
variáveis ​​não têm cifrões.

212
00:08:58,050 --> 00:09:00,810
Mas você prefixar-los
com var, normalmente.

213
00:09:00,810 --> 00:09:02,230
E var significa variável.

214
00:09:02,230 --> 00:09:06,440
E muito parecido com PHP é vagamente
typed-- em que existem tipos,

215
00:09:06,440 --> 00:09:10,120
existem números e strings
e carros alegóricos e assim forth--

216
00:09:10,120 --> 00:09:11,570
JavaScript semelhante tem tipos.

217
00:09:11,570 --> 00:09:15,470
Mas é vagamente digitado em que o
os programadores não têm que especificá-los.

218
00:09:15,470 --> 00:09:18,980
Nós apenas temos que estar cientes
que existem diferentes tipos.

219
00:09:18,980 --> 00:09:21,690
>> Variáveis, meanwhile-- aqui está como
podemos declarar "Olá, mundo"

220
00:09:21,690 --> 00:09:22,230
como uma string.

221
00:09:22,230 --> 00:09:24,890
Observe que é idêntico ao
PHP mas nenhum sinal de dólar.

222
00:09:24,890 --> 00:09:27,120
E isso é algo que vamos
começar a ver mais hoje,

223
00:09:27,120 --> 00:09:30,990
em que você tem um objeto
com chaves e valores.

224
00:09:30,990 --> 00:09:32,990
E se você quiser tentar
deduzir última week--

225
00:09:32,990 --> 00:09:34,730
a sintaxe é um pouco diferente.

226
00:09:34,730 --> 00:09:39,740
Mas um pouco de sanidade check-- quantas
chaves que este objeto parece ter?

227
00:09:39,740 --> 00:09:40,850
Então eu vejo quatro.

228
00:09:40,850 --> 00:09:43,560
Eu vejo dois.

229
00:09:43,560 --> 00:09:44,680
>> Portanto, é na verdade dois.

230
00:09:44,680 --> 00:09:47,260
Portanto, esta é uma coleção
de dois pares de valores-chave.

231
00:09:47,260 --> 00:09:49,820
A chave é símbolo cujo valor é FB.

232
00:09:49,820 --> 00:09:52,620
A chave é o preço cujo valor é 101,53.

233
00:09:52,620 --> 00:09:54,230
Então esses são dois pares de valores-chave.

234
00:09:54,230 --> 00:09:58,120
E lembre-se, PHP-- e esta é mais uma vez
apenas uma espécie de diferença sintática.

235
00:09:58,120 --> 00:10:00,170
Não é tudo o que
intelectualmente interessante.

236
00:10:00,170 --> 00:10:04,610
PHP poderia ter escrito este mesmo
coisa como citações follows--, é igual.

237
00:10:04,610 --> 00:10:06,730
E eu mudar estes para colchetes.

238
00:10:06,730 --> 00:10:11,240
E então eu mudar isso para
uma palavra citada, "preço".

239
00:10:11,240 --> 00:10:12,500
E então eu não utilizar os dois pontos.

240
00:10:12,500 --> 00:10:15,060
O que eu uso na semana passada?

241
00:10:15,060 --> 00:10:18,290
Sim, o sinal de igual
arrow notação descolados.

242
00:10:18,290 --> 00:10:21,470
>> E então eu fiz a mesma coisa aqui.

243
00:10:21,470 --> 00:10:23,580
A mesma coisa aqui.

244
00:10:23,580 --> 00:10:24,240
E isso é tudo.

245
00:10:24,240 --> 00:10:27,752
Por isso é bom se isso não tem
realmente afundado em memória apenas para

246
00:10:27,752 --> 00:10:29,960
ainda porque é realmente
intelectualmente desinteressante.

247
00:10:29,960 --> 00:10:31,660
É apenas diferenças sintáticas.

248
00:10:31,660 --> 00:10:33,230
Mas as idéias são exatamente os mesmos.

249
00:10:33,230 --> 00:10:35,910
Dentro desta variável
Citação em JavaScript

250
00:10:35,910 --> 00:10:39,020
é uma coleção de pares chave-valor,
uma das quais é símbolo, uma das quais

251
00:10:39,020 --> 00:10:39,690
é o preço.

252
00:10:39,690 --> 00:10:42,340
E eu posso chegar a esses valores
com a seguinte sintaxe.

253
00:10:42,340 --> 00:10:46,280
Assim como em PHP, pude
fazer algo como-- deixá

254
00:10:46,280 --> 00:10:48,590
me fazer esta caixa um pouco maior.

255
00:10:48,590 --> 00:10:52,750
Assim como em PHP, pude
fazer isto-- oh, caramba.

256
00:10:52,750 --> 00:10:53,250
Vamos.

257
00:10:53,250 --> 00:10:56,350

258
00:10:56,350 --> 00:11:00,800
>> Assim como em PHP-- OK, vamos
basta usar as notas do apresentador.

259
00:11:00,800 --> 00:11:06,010
Assim como em PHP, eu posso
fazer $ citação ["simbolo"] Citação $,

260
00:11:06,010 --> 00:11:08,860
e isso vai me levar
o valor de "símbolo".

261
00:11:08,860 --> 00:11:12,800
Em JavaScript, que vai ser
idêntica, pelo que eu só posso fazer isso.

262
00:11:12,800 --> 00:11:14,850
A única coisa que é
falta é o sinal de dólar.

263
00:11:14,850 --> 00:11:17,470
>> Tão bem o suficiente, então, não há
não tudo o que muito nova sintaxe.

264
00:11:17,470 --> 00:11:21,025
Então, o que hoje vamos nos concentrar em, realmente, é
algumas das idéias e das aplicações.

265
00:11:21,025 --> 00:11:22,900
E a primeira, tais
aplicativo que você pode

266
00:11:22,900 --> 00:11:26,090
ter visto se você mergulhou pset
sete já é esta sintaxe.

267
00:11:26,090 --> 00:11:28,980
Assim, em pset sete, se você tiver
viu ou não viu ainda,

268
00:11:28,980 --> 00:11:33,570
sei que há um arquivo que damos
você chamou config.json-- JavaScript

269
00:11:33,570 --> 00:11:34,661
Objeto Notation.

270
00:11:34,661 --> 00:11:35,160
Por quê?

271
00:11:35,160 --> 00:11:39,540
Queríamos ser capaz de fornecê-lo com
um modelo com alguns pares de valores-chave.

272
00:11:39,540 --> 00:11:44,290
Queríamos ser capaz de lhe dar uma lista
do hospedeiro, o nome do servidor.

273
00:11:44,290 --> 00:11:46,710
Queríamos dar-lhe uma
espaço reservado para seu nome de usuário

274
00:11:46,710 --> 00:11:48,210
e um espaço reservado para a senha.

275
00:11:48,210 --> 00:11:49,410
Se você não está vendo
isso ainda, não se preocupe.

276
00:11:49,410 --> 00:11:51,340
Mais sobre isso em sete pset
[? spec. ?] E depois,

277
00:11:51,340 --> 00:11:53,173
Obviamente, nós queremos que você
para preencher a to-dos

278
00:11:53,173 --> 00:11:55,310
porque quando você entrar em
CS50 IDE, cada um de vocês

279
00:11:55,310 --> 00:11:57,630
ter o seu próprio nome de usuário e senha.

280
00:11:57,630 --> 00:12:00,910
>> Então nós poderíamos ter usado uma meia dúzia
ou mais formatos de arquivos diferentes.

281
00:12:00,910 --> 00:12:02,940
Poderíamos ter utilizado um arquivo .txt.

282
00:12:02,940 --> 00:12:04,570
Poderíamos utilizar um arquivo CSV.

283
00:12:04,570 --> 00:12:06,745
Nós poderíamos ter usado um
Arquivo INI, um arquivo XML,

284
00:12:06,745 --> 00:12:09,370
um grupo inteiro mais siglas que
você pode não ter já ouvi.

285
00:12:09,370 --> 00:12:11,244
É uma espécie de arbitrário
no fim do dia.

286
00:12:11,244 --> 00:12:16,030
Mas super popular nos dias de hoje é um texto
formato chamado JSON-- JavaScript Object

287
00:12:16,030 --> 00:12:18,460
Notation-- que se parece com isso.

288
00:12:18,460 --> 00:12:20,890
É um pouco enigmática,
mas observar os padrões.

289
00:12:20,890 --> 00:12:24,180
Você começa com um encaracolado aberto
cinta, e que acabam com o mesmo.

290
00:12:24,180 --> 00:12:26,550
Dentro do que é alguma coisa.

291
00:12:26,550 --> 00:12:27,920
É um par chave-valor.

292
00:12:27,920 --> 00:12:30,580
Portanto, este é um objeto que eu sou
olhando na tela aqui

293
00:12:30,580 --> 00:12:33,690
que tem uma chave, que tem um valor.

294
00:12:33,690 --> 00:12:37,610
E apenas inferir com base no
padrão anterior, o que é a chave aqui?

295
00:12:37,610 --> 00:12:39,790
Banco de dados, a coisa a
do lado esquerdo do cólon.

296
00:12:39,790 --> 00:12:43,500
>> Agora, o valor passa a ser
um várias linhas neste momento.

297
00:12:43,500 --> 00:12:46,760
Mas o valor começa com um encaracolado
cinta e termina com uma chaveta.

298
00:12:46,760 --> 00:12:49,480
Então, o que você propõe é a
Tipo do valor do banco de dados?

299
00:12:49,480 --> 00:12:52,160

300
00:12:52,160 --> 00:12:54,670
Um dicionário ou, apenas mais
sucintamente, um objeto.

301
00:12:54,670 --> 00:12:55,170
Certo?

302
00:12:55,170 --> 00:13:00,010
Este é um tipo de estrutura de dados que
pode utilizar outras estruturas dentro de si.

303
00:13:00,010 --> 00:13:02,750
Então, se essa coisa toda que estamos
chamando um object-- e um objeto

304
00:13:02,750 --> 00:13:07,101
é apenas um monte de valor-chave da pairs--
valor do próprio banco de dados é um objeto.

305
00:13:07,101 --> 00:13:10,350
O valor de banco de dados tem um grupo inteiro
de pares de valores de chave, o primeiro dos quais

306
00:13:10,350 --> 00:13:13,130
é anfitrião, em seguida, nomeie, em seguida,
nome de usuário, senha, em seguida,

307
00:13:13,130 --> 00:13:17,550
cada um de cujos valores, entretanto, é
apenas uma seqüência chato entre aspas duplas.

308
00:13:17,550 --> 00:13:19,770
>> Assim, mesmo que isso não é
super claro ainda,

309
00:13:19,770 --> 00:13:22,740
sabemos que este é apenas um
padrão, forma bastante chato

310
00:13:22,740 --> 00:13:25,190
de armazenar dados em um formato padrão.

311
00:13:25,190 --> 00:13:27,700
Mas os erros comuns que você
pode fazer, mesmo em pset sete,

312
00:13:27,700 --> 00:13:32,120
são pequenas coisas estúpidas, como se você
acidentalmente omitir a vírgula lá.

313
00:13:32,120 --> 00:13:34,900
Isso vai resultar no ficheiro
não necessariamente de ser legível.

314
00:13:34,900 --> 00:13:38,191
Se você omitir acidentalmente coisas como o
citações, não vai ser legível.

315
00:13:38,191 --> 00:13:41,654
Portanto, é um formato de arquivo muito detalhista,
mas é um que é super comum.

316
00:13:41,654 --> 00:13:44,820
E nós acontecer a usá-lo, mesmo que
você não usar qualquer outra forma JavaScript,

317
00:13:44,820 --> 00:13:46,330
em pset sete.

318
00:13:46,330 --> 00:13:46,860
>> Tudo certo.

319
00:13:46,860 --> 00:13:48,110
Então lembre-se este quadro.

320
00:13:48,110 --> 00:13:51,657
Nós conversamos sobre, em HTML, que
o código pode ser como este.

321
00:13:51,657 --> 00:13:54,740
Este é o HyperText Markup Language
[Inaudível] para apenas "Olá, mundo".

322
00:13:54,740 --> 00:13:57,570
Mas, então, propôs uma
tempo atrás que, se isso ajuda,

323
00:13:57,570 --> 00:14:00,210
você pode querer começar a pensar
sobre o já como uma árvore.

324
00:14:00,210 --> 00:14:03,730
Na verdade, o recuo que nós
usar apenas pelo amor de legibilidade

325
00:14:03,730 --> 00:14:05,610
ou por causa do estilo de
a esquerda pode tipo de

326
00:14:05,610 --> 00:14:10,040
ser traduzida para essa árvore, onde você
ter algum nó raiz especial que vamos

327
00:14:10,040 --> 00:14:16,860
genericamente chamado documento, abaixo do qual
é o elemento HTML raiz ou tag, HTML,

328
00:14:16,860 --> 00:14:19,980
que, em seguida, tem dois
crianças, cabeça e corpo.

329
00:14:19,980 --> 00:14:21,750
>> E, em seguida, por sua vez, a cabeça tem um título.

330
00:14:21,750 --> 00:14:23,440
E título tem um valor de texto.

331
00:14:23,440 --> 00:14:26,130
E o corpo tem um valor semelhante texto.

332
00:14:26,130 --> 00:14:29,220
Então, se você está dizendo confortável
que sim, você poderia tomar este HTML

333
00:14:29,220 --> 00:14:32,080
e desenhar um quadro como
isso, o lado direito

334
00:14:32,080 --> 00:14:35,910
é um modelo mental bom porque agora
que temos JavaScript, uma programação

335
00:14:35,910 --> 00:14:39,960
linguagem que os navegadores podem
executar e interpretar para você,

336
00:14:39,960 --> 00:14:42,690
verifica-se que o
estamos prestes a fazer no código

337
00:14:42,690 --> 00:14:45,320
é começar a manipular esta
estrutura de árvore na memória.

338
00:14:45,320 --> 00:14:47,070
Não temos de construir
a árvore em memória.

339
00:14:47,070 --> 00:14:49,880
Nós não temos que fazer uma espécie de
estrutura de dados e cinco estilo pset

340
00:14:49,880 --> 00:14:50,650
complexidade.

341
00:14:50,650 --> 00:14:54,610
O navegador, bem o suficiente, em cima
interpretar HTML topo para baixo,

342
00:14:54,610 --> 00:14:58,600
esquerda ou direita, é, literalmente, indo para
mão-nos o equivalente a um ponteiro

343
00:14:58,600 --> 00:15:00,840
para que árvore inteira de graça.

344
00:15:00,840 --> 00:15:02,150
Ele faz todo o trabalho duro.

345
00:15:02,150 --> 00:15:05,520
Isso é o que a Apple e Mozilla
e outros têm feito para nós.

346
00:15:05,520 --> 00:15:09,400
>> E com JavaScript que vamos
ser capaz de controlar e mudar e fazer

347
00:15:09,400 --> 00:15:12,910
Coisas interessantes para
aquela árvore, também conhecida

348
00:15:12,910 --> 00:15:15,880
como DOM ou Document Object Model.

349
00:15:15,880 --> 00:15:17,110
Que tipo de coisas?

350
00:15:17,110 --> 00:15:19,030
Bem, acontece que
em JavaScript, não há

351
00:15:19,030 --> 00:15:22,800
este rol de
eventos que podem ocorrer.

352
00:15:22,800 --> 00:15:26,330
E nós realmente não tenho usado que
palavra desde semana zero e pset

353
00:15:26,330 --> 00:15:28,240
zero quando falamos sobre Raspadinha.

354
00:15:28,240 --> 00:15:31,390
A maioria de vocês provavelmente não usar
um evento em seu projecto Scratch.

355
00:15:31,390 --> 00:15:33,850
Mas você deve se lembrar
o simples Marco Polo

356
00:15:33,850 --> 00:15:36,760
exemplo, onde tivemos dois
sprites, um dos quais disse Marco.

357
00:15:36,760 --> 00:15:40,180
O outro dos quais, em seguida, ao ouvir
e ouvindo o evento, disse: Polo.

358
00:15:40,180 --> 00:15:42,080
Se não, sinta-se livre para
olhar para trás tão longe para trás.

359
00:15:42,080 --> 00:15:44,450
>> Mas esta é apenas a
dizer, e você pode tipo de

360
00:15:44,450 --> 00:15:47,730
deduzir os nomes destes
coisas, JavaScript, verifica-se,

361
00:15:47,730 --> 00:15:53,200
vai dar-nos uma maneira de ouvir
para mouse indo para baixo ou rato subindo

362
00:15:53,200 --> 00:15:57,920
ou a tecla para baixo ou tecla indo
indo para cima ou onselect onsubmit

363
00:15:57,920 --> 00:15:59,740
onresizing ou algo assim.

364
00:15:59,740 --> 00:16:03,060
Em outras palavras, qualquer ação física
que um ser humano pode levar com um navegador

365
00:16:03,060 --> 00:16:08,210
que você faz todos os dias, você pode escrever
código para que escuta para esses eventos

366
00:16:08,210 --> 00:16:10,220
e depois faz algo apropriado.

367
00:16:10,220 --> 00:16:14,130
>> Por exemplo, se você usar o Google Maps,
o que acontece se você clicar e movimento

368
00:16:14,130 --> 00:16:16,250
o rato, tipicamente?

369
00:16:16,250 --> 00:16:17,758
Se você clicar e arrastar?

370
00:16:17,758 --> 00:16:18,258
Sim?

371
00:16:18,258 --> 00:16:21,701

372
00:16:21,701 --> 00:16:22,200
Exatamente.

373
00:16:22,200 --> 00:16:23,159
O mapa começa a mover-se.

374
00:16:23,159 --> 00:16:25,616
Assim, você pode tipo de ver o que está
aqui, o que está ali.

375
00:16:25,616 --> 00:16:27,130
E como o Google implementar isso?

376
00:16:27,130 --> 00:16:29,421
Bem, presumivelmente, eles são
usando um par destes eventos

377
00:16:29,421 --> 00:16:31,720
ouvintes, que
diz, ouvir no rato

378
00:16:31,720 --> 00:16:35,410
down-- assim quando o usuário fisicamente
empurra o trackpad ou o seu rato

379
00:16:35,410 --> 00:16:36,010
baixa.

380
00:16:36,010 --> 00:16:38,350
E então nós estamos procurando
algo como movimento

381
00:16:38,350 --> 00:16:41,145
ou qualquer outro evento que
nos permite capturar arrasto.

382
00:16:41,145 --> 00:16:45,910
E, na verdade, de arrasto é semelhante neste
ponto ponto dot lista de opções possíveis.

383
00:16:45,910 --> 00:16:49,140
>> Portanto, este vai ser um poderoso
maneira a começar a responder ao utilizador

384
00:16:49,140 --> 00:16:52,824
mesmo antes de ele ou ela clica
algo explícito como enviar.

385
00:16:52,824 --> 00:16:55,240
Mas nós estamos indo para introduzir
um par de temas para chegar lá.

386
00:16:55,240 --> 00:16:58,570
Mas primeiro, vamos transição
para alguns código real.

387
00:16:58,570 --> 00:17:01,450
Então, eu estou indo para ir
em frente e abrir dom-0,

388
00:17:01,450 --> 00:17:05,869
que é um exemplo muito simples
aqui que se eu simplesmente aumentar o zoom

389
00:17:05,869 --> 00:17:08,500
tem esta entrada aqui por mim.

390
00:17:08,500 --> 00:17:12,410
E eu estou indo para ir em frente e digitar
"David" para meu nome e clique em Enviar.

391
00:17:12,410 --> 00:17:17,940
>> E então, embora tipo de barato, I
tem este prompt que aparece que diz:

392
00:17:17,940 --> 00:17:19,244
"Olá, David!"

393
00:17:19,244 --> 00:17:21,740
Portanto, este é o tipo de
como o nosso "Olá, mundo"

394
00:17:21,740 --> 00:17:25,150
que nós fizemos algum tempo atrás em C e
mesmo em PHP, porque eu tenho dinamicamente

395
00:17:25,150 --> 00:17:26,310
emitido o meu nome.

396
00:17:26,310 --> 00:17:28,230
Eu posso fazer nome de outra pessoa aqui.

397
00:17:28,230 --> 00:17:31,240
Eu poderia simplesmente mudar isso para,
como, Hannah, clique em Enviar.

398
00:17:31,240 --> 00:17:33,780
E, de fato, as pequenas mudanças de pop-up.

399
00:17:33,780 --> 00:17:36,650
>> Agora, os pop-ups são um dos
a maioria dos recursos abusadas da web.

400
00:17:36,650 --> 00:17:38,520
E, de fato, de volta
os bloqueadores de pop-up dia

401
00:17:38,520 --> 00:17:40,820
entrou em voga, porque você
iria para algum website--

402
00:17:40,820 --> 00:17:43,604
talvez um Place-- questionável
que, de repente,

403
00:17:43,604 --> 00:17:46,020
iniciar salpicando sua tela
com um monte de pop-ups.

404
00:17:46,020 --> 00:17:49,700
E assim, esta habilidade para pop-up
janelas em frente do utilizador

405
00:17:49,700 --> 00:17:52,372
não tem sido particularmente
bem recebido pela humanidade.

406
00:17:52,372 --> 00:17:54,080
Então é por isso que você vê
este prevenir coisa,

407
00:17:54,080 --> 00:17:55,706
que só faz essa coisa toda feio.

408
00:17:55,706 --> 00:17:57,996
Então, nós vamos precisar de uma
melhor maneira para solicitar ao usuário.

409
00:17:57,996 --> 00:17:59,350
Mas, por agora, que parece funcionar.

410
00:17:59,350 --> 00:18:03,320
Então, só de forma intuitiva, o que
parece estar acontecendo aqui?

411
00:18:03,320 --> 00:18:07,870
I vá em frente e clique em Enviar e
então alguma coisa está acontecendo, de forma clara.

412
00:18:07,870 --> 00:18:12,870
Mas o que não está acontecendo que aconteceu
na semana passada, a qualquer momento eu clicou em Enviar?

413
00:18:12,870 --> 00:18:15,940
O que não aconteceu na tela?

414
00:18:15,940 --> 00:18:17,170
Desculpa?

415
00:18:17,170 --> 00:18:18,010
Recarregar.

416
00:18:18,010 --> 00:18:19,720
O URL não mudou em tudo.

417
00:18:19,720 --> 00:18:22,250
Eu disse que isso era dom-0,
e eu ainda estou no dom-0.

418
00:18:22,250 --> 00:18:26,890
Normalmente, teríamos mudado para algum outro
URL, como register.php ou semelhantes.

419
00:18:26,890 --> 00:18:29,560
>> Mas mesmo quando eu demitir
essa coisa clicando em OK,

420
00:18:29,560 --> 00:18:32,310
notar que o URL
fica completamente parado.

421
00:18:32,310 --> 00:18:35,350
E, de fato, se eu sou um pouco
cético, deixe-me abrir Chrome.

422
00:18:35,350 --> 00:18:36,860
Deixe-me abrir a guia Rede.

423
00:18:36,860 --> 00:18:38,360
E note que é em branco no momento.

424
00:18:38,360 --> 00:18:40,700
Deixe-me ir em frente e reenviar Maria.

425
00:18:40,700 --> 00:18:42,810
Não há nenhum tráfego de rede qualquer.

426
00:18:42,810 --> 00:18:44,320
Portanto, não há HTTP.

427
00:18:44,320 --> 00:18:47,620
>> Então, na verdade, se eu olhar para o código-fonte
para isto-- deixe-me fechar esta janela

428
00:18:47,620 --> 00:18:49,480
e ir para a vista de origem.

429
00:18:49,480 --> 00:18:50,400
Interessante.

430
00:18:50,400 --> 00:18:53,520
Parece que há alguma
novas etiquetas, entre eles script.

431
00:18:53,520 --> 00:18:57,490
Então, vamos dar uma olhada dentro CS50
IDE exatamente o que eu mandei para o usuário.

432
00:18:57,490 --> 00:19:00,690
>> Então, aqui vamos é--
focar apenas o HTML.

433
00:19:00,690 --> 00:19:03,500
Aqui está a metade inferior do dom-0.html.

434
00:19:03,500 --> 00:19:07,830
E note que ele tem um título,
uma marca de cabeça, uma marca do corpo, uma marca de formulário.

435
00:19:07,830 --> 00:19:11,257
Mas o que salta para fora a você como
diferente, especialmente se você nunca

436
00:19:11,257 --> 00:19:12,590
escrito qualquer JavaScript si mesmo.

437
00:19:12,590 --> 00:19:14,920
Deixe-me rolar um pouco
para a direita aqui.

438
00:19:14,920 --> 00:19:18,330
Eu tenho uma entrada,
outra entrada para apresentar.

439
00:19:18,330 --> 00:19:21,410
Eu tenho um ID, que é uma espécie de novo.

440
00:19:21,410 --> 00:19:22,790
Mas fizemos ver isso com CSS.

441
00:19:22,790 --> 00:19:24,480
O que mais é definitivamente novo?

442
00:19:24,480 --> 00:19:24,980
Sim?

443
00:19:24,980 --> 00:19:30,580

444
00:19:30,580 --> 00:19:32,140
Agradável.

445
00:19:32,140 --> 00:19:32,760
>> Tudo certo.

446
00:19:32,760 --> 00:19:35,630
Então, onde ele diz que onsubmit,
observe o que parece seguir.

447
00:19:35,630 --> 00:19:38,740
Este é um atributo
na nomenclatura HTML.

448
00:19:38,740 --> 00:19:40,944
O seu valor é essa seqüência entre aspas aqui.

449
00:19:40,944 --> 00:19:42,860
E isso parece um pouco
estranho à primeira vista.

450
00:19:42,860 --> 00:19:44,050
Não é HTML.

451
00:19:44,050 --> 00:19:45,240
Não é CSS.

452
00:19:45,240 --> 00:19:47,580
Isto é, como você pode imaginar, JavaScript.

453
00:19:47,580 --> 00:19:51,850
Assim, parece que incorporado nesta
A página web é uma função chamada greet.

454
00:19:51,850 --> 00:19:54,250
E eu estou inferindo que apenas
porque é uma palavra, cumprimentar.

455
00:19:54,250 --> 00:19:55,880
Ele tem um parêntese aberto,
paren próximos, ponto e vírgula.

456
00:19:55,880 --> 00:19:58,095
Parece que uma função C,
parece uma função PHP.

457
00:19:58,095 --> 00:20:00,370
>> E, de fato, ele vai
ser uma função JavaScript.

458
00:20:00,370 --> 00:20:01,440
Então eu estou retornando false.

459
00:20:01,440 --> 00:20:03,440
Nós vamos voltar a
que em apenas um momento.

460
00:20:03,440 --> 00:20:05,320
Mas onde é definido esta função?

461
00:20:05,320 --> 00:20:07,950
Bem, deixe-me rolar para cima
ao topo do ficheiro.

462
00:20:07,950 --> 00:20:11,710
E mesmo que seja uma longa linha,
é relativamente simples.

463
00:20:11,710 --> 00:20:15,000
Deixe-me aqui e diminuir o zoom
concentrar-se nesses quatro linhas.

464
00:20:15,000 --> 00:20:17,137
>> Assim, em JavaScript, apenas
como PHP, você só

465
00:20:17,137 --> 00:20:19,720
digamos, literalmente, a palavra "função",
o nome da função,

466
00:20:19,720 --> 00:20:22,700
e, em seguida, com qualquer parênteses
arguments-- sem argumentos neste caso.

467
00:20:22,700 --> 00:20:25,290
E não há nenhum tipo de retorno
em JavaScript, assim como PHP.

468
00:20:25,290 --> 00:20:29,470
Portanto, é um pouco mais flexível do que C.
Abrir chaveta, perto chaveta.

469
00:20:29,470 --> 00:20:33,270
Construído em JavaScript é um function--
não um function-- recomendado

470
00:20:33,270 --> 00:20:35,730
mas uma função chamada alerta
cujo único objectivo na vida

471
00:20:35,730 --> 00:20:38,620
é para puxar para cima que muito feio
solicitar que vimos há pouco.

472
00:20:38,620 --> 00:20:40,950
>> Agora, isso é uma espécie de boca cheia.

473
00:20:40,950 --> 00:20:42,560
Oque esta acontecendo aqui?

474
00:20:42,560 --> 00:20:45,840
Então, vamos começar a
destacar tudo aqui.

475
00:20:45,840 --> 00:20:48,540
Esse é o mesmo argumento para alertar.

476
00:20:48,540 --> 00:20:49,530
E o que está acontecendo?

477
00:20:49,530 --> 00:20:51,200
Isto mais parece uma corda.

478
00:20:51,200 --> 00:20:59,180
E não é que, ao contrário de PHP e ao contrário
C, não importa em JavaScript

479
00:20:59,180 --> 00:21:01,090
se você aspas simples ou duplas.

480
00:21:01,090 --> 00:21:02,060
Eles vão ser equivalente.

481
00:21:02,060 --> 00:21:03,769
E, francamente, é apenas
popular estes dias

482
00:21:03,769 --> 00:21:06,726
para programadores JavaScript para sempre
usar aspas simples, por algum motivo.

483
00:21:06,726 --> 00:21:07,840
É apenas a coisa a fazer.

484
00:21:07,840 --> 00:21:09,710
Mas poderíamos usar aspas duplas, também.

485
00:21:09,710 --> 00:21:11,540
>> Então é mais um novo personagem.

486
00:21:11,540 --> 00:21:14,512
Mas aqueles de vocês que fiz
isso antes, o que mais dizer?

487
00:21:14,512 --> 00:21:16,440
Sim.

488
00:21:16,440 --> 00:21:17,120
Concatenar.

489
00:21:17,120 --> 00:21:18,570
Então, nós vimos isso em PHP.

490
00:21:18,570 --> 00:21:20,315
Não é apenas o ponto
operador em PHP que

491
00:21:20,315 --> 00:21:22,000
irá concatenar duas seqüências juntos.

492
00:21:22,000 --> 00:21:24,000
C era uma dor no pescoço para fazer isso.

493
00:21:24,000 --> 00:21:27,310
Lembre-se do pset seis, que era
uma dor especial no pescoço,

494
00:21:27,310 --> 00:21:29,470
você teria que usar
algo como strcat

495
00:21:29,470 --> 00:21:31,660
após a alocação de memória
na pilha ou a pilha.

496
00:21:31,660 --> 00:21:34,243
Você tinha que saltar através de aros
apenas para concatenar duas strings.

497
00:21:34,243 --> 00:21:36,040
Em JavaScript, é super simples.

498
00:21:36,040 --> 00:21:38,030
Basta usar o operador mais entre eles.

499
00:21:38,030 --> 00:21:41,420
>> Assim, o complexo de aparência
coisa parece ser este

500
00:21:41,420 --> 00:21:43,490
porque, no fim de
Toda essa seqüência, eu só

501
00:21:43,490 --> 00:21:45,797
concatenar em um ponto de exclamação.

502
00:21:45,797 --> 00:21:48,380
Portanto, se o que estava surgindo foi
"Olá, David", "Olá, Hannah,"

503
00:21:48,380 --> 00:21:52,740
"Olá, Maria", e assim por diante, de forma clara
aquela coisa meio entre os dois

504
00:21:52,740 --> 00:21:55,215
trunfos deve me dar acesso a quê?

505
00:21:55,215 --> 00:21:58,855

506
00:21:58,855 --> 00:22:01,991
O que está lá com certeza?

507
00:22:01,991 --> 00:22:02,490
Sim.

508
00:22:02,490 --> 00:22:05,090
Então, eu vou fingir aqui a
responder a seu nome, certo?

509
00:22:05,090 --> 00:22:10,380
Então, seu nome apareceu na final
resultado. Então o que isso quer dizer?

510
00:22:10,380 --> 00:22:15,080
Bem, eu propus anteriormente no que
imagem de que a chamada DOM

511
00:22:15,080 --> 00:22:18,580
tem este elemento raiz especial
subida superior chamado documento.

512
00:22:18,580 --> 00:22:21,660
E agora, ao que parece, isso vai
de ser uma variável global especial

513
00:22:21,660 --> 00:22:25,250
em JavaScript, em que é construído um
todo grupo de funcionalidades úteis.

514
00:22:25,250 --> 00:22:31,770
Entre a funcionalidade útil é a
capacidade de obter em qualquer nó descendente.

515
00:22:31,770 --> 00:22:37,760
Esses quadrados ou retângulos ou elipses
são apenas os nós em uma árvore, por assim dizer.

516
00:22:37,760 --> 00:22:41,850
>> Assim, verifica-se que embutido
Objeto de documento de JavaScript

517
00:22:41,850 --> 00:22:47,300
é uma função, de outro modo conhecida como um
método, que é chamado getElementById.

518
00:22:47,300 --> 00:22:50,410
A sintaxe para chamar
uma função em JavaScript

519
00:22:50,410 --> 00:22:55,220
que está dentro de um objecto ou um
variável é apenas com a notação de ponto.

520
00:22:55,220 --> 00:22:57,950
E nós vimos isso em C
que a sintaxe da estrutura.

521
00:22:57,950 --> 00:23:03,530
Você vê isso em pset sete, espécie de,
mais ou menos, quando você vê CS50 :: consulta.

522
00:23:03,530 --> 00:23:08,070
O cólon cólon em PHP é outro
maneira de chamar uma função que é

523
00:23:08,070 --> 00:23:09,260
dentro de algum objeto.

524
00:23:09,260 --> 00:23:11,960
>> Mas, por enquanto, em JavaScript,
é apenas um ponto.

525
00:23:11,960 --> 00:23:14,170
E assim esta função,
bem o suficiente, tipo de

526
00:23:14,170 --> 00:23:16,810
diz o que does-- obter elemento por ID.

527
00:23:16,810 --> 00:23:20,280
Um elemento é apenas um outro nome
para uma tag ou nó na DOM.

528
00:23:20,280 --> 00:23:26,900
E assim começa elemento por ID "nome"
significa isto-- aqui está o meu HTML.

529
00:23:26,900 --> 00:23:31,910
E com base nesta HTML, o que
nó ou o tag HTML sou eu

530
00:23:31,910 --> 00:23:35,097
vai ser programaticamente handed
chamando document.getElementById?

531
00:23:35,097 --> 00:23:37,650

532
00:23:37,650 --> 00:23:38,500
>> Sim exatamente.

533
00:23:38,500 --> 00:23:42,670
Eu estou indo para obter a entrada
elemento lá cuja ID é "nome".

534
00:23:42,670 --> 00:23:45,140
Então, especificamente, você pode
acha dessa função,

535
00:23:45,140 --> 00:23:49,560
GetElementById, como uma maneira de dar
cópia de um ponteiro para esse nó específico

536
00:23:49,560 --> 00:23:50,060
na árvore.

537
00:23:50,060 --> 00:23:51,980
Nós não tiraram esta
árvore, mas é uma maneira

538
00:23:51,980 --> 00:23:54,900
de obter acesso a esse
retângulo ou retângulo que

539
00:23:54,900 --> 00:23:58,090
identificando-lo exclusivamente através do seu ID.

540
00:23:58,090 --> 00:23:59,760
>> Agora, por que isso é útil?

541
00:23:59,760 --> 00:24:01,510
Bem, despeja
que uma vez que você tenha obtido

542
00:24:01,510 --> 00:24:07,220
esse nó, que retângulo do
imagem, que no interior do mesmo nó,

543
00:24:07,220 --> 00:24:10,660
por sua vez, tem um monte de
pares de valores-chave properties--

544
00:24:10,660 --> 00:24:13,480
ou de dados, um dos quais é chamado valor.

545
00:24:13,480 --> 00:24:16,500
Então, literalmente, é uma espécie de
bocado para explicar a coisa toda.

546
00:24:16,500 --> 00:24:19,370
Contudo, no final do dia,
tudo isso faz é dar-lhe

547
00:24:19,370 --> 00:24:23,070
uma seqüência de caracteres que o usuário digitou no
desta forma hierárquica.

548
00:24:23,070 --> 00:24:24,820
Mas eu não gosto de um
par destas coisas.

549
00:24:24,820 --> 00:24:27,590
Ou melhor, há alguma curiosidade ainda.

550
00:24:27,590 --> 00:24:28,870
Tudo isso parecia funcionar.

551
00:24:28,870 --> 00:24:33,420
Porque você acha que eu retornei
false depois de chamar cumprimentar?

552
00:24:33,420 --> 00:24:35,910
Isso parece um pouco feio, que
Eu tenho duas afirmações lá

553
00:24:35,910 --> 00:24:38,730
separados por ponto e vírgula.

554
00:24:38,730 --> 00:24:39,310
Adivinhe.

555
00:24:39,310 --> 00:24:44,390
Se eu removido retornar falso, o que
pode acontecer, apenas instintivamente?

556
00:24:44,390 --> 00:24:46,990

557
00:24:46,990 --> 00:24:49,460
Desculpe, dizer de novo?

558
00:24:49,460 --> 00:24:50,530
>> Abra um grupo do Windows.

559
00:24:50,530 --> 00:24:52,780
Então talvez algo potencialmente
assim iria acontecer.

560
00:24:52,780 --> 00:24:54,422
O que mais?

561
00:24:54,422 --> 00:24:55,630
Pode apresentar um pedido para onde?

562
00:24:55,630 --> 00:24:59,109

563
00:24:59,109 --> 00:25:00,510
Para a mesma página.

564
00:25:00,510 --> 00:25:03,110
Então, na verdade, é isso
o mais perto responder aqui,

565
00:25:03,110 --> 00:25:05,890
embora, ao contrário
no passado, eu não tenho

566
00:25:05,890 --> 00:25:09,300
especificado o atributo de ação,
que normalmente temos de fazer.

567
00:25:09,300 --> 00:25:11,780
Acontece lá fora é um padrão.
Se você não especificar a ação,

568
00:25:11,780 --> 00:25:15,370
é como dizer citação, fecha aspas
ou o nome do arquivo em si,

569
00:25:15,370 --> 00:25:17,850
que neste caso seria
ser como dom-0.html.

570
00:25:17,850 --> 00:25:20,420
É apenas uma espécie de inferir,
ou melhor implícita.

571
00:25:20,420 --> 00:25:22,420
>> E por isso, se eu não fizer isso, vamos notar.

572
00:25:22,420 --> 00:25:23,230
Deixe-me salvar este.

573
00:25:23,230 --> 00:25:25,270
E eu removi retorno falso.

574
00:25:25,270 --> 00:25:27,759
Deixe-me voltar a este
exemplo e força de recarregá-lo.

575
00:25:27,759 --> 00:25:30,800
E você pode ter visto-me sugerir
isso em CS50 Discutir um monte de vezes.

576
00:25:30,800 --> 00:25:34,560
Se alguma coisa está sempre agindo funky ea
navegador não está se comportando conforme o esperado,

577
00:25:34,560 --> 00:25:37,410
muitas vezes você vai querer segurar
Shift e clique em Reload.

578
00:25:37,410 --> 00:25:41,480
Isso vai forçar cada arquivo para recarregar
e não usar cache local do seu navegador

579
00:25:41,480 --> 00:25:47,032
ou cópia de modo que agora, deixe-me ir em frente e
abrir meu Inspector, na guia Rede.

580
00:25:47,032 --> 00:25:48,740
Vou clique
Preserve Log porque eu

581
00:25:48,740 --> 00:25:51,660
não quero isso para excluir as linhas
Uma vez que recebo arrastada em outro lugar.

582
00:25:51,660 --> 00:25:54,650
>> Deixe-me ir em frente aqui e
Tipo de Andi, clique em Enviar.

583
00:25:54,650 --> 00:25:55,150
Tudo certo.

584
00:25:55,150 --> 00:25:56,480
Isso parece como esperado.

585
00:25:56,480 --> 00:25:57,440
Ele diz: "Olá, Andi."

586
00:25:57,440 --> 00:25:59,420
Permitam-me, clique em OK.

587
00:25:59,420 --> 00:26:00,610
Interessante.

588
00:26:00,610 --> 00:26:05,100
Observe que a página mudou,
embora para a página original.

589
00:26:05,100 --> 00:26:06,770
Observe o tipo de URL alterado.

590
00:26:06,770 --> 00:26:09,430
Ele acrescentou um ponto de interrogação,
que é geralmente um indicador

591
00:26:09,430 --> 00:26:11,260
que tentou apresentar algo.

592
00:26:11,260 --> 00:26:13,570
E, em seguida, na parte inferior,
ainda mais explicitamente,

593
00:26:13,570 --> 00:26:17,570
aqui é o pedido HTTP real,
que recebeu uma resposta de 200 que

594
00:26:17,570 --> 00:26:18,490
me trouxe de volta aqui.

595
00:26:18,490 --> 00:26:20,250
>> Portanto, este não é o que
nós queremos fazer, certo?

596
00:26:20,250 --> 00:26:22,166
Porque eu não quero
recarregar a página inteira.

597
00:26:22,166 --> 00:26:24,970
I em vez queria voltar
falsa, de modo a curto-circuito

598
00:26:24,970 --> 00:26:28,840
o comportamento padrão do navegador, que
era, naturalmente, para enviar a página.

599
00:26:28,840 --> 00:26:31,700
>> Então, vamos dar uma olhada em um
marginalmente melhor exemplo.

600
00:26:31,700 --> 00:26:33,920
Esta é uma versão dom.

601
00:26:33,920 --> 00:26:36,680
E observe o seguinte.

602
00:26:36,680 --> 00:26:39,150
Tudo bem se você não Grokar
todas as linhas de código.

603
00:26:39,150 --> 00:26:41,750
Mas o que é fundamentalmente diferente
sobre esta aplicação?

604
00:26:41,750 --> 00:26:44,690
Vou estipular ele se comporta o
mesmo, faz a mesma coisa.

605
00:26:44,690 --> 00:26:49,320

606
00:26:49,320 --> 00:26:51,570
O que eu tenho, obviamente, feito de forma diferente?

607
00:26:51,570 --> 00:26:52,266
Sim?

608
00:26:52,266 --> 00:26:53,182
>> AUDIÊNCIA: [inaudível].

609
00:26:53,182 --> 00:27:03,421

610
00:27:03,421 --> 00:27:04,170
DAVID MALAN: Yeah.

611
00:27:04,170 --> 00:27:08,620
Assim, a função é definida differently--
Em outras palavras, ausente da forma,

612
00:27:08,620 --> 00:27:13,180
lá em cima na linha 7-- ou
ao invés, a linha não 8--

613
00:27:13,180 --> 00:27:15,070
eu tenho o atributo onsubmit.

614
00:27:15,070 --> 00:27:16,750
No exemplo anterior, eu tinha isso.

615
00:27:16,750 --> 00:27:18,530
E então eu literalmente escreveu o meu código aqui.

616
00:27:18,530 --> 00:27:20,210
E então eu disse return false.

617
00:27:20,210 --> 00:27:22,180
E se não esfregar
você da maneira errada, no entanto,

618
00:27:22,180 --> 00:27:26,140
ele deve começar a na medida
como, assim como em HTML,

619
00:27:26,140 --> 00:27:29,530
quando começamos a misturar-se co-it
com CSS em atributos de estilo,

620
00:27:29,530 --> 00:27:32,890
ele só começou a ficar um pouco
confuso ou se sentir um pouco errado.

621
00:27:32,890 --> 00:27:35,020
>> Da mesma forma aqui, se
você começar a tomar HTML,

622
00:27:35,020 --> 00:27:37,419
e então você automaticamente
plop algum código JavaScript

623
00:27:37,419 --> 00:27:40,460
no meio de uma string, é
não vai ser muito fácil de manter.

624
00:27:40,460 --> 00:27:40,630
Certo?

625
00:27:40,630 --> 00:27:43,690
Não é nem mesmo óbvio à primeira vista
Um lugar onde o código JavaScript.

626
00:27:43,690 --> 00:27:46,590
Portanto, seria realmente bom, como
um princípio de melhor design,

627
00:27:46,590 --> 00:27:50,500
vamos manter nosso HTML completamente
separado da nossa Javascript.

628
00:27:50,500 --> 00:27:53,150
>> Então, para fazer isso, o que nós temos
feito aqui é o following--

629
00:27:53,150 --> 00:27:56,790
nós simplesmente usar HTML para somente marcação.

630
00:27:56,790 --> 00:28:00,730
E assim, em uma versão deste, todos
Eu tenho é uma forma com uma identificação única.

631
00:28:00,730 --> 00:28:04,630
E então para cá, eu estou aproveitando
de um recurso especial de JavaScript

632
00:28:04,630 --> 00:28:08,480
pelo qual eu posso ter o que é
chamado uma função anônima.

633
00:28:08,480 --> 00:28:14,150
Assim, verifica-se que, se eu chamo
document.getElementById de 'demo'

634
00:28:14,150 --> 00:28:18,890
que é como me dar um ponteiro para
este nó na minha árvore, o elemento do formulário,

635
00:28:18,890 --> 00:28:20,100
por assim dizer.

636
00:28:20,100 --> 00:28:22,220
>> Agora, eu só sei de
sabendo um pouco de HTML

637
00:28:22,220 --> 00:28:26,330
agora nós estamos depois de ler alguns on-line
de referência, que suporta um elemento de formulário

638
00:28:26,330 --> 00:28:29,950
um monte de evento em listeners--
outras palavras, o rol de evento

639
00:28:29,950 --> 00:28:31,700
ouvintes que vimos há pouco.

640
00:28:31,700 --> 00:28:35,950
Eu sei que a partir da leitura da documentação
que onsubmit é um evento válido

641
00:28:35,950 --> 00:28:38,520
ouvinte para um elemento de formulário.

642
00:28:38,520 --> 00:28:41,480
>> Então, quando eu sei que,
é seguro para mim fazer

643
00:28:41,480 --> 00:28:45,390
o following-- obter esse nó
da árvore, o elemento do formulário,

644
00:28:45,390 --> 00:28:48,070
e acesse a sua chamada
propriedade onsubmit.

645
00:28:48,070 --> 00:28:49,880
Assim, o ponto significa apenas
esta é uma propriedade,

646
00:28:49,880 --> 00:28:52,180
como um valor especial para dentro dele.

647
00:28:52,180 --> 00:28:55,590
E que tipo de dados sou eu
atribuição de, aparentemente,

648
00:28:55,590 --> 00:28:58,900
para OnSubmit, que é
efetivamente uma variável dentro

649
00:28:58,900 --> 00:29:01,010
desse nó na árvore?

650
00:29:01,010 --> 00:29:04,100
É um campo dentro dessa estrutura.

651
00:29:04,100 --> 00:29:05,810
Qual é o tipo de dados?

652
00:29:05,810 --> 00:29:07,030
>> Uma função, sim.

653
00:29:07,030 --> 00:29:08,607
Assim, verifica-se que o PHP tem isso.

654
00:29:08,607 --> 00:29:10,440
E mesmo que nós
não falar sobre isso,

655
00:29:10,440 --> 00:29:16,240
C também tem função ponteiros, os
capacidade de passar e atribuir funções

656
00:29:16,240 --> 00:29:18,330
como os próprios valores das variáveis.

657
00:29:18,330 --> 00:29:20,280
E nós não vamos
a regredir de volta para C.

658
00:29:20,280 --> 00:29:23,250
Mas, por agora, verifica-se que
no lado da mão direita aqui,

659
00:29:23,250 --> 00:29:26,260
mesmo que pareça um pouco
funky, este meio, hey navegador,

660
00:29:26,260 --> 00:29:27,550
dá-me uma função.

661
00:29:27,550 --> 00:29:30,560
Eu não vou incomodar mesmo dando
-lhe um nome, porque eu estou literalmente

662
00:29:30,560 --> 00:29:34,450
vai atribuir vamos chamá-lo
o endereço desta função

663
00:29:34,450 --> 00:29:35,994
imediatamente a OnSubmit.

664
00:29:35,994 --> 00:29:39,160
Em outras palavras, o navegador, você não precisa
para saber o que esta função é chamado.

665
00:29:39,160 --> 00:29:41,890
Você só precisa saber
onde ele está na memória.

666
00:29:41,890 --> 00:29:44,210
E assim é suficiente apenas para
tem um sinal de igual lá

667
00:29:44,210 --> 00:29:48,240
e não se preocupar nomeando isso, como
foo ou cumprimentar ou qualquer outra palavra.

668
00:29:48,240 --> 00:29:50,150
E agora esta é apenas uma coisa estilística.

669
00:29:50,150 --> 00:29:53,100
Eu poderia mover este chaveta
para as-- sorry-- próxima linha

670
00:29:53,100 --> 00:29:54,750
como geralmente fazemos CS50.

671
00:29:54,750 --> 00:29:57,550
Mas em JavaScript, é
realmente estilisticamente comum

672
00:29:57,550 --> 00:30:00,450
apenas para manter a chaveta, o
primeiro, em que a primeira linha.

673
00:30:00,450 --> 00:30:02,620
>> Mas a seguir, há
Nada de interessante.

674
00:30:02,620 --> 00:30:05,830
Isso chaveta aberta apenas
demarca o início da minha função.

675
00:30:05,830 --> 00:30:09,320
A função é agora
idênticas, exceto que eu tenho

676
00:30:09,320 --> 00:30:11,452
incluído o falso retorno
dentro desta função.

677
00:30:11,452 --> 00:30:13,160
Porque acontece out--
e você só faria

678
00:30:13,160 --> 00:30:14,980
sei que isto de leitura
o documentation--

679
00:30:14,980 --> 00:30:19,740
que se a função que você atribui
para o manipulador onsubmit retorna false,

680
00:30:19,740 --> 00:30:23,420
o navegador só sabe e concorda
não enviar o formulário para um servidor.

681
00:30:23,420 --> 00:30:27,210
Se ele retorna true, apresentará
lo para um servidor por razões que veremos

682
00:30:27,210 --> 00:30:28,700
são úteis em apenas um momento.

683
00:30:28,700 --> 00:30:31,000
>> E então o ponto e vírgula depois
a chaveta lá apenas

684
00:30:31,000 --> 00:30:32,541
significa que eu sou feito definindo a função.

685
00:30:32,541 --> 00:30:36,600
Você sabe o que chamar o mais rapidamente
como você ouvir uma apresentação.

686
00:30:36,600 --> 00:30:37,100
Tudo certo.

687
00:30:37,100 --> 00:30:40,650
Isso ainda é indiscutivelmente tipo de feio.

688
00:30:40,650 --> 00:30:42,190
Então, o que mais podemos fazer?

689
00:30:42,190 --> 00:30:45,000
>> Bem, ao que parece, em seguida, em
versão dois, que é o last--

690
00:30:45,000 --> 00:30:46,780
e vamos olhar para isso.

691
00:30:46,780 --> 00:30:49,850
Correndo o risco de fazer
que mais feia, verifica-se

692
00:30:49,850 --> 00:30:52,160
que há uma biblioteca em
o mundo chamado jQuery.

693
00:30:52,160 --> 00:30:54,900
E jQuery é um super-
biblioteca JavaScript populares

694
00:30:54,900 --> 00:30:57,930
isso é tão popular que a maioria
qualquer JavaScript-- não é

695
00:30:57,930 --> 00:31:00,540
incomum que as pessoas confundem
jQuery com JavaScript.

696
00:31:00,540 --> 00:31:01,070
Por quê?

697
00:31:01,070 --> 00:31:04,990
Em si tem muito JavaScript
maneiras de fazer as coisas- verboso

698
00:31:04,990 --> 00:31:07,820
document.getElementById, dadadadadada.

699
00:31:07,820 --> 00:31:10,510
Você acaba tendo muito
longas linhas de código.

700
00:31:10,510 --> 00:31:15,550
>> Assim, um sujeito chamado John Resid,
que realmente funciona para uma startup

701
00:31:15,550 --> 00:31:18,630
até estes dias, saiu
com isso anos de biblioteca

702
00:31:18,630 --> 00:31:22,070
há que muitas pessoas têm contribuído
a chamada jQuery que muda

703
00:31:22,070 --> 00:31:23,449
a sintaxe da seguinte maneira.

704
00:31:23,449 --> 00:31:25,740
E só assim você já viu isso,
Porque você vai invariavelmente

705
00:31:25,740 --> 00:31:28,140
ver isso se fazendo um
projeto final baseado na web,

706
00:31:28,140 --> 00:31:33,270
esta seria a maneira equivalente a
execução dessa mesma função usando

707
00:31:33,270 --> 00:31:34,630
esta biblioteca especial.

708
00:31:34,630 --> 00:31:36,680
>> Agora, ao invés de provocação
o diferencia em sua totalidade,

709
00:31:36,680 --> 00:31:38,520
vamos apenas olhar para alguns padrões.

710
00:31:38,520 --> 00:31:44,850
Esta sintaxe parece ter
quantas funções anônimas

711
00:31:44,850 --> 00:31:49,584
ou funções sem nome
ou funções lambda AKA?

712
00:31:49,584 --> 00:31:50,190
Dois, certo?

713
00:31:50,190 --> 00:31:52,690
E você sabe que, mesmo se
você não é super confortável com isso,

714
00:31:52,690 --> 00:31:55,780
apenas pelo facto de que ele
diz function () duas vezes.

715
00:31:55,780 --> 00:31:58,172
>> E verifica-se que
o que este código é doing--

716
00:31:58,172 --> 00:32:01,255
e nós vamos referir-se a referências on-line,
em última análise, para alguma ajuda com isso.

717
00:32:01,255 --> 00:32:04,480
Isto apenas significa que, quando
o documento está pronto,

718
00:32:04,480 --> 00:32:07,490
vá em frente e cadastre-
a seguinte função

719
00:32:07,490 --> 00:32:12,064
como o manipulador de enviar para o HTML
elemento cuja ideia original é de demonstração.

720
00:32:12,064 --> 00:32:14,480
E então, quando isso acontece,
chamar essas duas linhas de código.

721
00:32:14,480 --> 00:32:18,677
E esta é, tragicamente, uma mais
maneira detalhada de dizer return false.

722
00:32:18,677 --> 00:32:21,510
E nós mencionamos isso só porque
você verá um código como este online.

723
00:32:21,510 --> 00:32:23,140
E não é nada para se intimide com.

724
00:32:23,140 --> 00:32:26,057
Mas em vez disso, tenha em mente que o que é
vai ser comum em JavaScript

725
00:32:26,057 --> 00:32:26,765
é esse paradigma.

726
00:32:26,765 --> 00:32:29,510
E é por isso que nós mostramos isso por agora.

727
00:32:29,510 --> 00:32:30,010
Tudo certo.

728
00:32:30,010 --> 00:32:32,730
Então, sem se deter muito
muito em que a sintaxe,

729
00:32:32,730 --> 00:32:37,800
são há dúvidas sobre
estes exemplos ou idéias até agora?

730
00:32:37,800 --> 00:32:38,300
Tudo certo.

731
00:32:38,300 --> 00:32:40,220
Então, vamos usar isso para algo útil.

732
00:32:40,220 --> 00:32:47,070
Fazendo uma página da web que apenas diz Olá,
assim e assim não é tão interessante,

733
00:32:47,070 --> 00:32:47,830
não underwhelm.

734
00:32:47,830 --> 00:32:51,038
Este não vai ser bonito,
mas ele vai fazer algo útil.

735
00:32:51,038 --> 00:32:56,350
Deixe-me voltar para o meu diretório
aqui e abrir-se, dizer, forma-0.html.

736
00:32:56,350 --> 00:32:59,320
>> Então suponho que este é o calouro
página de registo esportes internos

737
00:32:59,320 --> 00:33:01,780
sem qualquer CSS ou qualquer senso de design.

738
00:33:01,780 --> 00:33:05,404
E eu quero ir em frente e
registe-se aqui com uma senha.

739
00:33:05,404 --> 00:33:08,320
E eu vou concordar com os termos
e condições e clique em Register.

740
00:33:08,320 --> 00:33:11,700
E agora o site diz: "Você é
registrado! (Bem, na verdade não.)"

741
00:33:11,700 --> 00:33:15,070
Que parece que funcionou, mas
deixe-me ir em frente e forçar reload.

742
00:33:15,070 --> 00:33:18,720
>> E deixe-me dizer, não, você não fazê-
precisa do meu endereço de e-mail real.

743
00:33:18,720 --> 00:33:21,820
Ou talvez nós vamos apenas dizer correio lá.

744
00:33:21,820 --> 00:33:25,080
Senha será, como, 12345.

745
00:33:25,080 --> 00:33:28,810
E então, só porque eu sou
um idiota, agora é 123456789.

746
00:33:28,810 --> 00:33:31,150
E eu não estou indo para verificar sua caixa.

747
00:33:31,150 --> 00:33:31,850
>> Hmm.

748
00:33:31,850 --> 00:33:32,350
Tudo certo.

749
00:33:32,350 --> 00:33:34,920
Portanto, há várias oportunidades
para melhoria aqui.

750
00:33:34,920 --> 00:33:39,070
E você sabe, ou vai ver no pset
sete, que você pode escrever code--

751
00:33:39,070 --> 00:33:41,890
e você tem que escrever
código em PHP-- para defender

752
00:33:41,890 --> 00:33:45,780
contra esses tipos de usuário
erros porque o usuário claramente

753
00:33:45,780 --> 00:33:46,790
não cooperou.

754
00:33:46,790 --> 00:33:49,680
E ele ou ela não lhe deu toda a
valores que você queria ou mesmo no formato

755
00:33:49,680 --> 00:33:50,630
que você queria.

756
00:33:50,630 --> 00:33:53,250
Então você verá em pset sete que
certamente poderíamos ter algum

757
00:33:53,250 --> 00:33:55,680
se as condições que dizem
se o endereço de e-mail

758
00:33:55,680 --> 00:33:59,450
não é um username@something.edu,
nós poderíamos apenas

759
00:33:59,450 --> 00:34:02,575
pedir desculpas e pedir desculpas para o usuário
muito, como você pode estar em pset sete.

760
00:34:02,575 --> 00:34:05,700
Ou se não ter verificado que a caixa,
Acontece em PHP, você pode detectar que,

761
00:34:05,700 --> 00:34:06,200
muito.

762
00:34:06,200 --> 00:34:09,389
E, certamente, se as senhas
não correspondem como no register.php

763
00:34:09,389 --> 00:34:11,521
pset para sete, você pode detectar isso.

764
00:34:11,521 --> 00:34:13,770
Mas isso é uma dor no
pescoço em que agora eles solicitar

765
00:34:13,770 --> 00:34:15,510
nós para percorrer todo o caminho para o servidor.

766
00:34:15,510 --> 00:34:17,053
O usuário é informado do erro.

767
00:34:17,053 --> 00:34:19,219
E, pelo menos, a menos que você use
algumas técnicas mais extravagantes,

768
00:34:19,219 --> 00:34:20,929
agora eles tem que clicar na seta para trás.

769
00:34:20,929 --> 00:34:23,300
Não seria bom, como
um monte de sites de hoje,

770
00:34:23,300 --> 00:34:26,190
se você tivesse mais imediato
feedback, instantaneamente?

771
00:34:26,190 --> 00:34:31,389
>> Em outras palavras, deixe-me ir para a versão
um, que vai haver mais bonita.

772
00:34:31,389 --> 00:34:33,469
Mas ele tem esse recurso.

773
00:34:33,469 --> 00:34:39,590
Malan, 12345, 123456789, não
vai marcar a caixa, Register.

774
00:34:39,590 --> 00:34:41,330
As senhas não coincidem.

775
00:34:41,330 --> 00:34:44,459
Assim, mesmo que esse pop-up é ugly--
podemos substituir isso, eventualmente,

776
00:34:44,459 --> 00:34:47,000
com algo como Bootstrap,
que você verá no pset sete

777
00:34:47,000 --> 00:34:50,239
é um library-- muito popular eu fiz
detectar que as senhas não coincidem.

778
00:34:50,239 --> 00:34:50,739
Tudo certo.

779
00:34:50,739 --> 00:34:52,530
Bem, deixe-me corrigir isso como o usuário.

780
00:34:52,530 --> 00:34:55,460
Deixe-me ir em frente e dizer 12345, 12345.

781
00:34:55,460 --> 00:34:57,780
Ainda não verificando o acordo.

782
00:34:57,780 --> 00:35:00,210
Você deve concordar com a
termos e Condições.

783
00:35:00,210 --> 00:35:01,760
Então por que?

784
00:35:01,760 --> 00:35:04,100
>> Se nós já postulava
que há um caminho,

785
00:35:04,100 --> 00:35:07,260
e temos necessário você em
pset sete para detectar erros

786
00:35:07,260 --> 00:35:09,780
condições como este
do lado do servidor, por que eu deveria

787
00:35:09,780 --> 00:35:13,940
que se preocupar também em fazer isso em JavaScript?

788
00:35:13,940 --> 00:35:15,850
O que é um argumento em
favor de que adicionando

789
00:35:15,850 --> 00:35:18,760
você está prestes a ver como some--
há uma complexidade adicional.

790
00:35:18,760 --> 00:35:23,610

791
00:35:23,610 --> 00:35:25,930
>> Talvez não há nenhuma cabeça.

792
00:35:25,930 --> 00:35:26,924
O que poderia ser?

793
00:35:26,924 --> 00:35:27,840
AUDIÊNCIA: [inaudível].

794
00:35:27,840 --> 00:35:31,132

795
00:35:31,132 --> 00:35:32,340
DAVID MALAN: Oh, interessante.

796
00:35:32,340 --> 00:35:33,530
Exploits potenciais.

797
00:35:33,530 --> 00:35:37,540
Então, com certeza, se você não está segurando
entrada do usuário errônea de que grande,

798
00:35:37,540 --> 00:35:40,170
talvez seja tanto melhor se
não cheguem ao seu servidor.

799
00:35:40,170 --> 00:35:42,160
Gostaria de empurrar para trás lá e
por exemplo, você provavelmente deve

800
00:35:42,160 --> 00:35:43,284
corrigir esses dois problemas.

801
00:35:43,284 --> 00:35:44,140
Mas isso é justo.

802
00:35:44,140 --> 00:35:44,710
O que mais?

803
00:35:44,710 --> 00:35:45,626
>> AUDIÊNCIA: [inaudível].

804
00:35:45,626 --> 00:35:47,970

805
00:35:47,970 --> 00:35:49,014
>> DAVID MALAN: Yeah.

806
00:35:49,014 --> 00:35:51,680
Este código, como dissemos antes, é
interpretados no lado do cliente.

807
00:35:51,680 --> 00:35:53,846
Não incomoda o servidor,
o que significa que não faz

808
00:35:53,846 --> 00:35:55,930
impacto de carga ou a capacidade do servidor.

809
00:35:55,930 --> 00:35:59,840
E agora, por pouco me velho,
isso não tem efeito significativo

810
00:35:59,840 --> 00:36:01,970
porque eu tenho um usuário no momento.

811
00:36:01,970 --> 00:36:04,010
>> Mas se você é qualquer
website de tamanho decente,

812
00:36:04,010 --> 00:36:07,400
especialmente as maiores, como o Facebook,
o mais que você pode manter as pessoas fora

813
00:36:07,400 --> 00:36:09,927
do seu servidor o melhor
porque um servidor, é claro,

814
00:36:09,927 --> 00:36:12,510
tem apenas uma quantidade finita de RAM,
um número finito de gigahertz,

815
00:36:12,510 --> 00:36:16,340
um número finito de coisas
ele pode fazer por unidade de tempo.

816
00:36:16,340 --> 00:36:19,170
Então, se há mais pessoas em
o mundo bater seu servidor,

817
00:36:19,170 --> 00:36:21,750
registrando acidentalmente
incorretamente, tão bem se você

818
00:36:21,750 --> 00:36:23,254
pode manter essa carga fora de seu servidor.

819
00:36:23,254 --> 00:36:25,420
Além disso, especialmente em um móvel
device-- Se você já

820
00:36:25,420 --> 00:36:29,190
registrar em my.harvard ou
Netid de Yale ou similar,

821
00:36:29,190 --> 00:36:32,330
há esta a latência com um monte de
sites como aquele pelo qual ele toma,

822
00:36:32,330 --> 00:36:34,110
como, a mínima segundo ou dois, às vezes.

823
00:36:34,110 --> 00:36:37,979
E então, meu Deus, se você digitar errado,
em seguida, você tem que bater para trás e refazê-lo.

824
00:36:37,979 --> 00:36:40,520
Portanto, não há latência, especialmente
em conexões de rede mais lentas.

825
00:36:40,520 --> 00:36:43,030
Mas JavaScript, porque
ele é executado no cliente

826
00:36:43,030 --> 00:36:46,720
e não precisa ir e voltar
através de uma internet lenta potencialmente

827
00:36:46,720 --> 00:36:49,780
conexão, você pode começar
o feedback quase instantâneo.

828
00:36:49,780 --> 00:36:50,760
>> Então, vamos olhar para isso.

829
00:36:50,760 --> 00:36:54,280
Deixe-me abrir formulário 0 e-
olhar para o HTML aqui.

830
00:36:54,280 --> 00:36:56,040
E vamos ver o que está acontecendo.

831
00:36:56,040 --> 00:36:59,460
Esta é uma forma cujo
ação é register.php.

832
00:36:59,460 --> 00:37:01,530
Eu só estou usando obtenha
que eu podia ver a URL.

833
00:37:01,530 --> 00:37:05,030
Mas para senhas, nós certamente queremos
para mudar esta para deixar na realidade.

834
00:37:05,030 --> 00:37:06,910
Aqui está um campo de entrada de texto tipo.

835
00:37:06,910 --> 00:37:09,050
Aqui está outra entrada
campo de tipo de senha.

836
00:37:09,050 --> 00:37:13,150
Aqui está, se você nunca viu,
uma entrada de caixa tipo.

837
00:37:13,150 --> 00:37:15,250
>> Mas não há JavaScript
aqui qualquer.

838
00:37:15,250 --> 00:37:18,170
Este é apenas HTML que
vai para register.php.

839
00:37:18,170 --> 00:37:21,020
Mas, em uma versão, onde
começou a ficar essas pop-ups,

840
00:37:21,020 --> 00:37:23,010
vamos ver o que realmente acontece aqui.

841
00:37:23,010 --> 00:37:26,757
Na versão um, o que
Vou see-- I

842
00:37:26,757 --> 00:37:29,340
pensei que poderia parar o suficiente
com palavras suficientes, mas eu corri para fora.

843
00:37:29,340 --> 00:37:35,180

844
00:37:35,180 --> 00:37:38,590
>> Na versão um-- lá vamos nós.

845
00:37:38,590 --> 00:37:43,180
Na versão um, observe o following--
e não é a melhor aplicação,

846
00:37:43,180 --> 00:37:44,420
mas é o meu primeiro.

847
00:37:44,420 --> 00:37:47,680
Observe que abaixo do
forma, eu tenho uma tag script.

848
00:37:47,680 --> 00:37:49,430
E uma marca de script significa,
hey, browser, aqui

849
00:37:49,430 --> 00:37:52,340
vem em algum código,
normalmente, JavaScript.

850
00:37:52,340 --> 00:37:54,420
E agora, observe o que eu estou fazendo.

851
00:37:54,420 --> 00:37:59,070
Em linha-- eu mal consigo
leia ele-- linha 32, ele diz,

852
00:37:59,070 --> 00:38:01,420
var form-- então me dê
uma variável chamada formulário.

853
00:38:01,420 --> 00:38:05,049
E, em seguida, obter document.getElementId
de "registro".

854
00:38:05,049 --> 00:38:05,590
O que é isto?

855
00:38:05,590 --> 00:38:07,290
Bem, deixe-me voltar aqui em cima.

856
00:38:07,290 --> 00:38:11,510
E observem, ah, eu dei o elemento do formulário
uma ideia arbitrária, mas descritivo

857
00:38:11,510 --> 00:38:13,050
da inscrição.

858
00:38:13,050 --> 00:38:16,820
Então isso me dá uma variável que
permite-me para pegar esse nó,

859
00:38:16,820 --> 00:38:19,580
que retângulo na árvore chamada formulário.

860
00:38:19,580 --> 00:38:24,460
meios form.onsubmit, hey navegador,
registrar um ouvinte de evento

861
00:38:24,460 --> 00:38:25,470
neste formulário.

862
00:38:25,470 --> 00:38:28,890
Em outras palavras, quando este formulário é
apresentado, execute o seguinte código.

863
00:38:28,890 --> 00:38:30,810
Ela não precisa de um nome, porque
Por que você precisa saber o nome?

864
00:38:30,810 --> 00:38:32,880
Você só precisa saber
o que executar, ergo

865
00:38:32,880 --> 00:38:35,610
é uma função anônima ou lambda.

866
00:38:35,610 --> 00:38:37,632
E essa função é
todas estas linhas aqui.

867
00:38:37,632 --> 00:38:40,840
E agora, para ser honesto, mesmo que você
não poderia ter escrito nunca JavaScript

868
00:38:40,840 --> 00:38:44,200
antes, é apenas lógica C e PHP.

869
00:38:44,200 --> 00:38:51,720
Portanto, se form.email.value == "" -
por isso, se o campo de e-mail estiver em branco,

870
00:38:51,720 --> 00:38:54,980
gritar com o usuário com "Você deve
fornecer seu endereço de e-mail. "

871
00:38:54,980 --> 00:38:58,980
Else if form.password.value
é grito em branco no usuário,

872
00:38:58,980 --> 00:39:00,400
"Você deve fornecer sua senha."

873
00:39:00,400 --> 00:39:04,240
>> Mais interessante, logicamente,
se não form.password.value

874
00:39:04,240 --> 00:39:08,630
igual form.confirmation.value--
onde é que a confirmação veio?

875
00:39:08,630 --> 00:39:09,470
Deixe-me voltar.

876
00:39:09,470 --> 00:39:12,870
Bem, eu chamei esta entrada
campo aqui senha.

877
00:39:12,870 --> 00:39:15,180
E eu chamei este aqui confirmação.

878
00:39:15,180 --> 00:39:17,850
Eu poderia tê-lo chamado
password dois ou qualquer outra coisa.

879
00:39:17,850 --> 00:39:20,560
Eu só estou verificando logicamente
que estes dois são o mesmo.

880
00:39:20,560 --> 00:39:25,760
Else-- verifica-se este é o Sr. Boole
novamente-- um valor booleano, a caixa de seleção.

881
00:39:25,760 --> 00:39:29,810
Então, se eu digo, exclamação ponto--
Se não form.agreement.checked,

882
00:39:29,810 --> 00:39:31,820
gritar com o usuário também.

883
00:39:31,820 --> 00:39:34,470
>> Portanto, esta sintaxe que você verá é
muito comum em JavaScript,

884
00:39:34,470 --> 00:39:35,970
onde você tem essa notação pontilhada.

885
00:39:35,970 --> 00:39:37,460
Você começa com um objeto aqui.

886
00:39:37,460 --> 00:39:41,430
Você mergulhar no mais profundo de um para
uma propriedade como senha.

887
00:39:41,430 --> 00:39:43,280
E então você começa a seu valor real.

888
00:39:43,280 --> 00:39:45,830
E mais uma vez, aqui é a entrada.

889
00:39:45,830 --> 00:39:47,310
Aqui é a senha nome.

890
00:39:47,310 --> 00:39:50,860
E seu valor é o que o
humana tem, na verdade, digitada.

891
00:39:50,860 --> 00:39:53,610
>> Assim, em todos estes
casos, voltei falsa.

892
00:39:53,610 --> 00:39:55,800
Mas se não, I return true.

893
00:39:55,800 --> 00:39:58,030
E agora vemos uma
uso convincente de quando

894
00:39:58,030 --> 00:40:00,620
você iria retornar false para
parar o que o usuário está fazendo

895
00:40:00,620 --> 00:40:03,200
e fazer-lhe escolher
novamente ou digite novamente.

896
00:40:03,200 --> 00:40:05,870
Caso contrário, nós return true.

897
00:40:05,870 --> 00:40:08,585
>> E deixe-me apresentar um
outra variante deste apenas

898
00:40:08,585 --> 00:40:13,140
para semear alguma compreensão da mesma.

899
00:40:13,140 --> 00:40:16,850
Bem, na versão 2 do presente, forma-2--
Eu vou fazer isso com um aceno de mão.

900
00:40:16,850 --> 00:40:19,920
Este é, para os curiosos,
a versão jQuery,

901
00:40:19,920 --> 00:40:23,330
aqueles de vocês que pode querer
mexer com essa biblioteca particular.

902
00:40:23,330 --> 00:40:25,145
Mas vamos start-- e dúvidas?

903
00:40:25,145 --> 00:40:29,230
Deixe-me fazer uma pausa por um momento porque
que foi rápido e muito.

904
00:40:29,230 --> 00:40:32,610
>> Mas a coisa boa aqui é que todos
do código é praticamente o mesmo.

905
00:40:32,610 --> 00:40:33,985
O novo material é o que é o dom?

906
00:40:33,985 --> 00:40:35,115
Quais são esses retângulos?

907
00:40:35,115 --> 00:40:35,990
Quais são esses nós?

908
00:40:35,990 --> 00:40:37,540
O que é uma função anônima?

909
00:40:37,540 --> 00:40:38,830
O que é um manipulador de eventos?

910
00:40:38,830 --> 00:40:43,480
Mas, felizmente, a maioria de que é apenas
círculo completo de, digamos, semana zero.

911
00:40:43,480 --> 00:40:43,980
Tudo certo.

912
00:40:43,980 --> 00:40:46,070
Portanto, algo um pouco mais interessante?

913
00:40:46,070 --> 00:40:49,340
Bem, em primeiro lugar, deixe-me ir
em frente e abrir o Google Maps.

914
00:40:49,340 --> 00:40:53,360
E você vai perceber que, para um
momento, na segunda divisão,

915
00:40:53,360 --> 00:40:55,930
observe o que acontece quando
I clique rápido o suficiente.

916
00:40:55,930 --> 00:40:59,720
E essa conexão em Harvard é tão
rápido que você realmente não notá-lo.

917
00:40:59,720 --> 00:41:04,469
Mas o que você tipo de espécie de ver
se eu clicar e arrastar muito rápido?

918
00:41:04,469 --> 00:41:07,010
Aqueles de vocês assistindo on-line,
se você diminuir isso para velocidade de 0,5x,

919
00:41:07,010 --> 00:41:09,640
você pode ver isso melhor.

920
00:41:09,640 --> 00:41:13,550
>> O que estava acontecendo apenas
antes que eu clicadas e arrastadas?

921
00:41:13,550 --> 00:41:15,900
Deixe-me tentar aqui-- deixe-me fazer
outra coisa, como 90210.

922
00:41:15,900 --> 00:41:17,550
Vamos longe.

923
00:41:17,550 --> 00:41:19,000
Isso foi muito rápido, também.

924
00:41:19,000 --> 00:41:22,460
Como cerca de Disney World?

925
00:41:22,460 --> 00:41:23,190
Aí vamos nós.

926
00:41:23,190 --> 00:41:23,690
ESTÁ BEM.

927
00:41:23,690 --> 00:41:26,030
O que você viu em uma fração de segundo?

928
00:41:26,030 --> 00:41:27,200
Apenas, como, praças, certo?

929
00:41:27,200 --> 00:41:28,930
Espaços reservados para telhas?

930
00:41:28,930 --> 00:41:30,270
>> Bem, o que está acontecendo aqui?

931
00:41:30,270 --> 00:41:35,410
O Google Maps é um bom exemplo de
esta tecnologia que é chamado de AJAX.

932
00:41:35,410 --> 00:41:38,510
E é aí que vamos começar a
usar o JavaScript em um particularmente

933
00:41:38,510 --> 00:41:39,277
maneira sedutor.

934
00:41:39,277 --> 00:41:41,610
De volta ao dia, houve
este site chamado MapQuest.

935
00:41:41,610 --> 00:41:44,120
E eu deveria ter tomado uma
screenshot desta partir dos anos 1990,

936
00:41:44,120 --> 00:41:45,820
onde se você queria
olhar para cima aqui no mapa,

937
00:41:45,820 --> 00:41:48,590
você literalmente clicar em uma seta
-se na parte superior que lhe mostrei

938
00:41:48,590 --> 00:41:49,870
um quadrado diferente do mapa.

939
00:41:49,870 --> 00:41:51,790
Se você quisesse ir para a esquerda, você
clicado uma seta que lhe mostrei

940
00:41:51,790 --> 00:41:53,210
um quadrado diferente do mapa.

941
00:41:53,210 --> 00:41:54,840
E alguns sites ainda fazem isso hoje.

942
00:41:54,840 --> 00:41:57,820
Mas mesmo MapQuest tem obtido
melhor, como o Google Maps.

943
00:41:57,820 --> 00:42:01,880
>> Em vez disso, o que é melhor estes
dias é sites que usam AJAX.

944
00:42:01,880 --> 00:42:04,510
AJAX-- também conhecido como
Asynchronous JavaScript e XML,

945
00:42:04,510 --> 00:42:08,370
que é apenas uma maneira elegante de dizer
uma tecnologia ou técnica que

946
00:42:08,370 --> 00:42:14,200
permite que um navegador usando JavaScript
para fazer solicitações HTTP adicionais

947
00:42:14,200 --> 00:42:16,390
depois que a página tenha sido carregado.

948
00:42:16,390 --> 00:42:17,479
Então o que isso quer dizer?

949
00:42:17,479 --> 00:42:19,270
Bem, seria tipo
de irritante no Gmail

950
00:42:19,270 --> 00:42:21,103
se cada vez que você queria
verificar o correio,

951
00:42:21,103 --> 00:42:24,940
você tinha, literalmente, pressione Control-R ou
Command-R ou clique no botão Atualizar

952
00:42:24,940 --> 00:42:26,580
ea página danado inteiro iria recarregar.

953
00:42:26,580 --> 00:42:26,800
Certo?

954
00:42:26,800 --> 00:42:28,460
Seria piscar branco
provavelmente por segundo.

955
00:42:28,460 --> 00:42:30,043
Você iria ver a barra de progresso estúpido.

956
00:42:30,043 --> 00:42:33,170
E só para ver se você tem novos
mail, a página web inteira ea URL

957
00:42:33,170 --> 00:42:34,580
você está no teria que recarregar.

958
00:42:34,580 --> 00:42:35,960
>> Mas isso não é o que acontece no Gmail.

959
00:42:35,960 --> 00:42:36,459
Certo?

960
00:42:36,459 --> 00:42:40,300
Quando você começa um novo e-mail em
Gmail, o que acontece na tela?

961
00:42:40,300 --> 00:42:41,480
Isso só mostra-se, certo?

962
00:42:41,480 --> 00:42:44,280
Ele só aparece magicamente
como uma nova linha na tabela.

963
00:42:44,280 --> 00:42:47,030
Isso envolve um realmente
quantidade razoável de complexidade.

964
00:42:47,030 --> 00:42:51,892
Na verdade, se você pensar sobre esta árvore,
que mesmo que é simples aqui,

965
00:42:51,892 --> 00:42:54,100
Gmail-- e eu teria que olhar
no código para ser sure--

966
00:42:54,100 --> 00:42:58,710
provavelmente tem uma tabela HTML ou talvez
uma lista desordenada que torna

967
00:42:58,710 --> 00:43:01,060
cada uma das suas caixas de entrada e-mails como.

968
00:43:01,060 --> 00:43:04,050
>> E por isso, se você imaginar isso lá
é uma árvore na memória quando você está

969
00:43:04,050 --> 00:43:09,050
usando o Gmail, que olha o tipo de tipo de
assim, quando o Google percebe, ooh,

970
00:43:09,050 --> 00:43:12,770
você tem um novo e-mail, isso não acontece
quer reconstruir a árvore inteira.

971
00:43:12,770 --> 00:43:16,430
Pelo contrário, ela quer encontrar o nó no
a árvore que representa a sua caixa de entrada

972
00:43:16,430 --> 00:43:18,580
e basta inserir um novo nó.

973
00:43:18,580 --> 00:43:24,640
>> Então, muito semelhante ao PSET cinco, onde você
teve de inserir os nós em uma tabela hash,

974
00:43:24,640 --> 00:43:28,410
Da mesma forma que o Google, via
Código JavaScript que tem escrito,

975
00:43:28,410 --> 00:43:31,890
Traverse esta árvore, descobrir onde
é a parte caixa de entrada da janela,

976
00:43:31,890 --> 00:43:33,440
e, em seguida, inserir uma nova linha.

977
00:43:33,440 --> 00:43:37,460
E uma nova linha significa apenas uma
ou mais novos nós em uma árvore.

978
00:43:37,460 --> 00:43:41,340
>> E assim AJAX é esta técnica
que permite exatamente isso.

979
00:43:41,340 --> 00:43:44,440
Uma vez que você visitou uma URL,
no entanto louco tempo é,

980
00:43:44,440 --> 00:43:46,472
e uma vez que a página tem
foi carregado, você pode ainda

981
00:43:46,472 --> 00:43:48,430
agarrar mais dados a partir da
internet-- se é

982
00:43:48,430 --> 00:43:52,460
um e-mail ou uma telha de um map--
agarrá-lo por trás das cenas

983
00:43:52,460 --> 00:43:55,290
e, em seguida, insira-o na página
de modo que o ser humano não faz realmente

984
00:43:55,290 --> 00:43:56,910
tem que esperar por isso.

985
00:43:56,910 --> 00:43:58,980
>> Facebook Messenger funciona da mesma maneira.

986
00:43:58,980 --> 00:44:01,562
Qualquer número de outros websites--
oh, na verdade, até mesmo isso.

987
00:44:01,562 --> 00:44:04,270
Quer dizer, isso é, francamente, tipo de
um irritante apresentam estes dias.

988
00:44:04,270 --> 00:44:07,500
Se eu começar a procurar por este cats--
é uma espécie de experiência do usuário horrível.

989
00:44:07,500 --> 00:44:08,990
Ele só começa a procurar-me.

990
00:44:08,990 --> 00:44:10,050
Bem, o que ele está fazendo?

991
00:44:10,050 --> 00:44:12,920
O URL não mudou
desde que eu comecei a escrever.

992
00:44:12,920 --> 00:44:17,330
Mas o que está acontecendo em todo o
wire-- OK, hmm interessante.

993
00:44:17,330 --> 00:44:20,470
O que está acontecendo em todo o
fio aqui só fica mais estranho.

994
00:44:20,470 --> 00:44:21,090
>> ESTÁ BEM.

995
00:44:21,090 --> 00:44:24,670
Então deixe-me ir em frente e inspecionar
elemento e vá para a guia Rede

996
00:44:24,670 --> 00:44:27,040
e tentar fazer isso
técnico e menos sobre gatos.

997
00:44:27,040 --> 00:44:32,595
Enquanto digito, literalmente, gatos
e- o que está acontecendo

998
00:44:32,595 --> 00:44:37,710
per-- eu não vou clique isso.

999
00:44:37,710 --> 00:44:38,210
Tudo certo.

1000
00:44:38,210 --> 00:44:44,280
Então, aqui em baixo, o que está acontecendo a cada
vez que digitar um caractere, aparentemente?

1001
00:44:44,280 --> 00:44:45,000
Como, de baixo nível?

1002
00:44:45,000 --> 00:44:47,860
O que está acontecendo com cada um desses
caracteres eu estou escrevendo no meu teclado?

1003
00:44:47,860 --> 00:44:48,359
Sim?

1004
00:44:48,359 --> 00:44:50,950
AUDIÊNCIA: [inaudível].

1005
00:44:50,950 --> 00:44:52,340
>> DAVID MALAN: Exatamente.

1006
00:44:52,340 --> 00:44:55,600
Cada um desses personagens é
indo para o Google, um de cada vez.

1007
00:44:55,600 --> 00:44:58,490
Eles estão construindo uma string
em que representa o seu servidor

1008
00:44:58,490 --> 00:44:59,936
tudo o que eu digitei até agora.

1009
00:44:59,936 --> 00:45:01,810
E cada vez que eu digito
um outro personagem, que

1010
00:45:01,810 --> 00:45:04,530
usar seu molho secreto de um
procurar algoritmo e descobrir,

1011
00:45:04,530 --> 00:45:07,370
ele quer dizer esta página gato
ou esta página gato ou similares?

1012
00:45:07,370 --> 00:45:10,620
Então, em algum sentido, ele me dá um
melhor experiência em que eu nem

1013
00:45:10,620 --> 00:45:11,860
precisa para completar o meu pensamento.

1014
00:45:11,860 --> 00:45:14,440
E, de fato, é uma útil
coisa, autocomplete em geral.

1015
00:45:14,440 --> 00:45:17,690
Se os seus algoritmos são bons o suficiente
e se as minhas pesquisas são bastante óbvias,

1016
00:45:17,690 --> 00:45:19,300
Eu não tenho que digitar a palavra inteira.

1017
00:45:19,300 --> 00:45:22,110
Eles vão me dizer o que
é na verdade estou procurando.

1018
00:45:22,110 --> 00:45:25,940
Então, o que o Google chama instantânea
pesquisa está apenas usando AJAX,

1019
00:45:25,940 --> 00:45:30,820
usando um código que lhes permite solicitar
conteúdo adicional através de um navegador web

1020
00:45:30,820 --> 00:45:34,026
nos bastidores usando este
nova linguagem, JavaScript.

1021
00:45:34,026 --> 00:45:35,400
Portanto, temos um par de minutos do fim.

1022
00:45:35,400 --> 00:45:37,710
E deixe-me chamar meu amigo
Colton até o palco,

1023
00:45:37,710 --> 00:45:40,090
uma vez que parecia
particularmente divertido última vez

1024
00:45:40,090 --> 00:45:42,290
a introdução de uma tecnologia
que alguns de vocês

1025
00:45:42,290 --> 00:45:44,769
tenham manifestado interesse
em para projetos finais.

1026
00:45:44,769 --> 00:45:47,310
Nós pensamos que seria divertido para trazer
-se um voluntário, embora, hoje

1027
00:45:47,310 --> 00:45:50,074
para mostrar-lhe um complemento para
este que permite que você-- sim,

1028
00:45:50,074 --> 00:45:50,990
Eu vi isso em primeira mão.

1029
00:45:50,990 --> 00:45:52,900
Vamos lá para cima.

1030
00:45:52,900 --> 00:45:53,560
Muito bem feito.

1031
00:45:53,560 --> 00:45:55,035
Bom trabalho.

1032
00:45:55,035 --> 00:45:57,410
Eu estou indo para projetar esta em
a tela em apenas um momento.

1033
00:45:57,410 --> 00:45:58,150
Qual é o seu nome para todos?

1034
00:45:58,150 --> 00:45:59,180
>> EFA: Eu sou Efa.

1035
00:45:59,180 --> 00:45:59,410
>> DAVID MALAN: Etha?

1036
00:45:59,410 --> 00:45:59,785
>> EFA: Efa.

1037
00:45:59,785 --> 00:46:00,160
>> DAVID MALAN: Efa?

1038
00:46:00,160 --> 00:46:00,730
>> EFA: Yeah.

1039
00:46:00,730 --> 00:46:01,250
>> DAVID MALAN: Prazer em vê-lo.

1040
00:46:01,250 --> 00:46:01,600
Tudo certo.

1041
00:46:01,600 --> 00:46:02,590
Deixe-me ver se pronto.

1042
00:46:02,590 --> 00:46:04,423
Aproxime-se sobre a
meio com Colton aqui.

1043
00:46:04,423 --> 00:46:07,050
O que Colton tem em suas mãos
hoje é um controle remoto.

1044
00:46:07,050 --> 00:46:10,440
Então ao invés de apenas ficar lá em um
mundo tridimensional olhando ao redor

1045
00:46:10,440 --> 00:46:14,080
Colton como fez, agora pode Efa
na verdade, pé subindo,

1046
00:46:14,080 --> 00:46:16,689
baixo, esquerda e direita como um
Nintendo ou Xbox controlador.

1047
00:46:16,689 --> 00:46:18,230
EFA: eu vou cair fora do palco.

1048
00:46:18,230 --> 00:46:20,500
DAVID MALAN: eu vou
ficar aproximadamente aqui.

1049
00:46:20,500 --> 00:46:21,991
Mas isso é um risco.

1050
00:46:21,991 --> 00:46:22,490
ESTÁ BEM.

1051
00:46:22,490 --> 00:46:25,690
Então vá em frente e colocar aqueles em.

1052
00:46:25,690 --> 00:46:29,315
Deixe-me ir em frente e
alternar para a tela aqui.

1053
00:46:29,315 --> 00:46:30,670
Deixe-me diminua as luzes.

1054
00:46:30,670 --> 00:46:32,780
E Colton, deixe-me
venha ficar ao seu lado.

1055
00:46:32,780 --> 00:46:35,520
>> Você quer explicar aqui
com o microfone o que estamos fazendo?

1056
00:46:35,520 --> 00:46:36,380
Aqui vai você.

1057
00:46:36,380 --> 00:46:37,280
>> Colton: Claro.

1058
00:46:37,280 --> 00:46:39,980
Então, agora nós somos
carregar o Oculus,

1059
00:46:39,980 --> 00:46:43,070
Eu acho que não operam operating--
sistema, mas o programa principal, onde

1060
00:46:43,070 --> 00:46:46,630
você pode acessar todos os jogos e
aplicativos que estão em sua biblioteca.

1061
00:46:46,630 --> 00:46:50,060
Então, agora, ele deve dizer
toque no touchpad para começar.

1062
00:46:50,060 --> 00:46:53,430
Touchpad vai ser na
lado direito do fone de ouvido.

1063
00:46:53,430 --> 00:46:54,569
Então vá em frente e tap--

1064
00:46:54,569 --> 00:46:55,110
EFA: Oh, cara.

1065
00:46:55,110 --> 00:46:56,443
DAVID MALAN: Sim, lá você vai.

1066
00:46:56,443 --> 00:47:00,340

1067
00:47:00,340 --> 00:47:02,460
A qualidade Efa está vendo
é muito mais elevada qualidade.

1068
00:47:02,460 --> 00:47:03,831
Este é apenas o Wi-Fi aqui.

1069
00:47:03,831 --> 00:47:05,580
Colton: Então, o que você está
vai querer fazer

1070
00:47:05,580 --> 00:47:08,350
é olhar para o topo
direito da tela.

1071
00:47:08,350 --> 00:47:10,420
Yep, aquele jogo no topo direito.

1072
00:47:10,420 --> 00:47:14,780
E então quando você está selecionando
ele, toque novamente no touchpad.

1073
00:47:14,780 --> 00:47:17,010
Acho que suas Dreadhalls.

1074
00:47:17,010 --> 00:47:20,820
E então aqui está A-- aqui, deixe-
me segurar os seus óculos para você.

1075
00:47:20,820 --> 00:47:24,420

1076
00:47:24,420 --> 00:47:25,790
>> Então, eu só lhe deu um controlador.

1077
00:47:25,790 --> 00:47:28,886
Então, agora ele pode controlar o jogo.

1078
00:47:28,886 --> 00:47:30,510
Ele pode se movimentar e coisas assim.

1079
00:47:30,510 --> 00:47:31,968
Então vá em frente e olhar para cima até o topo.

1080
00:47:31,968 --> 00:47:33,640
Você deverá ver um novo jogo.

1081
00:47:33,640 --> 00:47:36,310
Então vá em frente e você pode fazer isso.

1082
00:47:36,310 --> 00:47:39,320
Agora, você deve ser capaz de controlar
-se com o controlador,

1083
00:47:39,320 --> 00:47:43,860
assim, quanto mais rapidamente
o jogo carrega-se aqui.

1084
00:47:43,860 --> 00:47:46,356
Isso pode ser um pouco assustador.

1085
00:47:46,356 --> 00:47:47,300
>> EFA: Agora você me diz.

1086
00:47:47,300 --> 00:47:50,132
ESTÁ BEM.

1087
00:47:50,132 --> 00:47:51,080
>> Colton: Tudo bem.

1088
00:47:51,080 --> 00:47:52,650
Então, confirme que você pode se mover.

1089
00:47:52,650 --> 00:47:52,750
ESTÁ BEM.

1090
00:47:52,750 --> 00:47:53,583
Você pode se movimentar.

1091
00:47:53,583 --> 00:47:54,300
Perfeito.

1092
00:47:54,300 --> 00:47:56,470
Então, se você olhar para baixo, você tem um mapa.

1093
00:47:56,470 --> 00:47:58,170
Mapa mostra onde você está.

1094
00:47:58,170 --> 00:47:59,720
Você pode olhar ao redor da sala.

1095
00:47:59,720 --> 00:48:01,440
Você pode virar completamente.

1096
00:48:01,440 --> 00:48:02,128
Sim exatamente.

1097
00:48:02,128 --> 00:48:02,627
Inversão de marcha.

1098
00:48:02,627 --> 00:48:05,370

1099
00:48:05,370 --> 00:48:07,125
>> Então olhe para a sua esquerda.

1100
00:48:07,125 --> 00:48:09,875
Eu acho que há algo que você pode
pegar o barril no quarto.

1101
00:48:09,875 --> 00:48:11,709
>> EFA: Como faço para obter o
Roteiro para fora do caminho?

1102
00:48:11,709 --> 00:48:12,375
Colton: Olhe para cima.

1103
00:48:12,375 --> 00:48:12,980
Basta olhar para cima.

1104
00:48:12,980 --> 00:48:13,480
Tudo certo.

1105
00:48:13,480 --> 00:48:13,765
Ai está.

1106
00:48:13,765 --> 00:48:15,181
Agora vá em frente e apenas virar.

1107
00:48:15,181 --> 00:48:21,460

1108
00:48:21,460 --> 00:48:24,620
Então olhe mais para a sua esquerda.

1109
00:48:24,620 --> 00:48:25,530
Mantenha-se movendo para a esquerda.

1110
00:48:25,530 --> 00:48:26,960
Continue procurando esquerda.

1111
00:48:26,960 --> 00:48:27,541
Continue.

1112
00:48:27,541 --> 00:48:28,040
Sim.

1113
00:48:28,040 --> 00:48:28,720
>> EFA: Ah, isso maneira.

1114
00:48:28,720 --> 00:48:29,261
>> Colton: Sim.

1115
00:48:29,261 --> 00:48:30,999
Caminhe em direção a ele com o controlador.

1116
00:48:30,999 --> 00:48:31,540
Ai está.

1117
00:48:31,540 --> 00:48:32,790
Agora ele deve dizer buscá-lo.

1118
00:48:32,790 --> 00:48:33,360
Ai está.

1119
00:48:33,360 --> 00:48:34,290
Buscá-lo.

1120
00:48:34,290 --> 00:48:35,550
Tudo certo.

1121
00:48:35,550 --> 00:48:38,286
Agora, vamos sair desta sala.

1122
00:48:38,286 --> 00:48:42,209
Vá em frente e caminhar até a porta.

1123
00:48:42,209 --> 00:48:45,000
Então você está indo para hold-- diz
segure o botão para forçá-lo aberto.

1124
00:48:45,000 --> 00:48:46,333
Então vá em frente e segure o botão.

1125
00:48:46,333 --> 00:48:48,250
Yep, forçando-o abrir.

1126
00:48:48,250 --> 00:48:48,750
Tudo certo.

1127
00:48:48,750 --> 00:48:49,410
Bom trabalho.

1128
00:48:49,410 --> 00:48:50,826
Agora nós estamos andando para fora da sala.

1129
00:48:50,826 --> 00:48:56,970

1130
00:48:56,970 --> 00:49:01,366
Então eu vou deixar o resto
para você e ver o que você descobrir.

1131
00:49:01,366 --> 00:49:02,865
EFA: Eu não estou indo na sala escura.

1132
00:49:02,865 --> 00:49:07,315

1133
00:49:07,315 --> 00:49:07,815
Oh espere.

1134
00:49:07,815 --> 00:49:09,314
Agora eu tenho que ir pelo corredor escuro?

1135
00:49:09,314 --> 00:49:10,785
OK, eu vou voltar [inaudível].

1136
00:49:10,785 --> 00:49:15,520

1137
00:49:15,520 --> 00:49:16,270
Colton: Tudo bem.

1138
00:49:16,270 --> 00:49:17,560
Alguns mais itens para pegar.

1139
00:49:17,560 --> 00:49:19,370
Parece que algumas moedas.

1140
00:49:19,370 --> 00:49:22,242
Essa é uma gazua.

1141
00:49:22,242 --> 00:49:24,200
Então, se você encontrar uma bloqueado
porta, você pode usar isso.

1142
00:49:24,200 --> 00:49:27,755

1143
00:49:27,755 --> 00:49:28,380
Você está assustado?

1144
00:49:28,380 --> 00:49:29,371
>> EFA: Ainda não.

1145
00:49:29,371 --> 00:49:29,871
Colton: OK.

1146
00:49:29,871 --> 00:49:34,850

1147
00:49:34,850 --> 00:49:35,497
>> Pretend-- sim.

1148
00:49:35,497 --> 00:49:37,330
Basta fingir que você é
na verdade, de pé ali.

1149
00:49:37,330 --> 00:49:39,580
E se você virar circundar--
você tem que se acostumar com isso.

1150
00:49:39,580 --> 00:49:40,752
Mas faz sentido.

1151
00:49:40,752 --> 00:49:43,960
DAVID MALAN: E enquanto continua a Efa
jogar, uma vez que poderia fazer isso o dia todo,

1152
00:49:43,960 --> 00:49:45,381
todos nós podemos ponta dos pés para fora aqui.

1153
00:49:45,381 --> 00:49:48,130
Mas nós temos dois outros pares,
se você gostaria de vir e jogar.

1154
00:49:48,130 --> 00:49:49,980
Caso contrário, vamos ver
Até a próxima quarta-feira.

1155
00:49:49,980 --> 00:49:51,354
Obrigado ao nosso voluntário hoje.

1156
00:49:51,354 --> 00:49:52,101
[Aplausos]

1157
00:49:52,101 --> 00:49:54,506

1158
00:49:54,506 --> 00:49:57,392
>> [MUSIC - "Seinfeld TEMA"]

1159
00:49:57,392 --> 00:49:58,222

1160
00:49:58,222 --> 00:50:00,180
COLUNA 1: Bem, eu sou
colocando um novo PL montar em.

1161
00:50:00,180 --> 00:50:01,800
Eu só mudou o OLPF--

1162
00:50:01,800 --> 00:50:03,980
>> COLUNA 2: Então, o que
exatamente você está fazendo?

1163
00:50:03,980 --> 00:50:07,063
>> COLUNA 1: Bem, cada um dos these--
aqui, eu vou mostrar-lhe este aqui.

1164
00:50:07,063 --> 00:50:08,690
Você pode vê-lo aqui.

1165
00:50:08,690 --> 00:50:09,510
>> COLUNA 3: Eu acho que eu sou bom com estes.

1166
00:50:09,510 --> 00:50:09,933
Você quer mais?

1167
00:50:09,933 --> 00:50:11,325
>> COLUNA 4: Não, eu estou bem. [Inaudível].

1168
00:50:11,325 --> 00:50:12,200
>> COLUNA 3: Não, [inaudível].

1169
00:50:12,200 --> 00:50:12,700
Tem algum.

1170
00:50:12,700 --> 00:50:21,165

1171
00:50:21,165 --> 00:50:22,290
COLUNA 1: A cor diferente.

1172
00:50:22,290 --> 00:50:22,890
COLUNA 2: OK.

1173
00:50:22,890 --> 00:50:26,690
COLUNA 1: Então, em última análise o que
faz é que ajusta a cor de--