ALLISON Buchholtz-AU: Tot el dret de tots. Benvingut de nou a la secció. És la nostra penúltima secció. És molt trist. No sé el que faré sense veure que vostès tots els dilluns. Jo crec que hauríem de sol-- Potser podríem només complir aquí i tenir el sopar o alguna cosa així. No ho sé. Vaig a portar el menjar al seu lloc. Ens limitem a parlar. Però sí, la setmana que ho farà ser la nostra última secció. En aquest sentit, vostè té una prova la propera setmana. Sé que em vaig oblidar de fer el meu, com, dues setmanes d'anticipació la setmana passada, però espero que vostès sabia que això passaria. Esperem que aquest és un dels últims exàmens parcials per a vostès per al semestre. Però va a cobrir tota la material que hem repassat. Així que no és com vostè pot oblidar uns quatre bucles o variables. A causa de que vam aprendre aquells en el principi, aquests són, òbviament, joc just per al seu examen. 

Serà el mateix format, el mateix longitud, de manera que ja estan acostumats a això. No serà codificació per problemes a les mans, potser una mica de vertader o fals, potser una mica de resposta curta. Pel que ha de ser familiaritzar-se amb el format, especialment si pren les proves de la pràctica. Però com ja he dit aquí, és acumulatiu, però definitivament estem estarà centrat en coses de la sisena setmana en endavant. Per tant, estem probablement no va preguntar sobre quants bytes es troben en cada tipus o aquest tipus de coses, però probablement serem interessats en coses com llistes enllaçades, o diferents estructures de dades, o algoritmes diferents que ja hem parlat. Així que assegura't que estàs realment sobre ells, i si necessita cap recurs, aquí hi ha un munt de recursos. M'acabo de donar classe d'una llista ràpida allà. 

La setmana que serà qüestionari revisar durant aquest temps. Així que si vostè té alguna pregunta o temes específics, coses específiques sobre el qüestionari que vol anar, si us plau enviar a mi abans d'hora perquè pugui tipus de preparar algun material per això. I a més d'això secció de revisió, anem a També se sosté el curs de tota la revisem com ho vam fer l'última vegada. I serà fet per la mateixa gent. No sé si això fa que sigui millor o pitjor, però serà jo, Hannah, Davan, i Gabe nou. Així que si vols venir a veure tots nosaltres bromes entre si i caminar a través de concurs opinió, hauria arribat a que dilluns que ve també. Així que vas a tenir un embús dilluns ple d'opinió concurs, la qual cosa és bo perquè llavors vostè té dimarts per processar a través de tot. 

Però sens dubte fer comprovar aquests recursos. Study.csv.net és, amb molt, em pensar, un dels més útils, sobretot perquè té una gran quantitat de codi d'exemple, té tots els Power Points amb totes les notes sobre ell, que són realment el que més em baso dels meus materials de la secció de. Si hi ha alguna cosa en l'anterior seccions que jo pugui haver enviats que potser no tingui aconseguit, només fes-m'ho saber. Com a exemple de codi de la setmana passada, si algú no va aconseguir que, m'acaba d'enviar per correu electrònic o venir a parlar amb mi, i m'asseguraré que vostè rep que. 

Així que amb això, avui anem estar parlant de JavaScript. Així que aquí estem Tommy, qui era jo només parlar amb vostè ahir a la nit. Estimo Tommy. JavaScript és el seu favorit llenguatge, com ell diu aquí. Van a tractar i et diuen que és no és el millor, i van a estar equivocat. Així que Tommy és un mestre JavaScript. No estic molt al seu nivell, però jo estava com, "Tommy, com puc ensenyar aquests nens de JavaScript? " Així que em va donar alguns consells, per la qual espero que funcionen. 

Així que un parell de coses que ha de saber és que JavaScript és un script del costat del client idioma, per la qual cosa PHP és una cosa que considerem més del costat del servidor, es carregar al servidor, compilat i executat allà. Aquest s'executa en la seva pròpia màquina. D'acord? Així que vostè càrrega alguna pàgina JavaScript i s'executa al sistema. La sintaxi és molt similar a C i PHP. Anem a anar a través de alguns exemples de JavaScript, i vas a veure que el forma en què parlem sobre les variables, bucles, i les condicions són molt similars. D'acord? El fet que són tan similars és probablement va a disparar alguns de vostès fins, en alguns casos, només perquè podràs incorporar una mica de C on no hauria d'estar. Potser vostè tracta d'escriure alguna cosa quan no hauria de ser escrit. 

I en això, una cosa és saber és que JavaScript és un tipus dinàmic llenguatge, com PHP. Així que si vostès recordin de secció de la setmana passada, quan érem classe de fer nostre curs accelerat PHP, vam veure com una cadena d'un podria ser convertit en un int un, i així successivament. El tipus de variables es determinen en temps d'execució, pel que poden canviar amb el el curs del programa, i de la mateixa manera que mai realment declarar tipus de variables de PHP, estarem fent el mateix cosa aquí, on no estem realment el control dels tipus de les nostres variables, per així dir-ho, com ho fem en C. 

I després una cosa que és bastant cool és que pot error comprovar a través de la consola, amb aquesta gran funció console.log, que permet imprimir diferent variables o els objectes que anem a parlar. Igual que la setmana passada quan estava com, "utilitzar aquesta funció," amb abocador del seu conjunt de processadors aquesta és una funció que voleu utilitzar, console.log. Em va sorprendre la quantitat de estudiants en horari d'oficina no sabia sobre la funció de bolcat. I jo estava com, "nois, aquesta voluntat fer la seva vida molt més fàcil ". 

Molt bé, així que era una mena de només una cosa breu, com sempre, tenim exemples. Sé que vostès estimen els. Així que aquí està un exemple d'una molt presentar aquí senzilla JavaScript. Així que només crearà aquest pop-up que diu: "Hola món", quan entrar a la pàgina, però anem tractar de caminar a través d'això una mica. Així que, òbviament això és només com el seu index.html normal. Així, només la nostra plantilla normal d'aquí, i tenim HTML, tenim el nostre cap, i igual que amb CSS, com inclòs algun arxiu fora, oi? Tenim alguns script type text que està JavaScript. I la font és hello.js, que és aquí baix. Aquest és l'arxiu complet de hello.js. I després tenim alguns títol i una mica d'HTML cos que en realitat no importa. 

El que passa és que quan carreguem aquesta pàgina, s'executa automàticament aquest script. D'acord? Així JavaScript serà executar automàticament. Llavors, què va a fer, va anar immediatament i executar això. I es dirà, "alerta. Hola Món. " Quina és la funció d'alerta que en realitat genera aquesta casella. D'acord? Així que és una cosa de tots els abasten. No hi ha res extra que teníem fer, a més de només alerta, i després el que voldríem dins del nostre quadre d'alerta. D'acord? Així que això és només una super simple exemple del que el JavaScript. 

Un dels molt cool coses, com veurem, és que et permet JavaScript per manipular a les seves pàgines web, sense haver de ells recarregar cada vegada. Així que si vostè want-- per exemple, si que planen sobre alguna cosa, si vostès alguna vegada han vist com barres de menú, o quan es passa sobre alguns tema, apareixerà un menú desplegable, això és perquè de JavaScript. D'acord? Així que vostè no està recarregant la totalitat La pàgina d'aconseguir aquest menú aparegui, només estàs buscant alguna específica acció que l'usuari ha pres, que es diuen esdeveniments que anem a arribar en, i una vegada que vegi que vostè diu, "OK, editar alguna cosa en aquesta pàgina i fer que es vegi diferent, però només modifica aquestes coses específiques. No torneu a carregar tot l'assumpte ". Així que en realitat és molt més agradable, i vostè no ha de tornar a carregar les pàgines, i és realment genial. 

Declaracions tan variable, perquè pugui espècie de veure, Em vaig posar a la part superior aquí, vagament escriu. Així que això és molt semblant a PHP. Nosaltres no necessitem dir-li JavaScript quin tipus estem esperant cadascuna d'aquestes variables sigui. Poden ser qualsevol tipus que volem. Així s'observa en aquest cas, declarem ells de manera molt senzilla, només amb "var" i després el que vulguem el nostre nom de la variable que sigui. Una cosa a tenir en compte és que quan es posar var davant d'un nom de variable, localment abast ella. D'acord? És totalment raonable per a vostè tot sol esborrar la var i acabo de s és igual CS50, i això seria una variable global. D'acord? Així que vostè pot inicialitzar les dues coses, només depèn de com ho vols. Així que si estàs inicialitzar dins d'una funció, i desitja que la variable de quedar-se amb àmbit dins d'aquesta funció, vostè va a voler fer una mena var nomenar una variable, davant si ho vols un àmbit global, que pot simplement fer el nom de la variable i després el que vol és igual a. D'acord? 

Aquesta és una mena de cosa fresca aquí baix, perquè si ens adonem de la nostra variable b comença com a cert. I el que això pot does-- algú dir-me el que això fa? Així que tenim una mica d'alerta. Quin tipus de b estar al principi? AUDIÈNCIA: Boolean. ALLISON Buchholtz-AU: Boolean. Dreta. I després reassignar b a aquesta cadena, oi? Així que aquí, quin tipus de aib? Seria una cadena, oi? Quin és tan important avís és que en c, que Mai podria fer gairebé una cosa així. Hauríem de tenir una variable, projectar com una cosa més, potser fer alguna funció amb dos I, vaig d'un càrrec a un nombre sencer. Però si ens adonem que aquí, b molt fàcilment canvis de tipus. 

AUDIÈNCIA: Esperar, el que només pot ser com, "fer b un enter?" 

ALLISON Buchholtz-AU: Sí. Vostè només pot reassignar ba un enter. 

AUDIÈNCIA: De debò? 

ALLISON Buchholtz-AU: Sí. I llavors seria un int. Així que les seves variables poden canviar al llarg el curs del programa també. No són estrictament mecanografiades. Està molt lliurement mecanografiada. D'acord? Bàsicament les variables poden fer el que volen, com quin tipus de vam veure amb PHP. Ells poden fer algunes coses boges, per la qual és important ser molt acurat. Nom seves variables bé. Si no, ho fa de sobte que serà així, "Espera, vaig pensar que això era un cadena, i ara és un int, i jo no estic molt segur el que està passant aquí ". Així que això és només un exemple simple de mostrant com una variable pot fàcilment canviar el seu tipus més el curs d'un programa. 

D'acord. Així que això s'ha de veure súper, súper familiar. Així que aquests són els nostres llaços en JavaScript. Són exactament els mateixos, excepte per en lloc de quatre int i és igual a zero, poguéssim dir var i és igual a zero. I llavors podríem tenir la nostra mateixa espècie l'estat, mateix tipus d'actualització, i més plus funciona bé. Així quatre potes són els mateixos, estones són els mateixos, i fer mentrestant que són exactament els mateixos. Mateix tipus de format general. Notem, quatre, entre parèntesis, suports, tot és el mateix. També hi haurà un punt i coma quan arribem a l'exemple de codi. Ja veuràs que és bastant el mateix que c. 

Per declaracions de funcions, de nou, molt similar. Tenim alguna funció que només diu que és una funció, i després el nom del nostre funció, i les entrades. I de nou si ens adonem, ens tenir cap tipus aquí en absolut. Dret? No tenim res dient que aquests han de ser sencers o dobles, o flotadors. Podrien ser el que vulguin. L'important és adonar-se que hem d'escriure la funció per endavant deixar que JavaScript sap que això és en realitat una funció. 

Així que això és només una simple suma funció que retorna XOY, i després el que és també fresc és que en realitat es pot assignar una funció a una variable. Així que en aquest cas, la suma és ara la funció que realment fa suma. Així que si vostè nota aquí, tenim funció, el nom de la funció, les entrades. Dret? Aquí només tenim la funció i les entrades. Això es diu una funció anònima. I això és una cosa que ha de ser nou a la majoria de vostès, si no tots vostès. Així que bàsicament el que això significa és que no ho fem necessitar nom del nostre funció en aquest cas. Només podem dir: "Està bé, vaig a tenir aquesta funció que s'executa, aquí són les seves entrades, i aquí està el que va a fer. " I sobretot quan s'està assignant una funció d'alguna variable que vas a manipular, No necessàriament necessita nomenar perquè vas a estar referint a ella per aquesta variable nom, no per qualsevol la funció es diu en realitat. D'acord? 

Així que si veiem aquí, tenir alguna variable suma ara que és igual a la suma de tres i cinc. I que anava a aconseguir això. I això només tindria alguna alerta, 3 més 5 és igual a la quantitat. Aquest plus serà simplement concatenar qualsevol que sigui la nostra resposta va ser a la cadena. També fresc, més pot concatenar cadenes. 

Per JavaScript, com amb PHP, HTML, CSS i com hem dit, molts d'ells estem com prendre les rodes d'entrenament fora d'aquí i vostès tenen una gran quantitat dels coneixements com entendre realment aquestes coses. Són una mica diferent, però no són tan aliè i que no pot buscar a Google coses o mirar cap amunt en línia amb les escoles w3. I realment estem esperant que nois a, una mena d'experiment i aprendre pel seu compte. Així que, sé que això pot semblar una mica menys complet que algunes de les coses c que fem, però això és en realitat per una raó. Però espero que no sigui massa diferent, i no és aclaparadora. 

Així arrays en JavaScript de nou molt, molt similars. Dret? Tenim certa matriu de variables això és igual a claudàtors buits, i això és només un conjunt buit. Això és sovint anomenat notació literal de matriu. Això és només una cosa en diem. Si veiem la matriu de dues aquí, tenim alguns literal de matriu que té tres elements, Oi? I després tenim alguns var tercer element que és alguna variable que només celebrarà aquesta cadena, JS. 

Els elements, bons a notar, estan separats per comes, com és d'esperar. I també es pot accedir a aquests, com ho vam fer en C, amb aquesta notació índex, oi? Tan diferent de PHP Ara, anem a tornar a només tipus de referència a les coses per índex. Igual que C, és també l'índex zero. Em sento com que seria molt cruel si de sobte van fer JavaScript 1 índex, i que havia de completament repensar la manera de pensar sobre les matrius. 

Una cosa interessant és que, en lloc d'haver de fer-- si mai volia que la longitud d'una matriu, potser vostè iterar a través d'ell fins que trobi un fi, o vostè acaba de saber el que és. Com que JavaScript està molt fluixa en més maneres que només tipus, com veiem aquí, només podem fer que aquesta matriu més gran perquè decidim. Si notem matriu 3 té tres coses per començar, però després, de sobte, estem com, "oh, és broma. De fet, estem passant perquè sigui 101 coses. " Així que si mai vols saber la longitud real de la matriu, vostè ho fa així. I anem a veure molt d'aquesta notació en els exemples, però amb JavaScript que és típicament el objecte que estàs parlant dot qualsevol tipus de funció vol que s'apliqui a aquesta. D'acord? 

Així que en aquest cas, el nostre objecte és la matriu de dues, i diem que volem que el longitud de matriu de dues. Així que això només diu, com la longitud d'això. I això va a tornar la seva longitud. També alguna cosa a tenir en compte és que si ens adonem dels nostres arrays, a diferència de C, que no tenen a ser tots del mateix tipus. Això és molt més semblant a PHP. Javascript és bàsicament la mateixa que aquesta interessant barreja de la C i PHP. Així que entrarem en això. Per ara, anem a assumir que les matrius són bàsicament com arrays de C, en què que s'indexen zero. OK, així que això és tot. També es pot simplement estendre 01:00 matriu a qualsevol índex que desitja. Mentre que això probablement SEG en fallada amb vostè o li donarà un cert error, Javascript és com, "nah, està bé. Jo m'encarrego. Anirem directament on desitja ". 

OK, així que els objectes són molt importants. Vostès va a utilitzar una gran quantitat d'aquests en el seu conjunt P, si no recordo malament. Així que el que aquests són similar a la de C són estructures. Així que vostè pot pensar quan sobre-- anem a un exemple correcte després d'això crec que va a fer molt més sentit-- però bàsicament utilitzem objectes a sindicació d'informació dels cursos relacionats. Quan parlem sobre estructures en C, sovint parlar d'un estudiant que tenia algun nom, Identificació, casa, ja saps, la concentració. I això és una cosa del mateix que utilitzem objectes per aquí. És només per organitzar informació similar. 

També es pot pensar en ells com més similar a les matrius associatives en PHP. Així que aquesta seria una espècie de la cosa on tenim alguna clau amb algun valor, molt similar a PHP. Així que vostè pot inicialitzar alguns objecte buit, com veiem aquí, només amb claus. Arrays també ho són entre claudàtors. Objectes buits són claus. Bé distinció a tenir. I aquests són només dos diferents maneres de definir les propietats. Així que això és una mena de molt més d'una manera que és similar a PHP, amb el nostre matrius associatives, amb la clau, i el nostre valor, mentre que aquesta és-- podràs veure això molt més en JavaScript. Això tendeix a ser la convenció. I de la mateixa manera que ho vam fer matriu de dues longitud de punt, això és a dir, "OK, dóna'm això atribut d'aquest objecte ". Dret? Així que de la mateixa manera que era com, "dóna'm la longitud de l'atribut de matriu de dues " això està dient: "dóna'm una mica propietat del nostre objecte buit ". O en aquest cas, estem assignant-li qualsevol valor aquí. Però també es pot accedir d'aquesta manera. 

I llavors aquí això és només que mostra dues alertes diferents. Així que això mostraria les alertes seria exactament el mateix, és només dues formes diferents de accedir a l'element que volem. Té això sentit per a tothom? Em sento com aquest probablement té més sentit, només perquè estem sortint de PHP. Però a mesura que fem més exemples, aquest és, literalment, exactament de la mateixa. Molt d'això s'acaba de canviar en la sintaxi. 

OK, així exemples. M'encanta exemples. Així que aquí hi ha una certa CS50 variable que és un objecte, i emmagatzemem tot això informació sobre el mateix. Així que tenim per descomptat, instructor, TFS, conjunts de processadors, i gravades. Llavors ens adonem que són gairebé tots de diferents tipus. Dret? Així, els objectes poden emmagatzemar atributs de diferents tipus. Podem pensar en això- és molt similar a la nostra matriu associativa en PHP. Així clau, valor, clau, valor, clau, valor, així successivament i així successivament. El que també és interessant de la mateixa manera que podem tenir dins d'arrays matrius, també podem tenir objectes dins objectes o arrays dels objectes. Vostè està en realitat mai limitat a només una sola de les coses. Podem arribar molt Inceptionesque, just seguir per la cau del conill allà. 

Així que si ens adonem, ens tenir algun cas que és una cadena, l'instructor que és una cadena, i la matriu, un int i un booleà. Així que totes aquestes coses diferents. 

Molt bé, així que, tenim un altre. Així que en aquest cas, tenim una matriu d'objectes. Així que igual que un objecte pot tenir una matriu en ella. També podem tenir una matriu d'objectes. Això pot ser útil per pensar semblant a l'espècie de la forma en què teníem un hash taula, vam tenir una matriu de tots aquests diferents tipus d'estructures que eren punters a diferents nodes i altres coses. Però en aquest cas, tenir una matriu d'objectes. Així que això és com un array arrays de associatius. Així que tenir una mica de primer element ser l'objecte amb el nom de James i albergar Winthrop. 

Vostès podran recordar una cosa molt similar a aquest amb el seu últim conjunt de processadors, on si treure alguna cosa de la base de dades, el primer tipus de cosa en el seu conjunt era tota la informació sobre el primer usuari que va conèixer a ella, i després calia índex en què per aconseguir la seva acció o la seva memòria cau o el que sigui. Així que això és molt similar cosa, només una mica de canvi en la sintaxi, el canvi poc a les paraules que fem servir per descriure-les. 

Així que si volíem, algú pot dir m'ho aquesta alerta agradaria fer aquí? O el que aquest trosset de codi faria per nosaltres? AUDIÈNCIA: Et donarà tots els noms. ALLISON Buchholtz-AU: Dret, per la qual cosa seria simplement alertar amb tots els noms perquè seria anar a través de casa i, pel que començaria a zero. Així que em deia: Acceptar que estem buscant en aquest primer objecte, el qual és el primer espai en la nostra matriu. I diu: "dóna'm la atribut, el nom d'aquest objecte ". Així que anem allà, ens exploració, ens agradaria trobar el nom, i ens agradaria imprimim James, Molly i Carl. Qualsevol pregunta fins ara? JavaScript desgràcia vostè serà fent un munt de mirar cap amunt en el seu pròpia, esbrinar la sintaxi, bregant amb ell. Però per descomptat que estic sempre aquí, horari d'atenció és sempre aquí. Jo podria ser el dimarts d'aquesta setmana. Així que si vostè està allà, vostè pot venir a visitar aquesta setmana. Seria genial. 

OK, així DOM és el Model de document-Object. Així que això és només una forma que ens agrada pensar sobre com el nostre HTML i tot en el seu interior s'organitza. Això és molt una cosa que probablement plantejaran en el seu concurs. Sé que el meu any, era com aquí està Arxiu HTML, seguiu els passos de la DOM per a això. I que acaba d'omplir en les coses petites. Aquests han de ser punts fàcils amb sort. Esperem que vostè veure-- 

AUDIÈNCIA: [inaudible] 

ALLISON Buchholtz-AU: Així vegi aquest arbre aquí? 

AUDIÈNCIA: Sí. 

ALLISON Buchholtz-AU: Així li preguntaran ús per omplir el que es coneix amb el cos. Potser per sota del cos, tenim alguns divs o que tenen alguns paràgrafs, i li demanem que completi un arbre molt semblant a això. Així que estarem caminant a través d'ella. Així el Document-Object Model és només una forma estructurar i pensar sobre el nostre HTML gràficament. I també quan arribem en més JavaScript que serà el de manera que en realitat manipular diferent elements de la pàgina. Necessitem una manera d'accedir a cada de les coses en el nostre HTML, i pel que aquesta ens dóna una molt forma estandarditzada de formigó a través de diverses pàgines web per fer això. 

Així que si només caminem per això aquí, és clar nostre document és com tot el nostre arxiu. Això, òbviament, té sentit que és el més alt, i després tenim el nostre HTML real, el que correspon a aquesta etiqueta aquí. A més, si en el guió teves etiquetes correctament, llavors la creació d'aquest arbre DOM es converteix en super simple. Així que tenim una mica de cap aquí. Tenim un cos que veiem plançó fora d'HTML, és per això que tenim el cap i el cos. Dins del cap, tenim alguns etiqueta del títol, una etiqueta de títol del final, així que sabem el que ve després del cap. I dins de la nostra etiqueta de títol, tenim hola, món. D'acord? Així que aquesta és tota aquesta branca esquerra. I després de la branca dreta aquí, veiem que tenim HTML, Acceptar que hem fet aquesta part del cap, estem mirant només al cos, així que tenim alguna àrea del cos. I dins d'això, l'única El que tenim és hola, món. D'acord? Si tinguéssim coses com alguns suport de p i després hola, món, i després una altra suport p d'adéu, món, tindríem dues bombolles sortint d'aquí. Com que els dos estan sota el cos, però són paràgrafs separats aquest cas. Definitivament hi ha pràctica que en proves anteriors, així com un munt en línia sobre el mateix. Acceptar així, això només permet nosaltres veiem tot molt bé i manipular coses molt sistemàtica. D'acord? Sabem exactament com recórrer a través d'aquest arbre, així que sabem el que volem accedir. 

Acceptar el que és per això que volem per tenir aquest tipus de model, perquè puguem usar coses com aquesta, i entenem el que volen dir, i estan estandarditzats en totes les coses que fem. Així que el títol del document de punt és just el títol de our-- tots aquests són bastant explica per si mateix, M'agrada pensar. Tres per a la primera exemples s'acaba dient, "Està bé, només dóna'm la títol d'aquesta pàgina web ". Així que li donarà el que correspon al títol. 

Document dot cos es va a donar tot el que és dins d'aquestes etiquetes del cos. Així que vostè pot manipular això. I dot dot cos document Introdueix HTML és molt fresc, i potser no és com super intuïtiu, però el codi HTML intern correspon a aquest dret aquí. Així que si mai vols manipular el text en una pàgina, normalment vas a estar fent alguna cosa amb dot cos HTML intern. D'acord? Així HTML intern tendeix a referir-se a el que és en realitat entre aquestes etiquetes. D'acord? I llavors funcions útils. Així que si volia arribar qualsevol d'aquests, qualsevol element, tenim alguns Aneu, classe nom, o el nom de l'etiqueta. Això és molt similar a la coses que van fer amb CSS, oi? On tenim alguns selectors que correspondre tant a una etiqueta, una classe que ells, o un identificador donem. Això és molt de la mateixa manera. Si vostè té alguna cosa a té certa classe de gos, i dius obtenir elements per nom de l'etiqueta, i poses gos en allà-- o ho sento, nom de la classe. Vostè pot posar punt en allà. Es va a tornar tots els elements a vostè que tenen aquesta classe. Així que vostè pot manipular només aquells. De la mateixa manera, potser només voler manipular alguns capçalera, per la qual alguns encapçalat h1, igual que ho vam fer. Vostè podria fer arribar els elements per etiqueta nomenar, perquè h1 és un nom d'etiqueta. I de la mateixa manera, si vostè vol aconseguir una cosa única, pot fer-ho etiqueta get. Obtenir element per Id. I en realitat són un munt d'aquests. Aquests són només com tres de molts. Així que si vostè va en línia, com Vaig a encoratjar tu per fer, i fer alguna cosa investigació pel seu compte, Definitivament el recomano buscant en tot això. Podrien ser súper útil, especialment quan vol només tipus de manipular coses molt específiques sense tenir anar a través i tractar per analitzar fos tot. 

OK, així que l'últim és JavaScript esdeveniments. Així que quan estava parlant abans sobre anar a un lloc web, i quan es passa sobre alguna cosa, o el punter del ratolí passa per sobre d'alguna cosa, una altra cosa succeeix. Això és el que ens agradaria pensar com un esdeveniment. Així que el que hem de poder ser útil aquí és onclick. Així que el meu era en vol estacionari, el qual, estic bastant segur, és només en vol estacionari. També un munt d'aquests que es pot buscar. Hi ha una llista completa en línia de les diferents coses que es pot escoltar. 

Però els esdeveniments de JavaScript són bàsicament respondre a les coses que el seu usuari està fent. Dret? Així que el seu usuari fa alguna cosa, això és un fet, i JavaScript respondrà però desitja que ho faci. Es respondrà en conseqüència. Així que en aquest cas, tenim alguns onload finestra de punt. Així que el que diu és, "esperar fins carregat de la finestra ". D'acord? Així que quan tot està carregat, onload, a continuació, pot executar aquesta funció. Així que quan tot està carregat, vas tenir algun botó de cerca que pateix és un element d'identificació, i s'imprimeix el que element és que el botó Cerca. I després tenim aquesta variable, diem: "Està bé, onclick". Així que quan escoltem un clic al botó Cercar, executar aquesta funció, que és una alerta, feu clic al botó Cercar. 

Llavors, què passa és-- aquest és un bon poca representació gràfica aquí. Així que la nostra càrrega de documents, aquesta és la nostra onload, ens trobem amb la nostra Cerca botó, que és això. Estem buscant al nostre botó Cercar. I després, quan el botó de recerca és es fa clic, es correspon amb la dreta aquí. Onclick. Llavors, finalment, vam alertar als nostres usuaris, que és aquesta última línia aquí. D'acord? Així que cada un d'aquests quatre passes només correspon a les quatre caixes allà baix a la part inferior. Té això sentit per a tothom? 

I llavors una cosa que jo només vaig esmentar molt, molt breument, que jo animo nois a anar a buscar més a és jQuery, que és només una biblioteca que es construeix a la part superior de JavaScript. És molt útil, ja que amb la majoria de les biblioteques. Hi ha un munt de funcions. Així que si mai hi ha alguna cosa que que vols fer en JavaScript el seu primer instint no ha de ser pensar de, "quina funció ha de Em codi? "Que hauria de ser, "Déjame veure algú és ha fet això per mi ". Com que nou de cada deu vegades, algú ho haurà fet ja, i probablement ho han fet millor. Les persones passen molt de temps fent això, i JavaScript s'utilitza molt àmpliament, perquè les persones estan constantment tractar de fer-ho millor. I jQuery té un munt de funcions que probablement serà útil per a vostè en el seu projecte final si ets fer qualsevol cosa amb el disseny web. Com m'agrada dir, "treball més intel·ligent, no més difícil ". Si vostès fan això, serà gran. Quan estem en el hackathon no ho faig vull que siguis tot estressat. Vull que siguis com: "Tinc això. jQuery té la meva esquena. No necessito escriure aquestes funcions ". 

Pel que només dues coses Recordo, vaig a deixar que vostès miren més en jQuery pel seu compte. Tot el que vaig a dir és que fa algunes coses bastant impressionants i pot fer la seva vida molt més fàcil. Però el que vol tenir és qualsevol arxiu que vas a utilitzar-lo en, vostè va a voler aquestes dues línies. Vostè va a voler la guió de js jQuery punt js. I en realitat la seva font serà una mica d'URL. Si es busca a Google jQuery, Google en realitat hi tots els arxius per a vostè. Així que deu URL d'entrada que al seu lloc. Acabo de posar això aquí per motius de simplicitat. Tot això significa és on trobar la seva llibreria jQuery. És enorme, de manera que no vol allotjar en el seu propi ordinador si pot evitar-ho, és per això que tendeixen a només cal posar a la URL de Google que acull tots aquests arxius per a vostè. D'acord? Es busca a Google, t'ho prometo que hi serà. 

I llavors tot el Arxiu JavaScript que ets utilitzant, així que això és només alguns externs JavaScript arxiu que utilitzeu. De la mateixa manera que ens relacionem en el nostre CSS arxius, aquest és el mateix tipus de coses. Això només vincula l'arxiu on la teva Javascript és. I tinc alguns exemples amb un simple JavaScript. Així que anem a anar a través d'ell. I després, en el seu índex de JavaScript que és el seu arxiu JavaScript aquí, això és una espècie de l'embolcall que té per jQuery. Ja gairebé 99.9 per cent del temps va tenir això en el seu arxiu index.js. Perquè el que diu és, "No executar res fins que el seu document és en realitat llest ", que és exactament el que vols. Perquè si el document no està llest, i jQuery comença a fer les coses, és només un desastre. Així que sempre vull tenir aquest embolcall. I llavors, per les coses que hi van, em deixarà al propi fullejant els seus nois. 

OK, així que hi ha alguna pregunta dreta ara sobre el Javascript al general? O el model DOM? Si no, tenim alguns fresc exemples que podem anar a través, que vostès em pot ajudar codi. Però jo també seré super agradable, i si no vull dir res per a ells, això està bé. Puc també acaba de donar exemples. Però res en el PowerPoint abans de seguir endavant? Fresc. 

Em sento com vostès necessita energia. Així que crec que començarem amb el meu exemple del partit primer. Tenim tres exemples, vostè té la seva opció. Així que tenim rellotge, cap a on anem per implementar un rellotge real que és va a actualitzar el pas del temps. Tenim aquesta gran funció Twitter. Esto-- saps què aferrar-se. Anem a fer que això desaparegui. Bam. D'acord. 

Tenim aquesta gran funció Twitter aquí, que-- Ho sé, oi? Serà gran. Estàs emocionat nois? Això va a comptar el nombre de caràcters que li queden, així que si escric en aquest moment, òbviament encara diu 140, però sabem que no és el cas. I després amb la nostra última aquí, feu clic aquí a la festa. ¿Què passarà és quan fem clic, el fons de canviarà els colors. Així que vostès tenen les seves opcions de quin d'ells vol fer primer. Et prometo que ho porto molt fàcil en vostè. Em sento com tot una mica de només molt baix clau en l'actualitat. Així que et vaig a caminar a través de la forma anem a implementar tots aquests. Si vols sonar en, això és genial, però jo sentir que tothom està una mica cansat. Així que només et vaig a caminar a través d'aquests exemples. Tenim una cosa que ens agradaria fer primer? Qualsevol persona? Sense preferència? D'acord. Saps que? Som a la festa. Sento que vostès necessiten un poc-- així, farem una festa de primera. D'acord. 

Així que el que tenim aquí-- això és no se suposa que ser-hi. Ara que és bo. D'acord. Així que el que tenim aquí és només una simple pàgina HTML que vostès han d'estar tots súper coneix dels seus dos últims conjunts de processadors. tenim el nostre tipus doc aquí. Tot món pot veure? D'acord. Fresc. Tenim el nostre HTML òbviament. Tenim una mica de capçalera que és vinculat a un full d'estil que acaba de fer la meva font agradable i gran i en negreta. Així que no et preocupis per això. 

Tenim un cos amb un fons Aneu, OK? Perquè serem canviant el fons. Així que quan estem canviant la fons del nostre cos, que recordem de fa dues setmanes quan es tracta de pàgines web. Així que bo tenir això. I tenim alguns Aneu és igual a festa. Aquest h ref lliures només vol dir que que va a anar a la mateixa pàgina. I feu clic aquí a la festa, que és per això que quan ho fa clic, ha de canviar els colors, per sort. 

I després tenim una seqüència de comandaments aquí que és simplement vinculats a aquest partit js dot arxiu, que està buit perquè no hem fet res encara. I és tan trist. Però molt aviat, que canviarà colors, i serà impressionant. 

Així que només vaig a caminar nois a través de com podríem abordar aquest. Així que el primer que el que es vol fer, si estem canviant el fons de el cos, la primera cosa que pot ser que desitgi a fer és realment agafar el que el cos és, oi? Així que volem tenir suma, el nostre fons, i si et fixes, Acabo automàticament comenci a escriure. No hi ha res especial que necessita fer per als nostres arxius JavaScript. Puc començar a declarar variables, i declarant funcions aleatòries. I és la forma molt més lliure. És com amb C, vam donar a tots aquestes regles dures, i que van créixer, així que estem com, "anar endavant. Ser lliure. Fes el que vulguis ". I això és el que JavaScript està. Així que tenim alguns antecedents aquí. Amb el nostre model DOM, sabem que pot fer arribar el document dot element, i si ens adonem que aquí, el nostre cos té un identificador. Dret? Així que podem fer arribar el document per Aneu, i aquí és simple. Quina és la nostra Aneu que volem aquí? AUDIÈNCIA: Antecedents. ALLISON Buchholtz-AU: Antecedents. Perfecte. I punt i coma al final. Això no ha desaparegut encara. Vostè encara necessita els seus punts i comes. D'acord. Així que aquesta és la nostra primera. I quan fem clic en alguna cosa, vol que passi alguna cosa, no? Així que el que es vol alguna variable això s'espera d'un clic. El que farem és que anem a fer la nostra relació més semblant a un botó. Així que anem a tenir algun botó que és igual a documentar dot obtenir element d'identificació. I si jo estic parlant de la feu clic a enllaç o feu clic aquí per a la festa enllaç, què podria meu Aneu ser aquí? Part. Correcte. Acceptar no està tan malament fins ara. Tothom obté el que estem fent? 

OK, així que ara tenim la nostra botó, i volem que les coses canviïn quan fem clic. Així que si ens recordem del nostre PowerPoint, cosa molt simple que podem fer és només punt botó onclick, oi? I això serà igual a alguna funció. Aquesta és una funció anònima. I això només com-- realitat estic va a fer això una mica més gran. 

Així que el que acabo de fer aquí és el que estic dient, OK, quan fem clic nostre botó, que és aquest enllaç que només ens referim, anem a executar aquesta funció anònima. No necessitem cap input. No ens importa el que diu l'usuari. En fer clic, estem va a fer el que vulguem, que és canviar el color de fons. D'acord? Així que és per això que no tenim entrades, només tenim aquesta funció anònima. I ara estem en realitat va escriure aquesta funció. 

Així que hi ha un munt de maneres que vostè podria generar un color aleatori. La forma en què ho vaig fer va ser per generar tres nombres aleatoris i convertir-los a una triple RGB. Així que això només mostra alguns fresc coses que si vostè és com, "oh, Necessito generar un atzar nombre. "si el Google, això és el que pots trobar. 

Així que tenim tres diferents coses, var, no de nou vermell, verd. Dret? Així que aquests són els tres coses que componen un color. Blau, vermell i verd. Fresc. I el que podem fer és que sabem que ha d'estar entre 255, i si mires una mica generador de nombres aleatoris, vostè podria aconseguir alguna cosa com matemàtiques punts aleatoris, que si es mira això torna a algun nombre entre zero i un. D'acord? I què números de fer el nostre Triples RGB van entre? Zero i què? Què poden anar fins? 255. Així que si les matemàtiques dot atzar va entre zero i un, ¿Com podríem voler convertir això? AUDIÈNCIA: Temps? ALLISON Buchholtz-AU: Sí, exactament. Així que el temps és 255. 

AUDIÈNCIA: [inaudible] És com [inaudible]. ALLISON Buchholtz-AU: Matemàtiques punts aleatoris. AUDIÈNCIA: Cool. ALLISON Buchholtz-AU: Sí. JavaScript només té cura de tu. D'acord. Pel que podem fer això per tots els aquests. Dret? Matemàtiques dot vegades a l'atzar 255. Entès. Fresc. Així que la cosa és que això pot no tornar un enter. Dret? Potser arribem algun nombre entre zero i un, i que fa que sigui lleugerament apagat, i els nostres RGBs no poden ser carrosses. Han de ser sencers. Així que si has provat això, que probablement tenir un comportament erràtic. Seria una mica estrany. Així que el que fem és que volem fer assegurar-se que aquests s'arrodoneixen, i vostè podria arrodonir qualsevol manera. Vaig doblegar amb pis. Així que sempre vaig assegurar que arrodoneix cap avall. Però anar fora del simple que era tot just aconseguir un nombre aleatori, Com creus que podria pis aquest nombre? És molt similar. Alguna idea? Així que si l'atzar era només punt matemàtiques a l'atzar, pel que pensa vostè que faríem pis? Pis de punts de Matemàtiques. I també es pot fer el sostre de punts matemàtiques. Ronda és una espècie d'ambigua perquè no ho fa saber si per arrodonir cap amunt o cap avall arrodonir. Així que en general sempre fem matemàtiques pis de punt, sostre punt matemàtiques. Però honestly-- 

AUDIÈNCIA: La ronda pis sota? 

ALLISON Buchholtz-AU: arrodoneix pis baix. I això és només una elecció de la meva part. 

Així que ara tenim els nostres tres nombres que s'han generat de forma aleatòria, i el que farem ara és que estem només canviarà el fons. D'acord? Així que ja tenim la nostra tipus de fons emmagatzemada en aquest element denominat fons. Llavors, què et donaràs compte és que, si que va jugar una mica amb això, volem canviar l'estil. I això és una mena de cosa que vostè Google i esbrinar, com la forma de canviar el color. 

Però la forma d'accedir a aquest color és fons del punt de fons de punt de l'estil. Així que això està dient donat aquest objecte, fons, que es refereix al fet que element Aneu allà dalt, anem a mirar el estil dins de l'estil, anem a mirar al fons. D'acord? I si vas i veus això, que podria fer una mica més de sentit, però això és bàsicament dient, "Dóna'm aquest atribut molt específic del que he definit anteriorment ". Així que el que estem canviant a és alguns RGB, perquè té sentit. Estem utilitzant RGB triplica, oi? I nosaltres tener-- Vull assegurar-me que obtenir el nombre correcte de cites aquí. Així que el que fem és que tenim RGB, i anem A-- això és com concatenació, que és de color vermell. I després volem alguna coma. I llavors volem més de color verd, a continuació, alguns coma, i una mica de blau. 

Així que aquests avantatges només significar com concatenació. Així que això és només la creació d'aquest cadena que està passant dins de RGB. D'acord? 

AUDIÈNCIA: [inaudible], més després la d'un verd més després el vermell. 

ALLISON Buchholtz-AU: Sí, perquè vaig ficar la pota això. Està bé que un. Oh, espera. No. Perquè necessito per assegurar que em van donar tots aquests dreta. Així que vaig a explicar en Moment un. Verd, blau, perfecte. Ara he acabat. Jo crec. 

D'acord. Llavors, què és això, és que el fons serà fixat a una corda. Dret? Què és el que tenim aquí. Hi haurà algun RGB 255 comes 255 zero coma, o qualsevol nombre que tenir allà. Així que estem fent aquí, tenim una mica de corda. I el que volem fer, és que estem tipus de crear dinàmicament que quan realment executar aquest programa. Així que això és una mica de corda. Plus concatena amb el valor que el vermell té, que concatena amb una coma, que concatena es amb el verd és, i així successivament, i així successivament. D'acord? Fins al final, que és el el tancament de parèntesi d'aquesta RGB aquí. D'acord? 

Així que el que això va a generar algun comandament realment és a dir RGB de tres nombres que el fons s'estableix ara. D'acord? Així que anem a veure si això funciona. Espero que així sigui, perquè si no, jo seré molt trist. Oh, no. Acceptar, espera. Definitivament fons dot dot fons estil. Definitivament m'estic perdent alguna cosa només petita. No tens nois odien això? Quan és només una petita poc d'error? Fons Totpoderós. RGB. 

AUDIÈNCIA: [inaudible] ALLISON Buchholtz-AU: No. He intentat això abans de la classe. Tinc tot el que vaig fer abans classe per si jo estava com, "Espera, què vaig fer malament?" Perquè jo estava com, "Ho faré probablement espatllar això en algun moment ". Plus verd. Tot es veu com si fos concatenat correctament. D'acord. 

AUDIÈNCIA: [inaudible] 

ALLISON Buchholtz-AU: Oh, aquí ho tens. Això és el que necessitava. Mira això. Tiffany per rescatar. Perfecte. D'acord. Ara anem a veure si funciona. Déu meu. D'acord. Espereu. 

AUDIÈNCIA: L'espai després de la segona avantatge. 

ALLISON Buchholtz-AU: Quin? Oh, espera, espera. Desgast espai? 

AUDIÈNCIA: Segon més en la concatenació verda. ALLISON Buchholtz-AU: Oh. AUDIÈNCIA: No hi ha cap espai després que el més, si. ALLISON Buchholtz-AU: Vostè no cal que, però- AUDIÈNCIA: Oh, no ho fa? ALLISON Buchholtz-AU: Es veu bastant. AUDIÈNCIA: OK. D'acord. 

ALLISON Buchholtz AU: Anem a veure si això funciona. D'acord. Òbviament estic fallant en aquesta demo, que em recorda d'una conferència l'altra setmana, però sé que això funcionarà. Sé que això funcionarà. Tan a prop. Llevat que jo vaig esborrar accidentalment el meu guió en aquest cas. No, es tracta de punts de partit js. Acceptar aferrar-se. Vaig a copiar això, i estic també només va a esborrar tot, perquè tenia aquest treball abans. 

Et prometo que funciona. Si no, vaig a mostrar el que Tommy és. I allà. 

AUDIÈNCIA: Vostè està fent referència a les parts dot CSS, i és un punt js partit. 

ALLISON Buchholtz-AU: Ah, bé aquí és js punt de partit. Bé, què he fet diferent? Bé, anem a veure si això funciona ara. Bam. Per tant, jo no sé el que vaig fer diferent, però això és el que ha de succeir. Una mica fred. He fet clic en aquest, com, per sempre. Però podem intentar veure el que vaig fer diferent que aquest tenia. Jo no sé vostès, però això veu bàsicament el que acabo d'escriure. Probablement hi va haver un que falta punt i coma falta en algun lloc és el meu. En realitat després, crec que m'estava perdent un punt i coma aquí realment. Però jo no podia veure-ho perquè era fora de la pantalla. 

Però si ens adonem, això és bastant molt exactament el que acabo d'escriure. Crec que probablement la part més difícil de això és només una mica d'aquesta cosa aquí, la comprensió el que està fent allà. Aquest tipus de coses que s'aprenen realment només buscant a Google i honestament tractant. Si creus que hi ha alguna atribut, probablement ho és. Així que provar-ho. Mireu el que passa. Com ja he dit, hi ha una gran quantitat de l'experimentació amb el llenguatge Java, i PHP, i tot el que coses, i especialment CSS. Aquesta és l'única veritat forma d'entendre. 

OK, així que després d'aquest fiasco amb el partit js punt, tenim dues opcions. Tenim rellotge o Twitter. Són alhora interessant. Potser no és tan divertit com partit, que tenia una mica d'efecte estroboscòpic fresc cosa al final. Vostès tenen alguna preferència? AUDIÈNCIA: Rellotge? ALLISON Buchholtz-AU: Rellotge? D'acord. Fresc. 

Així que de nou, tenim la nostra arxiu JavaScript buida. I com veiem aquí, tenir una cosa molt simple d'HTML. Tenim el nostre full d'estil, que només Formats del que ha de ser similar. Tenim el nostre div amb un identificador de rellotge, que només diu, "això ha de ser un rellotge." I tenim el nostre enllaç en el nostre arxiu JavaScript que en realitat va a generar el nostre rellotge per a nosaltres. Perquè el bo, és que es pot establir JavaScript per actualitzar automàticament si mateix. D'acord? Així que en lloc d'esperar que el usuari per colpejar Actualitzar en una pàgina de manera que vostè pot aconseguir hora actualitzada, JavaScript pot actualitzar però li agrada. 

Així, igual que amb el nostre últim, volíem per accedir al nostre fons, no? Llavors, què creus que podria ser el El primer que volem fer aquí? Si estem tipus de marxar aquest tipus de paradigma aquí? Probablement Volem accedir al nostre rellotge, no? Així, tenim una mica de var rellotge, que equals-- ¿Què pensem que serà? Document dot obtenir element por-- també estimar Sublime-- Aneu i la nostra Aneu és rellotge. Punt i coma. He de vos d'obtenir aquests punts i comes en aquesta ocasió, perquè em sento com que va ser el problema de l'última vegada. Acceptar el que, com li estava dient amb tractar JavaScript refresqui a si mateix, hi ha aquesta gran funció, I sé que va venir molt bé l'any passat, No estic segur que és molt útil per a aquest conjunt de processadors, però es diu interval establert. I això és realment molt genial si vostès fan res amb el temps o aconseguir informació actualitzada. En un lloc web per a una final projecte, això és probablement una funció que vol aconseguir súper familiaritzats. Així que el que fa és establir l'interval que anem a donar-li una funció, i amb quina freqüència hauria cridar a aquesta funció. D'acord? 

Així que en aquest cas, només anem a crear una certa funció anònima de nou, Bé, això va a arribar la nostra cita, i el nostre temps, i després actualitzar les coses i ho mostrem. Així que ens preocuparem d'això. Serem com generar rellotge aquí. Però el que necessitem és la forma sovint per actualitzar-lo. Així que en aquest cas, és només mil·lisegons. Així que només anem a fer 100 mil·lisegons. Per descomptat, completament arbitrària. Si volies que s'actualitzi molt més lentament, el que vas poder. No podem perdre el temps amb l'interval de temps establert, què tan gran és el nostre interval després que aconseguim un rellotge de treball, que espero poder arribar. Així que això és només dir: "Està bé, truqui al aquesta funció cada 100 mil·lisegons ". D'acord? Això és tot el que fa. 

Llavors, què volem que la nostra funció per fer és que volem tenir una data i algun temps és el tindrem. Així que podem començar amb la nostra data és igual a alguna cosa, i el nostre temps és igual a alguna cosa que no sabem encara. O en realitat, només necessitem la data, perquè data en què es va a incloure tot. De nou, si vostè acaba de Google res sobre el que vols fer, si vostè escriu, "OK, Vull aconseguir el temps a través de JavaScript, "que li donarà aquesta gran funció anomenada data d'obtenció. Literalment, la majoria de les coses que vols fer, JavaScript tindrà que es faci per a vostè ja. Pel que és, literalment, com a nou obtenir la data, que és creating-- o una nova data, rather-- que està generant algun objecte que representa una data. 

I què farem aquí és aquest és-- vaig a escriure això, i després explicar el que fa. Així que vaig a assegurar d'obtenir aquest dret. 

OK, així que el que aquesta funció fa, és només som creant el codi HTML que en realitat anirà dins del nostre div id de rellotge. Així que el que això va a estar fent s'acaba de generar una mica de corda, OK? És a dir llavors serà trasplantat al nostre HTML. Bàsicament el que farà és el nosaltres-- el que jo et mostraré és que qualsevol cosa que diguem HTML està, anem a reemplaçar aquest text aquí amb el que és HTML. Així que això permetrà que canviem la nostra RELLOTGE HTML de ser només el text d'aquesta ha de ser un rellotge, per mostrar en realitat els números i les coses que ens importen aproximadament, i en realitat ser a punt. 

Així que el que farem és que estem començarà a generar aquest HTML. Així, en la mateixa manera que es va utilitzar fer més iguals per a enters, ara vostè pot fer la de les sèries, llevat que va a concatenar. Dret? Com vam veure amb el punt de partit js, això només concatena totes aquestes coses juntes. Així que vostè pot concatenar diferents bits de HTML a partir de variables, o trossos de cordes que escrigui a tu mateix, i això només realment li permet de forma dinàmica generar HTML, que és bastant guai. Així que si vostè té alguna cosa molt usuari específic, això pot permetre que facis això. 

Així que tenim HTML, perquè vaig a tractar d'assegurar d'obtenir aquest dret. Així que farem una mica de capçalera h1. Així que el que és important adonar-se aquí és que això és en realitat només HTML. Dret? Estem escrivint real Codi HTML a aquí, és no només una cadena a la normalitat manera que anàvem a pensar-hi. Així que tenim una mica d'HTML. Això es considera una cadena aquí, però. I ho fem data dot-- nosaltres que desitgi obtenir els nostres hora. De nou, si anés a mirar fins res sobre la data, que et diria que són tots els atributs d'aquesta data té. I aquí està el que vostè pot utilitzar en ella. Així que és probable que tingui coses com obtenir hores, i obtenir minuts, i obtenir segons, i obtenir mil·lisegons, i qui sap què més tenen. Però si ens fixem en el documentació, tot va a ser-hi. 

Així que tenim obtenir hores, i després ens agradaria per concatenar que con-- estic passarà això aquí. Així que si estem generant en aquest moment, estem generar realment el temps, oi? Tenim hores, i després el que està entre hores i minuts? Vostè té un punt i coma, oi? Per això volem fer una mica de punt i coma aquí. I després volem aconseguir el nostre minuts, de manera que de la mateixa manera que tenim data dot obtenir hores, Com podem aconseguir els nostres minuts? És, literalment, data dot arribar minuts, el que m'agrada. És com, "oh, com Com puc obtenir els meus minuts? " Acabo d'arribar de les meves minuts. 

D'acord. I després tenim dos punts aquí. I després, si volem aconseguir el nostre segon, com podríem aconseguir la nostra segona? Data dot arribar segon. Crec que és molt bo. I el que és important adonar-se'n, és que nosaltres també hagi de tancar la nostra etiqueta HTML aquí, perquè encara ha de ser HTML vàlida, per la qual h1. Fresc. 

Així que després d'això, podem fer rellotge dot HTML intern és igual a HTML. D'acord? Així que recordi com em vaig dir HTML intern bàsicament pren el que sigui entre el dues etiquetes que parlem i s'insereix o manipula el que hi és? Així que el que això fa, si tornem al nostre rellotge, és que el rellotge es refereix a tot dins d'aquest div. Aquest és el codi HTML intern d'aquest rellotge div id. I pel que va a canviar-ho a l'HTML que acaba de generar, que, que, amb sort, tant de bo, tant de bo, mostrarà el temps en aquest moment. Ja veurem. Per descomptat. Així que moltes qüestions tècniques. Sol-- d'Allison sóc fora del meu joc d'avui nois. Bé, això funciona. rellotge de punts HTML intern. Va ser HTML debò? També això és el que passa. Quan no es pot veure alguna cosa, només cal veure el seu codi font. D'acord. Vostè vol saber un treball fresc voltant que farem aquí? 

AUDIÈNCIA: Pot vostè fer amb majúscules? Les lletres majúscules? Com que vostè té aconseguir hores, i després aconseguir minuts. 

ALLISON Buchholtz-AU: Es és aconseguir hora i get-- oh. Vostè tracti: estrella d'or. És tot una prova, nois. Et prometo que estava treballant abans de la classe. 

Bé, però alguna cosa fresc saber és que pot també- si de vegades seus arxius externs són aconseguir una mica boig, també pot simplement posar-los directament aquí, el que tendeix a arreglar les coses. Excepte això és com realment lleig. Per descomptat formatar tot. Assegureu-vos que tot és bonic. D'acord. 

Jo volia fer totes les demos fresc, i que estan simplement no fer exercici. D'acord. Rellotge var Script. De tota manera, l'important és que aquesta és la manera general que vostè formateu JavaScript. Com podeu veure, pot ser molt primmirats de vegades, fins i tot quan estava literalment treballar fa dos segons. O fa no dos a segon lloc, però molt, molt poc. 

Així que li mostri el que ha de ser similar, i per mostrar que no estic boig, i que tot és exactament mateix, això és el que ha de ser similar. No ets més que farà aquesta part superior aquí, i si veu font de la pàgina, si et fixes, que va fer alguns coses boges, em va simplificar. A més, el crèdit a Tommy McWilliam, que en realitat em va ajudar a crear aquests exemples, que és per això que sé que treballen. Com que Tommy és un mestre JavaScript. Però si ens adonem, tenim un conjunt. Tenim la nostra funció de rellotge aquí. Això és tot el codi JavaScript que que acabem d'escriure, o part d'ella. Acabem d'escriure aquesta d'aquí. I té un extra funció que només s'omple posant un zero abans d'una carta o abans d'un nombre si és només un d'ells. Així que si et fixes, això és bastant molt exactament el que acabo d'escriure. Vostè té algun rellotge variable que té el nostre element, obtenir elements per ID, que és rellotge. Tenim el nostre interval establert funció, que és una funció anònima que executa tot això. Hem alguns partir cadena de HTML que llavors dinàmicament generar per tenir alguns capçalera h1, concatenant amb obtenir les hores, més nostre còlon, a més d'aconseguir els minuts, més un altre còlon, a més de les nostres segons, i finalment l'HTML acabant per això. I després actualitzem el nostre rellotge dot HTML intern a HTML, i actualitzem cada 100 mil·lisegons. D'acord? 

Mira, jo prometo que no estic boig. No ho sé. No sé per què no em vol. Sento que té el mateix aspecte, però sembla ser que m'odia. 

Així que anem a veure si la tercera ronda va millor. Estem a punt de veure. No estic segur de com això va a anar. Està tot el món, almenys, aconseguir que el contres, com només el tema general de JavaScript, però? Espero que sigui almenys útil, més de mostrar que és una mica empipador. Però el conjunt de problemes serà molt divertit. Serà gran. No serà tan avorrit ja que això, no crec. Segur que arribarà a veure coses molt interessants. 

Així que finalment però no menys important, anem a tractar el Twitter. Estic molt espantat ara, nois. No sé com anirà. Però només per donar-li una mica més sabor, i això és en realitat cadenes de manipular i entrades, el que van a fer És a dir, si ens adonem aquí amb HTML-- aquest té una mica més-- tenim una àrea de text, que correspon a aquesta àrea de text aquí. D'acord? I això té un identificador de text. Va ser reformat una mica amb una mica d'amplada i alçada que hem predeterminat, i hem H1, que només és la nostra capçalera que representa els nostres caràcters restants. Li vam donar una mica de Id de caràcters restants, i després tenim una seqüència d'ordres aquí, que estic realment esperant el temps de tercer l'encant aquí, nois. 

Així que el que volem fer, en el mateix sentit en general que hem fet amb js RELLOTGE i el punt de partit js com hem notat, Som nosaltres hem començat per l'acaparament de realitat les coses que ens importen, oi? Així doncs, en aquest cas, hi ha dos coses que ens importen, OK? Una cosa que en realitat estem tipus de buscar en l'elaboració i les dades de, i una cosa que en realitat estem canviant. Així que el nostre HTML. Si aquesta és la nostra pàgina web aquí, el que és les dades que estem veient? Serà el el text en les nostres caixes, oi? Així que el que escric aquí. Això és el que vull saber, o això és el que vull veure. I el que serà canviant en la nostra pàgina web? Els caràcters restants. Així que de la mateixa manera, volem començar per inicialitzar les variables que en realitat sostenen a aquests elements. D'acord? Així que si tenim una mica de var aquesta és la nostra àrea de text, i tenim una mica de var que queda. Dret? Així que aquests van a mantenir aquestes dues coses. Així mateix tipus de coses, document dot-- bé, estic va a assegurar-se que això és funcionarà aquesta vegada. Estic molt inflexible. OK, així que si volem que la nostra àrea de text, d'acord en el nostre HTML, quin és el nostre identificador? Quina és la nostra identitat? És només serà text perquè això crea la nostra àrea de text, OK, i la nostra Aneu és de text, pel que és com podem prendre el que hi ha allà. Acceptar, punt i coma. Jo seré súper precisa al respecte, perquè vull que això funcioni aquesta vegada. Acceptar, fer el mateix, aconseguir element per Id. Realment m'estic preguntant què té causat els altres dos a espatllar. Acceptar i després en aquest, Què volem accedir? Quina és la nostra Aneu aquí? Tenim un altre Aneu a nostre HTML, què és? AUDIÈNCIA: Caràcters restants. ALLISON Buchholtz-AU: Caràcters restants. 

D'acord. Fresc. Així que només vaig a escriure això molt ràpid. Jo només vaig a escriure això en segons. Així àrea de text. El que és interessant és B function-- allà un munt de funcions que no només corresponen a la seva ratolí, però el seu teclat. D'acord? Així que es pot dir quan una tecla és pressionat, es poden fer coses com aquestes. Així que el que estem utilitzant es diu en clau, la qual cosa diu, "si s'ha premut una tecla el seu teclat, quan l'usuari ha aixecat el dit d'aquest botó, i la clau s'ha convertit sense premsar, llavors anem a fer alguna cosa ". D'acord? Així que això té sentit, oi? Com que tots els personatges teclegem, anem a haver d'aixecar els dits fora de la mateixa, de manera que quan la tecla puja, podem conèixer a disminuir els nostres caràcters restants. 

Així que tenim alguna cosa en clau amunt, i de la mateixa manera, direm, "Està bé, quan fem això, ens es crearà una certa funció que prendrà i, "en aquest cas, i el que volem fer és calcular el nombre restant. OK, així que començarem mitjançant la creació d'una variable. Així que tenim alguna cosa variable r, això representarà el nombre de caràcters que ens queda. D'acord? Sabem que partim 140, i si volem saber, diguem, la longitud d'aquest cadena que d'entrada ha estat, Vostès tenen alguna idea com podem fer això? Només amb seu fora del que és obvi coses, com si ens volguessin hores, solíem obtenir hores. Sabem que el nostre objecte és àrea de text, però podrien vostès pensar en el que podria venir després d'ell? Alguna idea? 

Així que tipus d'aquesta una de menys intuïtiu, però és valor de la longitud del punt. Així que només em donen una mica de atribut de valor que és en realitat la longitud d'aquesta cadena. Així que dirà, "OK, estic buscant en tota aquesta cadena a l'àrea de text, i jo vaig a dir quant de temps és ". Perquè si recordem cadenes en realitat només són arrays, pel que només podem prendre la longitud d'ells. Així que hem de. Fresc. 

Llavors el que volem fer és que No faltarà per permetre a l'usuari a l'entrada de més de 140 caràcters, no? Perquè si diem com, "oh, només tenen aquesta quantitat restant " i després els deixi fer això de totes maneres, que hem estat mentint. I aquest és un altre cosa que JavaScript pot ser molt bo per, és la validació de l'usuari i assegurar-se que el seu usuari encaixa dins de les regles que vostè ha proporcionat a ells. Així que si vols fer coses com fer Assegureu-vos que l'entrada a algú de la seva adreça de correu electrònic, o assegurar-se que quan es Introdueix dues contrasenyes, coincidien. JavaScript pot fer això. Es podria fer alguna cosa com, "quan s'envia el formulari, "o similar, "Quan botó Enviar formulari és es fa clic, totes aquestes coses ". I podem fer això JavaScript. Així que això és just el que farem aquí. 

Llavors, què podria ser una manera de comprovar si que han passat més de 140 caràcters? ¿Què passarà amb el nostre valor de r si ho intenten? Serà negatiu, no? O que serà menys que o igual a zero. Així que podem utilitzar una si és igual que tota la resta. D'acord? I tenim alguns punts àrea de text valor, i el que estem fent aquí és només estem cutting-- què és? Ho sento. Aquest, que només volen tornar falsa. Em vaig confondre. Tot esgotat de les coses que no treballa. Acceptar, només volem return false, i després desitgi mostrar la caràcters restants, oi? Així que amb el rellotge, ho vam fer alguna cosa amb HTML intern, no? On el posem igual a algun variables, així que el que podríem fer aquí? Què estem canviant l'HTML intern? 

AUDIÈNCIA: restant? 

ALLISON Buchholtz-AU: Estem canviant restant. Molt bé, i el que tenim , Desitja configurar de la mateixa? Serà r, ja que haurien de ser els nostres caràcters restants. D'acord? Així que estic molt nerviós per veure si això funciona ara, però ja veurem. Deixa això. Això és molt ràpid. [Inaudible] a D'acord. Un cop més, jo només vaig a mostrar. Per alguna raó, la meva no decideix treballar, però el que jo et mostraré és que aquest és-- oh jo havia de posar això en. Bé, ens adonem de la mateixa classe de cosa aquí, per obtenir l'àrea de text. 

A més, si vostè avís noi, si hi ha alguna vegada alguna cosa que vols fer, i no sap com fer-ho , Simplement feu clic a Visualitza l'origen de pàgina, i que diran. De vegades serà encriptat. Per a la seva conjunt de processadors, codifiquem tot, de manera que només s'assembla un galimaties. Però si alguna vegada hi ha una realitat lloc web molt interessant que t'agrada, si només clic a Visualitza l'origen de pàgina, que dirà com fer-ho. Així que de nou, treballar més intel ligentment, no més difícil. I com es pot veure aquí, tots aquestes coses són el mateix. aquest d'aquí només requereix una mica subcadena que, no recordo exactament el que això fa. Però, òbviament, porta algun subcadena del valor de zero a deu, i retorna fals el que s'ha de deixar de l'usuari d'introduir més, i després actualitza òbviament el codi HTML intern allà. 

Fresc. Així grans prendre les escapades a partir d'avui, experiment, mirar el codi font perquè va a ajudar molt, i tothom, de vegades JavaScript pot ser difícil de treballar i no sempre funcionen de la manera que vostè espera que, però només seguir intentant perquè et prometo que ho farà. Et prometo tots aquests exemples estaven treballant abans de la classe. No entenc el que va passar. Jo, literalment, tinc tot el mateix. 

Una cosa més que només vull mostrar nois que poden ser super útil es en-- el que estava treballant abans? Tenim part a la feina, no? Crec que sí. Sí. Ho vam fer. Impressionant. OK, així que l'únic que vostès han de saber és el registre de la consola de la qual vaig parlar. Així consolar registre de punts de hola. Així que això és una espècie de la Equivalent JavaScript de printf. Així que si mai vols inspeccionar les variables o veure el que està passant allà, el que que pot fer és, si inspeccionem element, és el que es vol anar a, i et vas a la consola, veuràs que imprimeix hola. 

Així que podríem tenir- imprimir tot el que volíem. Si volíem que imprimeix fons fons del punt de l'estil del punt, hem de ser capaços de veure el RGB triples que apareix. O no. Jo recordo exactament com imprimir una variable així, però vostè hauria de ser capaç de imprimir coses per l'estil. Això serà molt útil per el seu conjunt de processadors quan vostè està tractant de manipular coordina o el que sigui. Així que ells també canvien aquesta peça a classe. Això és diferent dels últims anys, de manera només sigui agradable als seus TFS, o la TFS en hores d'oficina en lloc, perquè som tipus d'aprenentatge juntament amb vostès. Però el registre de la consola era super, super útil per a JavaScript any passat. Així que m'encanta. Apreneu com usar-lo. És més fàcil d'utilitzar que el BGF, de manera que ha de ser com a mínim un punt més. Però gràcies nois estan donant amb mi. Sento que la meva exemples per alguna raó simplement no volia cooperar amb mi, però jo espero que va ajudar tipus de aconseguir-li un poc més a la zona de JavaScript. I enviar totes les seves preguntes per la setmana que ve, així que pot ser reparat súper, i vaig a portar dolços i fins i tot addicional dolços perquè això era ridícul. Però vostès són grans, i tenir una setmana increïble.