1 00:00:00,000 --> 00:00:07,440 2 00:00:07,440 --> 00:00:08,180 >> TOMAS REIMERS: Salut, tout le monde. 3 00:00:08,180 --> 00:00:09,250 Tomas Reimers de mon nom. 4 00:00:09,250 --> 00:00:10,500 >> MIKE RIZZO: Et je suis Mike Rizzo. 5 00:00:10,500 --> 00:00:12,990 >> TOMAS REIMERS: Nous sommes deux CS50s TS. 6 00:00:12,990 --> 00:00:18,910 Et aujourd'hui, nous sommes en tête du séminaire sur JavaScript et CSS pour les applications web. 7 00:00:18,910 --> 00:00:22,140 Si vous voulez suivre, la lien est juste là. 8 00:00:22,140 --> 00:00:25,190 Et voulez-vous mettre en place brièvement sur l'ordinateur? 9 00:00:25,190 --> 00:00:27,460 >> Il ya le lien. 10 00:00:27,460 --> 00:00:30,390 C'est un petit site, qui a des liens à toutes les ressources que nous allons être 11 00:00:30,390 --> 00:00:36,490 vous dirigeant aujourd'hui et aussi a beaucoup de informations utiles écrite par nous 12 00:00:36,490 --> 00:00:39,680 En savoir plus en profondeur quand vous retournez, et vous essayez de vous rappeler ce 13 00:00:39,680 --> 00:00:42,166 exactement avons-nous dit, ce que vous étiez parler, et cetera. 14 00:00:42,166 --> 00:00:43,870 >> MIKE RIZZO: Très bien. 15 00:00:43,870 --> 00:00:44,890 Commençons donc. 16 00:00:44,890 --> 00:00:45,700 >> TOMAS REIMERS: Donc, vous voulez commencer? 17 00:00:45,700 --> 00:00:45,970 OK. 18 00:00:45,970 --> 00:00:47,170 >> MIKE RIZZO: Ouais. 19 00:00:47,170 --> 00:00:51,730 Donc, nous voulions d'abord commencer par une large vue d'ensemble sur l'Internet et 20 00:00:51,730 --> 00:00:54,240 types de fichiers lors de la conception des sites Web. 21 00:00:54,240 --> 00:00:57,550 Bien que cette présentation, nous voulons entrer en JavaScript beaucoup beaucoup 22 00:00:57,550 --> 00:01:00,320 plus tard, nous avons voulu commencer avec juste, en quelque sorte, comme la vue de l'oeil d'un oiseau 23 00:01:00,320 --> 00:01:03,270 de ce qu'est un site Web et comment de réfléchir à la conception d'un 24 00:01:03,270 --> 00:01:04,800 site pour le début. 25 00:01:04,800 --> 00:01:08,370 >> Alors vous les gars, à ce point - avec elle être vendredi soir - devrait avoir 26 00:01:08,370 --> 00:01:11,000 soumis finances de votre CS50 problème fixe. 27 00:01:11,000 --> 00:01:15,260 Heureusement, c'était un bon goût de ce que la programmation web peut être. 28 00:01:15,260 --> 00:01:18,261 Mais ici, nous voulons, en quelque sorte, donner vous un autre goût, aussi. 29 00:01:18,261 --> 00:01:23,190 >> TOMAS REIMERS: Donc, juste pour récapituler ce que qui se passe, lorsque vous tapez votre URL à 30 00:01:23,190 --> 00:01:26,650 votre navigateur Web, cette URL se cherché dans l'ordinateur. 31 00:01:26,650 --> 00:01:28,590 Et votre ordinateur est connecté à un autre ordinateur, 32 00:01:28,590 --> 00:01:29,890 qui accueille ce site. 33 00:01:29,890 --> 00:01:33,150 OK, donc quand vous allez sur google.com, vous êtes reliée à l'une de Google 34 00:01:33,150 --> 00:01:36,496 ordinateurs, qui a la fichiers pour google.com. 35 00:01:36,496 --> 00:01:38,750 >> Il demande alors à un fichier spécifique. 36 00:01:38,750 --> 00:01:40,020 Donc, si vous allez à - 37 00:01:40,020 --> 00:01:41,550 Je ne sais pas - 38 00:01:41,550 --> 00:01:48,170 example.com / index.html ou / test.html, vous allez demander 39 00:01:48,170 --> 00:01:49,340 ce fichier spécifique. 40 00:01:49,340 --> 00:01:52,780 Et le serveur web de passer pour revenir à vous. 41 00:01:52,780 --> 00:01:54,910 >> Puis, une fois que vous passez par ce fichier - 42 00:01:54,910 --> 00:01:57,750 43 00:01:57,750 --> 00:01:59,950 une fois que vous êtes ordinateur est que fichier - il va commencer 44 00:01:59,950 --> 00:02:00,820 pour construire une page web. 45 00:02:00,820 --> 00:02:03,020 Alors maintenant, il a le fichier HTML, qui est un peu comme la 46 00:02:03,020 --> 00:02:05,170 la structure de la page Web. 47 00:02:05,170 --> 00:02:08,620 Le fichier HTML pourrait également référence fichiers CSS qui définissent la 48 00:02:08,620 --> 00:02:09,889 style de la page Web. 49 00:02:09,889 --> 00:02:12,970 >> Fichiers JavaScript, qui définit interaction avec la page Web. 50 00:02:12,970 --> 00:02:15,200 Les fichiers d'image, qui sont de simples images. 51 00:02:15,200 --> 00:02:19,450 Et peut-être un lien vers d'autres fichiers HTML, que vous pourrez ensuite visiter. 52 00:02:19,450 --> 00:02:22,656 53 00:02:22,656 --> 00:02:24,380 >> MIKE RIZZO: Bon, d'accord. 54 00:02:24,380 --> 00:02:28,980 Alors vous les gars ont tous, peut-être, soigneusement configurer votre hôte local 55 00:02:28,980 --> 00:02:30,810 sur votre machine virtuelle. 56 00:02:30,810 --> 00:02:35,650 Et qui vient, en quelque sorte, c'est la locale domaine que votre ordinateur héberge seulement 57 00:02:35,650 --> 00:02:38,760 pour vous, à votre propre adresse IP. 58 00:02:38,760 --> 00:02:43,300 >> Donc, dans ce cadre, vous pouvez ajouter à lui vos propres pages web. 59 00:02:43,300 --> 00:02:47,655 Je veux dire, dans CS50 finances, vous devriez avoir Ajout de quelques pages HTML, qui sont, 60 00:02:47,655 --> 00:02:49,410 en quelque sorte, enveloppé dans l'emballage de PHP. 61 00:02:49,410 --> 00:02:54,690 Mais finalement, ce que vos pages PHP délivrer en sortie ont été été HTML. 62 00:02:54,690 --> 00:02:58,210 >> Mais en repensant au tout début du PSET, nous avons dû mettre 63 00:02:58,210 --> 00:03:00,890 les autorisations pour tout, non? 64 00:03:00,890 --> 00:03:07,270 Donc cela permet juste fondamentalement nous savons qui peut lire, écrire, et peut-être 65 00:03:07,270 --> 00:03:08,730 exécuter chacun des fichiers. 66 00:03:08,730 --> 00:03:11,870 Donc, nous allons faire un rapide - hm? 67 00:03:11,870 --> 00:03:15,660 >> TOMAS REIMERS: Donc, nous allons faire une démonstration rapide. 68 00:03:15,660 --> 00:03:19,560 Donc, juste pour vous rappeler, quand vous se connecter à l'ordinateur de Google - 69 00:03:19,560 --> 00:03:20,690 quiconque - 70 00:03:20,690 --> 00:03:24,060 et demander un dossier, le premier ordinateur doit s'assurer que vous êtes autorisé 71 00:03:24,060 --> 00:03:28,790 pour réellement voir ce fichier ou de lire que déposer parce que vous ne pouvez pas demander 72 00:03:28,790 --> 00:03:30,430 pour n'importe quel fichier sur l'ordinateur, non? 73 00:03:30,430 --> 00:03:32,260 Ce serait un danger pour la sécurité. 74 00:03:32,260 --> 00:03:37,020 >> Ainsi, les fichiers sur les systèmes que nous utilisons, comme cet appareil de CS50, ont trois 75 00:03:37,020 --> 00:03:39,200 général, les gens qui peuvent avoir autorisations à quelque chose. 76 00:03:39,200 --> 00:03:41,610 Le premier est le véritable propriétaire dudit fichier. 77 00:03:41,610 --> 00:03:43,820 Le second est le groupe qui appartient le fichier. 78 00:03:43,820 --> 00:03:46,090 Nous n'allons pas à se concentrer trop à ce sujet. 79 00:03:46,090 --> 00:03:50,010 Et la dernière chose est, en quelque sorte, comme le monde ou comme tout le monde qui est 80 00:03:50,010 --> 00:03:54,130 pas spécifique à ce fichier et ne pas aucun droit de propriété sur elle. 81 00:03:54,130 --> 00:04:05,650 >> Donc, si nous avons propriétaire, le groupe, et puis dans le monde. 82 00:04:05,650 --> 00:04:10,510 Et puis, pour chacun de ces groupes, vous peut avoir l'un des trois autorisations, 83 00:04:10,510 --> 00:04:13,010 OK, ou plusieurs d'entre eux. 84 00:04:13,010 --> 00:04:15,070 Vous pouvez avoir des autorisations de lecture. 85 00:04:15,070 --> 00:04:16,560 Vous pouvez disposer des autorisations appropriées. 86 00:04:16,560 --> 00:04:18,880 Et vous pouvez avoir les droits d'exécution. 87 00:04:18,880 --> 00:04:22,060 >> Donc, en termes de types de fichiers réels, lisez permission est comme fait la lecture 88 00:04:22,060 --> 00:04:23,250 le contenu du fichier. 89 00:04:23,250 --> 00:04:24,730 Une autorisation droit écrit pour ledit fichier. 90 00:04:24,730 --> 00:04:28,370 Une autorisation d'exécution exécute le déposer comme vous le faites lorsque vous exécutez l'une des 91 00:04:28,370 --> 00:04:29,620 vos projets CS50. 92 00:04:29,620 --> 00:04:32,190 93 00:04:32,190 --> 00:04:38,820 >> Alors, quand nous pensons à des fichiers comme quand nous avons besoin de lire un fichier HTML 94 00:04:38,820 --> 00:04:41,790 fichier, qui doit être mondiale lisible, non? 95 00:04:41,790 --> 00:04:44,420 Vraisemblablement, également propriétaire veut pour être en mesure de modifier ce fichier. 96 00:04:44,420 --> 00:04:46,610 Ainsi, le propriétaire va avoir besoin lire et écrire des autorisations. 97 00:04:46,610 --> 00:04:48,710 Ils n'ont pas vraiment besoin d'exécuter. 98 00:04:48,710 --> 00:04:50,950 >> Groupe, nous allons traiter le même que le monde de l'entreprise. 99 00:04:50,950 --> 00:04:54,610 Ils ont donc besoin des autorisations de lecture. 100 00:04:54,610 --> 00:04:57,310 Mais ils n'ont pas besoin d'écriture ou des autorisations d'exécution. 101 00:04:57,310 --> 00:05:01,920 Et maintenant, si nous pensons revenir à l'ancien Psets, ce que nous réalisons est ce genre 102 00:05:01,920 --> 00:05:03,360 de ressembler binaire, non? 103 00:05:03,360 --> 00:05:04,210 1 signifie oui. 104 00:05:04,210 --> 00:05:05,040 0 pour non. 105 00:05:05,040 --> 00:05:06,870 Et nous pouvons traduire ce binaire. 106 00:05:06,870 --> 00:05:10,478 >> Donc, 110 en binaire serait 6. 107 00:05:10,478 --> 00:05:13,270 100 serait 4. 108 00:05:13,270 --> 00:05:14,690 Même avec monde. 109 00:05:14,690 --> 00:05:20,846 Ainsi, le nombre vous obtiendrez pour la autorisations pour ce seraient 644. 110 00:05:20,846 --> 00:05:24,400 >> MIKE RIZZO: Et si vous repensez à lorsque vous chmod quelque chose, je crois 111 00:05:24,400 --> 00:05:28,980 ils ont donné dans le problème posé l' exemple de l'endroit où vous pourriez faire 112 00:05:28,980 --> 00:05:36,470 quelque chose comme chmod 644 puis le nom du fichier. 113 00:05:36,470 --> 00:05:39,980 Le 644 puis, vous pouvez maintenant voir directement d'où ça vient. 114 00:05:39,980 --> 00:05:42,840 Donc, j'espère que fait que un peu plus clair. 115 00:05:42,840 --> 00:05:45,600 >> Et puis pour la clarté de vous gars - 116 00:05:45,600 --> 00:05:48,200 oh oui, ici c'est nouveau. 117 00:05:48,200 --> 00:05:53,260 Donc 600 serait alors juste être l'exemple nous avons donné ici où le propriétaire a 118 00:05:53,260 --> 00:05:56,360 autorisations de lecture et bonnes tandis que le groupe et dans le monde n'ont pas toutes les autorisations 119 00:05:56,360 --> 00:05:58,145 pour accéder au fichier. 120 00:05:58,145 --> 00:06:01,500 >> TOMAS REIMERS: Et puis nous avons une rapide liste des autorisations communes. 121 00:06:01,500 --> 00:06:05,250 Donc répertoires, vous voulez à fait chmod 711. 122 00:06:05,250 --> 00:06:08,930 Rapide de côté - pour un répertoire d'avoir permission exécutable signifie être en mesure 123 00:06:08,930 --> 00:06:11,680 pour ouvrir le répertoire. 124 00:06:11,680 --> 00:06:15,280 Images, CSS, JavaScript, HTML besoins 644 parce que, fondamentalement, le monde 125 00:06:15,280 --> 00:06:16,400 besoins autorisations de lecture. 126 00:06:16,400 --> 00:06:20,960 >> Et PHP, qui vous les gars ont vu bien que nous ne serons pas en parlons 127 00:06:20,960 --> 00:06:24,880 est généralement strictement chmodé avec l'autorisation 600, car il est exécuté avec 128 00:06:24,880 --> 00:06:26,540 les autorisations du propriétaire. 129 00:06:26,540 --> 00:06:27,790 Au moins sur l'appareil. 130 00:06:27,790 --> 00:06:30,200 131 00:06:30,200 --> 00:06:36,870 >> MIKE RIZZO: Donc, si vous ne le faites pas spécifiquement spécifier le type de fichier 132 00:06:36,870 --> 00:06:39,480 vous voulez dans la mise en fait cette présentation - 133 00:06:39,480 --> 00:06:43,490 nous avons eu un problème avec cela parce que tout n'a pas été correctement chmod - 134 00:06:43,490 --> 00:06:47,550 vous allez obtenir, en quelque sorte, un erreur interdit que le site Web 135 00:06:47,550 --> 00:06:49,700 ne pas avoir fait l'autorisation pour accéder à tout ce dossier 136 00:06:49,700 --> 00:06:51,370 vous voulez accéder. 137 00:06:51,370 --> 00:06:54,780 Et bien sûr, qui peut être fixé - comme dans problème posé - en changeant 138 00:06:54,780 --> 00:06:56,405 permissions de manière appropriée. 139 00:06:56,405 --> 00:06:59,620 >> TOMAS REIMERS: Et le dernier commentaire de développement local est rapidement - nous 140 00:06:59,620 --> 00:07:02,000 soulevé cette question, mais nous voulions juste pour l'amener à nouveau - 141 00:07:02,000 --> 00:07:06,230 si vous demandez un serveur - hôte afin local, par exemple, com ou autre. - 142 00:07:06,230 --> 00:07:09,170 et vous ne spécifiez pas un fichier spécifique, le fichier que votre ordinateur va 143 00:07:09,170 --> 00:07:11,540 pour demander que l'on appelle index.html. 144 00:07:11,540 --> 00:07:12,790 Ou si cela n'existe pas, index.php. 145 00:07:12,790 --> 00:07:15,560 146 00:07:15,560 --> 00:07:16,350 >> Cool. 147 00:07:16,350 --> 00:07:19,560 Donc, c'est juste un récapitulatif de tout, espérons-le, que nous avons couvert en 148 00:07:19,560 --> 00:07:22,800 section, et conférence, et à ce jour dans CS50. 149 00:07:22,800 --> 00:07:26,110 Et maintenant, nous allons commencer à parler bibliothèques de particulier. 150 00:07:26,110 --> 00:07:30,270 Bibliothèques JavaScript et CSS pour les applications web. 151 00:07:30,270 --> 00:07:36,350 >> Donc, l'une des raisons pourquoi nous avons rapide bibliothèques sont des émissions - 152 00:07:36,350 --> 00:07:39,000 il ya beaucoup de problèmes dans programmation, qui réapparaissent 153 00:07:39,000 --> 00:07:40,570 encore, et encore, et encore. 154 00:07:40,570 --> 00:07:43,870 Vous pouvez remarquer que beaucoup de sites Web besoin de la capacité d'avoir déroulante 155 00:07:43,870 --> 00:07:49,100 menus, par exemple, ou doivent avoir la capacité d'avoir un bouton très standard 156 00:07:49,100 --> 00:07:51,400 style, qui peut ne pas être la chose la plus facile. 157 00:07:51,400 --> 00:07:54,670 Maintenant que vous commencez à obtenir en HTML, vous réaliser que les boutons peuvent réellement 158 00:07:54,670 --> 00:07:57,720 regarder vraiment laid si vous ne pas faire n'importe quoi. 159 00:07:57,720 --> 00:08:00,830 >> Donc, beaucoup de gens ont écrit appelé bibliothèques. 160 00:08:00,830 --> 00:08:02,990 Et dans ce contexte, ils sont également appelé les cadres. 161 00:08:02,990 --> 00:08:04,790 Nous allons utiliser la deux interchangeable. 162 00:08:04,790 --> 00:08:07,360 Et ce qu'ils sont, c'est qu'ils sont fondamentalement morceaux préfabriqués de code - 163 00:08:07,360 --> 00:08:09,130 soit CSS ou JavaScript - 164 00:08:09,130 --> 00:08:13,240 que emporter une grande partie de la équipe que vous avez dans le codage. 165 00:08:13,240 --> 00:08:17,290 >> Donc, ils pré-définir un ensemble de classes ou pré-définir un tas de fonctions pour 166 00:08:17,290 --> 00:08:20,110 Le cas de JavaScript, qui vous pouvez appeler plus tard. 167 00:08:20,110 --> 00:08:22,690 Et puis, vous pouvez, en quelque sorte, se l'accès à ce code sans 168 00:08:22,690 --> 00:08:23,710 avoir à faire quoi que ce soit. 169 00:08:23,710 --> 00:08:27,750 Un exemple de la bibliothèque était CS50.H. C'est une bibliothèque nous vous avons donné dos 170 00:08:27,750 --> 00:08:32,090 dans la première semaine, qui vous a permis de faire des choses comme ça GetInt et GetString 171 00:08:32,090 --> 00:08:35,237 sans avoir à écrire un code vous-même. 172 00:08:35,237 --> 00:08:36,179 >> MIKE RIZZO: Très bien. 173 00:08:36,179 --> 00:08:40,299 Donc, ici, tout comme nous avons dû inclure dans notre c fichiers différents 174 00:08:40,299 --> 00:08:46,570 bibliothèques, il faut aussi inclure dans notre fichiers HTML différentes bibliothèques. 175 00:08:46,570 --> 00:08:50,310 Par exemple, si nous voulions inclure une bibliothèque JavaScript spécifique ici, 176 00:08:50,310 --> 00:08:52,850 peut-être, celui que nous avons écrit nous comme il est hébergé localement 177 00:08:52,850 --> 00:08:56,000 appelés script.js, nous venons utiliser cette notation. 178 00:08:56,000 --> 00:08:59,500 >> Nous avons donc égaux de type script JavaScript sources égaux 179 00:08:59,500 --> 00:09:01,260 JavaScript.js. 180 00:09:01,260 --> 00:09:05,190 Et si vous pensez à votre CS50 problème de finances définir, si vous avez regardé dans 181 00:09:05,190 --> 00:09:09,190 header.php dans le dossier des modèles, vous devriez avoir vu 182 00:09:09,190 --> 00:09:10,970 certains d'entre eux inclus. 183 00:09:10,970 --> 00:09:13,250 Donc, cette première - les scripts - 184 00:09:13,250 --> 00:09:16,080 est notamment une bibliothèque JavaScript. 185 00:09:16,080 --> 00:09:18,760 Y compris une bibliothèque de CSS est un peu différent. 186 00:09:18,760 --> 00:09:21,430 >> Ici, au lieu de le script tag Vous devez la balise link. 187 00:09:21,430 --> 00:09:27,110 Et puis, le type de texte CSS est un peu différent. 188 00:09:27,110 --> 00:09:29,270 Vous n'avez pas toujours à comprendre feuille de style rel. 189 00:09:29,270 --> 00:09:30,970 Mais je pense que c'est, en général, bonnes pratiques. 190 00:09:30,970 --> 00:09:35,810 >> Et puis finalement, le HREF, qui vous probablement vu dans vos ATAGs pour relier 191 00:09:35,810 --> 00:09:39,440 dans les différents maillons de seulement spécifie le lien où trouver cela. 192 00:09:39,440 --> 00:09:42,250 Par exemple, si nous voulions lier un autre bibliothèque - disons - 193 00:09:42,250 --> 00:09:49,330 qui vivaient à styles.css. 194 00:09:49,330 --> 00:09:54,030 Et nous voulions lier que c'est hébergée sur le Web, nous copier cela. 195 00:09:54,030 --> 00:09:58,834 Et puis collez-le dans tout ce que nous avons droit ici à la place. 196 00:09:58,834 --> 00:10:01,340 >> TOMAS REIMERS: OK, nous espérons que vous les gars sont déjà familiers 197 00:10:01,340 --> 00:10:02,410 avec la façon de relier CSS. 198 00:10:02,410 --> 00:10:04,000 Vous avez eu à faire sur votre dernier ensemble brun. 199 00:10:04,000 --> 00:10:07,110 JavaScript, certains d'entre vous peut-être avoir une certaine expérience avec. 200 00:10:07,110 --> 00:10:07,980 Certains d'entre vous ne peut pas. 201 00:10:07,980 --> 00:10:12,190 >> Donc pour l'instant, de savoir qu'un fichier JavaScript est très semblable à un fichier CSS dans 202 00:10:12,190 --> 00:10:15,640 le sens que vous pouvez lier à elle ou que vous pouvez inclure à l'intérieur. 203 00:10:15,640 --> 00:10:17,360 Et il vous permet de choses de script. 204 00:10:17,360 --> 00:10:21,820 Et nous allons vous guider à travers une peu de JavaScript plus tard. 205 00:10:21,820 --> 00:10:23,560 >> Donc, en utilisant une bibliothèque - 206 00:10:23,560 --> 00:10:26,150 une fois que vous avez inclus, il est aussi simple que d'appeler littéralement le 207 00:10:26,150 --> 00:10:29,640 fonctions ou en ajoutant le noms de classe à elle. 208 00:10:29,640 --> 00:10:32,220 La dernière chose que nous voulons parler sur le plan de la bibliothèque - 209 00:10:32,220 --> 00:10:34,180 et c'est plus d'une note technique - 210 00:10:34,180 --> 00:10:35,860 est l'octroi de licences open source. 211 00:10:35,860 --> 00:10:41,550 Ainsi, lorsque vous trouverez ces bibliothèques réelles, vous pensez peut-être de 212 00:10:41,550 --> 00:10:47,630 Des questions comme il est OK que je suis en utilisant le code de quelqu'un d'autre, surtout 213 00:10:47,630 --> 00:10:51,970 parce que c'est quelque chose que nous beaucoup vous ai dit de ne pas le faire dans ce cours. 214 00:10:51,970 --> 00:10:55,790 >> Ainsi, dans le cas de l'octroi de licences open source, beaucoup de développeurs - 215 00:10:55,790 --> 00:10:57,540 une fois qu'ils ont écrit une bibliothèque, qui selon eux, pourrait être 216 00:10:57,540 --> 00:10:59,450 utile à d'autres personnes - 217 00:10:59,450 --> 00:11:02,420 publiera sur le web et de lui donner une licence. 218 00:11:02,420 --> 00:11:06,620 Et une licence essentiellement dit que je suis présente la permission accordée à d'autres 219 00:11:06,620 --> 00:11:11,250 les gens à utiliser ce logiciel avec le genre suivante 220 00:11:11,250 --> 00:11:13,230 stipulations. 221 00:11:13,230 --> 00:11:16,100 >> Nous avons inclus un lien vers un bon site pour vous aider à comprendre les licences 222 00:11:16,100 --> 00:11:17,720 cas où vous rencontrez eux. 223 00:11:17,720 --> 00:11:21,680 Dispositions communes sont des choses comme vous êtes invités à utiliser ma bibliothèque pour 224 00:11:21,680 --> 00:11:23,000 tant que vous me citez. 225 00:11:23,000 --> 00:11:25,670 Vous êtes invités à utiliser ma bibliothèque à condition que quand il se casse 226 00:11:25,670 --> 00:11:26,790 vous ne me blâmez pas. 227 00:11:26,790 --> 00:11:30,310 Vous êtes invités à utiliser ma bibliothèque si longtemps comme vous ne l'utilisez pas pour faire de l'argent 228 00:11:30,310 --> 00:11:31,910 pour vous-même. 229 00:11:31,910 --> 00:11:34,130 Ce sont des sortes de commune stipulations. 230 00:11:34,130 --> 00:11:37,780 >> Pour ce dernier projet CS50, ils ne doit pas être super pertinent car 231 00:11:37,780 --> 00:11:41,440 les projets que vous les gars utilisent sont probablement plutôt, en quelque sorte, connu. 232 00:11:41,440 --> 00:11:44,170 Mais quand vous avez réellement sortez dans la monde et commencer à utiliser les bibliothèques, qui 233 00:11:44,170 --> 00:11:48,100 peut ou ne peut pas être ainsi mises en œuvre quelques-uns des plus populaires que nous sommes 234 00:11:48,100 --> 00:11:49,780 va passer par. 235 00:11:49,780 --> 00:11:53,310 Il est bon d'être en mesure de comprendre ces licences et à 236 00:11:53,310 --> 00:11:54,560 comprendre ce qu'ils signifient. 237 00:11:54,560 --> 00:11:58,120 238 00:11:58,120 --> 00:11:58,586 Et revenir en arrière. 239 00:11:58,586 --> 00:12:00,960 >> MIKE RIZZO: OK. 240 00:12:00,960 --> 00:12:04,850 Donc maintenant déplacer sur des exemples de CSS réelle. 241 00:12:04,850 --> 00:12:07,770 À ce stade, à ce jour, vous pourriez ne pas avoir rencontré ce. 242 00:12:07,770 --> 00:12:10,300 Mais vous pourriez avoir rencontré dans votre vie quotidienne où quelque chose 243 00:12:10,300 --> 00:12:13,160 qui ressemble d'une façon sur un navigateur peut-être pas le même aspect 244 00:12:13,160 --> 00:12:14,880 manière dans un autre navigateur. 245 00:12:14,880 --> 00:12:17,400 >> Ceci est appelé navigateur navigateur compatibilité. 246 00:12:17,400 --> 00:12:20,780 Et en plus, il devient de plus en plus d'un problème, d'autant plus que 247 00:12:20,780 --> 00:12:25,260 navigateurs prennent de plus en plus de libertés de mettre en œuvre les choses comme elles veulent. 248 00:12:25,260 --> 00:12:28,440 Donc, pour surmonter cela, il est en fait une grande bibliothèque appelée Normalize.CSS. 249 00:12:28,440 --> 00:12:32,236 250 00:12:32,236 --> 00:12:33,770 >> TOMAS REIMERS: Nous avons inclus le lien. 251 00:12:33,770 --> 00:12:36,210 À ce stade, il est utile si vous avez votre ordinateur portable là 252 00:12:36,210 --> 00:12:38,740 la recherche au niveau du site. 253 00:12:38,740 --> 00:12:42,580 Et nous donnons ce droit de vous maintenant tout simplement parce que la finale CS50 254 00:12:42,580 --> 00:12:44,370 projet va réellement vous demander de mettre en œuvre 255 00:12:44,370 --> 00:12:45,860 de même et par les navigateurs. 256 00:12:45,860 --> 00:12:49,250 >> Il suffit donc de garder à l'arrière de votre tête, c'est une magnifique bibliothèque 257 00:12:49,250 --> 00:12:51,170 car il ne sera, en quelque sorte, normaliser les choses. 258 00:12:51,170 --> 00:12:54,230 Dans Firefox, quelque chose peut montrer comme un pixel vers la gauche. 259 00:12:54,230 --> 00:12:58,390 Et puis Chrome peut décider que fait ce que vous vouliez dire 10 pixels 260 00:12:58,390 --> 00:12:59,380 vers la gauche. 261 00:12:59,380 --> 00:13:01,030 Et vous voulez normaliser ce. 262 00:13:01,030 --> 00:13:05,360 Normaliser fait faire un très bon travail de faire en sorte que votre site 263 00:13:05,360 --> 00:13:08,070 semble le même à travers les navigateurs. 264 00:13:08,070 --> 00:13:10,660 >> MIKE RIZZO: Donc, si nous voulions juste cliquez sur le lien très rapidement et spectacle 265 00:13:10,660 --> 00:13:13,140 vous à quoi cela ressemble, vous pouvez le télécharger à l'aide du 266 00:13:13,140 --> 00:13:14,670 géant bouton Télécharger. 267 00:13:14,670 --> 00:13:18,520 Ou je vous encourage à lire plus à ce sujet en cliquant sur ce lien en bas 268 00:13:18,520 --> 00:13:19,310 coin droit. 269 00:13:19,310 --> 00:13:22,420 >> TOMAS REIMERS: Et si vous avez réellement cliquez sur Lire la suite là - 270 00:13:22,420 --> 00:13:24,340 cliquez sur la source sur GitHub - 271 00:13:24,340 --> 00:13:31,720 vous voyez réellement open source licence sur LICENSE.md là. 272 00:13:31,720 --> 00:13:35,740 Et vous voyez ici est la licence MIT très populaire. 273 00:13:35,740 --> 00:13:38,940 Encore une fois, si vous lisez le texte, vous serez capable de le trouver sur le site 274 00:13:38,940 --> 00:13:42,550 nous avons référencé avant et être en mesure de comprendre sans avoir à lire 275 00:13:42,550 --> 00:13:45,920 à travers le jargon juridique. 276 00:13:45,920 --> 00:13:46,850 >> MIKE RIZZO: Bon, d'accord. 277 00:13:46,850 --> 00:13:47,940 C'est donc Normaliser. 278 00:13:47,940 --> 00:13:49,190 Nous voulions vous donner que très rapidement. 279 00:13:49,190 --> 00:13:50,030 Oh, avez-vous une question? 280 00:13:50,030 --> 00:13:53,013 >> PUBLIC: Alors, quand vous téléchargez, vous il suffit de suivre ce code qu'ils ont 281 00:13:53,013 --> 00:13:54,098 sous le bouton de téléchargement? 282 00:13:54,098 --> 00:13:55,860 >> TOMAS REIMERS: Oui, lorsque vous téléchargez - 283 00:13:55,860 --> 00:13:58,130 >> MIKE RIZZO: Oh, c'est un bon point. 284 00:13:58,130 --> 00:14:00,700 Donc la question est de savoir comment faire nous fait le télécharger? 285 00:14:00,700 --> 00:14:03,260 Donc, si on clique sur le lien, nous voyons qu'il apparaît effectivement en place 286 00:14:03,260 --> 00:14:05,030 à l'aide du code source. 287 00:14:05,030 --> 00:14:08,550 Donc, pour ce faire, ce que nous pouvions ne est juste cliquez sur Enregistrer sous. 288 00:14:08,550 --> 00:14:10,830 Enregistrer sous et qui devrait mettre en place un fichier. 289 00:14:10,830 --> 00:14:14,160 Et puis, nous pouvons choisir d'enregistrer comme normalize.CSS. 290 00:14:14,160 --> 00:14:15,810 Et puis vous auriez à le relier à - 291 00:14:15,810 --> 00:14:18,660 >> TOMAS REIMERS: De la même façon que vous lier dans n'importe quel autre fichier. 292 00:14:18,660 --> 00:14:22,250 Et une fois que vous vous connectez dans, ce qui est génial sur Normaliser est il réellement 293 00:14:22,250 --> 00:14:25,920 prendre soin de tout le disque travailler par lui-même. 294 00:14:25,920 --> 00:14:27,730 Ce qui signifie que vous n'avez pas ajouter toutes les classes. 295 00:14:27,730 --> 00:14:29,690 >> Vous n'avez pas à faire quelque chose de bizarre. 296 00:14:29,690 --> 00:14:34,590 Il permettra de normaliser sans vous faire autre chose. 297 00:14:34,590 --> 00:14:36,083 Oui, vous devez l'inclure. 298 00:14:36,083 --> 00:14:38,990 299 00:14:38,990 --> 00:14:40,240 Google Chrome ne répond pas. 300 00:14:40,240 --> 00:14:43,270 301 00:14:43,270 --> 00:14:44,860 >> Juste une petite parenthèse - 302 00:14:44,860 --> 00:14:46,800 J'ai remarqué nous avons sauté dans ce. 303 00:14:46,800 --> 00:14:49,010 Le reste de cette présentation est va être un aperçu rapide. 304 00:14:49,010 --> 00:14:50,380 Un sondage auprès des bibliothèques. 305 00:14:50,380 --> 00:14:52,710 >> Fondamentalement, ce qu'ils sont. 306 00:14:52,710 --> 00:14:53,350 Ce qu'ils font. 307 00:14:53,350 --> 00:14:54,060 Comment ils sont utiles. 308 00:14:54,060 --> 00:14:56,540 Comment vous pourriez les mettre en œuvre. 309 00:14:56,540 --> 00:14:59,730 Si vous voulez commencer à les regarder, suivant le long, et la lecture à travers 310 00:14:59,730 --> 00:15:01,990 eux, je serais très encourager. 311 00:15:01,990 --> 00:15:07,620 >> Sinon, vous êtes les bienvenus aussi pour commencer à les télécharger et y compris 312 00:15:07,620 --> 00:15:11,400 dans un spectacle juste pour voir ce qu'ils ressembler ou ce qu'ils font, si vous avez 313 00:15:11,400 --> 00:15:12,270 votre ordinateur portable en face de vous. 314 00:15:12,270 --> 00:15:14,650 Si non, vous êtes les bienvenus pour garder à nous écouter parler. 315 00:15:14,650 --> 00:15:15,500 Nous allons continuer à parler. 316 00:15:15,500 --> 00:15:18,680 Et nous avons le temps à la fin, je l'espère nous fait entrer dans vous montrant 317 00:15:18,680 --> 00:15:20,946 ce que certains de ces bibliothèques ressembler. 318 00:15:20,946 --> 00:15:22,320 >> MIKE RIZZO: Cool. 319 00:15:22,320 --> 00:15:25,466 Très bien, alors maintenant nous allons parler sur la police impressionnant. 320 00:15:25,466 --> 00:15:30,480 >> TOMAS REIMERS: si la police impressionnant est un le site vraiment bien, surtout pour ceux 321 00:15:30,480 --> 00:15:32,450 d'entre nous qui sont moins artistiquement talentueux. 322 00:15:32,450 --> 00:15:36,330 323 00:15:36,330 --> 00:15:38,880 Ignorant le nom de la police impressionnant, il donne vous un tas d'icônes, qui sont 324 00:15:38,880 --> 00:15:41,050 très utile. 325 00:15:41,050 --> 00:15:45,950 Ainsi, un grand nombre de fois vous allez mettre en œuvre un l'icône que vous pouvez comme une belle x donc 326 00:15:45,950 --> 00:15:47,170 que vous pouvez fermer quelque chose. 327 00:15:47,170 --> 00:15:49,910 >> Ou vous pouvez vouloir une sorte de bouton Modifier avec un dessin au crayon comme 328 00:15:49,910 --> 00:15:50,940 tout le monde a. 329 00:15:50,940 --> 00:15:53,850 Et c'est là que vous apprenez que dessin de ces icônes peut être 330 00:15:53,850 --> 00:15:55,510 très fastidieux et difficile. 331 00:15:55,510 --> 00:15:59,160 Font impressionnant - si vous avez réellement aller sur le site - 332 00:15:59,160 --> 00:16:02,892 vous donne beaucoup d'icônes sous les icônes en haut. 333 00:16:02,892 --> 00:16:06,980 Oui, juste en haut. 334 00:16:06,980 --> 00:16:09,030 Il vous donnera beaucoup d'icônes pour libre. 335 00:16:09,030 --> 00:16:15,210 >> Alors là, vous voyez que nous avons des choses comme un astérisque, des bars, un éclair, un 336 00:16:15,210 --> 00:16:19,750 calendrier, un bug, un livre, etc. 337 00:16:19,750 --> 00:16:21,110 Cela peut être très utile. 338 00:16:21,110 --> 00:16:24,290 La façon dont vous incluez c'est vous incluez littéralement le fichier CSS. 339 00:16:24,290 --> 00:16:29,760 Et après vous avez inclus le fichier CSS, ce que vous pouvez faire est de créer un 340 00:16:29,760 --> 00:16:33,430 tag appelé I. Il satands pour icône avec la classe FA 341 00:16:33,430 --> 00:16:34,460 debout pour la police impressionnant. 342 00:16:34,460 --> 00:16:36,330 Et puis, quelle que soit la classe que vous voulez. 343 00:16:36,330 --> 00:16:41,220 >> Donc, si je voulais une icône de cela en plus carré ici, je donnerais 344 00:16:41,220 --> 00:16:43,290 il la classe FA. 345 00:16:43,290 --> 00:16:46,230 Et puis tiret FA plus carré de trait d'union. 346 00:16:46,230 --> 00:16:50,325 347 00:16:50,325 --> 00:16:53,710 >> MIKE RIZZO: Cool, OK. 348 00:16:53,710 --> 00:16:56,980 >> TOMAS REIMERS: Et puis, la dernière CSS bibliothèque, nous voulons passer à travers nous sommes 349 00:16:56,980 --> 00:16:59,950 en essayant de garder un minimum sur CSS bibliothèques parce que nous ne réalisons l' 350 00:16:59,950 --> 00:17:03,660 titre de cette présentation que JavaScript bibliothèques. 351 00:17:03,660 --> 00:17:07,089 Mais nous avons pensé que nous pourrions ainsi vous présenter aux autres bibliothèques 352 00:17:07,089 --> 00:17:09,569 alors que nous parlions de bibliothèques. 353 00:17:09,569 --> 00:17:11,400 >> C'est Google Web Fonts. 354 00:17:11,400 --> 00:17:17,040 Et ce que Google Web Fonts vous permet à faire est d'ajouter des polices à votre site Web, 355 00:17:17,040 --> 00:17:22,079 qui est vraiment un moyen facile de le faire jolie et de distinguer votre jeu 356 00:17:22,079 --> 00:17:24,460 de tout le monde de si elle a la une belle police ou si elle a une belle 357 00:17:24,460 --> 00:17:27,790 collection de polices. 358 00:17:27,790 --> 00:17:31,410 Google Web Fonts est agréable contrairement à d'autres bibliothèques dans le sens que c'est un 359 00:17:31,410 --> 00:17:33,490 l'installation vraiment guidé. 360 00:17:33,490 --> 00:17:38,680 >> Donc, si vous suivez le lien, il est google.com / fonts, je crois. 361 00:17:38,680 --> 00:17:41,100 Si vous suivez cela, vous peuvent choisir votre police. 362 00:17:41,100 --> 00:17:44,410 Vous pouvez choisir sur la gauche de épaisseur, inclinaison, etc. 363 00:17:44,410 --> 00:17:48,970 Et puis, une fois que vous avez choisi un, vous pouvez cliquer sur une utilisation rapide. 364 00:17:48,970 --> 00:17:49,820 Juste là. 365 00:17:49,820 --> 00:17:51,590 En bas à droite de la boîte. 366 00:17:51,590 --> 00:17:54,380 367 00:17:54,380 --> 00:17:56,700 >> Et puis, faites défiler vers le bas. 368 00:17:56,700 --> 00:17:59,600 369 00:17:59,600 --> 00:18:02,650 Tout d'abord, ils vous donnent la CSS vous devez effectivement un lien vers elle. 370 00:18:02,650 --> 00:18:03,330 Il est juste là. 371 00:18:03,330 --> 00:18:05,170 Vous pouvez simplement copier et coller ce po 372 00:18:05,170 --> 00:18:07,250 Et la bonne chose à propos celui-ci est vous n'avez pas réellement besoin même de 373 00:18:07,250 --> 00:18:08,340 télécharger le fichier. 374 00:18:08,340 --> 00:18:11,170 >> Qu'est-ce que ça va faire, c'est que ça va faire un lien vers la version de Google de lui. 375 00:18:11,170 --> 00:18:14,130 Donc, retour à ce que cela signifie. 376 00:18:14,130 --> 00:18:18,270 Cela signifie que quand un utilisateur télécharge le fichier - 377 00:18:18,270 --> 00:18:22,300 télécharge la page HTML - votre code HTML Cette page va référence à ce fichier. 378 00:18:22,300 --> 00:18:26,790 >> Alors, votre ordinateur va le voir, oh, il est hébergé sur google.com plutôt 379 00:18:26,790 --> 00:18:28,170 que sur theirsite.com. 380 00:18:28,170 --> 00:18:30,370 Permettez-moi de demander à Google de ce fichier. 381 00:18:30,370 --> 00:18:32,800 Et puis, il va inclure presque comme si c'était un 382 00:18:32,800 --> 00:18:35,584 partie de votre propre site. 383 00:18:35,584 --> 00:18:36,540 >> TOMAS REIMERS: Cool. 384 00:18:36,540 --> 00:18:40,980 Et une fois que vous incluez, puis à inclure dans votre CSS, il vous donne 385 00:18:40,980 --> 00:18:41,830 la ligne réelle. 386 00:18:41,830 --> 00:18:45,188 Ainsi, vous définissez la famille de polices de la propriété égal au nom de votre police. 387 00:18:45,188 --> 00:18:47,936 388 00:18:47,936 --> 00:18:50,440 >> MIKE RIZZO: OK. 389 00:18:50,440 --> 00:18:52,220 Donc, nous venons de terminer avec CSS. 390 00:18:52,220 --> 00:18:57,230 Et certains d'entre vous pourraient penser, eh bien, nous avons eu un peu de CSS sur CS50 Finances. 391 00:18:57,230 --> 00:19:00,390 Mais bibliothèque de CSS était bootstrap. 392 00:19:00,390 --> 00:19:05,190 Nous incluons fait Bootstrap un peu plus tard sous le JavaScript car avec 393 00:19:05,190 --> 00:19:09,660 la bibliothèque Bootstrap CSS est également avec beaucoup de JavaScript qui 394 00:19:09,660 --> 00:19:12,060 Bootstrap ou Twitter - qui a fait Bootstrap - 395 00:19:12,060 --> 00:19:15,426 utilise pour gérer l'ensemble de leur CSS. 396 00:19:15,426 --> 00:19:19,592 >> TOMAS REIMERS: Quelqu'un at-il des questions jusqu'ici sur CSS en général? 397 00:19:19,592 --> 00:19:20,723 Nous sommes bons? 398 00:19:20,723 --> 00:19:21,216 Impressionnant. 399 00:19:21,216 --> 00:19:22,495 >> MIKE RIZZO: impressionnant. 400 00:19:22,495 --> 00:19:25,136 >> TOMAS REIMERS: Alors déplacement à JavaScript. 401 00:19:25,136 --> 00:19:27,900 >> MIKE RIZZO: Donc, nous avons voulu parler sur jQuery pour commencer. 402 00:19:27,900 --> 00:19:30,780 Quelqu'un at-il entendu parler de jQuery avant ou utilisé? 403 00:19:30,780 --> 00:19:32,180 Ouais, un couple? 404 00:19:32,180 --> 00:19:36,000 Donc, si vous travaillez seulement avec native JavaScript, vous vous trouverez 405 00:19:36,000 --> 00:19:41,000 taper beaucoup de longues sélecteurs beaucoup. 406 00:19:41,000 --> 00:19:44,400 Alors, que jQuery fait est qu'il fournit une belle enveloppe pour le JavaScript 407 00:19:44,400 --> 00:19:48,180 langue qui vous permet de sélectionner facilement et manipuler différents éléments 408 00:19:48,180 --> 00:19:52,470 dans le modèle d'objet de document de l' page Web ou le DOM, qui, je pense 409 00:19:52,470 --> 00:19:54,290 vous les gars ont entendu parler de dans donner des conférences à ce point. 410 00:19:54,290 --> 00:19:57,550 >> TOMAS REIMERS: Si vous n'avez pas entendu parler de ou conférence si vous n'avez pas regardé 411 00:19:57,550 --> 00:20:01,870 encore, le modèle objet de document est fondamentalement la façon dont les choses sont représentés. 412 00:20:01,870 --> 00:20:05,290 Donc HTML sorte de ressemble à un arbre quand vous avez réellement dessiner dehors. 413 00:20:05,290 --> 00:20:06,850 Vous avez l'élément HTML sur le dessus. 414 00:20:06,850 --> 00:20:07,560 Vous avez la tête et le corps. 415 00:20:07,560 --> 00:20:09,500 >> Et puis, au sein de ce que vous avoir tout le reste. 416 00:20:09,500 --> 00:20:10,660 Cela dénommé DOM - 417 00:20:10,660 --> 00:20:12,120 Modèle objet de document. 418 00:20:12,120 --> 00:20:16,090 Ainsi, un modèle qui représente les objets en le document est un moyen facile de penser 419 00:20:16,090 --> 00:20:18,560 à ce sujet. 420 00:20:18,560 --> 00:20:22,520 Et l'un des grand chose sur jQuery est-il fait vraiment déplacement 421 00:20:22,520 --> 00:20:26,460 et que les éléments de manipulation à l'intérieur que incroyablement simple. 422 00:20:26,460 --> 00:20:30,300 >> Si simple, en effet, que la majorité des Bibliothèques JavaScript ou sinon le 423 00:20:30,300 --> 00:20:34,200 majorité, la grande majorité de ceux vous verrez réellement besoin jQuery afin 424 00:20:34,200 --> 00:20:37,530 qu'ils puissent se lancer tout simplement parce que si vous n'avez pas jQuery, vous 425 00:20:37,530 --> 00:20:40,540 serait perdre beaucoup de temps à essayer de comprendre comment sélectionner certains 426 00:20:40,540 --> 00:20:43,660 éléments et la façon de faire d'autres choses. 427 00:20:43,660 --> 00:20:47,950 Et l'autre grand chose sur jQuery c'est qu'il est inter-navigateur compatible. 428 00:20:47,950 --> 00:20:51,550 >> Alors n'oubliez pas de revenir quand nous avons dit que pas tous les navigateurs à mettre en œuvre 429 00:20:51,550 --> 00:20:53,100 les choses de la même façon? 430 00:20:53,100 --> 00:20:55,120 Cela est vrai même en JavaScript. 431 00:20:55,120 --> 00:20:58,220 Et l'une des grandes choses au sujet de jQuery est qu'elle permet de détecter l' 432 00:20:58,220 --> 00:21:00,300 navigateur et détecter la méthode appropriée. 433 00:21:00,300 --> 00:21:03,420 >> Donc, si vous avez besoin de sélectionner un élément, Internet Explorer peut dire que vous êtes 434 00:21:03,420 --> 00:21:05,770 censé faire de cette façon. 435 00:21:05,770 --> 00:21:08,300 Firefox pourrait dire la bonne moyen est de cette façon. 436 00:21:08,300 --> 00:21:09,710 jQuery ne se soucie pas. 437 00:21:09,710 --> 00:21:12,550 Quand vous dites jQuery pour sélectionner un élément il comprendre comment il est 438 00:21:12,550 --> 00:21:16,290 censé faire dans le navigateur l' l'utilisateur est actuellement en, puis faire 439 00:21:16,290 --> 00:21:18,584 de cette façon. 440 00:21:18,584 --> 00:21:22,650 >> MIKE RIZZO: Donc il ne faut pas parler de l'utilisation de jQuery un peu. 441 00:21:22,650 --> 00:21:27,670 Tout comme PHP, jQuery a un particulier penchant pour le signe du dollar. 442 00:21:27,670 --> 00:21:30,880 Ainsi, vous verrez que tout jQuery - 443 00:21:30,880 --> 00:21:32,060 Eh bien, pas du tout. 444 00:21:32,060 --> 00:21:35,210 Vous pouvez parfois remplacer le dollar signer avec le mot jQuery. 445 00:21:35,210 --> 00:21:38,980 Mais en général, juste parce que c'est plus courte, chaque fois que vous voyez jQuery étant 446 00:21:38,980 --> 00:21:41,420 utilisé ce sera avec un signe de dollar. 447 00:21:41,420 --> 00:21:47,030 >> Donc, ici, nous sommes en train de montrer un début sélecteur pour un élément dans le DOM. 448 00:21:47,030 --> 00:21:52,850 Ici, nous avons le signe dollar suivi par des parenthèses ouvertes et puis citations. 449 00:21:52,850 --> 00:21:56,130 Et dans les citations aller nos sélecteurs pour les différents éléments. 450 00:21:56,130 --> 00:21:59,810 Tout comme en CSS, il nous fallait des sélecteurs pour être capable de style différents éléments 451 00:21:59,810 --> 00:22:00,840 dans la page. 452 00:22:00,840 --> 00:22:06,555 Ces différents sélecteurs traduire exactement dans jQuery et JavaScript 453 00:22:06,555 --> 00:22:07,820 pour la plupart. 454 00:22:07,820 --> 00:22:10,120 >> Nous avons donc ici un foo point. 455 00:22:10,120 --> 00:22:14,780 Donc, si vous vous souvenez de conférence, le point signifie simplement la classe. 456 00:22:14,780 --> 00:22:18,850 Donc, nous sommes élément sélection avec la classe foo. 457 00:22:18,850 --> 00:22:22,670 Donc, si je vais de l'avant et ouvrir notre JavaScript console ici très rapidement 458 00:22:22,670 --> 00:22:26,830 juste le démontrer, si je tape juste le signe du dollar, nous voyons que c'est un peu 459 00:22:26,830 --> 00:22:28,090 fonction qui est en place. 460 00:22:28,090 --> 00:22:29,420 Et il est juste définie par jQuery. 461 00:22:29,420 --> 00:22:32,120 >> TOMAS REIMERS: Pour ceux d'entre vous connaissent pas, la console est un outil 462 00:22:32,120 --> 00:22:35,430 dans Chrome, qui vous permet de, fondamentalement, exécuter JavaScript sur l' 463 00:22:35,430 --> 00:22:36,450 page en cours. 464 00:22:36,450 --> 00:22:39,420 Cela vous trouverez incroyablement utile lorsque vous êtes en train de débogage et vous 465 00:22:39,420 --> 00:22:42,400 besoin d'être comme, ce qui est le courant valeur d'une variable globale ou ce 466 00:22:42,400 --> 00:22:43,910 est quelque chose d'autre? 467 00:22:43,910 --> 00:22:47,620 C'est un peu comme GDB à l'exception que vous pouvez réellement 468 00:22:47,620 --> 00:22:51,600 manipuler les éléments de la page et dans un mode beaucoup plus facile. 469 00:22:51,600 --> 00:22:55,080 Et aussi il n'a pas, fondamentalement, consultez avec vous avant qu'il ne fait rien. 470 00:22:55,080 --> 00:22:58,660 >> Ainsi, alors que, GDB pourrait être, êtes-vous sûr que vous voulez exécuter la prochaine étape? 471 00:22:58,660 --> 00:22:59,830 La console est en temps réel. 472 00:22:59,830 --> 00:23:03,690 Alors que la page Web est rendu et faire tout ce qu'il fait, le 473 00:23:03,690 --> 00:23:05,720 conseil est également la longeant. 474 00:23:05,720 --> 00:23:08,330 Et vous pouvez mettre le code de impute en qui console, qui sera 475 00:23:08,330 --> 00:23:09,260 être exécuté sur la page. 476 00:23:09,260 --> 00:23:12,190 >> MIKE RIZZO: Donc, pour accéder à la console, Je suppose que je devrais brièvement 477 00:23:12,190 --> 00:23:13,750 parler de la façon de le faire. 478 00:23:13,750 --> 00:23:17,850 Dans les derniers problèmes que vous pourriez avoir utilisé Chrome inspecter élément 479 00:23:17,850 --> 00:23:20,440 fonctions ou vue source de la page - 480 00:23:20,440 --> 00:23:23,870 et ceux qui sont accessibles seulement par le droit en cliquant sur la page ou un particulier 481 00:23:23,870 --> 00:23:28,430 élément et le faire inspecter soit élément ou vue source de la page. 482 00:23:28,430 --> 00:23:31,190 Nous pouvons également accéder au JavaScript console directement par 483 00:23:31,190 --> 00:23:33,630 choisir inspecter élément. 484 00:23:33,630 --> 00:23:37,930 Console Alors vous appuyez simplement sur sur le côté droit. 485 00:23:37,930 --> 00:23:41,900 >> Sinon, vous auriez pu également augmenté le coin supérieur droit, 486 00:23:41,900 --> 00:23:46,820 qui est coupée sur cet écran où il a les trois barres horizontales. 487 00:23:46,820 --> 00:23:52,010 Et vous descendez à des outils et alors la console JavaScript 488 00:23:52,010 --> 00:23:53,240 ici où peut voir - 489 00:23:53,240 --> 00:23:54,370 au moins sur Windows - 490 00:23:54,370 --> 00:23:59,680 le raccourci est commande Shift J. Alors si nous voulions sélectionner un élément 491 00:23:59,680 --> 00:24:06,060 dans cette page, tout comme je l'ai montré avant, nous faisons signe dollar parens ouvertes 492 00:24:06,060 --> 00:24:08,180 et cite alors. 493 00:24:08,180 --> 00:24:11,750 >> Une chose intéressante est, en général, apostrophes et guillemets sont 494 00:24:11,750 --> 00:24:12,370 échangeable. 495 00:24:12,370 --> 00:24:16,050 Alors que beaucoup de gens il suffit d'utiliser unique citations, car ils sont plus rapides à saisir 496 00:24:16,050 --> 00:24:19,780 que par des guillemets parce que vous n'avez pas avoir la touche Maj enfoncée. 497 00:24:19,780 --> 00:24:21,770 Je vais donc le faire dès maintenant. 498 00:24:21,770 --> 00:24:24,510 >> Je tiens donc à choisir quelque chose avec la classe. 499 00:24:24,510 --> 00:24:27,200 Container, juste parce que je sais que c'est quelque chose qui est sur notre 500 00:24:27,200 --> 00:24:28,740 page web en ce moment. 501 00:24:28,740 --> 00:24:29,520 Et j'ai frappé Entrée. 502 00:24:29,520 --> 00:24:31,670 Et nous pouvons voir qu'il choisi il. 503 00:24:31,670 --> 00:24:34,990 Ainsi, il apparaît que c'est retourné cet objet. 504 00:24:34,990 --> 00:24:36,620 Donc, c'est une sélection de base. 505 00:24:36,620 --> 00:24:40,080 Si nous voulions réellement manipuler, vous auriez à appeler quelque chose 506 00:24:40,080 --> 00:24:43,925 sur cette sélection, qui nous allons revenir plus tard. 507 00:24:43,925 --> 00:24:49,030 >> TOMAS REIMERS: Il suffit donc de se pencher sur cette plus en profondeur, ce n'est pas différent 508 00:24:49,030 --> 00:24:52,245 que les appels de fonction que nous avons faites dans C. Le nom de la fonction ici est une 509 00:24:52,245 --> 00:24:52,580 peu bizarre. 510 00:24:52,580 --> 00:24:55,640 C'est le signe dollar. 511 00:24:55,640 --> 00:24:57,010 C'est juste un nom d'une fonction. 512 00:24:57,010 --> 00:24:58,810 Il n'y a rien de spécial. 513 00:24:58,810 --> 00:25:00,450 >> Nous avons parenthèses ouvertes. 514 00:25:00,450 --> 00:25:03,880 Ensuite, nous avons notre seul argument, qui dans ce cas, se trouve être une chaîne, 515 00:25:03,880 --> 00:25:05,680 qui est un sélecteur pour cela. 516 00:25:05,680 --> 00:25:08,130 Et puis, nous avons notre parenthèse fermée. 517 00:25:08,130 --> 00:25:09,960 C'est tout. 518 00:25:09,960 --> 00:25:11,500 >> Ce n'est pas que très différent. 519 00:25:11,500 --> 00:25:12,900 Bien, il ne semble très bizarre. 520 00:25:12,900 --> 00:25:17,220 Et cela peut être, en quelque sorte, un collage signaler pour beaucoup de gens. 521 00:25:17,220 --> 00:25:21,460 >> MIKE RIZZO: Pareillement, si nous voulions pour sélectionner un élément qui a une identité, 522 00:25:21,460 --> 00:25:23,470 maintenant, nous voulons sélectionner par ID à la place de la classe. 523 00:25:23,470 --> 00:25:28,080 Ce serait une chose semblable où nous il suffit de faire le signe dièse pour ID. 524 00:25:28,080 --> 00:25:33,576 Nous sommes donc ici toute la sélection éléments qui ont de la barre de ID. 525 00:25:33,576 --> 00:25:35,400 >> TOMAS REIMERS: Et cela s'étend. 526 00:25:35,400 --> 00:25:36,450 Qui s'étend CSS. 527 00:25:36,450 --> 00:25:42,260 Tout comme en CSS, vous pouvez sélectionner tous liens, qui ont la classe foo. 528 00:25:42,260 --> 00:25:43,420 Ici, c'est la même chose. 529 00:25:43,420 --> 00:25:52,750 >> Vous pourriez faire a.foo, qui sélectionnez tous les liens avec la classe foo. 530 00:25:52,750 --> 00:25:58,860 Vous pourriez faire un bar forte, qui serait cliquez sur le lien avec la barre d'identification et ainsi de 531 00:25:58,860 --> 00:25:59,770 et cetera. 532 00:25:59,770 --> 00:26:02,120 Un sélecteur CSS est valide sélecteur jQuery. 533 00:26:02,120 --> 00:26:03,370 >> MIKE RIZZO: Ouais. 534 00:26:03,370 --> 00:26:07,996 535 00:26:07,996 --> 00:26:11,460 OK, maintenant nous allons entrer dans un peu de manipulation que nous pouvons faire avec 536 00:26:11,460 --> 00:26:12,870 notre jQuery. 537 00:26:12,870 --> 00:26:19,280 Donc, jQuery a un type particulier de notation où nous utilisons seulement 538 00:26:19,280 --> 00:26:20,170 un point à la fin. 539 00:26:20,170 --> 00:26:23,340 Et vous pouvez penser à cela comme dans C la façon dont nous avions différentes structures. 540 00:26:23,340 --> 00:26:27,110 Et pour aller dans ces structures, vous le feriez utiliser un point d'entrer dans eux. 541 00:26:27,110 --> 00:26:28,480 >> C'est, en quelque sorte, une chose semblable. 542 00:26:28,480 --> 00:26:33,570 Ce n'est que maintenant que nous avons des fonctions au sein de cette Sélecteur que nous pouvons appeler sur elle. 543 00:26:33,570 --> 00:26:38,640 Donc ici, le premier exemple vous pouvez voir est un sélecteur CSS. 544 00:26:38,640 --> 00:26:45,290 Et dans le fond, ce que cela fait est-il applique le premier élément de ce CSS 545 00:26:45,290 --> 00:26:46,230 chose que vous avez sélectionné - 546 00:26:46,230 --> 00:26:47,720 cet élément que vous avez sélectionné - 547 00:26:47,720 --> 00:26:49,290 avec la valeur. 548 00:26:49,290 --> 00:26:55,390 >> TOMAS REIMERS: Donc une traduction facile de ce serait si jQuery, essentiellement, 549 00:26:55,390 --> 00:26:57,790 juste pris foo. 550 00:26:57,790 --> 00:27:05,480 Et puis en CSS dit, la couleur rouge et proche. 551 00:27:05,480 --> 00:27:06,670 C'est la même idée. 552 00:27:06,670 --> 00:27:08,800 Ce qu'il a fait est qu'il est sélectionné tous les éléments de foo. 553 00:27:08,800 --> 00:27:10,170 Et puis il est appliqué. 554 00:27:10,170 --> 00:27:15,884 En quelque sorte, la couleur de la propriété est égal à rouge. 555 00:27:15,884 --> 00:27:21,070 >> MIKE RIZZO: De même, nous pouvons également modifier le contenu réel de ce qui est 556 00:27:21,070 --> 00:27:24,870 montrant sur le code HTML de la page, qui est vraiment cool parce que cela signifie que votre 557 00:27:24,870 --> 00:27:28,095 les pages Web peuvent maintenant être complètement dynamique et ne doivent pas être statique 558 00:27:28,095 --> 00:27:31,660 que vous imprimez à l'aide de PHP dès le début de 559 00:27:31,660 --> 00:27:33,320 la page en cours de chargement. 560 00:27:33,320 --> 00:27:36,810 Donc ici, si nous voulions modifier la HTML réelle de la page, nous serions maintenant 561 00:27:36,810 --> 00:27:43,550 appeler la fonction HTML, qui alors seulement inserts tout ce que nous précisons dans 562 00:27:43,550 --> 00:27:45,390 cet élément que nous avons choisi. 563 00:27:45,390 --> 00:27:49,810 Donc, ici, nous sommes élément sélectionnant avec foo de classe et de dire que c'est HTML 564 00:27:49,810 --> 00:27:52,200 il est maintenant Bonjour tout le monde. 565 00:27:52,200 --> 00:27:55,600 >> TOMAS REIMERS: Et quand vous pensez à ce sont des applications utiles de 566 00:27:55,600 --> 00:28:00,800 ce, cette CSS une, la première chose qui vous pouvez commencer à penser est 567 00:28:00,800 --> 00:28:03,070 en termes de même des menus déroulants. 568 00:28:03,070 --> 00:28:08,350 Vous pouvez commencer à faire des choses comme, quand un utilisateur survole la partie supérieure 569 00:28:08,350 --> 00:28:11,970 d'une baisse de baisse, vous voulez faire la partie inférieure visible. 570 00:28:11,970 --> 00:28:12,540 Droite? 571 00:28:12,540 --> 00:28:15,610 >> Donc, en CSS, nous avons des propriétés de faire quelque chose de visible. 572 00:28:15,610 --> 00:28:19,330 Des choses comme l'affichage du côlon aucun rendrait invisible. 573 00:28:19,330 --> 00:28:21,190 Bloc de visualisation, il serait visible. 574 00:28:21,190 --> 00:28:25,860 Ou même si vous voulez aller simple, vous avoir des choses comme égaux de visibilité 575 00:28:25,860 --> 00:28:27,520 visible, et la visibilité est égale caché. 576 00:28:27,520 --> 00:28:30,330 577 00:28:30,330 --> 00:28:34,780 >> Et vous pouvez commencer à mettre en œuvre les choses comme tomber en bas à droite des menus 578 00:28:34,780 --> 00:28:38,410 après que vous obtenez à travers l'idée de la façon dont pouvez-vous comprendre quand cela ouvre, 579 00:28:38,410 --> 00:28:39,850 que nous allons passer à travers très brièvement. 580 00:28:39,850 --> 00:28:42,160 Mais nous pouvons commencer à voir applications de cette. 581 00:28:42,160 --> 00:28:45,540 Dans le même sens, si vous deviez essayer et mettre en œuvre, disons, une discussion 582 00:28:45,540 --> 00:28:48,620 moteur et vous voulez faire un peu d' bulle vient chaque fois que vous avez 583 00:28:48,620 --> 00:28:52,880 obtenu un nouveau message, une fois que vous obtenez le nouveau message, vous pouvez faire un peu d' 584 00:28:52,880 --> 00:28:55,890 bulle venir en modifiant le code HTML de la page, à droite? 585 00:28:55,890 --> 00:29:00,540 En ajoutant que bulle supplémentaire avec le texte supplémentaire là. 586 00:29:00,540 --> 00:29:01,140 Ouais? 587 00:29:01,140 --> 00:29:07,750 >> PUBLIC: Donc, vous intégrer au sein de le code HTML dans un peu comme un 588 00:29:07,750 --> 00:29:10,534 [Inaudible]? 589 00:29:10,534 --> 00:29:12,940 >> MIKE RIZZO: Droit. 590 00:29:12,940 --> 00:29:16,190 Oui, nous y reviendrons dans un peu. 591 00:29:16,190 --> 00:29:18,810 Ouais, c'est un proche peu de PHP. 592 00:29:18,810 --> 00:29:21,240 Pas exactement similaire. 593 00:29:21,240 --> 00:29:24,730 >> Une bonne distinction à faire est ce que ce est en fait l'édition quand nous éditons 594 00:29:24,730 --> 00:29:28,480 la page, car il ne va pas être éditant le fichier réel qui est en cours 595 00:29:28,480 --> 00:29:31,380 conservés sur le serveur parce que le monde ne devraient pas avoir l'autorisation 596 00:29:31,380 --> 00:29:32,610 pour éditer vos fichiers. 597 00:29:32,610 --> 00:29:36,080 Ceci est juste en train de modifier ce qui est sur la page et ce qui est affiché dans 598 00:29:36,080 --> 00:29:36,950 le navigateur. 599 00:29:36,950 --> 00:29:40,340 Donc, si vous étiez de recharger la page après, dire, la suppression de quelque chose que nous 600 00:29:40,340 --> 00:29:44,730 voyons que nous pouvons faire avec l'appel de supprimer, cette chose serait alors réapparaître. 601 00:29:44,730 --> 00:29:48,590 >> TOMAS REIMERS: Donc, une façon de penser c'est si je suis votre ordinateur et 602 00:29:48,590 --> 00:29:50,170 Mike est, en quelque sorte, le serveur. 603 00:29:50,170 --> 00:29:53,850 Qu'est-ce qui va se passer, c'est que je vais demander à Mike, hé, je peux avoir une copie de 604 00:29:53,850 --> 00:29:54,630 cette page web? 605 00:29:54,630 --> 00:29:56,190 Et il va me donner une copie de celui-ci. 606 00:29:56,190 --> 00:29:57,430 >> Non, ce n'est pas la chose originale. 607 00:29:57,430 --> 00:29:58,620 C'est juste une copie. 608 00:29:58,620 --> 00:30:00,450 Et puis ce serait comme, oh, il ya ici JavaScript. 609 00:30:00,450 --> 00:30:02,450 De toute évidence, je dois modifier le page à être comme ça. 610 00:30:02,450 --> 00:30:04,250 Et je éditer votre copie. 611 00:30:04,250 --> 00:30:05,920 >> Mais ce n'est pas à effectuer la copie réelle. 612 00:30:05,920 --> 00:30:08,480 Et si je devais lui demander à nouveau actualiser la page, - 613 00:30:08,480 --> 00:30:10,060 hey, je peux avoir une autre copie propre - 614 00:30:10,060 --> 00:30:11,440 il va me donner une autre copie propre. 615 00:30:11,440 --> 00:30:14,240 Et puis, je vais faire la même chose comme, oh, ce JS ici qui dit 616 00:30:14,240 --> 00:30:14,866 à éditer. 617 00:30:14,866 --> 00:30:17,460 Et je vais continuer à le faire. 618 00:30:17,460 --> 00:30:20,930 >> MIKE RIZZO: Alors une chose vraiment cool que vous pouvez faire avec jQuery est 619 00:30:20,930 --> 00:30:24,350 effectivement ajouter différents types des animations à votre page. 620 00:30:24,350 --> 00:30:27,440 Je ne sais pas si vous avez jamais vu où vous essayez de remplissage d'un formulaire 621 00:30:27,440 --> 00:30:31,250 en ligne et vous ne remplissez pas les choses correctement. 622 00:30:31,250 --> 00:30:33,440 Alors une petite chose glisse vers le bas en haut et vous dit 623 00:30:33,440 --> 00:30:34,820 l'ont pas fait correctement. 624 00:30:34,820 --> 00:30:36,260 S'il vous plaît essayez de nouveau. 625 00:30:36,260 --> 00:30:37,890 Et puis, il pourrait même simplement glisser vers le haut. 626 00:30:37,890 --> 00:30:40,710 >> Il s'avère que jQuery a construit dans les fonctions qui rendent tout cela 627 00:30:40,710 --> 00:30:44,180 animation vraiment, vraiment facile. 628 00:30:44,180 --> 00:30:46,750 Donc, il est d'abord fondu hors fonction, qui 629 00:30:46,750 --> 00:30:47,710 vous pouvez faire appel à quelque chose. 630 00:30:47,710 --> 00:30:55,650 Et c'est un moyen de changer le CSS de cet élément de façon animée. 631 00:30:55,650 --> 00:30:58,480 Donc, il faut quelque élément vous l'appelez fade out sur. 632 00:30:58,480 --> 00:31:03,990 Et puis, change lentement de l'opacité jusqu'à ce qu'il s'éteigne complètement transparent. 633 00:31:03,990 --> 00:31:07,330 >> TOMAS REIMERS: L'autre populaire est glisser vers le bas, ce qui rendra 634 00:31:07,330 --> 00:31:08,800 apparaître quelque chose en le faisant glisser vers le bas. 635 00:31:08,800 --> 00:31:12,840 Ainsi, dans le cas du menu déroulant, encore une fois, quand nous avons appris à détecter 636 00:31:12,840 --> 00:31:15,310 quand cela a été survolé, vous pourriez dire ce fond 637 00:31:15,310 --> 00:31:16,910 partie glisser vers le bas maintenant. 638 00:31:16,910 --> 00:31:19,270 Et puis, il semblerait en faisant glisser vers le bas. 639 00:31:19,270 --> 00:31:22,042 640 00:31:22,042 --> 00:31:26,590 >> MIKE RIZZO: Et puis, si vous avez juste un certain type d'animation à l'esprit que 641 00:31:26,590 --> 00:31:29,080 jQuery ne fournit pas nécessairement. 642 00:31:29,080 --> 00:31:32,690 Par exemple, disons que jQuery ne vous fournissez avec un toboggan 643 00:31:32,690 --> 00:31:33,750 vers le bas et glisser vers le haut. 644 00:31:33,750 --> 00:31:36,740 Eh bien, disons que vous vouliez glisser quelque chose en partant de la gauche ou de 645 00:31:36,740 --> 00:31:39,880 le droit un peu comme le CS50 page fait chaque fois 646 00:31:39,880 --> 00:31:42,080 vous allez à un nouveau panneau. 647 00:31:42,080 --> 00:31:45,030 Vous auriez alors probablement mettre en œuvre vous-même en utilisant la 648 00:31:45,030 --> 00:31:49,310 animer fonction au sein de jQuery. 649 00:31:49,310 --> 00:31:51,350 >> Pareillement, il vous suffit d'animer. 650 00:31:51,350 --> 00:31:55,850 Et puis, en son sein, il prend un dictionnaire des différentes valeurs 651 00:31:55,850 --> 00:31:57,340 que vous êtes censé passer. 652 00:31:57,340 --> 00:32:06,960 Donc ici, si nous voulions animer le foo élément de telle sorte que sa largeur soit 653 00:32:06,960 --> 00:32:10,880 dilate ou se contracte à 80 pixels, en fonction de ce qu'il est actuellement. 654 00:32:10,880 --> 00:32:14,100 Nous voudrions simplement passer que l'argument en son sein. 655 00:32:14,100 --> 00:32:18,060 >> Animer également avoir d'autres arguments que vous pourriez passer, par exemple, 656 00:32:18,060 --> 00:32:21,150 la vitesse de l'animation que vous voulez lui donner. 657 00:32:21,150 --> 00:32:26,220 Et pour ce faire, je voudrais juste dire rapidement Google jQuery animer. 658 00:32:26,220 --> 00:32:31,710 Et puis, élever cette page, vous pouvez voir il a un tas de différents 659 00:32:31,710 --> 00:32:33,560 propriétés que vous pouvez passer. 660 00:32:33,560 --> 00:32:35,990 >> Et je vous encourage - chaque fois que vous venez sur quelque chose que vous n'avez pas 661 00:32:35,990 --> 00:32:40,390 connaître ou tout simplement pour en savoir plus sur un méthode particulière que vous pouvez appeler 662 00:32:40,390 --> 00:32:41,270 sur quelque chose - 663 00:32:41,270 --> 00:32:44,440 Il suffit de Google. jQuery est extrêmement bien documenté. 664 00:32:44,440 --> 00:32:49,140 Et souvent, il ya beaucoup de exemples qu'ils fournissent pour vous. 665 00:32:49,140 --> 00:32:52,470 Si nous faisons défiler vers le bas - 666 00:32:52,470 --> 00:32:53,720 chemin vers le bas - 667 00:32:53,720 --> 00:32:57,660 668 00:32:57,660 --> 00:32:59,190 que nous pouvons utiliser, aussi bien. 669 00:32:59,190 --> 00:33:02,480 >> Encore une fois, quand un développeur va en fait par la difficulté de l'écriture d'un 670 00:33:02,480 --> 00:33:05,810 bibliothèque, ils veulent généralement quelqu'un de l'utiliser. 671 00:33:05,810 --> 00:33:09,400 Donc, aux côtés de qui se passe à une documentation. 672 00:33:09,400 --> 00:33:12,270 Et que la documentation peut généralement être trouvé sur la page du projet, qui est 673 00:33:12,270 --> 00:33:14,970 pourquoi nous vous avons donné ce site original le début, qui vous relie à la 674 00:33:14,970 --> 00:33:18,080 pages du projet afin que vous puissiez voir que la documentation. 675 00:33:18,080 --> 00:33:22,670 >> Typiquement, la page du projet dans le cas de [inaudible], il vous le dit 676 00:33:22,670 --> 00:33:23,940 noms des classes. 677 00:33:23,940 --> 00:33:27,250 Dans le cas de JavaScript, il donne vous le nom des fonctions. 678 00:33:27,250 --> 00:33:35,310 Par ailleurs, si nous faisons défiler vers le sommet, une note de côté rapide sur les fonctions est 679 00:33:35,310 --> 00:33:39,080 chaque fois que vous voyez une fonction mise en oeuvre comme ça avec le disque 680 00:33:39,080 --> 00:33:43,800 crochets dans le milieu, ce qui signifie que cette propriété est facultative. 681 00:33:43,800 --> 00:33:44,750 Juste un heads-up. 682 00:33:44,750 --> 00:33:47,350 J'ai vu beaucoup de questions à ce sujet. 683 00:33:47,350 --> 00:33:50,370 >> Donc, ici, nous pouvons voir que le animé prend propriétés 684 00:33:50,370 --> 00:33:51,800 comme un argument nécessaire. 685 00:33:51,800 --> 00:33:54,870 Et tout le reste est optionnel. 686 00:33:54,870 --> 00:33:56,136 Side note - 687 00:33:56,136 --> 00:33:58,090 vous pouvez penser ce, sorte de, comme les pages de manuel. 688 00:33:58,090 --> 00:34:04,275 Les pages de manuel sont documentation pour C et pour beaucoup d'autres choses, aussi bien. 689 00:34:04,275 --> 00:34:11,020 >> MIKE RIZZO: Donc, nous avons appris à changer différente CSS sur la page, 690 00:34:11,020 --> 00:34:14,040 animer, et enlever ajouter HTML. 691 00:34:14,040 --> 00:34:16,889 Mais l'un des vraiment plus puissant de choses sur JavaScript 692 00:34:16,889 --> 00:34:18,270 et surtout jQuery - 693 00:34:18,270 --> 00:34:22,570 ce qu'il vous permet de faire est de répondre à différents éléments qui se produisent. 694 00:34:22,570 --> 00:34:25,380 Par exemple, nous avons ici un gestionnaire d'événements. 695 00:34:25,380 --> 00:34:28,210 Et cela signifie simplement chaque fois que cela événement se produit, nous les traitons dans un 696 00:34:28,210 --> 00:34:29,280 certaine manière. 697 00:34:29,280 --> 00:34:35,159 >> Donc, ici, l'événement jQuery générique gestionnaire est le point sur. 698 00:34:35,159 --> 00:34:42,949 Et puis, la première chose que vous avez fourni est ce cas, il devrait 699 00:34:42,949 --> 00:34:43,810 être à l'écoute pour. 700 00:34:43,810 --> 00:34:45,610 Donc, ici, c'est le déclic qui nous attendons. 701 00:34:45,610 --> 00:34:49,250 >> TOMAS REIMERS: Sinon, vous avez sur le vol stationnaire, qui est un très populaire. 702 00:34:49,250 --> 00:34:52,000 Donc, retour à mon menu déroulant idée. 703 00:34:52,000 --> 00:34:54,239 Vous auriez du haut sur le vol stationnaire. 704 00:34:54,239 --> 00:34:56,096 Et puis vous pouvez changer cela. 705 00:34:56,096 --> 00:34:56,830 >> MIKE RIZZO: Droit. 706 00:34:56,830 --> 00:35:01,680 Et puis, quand cela arrive, il suffit exécute cette fonction que nous lui donnons 707 00:35:01,680 --> 00:35:05,080 comme argument et que il alerte bonjour ou salut. 708 00:35:05,080 --> 00:35:08,900 >> TOMAS REIMERS: Donc, dans le cas de JavaScript, c'est un endroit où nous devons 709 00:35:08,900 --> 00:35:12,970 nous retirer de C. Nous pouvons effectivement prendre des fonctions comme arguments. 710 00:35:12,970 --> 00:35:15,940 Et il ya beaucoup de très des moyens complexes pour ce faire. 711 00:35:15,940 --> 00:35:17,940 Nous allons promouvoir une façon, qui est que vous pouvez définir la 712 00:35:17,940 --> 00:35:19,270 fonctionner là. 713 00:35:19,270 --> 00:35:22,540 >> Ainsi, lorsque vous demandez une fonction un paramètre, vous êtes fondamentalement juste 714 00:35:22,540 --> 00:35:24,500 va définir la fonction sur place. 715 00:35:24,500 --> 00:35:27,090 Et la façon dont vous définissez une fonction en JavaScript, c'est vous 716 00:35:27,090 --> 00:35:28,820 dire littéralement fonction. 717 00:35:28,820 --> 00:35:30,130 Ensuite, le plus souvent, le nom de la fonction. 718 00:35:30,130 --> 00:35:32,510 Mais nous n'allons jamais à la référence de nouveau cette fonction. 719 00:35:32,510 --> 00:35:34,040 Donc, nous laissons sans nom. 720 00:35:34,040 --> 00:35:40,440 >> Ensuite, les parenthèses, le bouclés croisillons, et ensuite le code à l'intérieur de cela. 721 00:35:40,440 --> 00:35:42,540 Nous comprenons donc cette boîte être un peu déroutant. 722 00:35:42,540 --> 00:35:45,180 Nous vous donnons donc la forme générale de ce qu'est un gestionnaire d'événements ressemble 723 00:35:45,180 --> 00:35:47,790 ci-dessous, qui est sur les événements. 724 00:35:47,790 --> 00:35:50,598 Et puis, votre code à l'intérieur que. 725 00:35:50,598 --> 00:35:52,478 >> MIKE RIZZO: Y at-il questions à ce sujet? 726 00:35:52,478 --> 00:35:54,818 Cela peut être un peu déroutant la première fois que vous le voyez. 727 00:35:54,818 --> 00:35:57,550 >> TOMAS REIMERS: Vous voulez réellement ouvrir un fichier et de leur montrer une certaine 728 00:35:57,550 --> 00:35:58,155 jQuery en ce moment? 729 00:35:58,155 --> 00:35:59,853 >> MIKE RIZZO: Oui, faisons-le. 730 00:35:59,853 --> 00:36:00,256 OK. 731 00:36:00,256 --> 00:36:02,490 >> TOMAS REIMERS: Alors maintenant, nous sommes dans l'appareil. 732 00:36:02,490 --> 00:36:07,730 Et ce que nous avons fait, c'est que nous avons pris la liberté de créer à la fois un index.HTML 733 00:36:07,730 --> 00:36:10,100 fichier, qui relie à un fichier JavaScript. 734 00:36:10,100 --> 00:36:12,880 Et pouvons-nous ouvrir le - 735 00:36:12,880 --> 00:36:15,170 ouais. 736 00:36:15,170 --> 00:36:16,630 Eh bien, il fait deux choses. 737 00:36:16,630 --> 00:36:18,350 >> Le premier est le lie à le fichier JavaScript. 738 00:36:18,350 --> 00:36:21,250 Et nous allons voir que ici. 739 00:36:21,250 --> 00:36:25,340 Nous voyons que dans la tête de la document HTML, en particulier. 740 00:36:25,340 --> 00:36:28,260 Donc, vous voyez que là nous, fondamentalement, disons SRC, 741 00:36:28,260 --> 00:36:29,590 qui se tient pour la source. 742 00:36:29,590 --> 00:36:30,630 Et c'est l'URL. 743 00:36:30,630 --> 00:36:32,700 >> Alors là, vous pouvez dire que nous avons inclus jQuery. 744 00:36:32,700 --> 00:36:34,290 Et nous avons également inclus les scripts. 745 00:36:34,290 --> 00:36:40,630 L'autre façon d'inclure Javascript que vous pouvez inclure un script en ligne 746 00:36:40,630 --> 00:36:44,600 tag que nous avons au fond où il dit le type de script est un texte d'activer JavaScript. 747 00:36:44,600 --> 00:36:46,960 >> Nous disons donc, écoutez, nous sommes sur le point d'inclure un script. 748 00:36:46,960 --> 00:36:51,890 Et du type de ce script est JavaScript, qui est un type de texte. 749 00:36:51,890 --> 00:36:52,550 Très simple. 750 00:36:52,550 --> 00:36:56,490 >> MIKE RIZZO: Donc, en quelque sorte, arrive à votre question sur la façon dont nous incluons 751 00:36:56,490 --> 00:37:02,340 JavaScript dans nos fichiers car lorsque nous avait PHP, nous faire quelque chose comme ça. 752 00:37:02,340 --> 00:37:07,570 Et puis, que nos fonctions PHP - disons que les stocks ne 753 00:37:07,570 --> 00:37:09,150 avec quelque chose que - 754 00:37:09,150 --> 00:37:10,490 va là-dedans. 755 00:37:10,490 --> 00:37:13,860 Cependant, nous avons maintenant les balises de script que nous lui donnons, qui sont en fait 756 00:37:13,860 --> 00:37:19,470 partie du HTML lui-même, car il n'est pas semblant être un fichier HTML comme il 757 00:37:19,470 --> 00:37:25,070 est en PHP parce que si vous allez réellement en et de regarder la source de la page, 758 00:37:25,070 --> 00:37:28,430 vous verrez ces balises de script là avec le JavaScript associé à 759 00:37:28,430 --> 00:37:29,800 eux dans ce. 760 00:37:29,800 --> 00:37:31,760 >> Alors, si nous voulions écrire du JavaScript - 761 00:37:31,760 --> 00:37:37,110 disons simplement que nous voulions changer le corps car pour le moment je n'ai pas 762 00:37:37,110 --> 00:37:40,020 d'autres balises que je ne peux vraiment modifier en plus corps. 763 00:37:40,020 --> 00:37:42,450 Disons que je voulais modifier le CSS de cela. 764 00:37:42,450 --> 00:37:46,190 Donc, nous allons aller de l'avant et le changement la couleur de celui-ci au rouge. 765 00:37:46,190 --> 00:37:47,380 >> Donc, je sauve le fichier. 766 00:37:47,380 --> 00:37:52,700 Revenons à notre page Web, rafraîchissement, et il le fait automatiquement 767 00:37:52,700 --> 00:37:55,920 car il ne semblait pas qu'il attendait du tout, parce que nous n'étions pas à l'écoute 768 00:37:55,920 --> 00:37:59,450 pour un événement ou quelque chose comme ça. 769 00:37:59,450 --> 00:38:02,800 >> TOMAS REIMERS: Donc, si nous revenons à ce que déposer en particulier - le HTML 770 00:38:02,800 --> 00:38:04,710 Fichier - ce que vous allez à voir, c'est que nous avons - 771 00:38:04,710 --> 00:38:06,810 N'oubliez pas que c'est chargé, en quelque sorte, par ordre chronologique. 772 00:38:06,810 --> 00:38:09,910 Nous avons donc d'abord la tête. il charge ces deux fichiers. 773 00:38:09,910 --> 00:38:10,800 Ensuite, nous allons à l'organisme. 774 00:38:10,800 --> 00:38:11,640 Et nous voyons Bonjour tout le monde. 775 00:38:11,640 --> 00:38:13,030 Alors que nous rendons Bonjour tout le monde. 776 00:38:13,030 --> 00:38:15,240 >> Et puis la dernière chose que nous avons c'est que nous avons la balise script. 777 00:38:15,240 --> 00:38:20,880 Donc, il va la balise script parce que c'est pas dire d'attendre quoi que ce soit. 778 00:38:20,880 --> 00:38:24,700 Et c'est le plus fondamental façon d'exécuter JavaScript. 779 00:38:24,700 --> 00:38:29,200 >> Cela dit, pouvez-vous mettre le script marquer dans l'en-tête juste 780 00:38:29,200 --> 00:38:31,240 pour montrer ce point? 781 00:38:31,240 --> 00:38:34,450 782 00:38:34,450 --> 00:38:35,700 Et exécuter ce. 783 00:38:35,700 --> 00:38:38,880 784 00:38:38,880 --> 00:38:41,070 Nous allons constater qu'il ne pas changer la couleur. 785 00:38:41,070 --> 00:38:44,210 Et c'est l'un des problèmes de l' JavaScript est que les choses sont chargé 786 00:38:44,210 --> 00:38:45,930 dans un ordre chronologique. 787 00:38:45,930 --> 00:38:49,750 >> Donc, au moment où ce code courait, nous avons choisi - 788 00:38:49,750 --> 00:38:52,530 revenir - 789 00:38:52,530 --> 00:38:53,670 la balise body. 790 00:38:53,670 --> 00:38:57,560 La balise de corps n'existe pas encore parce JavaScript est conforme à HTML. 791 00:38:57,560 --> 00:39:01,790 Ainsi, le navigateur est comme sélectionnez corps. 792 00:39:01,790 --> 00:39:02,760 Il n'y a pas une telle chose encore. 793 00:39:02,760 --> 00:39:03,600 Donc, nous pouvons l'ignorer. 794 00:39:03,600 --> 00:39:05,330 Et nous continuons. 795 00:39:05,330 --> 00:39:07,200 >> Et puis nous définissons une balise body. 796 00:39:07,200 --> 00:39:09,670 Mais ce n'est jamais mis à jour. 797 00:39:09,670 --> 00:39:12,560 Ainsi, lorsque vous la mise en œuvre de script étiquettes, assurez-vous que vous placez 798 00:39:12,560 --> 00:39:15,502 après la balise body. 799 00:39:15,502 --> 00:39:16,820 Diapositive suivante. 800 00:39:16,820 --> 00:39:17,830 >> MIKE RIZZO: OK. 801 00:39:17,830 --> 00:39:19,330 Nous avons donc changé quelque chose. 802 00:39:19,330 --> 00:39:21,910 Mais il n'avait pas l'air comme il a répondu à nous du tout parce que c'est en quelque sorte 803 00:39:21,910 --> 00:39:24,150 l'a fait dès qu'il a chargé la page. 804 00:39:24,150 --> 00:39:27,700 Alors maintenant, au lieu de faire cela, pourquoi ne pas ajouter un gestionnaire d'événements. 805 00:39:27,700 --> 00:39:31,020 >> Donc, nous allons faire quelque chose au corps nouveau. 806 00:39:31,020 --> 00:39:33,490 Et disons que nous le faisons sur - 807 00:39:33,490 --> 00:39:34,500 cliquez sur. 808 00:39:34,500 --> 00:39:35,750 Nous allons ajouter une fonction. 809 00:39:35,750 --> 00:39:38,270 810 00:39:38,270 --> 00:39:39,690 >> Le changement de Let: TOMAS REIMERS c'est la couleur de rouge à nouveau. 811 00:39:39,690 --> 00:39:40,000 Pourquoi pas? 812 00:39:40,000 --> 00:39:41,680 >> Le changement de Ouais, laissez: MIKE RIZZO sa 'couleur rouge à nouveau. 813 00:39:41,680 --> 00:39:46,310 814 00:39:46,310 --> 00:39:46,900 Très bien. 815 00:39:46,900 --> 00:39:48,480 Donc, nous allons recharger la page. 816 00:39:48,480 --> 00:39:49,530 OK, nous voyons - 817 00:39:49,530 --> 00:39:52,290 comme prévu, il ne tourne pas encore rouge. 818 00:39:52,290 --> 00:39:53,610 Mais alors nous pouvons aller de l'avant et cliquez dessus. 819 00:39:53,610 --> 00:39:54,270 >> TOMAS REIMERS: Et il ne passe au rouge. 820 00:39:54,270 --> 00:39:56,090 >> MIKE RIZZO: Et il le fait devient rouge comme prévu. 821 00:39:56,090 --> 00:39:59,010 >> TOMAS REIMERS: Et nous pouvons voir comment nous pouvons commencer à construire très basique 822 00:39:59,010 --> 00:40:00,170 interaction. 823 00:40:00,170 --> 00:40:03,850 D'autres choses que nous pourrions vouloir faire est, si nous ne voulons pas rendre le corps 824 00:40:03,850 --> 00:40:07,230 la couleur rouge, nous allons faire le HTML la couleur de fond rouge. 825 00:40:07,230 --> 00:40:08,480 Juste donc c'est la même CSS. 826 00:40:08,480 --> 00:40:19,960 827 00:40:19,960 --> 00:40:23,320 >> Et quand nous changeons, nous pouvons voir ce effet très dramatique de modification de la 828 00:40:23,320 --> 00:40:25,510 page entière. 829 00:40:25,510 --> 00:40:29,100 Encore une fois, si vous êtes la mise en œuvre des choses, vous pouvez avoir un composant 830 00:40:29,100 --> 00:40:30,150 qui est destiné à être cliqué. 831 00:40:30,150 --> 00:40:32,710 Disons un bouton Quitter et un autre composant entier, 832 00:40:32,710 --> 00:40:33,830 qui est destiné à réagir. 833 00:40:33,830 --> 00:40:35,755 Donc, vous retirez une fenêtre lorsque cela se produit. 834 00:40:35,755 --> 00:40:39,341 835 00:40:39,341 --> 00:40:40,700 >> MIKE RIZZO: OK. 836 00:40:40,700 --> 00:40:42,200 À titre d'exemple - 837 00:40:42,200 --> 00:40:44,400 vous n'avez pas la chance de voir tout à l'heure - 838 00:40:44,400 --> 00:40:47,500 Je vais vous montrer ce que ça donne comme lorsque nous nous cachons quelque chose. 839 00:40:47,500 --> 00:40:52,220 Alors je vais aller de l'avant et ne glisse vers le haut. 840 00:40:52,220 --> 00:40:54,440 >> TOMAS REIMERS: Voulez-vous conclure que, dans un Type de paragraphe avant de faire cela? 841 00:40:54,440 --> 00:40:55,132 >> MIKE RIZZO: OK. 842 00:40:55,132 --> 00:40:59,135 Ouais, pourquoi ne faisons-nous pas tellement nous pouvons choisir un peu plus. 843 00:40:59,135 --> 00:41:00,490 >> TOMAS Reimers: Et disons donner une classe. 844 00:41:00,490 --> 00:41:01,740 >> MIKE RIZZO: Ouais. 845 00:41:01,740 --> 00:41:06,575 846 00:41:06,575 --> 00:41:09,920 OK, donc nous allons voir. 847 00:41:09,920 --> 00:41:14,820 Au lieu de sélectionner le corps même maintenant, je vais sélectionner tout avec 848 00:41:14,820 --> 00:41:18,780 classe bonjour, qui ici nous juste avoir une chose. 849 00:41:18,780 --> 00:41:20,900 Donc, nous ne devrions pas avoir à s'inquiéter à ce sujet. 850 00:41:20,900 --> 00:41:23,080 >> Donc, je vais rafraîchir. 851 00:41:23,080 --> 00:41:24,230 Je vais aller de l'avant et clique dessus. 852 00:41:24,230 --> 00:41:27,890 Et il, en quelque sorte, fait une diapositive bizarre jusqu'à chose, qui n'a pas l'air 853 00:41:27,890 --> 00:41:29,580 attrayant. 854 00:41:29,580 --> 00:41:31,060 En général, ils ne regardent assez agréable. 855 00:41:31,060 --> 00:41:32,720 Je suppose que, ce - pour certains raison - n'a pas fait. 856 00:41:32,720 --> 00:41:36,640 Je vais juste faire un fondu de manière vous pouvez regarder aussi. 857 00:41:36,640 --> 00:41:38,100 Beaucoup plus agréable. 858 00:41:38,100 --> 00:41:41,150 >> Et puis, si j'ouvre le JavaScript consolons à nouveau et nous voulons voir ce que 859 00:41:41,150 --> 00:41:43,900 ça ressemble quand nous disparaîtrons po 860 00:41:43,900 --> 00:41:46,920 Maintenant, je demande simplement disparaître dans le coup. 861 00:41:46,920 --> 00:41:48,830 Et elle se fane Dans 862 00:41:48,830 --> 00:41:56,150 >> De même, nous pourrions aussi passer un argument à s'estomper ou disparaître, 863 00:41:56,150 --> 00:41:57,640 qui est, en quelque sorte, la vitesse de celui-ci. 864 00:41:57,640 --> 00:42:02,220 Allons donc de l'avant et que nous voulons il d'aller lentement fondu po 865 00:42:02,220 --> 00:42:04,250 Donc je suppose que cela semblait encore assez rapide. 866 00:42:04,250 --> 00:42:06,180 Mais il était plus lent qu'avant. 867 00:42:06,180 --> 00:42:10,340 >> TOMAS REIMERS: Et si vous voulez trouver en savoir plus sur ces choses, encore une fois, 868 00:42:10,340 --> 00:42:13,410 juste aller à la documentation jQuery, que nous vous avons donné, et lisons 869 00:42:13,410 --> 00:42:13,735 à travers ceux-ci. 870 00:42:13,735 --> 00:42:15,790 Ils documentent leurs fonctions incroyablement bien. 871 00:42:15,790 --> 00:42:18,622 872 00:42:18,622 --> 00:42:19,570 >> MIKE RIZZO: OK. 873 00:42:19,570 --> 00:42:21,560 Donc je suppose que nous allons revenir à cela. 874 00:42:21,560 --> 00:42:23,490 Et nous pouvons parler de notre dernière page. 875 00:42:23,490 --> 00:42:24,690 Eh bien, nous pouvons en finir avec Bootstrap. 876 00:42:24,690 --> 00:42:27,140 Et puis nous passerons jusqu'à pour certaines questions. 877 00:42:27,140 --> 00:42:30,180 Et si vous les gars avez des idées vous voulez essayer de vomir et de voir 878 00:42:30,180 --> 00:42:34,150 si nous pouvons les mettre en œuvre JavaScript rapidement. 879 00:42:34,150 --> 00:42:37,890 >> Donc, très rapidement sur Bootstrap, qui a été automatiquement inclus dans 880 00:42:37,890 --> 00:42:41,700 votre dernier problème posé dans le dossier de CSS et effectivement liée à votre 881 00:42:41,700 --> 00:42:43,190 header.php. 882 00:42:43,190 --> 00:42:46,740 Donc, vous auriez pu ajouter que les classes sont définis à l'intérieur de Bootstrap à elle. 883 00:42:46,740 --> 00:42:50,490 Et il aurait automatiquement style ces choses en conséquence. 884 00:42:50,490 --> 00:42:54,550 >> TOMAS REIMERS: Donc Bootstrap est un très chose magique développé par les gens 885 00:42:54,550 --> 00:42:55,340 sur Twitter. 886 00:42:55,340 --> 00:42:57,230 Et ce qu'il est censé faire, c'est - 887 00:42:57,230 --> 00:43:00,740 avant les sites Web étaient vraiment difficile de faire l'air agréable, surtout quand nous avons eu 888 00:43:00,740 --> 00:43:02,200 beaucoup de composants communs. 889 00:43:02,200 --> 00:43:04,770 Donc, beaucoup de boutons sur le web regardé la même chose. 890 00:43:04,770 --> 00:43:08,960 >> Un grand nombre de champs de texte peut être faite à regarder mieux que le texte standard 891 00:43:08,960 --> 00:43:13,620 domaine vous le savez probablement de vraiment anciens sites ou vraiment mal fait 892 00:43:13,620 --> 00:43:18,210 sites, qui ressemblent à littérale zones de texte sans aucune forme de texte 893 00:43:18,210 --> 00:43:21,190 ombre ou toute sorte de bel aperçu. 894 00:43:21,190 --> 00:43:24,540 Alors, que fait Bootstrap il a été dit, eh bien, Nous avons beaucoup de styles communes. 895 00:43:24,540 --> 00:43:28,210 Pourquoi ne faisons-nous pas un ensemble commun de CSS et un ensemble commun de JavaScript comme 896 00:43:28,210 --> 00:43:32,210 bien, qui peut dénommer tel quel et qui peut donner aux gens des choses comme baisse 897 00:43:32,210 --> 00:43:34,610 menus déroulants, ce qui peut donner aux gens des choses comme les modaux. 898 00:43:34,610 --> 00:43:38,580 >> Modal est ce qui apparaît sur la page chaque fois qu'il est à proprement parler 899 00:43:38,580 --> 00:43:41,090 quelque chose, qui inhibe en outre interaction jusqu'à ce que vous 900 00:43:41,090 --> 00:43:43,110 interagir avec lui. 901 00:43:43,110 --> 00:43:45,820 Quelque chose comme ceci est, êtes-vous sûr vous souhaitez supprimer cette chose? 902 00:43:45,820 --> 00:43:49,100 Vous ne pouvez pas vraiment faire autre chose jusqu'à ce que vous dites oui ou non. 903 00:43:49,100 --> 00:43:52,720 >> Il a fallu tout cela et il a emballé ensemble et dit, on y va. 904 00:43:52,720 --> 00:43:54,630 Les gens peuvent maintenant utiliser cette fonctionnalité. 905 00:43:54,630 --> 00:43:56,830 Et vous pouvez le trouver sur à getbootstrap.com. 906 00:43:56,830 --> 00:44:00,480 Il a été automatiquement inclus dans votre dernier problème réglé. 907 00:44:00,480 --> 00:44:04,160 Et vous êtes plus que bienvenus pour l'utiliser sur votre projet final. 908 00:44:04,160 --> 00:44:06,950 Et si vous voulez suivre cette lien pour obtenir Bootstrap. 909 00:44:06,950 --> 00:44:10,590 910 00:44:10,590 --> 00:44:15,700 >> Vous voyez ici est la Bootstrap site CSS. 911 00:44:15,700 --> 00:44:16,860 Vous verrez Bootstrap. 912 00:44:16,860 --> 00:44:20,450 Et si vous faites défiler vers le bas, vous verrez comment le télécharger, comment 913 00:44:20,450 --> 00:44:21,900 installer, et cetera. 914 00:44:21,900 --> 00:44:24,700 >> MIKE RIZZO: Et vous pouvez aussi, Fait intéressant, de le personnaliser à 915 00:44:24,700 --> 00:44:27,770 être ce genre de thèmes que vous voulez. 916 00:44:27,770 --> 00:44:31,270 Je sais que c'est quelque chose que j'ai fait pour mon projet final quand j'ai pris la classe 917 00:44:31,270 --> 00:44:32,050 a été le personnaliser. 918 00:44:32,050 --> 00:44:34,540 Une version différente de Bootstrap qui eu un modèle de couleur différente et 919 00:44:34,540 --> 00:44:36,700 différentes formes de certaines choses différentes. 920 00:44:36,700 --> 00:44:38,250 Je vous encourage donc à jouer avec ça. 921 00:44:38,250 --> 00:44:39,440 C'est une sorte de plaisir à le faire. 922 00:44:39,440 --> 00:44:43,230 >> TOMAS REIMERS: Regard sur le dessus de plus, il est très similaire à la police 923 00:44:43,230 --> 00:44:44,970 Génial le site. 924 00:44:44,970 --> 00:44:47,810 Un grand nombre de documents va commencer à sembler similaire lorsque vous avez 925 00:44:47,810 --> 00:44:48,940 il suffit de le voir. 926 00:44:48,940 --> 00:44:51,260 Nous avons donc ici la CSS composant de ce produit. 927 00:44:51,260 --> 00:44:53,540 Et vous verrez comment il peut coiffer les choses. 928 00:44:53,540 --> 00:44:56,780 Donc, si vous cliquez sur les tables, par exemple, vous pouvez instantanément faire un 929 00:44:56,780 --> 00:45:01,710 jolie table en ajoutant simplement la table de classe à elle. 930 00:45:01,710 --> 00:45:03,150 >> Mêmes choses pour les boutons. 931 00:45:03,150 --> 00:45:12,140 Si vous ajoutez simplement le BTN de classe et BTN par défaut ou BTN primaire, vous pouvez 932 00:45:12,140 --> 00:45:16,240 obtenir l'un de ces boutons avec ces modèles pré-fabriqués. 933 00:45:16,240 --> 00:45:18,570 Et puis, si vous êtes à la recherche de quelque chose de plus complexe que la simple 934 00:45:18,570 --> 00:45:24,100 restyling ce w ont déjà, sur le l'onglet JavaScript dans le haut nous 935 00:45:24,100 --> 00:45:25,120 avoir un tas de composants. 936 00:45:25,120 --> 00:45:30,410 >> Nous avons donc ici des transitions, des verbes modaux, listes déroulantes, les onglets et les info-bulles. 937 00:45:30,410 --> 00:45:35,530 Une info-bulle est ce qui apparaît sous votre lorsque vous passez la souris sur quelque chose. 938 00:45:35,530 --> 00:45:40,280 Popovers, alertes, boutons, pliable accordéons est ce 939 00:45:40,280 --> 00:45:41,190 ils sont généralement appelés. 940 00:45:41,190 --> 00:45:43,045 Carrousels, qui bascule à travers des images similaires. 941 00:45:43,045 --> 00:45:52,190 942 00:45:52,190 --> 00:45:54,840 >> Ce sont donc les composants de Bootstrap. 943 00:45:54,840 --> 00:45:57,620 Je voudrais vous encourager à très aller regarder. 944 00:45:57,620 --> 00:46:01,780 Il ya un composant JavaScript et un composant de CSS. 945 00:46:01,780 --> 00:46:03,880 N'hésitez pas à les utiliser comme vous voulez. 946 00:46:03,880 --> 00:46:06,730 Nous n'allons pas aller trop dans les parce que nous sentons la documentation 947 00:46:06,730 --> 00:46:09,360 est vraiment bien fait. 948 00:46:09,360 --> 00:46:10,540 Et ouais. 949 00:46:10,540 --> 00:46:14,500 Avez-vous des questions à ce sujet? 950 00:46:14,500 --> 00:46:19,430 >> MIKE RIZZO: Donc, comme sont vraiment rapide côté, la conception de cette page Web qui 951 00:46:19,430 --> 00:46:21,830 nous mettons ensemble rapidement pour cette présentation est 952 00:46:21,830 --> 00:46:24,290 effectivement fait en utilisant Bootstrap. 953 00:46:24,290 --> 00:46:27,810 Comme vous pouvez le voir, lorsque l'on clique sur ces différents onglets, nous sommes jamais réellement 954 00:46:27,810 --> 00:46:30,750 quitter cette page index.html actuel. 955 00:46:30,750 --> 00:46:36,400 Donc, ce que nous avons est différents divs dans ce index.html. 956 00:46:36,400 --> 00:46:39,610 Et puis, chaque fois que nous cliquons sur un autre onglet, c'est juste changer 957 00:46:39,610 --> 00:46:41,590 qui la projection de l'un. 958 00:46:41,590 --> 00:46:47,390 >> Alors il les positionne en conséquence, modifie le code HTML de la page afin que 959 00:46:47,390 --> 00:46:52,330 l'onglet en cours est marquée comme active pour il apparaît différemment et regards 960 00:46:52,330 --> 00:46:52,820 vraiment sympa. 961 00:46:52,820 --> 00:46:57,260 >> TOMAS REIMERS: Alors que tout a été fait sans nous écrit presque tous les CSS. 962 00:46:57,260 --> 00:47:01,440 Nous voyons aussi un en-tête sur le dessus, dont les couleurs sont en nous. 963 00:47:01,440 --> 00:47:04,800 Mais la réelle mise sur le haut de la page et de faire 964 00:47:04,800 --> 00:47:06,660 il défilement était Bootstrap. 965 00:47:06,660 --> 00:47:09,720 Et puis, même pour une autre bibliothèque - ce est pas un, nous avons parlé, mais un 966 00:47:09,720 --> 00:47:11,580 vous pouvez Google si vous voulez. 967 00:47:11,580 --> 00:47:15,130 C'est ce qu'on appelle prettify.js. 968 00:47:15,130 --> 00:47:20,650 Et ce sera la coloration syntaxique du code pour vous en utilisant CSS et JavaScript. 969 00:47:20,650 --> 00:47:23,480 970 00:47:23,480 --> 00:47:27,070 >> La dernière chose que nous voulons parler avant de vous libérer sortir dans la 971 00:47:27,070 --> 00:47:30,620 monde à regarder dans les bibliothèques de comprendre comment les utiliser et à, je l'espère, 972 00:47:30,620 --> 00:47:34,640 lire la documentation et de trouver ce que vous besoin est de savoir comment trouver les bibliothèques. 973 00:47:34,640 --> 00:47:37,000 Donc, la première, c'est que nous sommes juste va pousser Google. 974 00:47:37,000 --> 00:47:37,810 Allez Google. 975 00:47:37,810 --> 00:47:41,150 >> C'est littéralement ce que nous faisons lorsque nous besoin de faire quelque chose, c'est que nous Google. 976 00:47:41,150 --> 00:47:44,730 Y at-il une bibliothèque JavaScript qui me permet de manipuler le temps dans un 977 00:47:44,730 --> 00:47:45,400 moyen utile? 978 00:47:45,400 --> 00:47:49,510 Donc, si je sais que certains utilisateur qui crée un compte ici, et cela est le 979 00:47:49,510 --> 00:47:53,010 heure actuelle, comment puis-je calculer le différence avec ce sans avoir à 980 00:47:53,010 --> 00:47:55,020 calculer moi-même? 981 00:47:55,020 --> 00:47:59,630 Donc, c'est en fait une chose commune, Bibliothèque JavaScript de temps. 982 00:47:59,630 --> 00:48:02,440 Et ici nous Moment.js-- le plus populaire. 983 00:48:02,440 --> 00:48:06,530 >> Si nous avons besoin d'une bibliothèque pour manipuler quelque chose comme couleur pour pouvoir 984 00:48:06,530 --> 00:48:08,650 générer un tas de couleurs aléatoires - 985 00:48:08,650 --> 00:48:10,660 éventuellement, afin de générer un style ou quelque chose - 986 00:48:10,660 --> 00:48:13,480 nous pourrions Google quelque chose comme JavaScript bibliothèque de couleurs. 987 00:48:13,480 --> 00:48:15,620 Et je suis sûr que nous aurions pop up avec mille et l'un d'eux. 988 00:48:15,620 --> 00:48:18,290 989 00:48:18,290 --> 00:48:21,410 Vous êtes invités à les lire. 990 00:48:21,410 --> 00:48:24,610 >> Donc, la plupart des choses - quand vous les trouvez - vont être hébergé sur l'un des 991 00:48:24,610 --> 00:48:25,920 des sites qui code hôte. 992 00:48:25,920 --> 00:48:26,960 Ils sont quelques plus populaires. 993 00:48:26,960 --> 00:48:30,870 Le plus populaire, par loin, est github.com. 994 00:48:30,870 --> 00:48:35,300 Et si vous allez à GitHub c'est en fait Normaliser où a été organisé. 995 00:48:35,300 --> 00:48:36,950 Donc, si vous voulez revenir à cette question. 996 00:48:36,950 --> 00:48:38,135 Montrez-leur que. 997 00:48:38,135 --> 00:48:40,516 >> MIKE RIZZO: Et c'est effectivement là où ce est hébergé trop, si vous avez remarqué. 998 00:48:40,516 --> 00:48:41,000 >> TOMAS REIMERS: Ouais. 999 00:48:41,000 --> 00:48:49,078 Donc, si vous passez à Normaliser et aller à la GitHub. 1000 00:48:49,078 --> 00:48:51,936 Étaient ce que c'est? 1001 00:48:51,936 --> 00:48:54,620 >> MIKE RIZZO: Cette petite chose de chat est le symbole GitHub. 1002 00:48:54,620 --> 00:48:56,330 >> TOMAS REIMERS: Oh. 1003 00:48:56,330 --> 00:49:02,180 Donc GitHub utilise une méthode appelée Git pour stocker le code. 1004 00:49:02,180 --> 00:49:05,150 C'est que vous ne savez pas ce que c'est ou il vous fait peur, c'est bien. 1005 00:49:05,150 --> 00:49:16,100 Vous n'avez pas à savoir ce que Git est parce GitHub dispose d'un bouton de téléchargement 1006 00:49:16,100 --> 00:49:17,200 en bas à droite. 1007 00:49:17,200 --> 00:49:21,350 >> L'autre chose utile de savoir sur GitHub est la plupart des produits 1008 00:49:21,350 --> 00:49:23,200 aura un me lire. 1009 00:49:23,200 --> 00:49:25,400 Et si elles n'ont pas un site Web, la lu me vais parler de la façon dont vous 1010 00:49:25,400 --> 00:49:28,310 installer, comment vous l'utilisez, ce qu'il fait, et cetera, et cetera, et cetera. 1011 00:49:28,310 --> 00:49:31,033 Ce que nous avons essentiellement été à travers tout. 1012 00:49:31,033 --> 00:49:32,326 >> MIKE RIZZO: un abandon de la Internet. 1013 00:49:32,326 --> 00:49:34,020 >> TOMAS REIMERS: C'est très bien. 1014 00:49:34,020 --> 00:49:36,980 Les deux dernières choses que nous voulions parler - 1015 00:49:36,980 --> 00:49:38,750 nous avons parlé de Git - 1016 00:49:38,750 --> 00:49:40,290 est le dépannage. 1017 00:49:40,290 --> 00:49:43,020 Et celui-ci n'est pas nécessaire à le produit final tel qu'il est 1018 00:49:43,020 --> 00:49:44,870 lorsque vous quittez 50. 1019 00:49:44,870 --> 00:49:48,310 Et quand vous avez des produits la mise en œuvre des bibliothèques ou la mise en œuvre 1020 00:49:48,310 --> 00:49:50,230 votre propre projet, vous allez d'avoir des questions ou si vous êtes 1021 00:49:50,230 --> 00:49:51,660 aller chercher des questions. 1022 00:49:51,660 --> 00:49:53,060 >> Encore une fois, Google il. 1023 00:49:53,060 --> 00:49:54,630 C'est littéralement ce que nous faisons. 1024 00:49:54,630 --> 00:49:56,400 Cela va paraître stupide. 1025 00:49:56,400 --> 00:49:58,310 Mais littéralement, nous google. 1026 00:49:58,310 --> 00:50:01,810 Et encore une fois, l'une des premières choses vous aurez généralement exécuté en est 1027 00:50:01,810 --> 00:50:06,550 stackoverflow.com, qui est un merveilleux question et la réponse de vue. 1028 00:50:06,550 --> 00:50:10,530 >> C'est merveilleux à la fois parce que vous pouvez poster les questions et chercher des 1029 00:50:10,530 --> 00:50:12,760 réponses, mais aussi parce que il a déjà beaucoup de 1030 00:50:12,760 --> 00:50:14,590 contenu pré-rempli là. 1031 00:50:14,590 --> 00:50:18,510 Donc, en général quand vous Google une programmation question dans la première 1032 00:50:18,510 --> 00:50:22,620 quelques frappe que vous avez peut-être déjà courir en pendant vos ensembles de problèmes. 1033 00:50:22,620 --> 00:50:27,840 >> Et puis, la dernière chose très brève est JSFIDDLE, qui est - aujourd'hui, nous avons 1034 00:50:27,840 --> 00:50:32,110 été fait beaucoup de travail avec JavaScript HTML CSS. 1035 00:50:32,110 --> 00:50:39,820 JSFIDDLE est une application web, qui, fondamentalement, vous permet de prendre votre HTML, VOTRE 1036 00:50:39,820 --> 00:50:42,820 JavaScript bas à gauche, et votre CSS en haut à droite. 1037 00:50:42,820 --> 00:50:47,840 Et puis, il peut créer un rendu rapide de celui-ci et de voir comment il interagit. 1038 00:50:47,840 --> 00:50:50,500 Il est très utile lorsque les gens essaient de faire une preuve de concept comme 1039 00:50:50,500 --> 00:50:52,910 c'est ainsi que vous le feriez faire un menu déroulant. 1040 00:50:52,910 --> 00:50:54,980 Peut-être un uncover rapide ou autre. 1041 00:50:54,980 --> 00:50:56,560 >> MIKE RIZZO: Allons donc avant et cliquez sur ce. 1042 00:50:56,560 --> 00:50:57,820 Une note rapide - 1043 00:50:57,820 --> 00:51:00,430 alors que, avant, nous étions faire le clic. 1044 00:51:00,430 --> 00:51:04,380 Il s'avère JCorey Corée a également construit dans gestionnaire d'événements de clic qu'il 1045 00:51:04,380 --> 00:51:07,020 utilise juste parce que vous êtes les chiffres va vouloir faire beaucoup de choses 1046 00:51:07,020 --> 00:51:08,410 quand vous voulez cliquer sur quelque chose. 1047 00:51:08,410 --> 00:51:09,690 >> De même, il a également un vol stationnaire. 1048 00:51:09,690 --> 00:51:12,850 Mais pour obtenir la pleine portée de ceux qui, regardons le jQuery 1049 00:51:12,850 --> 00:51:15,320 documentation et de le faire. 1050 00:51:15,320 --> 00:51:18,760 J'ai fait quelque chose de stupide ici. 1051 00:51:18,760 --> 00:51:21,490 >> TOMAS REIMERS: Donc, j'ai un très rapide programme ici, qui dit 1052 00:51:21,490 --> 00:51:22,640 bouton sur clic. 1053 00:51:22,640 --> 00:51:23,890 Ensuite, nous avons une boucle for. 1054 00:51:23,890 --> 00:51:26,810 Pour i est inférieur à 404. 1055 00:51:26,810 --> 00:51:29,530 Il va juste pop up ces messages d'alerte. 1056 00:51:29,530 --> 00:51:33,425 >> MIKE RIZZO: Et quel était le Code 404 resta en HTML? 1057 00:51:33,425 --> 00:51:34,145 Quelqu'un se souvient? 1058 00:51:34,145 --> 00:51:35,450 Pas trouvé, à droite. 1059 00:51:35,450 --> 00:51:38,640 1060 00:51:38,640 --> 00:51:40,885 Chrome a également ajouté ce soigné chose où vous pouvez - 1061 00:51:40,885 --> 00:51:43,430 >> TOMAS REIMERS: Parce que les gens comme Mike a commencé à faire ce beaucoup et 1062 00:51:43,430 --> 00:51:47,230 utilisateurs ennuyeux, ce qui permet vous voyez d'informations. 1063 00:51:47,230 --> 00:51:48,286 >> MIKE RIZZO: Ouais. 1064 00:51:48,286 --> 00:51:50,690 >> TOMAS REIMERS: Avons-nous des questions à ce sujet, sur JavaScript 1065 00:51:50,690 --> 00:51:53,420 les bibliothèques, les bibliothèques, ou trouver regards que de développement web 1066 00:51:53,420 --> 00:51:55,400 comme dans le monde réel? 1067 00:51:55,400 --> 00:51:56,880 Nous courons contre le temps. 1068 00:51:56,880 --> 00:52:00,400 Donc, je ne suis pas sûr que nous allons avoir le temps de mettre en œuvre 1069 00:52:00,400 --> 00:52:02,290 sauf si c'est vraiment rapide. 1070 00:52:02,290 --> 00:52:04,580 Sommes-nous bien? 1071 00:52:04,580 --> 00:52:08,110 >> MIKE RIZZO: Tout ce que vous les gars aimeraient pour voir vraiment rapide dans, comme, deux 1072 00:52:08,110 --> 00:52:09,556 minutes ou moins? 1073 00:52:09,556 --> 00:52:10,870 >> TOMAS REIMERS: Tout nous pouvons préciser? 1074 00:52:10,870 --> 00:52:12,500 Comment écrire - 1075 00:52:12,500 --> 00:52:13,260 >> PUBLIC: [inaudible]? 1076 00:52:13,260 --> 00:52:16,070 >> MIKE RIZZO: Oui, that - 1077 00:52:16,070 --> 00:52:18,065 >> TOMAS REIMERS: Vous pouvez juste frapper Control-U sur le site. 1078 00:52:18,065 --> 00:52:19,275 >> MIKE RIZZO: Oh, je ne savais pas que. 1079 00:52:19,275 --> 00:52:22,290 >> TOMAS REIMERS: Je pense, oui. 1080 00:52:22,290 --> 00:52:23,300 Control-U. Ouais. 1081 00:52:23,300 --> 00:52:25,970 >> MIKE RIZZO: Oh, alors c'est l' code pour le site. 1082 00:52:25,970 --> 00:52:29,580 Mais si vous voulez vraiment télécharger notre fichiers et tout, il est hébergé 1083 00:52:29,580 --> 00:52:32,650 sur github.com 1084 00:52:32,650 --> 00:52:34,850 >> TOMAS REIMERS: réduire mon nom - 1085 00:52:34,850 --> 00:52:38,504 Tomas Reimers - barre oblique CS50 séminaire de trait d'union. 1086 00:52:38,504 --> 00:52:40,710 >> MIKE RIZZO: Et vous pouvez trouver tout ce qu'il. 1087 00:52:40,710 --> 00:52:42,310 >> TOMAS REIMERS: C'est ce que GitHub ressemble, par la manière. 1088 00:52:42,310 --> 00:52:44,910 Encore une fois, quand vous voyez un open source projet, généralement, ils seront une lecture 1089 00:52:44,910 --> 00:52:45,950 moi là-bas que vous pouvez lire. 1090 00:52:45,950 --> 00:52:50,200 Et si vous revenez, vous remarquerez que vous avez le téléchargement zip, qui sera 1091 00:52:50,200 --> 00:52:52,130 vous permettent de télécharger la source code pour inclure l' 1092 00:52:52,130 --> 00:52:53,666 produit dans votre propre chose. 1093 00:52:53,666 --> 00:52:56,890 >> MIKE RIZZO: Ouais, et si nous suffit de cliquer sur les index.html vraiment rapidement - 1094 00:52:56,890 --> 00:52:59,180 >> TOMAS REIMERS: Vous voyez ici est la code source de notre site Web. 1095 00:52:59,180 --> 00:53:02,016 1096 00:53:02,016 --> 00:53:06,070 >> MIKE RIZZO: Aussi, j'ai oublié de pousser droit avant avec la grande table, il 1097 00:53:06,070 --> 00:53:09,860 inclus, mais il ya aussi une table de chmods que nous avons inclus 1098 00:53:09,860 --> 00:53:13,210 juste pour votre clarté. 1099 00:53:13,210 --> 00:53:16,940 Mais si nous faisons défiler tout le chemin jusqu'à la bas, nous n'avons pas réellement faire très 1100 00:53:16,940 --> 00:53:21,160 beaucoup avec le JavaScript choses du tout avec cela. 1101 00:53:21,160 --> 00:53:26,610 C'est exclusivement à partir de tout d'autre que nous avions. 1102 00:53:26,610 --> 00:53:28,730 >> Alors, merci les gars pour venir et l'écoute. 1103 00:53:28,730 --> 00:53:29,830 Nous espérons que c'était vraiment utile. 1104 00:53:29,830 --> 00:53:33,020 Si vous avez des JavaScript connexes questions ou tout simplement pour parler 1105 00:53:33,020 --> 00:53:36,240 quoi d'autre comme ce que d'autres choses cool vous pouvez faire avec JavaScript, nous aimerions 1106 00:53:36,240 --> 00:53:37,186 de vous parler. 1107 00:53:37,186 --> 00:53:40,010 >> TOMAS REIMERS: Si vous avez une question de votre projet ou si cela peut être 1108 00:53:40,010 --> 00:53:42,740 pertinente, nous allons probablement rester dans les parages un peu après. 1109 00:53:42,740 --> 00:53:44,640 Mais à part ça, avoir un bon week-end. 1110 00:53:44,640 --> 00:53:45,845 >> MIKE RIZZO: Ouais, en profiter. 1111 00:53:45,845 --> 00:53:46,120 Rendez-vous les gars. 1112 00:53:46,120 --> 00:53:47,370 >> TOMAS REIMERS: See ya. 1113 00:53:47,370 --> 00:53:47,926