1
00:00:00,120 --> 00:00:05,250
Então, agora que você ouviu minha introdução para Jay Cory, bem como minha própria opinião sobre o ensino da

2
00:00:05,430 --> 00:00:11,250
consulta de Jay e a abordagem que estamos levando aqui, o que resumir brevemente, nós começamos com o javascript de vanilla e

3
00:00:11,760 --> 00:00:15,130
agora estamos confiantes de fazer coisas Dessa forma, estamos passando para Jay Querrey.

4
00:00:15,510 --> 00:00:20,770
Então, a primeira coisa sobre a qual precisamos conversar é como incluímos uma consulta em um aplicativo.

5
00:00:20,880 --> 00:00:26,430
Então eu vou começar com uma aplicação muito simples aqui apenas adicionando na minha idade para a boca e

6
00:00:26,430 --> 00:00:27,250
dar-lhe um título.

7
00:00:27,370 --> 00:00:28,310
Jay queery demo

8
00:00:30,840 --> 00:00:33,390
Jay em Jay queery é sempre minúsculo.

9
00:00:33,450 --> 00:00:37,990
Não me pergunte por que Q é maiúsculo tudo isso em apenas alguns elementos.

10
00:00:38,030 --> 00:00:38,310
J.

11
00:00:38,310 --> 00:00:39,380
Demo Corey.

12
00:00:39,870 --> 00:00:46,710
Assim como e talvez um aliado ou dois e estes serão apenas um texto aleatório.

13
00:00:47,100 --> 00:00:49,980
OK, então três aliados, etc. você.

14
00:00:50,040 --> 00:00:52,440
E H-1 e irá economizar.

15
00:00:52,710 --> 00:00:55,920
E, claro, iremos em frente e abriremos isso no navegador.

16
00:00:56,580 --> 00:00:58,960
E aqui está a nossa página de demonstração.

17
00:00:59,190 --> 00:01:04,220
Existem algumas maneiras de adicionar uma consulta à nossa própria aplicação e aos arquivos html da nossa idade.

18
00:01:04,440 --> 00:01:07,140
Lembre-se de que a consulta J é apenas um arquivo javascript.

19
00:01:07,230 --> 00:01:10,080
Não é diferente dos arquivos que escrevemos até agora.

20
00:01:10,080 --> 00:01:13,320
Como o nosso jogo de cores, esquiva A-S ou nossa lista de tarefas.

21
00:01:13,410 --> 00:01:18,570
Sim ou qualquer outro arquivo de javascript que criamos e vinculados usando uma tag de script.

22
00:01:18,570 --> 00:01:21,990
Então, em ambos os métodos, aqui estamos usando uma tag de script.

23
00:01:21,990 --> 00:01:24,900
A única diferença é o atributo de origem.

24
00:01:25,080 --> 00:01:30,600
código para uma consulta e eles o colocaram no mesmo diretório que meu projeto e depois eu liguei-lo.

25
00:01:30,600 --> 00:01:36,020
E neste caso, estamos ligando ao arquivo localmente e o que isso significa é que eu baixei o

26
00:01:36,120 --> 00:01:43,530
Então, eu vou mostrar-lhe como nós fazemos isso se vamos à documentação J Crew e nós clicamos no download e então precisamos escolher uma versão

27
00:01:43,530 --> 00:01:49,740
e eu vou seguir com o último que é 2. 1 ponto 4 e temos algumas

28
00:01:49,740 --> 00:01:50,460
opções.

29
00:01:50,550 --> 00:01:56,700
Podemos baixar a consulta Jey de compressão 2. 0 ponto 1. 4 e a versão de desenvolvimento descompactada.

30
00:01:57,180 --> 00:01:58,500
Eu vou fazer os dois.

31
00:01:58,500 --> 00:02:03,330
Normalmente, eu apenas faria isso porque é comprimido o ponto inteiro é que é mais rápido carregar.

32
00:02:03,630 --> 00:02:05,380
Mas eu quero mostrar o que parece.

33
00:02:05,550 --> 00:02:09,960
Então, eu vou pegar o descompactor e o comprimido e você pode ver se nós conseguimos

34
00:02:09,960 --> 00:02:10,860
dois arquivos diferentes.

35
00:02:10,860 --> 00:02:17,820
Nós temos Jay queery para apontar um ponto para Dot J. S. e nós perguntamos 2. 1 por cento para os homens.

36
00:02:18,030 --> 00:02:19,080
Sim.

37
00:02:19,080 --> 00:02:22,310
Então vou abrir os dois aqui em sublime.

38
00:02:22,530 --> 00:02:26,880
Basta arrastá-los e vamos dar uma olhada neles.

39
00:02:26,970 --> 00:02:29,720
Então este arquivo aqui é a versão descompactada.

40
00:02:29,970 --> 00:02:31,810
E enquanto eu percorrer.

41
00:02:32,310 --> 00:02:35,730
Observe que é apenas um arquivo de javascript muito longo.

42
00:02:36,000 --> 00:02:44,730
São mais de 9000 linhas para que possamos incluir este arquivo ou podemos incluir a versão minimizada que é o mesmo código por trás

43
00:02:44,730 --> 00:02:50,160
das cenas, mas quando algo é minimizado ou compactado, todos os espaços em branco são

44
00:02:50,160 --> 00:02:50,730
retirados.

45
00:02:50,730 --> 00:02:56,940
Então, todos esses retorna todos os comentários desapareceram e todos os nomes de variáveis ​​e

46
00:02:56,940 --> 00:03:06,150
propriedades são encurtados em caracteres únicos para que você possa ver que temos coisas como em ou temos coisas como ABC que definitivamente

47
00:03:06,150 --> 00:03:12,630
não são os nomes de propriedades e argumentos dentro se o arquivo descompactado para que possamos

48
00:03:12,630 --> 00:03:13,320
incluir um.

49
00:03:13,500 --> 00:03:17,580
E para fazer isso, precisamos ter certeza de que nós adicionaremos os arquivos ao diretório correto.

50
00:03:17,940 --> 00:03:22,540
Então eu vou fazer uma nova pasta em vez do meu projeto e eu vou chamá-lo de lib.

51
00:03:22,710 --> 00:03:24,650
E não precisamos fazer isso.

52
00:03:24,690 --> 00:03:30,780
Nós poderíamos simplesmente arrastar nossos dois arquivos para estar no mesmo diretório que o nosso time h.

53
00:03:30,780 --> 00:03:33,100
Vou arquivar e vou começar com essa maneira de mostrar.

54
00:03:33,330 --> 00:03:41,730
Então eu vou abrir meu arquivo H Tim L e adicionar um script aqui tag de script e eu preciso de iguais de

55
00:03:41,760 --> 00:03:50,130
fonte e eu preciso escrever esse nome aqui mesmo, que é J consulta para apontar um ponto para Dot J us e precisamos

56
00:03:50,130 --> 00:03:50,740
disso traço.

57
00:03:50,760 --> 00:03:55,750
Então eu vou copiá-lo e apenas definir a origem para um ponto de consulta 2. 1. 4.

58
00:03:55,780 --> 00:03:56,050
J.

59
00:03:56,060 --> 00:04:04,560
Sim e contanto que este arquivo que o demo J Curry envelheceu no mesmo lugar que Jay Querrey 2. 1 14: 4 devemos ser

60
00:04:04,890 --> 00:04:05,760
bons.

61
00:04:06,030 --> 00:04:11,670
Então, vou salvá-lo e abri-lo no navegador e atualizar.

62
00:04:11,790 --> 00:04:17,150
Se abrimos o console, podemos digitar a palavra J Query e clicar em Enter.

63
00:04:17,250 --> 00:04:22,050
E se não tivermos um erro que nos diga que a consulta foi adicionada corretamente à nossa aplicação.

64
00:04:22,560 --> 00:04:29,370
javascript da biblioteca para que não os confundamos e não desordenamos nosso diretório estrutura, portanto não é obrigatória.

65
00:04:29,370 --> 00:04:35,640
Então, uma maneira melhor de estruturar isso é realmente colocá-los em um diretório separado chamado de lib

66
00:04:35,640 --> 00:04:40,350
apenas para que possamos separar nossos próprios arquivos de javascript dos arquivos de

67
00:04:40,350 --> 00:04:42,220
Como você viu, tínhamos uma consulta Jay trabalhando.

68
00:04:42,540 --> 00:04:46,320
Mas uma maneira melhor de fazê-lo é fazer um diretório e podemos chamar isso de nada.

69
00:04:46,440 --> 00:04:48,320
Você poderia chamar J-curve se você quisesse.

70
00:04:48,480 --> 00:04:51,820
Eu vou com lib e então eu preciso mudar meu link aqui.

71
00:04:51,840 --> 00:04:59,330
Minha fonte para ser crítica da libra Jay consulta correu para apontar um ponto quatro e eu vou fazer o meu.

72
00:04:59,550 --> 00:05:01,140
Sim e você não precisa fazer isso.

73
00:05:01,140 --> 00:05:03,660
Não existe diferença na funcionalidade.

74
00:05:03,660 --> 00:05:07,980
A única diferença é que isso é mais rápido para carregar, mas preciso ter aquele aqui.

75
00:05:08,220 --> 00:05:10,350
Então, para reiterar, não precisamos de ambos.

76
00:05:10,380 --> 00:05:13,810
Nós só precisamos de um e precisamos ligar a esse corretamente.

77
00:05:14,250 --> 00:05:15,670
Então vamos verificar se isso funcionou.

78
00:05:15,710 --> 00:05:18,660
Se eu atualizar a taxa que funciona bem.

79
00:05:18,720 --> 00:05:24,390
Você pode digitar consulta J e também podemos digitar sinal de dólar e, se o trabalho que conhecemos, essa consulta

80
00:05:24,390 --> 00:05:25,680
de folha está corretamente instalada.

81
00:05:26,070 --> 00:05:31,640
Então, essa é a primeira maneira de baixar uma consulta localmente e, em seguida, associá-la à tag de script.

82
00:05:31,840 --> 00:05:38,310
Há outra opção, porém, que é usar um CD no CD e representa a rede distribuída em conteúdo e

83
00:05:38,760 --> 00:05:44,640
pensa nisso como apenas uma maneira de pegar um arquivo online, sem realmente ter que fazer o

84
00:05:44,640 --> 00:05:45,750
download para sua máquina.

85
00:05:45,810 --> 00:05:52,410
Então, eu vou te mostrar se nós apenas copiamos esse você Arel aqui mesmo, o que acontece de ser AJ queery CDN para a

86
00:05:52,410 --> 00:05:53,680
versão 2. 0 1. 4.

87
00:05:53,770 --> 00:05:58,660
E se eu apenas for para você, você verá que é apenas o arquivo J Corey aqui.

88
00:05:58,920 --> 00:06:04,380
que há muitos deles on-line e que funcionará da mesma maneira que o link para o arquivo aqui localmente.

89
00:06:04,380 --> 00:06:09,850
O que podemos fazer é vincular a este você Arel ou qualquer outro CD de J queery e você sabe

90
00:06:09,870 --> 00:06:14,850
A única diferença é que isso realmente irá carregar um pouco mais rápido porque é

91
00:06:15,360 --> 00:06:20,410
local no nosso computador e, se o substituímos pelo CD, não será perceptível para nós.

92
00:06:20,530 --> 00:06:25,800
Mas, sob o capô, demora um pouco mais, é claro, é muito mais fácil e simples de

93
00:06:25,920 --> 00:06:30,430
usar porque não precisamos baixar uma cópia da consulta Jay para cada aplicativo que fazemos.

94
00:06:30,780 --> 00:06:33,010
Então eu vou atualizar.

95
00:06:33,750 --> 00:06:37,350
E se nós digitarmos J consulta aqui ainda deve funcionar e isso acontece.

96
00:06:37,770 --> 00:06:40,190
Por fim, vou mostrar-lhe como encontrei esse CDN.

97
00:06:40,230 --> 00:06:47,580
Basta abrir uma nova guia e procurar Cdn Jay queery e se apenas pesquisarmos o Cdn e depois qualquer

98
00:06:47,580 --> 00:06:50,770
outra biblioteca que veja alguns outros mais tarde.

99
00:06:50,810 --> 00:06:52,110
Mike J consulta.

100
00:06:52,110 --> 00:06:53,650
Você verá que temos um monte de links.

101
00:06:53,850 --> 00:06:55,850
Então, a consulta Jay tem uma versão oficial.

102
00:06:55,860 --> 00:07:02,100
Há o Cdn dodge city NJ s dot com e temos um monte de você ou então aqui que podemos copiar.

103
00:07:02,910 --> 00:07:07,040
Teríamos que prestar atenção à versão, então isso é para 3. 00.

104
00:07:07,200 --> 00:07:14,210
Se vamos para 2. 20 ponto 4 nos dá uma descompactar a versão normal e uma versão modificada.

105
00:07:14,470 --> 00:07:17,090
E apenas para mostrar se eu vou para você, você está bem.

106
00:07:17,310 --> 00:07:18,720
Eu os vejo em um arquivo.

107
00:07:19,110 --> 00:07:20,490
Então, para encerrar.

108
00:07:20,700 --> 00:07:22,130
De qualquer maneira, funciona.

109
00:07:22,230 --> 00:07:28,440
Precisamos de uma tag de script em ambos os casos, mas a fonte será um arquivo local ou um arquivo hospedado

110
00:07:28,440 --> 00:07:32,000
em algum lugar em que estamos vinculando o uso de um CDN.

111
00:07:32,100 --> 00:07:36,870
A última coisa que você quer fazer é dar uma rápida prévia de 30 segundos do que ela parece.

112
00:07:37,110 --> 00:07:39,930
Então, aqui está um pouco do que a consulta J parece.

113
00:07:39,930 --> 00:07:45,300
A primeira coisa que você pode notar é que há um sinal de dólar sendo usado em quatro lugares diferentes.

114
00:07:45,300 --> 00:07:51,480
Nós temos um monte de métodos como o Dom clicar que ver o ponto SS desaparecer.

115
00:07:51,690 --> 00:07:57,900
Então, o que esse código realmente fará é selecionar um botão com gatilho ID e quando é clicado, ele

116
00:07:57,900 --> 00:08:04,350
executa todo esse código e, quando for clicado, vamos mudar a cor de fundo do corpo para ser amarelo.

117
00:08:04,980 --> 00:08:08,290
Vamos desvanecer todas as imagens na página.

118
00:08:08,370 --> 00:08:13,470
Vai demorar 3 segundos para desvanecer-se e, em seguida, quando o desvanecimento for concluído, vamos

119
00:08:13,470 --> 00:08:15,340
remover essas três imagens da página.

120
00:08:15,750 --> 00:08:18,380
Então, clique no botão com o disparador IDF.

121
00:08:18,390 --> 00:08:23,580
Mude a cor do corpo desaparecer imagens em três segundos e, em seguida, remova as imagens quando terminarem.

122
00:08:23,970 --> 00:08:26,640
Tudo bem, então a previsão de velocidade de uma consulta foi essa.

123
00:08:26,730 --> 00:08:29,100
Agora vamos começar a escrever alguns no próximo vídeo.