TOMAS REIMERS: Salut, tout le monde. Tomas Reimers de mon nom. 

MIKE RIZZO: Et je suis Mike Rizzo. 

TOMAS REIMERS: Nous sommes deux CS50s TS. Et aujourd'hui, nous sommes en tête du séminaire sur JavaScript et CSS pour les applications web. Si vous voulez suivre, la lien est juste là. Et voulez-vous mettre en place brièvement sur l'ordinateur? 

Il ya le lien. C'est un petit site, qui a des liens à toutes les ressources que nous allons être vous dirigeant aujourd'hui et aussi a beaucoup de informations utiles écrite par nous En savoir plus en profondeur quand vous retournez, et vous essayez de vous rappeler ce exactement avons-nous dit, ce que vous étiez parler, et cetera. 

MIKE RIZZO: Très bien. Commençons donc. 

TOMAS REIMERS: Donc, vous voulez commencer? OK. 

MIKE RIZZO: Ouais. Donc, nous voulions d'abord commencer par une large vue d'ensemble sur l'Internet et types de fichiers lors de la conception des sites Web. Bien que cette présentation, nous voulons entrer en JavaScript beaucoup beaucoup plus tard, nous avons voulu commencer avec juste, en quelque sorte, comme la vue de l'oeil d'un oiseau de ce qu'est un site Web et comment de réfléchir à la conception d'un site pour le début. 

Alors vous les gars, à ce point - avec elle être vendredi soir - devrait avoir soumis finances de votre CS50 problème fixe. Heureusement, c'était un bon goût de ce que la programmation web peut être. Mais ici, nous voulons, en quelque sorte, donner vous un autre goût, aussi. 

TOMAS REIMERS: Donc, juste pour récapituler ce que qui se passe, lorsque vous tapez votre URL à votre navigateur Web, cette URL se cherché dans l'ordinateur. Et votre ordinateur est connecté à un autre ordinateur, qui accueille ce site. OK, donc quand vous allez sur google.com, vous êtes reliée à l'une de Google ordinateurs, qui a la fichiers pour google.com. 

Il demande alors à un fichier spécifique. Donc, si vous allez à - Je ne sais pas - example.com / index.html ou / test.html, vous allez demander ce fichier spécifique. Et le serveur web de passer pour revenir à vous. 

Puis, une fois que vous passez par ce fichier - une fois que vous êtes ordinateur est que fichier - il va commencer pour construire une page web. Alors maintenant, il a le fichier HTML, qui est un peu comme la la structure de la page Web. Le fichier HTML pourrait également référence fichiers CSS qui définissent la style de la page Web. 

Fichiers JavaScript, qui définit interaction avec la page Web. Les fichiers d'image, qui sont de simples images. Et peut-être un lien vers d'autres fichiers HTML, que vous pourrez ensuite visiter. 

MIKE RIZZO: Bon, d'accord. Alors vous les gars ont tous, peut-être, soigneusement configurer votre hôte local sur votre machine virtuelle. Et qui vient, en quelque sorte, c'est la locale domaine que votre ordinateur héberge seulement pour vous, à votre propre adresse IP. 

Donc, dans ce cadre, vous pouvez ajouter à lui vos propres pages web. Je veux dire, dans CS50 finances, vous devriez avoir Ajout de quelques pages HTML, qui sont, en quelque sorte, enveloppé dans l'emballage de PHP. Mais finalement, ce que vos pages PHP délivrer en sortie ont été été HTML. 

Mais en repensant au tout début du PSET, nous avons dû mettre les autorisations pour tout, non? Donc cela permet juste fondamentalement nous savons qui peut lire, écrire, et peut-être exécuter chacun des fichiers. Donc, nous allons faire un rapide - hm? 

TOMAS REIMERS: Donc, nous allons faire une démonstration rapide. Donc, juste pour vous rappeler, quand vous se connecter à l'ordinateur de Google - quiconque - et demander un dossier, le premier ordinateur doit s'assurer que vous êtes autorisé pour réellement voir ce fichier ou de lire que déposer parce que vous ne pouvez pas demander pour n'importe quel fichier sur l'ordinateur, non? Ce serait un danger pour la sécurité. 

Ainsi, les fichiers sur les systèmes que nous utilisons, comme cet appareil de CS50, ont trois général, les gens qui peuvent avoir autorisations à quelque chose. Le premier est le véritable propriétaire dudit fichier. Le second est le groupe qui appartient le fichier. Nous n'allons pas à se concentrer trop à ce sujet. Et la dernière chose est, en quelque sorte, comme le monde ou comme tout le monde qui est pas spécifique à ce fichier et ne pas aucun droit de propriété sur elle. 

Donc, si nous avons propriétaire, le groupe, et puis dans le monde. Et puis, pour chacun de ces groupes, vous peut avoir l'un des trois autorisations, OK, ou plusieurs d'entre eux. Vous pouvez avoir des autorisations de lecture. Vous pouvez disposer des autorisations appropriées. Et vous pouvez avoir les droits d'exécution. 

Donc, en termes de types de fichiers réels, lisez permission est comme fait la lecture le contenu du fichier. Une autorisation droit écrit pour ledit fichier. Une autorisation d'exécution exécute le déposer comme vous le faites lorsque vous exécutez l'une des vos projets CS50. 

Alors, quand nous pensons à des fichiers comme quand nous avons besoin de lire un fichier HTML fichier, qui doit être mondiale lisible, non? Vraisemblablement, également propriétaire veut pour être en mesure de modifier ce fichier. Ainsi, le propriétaire va avoir besoin lire et écrire des autorisations. Ils n'ont pas vraiment besoin d'exécuter. 

Groupe, nous allons traiter le même que le monde de l'entreprise. Ils ont donc besoin des autorisations de lecture. Mais ils n'ont pas besoin d'écriture ou des autorisations d'exécution. Et maintenant, si nous pensons revenir à l'ancien Psets, ce que nous réalisons est ce genre de ressembler binaire, non? 1 signifie oui. 0 pour non. Et nous pouvons traduire ce binaire. 

Donc, 110 en binaire serait 6. 100 serait 4. Même avec monde. Ainsi, le nombre vous obtiendrez pour la autorisations pour ce seraient 644. 

MIKE RIZZO: Et si vous repensez à lorsque vous chmod quelque chose, je crois ils ont donné dans le problème posé l' exemple de l'endroit où vous pourriez faire quelque chose comme chmod 644 puis le nom du fichier. Le 644 puis, vous pouvez maintenant voir directement d'où ça vient. Donc, j'espère que fait que un peu plus clair. 

Et puis pour la clarté de vous gars - oh oui, ici c'est nouveau. Donc 600 serait alors juste être l'exemple nous avons donné ici où le propriétaire a autorisations de lecture et bonnes tandis que le groupe et dans le monde n'ont pas toutes les autorisations pour accéder au fichier. 

TOMAS REIMERS: Et puis nous avons une rapide liste des autorisations communes. Donc répertoires, vous voulez à fait chmod 711. Rapide de côté - pour un répertoire d'avoir permission exécutable signifie être en mesure pour ouvrir le répertoire. Images, CSS, JavaScript, HTML besoins 644 parce que, fondamentalement, le monde besoins autorisations de lecture. 

Et PHP, qui vous les gars ont vu bien que nous ne serons pas en parlons est généralement strictement chmodé avec l'autorisation 600, car il est exécuté avec les autorisations du propriétaire. Au moins sur l'appareil. 

MIKE RIZZO: Donc, si vous ne le faites pas spécifiquement spécifier le type de fichier vous voulez dans la mise en fait cette présentation - nous avons eu un problème avec cela parce que tout n'a pas été correctement chmod - vous allez obtenir, en quelque sorte, un erreur interdit que le site Web ne pas avoir fait l'autorisation pour accéder à tout ce dossier vous voulez accéder. Et bien sûr, qui peut être fixé - comme dans problème posé - en changeant permissions de manière appropriée. 

TOMAS REIMERS: Et le dernier commentaire de développement local est rapidement - nous soulevé cette question, mais nous voulions juste pour l'amener à nouveau - si vous demandez un serveur - hôte afin local, par exemple, com ou autre. - et vous ne spécifiez pas un fichier spécifique, le fichier que votre ordinateur va pour demander que l'on appelle index.html. Ou si cela n'existe pas, index.php. 

Cool. Donc, c'est juste un récapitulatif de tout, espérons-le, que nous avons couvert en section, et conférence, et à ce jour dans CS50. Et maintenant, nous allons commencer à parler bibliothèques de particulier. Bibliothèques JavaScript et CSS pour les applications web. 

Donc, l'une des raisons pourquoi nous avons rapide bibliothèques sont des émissions - il ya beaucoup de problèmes dans programmation, qui réapparaissent encore, et encore, et encore. Vous pouvez remarquer que beaucoup de sites Web besoin de la capacité d'avoir déroulante menus, par exemple, ou doivent avoir la capacité d'avoir un bouton très standard style, qui peut ne pas être la chose la plus facile. Maintenant que vous commencez à obtenir en HTML, vous réaliser que les boutons peuvent réellement regarder vraiment laid si vous ne pas faire n'importe quoi. 

Donc, beaucoup de gens ont écrit appelé bibliothèques. Et dans ce contexte, ils sont également appelé les cadres. Nous allons utiliser la deux interchangeable. Et ce qu'ils sont, c'est qu'ils sont fondamentalement morceaux préfabriqués de code - soit CSS ou JavaScript - que emporter une grande partie de la équipe que vous avez dans le codage. 

Donc, ils pré-définir un ensemble de classes ou pré-définir un tas de fonctions pour Le cas de JavaScript, qui vous pouvez appeler plus tard. Et puis, vous pouvez, en quelque sorte, se l'accès à ce code sans avoir à faire quoi que ce soit. Un exemple de la bibliothèque était CS50.H. C'est une bibliothèque nous vous avons donné dos dans la première semaine, qui vous a permis de faire des choses comme ça GetInt et GetString sans avoir à écrire un code vous-même. 

MIKE RIZZO: Très bien. Donc, ici, tout comme nous avons dû inclure dans notre c fichiers différents bibliothèques, il faut aussi inclure dans notre fichiers HTML différentes bibliothèques. Par exemple, si nous voulions inclure une bibliothèque JavaScript spécifique ici, peut-être, celui que nous avons écrit nous comme il est hébergé localement appelés script.js, nous venons utiliser cette notation. 

Nous avons donc égaux de type script JavaScript sources égaux JavaScript.js. Et si vous pensez à votre CS50 problème de finances définir, si vous avez regardé dans header.php dans le dossier des modèles, vous devriez avoir vu certains d'entre eux inclus. Donc, cette première - les scripts - est notamment une bibliothèque JavaScript. Y compris une bibliothèque de CSS est un peu différent. 

Ici, au lieu de le script tag Vous devez la balise link. Et puis, le type de texte CSS est un peu différent. Vous n'avez pas toujours à comprendre feuille de style rel. Mais je pense que c'est, en général, bonnes pratiques. 

Et puis finalement, le HREF, qui vous probablement vu dans vos ATAGs pour relier dans les différents maillons de seulement spécifie le lien où trouver cela. Par exemple, si nous voulions lier un autre bibliothèque - disons - qui vivaient à styles.css. Et nous voulions lier que c'est hébergée sur le Web, nous copier cela. Et puis collez-le dans tout ce que nous avons droit ici à la place. 

TOMAS REIMERS: OK, nous espérons que vous les gars sont déjà familiers avec la façon de relier CSS. Vous avez eu à faire sur votre dernier ensemble brun. JavaScript, certains d'entre vous peut-être avoir une certaine expérience avec. Certains d'entre vous ne peut pas. 

Donc pour l'instant, de savoir qu'un fichier JavaScript est très semblable à un fichier CSS dans le sens que vous pouvez lier à elle ou que vous pouvez inclure à l'intérieur. Et il vous permet de choses de script. Et nous allons vous guider à travers une peu de JavaScript plus tard. 

Donc, en utilisant une bibliothèque - une fois que vous avez inclus, il est aussi simple que d'appeler littéralement le fonctions ou en ajoutant le noms de classe à elle. La dernière chose que nous voulons parler sur le plan de la bibliothèque - et c'est plus d'une note technique - est l'octroi de licences open source. Ainsi, lorsque vous trouverez ces bibliothèques réelles, vous pensez peut-être de Des questions comme il est OK que je suis en utilisant le code de quelqu'un d'autre, surtout parce que c'est quelque chose que nous beaucoup vous ai dit de ne pas le faire dans ce cours. 

Ainsi, dans le cas de l'octroi de licences open source, beaucoup de développeurs - une fois qu'ils ont écrit une bibliothèque, qui selon eux, pourrait être utile à d'autres personnes - publiera sur le web et de lui donner une licence. Et une licence essentiellement dit que je suis présente la permission accordée à d'autres les gens à utiliser ce logiciel avec le genre suivante stipulations. 

Nous avons inclus un lien vers un bon site pour vous aider à comprendre les licences cas où vous rencontrez eux. Dispositions communes sont des choses comme vous êtes invités à utiliser ma bibliothèque pour tant que vous me citez. Vous êtes invités à utiliser ma bibliothèque à condition que quand il se casse vous ne me blâmez pas. Vous êtes invités à utiliser ma bibliothèque si longtemps comme vous ne l'utilisez pas pour faire de l'argent pour vous-même. Ce sont des sortes de commune stipulations. 

Pour ce dernier projet CS50, ils ne doit pas être super pertinent car les projets que vous les gars utilisent sont probablement plutôt, en quelque sorte, connu. Mais quand vous avez réellement sortez dans la monde et commencer à utiliser les bibliothèques, qui peut ou ne peut pas être ainsi mises en œuvre quelques-uns des plus populaires que nous sommes va passer par. Il est bon d'être en mesure de comprendre ces licences et à comprendre ce qu'ils signifient. Et revenir en arrière. 

MIKE RIZZO: OK. Donc maintenant déplacer sur des exemples de CSS réelle. À ce stade, à ce jour, vous pourriez ne pas avoir rencontré ce. Mais vous pourriez avoir rencontré dans votre vie quotidienne où quelque chose qui ressemble d'une façon sur un navigateur peut-être pas le même aspect manière dans un autre navigateur. 

Ceci est appelé navigateur navigateur compatibilité. Et en plus, il devient de plus en plus d'un problème, d'autant plus que navigateurs prennent de plus en plus de libertés de mettre en œuvre les choses comme elles veulent. Donc, pour surmonter cela, il est en fait une grande bibliothèque appelée Normalize.CSS. 

TOMAS REIMERS: Nous avons inclus le lien. À ce stade, il est utile si vous avez votre ordinateur portable là la recherche au niveau du site. Et nous donnons ce droit de vous maintenant tout simplement parce que la finale CS50 projet va réellement vous demander de mettre en œuvre de même et par les navigateurs. 

Il suffit donc de garder à l'arrière de votre tête, c'est une magnifique bibliothèque car il ne sera, en quelque sorte, normaliser les choses. Dans Firefox, quelque chose peut montrer comme un pixel vers la gauche. Et puis Chrome peut décider que fait ce que vous vouliez dire 10 pixels vers la gauche. Et vous voulez normaliser ce. Normaliser fait faire un très bon travail de faire en sorte que votre site semble le même à travers les navigateurs. 

MIKE RIZZO: Donc, si nous voulions juste cliquez sur le lien très rapidement et spectacle vous à quoi cela ressemble, vous pouvez le télécharger à l'aide du géant bouton Télécharger. Ou je vous encourage à lire plus à ce sujet en cliquant sur ce lien en bas coin droit. 

TOMAS REIMERS: Et si vous avez réellement cliquez sur Lire la suite là - cliquez sur la source sur GitHub - vous voyez réellement open source licence sur LICENSE.md là. Et vous voyez ici est la licence MIT très populaire. Encore une fois, si vous lisez le texte, vous serez capable de le trouver sur le site nous avons référencé avant et être en mesure de comprendre sans avoir à lire à travers le jargon juridique. 

MIKE RIZZO: Bon, d'accord. C'est donc Normaliser. Nous voulions vous donner que très rapidement. Oh, avez-vous une question? 

PUBLIC: Alors, quand vous téléchargez, vous il suffit de suivre ce code qu'ils ont sous le bouton de téléchargement? 

TOMAS REIMERS: Oui, lorsque vous téléchargez - 

MIKE RIZZO: Oh, c'est un bon point. Donc la question est de savoir comment faire nous fait le télécharger? Donc, si on clique sur le lien, nous voyons qu'il apparaît effectivement en place à l'aide du code source. Donc, pour ce faire, ce que nous pouvions ne est juste cliquez sur Enregistrer sous. Enregistrer sous et qui devrait mettre en place un fichier. Et puis, nous pouvons choisir d'enregistrer comme normalize.CSS. Et puis vous auriez à le relier à - 

TOMAS REIMERS: De la même façon que vous lier dans n'importe quel autre fichier. Et une fois que vous vous connectez dans, ce qui est génial sur Normaliser est il réellement prendre soin de tout le disque travailler par lui-même. Ce qui signifie que vous n'avez pas ajouter toutes les classes. 

Vous n'avez pas à faire quelque chose de bizarre. Il permettra de normaliser sans vous faire autre chose. Oui, vous devez l'inclure. Google Chrome ne répond pas. 

Juste une petite parenthèse - J'ai remarqué nous avons sauté dans ce. Le reste de cette présentation est va être un aperçu rapide. Un sondage auprès des bibliothèques. 

Fondamentalement, ce qu'ils sont. Ce qu'ils font. Comment ils sont utiles. Comment vous pourriez les mettre en œuvre. Si vous voulez commencer à les regarder, suivant le long, et la lecture à travers eux, je serais très encourager. 

Sinon, vous êtes les bienvenus aussi pour commencer à les télécharger et y compris dans un spectacle juste pour voir ce qu'ils ressembler ou ce qu'ils font, si vous avez votre ordinateur portable en face de vous. Si non, vous êtes les bienvenus pour garder à nous écouter parler. Nous allons continuer à parler. Et nous avons le temps à la fin, je l'espère nous fait entrer dans vous montrant ce que certains de ces bibliothèques ressembler. 

MIKE RIZZO: Cool. Très bien, alors maintenant nous allons parler sur la police impressionnant. 

TOMAS REIMERS: si la police impressionnant est un le site vraiment bien, surtout pour ceux d'entre nous qui sont moins artistiquement talentueux. Ignorant le nom de la police impressionnant, il donne vous un tas d'icônes, qui sont très utile. Ainsi, un grand nombre de fois vous allez mettre en œuvre un l'icône que vous pouvez comme une belle x donc que vous pouvez fermer quelque chose. 

Ou vous pouvez vouloir une sorte de bouton Modifier avec un dessin au crayon comme tout le monde a. Et c'est là que vous apprenez que dessin de ces icônes peut être très fastidieux et difficile. Font impressionnant - si vous avez réellement aller sur le site - vous donne beaucoup d'icônes sous les icônes en haut. Oui, juste en haut. Il vous donnera beaucoup d'icônes pour libre. 

Alors là, vous voyez que nous avons des choses comme un astérisque, des bars, un éclair, un calendrier, un bug, un livre, etc. Cela peut être très utile. La façon dont vous incluez c'est vous incluez littéralement le fichier CSS. Et après vous avez inclus le fichier CSS, ce que vous pouvez faire est de créer un tag appelé I. Il satands pour icône avec la classe FA debout pour la police impressionnant. Et puis, quelle que soit la classe que vous voulez. 

Donc, si je voulais une icône de cela en plus carré ici, je donnerais il la classe FA. Et puis tiret FA plus carré de trait d'union. 

MIKE RIZZO: Cool, OK. 

TOMAS REIMERS: Et puis, la dernière CSS bibliothèque, nous voulons passer à travers nous sommes en essayant de garder un minimum sur CSS bibliothèques parce que nous ne réalisons l' titre de cette présentation que JavaScript bibliothèques. Mais nous avons pensé que nous pourrions ainsi vous présenter aux autres bibliothèques alors que nous parlions de bibliothèques. 

C'est Google Web Fonts. Et ce que Google Web Fonts vous permet à faire est d'ajouter des polices à votre site Web, qui est vraiment un moyen facile de le faire jolie et de distinguer votre jeu de tout le monde de si elle a la une belle police ou si elle a une belle collection de polices. Google Web Fonts est agréable contrairement à d'autres bibliothèques dans le sens que c'est un l'installation vraiment guidé. 

Donc, si vous suivez le lien, il est google.com / fonts, je crois. Si vous suivez cela, vous peuvent choisir votre police. Vous pouvez choisir sur la gauche de épaisseur, inclinaison, etc. Et puis, une fois que vous avez choisi un, vous pouvez cliquer sur une utilisation rapide. Juste là. En bas à droite de la boîte. 

Et puis, faites défiler vers le bas. Tout d'abord, ils vous donnent la CSS vous devez effectivement un lien vers elle. Il est juste là. Vous pouvez simplement copier et coller ce po Et la bonne chose à propos celui-ci est vous n'avez pas réellement besoin même de télécharger le fichier. 

Qu'est-ce que ça va faire, c'est que ça va faire un lien vers la version de Google de lui. Donc, retour à ce que cela signifie. Cela signifie que quand un utilisateur télécharge le fichier - télécharge la page HTML - votre code HTML Cette page va référence à ce fichier. 

Alors, votre ordinateur va le voir, oh, il est hébergé sur google.com plutôt que sur theirsite.com. Permettez-moi de demander à Google de ce fichier. Et puis, il va inclure presque comme si c'était un partie de votre propre site. 

TOMAS REIMERS: Cool. Et une fois que vous incluez, puis à inclure dans votre CSS, il vous donne la ligne réelle. Ainsi, vous définissez la famille de polices de la propriété égal au nom de votre police. 

MIKE RIZZO: OK. Donc, nous venons de terminer avec CSS. Et certains d'entre vous pourraient penser, eh bien, nous avons eu un peu de CSS sur CS50 Finances. Mais bibliothèque de CSS était bootstrap. Nous incluons fait Bootstrap un peu plus tard sous le JavaScript car avec la bibliothèque Bootstrap CSS est également avec beaucoup de JavaScript qui Bootstrap ou Twitter - qui a fait Bootstrap - utilise pour gérer l'ensemble de leur CSS. 

TOMAS REIMERS: Quelqu'un at-il des questions jusqu'ici sur CSS en général? Nous sommes bons? Impressionnant. 

MIKE RIZZO: impressionnant. 

TOMAS REIMERS: Alors déplacement à JavaScript. 

MIKE RIZZO: Donc, nous avons voulu parler sur jQuery pour commencer. Quelqu'un at-il entendu parler de jQuery avant ou utilisé? Ouais, un couple? Donc, si vous travaillez seulement avec native JavaScript, vous vous trouverez taper beaucoup de longues sélecteurs beaucoup. Alors, que jQuery fait est qu'il fournit une belle enveloppe pour le JavaScript langue qui vous permet de sélectionner facilement et manipuler différents éléments dans le modèle d'objet de document de l' page Web ou le DOM, qui, je pense vous les gars ont entendu parler de dans donner des conférences à ce point. 

TOMAS REIMERS: Si vous n'avez pas entendu parler de ou conférence si vous n'avez pas regardé encore, le modèle objet de document est fondamentalement la façon dont les choses sont représentés. Donc HTML sorte de ressemble à un arbre quand vous avez réellement dessiner dehors. Vous avez l'élément HTML sur le dessus. Vous avez la tête et le corps. 

Et puis, au sein de ce que vous avoir tout le reste. Cela dénommé DOM - Modèle objet de document. Ainsi, un modèle qui représente les objets en le document est un moyen facile de penser à ce sujet. Et l'un des grand chose sur jQuery est-il fait vraiment déplacement et que les éléments de manipulation à l'intérieur que incroyablement simple. 

Si simple, en effet, que la majorité des Bibliothèques JavaScript ou sinon le majorité, la grande majorité de ceux vous verrez réellement besoin jQuery afin qu'ils puissent se lancer tout simplement parce que si vous n'avez pas jQuery, vous serait perdre beaucoup de temps à essayer de comprendre comment sélectionner certains éléments et la façon de faire d'autres choses. Et l'autre grand chose sur jQuery c'est qu'il est inter-navigateur compatible. 

Alors n'oubliez pas de revenir quand nous avons dit que pas tous les navigateurs à mettre en œuvre les choses de la même façon? Cela est vrai même en JavaScript. Et l'une des grandes choses au sujet de jQuery est qu'elle permet de détecter l' navigateur et détecter la méthode appropriée. 

Donc, si vous avez besoin de sélectionner un élément, Internet Explorer peut dire que vous êtes censé faire de cette façon. Firefox pourrait dire la bonne moyen est de cette façon. jQuery ne se soucie pas. Quand vous dites jQuery pour sélectionner un élément il comprendre comment il est censé faire dans le navigateur l' l'utilisateur est actuellement en, puis faire de cette façon. 

MIKE RIZZO: Donc il ne faut pas parler de l'utilisation de jQuery un peu. Tout comme PHP, jQuery a un particulier penchant pour le signe du dollar. Ainsi, vous verrez que tout jQuery - Eh bien, pas du tout. Vous pouvez parfois remplacer le dollar signer avec le mot jQuery. Mais en général, juste parce que c'est plus courte, chaque fois que vous voyez jQuery étant utilisé ce sera avec un signe de dollar. 

Donc, ici, nous sommes en train de montrer un début sélecteur pour un élément dans le DOM. Ici, nous avons le signe dollar suivi par des parenthèses ouvertes et puis citations. Et dans les citations aller nos sélecteurs pour les différents éléments. Tout comme en CSS, il nous fallait des sélecteurs pour être capable de style différents éléments dans la page. Ces différents sélecteurs traduire exactement dans jQuery et JavaScript pour la plupart. 

Nous avons donc ici un foo point. Donc, si vous vous souvenez de conférence, le point signifie simplement la classe. Donc, nous sommes élément sélection avec la classe foo. Donc, si je vais de l'avant et ouvrir notre JavaScript console ici très rapidement juste le démontrer, si je tape juste le signe du dollar, nous voyons que c'est un peu fonction qui est en place. Et il est juste définie par jQuery. 

TOMAS REIMERS: Pour ceux d'entre vous connaissent pas, la console est un outil dans Chrome, qui vous permet de, fondamentalement, exécuter JavaScript sur l' page en cours. Cela vous trouverez incroyablement utile lorsque vous êtes en train de débogage et vous besoin d'être comme, ce qui est le courant valeur d'une variable globale ou ce est quelque chose d'autre? C'est un peu comme GDB à l'exception que vous pouvez réellement manipuler les éléments de la page et dans un mode beaucoup plus facile. Et aussi il n'a pas, fondamentalement, consultez avec vous avant qu'il ne fait rien. 

Ainsi, alors que, GDB pourrait être, êtes-vous sûr que vous voulez exécuter la prochaine étape? La console est en temps réel. Alors que la page Web est rendu et faire tout ce qu'il fait, le conseil est également la longeant. Et vous pouvez mettre le code de impute en qui console, qui sera être exécuté sur la page. 

MIKE RIZZO: Donc, pour accéder à la console, Je suppose que je devrais brièvement parler de la façon de le faire. Dans les derniers problèmes que vous pourriez avoir utilisé Chrome inspecter élément fonctions ou vue source de la page - et ceux qui sont accessibles seulement par le droit en cliquant sur la page ou un particulier élément et le faire inspecter soit élément ou vue source de la page. Nous pouvons également accéder au JavaScript console directement par choisir inspecter élément. Console Alors vous appuyez simplement sur sur le côté droit. 

Sinon, vous auriez pu également augmenté le coin supérieur droit, qui est coupée sur cet écran où il a les trois barres horizontales. Et vous descendez à des outils et alors la console JavaScript ici où peut voir - au moins sur Windows - le raccourci est commande Shift J. Alors si nous voulions sélectionner un élément dans cette page, tout comme je l'ai montré avant, nous faisons signe dollar parens ouvertes et cite alors. 

Une chose intéressante est, en général, apostrophes et guillemets sont échangeable. Alors que beaucoup de gens il suffit d'utiliser unique citations, car ils sont plus rapides à saisir que par des guillemets parce que vous n'avez pas avoir la touche Maj enfoncée. Je vais donc le faire dès maintenant. 

Je tiens donc à choisir quelque chose avec la classe. Container, juste parce que je sais que c'est quelque chose qui est sur notre page web en ce moment. Et j'ai frappé Entrée. Et nous pouvons voir qu'il choisi il. Ainsi, il apparaît que c'est retourné cet objet. Donc, c'est une sélection de base. Si nous voulions réellement manipuler, vous auriez à appeler quelque chose sur cette sélection, qui nous allons revenir plus tard. 

TOMAS REIMERS: Il suffit donc de se pencher sur cette plus en profondeur, ce n'est pas différent que les appels de fonction que nous avons faites dans C. Le nom de la fonction ici est une peu bizarre. C'est le signe dollar. C'est juste un nom d'une fonction. Il n'y a rien de spécial. 

Nous avons parenthèses ouvertes. Ensuite, nous avons notre seul argument, qui dans ce cas, se trouve être une chaîne, qui est un sélecteur pour cela. Et puis, nous avons notre parenthèse fermée. C'est tout. 

Ce n'est pas que très différent. Bien, il ne semble très bizarre. Et cela peut être, en quelque sorte, un collage signaler pour beaucoup de gens. 

MIKE RIZZO: Pareillement, si nous voulions pour sélectionner un élément qui a une identité, maintenant, nous voulons sélectionner par ID à la place de la classe. Ce serait une chose semblable où nous il suffit de faire le signe dièse pour ID. Nous sommes donc ici toute la sélection éléments qui ont de la barre de ID. 

TOMAS REIMERS: Et cela s'étend. Qui s'étend CSS. Tout comme en CSS, vous pouvez sélectionner tous liens, qui ont la classe foo. Ici, c'est la même chose. 

Vous pourriez faire a.foo, qui sélectionnez tous les liens avec la classe foo. Vous pourriez faire un bar forte, qui serait cliquez sur le lien avec la barre d'identification et ainsi de et cetera. Un sélecteur CSS est valide sélecteur jQuery. 

MIKE RIZZO: Ouais. OK, maintenant nous allons entrer dans un peu de manipulation que nous pouvons faire avec notre jQuery. Donc, jQuery a un type particulier de notation où nous utilisons seulement un point à la fin. Et vous pouvez penser à cela comme dans C la façon dont nous avions différentes structures. Et pour aller dans ces structures, vous le feriez utiliser un point d'entrer dans eux. 

C'est, en quelque sorte, une chose semblable. Ce n'est que maintenant que nous avons des fonctions au sein de cette Sélecteur que nous pouvons appeler sur elle. Donc ici, le premier exemple vous pouvez voir est un sélecteur CSS. Et dans le fond, ce que cela fait est-il applique le premier élément de ce CSS chose que vous avez sélectionné - cet élément que vous avez sélectionné - avec la valeur. 

TOMAS REIMERS: Donc une traduction facile de ce serait si jQuery, essentiellement, juste pris foo. Et puis en CSS dit, la couleur rouge et proche. C'est la même idée. Ce qu'il a fait est qu'il est sélectionné tous les éléments de foo. Et puis il est appliqué. En quelque sorte, la couleur de la propriété est égal à rouge. 

MIKE RIZZO: De même, nous pouvons également modifier le contenu réel de ce qui est montrant sur le code HTML de la page, qui est vraiment cool parce que cela signifie que votre les pages Web peuvent maintenant être complètement dynamique et ne doivent pas être statique que vous imprimez à l'aide de PHP dès le début de la page en cours de chargement. Donc ici, si nous voulions modifier la HTML réelle de la page, nous serions maintenant appeler la fonction HTML, qui alors seulement inserts tout ce que nous précisons dans cet élément que nous avons choisi. Donc, ici, nous sommes élément sélectionnant avec foo de classe et de dire que c'est HTML il est maintenant Bonjour tout le monde. 

TOMAS REIMERS: Et quand vous pensez à ce sont des applications utiles de ce, cette CSS une, la première chose qui vous pouvez commencer à penser est en termes de même des menus déroulants. Vous pouvez commencer à faire des choses comme, quand un utilisateur survole la partie supérieure d'une baisse de baisse, vous voulez faire la partie inférieure visible. Droite? 

Donc, en CSS, nous avons des propriétés de faire quelque chose de visible. Des choses comme l'affichage du côlon aucun rendrait invisible. Bloc de visualisation, il serait visible. Ou même si vous voulez aller simple, vous avoir des choses comme égaux de visibilité visible, et la visibilité est égale caché. 

Et vous pouvez commencer à mettre en œuvre les choses comme tomber en bas à droite des menus après que vous obtenez à travers l'idée de la façon dont pouvez-vous comprendre quand cela ouvre, que nous allons passer à travers très brièvement. Mais nous pouvons commencer à voir applications de cette. Dans le même sens, si vous deviez essayer et mettre en œuvre, disons, une discussion moteur et vous voulez faire un peu d' bulle vient chaque fois que vous avez obtenu un nouveau message, une fois que vous obtenez le nouveau message, vous pouvez faire un peu d' bulle venir en modifiant le code HTML de la page, à droite? En ajoutant que bulle supplémentaire avec le texte supplémentaire là. Ouais? 

PUBLIC: Donc, vous intégrer au sein de le code HTML dans un peu comme un [Inaudible]? 

MIKE RIZZO: Droit. Oui, nous y reviendrons dans un peu. Ouais, c'est un proche peu de PHP. Pas exactement similaire. 

Une bonne distinction à faire est ce que ce est en fait l'édition quand nous éditons la page, car il ne va pas être éditant le fichier réel qui est en cours conservés sur le serveur parce que le monde ne devraient pas avoir l'autorisation pour éditer vos fichiers. Ceci est juste en train de modifier ce qui est sur la page et ce qui est affiché dans le navigateur. Donc, si vous étiez de recharger la page après, dire, la suppression de quelque chose que nous voyons que nous pouvons faire avec l'appel de supprimer, cette chose serait alors réapparaître. 

TOMAS REIMERS: Donc, une façon de penser c'est si je suis votre ordinateur et Mike est, en quelque sorte, le serveur. Qu'est-ce qui va se passer, c'est que je vais demander à Mike, hé, je peux avoir une copie de cette page web? Et il va me donner une copie de celui-ci. 

Non, ce n'est pas la chose originale. C'est juste une copie. Et puis ce serait comme, oh, il ya ici JavaScript. De toute évidence, je dois modifier le page à être comme ça. Et je éditer votre copie. 

Mais ce n'est pas à effectuer la copie réelle. Et si je devais lui demander à nouveau actualiser la page, - hey, je peux avoir une autre copie propre - il va me donner une autre copie propre. Et puis, je vais faire la même chose comme, oh, ce JS ici qui dit à éditer. Et je vais continuer à le faire. 

MIKE RIZZO: Alors une chose vraiment cool que vous pouvez faire avec jQuery est effectivement ajouter différents types des animations à votre page. Je ne sais pas si vous avez jamais vu où vous essayez de remplissage d'un formulaire en ligne et vous ne remplissez pas les choses correctement. Alors une petite chose glisse vers le bas en haut et vous dit l'ont pas fait correctement. S'il vous plaît essayez de nouveau. Et puis, il pourrait même simplement glisser vers le haut. 

Il s'avère que jQuery a construit dans les fonctions qui rendent tout cela animation vraiment, vraiment facile. Donc, il est d'abord fondu hors fonction, qui vous pouvez faire appel à quelque chose. Et c'est un moyen de changer le CSS de cet élément de façon animée. Donc, il faut quelque élément vous l'appelez fade out sur. Et puis, change lentement de l'opacité jusqu'à ce qu'il s'éteigne complètement transparent. 

TOMAS REIMERS: L'autre populaire est glisser vers le bas, ce qui rendra apparaître quelque chose en le faisant glisser vers le bas. Ainsi, dans le cas du menu déroulant, encore une fois, quand nous avons appris à détecter quand cela a été survolé, vous pourriez dire ce fond partie glisser vers le bas maintenant. Et puis, il semblerait en faisant glisser vers le bas. 

MIKE RIZZO: Et puis, si vous avez juste un certain type d'animation à l'esprit que jQuery ne fournit pas nécessairement. Par exemple, disons que jQuery ne vous fournissez avec un toboggan vers le bas et glisser vers le haut. Eh bien, disons que vous vouliez glisser quelque chose en partant de la gauche ou de le droit un peu comme le CS50 page fait chaque fois vous allez à un nouveau panneau. Vous auriez alors probablement mettre en œuvre vous-même en utilisant la animer fonction au sein de jQuery. 

Pareillement, il vous suffit d'animer. Et puis, en son sein, il prend un dictionnaire des différentes valeurs que vous êtes censé passer. Donc ici, si nous voulions animer le foo élément de telle sorte que sa largeur soit dilate ou se contracte à 80 pixels, en fonction de ce qu'il est actuellement. Nous voudrions simplement passer que l'argument en son sein. 

Animer également avoir d'autres arguments que vous pourriez passer, par exemple, la vitesse de l'animation que vous voulez lui donner. Et pour ce faire, je voudrais juste dire rapidement Google jQuery animer. Et puis, élever cette page, vous pouvez voir il a un tas de différents propriétés que vous pouvez passer. 

Et je vous encourage - chaque fois que vous venez sur quelque chose que vous n'avez pas connaître ou tout simplement pour en savoir plus sur un méthode particulière que vous pouvez appeler sur quelque chose - Il suffit de Google. jQuery est extrêmement bien documenté. Et souvent, il ya beaucoup de exemples qu'ils fournissent pour vous. Si nous faisons défiler vers le bas - chemin vers le bas - que nous pouvons utiliser, aussi bien. 

Encore une fois, quand un développeur va en fait par la difficulté de l'écriture d'un bibliothèque, ils veulent généralement quelqu'un de l'utiliser. Donc, aux côtés de qui se passe à une documentation. Et que la documentation peut généralement être trouvé sur la page du projet, qui est pourquoi nous vous avons donné ce site original le début, qui vous relie à la pages du projet afin que vous puissiez voir que la documentation. 

Typiquement, la page du projet dans le cas de [inaudible], il vous le dit noms des classes. Dans le cas de JavaScript, il donne vous le nom des fonctions. Par ailleurs, si nous faisons défiler vers le sommet, une note de côté rapide sur les fonctions est chaque fois que vous voyez une fonction mise en oeuvre comme ça avec le disque crochets dans le milieu, ce qui signifie que cette propriété est facultative. Juste un heads-up. J'ai vu beaucoup de questions à ce sujet. 

Donc, ici, nous pouvons voir que le animé prend propriétés comme un argument nécessaire. Et tout le reste est optionnel. Side note - vous pouvez penser ce, sorte de, comme les pages de manuel. Les pages de manuel sont documentation pour C et pour beaucoup d'autres choses, aussi bien. 

MIKE RIZZO: Donc, nous avons appris à changer différente CSS sur la page, animer, et enlever ajouter HTML. Mais l'un des vraiment plus puissant de choses sur JavaScript et surtout jQuery - ce qu'il vous permet de faire est de répondre à différents éléments qui se produisent. Par exemple, nous avons ici un gestionnaire d'événements. Et cela signifie simplement chaque fois que cela événement se produit, nous les traitons dans un certaine manière. 

Donc, ici, l'événement jQuery générique gestionnaire est le point sur. Et puis, la première chose que vous avez fourni est ce cas, il devrait être à l'écoute pour. Donc, ici, c'est le déclic qui nous attendons. 

TOMAS REIMERS: Sinon, vous avez sur le vol stationnaire, qui est un très populaire. Donc, retour à mon menu déroulant idée. Vous auriez du haut sur le vol stationnaire. Et puis vous pouvez changer cela. 

MIKE RIZZO: Droit. Et puis, quand cela arrive, il suffit exécute cette fonction que nous lui donnons comme argument et que il alerte bonjour ou salut. 

TOMAS REIMERS: Donc, dans le cas de JavaScript, c'est un endroit où nous devons nous retirer de C. Nous pouvons effectivement prendre des fonctions comme arguments. Et il ya beaucoup de très des moyens complexes pour ce faire. Nous allons promouvoir une façon, qui est que vous pouvez définir la fonctionner là. 

Ainsi, lorsque vous demandez une fonction un paramètre, vous êtes fondamentalement juste va définir la fonction sur place. Et la façon dont vous définissez une fonction en JavaScript, c'est vous dire littéralement fonction. Ensuite, le plus souvent, le nom de la fonction. Mais nous n'allons jamais à la référence de nouveau cette fonction. Donc, nous laissons sans nom. 

Ensuite, les parenthèses, le bouclés croisillons, et ensuite le code à l'intérieur de cela. Nous comprenons donc cette boîte être un peu déroutant. Nous vous donnons donc la forme générale de ce qu'est un gestionnaire d'événements ressemble ci-dessous, qui est sur les événements. Et puis, votre code à l'intérieur que. 

MIKE RIZZO: Y at-il questions à ce sujet? Cela peut être un peu déroutant la première fois que vous le voyez. 

TOMAS REIMERS: Vous voulez réellement ouvrir un fichier et de leur montrer une certaine jQuery en ce moment? 

MIKE RIZZO: Oui, faisons-le. OK. 

TOMAS REIMERS: Alors maintenant, nous sommes dans l'appareil. Et ce que nous avons fait, c'est que nous avons pris la liberté de créer à la fois un index.HTML fichier, qui relie à un fichier JavaScript. Et pouvons-nous ouvrir le - ouais. Eh bien, il fait deux choses. 

Le premier est le lie à le fichier JavaScript. Et nous allons voir que ici. Nous voyons que dans la tête de la document HTML, en particulier. Donc, vous voyez que là nous, fondamentalement, disons SRC, qui se tient pour la source. Et c'est l'URL. 

Alors là, vous pouvez dire que nous avons inclus jQuery. Et nous avons également inclus les scripts. L'autre façon d'inclure Javascript que vous pouvez inclure un script en ligne tag que nous avons au fond où il dit le type de script est un texte d'activer JavaScript. 

Nous disons donc, écoutez, nous sommes sur le point d'inclure un script. Et du type de ce script est JavaScript, qui est un type de texte. Très simple. 

MIKE RIZZO: Donc, en quelque sorte, arrive à votre question sur la façon dont nous incluons JavaScript dans nos fichiers car lorsque nous avait PHP, nous faire quelque chose comme ça. Et puis, que nos fonctions PHP - disons que les stocks ne avec quelque chose que - va là-dedans. Cependant, nous avons maintenant les balises de script que nous lui donnons, qui sont en fait partie du HTML lui-même, car il n'est pas semblant être un fichier HTML comme il est en PHP parce que si vous allez réellement en et de regarder la source de la page, vous verrez ces balises de script là avec le JavaScript associé à eux dans ce. 

Alors, si nous voulions écrire du JavaScript - disons simplement que nous voulions changer le corps car pour le moment je n'ai pas d'autres balises que je ne peux vraiment modifier en plus corps. Disons que je voulais modifier le CSS de cela. Donc, nous allons aller de l'avant et le changement la couleur de celui-ci au rouge. 

Donc, je sauve le fichier. Revenons à notre page Web, rafraîchissement, et il le fait automatiquement car il ne semblait pas qu'il attendait du tout, parce que nous n'étions pas à l'écoute pour un événement ou quelque chose comme ça. 

TOMAS REIMERS: Donc, si nous revenons à ce que déposer en particulier - le HTML Fichier - ce que vous allez à voir, c'est que nous avons - N'oubliez pas que c'est chargé, en quelque sorte, par ordre chronologique. Nous avons donc d'abord la tête. il charge ces deux fichiers. Ensuite, nous allons à l'organisme. Et nous voyons Bonjour tout le monde. Alors que nous rendons Bonjour tout le monde. 

Et puis la dernière chose que nous avons c'est que nous avons la balise script. Donc, il va la balise script parce que c'est pas dire d'attendre quoi que ce soit. Et c'est le plus fondamental façon d'exécuter JavaScript. 

Cela dit, pouvez-vous mettre le script marquer dans l'en-tête juste pour montrer ce point? Et exécuter ce. Nous allons constater qu'il ne pas changer la couleur. Et c'est l'un des problèmes de l' JavaScript est que les choses sont chargé dans un ordre chronologique. 

Donc, au moment où ce code courait, nous avons choisi - revenir - la balise body. La balise de corps n'existe pas encore parce JavaScript est conforme à HTML. Ainsi, le navigateur est comme sélectionnez corps. Il n'y a pas une telle chose encore. Donc, nous pouvons l'ignorer. Et nous continuons. 

Et puis nous définissons une balise body. Mais ce n'est jamais mis à jour. Ainsi, lorsque vous la mise en œuvre de script étiquettes, assurez-vous que vous placez après la balise body. Diapositive suivante. 

MIKE RIZZO: OK. Nous avons donc changé quelque chose. Mais il n'avait pas l'air comme il a répondu à nous du tout parce que c'est en quelque sorte l'a fait dès qu'il a chargé la page. Alors maintenant, au lieu de faire cela, pourquoi ne pas ajouter un gestionnaire d'événements. 

Donc, nous allons faire quelque chose au corps nouveau. Et disons que nous le faisons sur - cliquez sur. Nous allons ajouter une fonction. 

Le changement de Let: TOMAS REIMERS c'est la couleur de rouge à nouveau. Pourquoi pas? 

Le changement de Ouais, laissez: MIKE RIZZO sa 'couleur rouge à nouveau. Très bien. Donc, nous allons recharger la page. OK, nous voyons - comme prévu, il ne tourne pas encore rouge. Mais alors nous pouvons aller de l'avant et cliquez dessus. 

TOMAS REIMERS: Et il ne passe au rouge. 

MIKE RIZZO: Et il le fait devient rouge comme prévu. 

TOMAS REIMERS: Et nous pouvons voir comment nous pouvons commencer à construire très basique interaction. D'autres choses que nous pourrions vouloir faire est, si nous ne voulons pas rendre le corps la couleur rouge, nous allons faire le HTML la couleur de fond rouge. Juste donc c'est la même CSS. 

Et quand nous changeons, nous pouvons voir ce effet très dramatique de modification de la page entière. Encore une fois, si vous êtes la mise en œuvre des choses, vous pouvez avoir un composant qui est destiné à être cliqué. Disons un bouton Quitter et un autre composant entier, qui est destiné à réagir. Donc, vous retirez une fenêtre lorsque cela se produit. 

MIKE RIZZO: OK. À titre d'exemple - vous n'avez pas la chance de voir tout à l'heure - Je vais vous montrer ce que ça donne comme lorsque nous nous cachons quelque chose. Alors je vais aller de l'avant et ne glisse vers le haut. 

TOMAS REIMERS: Voulez-vous conclure que, dans un Type de paragraphe avant de faire cela? 

MIKE RIZZO: OK. Ouais, pourquoi ne faisons-nous pas tellement nous pouvons choisir un peu plus. 

TOMAS Reimers: Et disons donner une classe. 

MIKE RIZZO: Ouais. OK, donc nous allons voir. Au lieu de sélectionner le corps même maintenant, je vais sélectionner tout avec classe bonjour, qui ici nous juste avoir une chose. Donc, nous ne devrions pas avoir à s'inquiéter à ce sujet. 

Donc, je vais rafraîchir. Je vais aller de l'avant et clique dessus. Et il, en quelque sorte, fait une diapositive bizarre jusqu'à chose, qui n'a pas l'air attrayant. En général, ils ne regardent assez agréable. Je suppose que, ce - pour certains raison - n'a pas fait. Je vais juste faire un fondu de manière vous pouvez regarder aussi. Beaucoup plus agréable. 

Et puis, si j'ouvre le JavaScript consolons à nouveau et nous voulons voir ce que ça ressemble quand nous disparaîtrons po Maintenant, je demande simplement disparaître dans le coup. Et elle se fane Dans 

De même, nous pourrions aussi passer un argument à s'estomper ou disparaître, qui est, en quelque sorte, la vitesse de celui-ci. Allons donc de l'avant et que nous voulons il d'aller lentement fondu po Donc je suppose que cela semblait encore assez rapide. Mais il était plus lent qu'avant. 

TOMAS REIMERS: Et si vous voulez trouver en savoir plus sur ces choses, encore une fois, juste aller à la documentation jQuery, que nous vous avons donné, et lisons à travers ceux-ci. Ils documentent leurs fonctions incroyablement bien. 

MIKE RIZZO: OK. Donc je suppose que nous allons revenir à cela. Et nous pouvons parler de notre dernière page. Eh bien, nous pouvons en finir avec Bootstrap. Et puis nous passerons jusqu'à pour certaines questions. Et si vous les gars avez des idées vous voulez essayer de vomir et de voir si nous pouvons les mettre en œuvre JavaScript rapidement. 

Donc, très rapidement sur Bootstrap, qui a été automatiquement inclus dans votre dernier problème posé dans le dossier de CSS et effectivement liée à votre header.php. Donc, vous auriez pu ajouter que les classes sont définis à l'intérieur de Bootstrap à elle. Et il aurait automatiquement style ces choses en conséquence. 

TOMAS REIMERS: Donc Bootstrap est un très chose magique développé par les gens sur Twitter. Et ce qu'il est censé faire, c'est - avant les sites Web étaient vraiment difficile de faire l'air agréable, surtout quand nous avons eu beaucoup de composants communs. Donc, beaucoup de boutons sur le web regardé la même chose. 

Un grand nombre de champs de texte peut être faite à regarder mieux que le texte standard domaine vous le savez probablement de vraiment anciens sites ou vraiment mal fait sites, qui ressemblent à littérale zones de texte sans aucune forme de texte ombre ou toute sorte de bel aperçu. Alors, que fait Bootstrap il a été dit, eh bien, Nous avons beaucoup de styles communes. Pourquoi ne faisons-nous pas un ensemble commun de CSS et un ensemble commun de JavaScript comme bien, qui peut dénommer tel quel et qui peut donner aux gens des choses comme baisse menus déroulants, ce qui peut donner aux gens des choses comme les modaux. 

Modal est ce qui apparaît sur la page chaque fois qu'il est à proprement parler quelque chose, qui inhibe en outre interaction jusqu'à ce que vous interagir avec lui. Quelque chose comme ceci est, êtes-vous sûr vous souhaitez supprimer cette chose? Vous ne pouvez pas vraiment faire autre chose jusqu'à ce que vous dites oui ou non. 

Il a fallu tout cela et il a emballé ensemble et dit, on y va. Les gens peuvent maintenant utiliser cette fonctionnalité. Et vous pouvez le trouver sur à getbootstrap.com. Il a été automatiquement inclus dans votre dernier problème réglé. Et vous êtes plus que bienvenus pour l'utiliser sur votre projet final. Et si vous voulez suivre cette lien pour obtenir Bootstrap. 

Vous voyez ici est la Bootstrap site CSS. Vous verrez Bootstrap. Et si vous faites défiler vers le bas, vous verrez comment le télécharger, comment installer, et cetera. 

MIKE RIZZO: Et vous pouvez aussi, Fait intéressant, de le personnaliser à être ce genre de thèmes que vous voulez. Je sais que c'est quelque chose que j'ai fait pour mon projet final quand j'ai pris la classe a été le personnaliser. Une version différente de Bootstrap qui eu un modèle de couleur différente et différentes formes de certaines choses différentes. Je vous encourage donc à jouer avec ça. C'est une sorte de plaisir à le faire. 

TOMAS REIMERS: Regard sur le dessus de plus, il est très similaire à la police Génial le site. Un grand nombre de documents va commencer à sembler similaire lorsque vous avez il suffit de le voir. Nous avons donc ici la CSS composant de ce produit. Et vous verrez comment il peut coiffer les choses. Donc, si vous cliquez sur les tables, par exemple, vous pouvez instantanément faire un jolie table en ajoutant simplement la table de classe à elle. 

Mêmes choses pour les boutons. Si vous ajoutez simplement le BTN de classe et BTN par défaut ou BTN primaire, vous pouvez obtenir l'un de ces boutons avec ces modèles pré-fabriqués. Et puis, si vous êtes à la recherche de quelque chose de plus complexe que la simple restyling ce w ont déjà, sur le l'onglet JavaScript dans le haut nous avoir un tas de composants. 

Nous avons donc ici des transitions, des verbes modaux, listes déroulantes, les onglets et les info-bulles. Une info-bulle est ce qui apparaît sous votre lorsque vous passez la souris sur quelque chose. Popovers, alertes, boutons, pliable accordéons est ce ils sont généralement appelés. Carrousels, qui bascule à travers des images similaires. 

Ce sont donc les composants de Bootstrap. Je voudrais vous encourager à très aller regarder. Il ya un composant JavaScript et un composant de CSS. N'hésitez pas à les utiliser comme vous voulez. Nous n'allons pas aller trop dans les parce que nous sentons la documentation est vraiment bien fait. Et ouais. Avez-vous des questions à ce sujet? 

MIKE RIZZO: Donc, comme sont vraiment rapide côté, la conception de cette page Web qui nous mettons ensemble rapidement pour cette présentation est effectivement fait en utilisant Bootstrap. Comme vous pouvez le voir, lorsque l'on clique sur ces différents onglets, nous sommes jamais réellement quitter cette page index.html actuel. Donc, ce que nous avons est différents divs dans ce index.html. Et puis, chaque fois que nous cliquons sur un autre onglet, c'est juste changer qui la projection de l'un. 

Alors il les positionne en conséquence, modifie le code HTML de la page afin que l'onglet en cours est marquée comme active pour il apparaît différemment et regards vraiment sympa. 

TOMAS REIMERS: Alors que tout a été fait sans nous écrit presque tous les CSS. Nous voyons aussi un en-tête sur le dessus, dont les couleurs sont en nous. Mais la réelle mise sur le haut de la page et de faire il défilement était Bootstrap. Et puis, même pour une autre bibliothèque - ce est pas un, nous avons parlé, mais un vous pouvez Google si vous voulez. C'est ce qu'on appelle prettify.js. Et ce sera la coloration syntaxique du code pour vous en utilisant CSS et JavaScript. 

La dernière chose que nous voulons parler avant de vous libérer sortir dans la monde à regarder dans les bibliothèques de comprendre comment les utiliser et à, je l'espère, lire la documentation et de trouver ce que vous besoin est de savoir comment trouver les bibliothèques. Donc, la première, c'est que nous sommes juste va pousser Google. Allez Google. 

C'est littéralement ce que nous faisons lorsque nous besoin de faire quelque chose, c'est que nous Google. Y at-il une bibliothèque JavaScript qui me permet de manipuler le temps dans un moyen utile? Donc, si je sais que certains utilisateur qui crée un compte ici, et cela est le heure actuelle, comment puis-je calculer le différence avec ce sans avoir à calculer moi-même? Donc, c'est en fait une chose commune, Bibliothèque JavaScript de temps. Et ici nous Moment.js-- le plus populaire. 

Si nous avons besoin d'une bibliothèque pour manipuler quelque chose comme couleur pour pouvoir générer un tas de couleurs aléatoires - éventuellement, afin de générer un style ou quelque chose - nous pourrions Google quelque chose comme JavaScript bibliothèque de couleurs. Et je suis sûr que nous aurions pop up avec mille et l'un d'eux. Vous êtes invités à les lire. 

Donc, la plupart des choses - quand vous les trouvez - vont être hébergé sur l'un des des sites qui code hôte. Ils sont quelques plus populaires. Le plus populaire, par loin, est github.com. Et si vous allez à GitHub c'est en fait Normaliser où a été organisé. Donc, si vous voulez revenir à cette question. Montrez-leur que. 

MIKE RIZZO: Et c'est effectivement là où ce est hébergé trop, si vous avez remarqué. 

TOMAS REIMERS: Ouais. Donc, si vous passez à Normaliser et aller à la GitHub. Étaient ce que c'est? 

MIKE RIZZO: Cette petite chose de chat est le symbole GitHub. 

TOMAS REIMERS: Oh. Donc GitHub utilise une méthode appelée Git pour stocker le code. C'est que vous ne savez pas ce que c'est ou il vous fait peur, c'est bien. Vous n'avez pas à savoir ce que Git est parce GitHub dispose d'un bouton de téléchargement en bas à droite. 

L'autre chose utile de savoir sur GitHub est la plupart des produits aura un me lire. Et si elles n'ont pas un site Web, la lu me vais parler de la façon dont vous installer, comment vous l'utilisez, ce qu'il fait, et cetera, et cetera, et cetera. Ce que nous avons essentiellement été à travers tout. 

MIKE RIZZO: un abandon de la Internet. 

TOMAS REIMERS: C'est très bien. Les deux dernières choses que nous voulions parler - nous avons parlé de Git - est le dépannage. Et celui-ci n'est pas nécessaire à le produit final tel qu'il est lorsque vous quittez 50. Et quand vous avez des produits la mise en œuvre des bibliothèques ou la mise en œuvre votre propre projet, vous allez d'avoir des questions ou si vous êtes aller chercher des questions. 

Encore une fois, Google il. C'est littéralement ce que nous faisons. Cela va paraître stupide. Mais littéralement, nous google. Et encore une fois, l'une des premières choses vous aurez généralement exécuté en est stackoverflow.com, qui est un merveilleux question et la réponse de vue. 

C'est merveilleux à la fois parce que vous pouvez poster les questions et chercher des réponses, mais aussi parce que il a déjà beaucoup de contenu pré-rempli là. Donc, en général quand vous Google une programmation question dans la première quelques frappe que vous avez peut-être déjà courir en pendant vos ensembles de problèmes. 

Et puis, la dernière chose très brève est JSFIDDLE, qui est - aujourd'hui, nous avons été fait beaucoup de travail avec JavaScript HTML CSS. JSFIDDLE est une application web, qui, fondamentalement, vous permet de prendre votre HTML, VOTRE JavaScript bas à gauche, et votre CSS en haut à droite. Et puis, il peut créer un rendu rapide de celui-ci et de voir comment il interagit. Il est très utile lorsque les gens essaient de faire une preuve de concept comme c'est ainsi que vous le feriez faire un menu déroulant. Peut-être un uncover rapide ou autre. 

MIKE RIZZO: Allons donc avant et cliquez sur ce. Une note rapide - alors que, avant, nous étions faire le clic. Il s'avère JCorey Corée a également construit dans gestionnaire d'événements de clic qu'il utilise juste parce que vous êtes les chiffres va vouloir faire beaucoup de choses quand vous voulez cliquer sur quelque chose. 

De même, il a également un vol stationnaire. Mais pour obtenir la pleine portée de ceux qui, regardons le jQuery documentation et de le faire. J'ai fait quelque chose de stupide ici. 

TOMAS REIMERS: Donc, j'ai un très rapide programme ici, qui dit bouton sur clic. Ensuite, nous avons une boucle for. Pour i est inférieur à 404. Il va juste pop up ces messages d'alerte. 

MIKE RIZZO: Et quel était le Code 404 resta en HTML? Quelqu'un se souvient? Pas trouvé, à droite. Chrome a également ajouté ce soigné chose où vous pouvez - 

TOMAS REIMERS: Parce que les gens comme Mike a commencé à faire ce beaucoup et utilisateurs ennuyeux, ce qui permet vous voyez d'informations. 

MIKE RIZZO: Ouais. 

TOMAS REIMERS: Avons-nous des questions à ce sujet, sur JavaScript les bibliothèques, les bibliothèques, ou trouver regards que de développement web comme dans le monde réel? Nous courons contre le temps. Donc, je ne suis pas sûr que nous allons avoir le temps de mettre en œuvre sauf si c'est vraiment rapide. Sommes-nous bien? 

MIKE RIZZO: Tout ce que vous les gars aimeraient pour voir vraiment rapide dans, comme, deux minutes ou moins? 

TOMAS REIMERS: Tout nous pouvons préciser? Comment écrire - 

PUBLIC: [inaudible]? 

MIKE RIZZO: Oui, that - 

TOMAS REIMERS: Vous pouvez juste frapper Control-U sur le site. 

MIKE RIZZO: Oh, je ne savais pas que. 

TOMAS REIMERS: Je pense, oui. Control-U. Ouais. 

MIKE RIZZO: Oh, alors c'est l' code pour le site. Mais si vous voulez vraiment télécharger notre fichiers et tout, il est hébergé sur github.com 

TOMAS REIMERS: réduire mon nom - Tomas Reimers - barre oblique CS50 séminaire de trait d'union. 

MIKE RIZZO: Et vous pouvez trouver tout ce qu'il. 

TOMAS REIMERS: C'est ce que GitHub ressemble, par la manière. Encore une fois, quand vous voyez un open source projet, généralement, ils seront une lecture moi là-bas que vous pouvez lire. Et si vous revenez, vous remarquerez que vous avez le téléchargement zip, qui sera vous permettent de télécharger la source code pour inclure l' produit dans votre propre chose. 

MIKE RIZZO: Ouais, et si nous suffit de cliquer sur les index.html vraiment rapidement - 

TOMAS REIMERS: Vous voyez ici est la code source de notre site Web. 

MIKE RIZZO: Aussi, j'ai oublié de pousser droit avant avec la grande table, il inclus, mais il ya aussi une table de chmods que nous avons inclus juste pour votre clarté. Mais si nous faisons défiler tout le chemin jusqu'à la bas, nous n'avons pas réellement faire très beaucoup avec le JavaScript choses du tout avec cela. C'est exclusivement à partir de tout d'autre que nous avions. 

Alors, merci les gars pour venir et l'écoute. Nous espérons que c'était vraiment utile. Si vous avez des JavaScript connexes questions ou tout simplement pour parler quoi d'autre comme ce que d'autres choses cool vous pouvez faire avec JavaScript, nous aimerions de vous parler. 

TOMAS REIMERS: Si vous avez une question de votre projet ou si cela peut être pertinente, nous allons probablement rester dans les parages un peu après. Mais à part ça, avoir un bon week-end. 

MIKE RIZZO: Ouais, en profiter. Rendez-vous les gars. 

TOMAS REIMERS: See ya.