1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [Seminário: JQUERY]

2
00:00:02,690 --> 00:00:04,790
[Vipul Shekhawat, Harvard University]

3
00:00:04,790 --> 00:00:08,000
[Isto é CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Se você está acompanhando em casa, você pode realmente acessar meus slides on-line

5
00:00:10,640 --> 00:00:13,310
por ir a este link.

6
00:00:13,310 --> 00:00:18,650
É TjjRWj, em bit.ly.

7
00:00:18,650 --> 00:00:20,700
Você também pode simplesmente ir até a URL diretamente,

8
00:00:20,700 --> 00:00:27,300
que é cloud.cs50.net / ~ vshekhawat, que é o meu nome,

9
00:00:27,300 --> 00:00:32,409
e jQuery.

10
00:00:32,409 --> 00:00:34,920
Eu altamente incentivá-lo a seguir adiante, se você está assistindo em casa,

11
00:00:34,920 --> 00:00:40,650
e se você está aqui, também, porque esta é uma apresentação bastante interativa.

12
00:00:40,650 --> 00:00:43,160
>> Então, hoje eu vou estar falando sobre jQuery, ea primeira pergunta é:

13
00:00:43,160 --> 00:00:45,300
o que é jQuery?

14
00:00:45,300 --> 00:00:47,090
Este ano, eu sei que vocês não tenham coberto JavaScript

15
00:00:47,090 --> 00:00:51,080
em tanto detalhe como temos nos últimos anos.

16
00:00:51,080 --> 00:00:53,150
JavaScript é, em primeiro lugar, apenas um idioma do lado do cliente

17
00:00:53,150 --> 00:00:58,390
que você usa para executar scripts e código na máquina de cada usuário.

18
00:00:58,390 --> 00:01:00,660
Então você tem um servidor que fornece páginas da web com as pessoas,

19
00:01:00,660 --> 00:01:02,600
mas você pode querer fazer coisas em sua máquina,

20
00:01:02,600 --> 00:01:08,060
pedir a sua máquina para enviar solicitações para o servidor a cada 30 segundos ou algo assim.

21
00:01:08,060 --> 00:01:10,420
Você pode fazer isso usando JavaScript.

22
00:01:10,420 --> 00:01:13,190
JQuery apenas fornece mais funcionalidade em cima de JavaScript

23
00:01:13,190 --> 00:01:15,680
que faz coisas extra para você.

24
00:01:15,680 --> 00:01:17,710
Se você olhar para o conteúdo no topo,

25
00:01:17,710 --> 00:01:21,410
que descreve algumas das coisas que você é capaz de fazer.

26
00:01:21,410 --> 00:01:23,500
Portanto, em geral, foi criado em janeiro de 2006.

27
00:01:23,500 --> 00:01:26,560
Foi primeiro concebida em agosto de 2005.

28
00:01:26,560 --> 00:01:31,370
Tem sido em torno de um par de anos, e é realmente parte do novo movimento Web 2.0

29
00:01:31,370 --> 00:01:34,330
que é feita a Internet tão brilhante.

30
00:01:34,330 --> 00:01:37,630
É a biblioteca JavaScript mais amplamente utilizado.

31
00:01:37,630 --> 00:01:41,450
Mais de 19,6 milhões sites estão usando, eo uso continua a aumentar

32
00:01:41,450 --> 00:01:45,640
de acordo com builtwith.com, que, aparentemente, ao longo do último ano,

33
00:01:45,640 --> 00:01:49,710
acaba de ser continuamente aumentando bastante linear.

34
00:01:49,710 --> 00:01:52,870
Entre os top 10 milhões de sites, ainda há -

35
00:01:52,870 --> 00:01:55,180
cerca de 40% deles estão atualmente usando.

36
00:01:55,180 --> 00:01:58,540
Facebook usa-lo, os lotes de outros sites atualmente usá-lo.

37
00:01:58,540 --> 00:02:01,540
Você pode olhar para as estatísticas sobre o seu próprio, se você gostaria.

38
00:02:01,540 --> 00:02:05,820
E você poderia dizer que é legítimo, porque tem uma fundação e 13 membros do conselho,

39
00:02:05,820 --> 00:02:11,910
juntamente com uma equipe de 20 pessoas que trabalham nela em uma base regular.

40
00:02:11,910 --> 00:02:16,110
Por isso é muito utilizado, ele tem uma URL org., É fantasia,

41
00:02:16,110 --> 00:02:21,660
ele tem spin-offs para outras coisas, por isso é um grande negócio.

42
00:02:21,660 --> 00:02:24,510
>> Por que você deve usá-lo? JQuery é muito leve.

43
00:02:24,510 --> 00:02:27,270
Isso significa que ele não é um arquivo enorme. Você pode baixar

44
00:02:27,270 --> 00:02:31,540
o arquivo minified, que é, sem todo o espaço em branco e comentários, e fica a apenas 32 kB.

45
00:02:31,540 --> 00:02:33,600
Por isso, é fácil simplesmente atirar na sua página web

46
00:02:33,600 --> 00:02:35,910
e só para começar a usá-lo.

47
00:02:35,910 --> 00:02:39,630
É também muito eficiente por escrito, por isso não ocupa muito -

48
00:02:39,630 --> 00:02:42,550
não abrandar o seu site muito quando você usá-lo.

49
00:02:42,550 --> 00:02:45,770
Ele permite que você implementar coisas que antes eram inviáveis.

50
00:02:45,770 --> 00:02:47,790
Existem alguns aspectos da funcionalidade,

51
00:02:47,790 --> 00:02:51,780
como a criação de animações, que, normalmente, seria muito, muito difícil de fazer.

52
00:02:51,780 --> 00:02:54,300
Mas, em jQuery que são realmente muito simples.

53
00:02:54,300 --> 00:02:57,040
E há algumas coisas que são irritantes para fazer,

54
00:02:57,040 --> 00:02:59,610
possível em JavaScript, como o envio de uma solicitação POST,

55
00:02:59,610 --> 00:03:02,190
mas para enviar uma solicitação para um servidor, você tem que escrever

56
00:03:02,190 --> 00:03:04,320
cinco ou seis ou sete linhas de código.

57
00:03:04,320 --> 00:03:07,200
Agora você pode fazê-lo apenas em uma única linha de código, em uma única chamada de função.

58
00:03:07,200 --> 00:03:11,790
Isso realmente simplifica um monte de coisas que você está fazendo.

59
00:03:11,790 --> 00:03:15,950
E todas as crianças legais estão usando. Por isso, quero me dizer.

60
00:03:15,950 --> 00:03:19,270
No meu projeto final do ano passado, que é news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
que é para a estação de rádio, eu criei este blog

62
00:03:22,530 --> 00:03:29,750
que abriga todos os shows que fizemos e os arquivos de MP3 para eles.

63
00:03:29,750 --> 00:03:32,070
Você pode navegar através dos shows passados,

64
00:03:32,070 --> 00:03:34,130
e tudo é feito usando jQuery. Você pode dizer

65
00:03:34,130 --> 00:03:37,340
por causa de todas estas animações, essencialmente.

66
00:03:37,340 --> 00:03:42,360
Então se você tem - se você estiver criando um novo post,

67
00:03:42,360 --> 00:03:45,980
você vê esses pequenos slideDowns, tudo isso é feito usando jQuery.

68
00:03:45,980 --> 00:03:49,140
E isso desaparecer - para esse tipo de coisa é feito usando jQuery,

69
00:03:49,140 --> 00:03:52,720
e você não tem que recarregar constantemente a página para navegar no site.

70
00:03:52,720 --> 00:03:57,220
Outra coisa legal que é feito usando jQuery é esta apresentação.

71
00:03:57,220 --> 00:03:59,700
Eu estou usando essa coisa de código aberto chamado scrolldeck,

72
00:03:59,700 --> 00:04:03,250
que alguém escreveu sobre jQuery.

73
00:04:03,250 --> 00:04:04,870
Se você realmente olhar para a fonte, você pode ver que

74
00:04:04,870 --> 00:04:07,830
eles estão usando este cifrão; cifrões

75
00:04:07,830 --> 00:04:12,110
são usados ​​em jQuery para significar que uma função é uma função jQuery.

76
00:04:12,110 --> 00:04:15,020
Então, eles estão definindo um invólucro no topo do jQuery

77
00:04:15,020 --> 00:04:18,570
que lhe permite fazer uma apresentação como esta,

78
00:04:18,570 --> 00:04:21,200
e você pode ver que aqui eles estão incluindo o arquivo jQuery original

79
00:04:21,200 --> 00:04:24,120
que é o que você terá que incluir, se quiser usar jQuery

80
00:04:24,120 --> 00:04:30,450
em seus próprios sites.

81
00:04:30,450 --> 00:04:32,790
>> Tocar em que, como você instalá-lo?

82
00:04:32,790 --> 00:04:36,150
Você pode apenas ir para jQuery.com e baixar o arquivo,

83
00:04:36,150 --> 00:04:38,320
adicioná-lo em um diretório web e incluí-lo.

84
00:04:38,320 --> 00:04:42,200
Então, só em cima, na tag head do seu arquivo HTML

85
00:04:42,200 --> 00:04:45,400
do seu arquivo HTML principal, só tem essa linha de código

86
00:04:45,400 --> 00:04:49,490
com a versão correta para qual versão do jQuery você está usando.

87
00:04:49,490 --> 00:04:51,340
Você pode baixá-lo, indo para jQuery.com,

88
00:04:51,340 --> 00:04:55,130
Clique em "Download jQuery", e você tem isso. É isso aí.

89
00:04:55,130 --> 00:04:58,880
E, na verdade, podemos dar uma olhada em o que parece.

90
00:04:58,880 --> 00:05:01,080
Se você clicar em download aqui, jQuery é isso.

91
00:05:01,080 --> 00:05:05,260
É apenas um grande arquivo JavaScript que faz todas as coisas mágica para você.

92
00:05:05,260 --> 00:05:09,270
Esta é a versão minified, que não pode ser lido em tudo.

93
00:05:09,270 --> 00:05:13,180
Você também pode olhar para a versão de desenvolvimento, que é legível

94
00:05:13,180 --> 00:05:15,370
mas ainda é muito, muito longo.

95
00:05:15,370 --> 00:05:17,980
É um monte de coisas lá dentro.

96
00:05:17,980 --> 00:05:20,240
Você também pode vincular a versão hospedada do Google dela.

97
00:05:20,240 --> 00:05:23,820
Então, isso vai permitir que você confiar apenas no Google para fornecê-la.

98
00:05:23,820 --> 00:05:29,310
Eles fornecem a cada versão, disponível em todos os momentos.

99
00:05:29,310 --> 00:05:31,530
Então, provavelmente você pode confiar no Google para hospedá-lo para você.

100
00:05:31,530 --> 00:05:33,270
Ou você pode ligar para o próprio última versão do jQuery.

101
00:05:33,270 --> 00:05:36,400
Eles têm uma URL que está sempre atualizado para a versão mais recente.

102
00:05:36,400 --> 00:05:40,850
É jQuery mais recente, e não há um problema com isso,

103
00:05:40,850 --> 00:05:44,350
que é que se o jQuery actualizado e algumas das funcionalidades anteriores

104
00:05:44,350 --> 00:05:47,250
eles haviam se retrogradada ou obsoleta,

105
00:05:47,250 --> 00:05:49,620
não pode - ele pode começar a não ser mais suportado.

106
00:05:49,620 --> 00:05:52,940
Então, se você escrever um site usando a versão 1.8.2,

107
00:05:52,940 --> 00:05:55,000
pelo tempo versão 2.7 sai

108
00:05:55,000 --> 00:05:57,000
algumas das funções que você escreveu, não funciona mais.

109
00:05:57,000 --> 00:05:59,930
Por isso, é melhor apenas para baixar o arquivo de 32 kB,

110
00:05:59,930 --> 00:06:04,100
colocá-lo na sua página web, e ele vai funcionar para sempre.

111
00:06:04,100 --> 00:06:07,450
>> Eu estou indo para ir em frente e começar a falar sobre a funcionalidade real do jQuery.

112
00:06:07,450 --> 00:06:13,090
A primeira coisa é seletores. Isto é o que jQuery foi inicialmente concebido para fornecer.

113
00:06:13,090 --> 00:06:15,500
E você pode clicar sobre a documentação para olhar

114
00:06:15,500 --> 00:06:18,690
a documentação detalhada para os seletores que eu vou fazer a cobertura.

115
00:06:18,690 --> 00:06:24,120
A idéia por trás seletores é que você pode selecionar elementos HTML em uma página.

116
00:06:24,120 --> 00:06:28,790
Elementos de uma página ter IDs e classes e outros aspectos que identificam a eles.

117
00:06:28,790 --> 00:06:30,500
Há também - eles estão em ordens diferentes.

118
00:06:30,500 --> 00:06:32,570
Algumas vezes eles são encaixados uns dentro dos outros.

119
00:06:32,570 --> 00:06:38,120
JQuery permite construir consultas simples que recuperam elementos da página.

120
00:06:38,120 --> 00:06:41,890
Depois, você pode manipular esses elementos usando funções jQuery,

121
00:06:41,890 --> 00:06:43,990
qual é a seção de manipulação nós vamos chegar à tarde.

122
00:06:43,990 --> 00:06:46,040
Você pode alterar o HTML, altere o CSS,

123
00:06:46,040 --> 00:06:50,500
Você também pode animar e adicionar funções que ativam em determinados eventos.

124
00:06:50,500 --> 00:06:52,710
Assim, por exemplo, se algo for clicado, você quer que algo aconteça,

125
00:06:52,710 --> 00:06:55,210
Você pode fazer isso usando jQuery também.

126
00:06:55,210 --> 00:06:57,380
E há um grande número de maneiras de selecionar elementos.

127
00:06:57,380 --> 00:07:00,310
A maioria deles eu nunca usei, mas não são os básicos,

128
00:07:00,310 --> 00:07:02,340
que são muito importantes.

129
00:07:02,340 --> 00:07:05,750
O seletor de elemento, por exemplo, se você está apenas selecionar nada

130
00:07:05,750 --> 00:07:10,640
que é uma div - Na verdade, tenho o código aberto para esta apresentação de slides.

131
00:07:10,640 --> 00:07:13,450
Assim, por exemplo, aqui está o primeiro slide.

132
00:07:13,450 --> 00:07:17,430
Aqui temos um div. Se nós realmente selecionar todas as divs na página,

133
00:07:17,430 --> 00:07:22,300
ele vai apenas dar-nos um conjunto de todas as divs que existem neste arquivo.

134
00:07:22,300 --> 00:07:27,040
O seletor ID permite que você selecione qualquer coisa com um determinado ID.

135
00:07:27,040 --> 00:07:32,230
Então, se isso, por exemplo, essa coisa tem o ID "o quê",

136
00:07:32,230 --> 00:07:37,160
e se fizéssemos isso com # que em vez de algum ID,

137
00:07:37,160 --> 00:07:42,920
seria apenas retornar uma matriz que tem um único elemento e que é esse elemento da página.

138
00:07:42,920 --> 00:07:45,490
Podemos também combinar seletores desta forma por ter

139
00:07:45,490 --> 00:07:48,260
só selecionar as coisas com IDs que são divs.

140
00:07:48,260 --> 00:07:51,810
Então, sim. Somente selecione divs que têm que ID.

141
00:07:51,810 --> 00:07:55,260
Para a classe de você usar apenas um ponto, que é a mesma coisa que CSS.

142
00:07:55,260 --> 00:07:57,500
Descendente também funciona, assim, se você tem alguma classe

143
00:07:57,500 --> 00:08:00,170
e tem elementos aninhados dentro dele - assim, por exemplo,

144
00:08:00,170 --> 00:08:03,260
existe alguma classe e tem uma marca de âncora de ligação para outra página,

145
00:08:03,260 --> 00:08:08,510
você pode usar esta sintaxe para recuperar o link.

146
00:08:08,510 --> 00:08:12,420
Você também pode selecionar várias coisas ao mesmo tempo, basta separá-los por vírgulas,

147
00:08:12,420 --> 00:08:17,360
usar qualquer selector você gostaria, e você irá selecionar todos eles de uma só vez, em uma única matriz.

148
00:08:17,360 --> 00:08:19,650
E depois há também a não selector, assim você pode selecionar todos os divs

149
00:08:19,650 --> 00:08:24,210
que não tem alguma classe específica.

150
00:08:24,210 --> 00:08:28,790
E isso é apenas uma maneira útil para obter uma introdução sobre como funciona essa seleção.

151
00:08:28,790 --> 00:08:32,270
Vou mostrar alguns exemplos concretos de um segundo.

152
00:08:32,270 --> 00:08:35,480
>> Seletores avançados são - estes são apenas alguns exemplos.

153
00:08:35,480 --> 00:08:38,840
Existem dezenas destes, mas se você quiser selecionar todas as tags de imagem

154
00:08:38,840 --> 00:08:42,799
dentro de algum elemento, então você acabou de fazer: imagem.

155
00:08:42,799 --> 00:08:45,340
Se você quiser selecionar os elementos até, por exemplo, se existem 20 deles,

156
00:08:45,340 --> 00:08:48,290
você quer selecionar 0, 2, 4, 6 e assim por diante,

157
00:08:48,290 --> 00:08:51,630
você faz: mesmo, ou você também pode fazer: estranho.

158
00:08:51,630 --> 00:08:55,470
Estes são selectores pseudo, o que significa que, na verdade, computar

159
00:08:55,470 --> 00:09:00,960
todos os outros elementos ao invés de apenas ir e selecionar todos eles.

160
00:09:00,960 --> 00:09:05,510
Você pode também - cada elemento também pode ter atributos específicos.

161
00:09:05,510 --> 00:09:10,580
Assim, por exemplo, a classe = central é também um atributo.

162
00:09:10,580 --> 00:09:16,500
Por esta tag âncora, href, hipertexto de referência, é um atributo também.

163
00:09:16,500 --> 00:09:21,150
Assim, você pode escolher algo que os links para uma página específica ou apenas - é realmente geral.

164
00:09:21,150 --> 00:09:25,410
Você pode selecionar qualquer coisa com qualquer atributo que você gostaria.

165
00:09:25,410 --> 00:09:27,470
E então, também, atributo contém.

166
00:09:27,470 --> 00:09:30,420
Se você, por exemplo, queria selecionar todos os elementos de entrada

167
00:09:30,420 --> 00:09:32,700
que têm a palavra "pass" como o nome deles,

168
00:09:32,700 --> 00:09:37,560
se uma página tem um bloco de texto de entrada

169
00:09:37,560 --> 00:09:41,050
que é chamado de "senha", que seria uma maneira que você pode selecionar isso.

170
00:09:41,050 --> 00:09:43,020
E há muitos mais. Você pode ir em frente e olhar para a documentação

171
00:09:43,020 --> 00:09:46,950
e ver exemplos específicos de como ele funciona.

172
00:09:46,950 --> 00:09:48,840
>> A próxima coisa é a manipulação DOM.

173
00:09:48,840 --> 00:09:52,500
Depois de selecionar os elementos, nós queremos realmente fazer coisas com eles.

174
00:09:52,500 --> 00:09:55,500
Até agora, ainda não olhou para nada disso, mas se você olhar a documentação,

175
00:09:55,500 --> 00:09:57,950
não há realmente muita coisa que podemos fazer.

176
00:09:57,950 --> 00:10:02,900
Neste ponto, vamos selecionar elementos sobre esta apresentação

177
00:10:02,900 --> 00:10:04,890
e manipulá-los usando jQuery.

178
00:10:04,890 --> 00:10:08,290
Porque este é implementado usando jQuery, temos acesso à biblioteca jQuery,

179
00:10:08,290 --> 00:10:13,580
e podemos usar essas funções dentro deste código.

180
00:10:13,580 --> 00:10:16,200
Uma coisa útil que você pode não saber sobre o console.

181
00:10:16,200 --> 00:10:19,340
E o Google Chrome é o que eu estou usando. Você pode pressionar alt comando J

182
00:10:19,340 --> 00:10:21,720
ou alt controle J para abrir o console.

183
00:10:21,720 --> 00:10:26,130
No Firefox eu acho que é comando shift K ou controle de mudança K.

184
00:10:26,130 --> 00:10:28,880
No Safari você tem que ir alterar algumas configurações.

185
00:10:28,880 --> 00:10:35,460
Há um link, se quiser fazê-lo, mas eu recomendo ficar Chrome ou Firefox.

186
00:10:35,460 --> 00:10:37,750
Então, vamos abrir o console, que é aqui em baixo.

187
00:10:37,750 --> 00:10:41,170
Ele permite que você basicamente fazer o que quiser.

188
00:10:41,170 --> 00:10:45,100
Assim, você pode simplesmente digitar criar uma variável chamada x,

189
00:10:45,100 --> 00:10:49,200
x = 5, vamos ver o que x + 2 é.

190
00:10:49,200 --> 00:10:57,670
Você mesmo pode fazer algo parecido com CS + vamos ver, x + 45, que será CS50.

191
00:10:57,670 --> 00:11:00,530
Você pode apenas fazer algumas coisas JavaScript típico.

192
00:11:00,530 --> 00:11:02,730
Mas você também pode fazer jQuery aqui.

193
00:11:02,730 --> 00:11:06,200
>> Então, vamos olhar para este primeiro aspecto aqui.

194
00:11:06,200 --> 00:11:09,500
Nós vamos criar uma variável chamada HTML, que é uma string.

195
00:11:09,500 --> 00:11:15,890
Ele tem uma marca de parágrafo na mesma, que é chamado de algum texto novo.

196
00:11:15,890 --> 00:11:19,420
Então, nós temos essa HTML, é um texto novo, em marcas de parágrafo.

197
00:11:19,420 --> 00:11:21,800
Agora nós realmente deseja adicioná-lo à página.

198
00:11:21,800 --> 00:11:28,310
Eu configurá-lo para que o HTML para este número, este título aqui, é append ID.

199
00:11:28,310 --> 00:11:32,320
Se selecionar append ID e, em seguida, anexar a ele

200
00:11:32,320 --> 00:11:34,560
a variável HTML que acabei de criar,

201
00:11:34,560 --> 00:11:40,370
ele irá adicionar HTML que, no final, logo após esta tag parágrafo.

202
00:11:40,370 --> 00:11:43,730
Então, se fizermos isso - nós selecionamos este parágrafo,

203
00:11:43,730 --> 00:11:47,590
e nós chamamos a função de acréscimo com a variável HTML Acabei de adicionar,

204
00:11:47,590 --> 00:11:50,960
ele irá adicionar o novo texto lá na página.

205
00:11:50,960 --> 00:11:54,970
Também pode preceder, o que significa que ele irá percorrer antes, no início desse elemento.

206
00:11:54,970 --> 00:11:58,290
Portanto, há um novo texto no início e depois.

207
00:11:58,290 --> 00:12:01,660
Eu posso ir em frente e atualizar para se livrar dessas coisas que acabei de fazer.

208
00:12:01,660 --> 00:12:05,280
Mas isso é um exemplo de como você pode usar o prepend e acrescentar métodos

209
00:12:05,280 --> 00:12:08,910
para manipular o material na página, adicionar um pouco de HTML.

210
00:12:08,910 --> 00:12:11,080
>> Você também pode mudar de classe.

211
00:12:11,080 --> 00:12:14,970
De volta a este arquivo de estilo, eu criei este para a classe vitória

212
00:12:14,970 --> 00:12:19,990
que tem o texto vermelho cor, alguma cor de fundo, e uma sombra de texto.

213
00:12:19,990 --> 00:12:23,810
Parece horrível, mas eu posso realmente -

214
00:12:23,810 --> 00:12:26,410
este número corresponde a classe ID.

215
00:12:26,410 --> 00:12:29,860
Então, eu posso adicionar a classe para a vitória.

216
00:12:29,860 --> 00:12:31,870
Eu posso executar isso no console,

217
00:12:31,870 --> 00:12:35,480
e que irá adicionar essa classe, e agora parece horrível, como esperado.

218
00:12:35,480 --> 00:12:39,680
O CSS é aplicado automaticamente para as classes que você -

219
00:12:39,680 --> 00:12:42,680
se há CSS para uma classe, ele automaticamente é aplicado

220
00:12:42,680 --> 00:12:44,680
Se você alterar a classe de um elemento.

221
00:12:44,680 --> 00:12:49,230
Então, podemos apenas removê-lo usando a classe de remoção.

222
00:12:49,230 --> 00:12:53,690
Então, se você tem algumas classes predefinidas, como vermelho ou destacado,

223
00:12:53,690 --> 00:12:55,990
e, em seguida, você deseja aplicar para aqueles elementos,

224
00:12:55,990 --> 00:12:58,230
você não tem que fazer todo o estilo CSS de cada vez.

225
00:12:58,230 --> 00:13:01,510
Você pode simplesmente adicionar a classe de um elemento, e então ele se tornará automaticamente -

226
00:13:01,510 --> 00:13:05,580
ele vai procurar automaticamente apropriado para essa classe.

227
00:13:05,580 --> 00:13:07,900
Também pode remover as coisas, então eu vou para selecionar todos os divs

228
00:13:07,900 --> 00:13:10,830
na página e removê-los.

229
00:13:10,830 --> 00:13:13,990
O que é que vai olhar como?

230
00:13:13,990 --> 00:13:16,170
Vai parecer que nada, então não há realmente nada de esquerda.

231
00:13:16,170 --> 00:13:18,170
Minha apresentação está desaparecido.

232
00:13:18,170 --> 00:13:21,290
Posso atualizar e trazê-lo de volta, felizmente,

233
00:13:21,290 --> 00:13:24,420
porque é apenas correr uma vez,

234
00:13:24,420 --> 00:13:29,460
mas isso é um exemplo de remoção, se você quiser destruir completamente um elemento da página.

235
00:13:29,460 --> 00:13:33,180
>> Você também pode substituir, e eu estou indo para selecionar todas as marcas de parágrafo na página

236
00:13:33,180 --> 00:13:36,850
e ir para dentro deles e substituir qualquer texto que eles têm em si

237
00:13:36,850 --> 00:13:39,690
apenas com a palavra "teste".

238
00:13:39,690 --> 00:13:46,520
Se você fizer isso, você vai substituir todos os parágrafos na página com este teste.

239
00:13:46,520 --> 00:13:49,150
Yep. Estão todos substituídos por testes.

240
00:13:49,150 --> 00:13:53,270
Então, isso é um exemplo de acesso ao texto e substituí-lo.

241
00:13:53,270 --> 00:13:57,490
Você também pode recuperar informações, e isso é muito legal para as caixas de entrada.

242
00:13:57,490 --> 00:14:00,470
Se você tem uma caixa de entrada que as pessoas estão escrevendo coisas para,

243
00:14:00,470 --> 00:14:03,880
as pessoas estão digitando coisas para ele,

244
00:14:03,880 --> 00:14:09,030
aqui vamos selecionar a entrada, qualquer marca de entrada com um tipo de texto.

245
00:14:09,030 --> 00:14:13,800
Neste caso, há apenas uma caixa de entrada de toda a apresentação,

246
00:14:13,800 --> 00:14:17,260
por isso vamos selecionar a primeira, e, em seguida, chamamos a função val nele.

247
00:14:17,260 --> 00:14:19,570
Que retorna o valor, e por uma caixa de entrada,

248
00:14:19,570 --> 00:14:24,330
o valor é apenas o que passa a ser dentro dela.

249
00:14:24,330 --> 00:14:31,880
Então, se fizermos isso, ele só retorna o material string.

250
00:14:31,880 --> 00:14:36,860
E se nós chamamos isso de novo depois de escrever mais coisas, ele se transforma em mais coisas.

251
00:14:36,860 --> 00:14:40,760
Essa é uma ótima maneira de acessar os elementos de uma caixa de entrada e, em seguida, verificar,

252
00:14:40,760 --> 00:14:45,060
este é um endereço de email válido, isso é uma data válida, por exemplo.

253
00:14:45,060 --> 00:14:49,600
Você pode apenas recuperar coisas instantaneamente como as pessoas estão digitando-a,

254
00:14:49,600 --> 00:14:54,830
e, em seguida, verificar se ela é válida, enviá-lo para um servidor, fazer o que quiser com ele.

255
00:14:54,830 --> 00:14:57,720
E é assim que você acessar o que há dentro dessas caixas.

256
00:14:57,720 --> 00:15:00,090
>> Você também pode modificar CSS diretamente, então ao invés de adicionar

257
00:15:00,090 --> 00:15:02,510
uma classe que tem algumas propriedades pré-definidas,

258
00:15:02,510 --> 00:15:08,120
você pode apenas adicionar o CSS você quer qualquer coisa.

259
00:15:08,120 --> 00:15:10,350
Então vamos selecionar corpo, que é toda a apresentação,

260
00:15:10,350 --> 00:15:14,370
ea cor é a propriedade que define o que as cores do texto é.

261
00:15:14,370 --> 00:15:19,420
Se mudar para vermelho, todo o texto na página vai virar vermelho.

262
00:15:19,420 --> 00:15:26,310
Nós podemos fazer algo parecido com fundo de cor azul,

263
00:15:26,310 --> 00:15:30,680
lá vamos nós, é lindo.

264
00:15:30,680 --> 00:15:33,840
Você pode fazer o que quiser com isso.

265
00:15:33,840 --> 00:15:39,250
Usando a propriedade CSS, você pode realmente modificar a forma como tudo parece a qualquer momento.

266
00:15:39,250 --> 00:15:41,630
O próximo passo é efeitos.

267
00:15:41,630 --> 00:15:45,710
Os efeitos são basicamente a mesma coisa que modificar o CSS,

268
00:15:45,710 --> 00:15:48,870
mas eles oferecem alguma animação extra para ele.

269
00:15:48,870 --> 00:15:53,380
Então, ao invés de apenas mostrar ou esconder algo ou mudando a cor,

270
00:15:53,380 --> 00:15:56,130
você pode realmente fazê-lo animado.

271
00:15:56,130 --> 00:16:00,760
Aqui está a documentação, se você quiser dar uma olhada na documentação extensa para ele.

272
00:16:00,760 --> 00:16:04,760
Mas eu estou indo cobrir os principais.

273
00:16:04,760 --> 00:16:12,030
Há o show e propriedades esconder.

274
00:16:12,030 --> 00:16:14,510
Mostrar / ocultar ID, na verdade, corresponde a toda esta caixa,

275
00:16:14,510 --> 00:16:18,190
então se eu escondê-lo, ele simplesmente desaparecerá.

276
00:16:18,190 --> 00:16:24,210
E eu posso mostrá-lo novamente se eu quero fazê-lo voltar.

277
00:16:24,210 --> 00:16:26,340
E ele está de volta. Ele não chegou a desaparecer,

278
00:16:26,340 --> 00:16:30,670
Eu realmente não removê-lo da página, eu só definir a propriedade CSS de visibilidade para escondido

279
00:16:30,670 --> 00:16:34,030
então você não pode mais vê-lo.

280
00:16:34,030 --> 00:16:39,250
Há também deslizar para cima e deslizar para baixo, que lhe permite ter esse efeito.

281
00:16:39,250 --> 00:16:47,050
Ele desliza até desaparecer, e depois desaparece

282
00:16:47,050 --> 00:16:53,210
você pode deslizar para baixo para fazê-lo voltar. E agora ele está de volta.

283
00:16:53,210 --> 00:16:57,650
Há também esse efeito de fade, que - Fade ID corresponde a esta caixa.

284
00:16:57,650 --> 00:17:01,200
Se eu desaparecer com isso, então ele vai desaparecer lentamente.

285
00:17:01,200 --> 00:17:04,490
Eu também pode disfarçá-la, e ele vai voltar.

286
00:17:04,490 --> 00:17:08,930
Você também pode fazer fade to, que é específico para a função de desaparecer.

287
00:17:08,930 --> 00:17:12,589
Você pode tê-lo desaparecer a qualquer opacidade específico que você deseja.

288
00:17:12,589 --> 00:17:16,869
Então, se você desaparecer lentamente para 0,5, ele vai se tornar metade visível.

289
00:17:16,869 --> 00:17:22,630
Eu posso fazê-lo ir para 0,1, e de volta a 1 para torná-lo completamente visível novamente.

290
00:17:22,630 --> 00:17:24,760
Isso é apenas outra animação que você pode fazer.

291
00:17:24,760 --> 00:17:26,750
>> Também existem os efeitos de alternância.

292
00:17:26,750 --> 00:17:33,410
Então, eu estou indo para selecionar o ID de alternância, o que corresponde a esta caixa,

293
00:17:33,410 --> 00:17:38,970
e nessa div você pode chamar de alternância, se é visível ele se tornará invisível,

294
00:17:38,970 --> 00:17:42,320
se é invisível se tornará visível novamente.

295
00:17:42,320 --> 00:17:44,440
Então, eu só chamou esta função de alternância duas vezes, a primeira foi

296
00:17:44,440 --> 00:17:48,380
a mesma coisa que esconder, a segunda chamada foi a mesma coisa que um show.

297
00:17:48,380 --> 00:17:53,510
E você também pode fazer isso com um fade de alternância,

298
00:17:53,510 --> 00:17:55,730
que faz a mesma coisa, exceto que ele realmente desaparece.

299
00:17:55,730 --> 00:17:59,410
E mesmo com a lâmina alternar.

300
00:17:59,410 --> 00:18:01,460
Há efeitos encadeados, bem como, o que significa

301
00:18:01,460 --> 00:18:05,520
Se você selecionar um elemento e apenas chamar um monte de métodos de animação sobre ele,

302
00:18:05,520 --> 00:18:07,400
se você queria a desvanecer-se para fora, em seguida, deslize para baixo,

303
00:18:07,400 --> 00:18:11,040
e, em seguida, esconder e, em seguida, desaparecer dentro, ele vai fazê-las em uma fileira.

304
00:18:11,040 --> 00:18:24,920
Então desapareceu, voltou - por alguma razão, a pele não aconteceu.

305
00:18:24,920 --> 00:18:30,030
Vamos testá-lo. Sim, por isso desapareceu e então deslizou para longe.

306
00:18:30,030 --> 00:18:32,230
E há muito mais. Você pode usar a função de animar

307
00:18:32,230 --> 00:18:35,370
para criar suas próprias animações, que é bastante complexa,

308
00:18:35,370 --> 00:18:38,790
mas fornece extensibilidade infinita.

309
00:18:38,790 --> 00:18:40,630
Você pode fazer qualquer tipo de animação que você deseja.

310
00:18:40,630 --> 00:18:44,230
Você também pode usar fila a fila várias animações ao mesmo tempo.

311
00:18:44,230 --> 00:18:47,340
Então, se você quer algo para voar em toda a página,

312
00:18:47,340 --> 00:18:49,860
slides a partir do canto superior direito para o canto inferior esquerdo, você pode fazer isso,

313
00:18:49,860 --> 00:18:55,240
e só tem um monte de ações que vão um após o outro.

314
00:18:55,240 --> 00:18:57,490
>> A próxima coisa que vamos falar é sobre os eventos.

315
00:18:57,490 --> 00:19:02,090
Eventos permitem que você - até agora, apenas fui escrevendo coisas para o console

316
00:19:02,090 --> 00:19:04,870
e essa é uma maneira de fazer isso acontecer,

317
00:19:04,870 --> 00:19:08,020
mas em uma página real, você não vai ser capaz de

318
00:19:08,020 --> 00:19:10,020
fazer as coisas de tipo de usuário no console.

319
00:19:10,020 --> 00:19:12,050
Você quer que as coisas aconteçam automaticamente.

320
00:19:12,050 --> 00:19:18,060
Para isso, você precisa usar os eventos que ativam em algum determinado acontecimento do evento.

321
00:19:18,060 --> 00:19:21,340
Você pode verificar a documentação de todos os detalhes.

322
00:19:21,340 --> 00:19:24,030
Então vamos ver. Queremos mostrar ou ocultar a caixa,

323
00:19:24,030 --> 00:19:29,340
mas agora esse botão não faz nada, porque eu não implementá-lo ainda.

324
00:19:29,340 --> 00:19:35,420
Eu estou indo para ir para a página HTML atual.

325
00:19:35,420 --> 00:19:38,560
Aqui está o slide. Há um div para o slide.

326
00:19:38,560 --> 00:19:41,230
Ele tem a classe de corrediça.

327
00:19:41,230 --> 00:19:46,890
Há o texto. Agora, há essa caixa eo botão de caixa.

328
00:19:46,890 --> 00:19:52,900
Como poderíamos realmente fazer isso desaparecer?

329
00:19:52,900 --> 00:19:58,250
Primeiro de tudo, vamos escrever uma função que faz com que o ID caixa de desaparecer.

330
00:19:58,250 --> 00:20:01,820
Esta é a sintaxe para funtion, vamos chamá-lo de hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Ela não tem nenhum argumento, porque não há argumentos a serem tomadas.

332
00:20:06,130 --> 00:20:08,950
Podemos selecionar o ID de caixa.

333
00:20:08,950 --> 00:20:15,020
Então, usando o jQuery escolha, podemos selecionar a caixa de ID,

334
00:20:15,020 --> 00:20:17,700
e depois é só fazê-la desaparecer.

335
00:20:17,700 --> 00:20:20,690
Vamos fazê-lo desaparecer.

336
00:20:20,690 --> 00:20:27,390
Se corremos esta função no console atual,

337
00:20:27,390 --> 00:20:33,380
poderíamos definir esta função, podemos chamar hideTheBox, e ele funciona.

338
00:20:33,380 --> 00:20:36,650
Mas queremos que isso aconteça quando o botão for realmente pressionado.

339
00:20:36,650 --> 00:20:40,950
Para isso, temos que usar um evento.

340
00:20:40,950 --> 00:20:45,500
Para vincular um evento para algum botão específico ou algum acontecimento ação,

341
00:20:45,500 --> 00:20:50,040
temos que selecionar o elemento que o evento irá desencadear -

342
00:20:50,040 --> 00:20:52,650
ou que acionará o evento, sorry.

343
00:20:52,650 --> 00:20:57,220
>> Então, primeiro de tudo, vamos selecionar o botão da caixa ID

344
00:20:57,220 --> 00:20:59,610
porque esse é o botão, e agora, para esse botão,

345
00:20:59,610 --> 00:21:02,750
queremos criar uma animação quando é clicado.

346
00:21:02,750 --> 00:21:05,040
Portanto, não há essa função clique.

347
00:21:05,040 --> 00:21:08,470
Ele permite que você ligar uma outra função a ele.

348
00:21:08,470 --> 00:21:12,320
Esta função tem outra função como um argumento

349
00:21:12,320 --> 00:21:14,310
podemos passar a função hideTheBox,

350
00:21:14,310 --> 00:21:20,950
e sempre que este botão é clicado, essa função será executada automaticamente.

351
00:21:20,950 --> 00:21:24,850
Então, isso vai funcionar se nós salvar isso, eu vou atualizar,

352
00:21:24,850 --> 00:21:33,460
e - um segundo, me desculpe.

353
00:21:33,460 --> 00:21:44,770
Deixe-me corrigir isso muito rapidamente.

354
00:21:44,770 --> 00:21:50,680
Okay. Lá vamos nós. Então, agora a caixa está desaparecendo quando clicamos no botão.

355
00:21:50,680 --> 00:21:55,470
Nós também podemos mudar isso para apenas fadeToggle,

356
00:21:55,470 --> 00:22:00,020
mudá-lo apenas para ocultar ou mostrar a caixa,

357
00:22:00,020 --> 00:22:03,850
e isso também vai trabalhar muito, se atualizar.

358
00:22:03,850 --> 00:22:08,550
Nós podemos escondê-lo, também podemos mostrá-lo, e que vai continuar a trabalhar.

359
00:22:08,550 --> 00:22:12,210
Outra coisa que podemos fazer é, nós realmente não temos que definir esta função hideTheBox

360
00:22:12,210 --> 00:22:15,050
antes de chamar a função de clique.

361
00:22:15,050 --> 00:22:17,640
Então, ao invés de definir a função e chamando hideTheBox,

362
00:22:17,640 --> 00:22:20,310
vamos apenas chamá-lo se isso for clicado.

363
00:22:20,310 --> 00:22:22,310
Assim, podemos defini-lo anonimamente aqui,

364
00:22:22,310 --> 00:22:25,070
que é um recurso que tem JavaScript.

365
00:22:25,070 --> 00:22:29,720
Você pode definir uma função, normalmente, diríamos função hideTheBox

366
00:22:29,720 --> 00:22:34,490
com argumentos, mas em vez disso, podemos apenas dizer que funcionar sem argumentos,

367
00:22:34,490 --> 00:22:36,870
iniciar a chaveta para definir a função,

368
00:22:36,870 --> 00:22:40,780
fechar essa encaracolado cinta, e depois é só definir a função aqui,

369
00:22:40,780 --> 00:22:45,130
dentro da primeira e da última parêntesis parêntesis

370
00:22:45,130 --> 00:22:47,860
que correspondem aos argumentos da função de clique.

371
00:22:47,860 --> 00:22:53,320
Então, nós estamos passando esta função, podemos copiar esta linha de código aqui,

372
00:22:53,320 --> 00:22:55,450
e que vai fazer exatamente a mesma coisa.

373
00:22:55,450 --> 00:22:57,290
E agora não temos essa função fadeTheBox aleatória

374
00:22:57,290 --> 00:22:59,960
que está sentado, sem motivo aparente.

375
00:22:59,960 --> 00:23:02,070
A função foi definida de forma anónima, ele não tem um nome.

376
00:23:02,070 --> 00:23:08,060
Ele só será executada quando clicamos no botão da caixa.

377
00:23:08,060 --> 00:23:12,180
Portanto, refrescante, mais uma vez, mais uma vez, e você pode ver que ele ainda funciona.

378
00:23:12,180 --> 00:23:16,700
E é assim que você criar eventos.

379
00:23:16,700 --> 00:23:19,190
>> Há uma série de diferentes eventos que podemos utilizar.

380
00:23:19,190 --> 00:23:23,540
Vou voltar a usar o console para apenas mostrar como estas funcionam.

381
00:23:23,540 --> 00:23:28,210
Os IDs de cada um destes corresponde a cada caixa.

382
00:23:28,210 --> 00:23:33,020
Portanto, esta caixa é clique ID, esta é a chave de identificação, e este é um mouse ID.

383
00:23:33,020 --> 00:23:36,120
Só mais uma coisa é que não há essa função ação, ao invés de digitá-lo a cada vez,

384
00:23:36,120 --> 00:23:41,610
Na verdade, eu fui em frente e definir esta função ação aqui.

385
00:23:41,610 --> 00:23:46,860
Ele faz a mesma coisa que a função hideTheBox.

386
00:23:46,860 --> 00:23:51,340
Fica esta caixa e quer se desvanece-lo ou desvanece-lo dentro

387
00:23:51,340 --> 00:23:54,110
E é por isso que somos capazes de usá-lo aqui.

388
00:23:54,110 --> 00:24:00,350
Então, se clicar nesse clique ID, queremos fazer a caixa desaparecer ou reaparecer.

389
00:24:00,350 --> 00:24:03,610
É a mesma coisa que o botão que tivemos no último slide.

390
00:24:03,610 --> 00:24:07,450
Agora, depois chamamos a isso, podemos clicar sobre isso e caixa desaparecerá,

391
00:24:07,450 --> 00:24:10,160
em seguida, clique nele novamente ea caixa vai reaparecer.

392
00:24:10,160 --> 00:24:12,480
Isso é muito simples. Dê um duplo clique faz a mesma coisa,

393
00:24:12,480 --> 00:24:15,660
exceto que exige um duplo clique.

394
00:24:15,660 --> 00:24:19,030
Então, se você clicar sobre ele uma vez e clique sobre ele novamente nada vai acontecer,

395
00:24:19,030 --> 00:24:21,140
mas se você clique duas vezes rapidamente, ele vai desaparecer.

396
00:24:21,140 --> 00:24:23,310
Se você der um duplo clique novamente, ele vai voltar.

397
00:24:23,310 --> 00:24:25,250
Então, isso é muito simples.

398
00:24:25,250 --> 00:24:31,170
Entrada de teclado é meio estranho, eu não acho que ele realmente funciona neste exemplo

399
00:24:31,170 --> 00:24:37,670
porque o baixo, Tecla para cima e pressione a tecla e outras acções-chave

400
00:24:37,670 --> 00:24:47,190
ativar, não importa o elemento que você ligar para ele.

401
00:24:47,190 --> 00:24:51,410
Por exemplo, mesmo que liguei tecla para baixo para o corpo ou qualquer outra coisa completamente,

402
00:24:51,410 --> 00:24:55,950
em seguida, ele ainda ativar não importa - não é específico.

403
00:24:55,950 --> 00:25:00,190
Eu não tenho que ser clicando neste e pressione uma tecla para fazer qualquer coisa desaparecer.

404
00:25:00,190 --> 00:25:04,470
Ele seria ativado, independentemente de qual elemento Atualmente estou dentro

405
00:25:04,470 --> 00:25:06,880
Então, esses realmente não trabalhar neste exemplo

406
00:25:06,880 --> 00:25:13,180
porque ele não me reconhecer como entrar entrada no div entrada do teclado.

407
00:25:13,180 --> 00:25:15,740
>> Mas se você olhar para as ações do mouse,

408
00:25:15,740 --> 00:25:19,620
o primeiro é passar, e que ele pode fazer parte dessa usando CSS.

409
00:25:19,620 --> 00:25:24,280
Se você usar o CSS, você pode criá-lo de modo que, se você passar o mouse sobre alguma coisa,

410
00:25:24,280 --> 00:25:28,940
em seguida, suas mudanças de estilo.

411
00:25:28,940 --> 00:25:32,170
Mas usando jQuery você pode mudar os estilos de outras coisas também.

412
00:25:32,170 --> 00:25:37,120
Assim, por exemplo, nós vamos chamar a ação se passa o mouse sobre essa div.

413
00:25:37,120 --> 00:25:39,660
Isso significa que se passa o mouse sobre ele, em seguida, a caixa irá desaparecer.

414
00:25:39,660 --> 00:25:42,430
Se afastar-se dela, a caixa volta a aparecer.

415
00:25:42,430 --> 00:25:45,090
Se chamarmos isso e passar o mouse sobre ele, a caixa não desaparecer,

416
00:25:45,090 --> 00:25:47,050
e assim que se afastar, ele volta.

417
00:25:47,050 --> 00:25:49,750
Se chamarmos esta função pairar sobre o ID mouse,

418
00:25:49,750 --> 00:25:54,380
o que corresponde a esta caixa, em seguida, se passar o mouse sobre a caixa,

419
00:25:54,380 --> 00:26:00,440
em seguida, a caixa vai realmente desaparecer - ele está sendo badalado agora, mas -

420
00:26:00,440 --> 00:26:06,310
se afastar, ele vai reaparecer. Agora é para trás por algum motivo.

421
00:26:06,310 --> 00:26:12,720
O mouse entrar e funções de movimento do mouse é um pouco semelhante, mas um pouco diferente.

422
00:26:12,720 --> 00:26:16,470
Rato entrar só é ativado quando o mouse entra na caixa, como esperado.

423
00:26:16,470 --> 00:26:19,210
Então, se você passar para ele, ele vai desaparecer.

424
00:26:19,210 --> 00:26:23,210
Mas isso não vai reaparecer quando você se afastar, você vai ter que voltar para ele para que ele volte.

425
00:26:23,210 --> 00:26:25,590
Há também a função de movimento do mouse, o que irá activar

426
00:26:25,590 --> 00:26:29,300
sempre que o mouse é ainda presente na caixa.

427
00:26:29,300 --> 00:26:32,430
Por isso, vamos continuar em frente, entrando e saindo.

428
00:26:32,430 --> 00:26:35,660
E é realmente de registro - parece que é só entrando e saindo,

429
00:26:35,660 --> 00:26:39,140
mas na verdade é um registro muito mais ações do que isso,

430
00:26:39,140 --> 00:26:43,550
Então, quando você se afastar ele só vai continuar, porque registrado como um mil deles.

431
00:26:43,550 --> 00:26:46,620
Talvez não um mil. Talvez cinco.

432
00:26:46,620 --> 00:26:50,200
Ele registra mais do que isso.

433
00:26:50,200 --> 00:26:53,280
A questão é que todas as ações do mouse, há um monte deles.

434
00:26:53,280 --> 00:26:55,480
Você pode ler sobre os outros, mas todos eles são ligeiramente diferentes,

435
00:26:55,480 --> 00:26:57,700
e você pode escolher qualquer um que você precisa

436
00:26:57,700 --> 00:27:02,130
para qualquer propósito específico que você está tentando fazer.

437
00:27:02,130 --> 00:27:05,060
>> A próxima coisa que eu vou falar é AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, eu sei que não cobrem JavaScript em tanta profundidade deste ano,

439
00:27:09,340 --> 00:27:11,770
então eu só vou falar sobre AJAX, em geral, por um minuto.

440
00:27:11,770 --> 00:27:15,210
AJAX está para Asynchronous JavaScript and XML.

441
00:27:15,210 --> 00:27:19,030
É basicamente, por exemplo, quando você está no Facebook e empurra-lhe uma notificação,

442
00:27:19,030 --> 00:27:23,060
isso é porque AJAX está sendo executado em seu navegador.

443
00:27:23,060 --> 00:27:25,800
A cada dois segundos, o navegador é realmente

444
00:27:25,800 --> 00:27:29,420
indo para servidores do Facebook, pedindo-lhes, você tem nada de novo para mim,

445
00:27:29,420 --> 00:27:31,980
e, em seguida, volta para você.

446
00:27:31,980 --> 00:27:36,320
Isto permite-lhe enviar solicitações para um servidor

447
00:27:36,320 --> 00:27:38,660
sem realmente ter que carregar a página.

448
00:27:38,660 --> 00:27:42,040
Então, normalmente, se você está apenas usando PHP e banco de dados,

449
00:27:42,040 --> 00:27:45,480
você tem que atualizar a página antes que você pode obter novas informações a partir do servidor.

450
00:27:45,480 --> 00:27:48,770
Mas o uso de AJAX, você pode puxar para que novas informações constantemente,

451
00:27:48,770 --> 00:27:52,250
ou puxar por ela quando você clica em um botão ou qualquer coisa assim.

452
00:27:52,250 --> 00:27:56,140
Então, isso nos permite enviar pedidos sem recarregar a página,

453
00:27:56,140 --> 00:27:58,130
e podemos usar GET ou pedidos POST.

454
00:27:58,130 --> 00:28:05,370
>> Recebo pedidos são, por exemplo, se você para Google.com

455
00:28:05,370 --> 00:28:10,900
e fazer q = teste. Isso é dar-lhes um teste de consulta.

456
00:28:10,900 --> 00:28:15,890
E isso é um pedido GET porque está passando os parâmetros na URL próprio.

457
00:28:15,890 --> 00:28:19,250
A solicitação POST é como se você estivesse enviando via post.

458
00:28:19,250 --> 00:28:22,500
É como se você colocá-lo em uma carta e enviá-lo para eles,

459
00:28:22,500 --> 00:28:25,140
mas eles realmente não ver o conteúdo. Eles não são visíveis na URL.

460
00:28:25,140 --> 00:28:31,040
Você não pode digitá-lo diretamente no, você tem que enviá-lo quase em segredo.

461
00:28:31,040 --> 00:28:33,880
Está em um post.

462
00:28:33,880 --> 00:28:38,660
Mas o uso de jQuery, você pode fazer solicitações GET e POST

463
00:28:38,660 --> 00:28:42,740
muito mais facilmente do que você normalmente poderia usando apenas JavaScript simples.

464
00:28:42,740 --> 00:28:50,140
Você pode consultar APIs usando requisições GET, e você também pode verificar informações de login.

465
00:28:50,140 --> 00:28:54,400
Na próxima página, eu criei este, que pergunta: "O que tem para o almoço?"

466
00:28:54,400 --> 00:28:58,230
usando o Harvard comida API, então vamos puxar isso.

467
00:28:58,230 --> 00:29:01,840
Este é apenas um exemplo de como você pode usar jQuery para fazer uma requisição GET para uma API

468
00:29:01,840 --> 00:29:04,200
e obter informações de volta a partir dele.

469
00:29:04,200 --> 00:29:07,090
Então, nós queremos ver o menu para hoje,

470
00:29:07,090 --> 00:29:10,560
e queremos ver o que há para o almoço.

471
00:29:10,560 --> 00:29:16,500
Aqui está a URL para criar uma solicitação GET em jQuery.

472
00:29:16,500 --> 00:29:18,600
você usa o $. obter função.

473
00:29:18,600 --> 00:29:22,290
O primeiro argumento é o URL, por isso exatamente o que você está consultando.

474
00:29:22,290 --> 00:29:27,200
Em seguida, o argumento seguinte é uma função que é executada quando o pedido GET está completa.

475
00:29:27,200 --> 00:29:29,980
Então você enviar algum pedido ao servidor, esperar por ele para voltar.

476
00:29:29,980 --> 00:29:33,770
Quando ele voltar, você vai tomar alguma ação com os dados que está de volta a partir do servidor.

477
00:29:33,770 --> 00:29:37,520
Vamos em frente e codificar isso também.

478
00:29:37,520 --> 00:29:42,110
Eu não codificar isso, quer, de propósito.

479
00:29:42,110 --> 00:29:46,660
Aqui está o TODO. Primeiro de tudo, vamos usar a ligação de evento

480
00:29:46,660 --> 00:29:50,820
de modo que quando este botão é pressionado, nós enviar uma solicitação GET.

481
00:29:50,820 --> 00:29:53,410
E quando esse pedido GET retorna com alguns dados,

482
00:29:53,410 --> 00:29:57,290
vamos escrevê-lo para essa refeição Informações ID div.

483
00:29:57,290 --> 00:30:02,860
Primeiro de tudo, vamos selecionar o botão de alimentação ID.

484
00:30:02,860 --> 00:30:07,320
Quando é clicado, queremos que ele faça alguma coisa.

485
00:30:07,320 --> 00:30:11,930
Vamos apenas torná-lo um fuction anônimo, como antes.

486
00:30:11,930 --> 00:30:15,550
Pode embrulhar as chaves,

487
00:30:15,550 --> 00:30:18,530
e quando este botão é pressionado, queremos enviar uma solicitação GET

488
00:30:18,530 --> 00:30:20,750
para verificar o que há para o almoço.

489
00:30:20,750 --> 00:30:24,970
Para fazer isso, podemos apenas digitar $. Obter.

490
00:30:24,970 --> 00:30:28,850
Esta é uma função jQuery, usando o sinal de dólar.

491
00:30:28,850 --> 00:30:31,430
É preciso um par de argumentos. O primeiro deles é a URL,

492
00:30:31,430 --> 00:30:34,450
a segunda é a função de retorno de chamada, a função que é chamado

493
00:30:34,450 --> 00:30:37,740
quando este pedido na verdade, retorna.

494
00:30:37,740 --> 00:30:39,890
Vamos apenas construir a URL primeiro.

495
00:30:39,890 --> 00:30:44,650
Nós podemos fazê-lo a partir da API que David escreveu.

496
00:30:44,650 --> 00:30:51,360
Indo para lá, podemos ver que é food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
e depois é só passar os nomes dos parâmetros que você gostaria.

498
00:30:54,140 --> 00:30:57,760
Assim, um parâmetro é o valor 1.

499
00:30:57,760 --> 00:31:00,910
Parece que o padrão de data, data de início, os padrões de hoje

500
00:31:00,910 --> 00:31:03,110
Se você não digitar nada, e data final também defaults

501
00:31:03,910 --> 00:31:05,930
até hoje, se você não entra nada.

502
00:31:05,930 --> 00:31:10,790
Isso é o que queremos. Queremos apenas obter a informação para hoje.

503
00:31:10,790 --> 00:31:12,950
>> Queremos que o formato a ser em JSON.

504
00:31:12,950 --> 00:31:15,570
Isso é apenas arbitrária, você pode usar qualquer forma que você quiser.

505
00:31:15,570 --> 00:31:18,950
Você pode usar CSV, mas JSON é JavaScript Object Notation.

506
00:31:18,950 --> 00:31:24,150
É muito fácil para JavaScript para entender o que isso significa,

507
00:31:24,150 --> 00:31:27,110
e nós podemos imprimi-lo mais facilmente dessa forma.

508
00:31:27,110 --> 00:31:30,490
Então, vamos solicitá-lo em JSON, e pedido o almoço vamos.

509
00:31:30,490 --> 00:31:37,660
Então refeição = almoço. Basta escrever o URL, vamos voltar aqui.

510
00:31:37,660 --> 00:31:41,290
Há menus. O primeiro parâmetro é output = JSON

511
00:31:41,290 --> 00:31:44,640
porque é isso que nós queremos, e você separe os parâmetros com um "e".

512
00:31:44,640 --> 00:31:48,940
O segundo parâmetro é - Eu não me lembro.

513
00:31:48,940 --> 00:31:52,170
Refeição. E nós queremos refeição = almoço.

514
00:31:52,170 --> 00:31:57,390
Você pode testar esta URL, digitando-o em seu navegador e ir para ele.

515
00:31:57,390 --> 00:32:03,120
Ele vai te dar alguma saída. É apenas um monte de coisas que há para o almoço.

516
00:32:03,120 --> 00:32:10,410
É neste formato feio. Queremos imprimi-lo em nossa página em um formato melhor.

517
00:32:10,410 --> 00:32:12,580
Assim, o URL está correto, agora só precisamos escrever uma função

518
00:32:12,580 --> 00:32:18,300
para chamar de volta quando o pedido for bem sucedida.

519
00:32:18,300 --> 00:32:20,430
Esta função irá realmente ter um argumento. Será dados.

520
00:32:20,430 --> 00:32:25,650
Os dados são o que vem de volta a partir da solicitação GET após a solicitação GET é feito.

521
00:32:25,650 --> 00:32:28,860
Nós podemos fazer as chaves, aqui nós escrevemos a função anônima

522
00:32:28,860 --> 00:32:33,900
que executa, usando esses dados quando temos as informações de volta.

523
00:32:33,900 --> 00:32:37,840
Assim, os dados, quando digitado neste URL,

524
00:32:37,840 --> 00:32:41,540
é isso que os dados vai parecer. Vai ser essa enorme cadeia.

525
00:32:41,540 --> 00:32:48,610
Mas a coisa boa é, JavaScript pode analisá-lo usando a função JSON.parse.

526
00:32:48,610 --> 00:32:54,950
Então, vamos criar uma nova variável chamada de análise de dados.

527
00:32:54,950 --> 00:32:57,060
E de análise de dados é um array de objetos.

528
00:32:57,060 --> 00:33:04,200
Cada objeto contém informações como - bem, vamos dar uma olhada.

529
00:33:04,200 --> 00:33:08,980
Ele tem uma data, uma refeição, categoria, receita, todas essas outras coisas.

530
00:33:08,980 --> 00:33:10,860
Então vamos imprimir o nome de cada um.

531
00:33:10,860 --> 00:33:13,790
Vamos repetir ao longo de toda a variedade de coisas que podemos voltar a partir dele,

532
00:33:13,790 --> 00:33:17,570
e apenas imprimir cada um - imprimir o nome de cada um.

533
00:33:17,570 --> 00:33:22,670
Este é um loop for.

534
00:33:22,670 --> 00:33:26,030
>> JavaScript tem esta sintaxe útil onde você pode criar uma variável e loop sobre uma matriz,

535
00:33:26,030 --> 00:33:30,150
e i é var apenas o iterador, então ao invés de ter que fazer var i = 0,

536
00:33:30,150 --> 00:33:40,290
eu era menor do que o comprimento, i + +, você pode apenas fazer var i nos dados analisados.

537
00:33:40,290 --> 00:33:47,060
Neste exemplo, os dados analisados ​​(i) irá corresponder ao elemento atual

538
00:33:47,060 --> 00:33:49,850
da matriz, o objeto real.

539
00:33:49,850 --> 00:33:51,720
E nós queremos tirar o nome dele.

540
00:33:51,720 --> 00:33:54,170
Então vamos fazer nome.

541
00:33:54,170 --> 00:33:57,000
E a última coisa é que nós vamos ter alguns jQuery novamente.

542
00:33:57,000 --> 00:34:02,660
Na verdade, adicioná-lo ao div, esta refeição Informações div que está atualmente vazia.

543
00:34:02,660 --> 00:34:05,430
Então, vamos selecionar isso.

544
00:34:05,430 --> 00:34:13,870
Vamos usar jQuery e selecione refeição Informações div ID ou info refeição ID, sorry.

545
00:34:13,870 --> 00:34:16,580
Queremos acrescentar a isto.

546
00:34:16,580 --> 00:34:21,030
Se fizéssemos teste, por exemplo, seria apenas substituí-lo a cada momento.

547
00:34:21,030 --> 00:34:29,190
Assim, podemos apenas acrescentar este.

548
00:34:29,190 --> 00:34:31,889
O elemento atual do array, vamos obter o nome de fora,

549
00:34:31,889 --> 00:34:38,159
e vamos anexá-lo ao final da refeição Informações ID div.

550
00:34:38,159 --> 00:34:40,120
E, em seguida, apenas para torná-la mais limpa,

551
00:34:40,120 --> 00:34:51,550
nós também vamos acrescentar uma quebra de linha por isso não é tudo em uma linha.

552
00:34:51,550 --> 00:34:55,280
Então, se tudo correr bem, que deve ser bom para -

553
00:34:55,280 --> 00:34:57,220
em primeiro lugar, sempre que este botão é clicado,

554
00:34:57,220 --> 00:35:00,070
ele irá enviar uma requisição GET para esta URL.

555
00:35:00,070 --> 00:35:02,500
Quando os dados de volta a partir dele, que vai analisá-lo,

556
00:35:02,500 --> 00:35:06,950
transformá-lo em JSON, varrer toda a matriz que representa esses dados,

557
00:35:06,950 --> 00:35:10,310
e, em seguida, acrescente o nome e uma quebra de linha

558
00:35:10,310 --> 00:35:16,500
para cada linha nesta refeição Informações ID que antes era vazio.

559
00:35:16,500 --> 00:35:18,910
Então, voltando a esta página, vamos atualizar,

560
00:35:18,910 --> 00:35:23,690
clique, descobrir - ele não funciona. Isso é lamentável.

561
00:35:23,690 --> 00:35:25,830
E é aí que vem dentro de depuração

562
00:35:25,830 --> 00:35:30,070
Index.html, linha 1.

563
00:35:30,070 --> 00:35:57,210
É interessante.

564
00:35:57,210 --> 00:35:59,720
Tudo bem, bem, ao invés de gastar o tempo fazendo isso, eu só vou

565
00:35:59,720 --> 00:36:07,070
puxar para cima o arquivo feito que eu tenho, que é a versão completa.

566
00:36:07,070 --> 00:36:13,710
Eu não tenho certeza qual é a diferença, mas podemos simplesmente abrir isso em seu lugar.

567
00:36:13,710 --> 00:36:19,740
E vamos para o AJAX, e isso deve funcionar corretamente.

568
00:36:19,740 --> 00:36:21,730
Isso é o que foi para o almoço de hoje,

569
00:36:21,730 --> 00:36:24,870
em nenhuma ordem particular, com aspas em torno dele, por isso não é o mais bonito.

570
00:36:24,870 --> 00:36:27,090
Mas, obviamente, se você estivesse fazendo isso para um projeto final,

571
00:36:27,090 --> 00:36:30,120
você poderia torná-la melhor.

572
00:36:30,120 --> 00:36:32,530
Mas isso é apenas um exemplo simples de como você faz a solicitação GET.

573
00:36:32,530 --> 00:36:34,580
E se olharmos para o código real, eu estou supondo, eu tenho certeza

574
00:36:34,580 --> 00:36:39,690
ainda é praticamente o mesmo.

575
00:36:39,690 --> 00:37:04,990
Ah, eu esqueci de convertê-lo em uma string, é isso.

576
00:37:04,990 --> 00:37:07,920
Não, ele ainda não está funcionando. De qualquer maneira, aqui está o código completo real

577
00:37:07,920 --> 00:37:10,300
pelo que este deve ser semelhante,

578
00:37:10,300 --> 00:37:16,400
e ele faz a mesma coisa que o que eu implementado.

579
00:37:16,400 --> 00:37:22,760
Quando você clica no botão, ele usa GET JSON para analisar os dados automaticamente.

580
00:37:22,760 --> 00:37:29,190
Leva os dados de volta com ele e percorre todo o conjunto

581
00:37:29,190 --> 00:37:32,770
e imprime o - o que é para o almoço de hoje, o nome dele,

582
00:37:32,770 --> 00:37:38,020
e acrescenta uma quebra de linha após cada linha.

583
00:37:38,020 --> 00:37:41,100
É assim que você utilizar a função GET.

584
00:37:41,100 --> 00:37:44,040
>> Você também pode usar POST, que eu não tenho tempo

585
00:37:44,040 --> 00:37:47,940
escrever-se um exemplo para isso, mas podemos olhar para a documentação.

586
00:37:47,940 --> 00:37:53,220
Se você olhar para jquery.post,

587
00:37:53,220 --> 00:37:55,510
você pode ver que é quase a mesma coisa.

588
00:37:55,510 --> 00:38:01,650
Você tem uma URL, mas em vez de passar parâmetros utilizando -

589
00:38:01,650 --> 00:38:03,990
apenas colocá-los na cadeia para a URL em si,

590
00:38:03,990 --> 00:38:06,300
você tem que passar nesta variável dados

591
00:38:06,300 --> 00:38:11,990
que é basicamente um array, um dicionário que mapeia os parâmetros aos valores.

592
00:38:11,990 --> 00:38:17,690
Você passar esse, e que envia-los na utilização de um POST.

593
00:38:17,690 --> 00:38:20,790
E uma vez que você tem, então você pode ter uma função de sucesso

594
00:38:20,790 --> 00:38:23,930
que é executado quando os dados de volta.

595
00:38:23,930 --> 00:38:26,430
Caso contrário, é exatamente o mesmo. Então, usando POST,

596
00:38:26,430 --> 00:38:29,970
você pode querer usar POST, por exemplo, se você tem um formulário de entrada

597
00:38:29,970 --> 00:38:35,780
você deixar as pessoas senhas de entrada para ele, e enviar as senhas off

598
00:38:35,780 --> 00:38:41,850
para o seu script de back-end, para verificar no banco de dados se o usuário é válido ou não.

599
00:38:41,850 --> 00:38:46,700
Você pode fazer isso tudo usando jQuery em vez de ter que atualizar a página em tudo.

600
00:38:46,700 --> 00:38:52,160
É assim que eu implementado no blog que eu mostrei anteriormente.

601
00:38:52,160 --> 00:38:59,530
Se formos para o portal final e sair, sair,

602
00:38:59,530 --> 00:39:02,600
Sair não funciona.

603
00:39:02,600 --> 00:39:13,360
Bem, deixe-me abri-lo em uma nova janela.

604
00:39:13,360 --> 00:39:16,580
Aqui há uma senha, e eu estava indo para digitar algo aleatório.

605
00:39:16,580 --> 00:39:18,590
Ele não funciona, mas você pode ver que nós não

606
00:39:18,590 --> 00:39:20,840
realmente tem que atualizar a página em tudo.

607
00:39:20,840 --> 00:39:24,610
O código, se você quiser olhar para ele,

608
00:39:24,610 --> 00:39:37,460
é todos disponíveis aqui.

609
00:39:37,460 --> 00:39:45,680
Assim, o código que eu escrevi no ano passado em algum momento.

610
00:39:45,680 --> 00:39:47,790
Como você pode ver aqui, estamos enviando uma solicitação POST.

611
00:39:47,790 --> 00:39:50,400
Eu tenho um arquivo chamado login.php no back-end,

612
00:39:50,400 --> 00:39:53,860
que verifica se a senha é válida.

613
00:39:53,860 --> 00:39:56,000
Os parâmetros que passam em são senha, mapeado para

614
00:39:56,000 --> 00:40:00,030
a entrada que está na caixa de entrada atualmente.

615
00:40:00,030 --> 00:40:04,110
E quando os dados vem de volta, vamos verificar.

616
00:40:04,110 --> 00:40:07,680
Se os dados forem falsas, então dizemos senha incorreta, deslize-o para baixo,

617
00:40:07,680 --> 00:40:09,580
e apenas fazê-lo desaparecer depois disso.

618
00:40:09,580 --> 00:40:12,320
Caso contrário, vamos carregar a página de administração.

619
00:40:12,320 --> 00:40:15,080
E tudo isso foi feito usando JSON.

620
00:40:15,080 --> 00:40:18,510
Neste muitas linhas de código, você pode simplesmente passar os dados para o back-end,

621
00:40:18,510 --> 00:40:21,020
verificar se ele está correto, verifique se você está conectado corretamente,

622
00:40:21,020 --> 00:40:24,200
e realmente responder a ele, redirecionando a pessoa para a página correta

623
00:40:24,200 --> 00:40:29,760
ou não deixá-los entrar e dizer-lhes que eles tinham uma senha incorreta.

624
00:40:29,760 --> 00:40:33,040
Então, isso é um exemplo de como você pode usar jQuery POST

625
00:40:33,040 --> 00:40:37,010
enviar uma solicitação POST para o seu back-end,

626
00:40:37,010 --> 00:40:42,400
verificar se alguém está conectado corretamente.

627
00:40:42,400 --> 00:40:44,820
>> Tudo bem, então isso é todos os exemplos que eu tive, e todas as coisas que eu queria cobrir.

628
00:40:44,820 --> 00:40:47,110
Essas são as principais coisas que jQuery permite que você faça:

629
00:40:47,110 --> 00:40:52,640
selecionar elementos, modificá-los usando manipulação de DOM,

630
00:40:52,640 --> 00:40:56,340
você pode adicionar efeitos, ativar as coisas em determinados eventos,

631
00:40:56,340 --> 00:41:00,430
e também fazer pedidos AJAX muito transparente e fácil.

632
00:41:00,430 --> 00:41:02,840
Então, obrigado por ter vindo ou assistindo,

633
00:41:02,840 --> 00:41:06,230
e se você tiver alguma dúvida, é só me avisar. Sim?

634
00:41:06,230 --> 00:41:12,730
[Estudante] Voltar quando você apareceu, você tinha JSON após a solicitação POST entre aspas,

635
00:41:12,730 --> 00:41:15,170
e eu só estava me perguntando o que isso fez.

636
00:41:15,170 --> 00:41:20,070
>> Sim, eu vejo. A questão era que, no exemplo que acabei de mostrar,

637
00:41:20,070 --> 00:41:25,790
havia a palavra JSON entre aspas em torno da -

638
00:41:25,790 --> 00:41:31,690
Vou retirá-lo de novo - em torno da função POST.

639
00:41:31,690 --> 00:41:43,320
Eu estou apenas puxando-o para cima para mostrar.

640
00:41:43,320 --> 00:41:46,890
Então aqui está esta solicitação POST, e não é isso JSON entre aspas.

641
00:41:46,890 --> 00:41:50,280
Isso só define o que nós estamos esperando a saída para ser.

642
00:41:50,280 --> 00:41:54,070
Então, se passar em JSON como o tipo de dados esperado,

643
00:41:54,070 --> 00:41:56,070
não é uma exigência, mas se passarmos em,

644
00:41:56,070 --> 00:41:58,590
em seguida, os dados serão automaticamente analisado como JSON.

645
00:41:58,590 --> 00:42:00,600
Então, não temos de chamar a função de análise JSON sobre ele,

646
00:42:00,600 --> 00:42:02,620
ele só vai acontecer automaticamente.

647
00:42:02,620 --> 00:42:05,150
E se você der uma olhada na documentação para POST,

648
00:42:05,150 --> 00:42:09,850
existe este tipo de dados variável, o tipo de dados que se espera do servidor.

649
00:42:09,850 --> 00:42:12,660
O padrão é uma suposição inteligente que pode estar errado,

650
00:42:12,660 --> 00:42:15,520
assim você pode deixá-lo em branco, mas é apenas o tipo de dados

651
00:42:15,520 --> 00:42:21,680
na codificação que você está usando, se é JSON ou XML ou outra coisa.

652
00:42:21,680 --> 00:42:25,280
>> Quaisquer outras perguntas?

653
00:42:25,280 --> 00:42:27,300
Tudo bem. Se você tiver quaisquer outras perguntas, sinta-se livre para me enviar e-mail

654
00:42:27,300 --> 00:42:30,830
em vshekhawat@college.harvard.edu,

655
00:42:30,830 --> 00:42:34,860
e os slides e código deverá estar disponível on-line em breve.

656
00:42:34,860 --> 00:42:42,810
Boa sorte com seus projetos finais, espero que você usar jQuery.

657
00:42:42,810 --> 00:42:46,810
[CS50.TV]