1
00:00:00,120 --> 00:00:15,130
Alors maintenant que vous avez entendu mon introduction à Jay Cory ainsi que mon propre opinion sur l'enseignement de requête Jay et l'approche que nous prenons ici qui pour résumer brièvement, nous avons commencé avec javascript vanilla et maintenant que nous sommes confiants faire des choses De cette façon, nous allons passer à Jay Querrey.

2
00:00:15,510 --> 00:00:20,770
Donc, la première chose dont nous avons besoin de parler est comment pouvons-nous inclure une requête dans une application.

3
00:00:20,880 --> 00:00:27,250
Donc je vais commencer avec une application très simple ici en ajoutant juste dans mon âge à la bouche et lui donner un titre.

4
00:00:27,370 --> 00:00:33,390
Jay queery démo Jay sur Jay queery est toujours minuscules.

5
00:00:33,450 --> 00:00:37,990
Ne me demandez pas pourquoi Q Est majuscule tout cela en quelques éléments.

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

7
00:00:38,310 --> 00:00:39,380
Corey démo.

8
00:00:39,870 --> 00:00:46,710
Juste comme ça et peut-être un allié ou deux et ce sera juste du texte aléatoire.

9
00:00:47,100 --> 00:00:49,980
OK si trois alliés etc vous.

10
00:00:50,040 --> 00:00:52,440
Et H-1 et sauver.

11
00:00:52,710 --> 00:00:55,920
Et bien sûr, nous allons aller de l'avant et ouvrir cela dans le navigateur.

12
00:00:56,580 --> 00:00:58,960
Et voici notre page de démonstration.

13
00:00:59,190 --> 00:01:04,220
Il ya quelques façons d'ajouter une requête à notre propre application et à nos propres fichiers html âge.

14
00:01:04,440 --> 00:01:07,140
N'oubliez pas que la requête J est juste un fichier javascript.

15
00:01:07,230 --> 00:01:10,080
Ce n'est pas différent des fichiers que nous avons écrits jusqu'à présent.

16
00:01:10,080 --> 00:01:13,320
Comme notre jeu de couleurs dodge A-S ou notre liste de tâches.

17
00:01:13,410 --> 00:01:18,570
Oui ou les fichiers javascript que nous avons créés et liés à l'aide d'une balise de script.

18
00:01:18,570 --> 00:01:21,990
Dans les deux méthodes, nous utilisons une balise de script.

19
00:01:21,990 --> 00:01:24,900
La seule différence est l'attribut source.

20
00:01:25,080 --> 00:01:36,020
Et dans ce cas, nous sommes enchaînant vers le fichier localement et ce que cela signifie est que j'ai téléchargé le code pour une requête et ils le mettent dans le même répertoire que mon projet et puis je lié à elle.

21
00:01:36,120 --> 00:01:50,460
Donc je vais vous montrer comment nous faisons que si nous allons à la documentation J Crew et nous cliquons sur le téléchargement et puis nous avons besoin de choisir une version et je vais aller avec la dernière qui est 2.1 point 4 et nous avons un Peu d'options.

22
00:01:50,550 --> 00:01:57,130
Nous pouvons télécharger la production comprimée Jey requête 2.0 point 1.4 et la version de développement non compressé.

23
00:01:57,180 --> 00:01:58,500
Je vais faire les deux.

24
00:01:58,500 --> 00:02:03,530
Habituellement, je ferais juste celui-ci parce qu'il est comprimé le point entier est qu'il est plus rapide à charger.

25
00:02:03,630 --> 00:02:05,380
Mais je veux vous montrer à quoi ça ressemble.

26
00:02:05,550 --> 00:02:10,860
Donc, je vais obtenir le décompresser un et compressé et vous pouvez voir si nous obtenons deux fichiers différents.

27
00:02:10,860 --> 00:02:17,820
Nous avons Jay queery de pointer un point pour Dot J.S. Et nous avons interrogé J 2,1 pour cent pour les hommes.

28
00:02:18,030 --> 00:02:19,080
Oui.

29
00:02:19,080 --> 00:02:22,310
Donc, je vais ouvrir les deux en sublime ici.

30
00:02:22,530 --> 00:02:26,880
Il suffit de les faire glisser et nous allons jeter un oeil à eux.

31
00:02:26,970 --> 00:02:29,720
Donc ce fichier ici est la version non compressée.

32
00:02:29,970 --> 00:02:31,810
Et comme je défiler à travers.

33
00:02:32,310 --> 00:02:35,730
Notez que c'est juste un très long fichier javascript.

34
00:02:36,000 --> 00:02:50,730
C'est plus de 9000 lignes donc nous pouvons inclure ce fichier ou nous pouvons inclure la version minimisée qui est le même code dans les coulisses, mais quand quelque chose est minimisé ou compressé tous les espaces sont retirés.

35
00:02:50,730 --> 00:03:13,320
Donc, tous ces retours tous les commentaires sont allés et tous les noms de variables et de propriétés sont raccourcies à des caractères simples, vous pouvez voir que nous avons des choses comme em ou nous avons des choses comme ABC qui ne sont certainement pas les noms des propriétés et des arguments à l'intérieur si Le fichier non compressé afin que nous puissions inclure l'un ou l'autre.

36
00:03:13,500 --> 00:03:17,580
Et pour ce faire, nous devons juste nous assurer que nous ajoutons les fichiers dans le répertoire correct.

37
00:03:17,940 --> 00:03:22,540
Donc je vais faire un nouveau dossier au lieu de mon projet et je vais l'appeler lib.

38
00:03:22,710 --> 00:03:24,650
Et nous n'avons pas à le faire.

39
00:03:24,690 --> 00:03:30,780
Nous pourrions simplement faire glisser nos deux fichiers pour être dans le même répertoire que notre équipe h.

40
00:03:30,780 --> 00:03:33,100
Je vais déposer et je vais commencer avec elle de cette façon à vous montrer.

41
00:03:33,330 --> 00:03:50,740
Donc, je vais ouvrir mon fichier H Tim L et ajouter un script ici tag script et j'ai besoin de source égale et j'ai besoin d'écrire ce nom ici qui est J question de pointer un point pour Dot J nous et nous avons besoin de tiret.

42
00:03:50,760 --> 00:03:55,750
Donc, je vais le copier et il suffit de définir la source à un tableau de bord 2. 1.4.

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

44
00:03:56,060 --> 00:04:05,760
Oui et aussi longtemps que ce fichier J Curry démo vieilli il est au même endroit que Jay Querrey 2.1 14: 4, nous devrions être bons.

45
00:04:06,030 --> 00:04:11,670
Donc, je vais enregistrer et l'ouvrir dans le navigateur et rafraîchir.

46
00:04:11,790 --> 00:04:17,150
Si nous ouvrons la console, nous pouvons effectivement taper le mot J Query et appuyer sur enter.

47
00:04:17,250 --> 00:04:22,050
Et si nous n'obtenons pas une erreur qui nous indique que la requête est correctement ajoutée à notre application.

48
00:04:22,560 --> 00:04:40,350
Donc, une meilleure façon de structurer cela est de mettre réellement dans un répertoire distinct appelé lib pour que nous puissions séparer nos propres fichiers javascript à partir de fichiers javascript de bibliothèque afin que nous ne les confondons pas et nous n'emballons pas notre répertoire Structure de sorte qu'il n'est pas obligatoire à tous.

49
00:04:40,350 --> 00:04:42,220
Comme vous l'avez vu, nous avions Jay travail de consultation.

50
00:04:42,540 --> 00:04:46,320
Mais une meilleure façon de le faire est de faire un répertoire et nous pouvons appeler cela n'importe quoi.

51
00:04:46,440 --> 00:04:48,320
Vous pourriez l'appeler J-courbe si vous le vouliez.

52
00:04:48,480 --> 00:04:51,820
Je vais aller avec lib et puis je dois changer mon lien ici.

53
00:04:51,840 --> 00:04:59,330
Ma source d'être lib slash requête Jay pointillé au point un point quatre et je vais faire le mien.

54
00:04:59,550 --> 00:05:01,140
Oui et vous n'avez pas à le faire.

55
00:05:01,140 --> 00:05:03,660
Il n'y a aucune différence dans la fonctionnalité.

56
00:05:03,660 --> 00:05:07,980
La seule différence est que c'est plus rapide à charger, mais j'ai besoin d'avoir celui-là.

57
00:05:08,220 --> 00:05:10,350
Donc, pour réitérer, nous n'avons pas besoin des deux.

58
00:05:10,380 --> 00:05:13,810
Nous avons juste besoin d'un et nous devons lier à celui-ci correctement.

59
00:05:14,250 --> 00:05:15,670
Vérifions donc que cela a fonctionné.

60
00:05:15,710 --> 00:05:18,660
Si je rafraîchir le taux qui fonctionne bien.

61
00:05:18,720 --> 00:05:25,680
Vous pouvez taper J query et nous pouvons aussi taper dollar sign et si ces travaux nous savons que la requête feuille est correctement installée.

62
00:05:26,070 --> 00:05:31,640
C'est donc la première façon de télécharger une requête localement, puis de la lier à la balise script.

63
00:05:31,840 --> 00:05:45,750
Il ya une autre option, cependant, qui est d'utiliser un CD dans le CD et stands pour le réseau de contenu distribué et pense que c'est juste une façon de saisir un fichier en ligne sans avoir à le télécharger sur votre machine.

64
00:05:45,810 --> 00:05:53,680
Donc, je vais vous montrer si nous copions juste ce vous Arel ici qui se trouve être AJ queery CDN pour la version 2.0 1.4.

65
00:05:53,770 --> 00:05:58,660
Et si je vais juste à que vous URL, vous verrez que c'est juste le fichier J Corey ici.

66
00:05:58,920 --> 00:06:09,850
Ce que nous pouvons faire est de lier à ce que vous Arel ou tout autre CD de J queery et vous savez qu'il ya beaucoup d'entre eux en ligne et qui fonctionnera de la même manière que le lien vers le fichier ici localement.

67
00:06:09,870 --> 00:06:20,410
La seule différence est que cela va effectivement charger un peu plus vite parce que c'est local sur notre ordinateur et si nous le remplacer par le CD, il ne sera pas perceptible pour nous.

68
00:06:20,530 --> 00:06:30,430
Mais sous le capot il prend un peu plus longtemps, mais bien sûr, il est beaucoup plus facile et plus simple à utiliser, car nous n'avons pas à télécharger une copie de requête Jay pour chaque application que nous faisons.

69
00:06:30,780 --> 00:06:33,010
Alors je vais rafraîchir.

70
00:06:33,750 --> 00:06:37,350
Et si nous tapons J requête ici il devrait toujours fonctionner et il le fait.

71
00:06:37,770 --> 00:06:40,190
Enfin, je vais vous montrer comment j'ai trouvé ce CDN.

72
00:06:40,230 --> 00:06:50,770
Il suffit d'ouvrir un nouvel onglet et de chercher Cdn Jay queery et si nous faisons juste une recherche de Cdn et puis toute autre bibliothèque qui verra certains d'autres plus tard.

73
00:06:50,810 --> 00:06:52,110
Mike J question.

74
00:06:52,110 --> 00:06:53,650
Vous verrez que nous avons un tas de liens.

75
00:06:53,850 --> 00:06:55,850
Donc, Jay a une requête officielle.

76
00:06:55,860 --> 00:07:02,880
Il ya le Cdn dodge ville NJ s point com et nous avons un tas de vous ou bien ici que nous pouvons simplement copier.

77
00:07:02,910 --> 00:07:07,040
Nous aurions à prêter attention à la version donc c'est pour 3,00.

78
00:07:07,200 --> 00:07:14,210
Si nous passons au point 2.20, il nous donne un uncompress la version normale et une version modifiée.

79
00:07:14,470 --> 00:07:17,090
Et juste pour vous montrer si je vais à ce que vous êtes bien.

80
00:07:17,310 --> 00:07:18,720
Je les vois dans un fichier.

81
00:07:19,110 --> 00:07:20,490
Donc pour conclure.

82
00:07:20,700 --> 00:07:22,130
De toute façon fonctionne.

83
00:07:22,230 --> 00:07:32,000
Nous avons besoin d'une balise de script dans les deux cas, mais la source est soit un fichier local ou un fichier qui est hébergé quelque part que nous sommes en liaison à l'aide d'un CDN.

84
00:07:32,100 --> 00:07:36,870
La dernière chose que vous voulez faire est de vous donner un aperçu rapide de 30 secondes de ce qu'elle ressemble à la cour.

85
00:07:37,110 --> 00:07:39,930
Alors, voici un peu de ce que ressemble à la requête J.

86
00:07:39,930 --> 00:07:45,300
La première chose que vous pourriez remarquer est qu'il ya un signe dollar utilisé dans quatre endroits différents.

87
00:07:45,300 --> 00:07:51,480
Nous avons un tas de méthodes comme le clic Dom qui voient SS dot fade out dot remove.

88
00:07:51,690 --> 00:08:04,940
Donc, ce que ce code va réellement faire est de sélectionner un bouton avec le déclencheur d'ID et quand il est cliqué, il exécute tout ce code et quand il est cliqué, nous allons changer la couleur de fond du corps pour être jaune.

89
00:08:04,980 --> 00:08:08,290
Nous allons effacer toutes les images sur la page.

90
00:08:08,370 --> 00:08:15,340
Ça va prendre 3 secondes pour les faner et puis quand le fade out est fait, nous allons supprimer ces trois images de la page.

91
00:08:15,750 --> 00:08:18,380
Cliquez sur le bouton avec le déclencheur IDF.

92
00:08:18,390 --> 00:08:23,580
Changer les images de fondu de couleur de corps plus de trois secondes, puis supprimer des images quand ils sont faits.

93
00:08:23,970 --> 00:08:26,640
D'accord, c'était l'aperçu de la vitesse d'une requête.

94
00:08:26,730 --> 00:08:29,100
Maintenant, nous allons commencer à écrire quelques-uns dans la prochaine vidéo.