ALLISON BUCHHOLTZ-UA: Tous droits tout le monde. Bienvenue à la section. Ce est notre avant-dernière section. Ce est tellement triste. Je ne sais pas ce que je vais faire sans vous voir les gars tous les lundis. Je suppose que nous devrions just-- nous pourrions simplement rencontrer ici et dîner ou quelque chose. Je ne sais pas. Je vais apporter la nourriture à la place. Nous allons parler. Mais oui, la semaine prochaine être notre dernière section. Sur cette note, vous avez un quiz de la semaine prochaine. Je sais que je ai oublié de faire mon, comme, deux semaines de préavis, la semaine dernière, Mais je espère que vous les gars savait ce qui se préparait. Espérons que ce est l'un des derniers mi-session pour vous les gars pour le semestre. Mais il va couvrir toute la matériel que nous avons dépassé. Donc, ce ne est pas comme vous pouvez simplement oublier environ quatre boucles ou variables. Parce que nous avons appris ceux au début, ceux qui sont évidemment jeu juste pour votre quiz. 

Ça va être le même format, même longueur, alors vous êtes déjà habitué. Il va y avoir codage par des problèmes de main, peut-être un vrai faux, peut-être certains réponse courte. Donc, vous devriez être familiariser avec le format, surtout si vous prenez les tests pratiques. Mais comme je le dis ici, ce est cumulatif, mais nous sommes définitivement va se concentrer sur choses de six semaines avant. Donc, nous ne allons probablement pas de vous poser des questions sur le nombre d'octets sont chaque type ou ces sortes de choses, mais nous allons probablement être intéressé par des choses comme les listes chaînées, ou des structures de données, ou des algorithmes différents que nous avons parlé. Donc, assurez-vous que vous êtes vraiment sur ceux-ci, et si vous besoin de toutes les ressources, voici beaucoup de ressources. Je viens de vous donner genre d'une liste rapide là-bas. 

La semaine prochaine sera quizz examiner pendant ce temps. Donc, si vous avez des questions ou des sujets spécifiques, choses spécifiques sur le quiz qui vous souhaitez aller sur, se il vous plaît me les envoyer à l'avance afin que je puisse sorte de préparer du matériel pour cela. Et en plus de cela section examen, nous allons également la tenue du cours à l'échelle revue comme nous l'avons fait la dernière fois. Et il va être fait par les mêmes personnes. Je ne sais pas si ce rend meilleur ou le pire, mais ça va être moi, Hannah, Davan, et Gabe nouveau. Donc, si vous voulez venir voir nous tous plaisanteries avec l'autre et vous guidera à travers quizz examen, vous devriez certainement venir à la prochaine lundi également. Donc, vous aurez juste un bourrage lundi emballé d'examen quiz, ce qui est bon car alors vous avez mardi à traiter à travers tout. 

Mais certainement faire vérifier ces ressources. Study.csv.net est de loin, je penser, l'un des plus utiles, surtout parce qu'il a beaucoup de code de l'échantillon, il a tous les points d'alimentation avec toutes les notes sur elle, qui sont vraiment ce que je dessine plus de mes matériaux de section. Si il ya quelque chose dans le précédent sections que je ai envoyés que vous ne pouvez pas avoir obtenu, faites le moi savoir. Comme l'exemple de code de la semaine dernière, si quelqu'un n'a pas obtenu que, envoyez-juste moi ou venir me parler, et je vais me assurer que vous obtenez cela. 

Donc, avec cela, aujourd'hui, nous allons être parler de JavaScript. Nous voici donc Tommy, qui je étais juste parler de vous la nuit dernière. Je aime Tommy. JavaScript est son favori la langue, comme il le dit ici. Ils vont essayer et vous dire que ce est pas le meilleur, et ils seront mauvais. Alors Tommy est un maître JavaScript. Je ne suis pas tout à fait à son niveau, mais je étais comme, «Tommy, comment puis-je enseigner ces enfants javascript? " Alors, je ai quelques conseils, afin je espère qu'ils travaillent sur. 

Ainsi, un couple de choses à savoir est que JavaScript est un script côté client la langue, de sorte que PHP est quelque chose que nous considérions plus côté serveur, il a été télécharger vers le serveur, compilé et il exécuté. Celui-ci est exécutée sur votre propre machine. D'ACCORD? Donc vous chargez certaines pages JavaScript, et il se exécute sur votre machine. La syntaxe est très similaire à C et PHP. Nous allons passer par quelques exemples de JavaScript, et vous allez voir que le façon dont nous parlons sur les variables, les boucles, et les conditions sont très similaires. D'ACCORD? Le fait qu'ils sont si semblables est va probablement déclencher certains d'entre vous jusqu'à, dans certains cas, simplement parce vous incorporez un peu de C où il ne devrait pas être. Peut-être que vous essayez et tapez quelque chose quand il ne doit pas être tapé. 

Et à ce sujet, une chose à savoir est que JavaScript est typé dynamiquement la langue, comme PHP. Donc, si vous les gars me souviens de la section la semaine dernière, quand nous étions sorte de faire notre cours accéléré de PHP, nous avons vu comment une une chaîne pourrait être transformé en un int, et ainsi de suite. Le type de vos variables sont déterminés au moment de l'exécution, donc ils peuvent changer au fil le déroulement du programme, et de la même manière que nous ne avons jamais vraiment déclarer des types pour les variables PHP, nous allons faire la même chose ici, où nous ne sommes pas vraiment commander les types de nos variables, pour ainsi dire, comme nous le faisons en C. 

Et puis une chose ce est assez cool est que vous pouvez l'erreur vérifier via la console, avec cette grande fonction console.log, qui vous permet d'imprimer sur différents variables ou objets que nous allons parler. Tout comme la semaine dernière quand je étais comme, "utiliser cette fonction," avec dump à partir de votre pset ce est une fonction vous souhaitez utiliser, console.log. Je étais tellement surpris du nombre de étudiants aux heures de bureau ne savait pas sur la fonction de vidage. Et je étais comme, "les gars, cette volonté vous rendre la vie tellement plus facile. " 

Très bien, donc ce était genre de juste une brève chose, comme toujours, nous avons des exemples. Je sais que vous les gars aiment ceux. Alors, voici un exemple d'une très simple fichier JavaScript ici. Donc, il va juste pour créer ce pop-up qui dit, "Bonjour monde," lorsque vous accéder à la page, mais de laisser essayer de marcher à travers un peu cette question. Alors, évidemment, ce est juste comme votre index.html normale. Donc, seulement notre modèle normal ici, et nous avons HTML, nous avons notre tête, et tout comme avec CSS, comment nous inclus certains fichier en dehors, non? Nous avons un certain type de script texte qui est JavaScript. Et la source est hello.js, qui est ici-bas. Ce est l'ensemble du dossier de hello.js. Et puis nous avons une certaine titre et un corps HTML que nous ne nous soucions pas vraiment. 

Ce qui se passe est que, quand nous chargeons cette page, il exécute automatiquement ce script. D'ACCORD? Donc en JavaScript exécuter automatiquement. Donc, ce qu'il va faire, ça va à se rendre immédiatement et exécuter cette. Et il va dire, "alerte. Bonjour le monde. " Quelle est la fonction d'alerte qui génère effectivement cette case. D'ACCORD? Donc, ce est un peu à tous les englober. Il n'y a rien de plus nous avons eu à faire que de simplement alerte, puis tout ce que nous voulions au sein de notre zone d'alerte. D'ACCORD? Donc, ce est juste un super simple exemple de ce que peut faire le JavaScript. 

L'un des vraiment cool les choses, comme nous le verrons, est que JavaScript vous permet de manipuler vos pages web, sans avoir à les recharger à chaque fois. Donc, si vous want-- par exemple, si vous passer la souris sur quelque chose, si vous les gars ont jamais vu comme des barres de menu, ou lorsque vous survolez une certaine sujet, un menu déroulant apparaît, ce est parce que de JavaScript. D'ACCORD? Donc vous n'êtes pas recharger l'ensemble la page pour obtenir ce menu pour montrer, vous cherchez juste pour certains spécifiques l'action que l'utilisateur a pris, qui sont appelés événements que nous aurons dans, et une fois que vous voyez cela, vous dites, "OK, modifier quelque chose sur ce page et la rendre un aspect différent, mais seulement modifier ces choses spécifiques. Ne pas recharger le tout ". Donc, ce est en réalité beaucoup plus agréable, et vous ne avez pas de recharger vos pages, et ce est vraiment cool. 

Donc déclarations variables, de sorte que vous pouvez sorte de le voir, Je ai mis ici sur le dessus, faiblement typé. Donc, ce est très bien comme PHP. Nous ne avons pas besoin de dire JavaScript quel type nous sommes attendant chacune de ces variables soit. Ils peuvent être tout ce que nous voulons types. Donc, vous remarquez dans ce cas, nous déclarons les très simplement, juste avec "var" puis ce que nous voulons notre nom variable soit. Une chose à noter est que lorsque vous var mis en face d'un nom de variable, il étendues localement, il. D'ACCORD? Ce est tout à fait raisonnable pour vous complètement simplement effacer le var et je viens de s est égal CS50, et ce serait juste être une variable globale. D'ACCORD? Ainsi, vous pouvez initialiser les deux sens, dépend juste de comment vous le voulez. Donc, si vous initialisation il dans une fonction, et vous voulez que variable scope rester au sein de cette fonction, vous allez avoir à faire quelque chose comme var nommer une variable, contre si vous le voulez SCOPED globalement, vous peut juste faire le nom de la variable, puis tout ce que vous souhaitez qu'il égal à. D'ACCORD? 

Ce est le genre de truc cool, ici-bas, parce que si nous remarquons notre variable b commence comme vrai. Et ce que cela peut does-- il me dire ce que cela fait? Donc, nous avons une certaine alerte. Quel serait le type de b être dans le début? AUDIENCE: Boolean. ALLISON BUCHHOLTZ-UA: Boolean. Droite. Et puis nous réaffectons b à cette chaîne, non? Alors ici, ce type de b être? Ce serait une chaîne, non? Donc, ce est important de avis est que dans c, nous pourrait presque jamais faire quelque chose comme ça. Nous aimerions avoir une variable, jeté comme quelque chose d'autre, peut-être faire un peu de fonction avec deux i, vais partir d'une charge d'un nombre entier. Mais si nous remarquons ici, b très facilement tapez change. 

AUDIENCE: Patientez, de sorte que vous pouvez juste être comme, «faire b un entier?" 

ALLISON BUCHHOLTZ-UA: Ouais. Vous pouvez simplement réaffecter b pour un entier. 

AUDIENCE: Vraiment? 

ALLISON BUCHHOLTZ-UA: Ouais. Et puis ce serait un int. Ainsi, vos variables peuvent changer au fil du le déroulement du programme aussi. Ils ne sont pas strictement typés. Il est très faiblement typé. D'ACCORD? Fondamentalement vos variables peuvent faire ce ils veulent, comme nous l'avons vu avec sorte de PHP. Ils peuvent faire des choses folles, afin il est important d'être très prudent. Nommez vos variables bien. Si vous ne le faites pas, tout d'un coup vous allez être comme, "Attends, je pensais que ce était un ficelle, et maintenant ce est un int, et je ne suis pas vraiment sûr ce qui se passe ici. " Donc, ce est juste un exemple simple de montrant comment une variable peut facilement changer son type plus Au cours d'un programme. 

D'ACCORD. Donc, ce devrait ressembler Super, super-familiers. Donc, ce sont nos boucles en JavaScript. Ils sont exactement les mêmes, sauf pour au lieu de quatre int i est égal à zéro, nous pourrions simplement dire var i est égal à zéro. Et alors nous pourrions avoir notre même genre de l'état, même genre de mise à jour, i plus plus fonctionne très bien. Donc pattes sont les mêmes, whiles sont les mêmes, et faire whiles sont exactement les mêmes. Même genre de format général. Nous remarquons, quatre, entre parenthèses, entre parenthèses, ce est tout de même. Aussi il y aura des points-virgules lorsque nous arriverons à l'exemple de code. Vous verrez ce est assez près le même que c. 

Pour les déclarations de fonctions, encore une fois, très similaire. Nous avons une fonction qui vient dit que ce est une fonction, puis le nom de notre fonction, et les entrées. Et encore, si nous remarquons, nous ne ont pas de types ici que ce soit. Droite? Nous ne avons rien en disant que ces doivent être entiers ou doubles, ou des flotteurs. Ils pourraient être ce qu'ils veulent. Ce qui est important est de remarquer que nous avons besoin d'écrire la fonction avance de laisser savoir que JavaScript ce est en fait une fonction. 

Donc, ce est juste une simple somme fonction qui renvoie x ou y, et puis ce est aussi très cool ce est que vous pouvez réellement assigner une fonction à une variable. Donc dans ce cas, la somme est maintenant le fonction qui ne fait somme. Donc, si vous remarquez ici, nous avons fonction, le nom de la fonction, entrées. Droite? Ici, nous avons juste la fonction et des intrants. Donc, ce est ce qu'on appelle une fonction anonyme. Et ce est quelque chose qui devrait être nouvelle à la plupart d'entre vous, sinon vous tous. Donc, fondamentalement, ce que des moyens, ce est que nous ne avons pas besoin de nom de notre fonction dans ce cas. Nous pouvons simplement dire, "OK, je vais avoir cette fonction qui se exécute, ici sont ses entrées, et voici ce qu'il va faire. " Et surtout quand vous affectez une fonction à une variable que vous allez manipuler, vous ne avez pas nécessairement besoin de le nommer parce vous allez faire référence à cette variable par nom, pas par tous la fonction se appelait en réalité. D'ACCORD? 

Donc, si nous voyons ici, nous avoir une certaine variable somme maintenant qui est égale à la somme de trois et cinq. Et nous obtenir cela. Et ce serait juste avoir une alerte, trois plus cinq égalent le nombre. Ce sera juste, plus concaténer quelle que soit notre réponse était sur la corde. Aussi cool, plus peut concaténer des chaînes. 

Pour JavaScript, comme avec PHP, HTML, CSS et comme nous le disions, beaucoup de lui nous sommes sorte de prendre les roues de formation hors ici et vous les gars avez beaucoup de le savoir comment vraiment comprendre ces choses. Ils sont légèrement différente, mais ils ne sont pas si étrangère et que vous ne pouvez pas le Google des choses ou les consulter en ligne avec les écoles w3. Et nous sommes vraiment vous attend gars à, en quelque sorte, l'expérience et d'apprendre sur votre propre. Donc, je sais que cela peut sembler un peu moins approfondie que certaines des choses que c nous faisons, mais ce est en fait pour une raison. Mais je espère que ce ne est pas trop différent, et ce ne est pas écrasante. 

Donc tableaux en JavaScript, encore une fois très, très semblable. Droite? Nous avons un certain tableau de variables ce est égal à crochets vides, et ce est juste un tableau vide. Ceci est souvent appelé notation de tableau littérale. Ce est juste une chose que nous appelons. Si nous voyons tableau à deux ici, nous avons une certaine littéral de tableau comporte trois éléments, droit? Et puis nous avons une certaine var troisième élément qui est une variable qui est juste va tenir cette chaîne, JS. 

Les éléments, bons à remarquer, sont séparées par des virgules, tout comme nous pourrions nous attendre. Et vous pouvez également accéder à ceux-ci, comme nous l'avons fait en C, avec cette notation d'index, non? Si différent de PHP Maintenant, nous allons revenir juste sorte de référence à des choses par index. Tout comme C, ce est aussi l'indice zéro. Je me sens comme il serait vraiment cruel si ils ont fait tout d'un coup une JavaScript index, et vous aviez complètement repenser la façon dont vous pensez que sur les tableaux. 

Une chose cool, ce est que, au lieu d'avoir à do-- si jamais vous voulu la longueur d'un tableau, peut-être vous le parcourir jusqu'à ce que vous trouver une fin, ou vous suffit de savoir ce que ce est. Parce que le JavaScript est très lâche plus moyens que simplement le type, comme nous le voyons ici, nous pouvons juste faire ce tableau plus grand parce que nous décident de. Si nous remarquons tableau à trois a trois choses pour commencer, mais tout d'un coup, nous sommes comme, "oh, ce est une blague. Nous allons en fait pour en faire 101 choses ". Donc si jamais vous voulez connaître la longueur réelle de votre tableau, vous le faites comme ça. Et nous allons voir beaucoup de cette notation dans les exemples, mais avec JavaScript il est typiquement tout ce objet que vous parlez dot importe quel type de fonction que vous souhaitez appliquer à elle. D'ACCORD? 

Donc dans ce cas, notre objet est un tableau à deux, et nous disons que nous voulons la longueur de tableau à deux. Donc, cette demande tout comme la longueur à ce sujet. Et ce sera retourner votre longueur. Aussi quelque chose à noter est que si nous remarquons nos tableaux, contrairement C, ils ne ont pas être tous du même type. Ce est beaucoup plus comme PHP. JavaScript est fondamentalement juste comme ce meld intéressante de C et PHP. Donc, nous allons passer à cela. Pour l'instant, nous allons simplement supposer que vos tableaux sont essentiellement comme des tableaux C, en ce que ils sont indexés zéro. OK, donc ce est tout. Vous pouvez également étendre juste une tableau à tout index que vous souhaitez. Considérant que ce serait probablement SEG la faute sur vous ou vous donner une erreur, JavaScript est comme, "nah, ce est bien. Je ai eu cette. Nous allons simplement aller droite où vous voulez ". 

OK, donc objets sont très importants. Les gars, vous allez utiliser beaucoup de ces P dans votre jeu, si je me souviens bien. Donc, la chose que ce sont similaire au C sont structures. Alors vous pouvez penser quand about-- nous allons à droite un exemple après cela, je pense que ça va faire beaucoup plus sense-- mais on utilise essentiellement des objets à organiser des cours lié information. Lorsque nous avons parlé structs en C, nous avons souvent parler d'un étudiant qui avait un nom, ID, maison, vous le savez, la concentration. Et ce est un peu la même chose que nous utilisons pour les objets ici. Ce est juste pour organiser des informations similaires. 

Vous pouvez aussi penser à ceux-ci comme plus similaire à tableaux associatifs en PHP. Donc, ce serait un peu la chose où nous avons une clé avec une certaine valeur, très similaire à PHP. Ainsi, vous pouvez initialiser un certain objet vide, comme nous le voyons ici, juste avec des accolades. Donc tableaux sont entre crochets. Objets vides sont accolades. Bonne distinction d'avoir. Et ce ne sont que deux différents façons de définir les propriétés. Donc, ce est une sorte de beaucoup plus de façon à est similaire à PHP, avec notre tableaux associatifs, avec notre clé, et de notre valeur, alors que celui-ci vous aurez est-- voir ce beaucoup plus en JavaScript. Ceci tend à être la convention. Et de la même manière que nous avons fait tableau à deux points de la longueur, ce est dit, "OK, me donner ça attribuer de cet objet ". Droite? Donc, de la même manière ce était comme, "donne-moi la longueur de l'attribut de tableau à deux, " cela veut dire, "donne-moi propriété de notre objet vide ". Ou dans ce cas, nous sommes assignant à une certaine valeur ici. Mais vous pouvez également y accéder de cette façon. 

Et puis ici, ce est juste montrant deux alertes différentes. Donc, ce serait montrer les alertes serait exactement la même, ce est juste deux façons différentes de accéder à l'élément que nous voulons. Cela fait-il sens pour tout le monde? Je me sens comme celui-ci rend probablement plus de sens, juste parce que nous sortons d'PHP. Mais comme nous le faisons d'autres exemples, cette est littéralement exactement le même. Beaucoup d'entre elles est il suffit de changer dans la syntaxe. 

OK, donc exemples. Je adore exemples. Voici donc quelques CS50 variable qui est un objet, et nous stockons tout cela informations à ce sujet. Nous avons donc bien sûr, instructeur, TFS, psets et enregistrées. Donc, nous remarquons ce sont presque l'ensemble de types différents. Droite? Donc objets peuvent stocker attributs de différents types. Nous pouvons penser qu'il est très this-- semblable à notre réseau associatif en PHP. Donc clé, valeur, clé, valeur, clé, valeur, ainsi de suite et ainsi de suite. Ce qui est aussi intéressant de la même manière que nous pouvons avoir des tableaux dans des tableaux, nous pouvons également avoir des objets à l'intérieur objets, ou des tableaux dans des objets. Vous n'êtes jamais vraiment limité à juste un seul des choses. Nous pouvons être très Inceptionesque, juste continuer à aller dans le trou de lapin il. 

Donc, si nous remarquons, nous avoir une certaine cours qui est une chaîne, instructeur qui est une chaîne, et le réseau, un int, et un booléen. Donc toutes ces choses différentes. 

Très bien, alors, nous avons une autre. Donc dans ce cas, nous avons un tableau d'objets. Ainsi, tout comme un objet peut avoir une matrice en elle. Nous pouvons également avoir un tableau d'objets. Cela peut être utile pour penser similaire à type de la façon dont nous avons eu un hachage table, nous avions un tableau de toutes ces différentes types de structs que étaient des pointeurs à des différentes nœuds et autres joyeusetés. Mais dans ce cas, nous avoir un tableau d'objets. Donc, ce est comme un tableau tableaux des associatifs. Nous avons donc une certaine aurions premier élément être l'objet avec le nom James et abritera Winthrop. 

Les gars, vous vous souvenez peut- quelque chose de très similaire à ce avec votre dernière pset, où si vous tiré quelque chose de votre base de données, la première sorte de chose dans votre tableau était toutes les informations sur le premier utilisateur qui se est réuni il, et puis vous aviez à l'index dans cette pour obtenir leur stock ou de leur cache ou quoi. Donc, ce est très sensiblement les mêmes chose, juste un peu de changement dans la syntaxe, le changement petit peu dans les mots que nous utilisons pour les décrire. 

Donc, si nous voulions, ne importe qui peut dire moi ce que cette alerte voudrais faire ici? Ou ce que ce peu de code serait faire pour nous? PUBLIC: Il va vous donner tous les noms. ALLISON BUCHHOLTZ-UA: droit, donc il serait tout simplement alerter avec tous les noms car il passerait par chalet i, de sorte qu'il me remette à zéro. Donc, il disait: OK, nous sommes à la recherche à ce premier objet, qui est le premier emplacement dans notre tableau. Et il dit, "me donner le attribuer, le nom de cet objet ". Donc, nous allons ici, nous avions analyse, nous trouverions nom, et nous aimerions imprimons sur James, Molly et Carl. Toutes les questions jusqu'ici? JavaScript malheureusement vous allez être faire beaucoup de recherche sur votre propre, calculer la syntaxe, aux prises avec elle. Mais bien sûr, je suis toujours là, les heures de bureau sont toujours là. Je pourrais être le mardi de cette semaine. Donc, si vous êtes là, vous pouvez venir me rendre visite cette semaine. Ce serait génial. 

OK, donc DOM est le Document Object Model-. Donc, ce est juste une façon que nous aimons à penser comment notre HTML et tout au sein de son organisation. Ce est très bien quelque chose qui viendra probablement sur votre quiz. Je sais que mon année, ce était comme voici fichier HTML, remplir le DOM pour elle. Et vous suffit de remplir dans les petites choses. Ceux-ci devraient être des points faciles espoir. Je espère que vous aurez see-- 

AUDIENCE: [inaudible] 

ALLISON BUCHHOLTZ-UA: Donc, vous voyez cet arbre ici? 

AUDIENCE: Ouais. 

ALLISON BUCHHOLTZ-UA: Donc, ils vont demander utilisation pour remplir ce qui se passe sous le corps. Peut-être sous le corps, nous avons une certaine divs ou nous avons quelques paragraphes, et nous vous demandons de remplir un arbre très bien comme ça. Nous allons donc marcher à travers elle. Ainsi, le document-objet Modèle est juste une façon de structurer et de penser sur notre graphique HTML. Et aussi quand nous obtenons en plus le JavaScript ça va être le manière que nous fait manipuler différents éléments sur la page. Nous devons trouver un moyen pour accéder à chaque des choses dans notre HTML, et si cela nous donne une très de façon standardisée en béton à travers les diverses pages Web pour le faire. 

Donc, si nous marchons seulement par cela ici, bien sûr notre document est comme l'ensemble de notre dossier. Cela fait évidemment sens que ce est la plus haute chose, puis nous avons notre HTML réel, ce qui correspond à cette balise ici. Aussi, si vous en tiret vos balises correctement, puis en créant cet arbre DOM devient super simple. Nous avons donc une certaine tête ici. Nous avons quelques corps qui nous voyons la tige hors du HTML, ce est pourquoi nous avons la tête et le corps. Dans la tête, nous avons une certaine balise de titre, un titre balise de fin, nous savons donc ce qui vient après la tête. Et au sein de notre balise de titre, nous avons bonjour, monde. D'ACCORD? Donc, ce est cette branche entière de la main gauche. Et puis pour la branche de droite ici, nous voyons que nous avons HTML, OK nous avons fait cette partie de la tête, nous cherchons juste au corps, nous avons donc une certaine zone du corps. Et dans ce cadre, le seul chose que nous avons, ce est bonjour, monde. D'ACCORD? Si nous avions des choses comme p et certains support puis bonjour, monde, et puis un autre Support p d'adieu, monde, nous aurions deux bulles se détacher d'ici. Parce qu'ils sont tous les deux sous le corps, mais ils sont paragraphes distincts ce cas. Il est certainement la pratique à ce sujet dans des questionnaires précédents, ainsi que de nombreux en ligne sur elle. OK donc, cela permet simplement nous voyons tout bien et manipuler les choses très systématique. D'ACCORD? Nous savons exactement comment parcourir à travers cet arbre, nous savons donc ce que nous voulons accéder. 

OK donc ce est pourquoi nous voulons d'avoir cette sorte de modèle, afin que nous puissions utiliser des choses comme cela, et nous comprenons ce qu'ils signifient, et ils sont normalisés dans toutes les choses que nous faisons. Donc titre document de dot est juste le titre de l'ensemble de ces our-- sont assez explicites, Je aime à penser. Donc, la première de trois exemples disent simplement, "OK, donner juste moi le titre de cette page Web ". Donc, il vous donnera ce que correspond au titre. 

Corps document dot va vous donner tout ce qui est au sein de ces balises body. Alors que vous pouvez manipuler. Et le corps de points du document dot entrer HTML est très cool, et est peut-être pas comme super intuitive, mais le HTML interne correspond à ce droit ici. Donc, si jamais vous voulez manipuler le texte sur une page, généralement vous allez faire quelque chose avec le point du corps HTML interne. D'ACCORD? Donc HTML intérieure tend à se référer à ce est en fait entre ces balises. D'ACCORD? Et puis fonctions utiles. Donc, si vous vouliez obtenir ne importe quel de ces derniers, tout élément, nous avons quelques Id, classe nom, ou le nom de tag. Ceci est très similaire à les choses que nous avons fait avec CSS, non? Où nous avons quelques sélecteurs correspondent soit à un tag, une classe que nous les, ou un Id donnons. Ce est très bien de la même façon. Si vous avez quelque chose qui a une certaine classe de chien, et vous dites obtenir des éléments par nom de tag, et vous mettez chien dans there-- ou désolé, nom de la classe. Vous pouvez mettre point là. Il va retourner tous ceux éléments à vous qui ont cette classe. Donc vous pouvez manipuler seulement ceux. De la même manière, peut-être que vous venez vouloir manipuler certains en-tête, de sorte l'entête d'une h1, comme nous l'avons fait. Vous pourriez faire obtenir des éléments par tag nommer, parce h1 est un nom de tag. Et de la même manière, si vous voulez obtenir quelque chose unique, vous pouvez le faire get tag. Obtenez élément par Id. Et ils sont en réalité beaucoup de ces derniers. Ce ne sont que comme trois des très nombreux. Donc, si vous allez en ligne, comme Je vais encourager les que vous fassiez, et faire un peu recherche sur votre propre, Je recommande vraiment recherche dans l'ensemble de ceux-ci. Ils pourraient être super utile, en particulier lorsque vous voulez juste genre de manipuler choses très spécifiques sans avoir de passer et essayer pour analyser tout ce. 

OK, donc la dernière chose JavaScript est des événements. Alors, quand je parlais plus tôt d'aller sur un site Web, et lorsque vous survolez quelque chose, ou de votre souris survole quelque chose, autre chose qui se passe. Ce est ce que nous aimerions penser comme un événement. Donc, ce que nous avons que la force être utile ici est onclick. Donc, le mien était sur le vol stationnaire, qui, je suis sûr, est juste sur le vol stationnaire. Aussi une tonne de ces que vous pouvez rechercher. Il ya toute une liste en ligne des choses différentes que vous pouvez écouter. 

Mais les événements JavaScript sont fondamentalement juste répondre à des choses que votre utilisateur fait. Droite? Donc, votre utilisateur fait quelque chose, ce est un événement, et JavaScript répondra mais vous souhaitez qu'elle. Il répondra en conséquence. Donc dans ce cas, nous avons certains onload fenêtre de dot. Donc ce que cela dit est, "attendre jusqu'à leur chargement de la fenêtre ". D'ACCORD? Alors, quand chargé, onload de tout, alors vous pouvez exécuter cette fonction. Alors, quand tout est chargé, vous allez d'avoir une certaine touche de recherche qui obtient un élément par Id, et il imprime quoi que élément est que le bouton de recherche. Et puis nous avons cette variable, nous disons: «OK, onclick." Alors, quand nous entendons un clic sur le bouton de recherche, exécuter cette fonction, qui est une alerte, vous avez cliqué sur le bouton Rechercher. 

Donc ce qui arrive est-- ce est un bon petite représentation graphique ici. Donc nos documents charges, ce est notre onload, nous trouvons notre Recherche bouton, qui est la suivante. Nous recherchons pour notre bouton Rechercher. Et puis, quand le bouton de recherche est cliqué, il correspond à droite ici. Onclick. Puis nous avons finalement alertons nos utilisateurs, qui est cette dernière ligne ici. D'ACCORD? Donc, chacun de ces quatre étapes seulement correspond aux quatre boîtes là-bas sur le fond. Cela fait-il sens pour tout le monde? 

Et puis une chose que je vais juste parler très, très brièvement, que je vous encourager à les gars Allez regarder est plus dans jQuery, qui est juste une bibliothèque qui est construit au-dessus de JavaScript. Il est super utile, car avec la plupart des bibliothèques. Il ya beaucoup de fonctions. Donc, si jamais il ya quelque chose qui vous voulez faire en JavaScript, votre premier réflexe ne devrait pas être de penser de, "quelle fonction devrait Je Code? "Il devrait être, "Permettez-moi vois quelqu'un est déjà fait pour moi. " Parce que neuf fois sur dix, quelqu'un aura déjà fait, et ils ont probablement fait mieux. Les gens passent beaucoup de temps à faire cela, et JavaScript est très largement utilisé, afin que les gens sont constamment essayer de faire mieux. Et jQuery a beaucoup de fonctions qui sera sans doute utile de vous dans votre projet final si vous êtes faire quelque chose avec la conception web. Comme je aime à le dire ", le travail plus intelligemment, pas plus difficile. " Si vous les gars ce faire, il va être génial. Lorsque nous sommes au hackathon je ne ai pas veux que vous soyez tous stressés. Je veux que vous soyez comme, "je ai eu ce. jQuery a mon retour. Je ne ai pas besoin d'écrire ces fonctions ". 

Il suffit donc de deux choses à souviens, je vais pour vous permettre de gars regardez plus dans jQuery sur votre propre. Tout ce que je vais dire, ce est qu'il fait des choses assez impressionnants et peut rendre votre vie beaucoup plus facile. Mais ce que vous voulez avoir, ce est tout ce fichier que vous allez être en utilisant, vous allez vouloir ces deux lignes. Vous allez avoir la scénario de js js jQuery points. Et effectivement la source va être une certaine URL. Si vous Google jQuery, Google accueille effectivement tous les fichiers pour vous. Donc, vous voulez absolument URL entrée qui place. Je viens de mettre cela ici pour des raisons de simplicité. Tout cela signifie, ce est où trouver votre bibliothèque jQuery. Ce est énorme, de sorte que vous ne voulez pas de l'héberger sur votre propre ordinateur si vous ne pouvez l'éviter, ce est pourquoi nous ont tendance à tout mettre dans l'URL de Google qui accueille tous ces fichiers pour vous. D'ACCORD? Vous Google, je promets il sera là. 

Et puis tout Fichier JavaScript que vous êtes utilise, ce est donc que quelques-uns externe Fichier JavaScript que vous utilisez. De la même manière que nous relions à notre CSS fichiers, ce est la même chose. Cette juste des liens vers le fichier où votre Javascript. Et je ai quelques exemples avec JavaScript simple. Donc, nous irons à travers elle. Et puis dans votre index JavaScript, qui est votre fichier JavaScript ici, ce est une sorte de l'emballage que vous avez pour jQuery. Vous êtes presque 99,9 pour cent du temps d'aller d'avoir ceci dans votre fichier index.js. Parce que ce est cela dit, "Ne pas exécuter quoi que ce soit jusqu'à ce que votre document est effectivement prêt », ce qui est exactement ce que vous voulez. Parce que si votre document ne est pas prêt, et jQuery commence à faire les choses, ce est juste un gâchis. Donc, vous voulez toujours avoir ce wrapper. Et puis pour les choses qui vont là-bas, je en laissant aux propres parcourant de vos gars. 

OK, alors y at-il des questions à droite maintenant environ JavaScript en général? Ou le modèle DOM? Sinon, nous avons une certaine fraîcheur exemples que nous pouvons passer, que vous les gars peuvent me aider code. Mais je vais aussi être super sympa, et si vous ne veulent rien dire pour ces derniers, ce est bien. Je peux aussi vous donner des exemples. Mais rien sur le PowerPoint avant de passer? Cool. 

Je me sens comme vous les gars devez énergie. Donc, je pense que nous allons commencer avec mon exemple de premier parti. Nous avons trois exemples, vous avez votre choix. Nous avons donc l'horloge, où nous allons mettre en oeuvre une horloge réelle qui est va mettre à jour au fil du temps. Nous avons cette fonction grande Twitter. This-- vous savez quoi, tenir le coup. Nous allons faire de cette disparaître. Bam. D'ACCORD. 

Nous avons cette fonction grande Twitter ici, that-- Je sais, à droite? Ça va être génial. Est-ce que vous les gars excité? Cela va compter le nombre de caractères que vous avez laissé, donc si je tape en ce moment, évidemment, il dit encore 140, mais nous savons que ce ne est pas le cas. Et puis avec notre dernier ici, cliquez ici pour faire la fête. Qu'est-ce qui va se passer, ce est quand nous cliquons, le fond de va changer de couleurs. Alors vous les gars avez vos options de celui que vous voulez faire en premier. Je promets que je vais le prendre très facile sur vous. Je me sens comme tout le monde est un peu de seulement très discret aujourd'hui. Alors je vais vous guider à travers la façon dont nous mettrons en œuvre tous ces. Si vous voulez carillon en, ce est très bien, mais je se sentir comme tout le monde est un peu fatigué. Donc, je vais vous guider par ces exemples. Avons-nous quelque chose qui nous aimerions faire en premier? Ne importe qui? Aucune préférence? D'ACCORD. Vous savez quoi? Nous sommes sur partie. Je me sens comme vous les gars ont besoin d'un little-- oui, nous ferons d'abord celui du parti. D'ACCORD. 

Donc, ce que nous avons ce est ici-- pas censé être là. Maintenant ce est bon. D'ACCORD. Donc ce que nous avons ici est juste une simple page HTML que vous les gars devraient tous être super familiariser avec de vos deux dernières psets. nous avons notre type de doc ici. Tout le monde peut voir? D'ACCORD. Cool. Nous avons notre HTML évidemment. Nous avons quelques-tête qui est lié à une feuille de style qui vient de faire ma police belle et grande et audacieuse. Donc, ne vous inquiétez pas à ce sujet. 

Nous avons certains corps avec un fond d'Id, OK? Parce que nous allons être changeant l'arrière-plan. Alors, quand nous changeons la fond de notre corps, nous nous souvenons d'il ya deux semaines lorsque nous traitons avec des pages Web. Donc bon d'avoir cela. Et nous avons quelques Id égale parti. Ce h ref livre signifie simplement que ça va aller à la même page. Et cliquez ici pour faire la fête, ce est pourquoi quand nous cliquons il, il faut changer les couleurs, heureusement. 

Et puis nous avons un script ici que est simplement liée à ce parti js de points fichier, qui est vide, car nous ne avons pas encore fait quoi que ce soit. Et ce est tellement triste. Mais très vite, il va changer couleurs, et ce sera génial. 

Donc, je vais juste vous promener gars à la façon dont nous pourrions aborder ce. Donc la première chose que nous pourrions faire, si nous changeons le fond de le corps, la première chose que nous pourrions faire est effectivement saisir ce que le corps est, non? Donc, nous voulons avoir la somme, notre fond, et si vous remarquez, Je viens de commencer à taper automatiquement. Il ya rien de spécial que nous besoin de faire pour nos fichiers JavaScript. Je peux commencer à déclarer des variables, et déclarant fonctions aléatoires. Et ce est beaucoup plus sous forme libre. Ce est comme avec C, nous vous avons donné tous ces règles strictes, et vous ont grandi, de sorte que nous sommes comme, "aller de l'avant. Être libre. Faites ce que vous voulez. " Et ce est ce que JavaScript est. Donc, nous avons une certaine expérience ici. Avec notre modèle DOM, nous savons que nous peut faire le document dot obtenir élément, et si nous remarquons ici, notre corps a une Id. Droite? Ainsi, nous pouvons obtenir ne document en Id, et voici un simple. Quel est notre Id que nous voulons ici? AUDIENCE: Contexte. ALLISON BUCHHOLTZ-UA: Contexte. Parfait. Et virgule à la fin. Cela n'a pas encore disparu. Vous avez encore besoin de vos points-virgules. D'ACCORD. Donc, ce est notre premier. Et quand nous cliquons sur quelque chose, nous vouloir quelque chose se passe, non? Donc, nous pourrions vouloir une variable Ce est l'attente d'un clic. Ce que nous allons faire, ce est que nous allons rendre notre lien plus semblable à un bouton. Donc, nous allons avoir un certain bouton est égal à documenter dot obtenir élément par Id. Et si je vous parle de la cliquez sur le lien ou cliquez ici pour faire la fête lien, ce pourrait être ici mon Id? Parti. Correct. OK pas trop mal jusqu'à présent. Tout le monde à obtenir ce que nous faisons? 

OK, alors maintenant nous avons notre bouton, et nous voulons les choses changent quand on clique dessus. Donc, si nous nous souvenons de notre PowerPoint, très simple chose que nous pouvons faire est juste touche dot onclick, non? Et cela va correspondre une certaine fonction. Ce est une fonction anonyme. Et ce juste as-- en fait je suis va faire un peu plus grand. 

Donc ce que je ai fait ici, ce est que je dis, OK, quand nous cliquons notre bouton, qui est ce lien que nous venons de parler, nous allons exécuter cette fonction anonyme. Nous ne avons pas besoin des entrées. Nous ne nous soucions pas ce que dit l'utilisateur. Quand ils cliquent sur elle, nous sommes allons faire ce que nous voulons, qui est de changer la couleur de fond. D'ACCORD? Donc, ce est pourquoi nous ne avons pas toutes les entrées, nous avons simplement cette fonction anonyme. Et maintenant, nous allons en fait d'écrire cette fonction. 

Donc, il ya un tas de façons vous pourrait générer une couleur aléatoire. La façon dont je l'ai fait était de générer trois nombres aléatoires et les convertir à un triple RVB. Donc, cela vous montre que quelques-uns fraîche les choses que si vous êtes comme, "oh, Je ai besoin de générer un aléatoire Numéro. "si vous googlé, ce est ce que vous trouverez. 

Nous avons donc trois différents choses, Var, pas rouge à nouveau, vert. Droite? Ce sont donc les trois choses qui font une couleur. Bleu, rouge et vert. Cool. Et ce que nous pouvons faire, ce est que nous savons qu'il doit être comprise entre 255, et si vous avez regardé un peu de Générateur de nombres aléatoires, vous pourriez obtenir quelque chose comme les mathématiques points aléatoires, qui, si vous regardez cette place renvoie à un certain nombre entre zéro et un. D'ACCORD? Et ce nombre faire notre Triplets RVB aller entre les deux? Zéro et quoi? Que peuvent-ils aller jusqu'à? 255. Donc, si les mathématiques dot aléatoire passe entre zéro et un, comment pourrions-nous vouloir convertir ce? Public: Durée? ALLISON BUCHHOLTZ-UA: Oui, exactement. Le temps est donc 255. 

AUDIENCE: [inaudible] Ce est comme [inaudible]. ALLISON BUCHHOLTZ-UA: Math dot aléatoire. AUDIENCE: Cool. ALLISON BUCHHOLTZ-UA: Oui. JavaScript prend juste soin de vous. D'ACCORD. Donc, nous pouvons le faire pour tout cela. Droite? Math dot moments aléatoires 255. Copiez ce. Cool. Donc, la chose est, cela peut pas retourner un entier. Droite? Peut-être que nous obtenons un nombre entre zéro et un, et il l'amène à être légèrement off et nos RGBs ne peuvent pas être flotteurs. Ils doivent être entiers. Donc, si vous avez essayé cela, ce serait sans doute avoir un comportement erratique. Il serait un peu funky. Donc, ce que nous faisons est que nous voulons faire assurer que ceux-ci sont arrondis, et vous pourriez compléter de toute façon. Je ai arrondi avec plancher. Donc, je ai toujours fait en sorte qu'il arrondi. Mais aller hors de la simplicité était de simplement obtenir un nombre aléatoire, comment pensez-vous que nous pourrait-chaussée ce numéro? Il est très similaire. Toute idée? Donc, si aléatoire était juste mathématiques dot aléatoire, donc pensez-vous que nous ferions étage? Math-de-chaussée de points. Et vous pouvez également faire des mathématiques dot plafond. Round est une sorte de ambiguë parce que vous ne avez pas savoir se il faut arrondir ou arrondi à l'inférieur. Donc, généralement nous le faisons toujours mathématiques chaussée point, mathématiques dot plafond. Mais honestly-- 

Public: Est-ce que toute l'étage plus bas? 

ALLISON BUCHHOLTZ-UA: Plancher arrondit. Et ce est juste un choix de ma part. 

Alors maintenant, nous avons nos trois numéros qui ont été générées de façon aléatoire, et ce que nous allons faire maintenant, ce est que nous sommes aller juste pour changer le fond. D'ACCORD? Donc, nous avons déjà notre sorte de fond stockées dans cet élément appelé fond. Donc, ce que vous remarquerez est, si vous avez joué autour avec cela, nous voulons changer le style. Et ce est quelque chose qui sorte de vous Google et comprendre, voudrait comment changer la couleur. 

Mais la façon dont vous accédez à cette couleur est fond dot dot de fond style. Donc, cela veut dire donné cet objet, fond, qui se réfère à ce que Id élément là-haut, nous allons regarder le le style dans le style nous allons regarder le fond. D'ACCORD? Et si vous allez et regardez cette place, il pourrait faire un peu plus de sens, mais ce est fondamentalement juste dit, "Donnez-moi cet attribut très spécifique de ce que je ai défini plus tôt. " Donc, ce que nous sommes en train de changer à est certains RVB, parce que ce est logique. Nous utilisons RVB triple, non? Et nous have-- Je veux me assurer que je obtenir le bon nombre de citations ici. Donc, ce que nous faisons est que nous avons RGB, et nous allons to-- ce est comme concaténation, qui est rouge. Et puis nous voulons une certaine virgule. Et puis nous voulons plus vert, puis certains virgule, et un peu de bleu. 

De sorte que ces avantages tout dire comme la concaténation. Donc, ce est juste de créer ce chaîne qui se passe au sein de RVB. D'ACCORD? 

AUDIENCE: [inaudible], plus ensuite l'un plus vert puis rouge. 

ALLISON BUCHHOLTZ-UA: Ouais, parce que je ai raté cela. L'amende infligée à celui-là. Oh, attendez. Non. Parce que je dois me assurer que je ai eu tous ces droite. Je vais donc expliquer en momento uno. Vert, bleu, parfait. Maintenant, je ai fini. Je crois. 

D'ACCORD. Donc, ce que ce est, ce est que fond va être réglé sur une chaîne de caractères. Droite? Ce est ce que nous avons ici. Il va y avoir une certaine RVB 255 virgule 255 virgule zéro, ou tout numéro que vous y at-il. Nous faisons donc ici, nous avons une chaîne de caractères. Et ce que nous voulons faire, ce est que nous sommes sorte de créer dynamiquement que lorsque nous avons effectivement exécuter ce programme. Donc, ce est une chaîne de caractères. De plus concatène avec la valeur que le rouge a, qui concatène avec un virgule, qui concatène avec ce qui est vert, et ainsi de suite, et ainsi de suite. D'ACCORD? Jusqu'à la fin, qui est la fermeture de parenthèses ce RGB ici. D'ACCORD? 

Alors qu'est-ce que cela va générer une certaine commande vraiment ce est-RGB de trois nombres ce contexte est maintenant réglé. D'ACCORD? Donc, nous allons voir si cela fonctionne. Je espère que ce est le cas, parce que si elle ne pas, je vais être triste réel. Oh non. OK, tenir le coup. Certainement fond dot dot fond de style. Je suis définitivement disparus quelque chose juste petite. Ne pas vous les gars détestent cela? Lorsque ce est juste un petit peu d'erreur? Fond Tout-Puissant. RVB. 

AUDIENCE: [inaudible] ALLISON BUCHHOLTZ-UA: Non Je ai essayé ceci avant la classe. Je ai tout ce que je faisais avant classe dans le cas je étais comme, "Attends, ce que je ne ai fait de mal?" Parce que je étais comme, «je vais probablement ce gâchis à un moment donné ". Plus vert. Tout semble que ce est concaténé correctement. D'ACCORD. 

AUDIENCE: [inaudible] 

ALLISON BUCHHOLTZ-UA: Oh, là vous allez. Ce est ce que je avais besoin. Regardez ça. Tiffany pour sauver. Parfait. D'ACCORD. Maintenant, nous allons voir si cela fonctionne. Oh mon Dieu. D'ACCORD. Attendez. 

AUDIENCE: Space après la seconde plus. 

ALLISON BUCHHOLTZ-UA: Lequel? Oh, attends, attends. usure de l'espace? 

AUDIENCE: Deuxième avantage dans la concaténation vert. ALLISON BUCHHOLTZ-UA: Oh. PUBLIC: Il n'y a pas d'espace après la ainsi, ouais. ALLISON BUCHHOLTZ-UA: Vous ne ont pas besoin que, mais- AUDIENCE: Oh, vous ne avez pas? ALLISON BUCHHOLTZ-UA: Il semble assez. AUDIENCE: OK. D'ACCORD. 

ALLISON BUCHHOLTZ UA: Voyons voir si cela fonctionne. D'ACCORD. Je suis évidemment à ne pas cette démo, qui me rappelle d'une conférence la semaine dernière, mais je sais que cela va fonctionner. Je sais que cela va fonctionner. Si proche. Sauf Je ai accidentellement supprimé mon script sur celui-ci. Non, il est parti de points js. OK tenir. Je vais copier, et je suis aussi juste aller tout supprimer, parce que je ai eu ce travail plus tôt. 

Je promets cela fonctionne. Sinon, je vais vous montrer ce que Tommy est. Et il. 

AUDIENCE: Vous faites référence partie dot CSS, et ce est un point de parti js. 

ALLISON BUCHHOLTZ-UA: Ah, bien ici est partie js de points. OK, qu'est-ce que je fais de différent? OK, nous allons voir si cela fonctionne maintenant. Bam. Donc, je ne sais pas ce que je ai fait différemment, mais ce est ce qui devrait arriver. Plutôt cool. Je ai cliqué sur ce, comme toujours. Mais nous pouvons essayer de voir ce que je ai fait différemment que celui-ci avait. Je ne sais pas pour vous les gars, mais ce regarde essentiellement ce que je viens d'écrire. Il était probablement un manquant virgule est quelque part mon truc. En fait, après, je pense que je manquais un point-virgule ici effectivement. Mais je ne pouvais pas le voir parce que il était hors de l'écran. 

Mais si l'on remarque, ce est assez près exactement ce que je viens d'écrire. Je pense que probablement la partie la plus difficile de ce est juste un peu de cette bonne chose ici, la compréhension ce qu'il fait là. Ces sortes de choses que vous apprenez vraiment juste par googler et honnêtement juste essayer. Si vous pensez qu'il ya une certaine attribut, il l'est probablement. Alors, essayez. Voir ce qui se passe. Comme je l'ai dit, il ya beaucoup de l'expérimentation avec JavaScript, et PHP, et tout ce qui des trucs, et CSS en particulier. Ce est le seul vrai façon de le comprendre. 

OK, donc après ce fiasco avec le parti js points, nous avons deux autres options. Nous avons horloge ou Twitter. Ils sont à la fois intéressant. Peut-être pas aussi amusant que de parti, qui a eu un peu fraîche stroboscopique chose à la fin. Avez-vous les gars avez une préférence? AUDIENCE: Horloge? ALLISON BUCHHOLTZ-UA: Horloge? D'ACCORD. Cool. 

Encore une fois, nous avons notre vide fichier JavaScript. Et comme nous le voyons ici, nous avoir une très simple HTML. Nous avons notre feuille de style, qui vient Formats ce qu'il devrait ressembler. Nous avons notre div avec un ID de l'horloge, qui dit simplement, "cela devrait être une horloge." Et nous avons notre lien à notre fichier JavaScript Ce est en fait aller à générer notre horloge pour nous. Parce que le truc cool, ce est que vous pouvez définir JavaScript pour actualiser automatiquement lui-même. D'ACCORD? Ainsi, au lieu d'attendre la utilisateur pour frapper Actualiser sur une page de sorte que vous pouvez obtenir temps jour, JavaScript peut mettre à jour mais il aime. 

Donc, comme avec notre dernier, nous voulions pour accéder à notre arrière-plan, à droite? Alors, que pensez-vous pourrait être la première chose que nous voulons faire ici? Si nous sommes en quelque sorte d'aller au large ce genre de paradigme ici? Nous voulons probablement accéder à notre horloge, non? Donc, nous avons une certaine var horloge, qui equals-- qu'est-ce qu'on pense que ça va être? Document obtenir dot élément by-- Je ai aussi l'amour et de notre Sublime-- Id Id est horloge. Point-virgule. Vous avez pour vous assurer d'obtenir ces points-virgules, cette fois, parce que je me sens comme ça le problème était la dernière fois. OK, comme je disais juste à essayer avoir JavaScript se rafraîchir, il ya cette grande fonction, je sais que ce est bien pratique l'année dernière, Je ne suis pas sûr que ce est très pratique pour cette pset, mais ça se appelle intervalle déterminé. Et ce est en fait vraiment cool si vous les gars font rien avec le temps ou d'obtenir des informations à jour. Sur un site Web pour une finale projet, ce est probablement une fonction que vous voulez se familiariser avec des super. Alors, que définir l'intervalle ne est que nous allons lui donner une fonction, et combien de fois il se doit appeler cette fonction. D'ACCORD? 

Donc dans ce cas, nous allons juste créer à nouveau une fonction anonyme, OK, ça va pour obtenir notre jour, et notre temps, puis mettre à jour les choses et l'afficher. Donc, nous allons vous inquiétez à ce sujet. Nous serons comme générer horloge ici. Mais ce que nous avons besoin est la façon dont souvent pour l'actualiser. Donc dans ce cas, ce est juste millisecondes. Donc, nous allons juste faire 100 millisecondes. Bien sûr, tout à fait arbitraire. Si vous vouliez mettre à jour beaucoup plus lentement, vous pourriez. Nous pouvons déranger avec l'intervalle de jeu, comment grand notre intervalle est après que nous obtenions une horloge de travail, qui je espère que je vais accès. Donc, ce est juste de dire, "OK, appel cette fonction toutes les 100 millisecondes. " D'ACCORD? Ce est tout ce qu'il fait. 

Donc ce que nous voulons que notre fonction faire, ce est que nous voulons avoir une date et quelque temps ce est nous allons avoir. Afin que nous puissions commencer avec notre Date égale quelque chose, et notre temps est égale à quelque chose que nous ne savons pas encore. Ou fait, nous avons juste besoin ce jour, parce Date va tout inclure. Encore une fois si vous venez de Google rien ce que vous voulez faire, si vous écrivez, "OK, Je veux avoir le temps via JavaScript, «il vous donnera cette grande fonction appelée date de get. Littéralement, la plupart des choses que vous voulez faire, JavaScript va avoir il fait pour vous déjà. Donc, ce est littéralement comme neuf Connaître la date, qui est creating-- ou nouvelle date, rather-- qui génère un objet qui représente une date. 

Et ce que nous allons faire ici est ce est-- Je vais écrire ce, puis expliquer ce qu'il fait. Donc, je vais me assurer que je reçois ce droit. 

OK, donc ce que cette fonction fait, ce est que nous sommes juste créer le code HTML qui est en fait va aller au sein de notre div id de l'horloge. Donc ce que cela va faire est tout simplement générer une chaîne de caractères, OK? Ce est ensuite va être transplantées dans notre HTML. Fondamentalement, ce qu'il va faire est quelle que soit nous-- ce que je vais vous montrer ce est que tout ce que nous disons est HTML, nous allons remplacer ce texte ici avec tout ce que HTML est. Donc, cela va permettre nous changeons notre point horloge HTML d'être juste le texte de cette devrait être une horloge, de montrer effectivement les numéros et les choses que nous nous soucions à propos, et effectivement heures. 

Donc, ce que nous allons faire, ce est que nous sommes va commencer à générer le code HTML. Ainsi, de la même manière que nous avons utilisé à faire, plus égaux pour les entiers, vous pouvez maintenant le faire pour les chaînes, sauf qu'il va les concaténer. Droite? Comme nous l'avons vu avec le point du parti js, ce seulement concatène toutes ces choses ensemble. Ainsi, vous pouvez concaténer différents bits HTML à partir de variables, ou des morceaux de cordes que vous écrivez vous-même, et ce juste permet vraiment de dynamique générer du HTML, qui est plutôt cool. Donc, si vous avez quelque chose très utilisateur spécifique, cela peut vous permettre de faire cela. 

Donc, nous avons HTML, pour Je vais essayer de me assurer d'avoir ce droit. Donc, nous allons faire un peu de tête h1. Donc, ce est important de réaliser ici ce est que ce est en fait juste HTML. Droite? Nous vous écrivons réelle code HTML ici, ce est pas seulement une chaîne dans la normale manière que nous aurions penser. Donc, nous avons un certain HTML. Ceci est considéré comme une chaîne ici cependant. Et nous faisons la date dot-- nous vouloir obtenir nos heures. Encore une fois, si vous étiez à regarder quoi que ce soit sur la date, il vous dira ce sont tous les attributs de cette date a. Et voici ce que vous pouvez utiliser sur elle. Donc, il a probablement des choses comme obtenir heures, et obtenir des minutes, et obtenir des secondes, et obtenir des millisecondes, et qui sait quoi d'autre qu'ils ont. Mais si vous regardez dans le la documentation, tout sera là. 

Nous avons donc obtenir heures, puis nous voudrions pour concaténer que je suis with-- va déplacer ce ici. Donc, si nous générons en ce moment, nous sommes effectivement générer le temps, non? Nous avons heures, et puis ce est entre les heures et minutes? Vous avez un point-virgule, non? Donc, nous voulons faire un peu de virgule ici. Et puis nous voulons obtenir notre minutes, de la même manière que nous avons la date dot obtenir heures, comment pourrions-nous obtenir nos minutes? Il est littéralement courant Recevez dot minutes, que je aime en quelque sorte. Ce est comme, "oh, comment puis-je obtenir mes minutes? " Je viens d'obtenir mes minutes. 

D'ACCORD. Et puis nous avons un autre colon ici. Et puis si nous voulons obtenir notre seconde, comment pourrions-nous obtenir notre seconde? Date de dot obtenir secondes. Je pense que ce est plutôt cool. Et ce qui est important de réaliser, ce est que nous avons aussi besoin de fermer notre balise HTML ici, parce que il devrait encore être HTML valide, alors h1. Cool. 

Donc, après cela, nous pouvons faire l'horloge dot HTML interne est égale à HTML. D'ACCORD? Alors ne oubliez pas que je ai dit HTML interne essentiellement prend tout ce qui est entre le deux balises dont nous avons parlé et des inserts ou manipule tout ce qui est là-dedans? Donc ce que cela fait, si nous revenons à notre horloge, est que l'horloge se réfère à tout dans ce div. Ce est le HTML interne Id de cette horloge div. Et donc ça va changer pour le code HTML que nous venons généré, qui, qui, espérons-le, espérons-le, nous l'espérons, affiche le temps en ce moment. Nous verrons. Bien sûr. Tant de questions techniques. La just-- Allison je suis hors jeu aujourd'hui mes gars. OK, cela fonctionne. Point horloge HTML interne. Ce était HTML Vraiment? Aussi ce est ce qui se passe. Lorsque vous ne pouvez pas voir quelque chose que vous, il suffit de regarder votre code source. D'ACCORD. Voulez-vous savoir une œuvre fraîche autour que nous allons faire ici? 

AUDIENCE: Pouvez-vous faire des majuscules? Les lettres majuscules? Parce que vous avez obtenir heures, et ensuite obtenir minutes. 

ALLISON BUCHHOLTZ-UA: Il est d'obtenir heures et get-- oh. Vous soient: étoile d'or. Ce est un test, les gars. Je vous promets qu'il travaillait avant la classe. 

OK, mais quelque chose de cool de savoir est que vous pouvez also-- si parfois vos fichiers externes sont obtenir un peu fou, vous pouvez également juste les mettre droite ici, ce qui tend à fixer les choses. Sauf que ce est comme vraiment laid. Cours de formater tout. Assurez-vous que tout est joli. D'ACCORD. 

Je voulais faire toutes les démos fraîches, et ils sont tout simplement pas en travaillant. D'ACCORD. Script var horloge. Quoi qu'il en soit, ce qui est important est que ce est la manière générale que vous souhaitez formater JavaScript. Comme vous pouvez le voir, il peut être parfois très capricieux, même quand il était littéralement travailler il ya deux secondes. Ou il n'y a pas deux secondes, mais très, très récemment. 

Donc, pour vous montrer ce que ça devrait ressembler, et pour vous montrer que je ne suis pas fou, et que tout est exactement le même, ce est ce que ça devrait ressembler. Vous allez juste faire partie supérieure ici, et si vous affichez source de la page, si vous remarquez, il a fait des des choses folles, je simplifiées il. En outre, le crédit à Tommy McWilliam, qui fait m'a aidée à créer ces exemples, ce est pourquoi je sais qu'ils travaillent. Parce que Tommy est un maître JavaScript. Mais si l'on remarque, nous avons un certain ensemble. Nous avons notre fonction d'horloge ici. Ce est tout le code JavaScript nous venons d'écrire, ou certaines d'entre elles. Nous venons d'écrire celui-ci ici. Et il a un supplément fonction qui Tapis juste qu'il en plaçant un zéro devant un lettre ou devant un numéro se il est un seul d'entre eux. Donc, si vous remarquez, ce est assez près exactement ce que nous venons d'écrire. Vous avez une horloge variable a notre élément, obtenir élément par ID, qui est horloge. Nous avons notre intervalle défini fonction, ce est une fonction anonyme qui exécute tout cela. Nous avons une certaine chaîne de départ HTML que nous alors dynamiquement générer en ayant une certaine tête h1, concaténation avec obtenir les heures, plus notre côlon, plus obtenir les minutes, plus un autre colon, ainsi que nos secondes, et enfin le code HTML de fin pour elle. Et puis nous mettons à jour notre horloge dot HTML interne au format HTML, et nous mettons à jour toutes les 100 millisecondes. D'ACCORD? 

Je promets que je vois ne suis pas fou. Je ne sais pas. Je ne sais pas pourquoi il ne me aime pas. Je me sens comme semble le même, mais apparemment il me déteste. 

Donc, nous allons voir si le troisième tour va mieux. Nous sommes là pour voir. Je ne suis pas sûr de savoir comment cela va aller. Tout le monde est au moins de mettre le contre, comme tout le thème général de JavaScript, si? Je espère que ce est au moins utile, plus que de montrer que ce est un peu capricieux. Mais votre jeu de problème sera très amusant. Ça va être génial. Ce ne sera pas tout à fait aussi fastidieuse comme cela, je ne pense pas. Vous obtenez réellement de voir les choses vraiment cool. 

Donc, last but not least, nous allons essayer une Twitter. Je suis vraiment peur maintenant, les gars. Je ne sais pas comment cela va aller. Mais juste pour vous donner un peu plus de goût, et ce est effectivement cordes et manipulation entrées, ce que nous allons faire est, si l'on remarque ici avec HTML-- celui-ci a un peu plus-- nous avons une certaine zone de texte, qui correspond à cette zone de texte ici. D'ACCORD? Et cela a un ID de texte. Nous restylée un peu avec une certaine largeur et la hauteur que nous avons prédéterminée, et nous avons H1, qui vient de notre tête est celui qui représente nos caractères. Nous lui avons donné un peu de Id caractères restants, puis nous avons un script ici, que je suis vraiment espérant troisième fois de le charme ici, les gars. 

Donc ce que nous voulons faire, dans la même veine générale que nous avons fait avec js horloge de points et du parti dot js Comme nous l'avons remarqué, ce est que nous avons effectivement commencé par l'accaparement les choses qui nous tiennent à coeur, non? Donc dans ce cas, il ya deux les choses qui nous tiennent à, OK? Une chose que nous sommes en fait assez étudier et, à partir des données de dessin, et une chose qui nous sommes en train de changer. Donc, il ya notre HTML. Si ce est notre page web ici, ce est les données que nous étudions? Ça va être tout ce que le texte dans nos boîtes, non? Donc tout ce que je tape ici. Ce est ce que je veux savoir, ou ce est ce que je veux regarder. Et ce qui se passe pour être changer sur notre page Web? Les caractères restants. Donc, de la même manière, nous voulons commencer par l'initialisation de variables qui maintiennent effectivement sur ces éléments. D'ACCORD? Donc, si nous avons quelques var ce est notre zone de texte, et nous avons une certaine var qui est restants. Droite? Donc, ceux-ci vont tenir ces deux choses. Ainsi, le même genre de chose, le document dot-- OK, je suis va se assurer que ce est aller travailler cette fois. Je suis très catégorique. OK, donc si nous voulons que notre zone de texte, selon à notre HTML, ce est notre identifiant? Quelle est notre identité? Il va juste être du texte, car ce qui crée notre zone de texte, OK, et de notre Id est un texte, ce est donc comment nous pouvons saisir ce qu'il ya dedans. OK, point-virgule. Je vais être super précise à ce sujet, parce que je veux que cela fonctionne pour le moment. OK, faire la même chose, obtenir élément par Id. Je me demande vraiment ce qui a causé les deux autres de gâcher. OK, puis dans celui-ci, que voulons-nous pour accéder? Quel est notre Id ici? Nous avons un autre Id notre HTML, ce est quoi? AUDIENCE: Caractères restants. ALLISON BUCHHOLTZ-UA: Caractères restants. 

D'ACCORD. Cool. Donc je vais juste écrire ce vraiment rapide. Je vais juste écrire ce deuxième. Ainsi, la zone de texte. Ce qui est intéressant est B il function-- ya beaucoup de fonctions qui non seulement correspondent à votre souris, mais votre clavier. D'ACCORD? Donc vous pouvez dire quand une touche est pressé, vous pouvez faire des choses comme ça. Donc celui que nous utilisons est appelé sur la touche jusqu'à, qui dit: «Si vous avez appuyé sur une touche votre clavier, lorsque l'utilisateur a levé leur doigt sur ce bouton, et la clé est devenu non pressée, alors nous allons faire quelque chose ". D'ACCORD? Donc, ce est logique, non? Parce que chaque caractère nous tapons, nous allons d'avoir à lever nos doigts sur de celui-ci, de sorte que lorsque la clé monte, nous pouvons savoir pour diminuer nos caractères restants. 

Donc, nous avons une certaine sur la touche , et de la même façon, nous allons dire, "OK, quand nous faisons cela, nous vont créer une fonction qui va prendre e, "dans ce cas, et ce que nous voulons faire est calculer le nombre restant. OK, alors nous allons commencer tout par la création d'une variable. Donc, nous avons une certaine variable r, que cela va représenter combien de personnages que nous avons laissé. D'ACCORD? Nous savons que nous commencions par 140, et si nous voulons savoir, disons, la longueur de cette chaîne qui est entrée été, vous les gars ne ont aucune idée comment nous pourrions faire cela? Juste basé sur de l'évidence choses, comme si nous voulions heures, nous avons utilisé obtenir heures. Nous savons que notre objet est zone de texte, mais pourriez-vous les gars penser à ce qui pourrait venir après? Toutes les idées? 

Donc le genre de celui de moins intuitif, mais ce est la valeur de longueur de point. Il suffit donc de me donner quelques attribut de valeur est en fait la longueur de cette chaîne. Donc, il va dire, "OK, je suis à la recherche à toute cette chaîne dans une zone de texte, et je vais le dire vous combien de temps il est. " Parce que si nous nous souvenons cordes sont vraiment simplement des tableaux, afin que nous puissions simplement prendre la longueur d'entre eux. Alors que nous avons. Cool. 

Alors ce que nous voulons faire, ce est nous ne voudrez plus jamais permettre à l'utilisateur à l'entrée de plus de 140 caractères, non? Parce que si nous disons: "Oh, vous ne ont autant restants, " puis les laisser faire cela de toute façon, nous avons été couché. Et ce est un autre chose qui le JavaScript peut être vraiment bon pour, est la validation de l'utilisateur et faire en sorte que votre l'utilisateur se inscrit dans les règles que vous avez fourni à eux. Donc, si vous voulez faire des choses comme faire assurer entrée de quelqu'un de leur adresse e-mail, ou faire en sorte que quand ils entrer deux mots de passe, ils correspondent. JavaScript peut le faire. Vous voulez faire quelque chose comme, "quand le formulaire est soumis », ou comme, "Quand le bouton Soumettre le formulaire est cliqué, vérifiez toutes ces choses. " Et nous pouvons le faire JavaScript. Donc, ce est exactement ce nous allons faire ici. 

Donc, ce pourrait être un moyen de vérifier si ils sont allés plus de 140 caractères? Qu'est-ce qui va se passer à notre valeur de r se ils essayer? Ça va être négatif, non? Ou ça va être moins supérieure ou égale à zéro. Donc, nous pouvons utilisons un si ce est comme tout le reste. D'ACCORD? Et nous avons une certaine zone de texte dot valeur, et ce que nous faisons ici ce est que nous sommes juste cutting-- ce est quoi? Désolé. Celui-ci, nous voulons juste return false. Je me suis confus. Tous Frazzled des choses ne fonctionne pas. OK, nous voulons juste return false, puis nous vouloir afficher le caractères restants, non? Donc, avec l'horloge, nous avons fait quelque chose avec HTML interne, non? Où nous installons il égal à un certain variables, de sorte que peut-on faire ici? Que sommes-nous en train de changer le code HTML interne? 

AUDIENCE: Restant? 

ALLISON BUCHHOLTZ-UA: Nous changeons restant. Très bien, et que faisons-nous vouloir régler égale à? Il va être r, parce que ce devraient être nos caractères restants. D'ACCORD? Donc, je suis vraiment nerveux pour voir si cela fonctionne maintenant, mais nous allons voir. Laissez ce. Ce est vraiment très rapide. [Inaudible] OK. Encore une fois, je vais vous montrer. Pour une raison quelconque, mienne décide de ne pas travailler, mais ce que je vais vous montrer, ce est que cette est-- oh je devais mettre cela en. OK, on ​​constate le même genre de chose ici, obtenir la zone de texte. 

Aussi, si vous gars préavis, se il est jamais quelque chose que vous voulez faire, et vous ne savez pas comment faire il suffit de cliquer source de la page, et ils vont vous dire. Parfois, ça va être chiffré. Pour votre pset, nous chiffrons tout, de sorte qu'il ressemble à du charabia. Mais si jamais il ya un très site cool que vous aimez, si vous cliquez simplement source de la page, il va vous dire comment le faire. Encore une fois, travailler plus intelligemment, pas plus dur. Et comme vous le voyez ici, tous ces choses sont les mêmes. celui-là prend juste quelques sous-chaîne que, je oublie exactement ce qu'il fait. Mais il faut évidemment une certaine chaîne de la valeur de zéro à dix, et retourne false ce qui devrait arrêter l'utilisateur d'entrer plus, puis met à jour l'évidence le HTML interne il. 

Cool. So Big Kebab à partir d'aujourd'hui, expérience, regardez le code source car il va vous aider beaucoup, et tout le monde, parfois JavaScript peut être difficile de travailler avec et ne pas travailler toujours la façon dont vous attendez d'elle, mais juste continuer à essayer parce que je promets que ce sera. Je promets tous ces exemples travaillaient avant la classe. Je ne comprends pas ce qui est arrivé. Je ai littéralement tout la même chose. 

Une dernière chose que je veux juste vous montrer les gars qui peuvent être super utile in-- est ce qui fonctionnait auparavant? Nous avons parti au travail, ne avons-nous? Je pense que oui. Oui. Nous l'avons fait. Impressionnant. OK, donc une chose qui Vous devriez savoir est le journal de la console dont je ai parlé. Donc consoler journal de point de bonjour. Donc, ce est une sorte de JavaScript équivalent de printf. Donc, si jamais vous voulez inspecter vos variables ou voir ce qui se passe là-bas, ce vous pouvez faire est, si nous inspectons élément, est ce que vous voulez aller , et vous allez à consoler, vous verrez que ce imprimé bonjour. 

Donc, nous pourrions avoir impression que nous voulions. Si nous le voulions pour imprimer fond dot de fond style dot, nous devrions être en mesure de voir le Triple RVB qui revient. Ou non. Je oublie exactement comment vous imprimer une variable comme ça, mais vous devriez être capable de imprimer des choses comme ça. Ce sera très utile pour votre pset lorsque vous essayez de manipuler coordonne ou autres joyeusetés. Alors ils changent également cette pièce en classe. Ceci est différent des dernières années, de sorte que juste être gentil avec vos FO, ou les TF aux heures de bureau, plutôt, parce que nous sommes type d'apprentissage avec vous les gars. Mais le journal de la console était super, super utile pour JavaScript année dernière. Donc l'aimer. Apprenez à utiliser. Il est plus facile à utiliser que GDB, de sorte que doit être au moins un point de plus. Mais merci les gars portent avec moi. Je suis désolé que mon des exemples pour une raison quelconque, n'a tout simplement pas envie de coopérer avec moi, mais je espère que cela a aidé sorte de vous obtenir un peu plus dans la zone de JavaScript. Et envoyez-moi toutes vos questions pour la semaine prochaine, donc je peux être super réparé, et je vais apporter des bonbons et même extra des bonbons parce que ce était ridicule. Mais vous les gars êtes grand, et ont une semaine géniale.