ALLISON Buchholtz-AU: All todos dereita. Benvido de volta á sección. É a nosa penúltima sección. É tan triste. Eu non sei o que eu vou facer sen ver vostedes toda luns. Creo que debemos só-- Quizá poderiamos só atópanse aquí e cea ou algo así. Eu non sei. Vou traer comida no canto. Nós imos falar. Mais si, a próxima semana vai ser a nosa última sección. Na mesma nota, ten unha proba a próxima semana. Sei que eu esquezo de facer o meu, como, dúas semanas de antelación, a semana pasada, Pero espero que vós sabía que iso ía ocorrer. Esperemos que este é un dos últimos midterms para vostedes para o semestre. Pero que vai cubrir toda a material que temos ido máis. Polo tanto, non é como pode simplemente esquecer preto de catro lazos ou variables. Porque aprendemos aqueles en principio, aqueles son obviamente xogo xusto para o seu quiz. 

Será o mesmo formato, mesmo lonxitude, de xeito que xa está acostumado con iso. Non vai ser codificación por problemas de man, quizais algún verdadeiro falso, quizais algunha resposta curta. Entón ten que ser familiarizados co formato, especialmente se levar as probas prácticos. Pero como digo aquí, é acumulativo, pero estamos sempre vai concentrarse en cousas de semana seis en diante. Entón, nós estamos probablemente non vai preguntarlle sobre cantos bytes son en cada tipo ou eses tipos de cousas, pero estamos probablemente vai ser interesado en cousas como listas ligadas, ou diferentes estruturas de datos, ou algoritmos diferentes que xa falamos sobre. Polo tanto, comproba que está realmente -Se sobre aqueles, e se Debe de recursos, aquí está unha morea de recursos. Eu só che dei tipo dunha lista rápida alí. 

A próxima semana será cuestionario revisar durante este tempo. Entón, se tes algunha dúbida ou temas específicos, cousas específicas sobre o quiz que desexa pasar por riba, por favor envialos a min antes de tempo para que eu poida tipo de preparar algún material para iso. E ademais avaliación sección, imos estar seguro o curso a escala avaliar como fixemos a última vez. E iso vai ser feito polas mesmas persoas. Eu non sei se isto fai que sexa mellor ou peor, pero vai ser de min, Hannah, Davan, e Gabe novo. Entón, se quere vir ver todos brincadeiras uns cos outros e oriente-lo a través cuestionario avaliación, ten que definitivamente chegar a esa vindeiro luns tamén. Entón vai ter un conxestionamento de luns embalado de avaliación cuestionario, o que é bo porque entón tes martes para procesar a través de todo. 

Pero definitivamente facer check- estes recursos. Study.csv.net é, de lonxe, I penso, un dos máis útiles, sobre todo porque ten unha morea de código de exemplo, el ten todo Puntos de Poder con todas as notas sobre el, que son realmente o que eu debuxe máis dos meus materiais de sección de. Se hai algo no anterior seccións que eu poida ter enviados que non pode ter comezara, é só me avisar. Como código de exemplo da semana pasada, se alguén non conseguir isto, só me correo electrónico ou vir falar comigo, e eu vou estar seguro de que vostede pode iso. 

Entón, con iso, hoxe imos estar falando de JavaScript. Entón aquí nós Tommy, quen era eu só falando con vostede na noite pasada. Encántame Tommy. JavaScript é o seu favorito lingua, como el di aquí. Eles van tentar dicirlle que é non é o mellor, e eles van estar mal. Entón, Tommy é un mestre JavaScript. Eu non estou moi na súa nivel, pero eu era como, "Tommy, como fago para ensinar eses nenos javascript? " Entón, eu teño algúns consellos, entón espero que eles funcionan. 

Así, un par de cousas a saber é que JavaScript é un script do lado do cliente lingua, por iso mentres o PHP é algo que consideramos máis do lado do servidor, foi facer a carga para o servidor, compilado e executado alí. Este é executada na súa propia máquina. OK? Entón cargar algunha páxina JavaScript, e é executado na súa máquina. A sintaxe é moi semellante ao C e PHP. Nós imos pasar por algúns exemplos de JavaScript, e vai ver que o nosa forma de falar variables, loops, e as condicións son moi semellantes. OK? O feito de que son tan semellantes é Probablemente vai tropezar algúns de vós -Se, nalgúns casos, só porque vai incorporar un pouco de C onde non debería estar. Quizais tentar e escribir algo cando non debe ser introducido. 

E con iso, unha cousa a sabe é que o JavaScript é un tipo dinámico linguaxe, como PHP. Entón, se vostedes lembran da sección a semana pasada, cando estabamos tipo de facer noso curso intensivo PHP, vimos como unha secuencia dun podería ser transformouse en un int un, e así por diante. O tipo de súas variables son determinados en tempo de execución, así poden cambiar ao longo do o transcurso do programa, e, do mesmo xeito que nunca realmente declarar tipos de variables PHP, nós imos estar facendo o mesmo cousa aquí, onde non somos realmente controlando tipo de nosas variables, por así dicir, como nós facemos en C. 

E entón unha cousa que é moi legal é que pode erro comprobar a través da consola, con este gran función console.log, que permite que imprima diferente variables ou obxectos que imos falar. Así como a semana pasada, cando eu era como, "usar esta función", con desaloxo dende o seu pset esta é unha función que quere empregar, console.log. Quedei tan sorprendido cantas estudantes en horas de oficina non sabía sobre a función de desaloxo. E eu era como, "caras, esa vontade facer a súa vida moito máis fácil. " 

Todo ben, de xeito que era unha especie de só unha cousa breve, como sempre, temos exemplos. Sei que vós aman aqueles. Entón aquí está un exemplo dunha moi simple arquivo JavaScript aquí. Por iso, só vai crear este emerxente que di, "Ola mundo", cando entrar na páxina, pero imos tentar camiñar por este un pouco. Entón, obviamente, este é só como o seu index.html normal. Así, só o noso modelo normal aquí, e temos HTML, temos a nosa cabeza, e, así como con CSS, como nós incluíron algúns ficheiro fóra, non? Temos algún tipo de guión texto que é JavaScript. E a fonte é hello.js, que está aquí en baixo. Este é todo o arquivo de hello.js. E entón temos algúns Título e algúns HTML corpo que realmente non se preocupan. 

O que pasa é que, cando nós cargar esta páxina, el executa automaticamente este script. OK? Entón JavaScript vontade executar automaticamente. Entón, o que vai facer, que vai para ir inmediatamente e realizar iso. E vai dicir ", alerta. Ola Mundo ". Cales alerta é a función que realmente xera esa caixa. OK? Entón, é unha especie de todo abranguen. Non hai nada extra que tivo para facer ademais de só alerta, e, a continuación, o que queriamos dentro da nosa caixa de alerta. OK? Entón, iso é só un super sinxelo exemplo do que JavaScript pode facer. 

Un dos moi legal cousas, como veremos, JavaScript é que permite que para manipular as súas páxinas web, sen ter que recargar los o tempo. Entón, se want-- por exemplo, se está paira sobre algo, se vós xa teñen visto como barras de menús, ou cando pasa o rato sobre algún tema, un menú desplegable aparece, iso é debido a JavaScript. OK? Entón non está recargando o todo páxina para obter este menú para mostrar-se, só está á procura de algún específico acción que o usuario teña tomado, que son chamados de eventos que nós imos chegar en, e unha vez que ver que, di: "OK, editar algo sobre este páxina e facelo diferente, pero só editar esas cousas específicas. Non volva a cousa toda. " Por iso, en realidade, é moito máis agradable, e non ten que cargar as súas páxinas, e é moi legal. 

Entón declaracións de variables, así pode tipo de ver, Engada enriba aquí, vagamente ingresaran. Polo tanto, este é moi parecido PHP. Non necesitamos dicir JavaScript que tipo somos esperan cada unha destas variables a ser. Poden ser o que tipo queremos. Entón entende neste caso declaramos Los de xeito moi sinxelo, só con "var" e, a continuación, o que queremos noso nome da variable a ser. Unha cousa a notar é que, cando var poñer diante dun nome de variable, Lo localmente alcance lo. OK? É totalmente razoable para ti completamente só eliminar a var e só se s é igual a CS50, e que sería só unha variable global. OK? Así, pode arrincar as dúas cousas, só depende de como quere. Entón, se está inicializar Lo dentro dunha función, e quere que a variable ir con alcance dentro desa función, vai querer facer algo así como var nomear unha variable, contra, se queres que ámbito global, o que pode só facer o nome a variable e logo todo o que lle gustaría que estableza igual a. OK? 

Este é o tipo de cousa legal aquí abaixo, porque se observarmos nosa variable b comeza como verdade. E o que iso pode does-- alguén me diga o que iso fai? Polo tanto, temos algúns alerta. Que tipo de b ser o comezo? Audiencia: Boolean. ALLISON Buchholtz-AU: Boolean. Dereita. E, despois, volver a asignar b para esta cadea, non? Así, pois, aquí, que tipo de b ser? Sería unha corda, non? Entón, o que é importante aviso é que, en c, nós case podería nunca facer algo parecido. Nós teriamos que ter unha variable, lanzalo como algo máis, quizais facer algunha función cun dous i, ir dunha carga nun enteiro. Pero se notar aquí, b moi facilmente cambia escribe. 

Audiencia: Espera, entón podes só ser como, "facer b un número enteiro?" 

ALLISON Buchholtz-AU: Yeah. Pode só recolocar b para un enteiro. 

Audiencia: Serio? 

ALLISON Buchholtz-AU: Yeah. E entón sería un int. Así, as súas variables poden cambiar ao longo do o curso do programa tamén. Eles non son estrictamente ingresaran. É moi vagamente ingresaran. OK? Basicamente súas variables poden facer o que queren, como nós medio que viu con PHP. Poden facer algunhas cousas malucas, entón é importante ser moi coidadoso. Nome súas variables ben. Se non, faga, de súpeto, vai ser como, "Espera, eu penso que este era un corda, e agora é un int, e eu realmente non estou seguro o que está pasando aquí. " Polo tanto, este é só un exemplo sinxelo de mostrando como unha variable pode facilmente cambiar o seu tipo sobre o curso dun programa. 

Aceptar. Polo tanto, este debe ollar super, super familiar. Entón, eses son os nosos lazos en JavaScript. Son exactamente os mesmos, agás para en vez de catro int i é igual a cero, poderiamos dicir só var i é igual a cero. E entón poderíamos ter o noso mesmo tipo de condición, mesmo tipo de actualización, i plus plus funciona moi ben. Así, catro son os mesmos, while son os mesmos, e facer while son exactamente os mesmos. Mesmo tipo de formato xeral. Notamos, catro, parénteses, corchetes, é todo o mesmo. Tamén haberá punto e coma cando chegamos ao exemplo de código. Verá que é moi o mesmo que c. 

Para declaracións de función, de novo, moi semellante. Temos algunha función que só di que é unha función e, a continuación o nome da nosa función, e as entradas. E de novo notar, nós temos ningún tipo aquí calquera. Non? Non temos nada que dicir que estes precisan estar enteiros ou dobres, ou Carrozas. Poden ser o que queiran. O importante é entender que necesitamos escribir función de antemán deixar JavaScript sabe que esta é realmente unha función. 

Polo tanto, esta é só unha suma sinxela función que devolve x ou y, e, a continuación, o que tamén é legal é que pode, en realidade, asignar unha función a unha variable. Polo tanto, neste caso, a suma é agora función que realmente fai suma. Entón, se observar aquí, temos función, o nome da función, entradas. Non? Aquí só temos a función e insumos. Entón, iso é chamado dunha función anónima. E iso é algo que debe ser novo para a maioría de vós, se non todos vostedes. Entón, basicamente o que medios é que nós non Debe nome do noso función neste caso. Podemos só dicir, "OK, eu vou teñen esa función que executa, aquí son as súas entradas, e é aquí o que vai facer. " E, sobre todo cando está atribuíndo unha función dalgunha variable que está indo para manipular, Non precisa necesariamente que nomealo porque vai estar referíndose polo presente variable nome, non polo que quere a función foi realmente chamado. OK? 

Entón, se nós vemos aquí, nós ter algunha variable suma agora que é igual á suma de tres e cinco anos. E queremos conseguir isto. E iso sería só ter algún alerta, tres cinco é igual ao número. Isto ademais de só vai concatenar sexa cal sexa a nosa resposta foi á cadea. Tamén legal, ademais de pode concatenar cadeas. 

Para JavaScript, como con PHP, HTML, CSS e como dixemos, unha morea de que nós estamos levando as rodinhas aquí e vostedes teñen unha morea de know como realmente entender estas cousas. Son un pouco diferentes, pero eles non son tan estraños e que non pode Google cousas ou buscalos en liña con escolas W3. E nós estamos realmente esperando que caras para, tipo, experiencia e aprender no seu propio país. Entón, eu sei que isto pode parecer un pouco menos completo que algunhas das cousas que c o que facemos, pero que é, en realidade, por unha razón. Pero espero que non sexa moi diferente, e non é esmagadora. 

Entón matrices en JavaScript, novo moi, moi similar. Non? Temos algunhas matriz variable que é igual a corchetes baleiros, e iso é só unha matriz baleira. Iso é moitas veces chamado notación de matriz literal. Isto é só unha cousa que chamamos. Ou tamén ver matriz dous aquí, temos algunhas literal matriz que ten tres elementos, non? E entón temos algúns terceiro elemento var que é algunha variable que é só vai realizar esta cadea, JS. 

Os elementos, é bo ter en conta, están separados por comas, como sería de esperar. E tamén pode acceder estes, como fixemos en C, con esta notación índice, non? Tan distinto do PHP Agora, imos volver para só un tipo de referirse ás cousas por índice. Así como C, é tamén índice cero. Eu sinto que sería moi cruel se de súpeto fixo un JavaScript índice, e tiña que completamente repensar o xeito no que pensa sobre arrays. 

Unha cousa legal é que, no canto de ter que fazer-- se nunca quería que a lonxitude dunha matriz, quizais interactuar con el ata atopar algún fin, ou só sabe o que é. Porque JavaScript é moi frouxo en máis formas que o tipo, como vemos aquí, podemos só facer esa matriz maior porque decidimos. Se se decata matriz de tres ten tres cousas para comezar, pero entón, de súpeto, nós somos como, "Oh, estou a xogar. En realidade, estamos indo para facelo 101 cousas. " Entón, se vostede sempre quixo saber o lonxitude real da súa matriz, facelo así. E imos ver unha chea de esta notación en exemplos, pero con JavaScript é tipicamente o que quere obxecto que está falando dot calquera tipo de función que desexa aplicar a el. OK? 

Polo tanto, neste caso, o noso obxecto é matriz dous, e dicimos que queremos o lonxitude de matriz de dúas. Entón, iso só chama, como a lonxitude sobre iso. E que volverá súa lonxitude. Tamén algo a notar é que se observarmos nosas matrices, ao contrario de C, eles non teñen de ser todas do mesmo tipo. Isto é moito máis parecido PHP. JavaScript é basicamente como esta fusión interesante de C e PHP. Entón, imos entrar niso. De momento, imos asumir que as súas matrices son, basicamente, como matrices C, en que son indexados cero. OK, de xeito que é todo. Tamén pode simplemente estender un matriz para calquera que sexa o índice que quere. Tendo en conta que ese probablemente SEG culpa en ti ou darlle algún erro, JavaScript é como, "nah, está todo ben. Eu teño ese. Nós só ir directo onde queiras ". 

OK, entón os obxectos son moi importantes. Vostedes estarán usando unha morea deles no seu conxunto P, se ben me lembra. Entón, o único que estes son semellante ao de C son estruturas. Entón pode pensar cando about-- imos a un exemplo á dereita despois diso, eu creo que vai facer moito máis sense-- pero, basicamente, utilizar obxectos para organizar de curso relacionado información. Cando falamos de estruturas en C, que moitas veces falar dun estudante que tiña algún nome, ID, casa, vostede sabe, a concentración. E iso é medio que o mesmo que usan obxectos para aquí. É só para organizar información semellantes. 

Tamén pode pensar niso como máis semellante ao asociativo matrices en PHP. Polo tanto, este sería tipo de cousa onde temos algunha clave con algún valor, moi semellantes para PHP. Así, pode arrincar algúns obxecto baleiro, como vemos aquí enriba, só con chaves. Matrices así son corchetes. Obxectos baleiros son claves. Boa distinción de ter. E estes son só dous diferentes formas de definir propiedades. Polo tanto, este é o tipo de moito máis que un xeito é semellante á de PHP, co noso matrices de asociación, coa nosa clave, e noso valor, mentres que un agasallo é-- vai ver este moito máis en JavaScript. Este tende a ser a convención. E, do mesmo xeito que fixemos matriz de dúas lonxitude punto, este está dicindo: "OK, dáme desa atributo deste obxecto ". Non? Entón, do mesmo xeito como era, "déame o atributo de lonxitude de matriz de dúas, " este está dicindo: "me dea algún propiedade do noso obxecto baleiro. " Ou, neste caso, estamos atribuílo la a algún valor aquí. Pero tamén pode acceder a ela desa forma. 

E entón aquí esta é só mostrando dous alertas diferentes. Entón, iso vai amosar as alertas sería exactamente o mesmo, é só dous xeitos diferentes de acceder ao elemento que queremos. Isto ten sentido para todos? Eu me sinto como un regalo probablemente fai máis sentido, só porque estamos saíndo PHP. Pero como facemos máis exemplos, este é, literalmente, exactamente o mesmo. Moito diso é só cambiar na sintaxe. 

OK, entón exemplos. Encántame exemplos. Entón, aquí están algunhas CS50 variable que é un obxecto, e nós gardamos todo isto información sobre el. Polo tanto, temos claro, instrutor, TFS, Serie de exercicios, e gravado. Entón entendemos estes son case todos de diferentes tipos. Non? Así, os obxectos poden almacenar atributos de diferentes tipos. Podemos pensar en isto-- é moi semellante á nosa matriz asociativa en PHP. Entón clave, valor, clave, valor, clave, valor, así por diante e así por diante. O que tamén é interesante, do mesmo xeito que podemos ter matrices dentro matrices, Tamén podemos ter obxectos dentro obxectos, ou arrays dentro de obxectos. Nunca está realmente limitado a só unha única das cousas. Podemos estar moi Inceptionesque, só seguir no burato do coello alí. 

Entón, se nós observamos, nós Claro que ten algúns é unha cadea, instrutor que é unha cadea, e array, un int, e un booleano. Entón todas estas cousas distintas. 

Todo ben, entón, temos outra. Polo tanto, neste caso, temos unha matriz de obxectos. Entón, como un obxecto pode ter unha matriz na mesma. Tamén podemos ter unha matriz de obxectos. Isto pode ser útil para pensar en semellante ao tipo de como tivemos un hash mesa, tivemos unha matriz de todas estas diferentes tipos de estruturas que eran punteiros para diferentes nós e outros enfeites. Pero, neste caso, nós ten unha matriz de obxectos. Entón, iso é como un array matrices de asociativo. Polo tanto, temos algúns primeiro consistirá ser o obxecto co nome de James e albergar Winthrop. 

Vostedes deben lembrar algo moi semellante a este coa súa última pset, onde se tirou algo do seu banco de datos, o primeiro tipo de cousa na súa matriz foi toda a información sobre o primeiro usuario que reuniu-lo, e despois que tivo para o índice en que para conseguir o seu stock ou a caché ou outros adornos. Entón iso é moi moi mesmo cousa, só un pequeno cambio na sintaxe, o cambio pouco en as palabras que usan para describilos-los. 

Entón, se nós queriamos, alguén pode dizer- me que este aviso faría aquí? Ou o que este anaco de código podería facer por nós? Audiencia: El vai dar-lle todos os nomes. ALLISON Buchholtz-AU: Correcto, el sería só alertar con todos os nomes porque ía pasar por cottage i, por iso ía comezar de cero. Por iso, diría que, OK estamos a buscar neste primeiro obxecto, o que é a primeira fenda na nosa matriz. E el di: "dáme a atributo, o nome do obxecto. " Entón imos aquí, teremos dixitalización, temos que buscar o nome, e teremos imprimir James, Molly e Carl. Calquera preguntas ata agora? JavaScript desgraza vai ser facendo unha morea de mirar para arriba no seu propio, descubrir a sintaxe, ás voltas con el. Pero está claro que eu estou sempre aquí, horario de atención é sempre aquí. Podería ser os martes desta semana. Entón, se está alí, pode veña visitar-me esta semana. Sería óptimo. 

OK, entón é DOM Document Object-Model. Polo tanto, esta é só unha forma que nos gusta de pensar sobre como o noso HTML e todo dentro dela está organizado. Isto é moi algo que Probablemente vai aparecer no seu quiz. Sei que o meu ano, era como se aquí Ficheiro HTML, enche o DOM para el. E só cubrir pequenas cousas. Estes deben ser puntos fáciles, esperanzas. Esperamos que vai see-- 

Audiencia: [inaudível] 

ALLISON Buchholtz-AU: Entón ve esa árbore aquí? 

Audiencia: Yeah. 

ALLISON Buchholtz-AU: Entón, eles van pedir uso para cubrir o que pasa debaixo do corpo. Quizais baixo o corpo, temos algúns divs ou temos algúns parágrafos, e nós imos pedirlle para cubrir unha árbore moi parecido con este. Entón, nós imos estar camiñando por ela. Así, o documento Object- Modelo é só un xeito estruturar e pensar sobre o noso HTML graficamente. E tamén cando chegamos en máis JavaScript, que será o xeito que nós, en realidade, manipular diferente elementos na páxina. Necesitamos unha forma de acceder cada das cousas na nosa HTML, e así por iso nos dá unha moi forma estandarizada formigón en varias páxinas web para facelo. 

Entón, se nós só camiñar por este aquí, por suposto noso documento é como todo o noso arquivo. Isto, obviamente, ten sentido que é a cousa máis elevada, e despois temos o noso HTML real, o que corresponde a esa marca aquí. Ademais, se o traveseiro súas etiquetas correctamente, a continuación, crear esa árbore DOM convértese en super sinxelo. Polo tanto, temos algunha cabeza aquí. Temos un corpo que vemos tronco fóra HTML, que é por iso que temos cabeza e no corpo. Dentro de cabeza, temos algunhas Tag do título, un título de tag final, polo que sabemos que vén despois de cabeza. E dentro da nosa etiqueta title, temos Ola, mundo. OK? Entón, iso é todo este sector man esquerda. E, a continuación, para o sector da dereita aquí vemos que temos HTML, Aceptar fixemos esta parte da cabeza, nós estamos mirando só para o corpo, polo que temos algunha zona do corpo. E dentro diso, o único cousa que temos é Ola, mundo. OK? Se tivésemos cousas como algún soporte de p e logo Ola, mundo, e despois outro soporte p de adeus, mundo, teriamos dúas burbullas saíndo aquí. Porque son ambos baixo o corpo, pero son letras separadas neste caso. Hai sempre práctica en que en probas anteriores, así como a abundancia en liña en lo. OK, entón, iso só permite -Nos ver todo ben e manipular as cousas moi sistematicamente. OK? Sabemos exactamente como atravesar esta árbore, polo que sabemos o que queremos acceder. 

OK, entón é por iso que queremos para ter este tipo de modelo, para que poidamos utilizar cousas como esta, e entendemos o que significan, e son estandarizados en todas as cousas que facemos. Entón título do documento dot é só a título de our-- todos estes son bastante auto-explicativo, Eu gusto de pensar. Así, o primeiro de tres exemplos son só dicindo, "OK, é só me dar o título desta páxina web ". Entón, que vai che dar o que corresponde ao título. 

Corpo do documento dot vai darlle todo o que está dentro desas etiquetas do corpo. Así, pode manipular iso. E o corpo dot documento dot inserir HTML é moi legal, e, se cadra, non é como super intuitivo, pero o HTML interior corresponde a este aquí. Entón, se quere manipular o texto nunha páxina, normalmente vai estar facendo algo con dot corpo HTML interior. OK? Así HTML interior tende a referirse a o que é realmente entre estas etiquetas. OK? E entón funcións útiles. Entón, se quería chegar calquera destes, calquera elemento, temos algúns Id, clase nome, ou o nome do tag. Isto é moi semellante ao cousas que fixemos con CSS, non? Onde temos algúns selectores que corresponden a unha etiqueta, unha clase que lles damos, ou un Id. Isto é moi do mesmo xeito. Se tes algo que Ten algunha clase de can, e dis obter elementos polo nome da marca, e pór o can na lá-- ou desculpe, nome da clase. Pode pór punto alí. Vai volver todos aqueles elementos para ti que teñen esta clase. Así, pode manipular só aqueles. Do mesmo xeito, quizais só quere manipular algúns cabeceira, de xeito algúns cabeceira h1, como fixemos. Podería facer obter elementos por tag nome, porque h1 é un nome de marca. E do mesmo xeito, se quere comezar unha cousa única, pode facer tag get. Obter elemento por Id. E son, en realidade, moitos destes. Estes son só como tres dos moitos. Entón, se vai en liña, como Eu estou indo a animar facer, e facer algunha investigación no seu propio país, Recomendo definitivamente mirando para todo isto. Poden ser super útil, sobre todo cando quere só unha especie de manipular cousas moi específicas, sen ter para pasar e tentar para analizar a todo. 

OK, entón o último é JavaScript eventos. Entón, cando eu estaba falando máis cedo sobre ir nunha web, e cando pasa o rato sobre algo, ou o rato pasa sobre algo, outra cousa acontece. Isto é o que nós queremos pensar como un evento. Entón o que temos que poder ser útil aquí é onclick. Entón, o meu foi en foco, o que, eu son case seguro, é só en foco. Tamén unha tonelada destes que pode buscar. Hai toda unha lista en liña das cousas distintas que se pode escoitar. 

Pero os eventos JavaScript son basicamente, só respondendo ás cousas que o servidor está realizando. Non? Polo tanto, o seu usuario fai algo, iso é un evento, e JavaScript responderán con todo que desexa que el. Vai responder en consecuencia. Polo tanto, neste caso, temos algúns onload fiestra punto. Entón, o que isto di é, "esperar ata loaded da fiestra. " OK? Entón, cando todo está cargado, onload, logo, pode realizar esta función. Entón, cando todo está cargado, está indo ter algún botón de busca que obtén un elemento por Id, e imprime o que quere que elemento é como o botón Buscar. E entón temos esa variable, podemos dicir, "Aceptar, onclick." Así, cando escoitamos un click o botón Buscar, realizar esta función, que é un alerta, premeu o botón Buscar. 

Entón o que ocorre é-- este é un bo pouca representación gráfica aquí. Entón, as nosas cargas de documentos, este é o noso onload, atopamos o noso Busca botón, o que é iso. Estamos mirando para o noso botón Buscar. E entón, cando o botón de investigación é premendo, el corresponde a dereita aquí. Onclick. Entón nós finalmente avisar ao noso usuario, que é esta última liña aquí. OK? Así, cada unha destas catro etapas só corresponde aos catro caixas alí en baixo na parte inferior. Isto ten sentido para todos? 

E, a continuación, unha cousa que eu só vou mencionar moi, moi brevemente, que eu fomentar vostedes a van ollar máis para jQuery, que é só unha biblioteca que está construído enriba de JavaScript. El é super útil, como coa maioría das bibliotecas. Hai moitas funcións. Entón, se sempre hai algo que quere facer en JavaScript, seu primeiro instinto non debe ser pensar de, "o que función debe I código? "Debería ser, "Deixe-me ver alguén é Xa o fixo por min. " Porque nove de cada dez veces, alguén vai ter feito isto xa, e probablemente ter feito mellor. As persoas gastan moito tempo facendo estes, e JavaScript é moi utilizado, para que a xente está constantemente intentando facelo mellor. E jQuery ten unha morea de funcións que, probablemente, será útil para ti no seu proxecto final, se está facer calquera cousa con deseño web. Como me gusta de dicir ", o traballo máis intelixente, non máis. " Se vostedes fan iso, vai ser gran. Cando estamos no hackathon non quero que sexa todo forzado para fóra. Quero que sexa do tipo: "Eu teño este. jQuery obtido miña parte traseira. Eu non teño escribir estas funcións ". 

Entón, só dúas cousas para Teña en conta que, eu vou para deixar vostedes ollar máis en jQuery no seu propio país. Todo o que eu vou dicir é que fai algunhas cousas moi impresionantes e pode facer a súa vida moito máis fácil. Pero o que quere ten é calquera arquivo que vai usalo en, vai querer estas dúas liñas. Vai querer o guión de js jQuery punto js. E, de feito, a súa fonte vai haber algunha URL. Se Google jQuery, Google en realidade acolle todos os ficheiros para ti. Entón definitivamente quero de entrada que, no canto de URL. Acaba de poñer isto aquí por razóns de simplicidade. Todo isto significa que a atopar a súa biblioteca jQuery. É enorme, para que non quere para hóspede-lo no seu propio ordenador se pode evitalo, o que é por iso que nós tenden a só poñer no URL de Google de que aloxa todos estes arquivos para ti. OK? Vostede Google-lo, eu prometer vai estar alí. 

E entón o que quere JavaScript ficheiro que está usando, entón este é só algúns externo JavaScript ficheiro que está a usar. Do mesmo xeito que nós chamámoste ao noso CSS arquivos, este é o mesmo tipo de cousas. Este só ligazóns para o arquivo onde o seu JavaScript está. E eu teño algúns exemplos con JavaScript simple. Entón, nós imos estar pasando por iso. E entón, no seu índice de JavaScript, cal é o seu ficheiro JavaScript aquí, este é o tipo de envoltura que ten para jQuery. Está case 99,9 por cento do tempo indo ter iso no seu arquivo index.js. Porque o que este di que é, "Non executar nada ata que o documento é, en realidade, listo ", que é o que quere. Porque se o documento non está preparado, jQuery e comeza a facer as cousas, é só unha confusión. Así, sempre quere ter este envoltorio. E, a continuación, para as cousas que ir alí, eu deixan a propia perusing dos seus rapaces. 

OK, entón hai dúbidas dereita agora sobre JavaScript en xeral? Ou o modelo DOM? Se non, temos algúns cool exemplos que podemos pasar, que vostedes poden me axudar código. Pero eu tamén vou ser super agradable, e se non quere dicir nada para estes, iso é bo. Eu tamén podo só darlle exemplos. Pero nada no PowerPoint, antes de seguir adiante? Con estilo. 

Eu sinto que vostedes necesitan enerxía. Entón, eu creo que nós imos comezar co meu exemplo do partido en primeiro lugar. Temos tres exemplos, ten a súa elección. Polo tanto, temos de reloxo, para onde imos para aplicar un reloxo real que é indo para actualizar o paso do tempo. Temos este gran función Twitter. Isto-- sabe o que, espera. Nós imos facelo ir aínda. Bam. Aceptar. 

Temos este gran función Twitter aquí, isso-- sei, non? Vai ser gran. Vostedes están excitados? Isto vai contar o número de caracteres que deixou, por iso, se eu escribir agora, obviamente, inda di que 140, pero sabemos que non é o caso. E, a continuación, coa nosa última aquí, prema aquí para a festa. O que vai ocorrer é cando prememos, o fondo de vai cambiar as cores. Entón, vostedes teñen as súas opcións de cal deles quere facer primeiro. Eu prometer que vou levalo moi doado para ti. Eu sinto que todo o mundo é medio de só moi baixo chave hoxe. Entón, eu vou oriente-lo como imos aplicar todos estes. Se quere badalar en, iso é óptimo, pero eu sinto que todo o mundo é un pouco canso. Entón eu vou leva-lo a través destes exemplos. Temos algo que nós queremos facer primeiro? Anyone? Sen preferencias? Aceptar. Vostede sabe o que? Estamos en festa. Eu sinto que vostedes precisan dun little-- por iso, imos facer a un partido en primeiro lugar. Aceptar. 

Entón o que temos aqui-- é iso non debería estar alí. Agora é bo. Aceptar. Entón o que temos aquí é só unha páxina HTML simple que todos deben ser super familiarizado co dos seus dous últimos Serie de exercicios. temos o noso tipo doc aquí. Todos poden ver? Aceptar. Con estilo. Temos o noso HTML obviamente. Temos algúns cabeceira que é ligada a unha folla de estilo que só fixo o meu pia batismal agradable e grande e valente. Entón non se preocupe con iso. 

Temos algún corpo con un fondo Id, OK? Porque nós imos estar cambiando o fondo. Entón, cando estamos cambiando o fondo do noso corpo, lembramo connosco de dúas semanas cando estamos lidando con páxinas web. Tan bo ter iso. E nós temos uns Id equivale festa. Este h ref libra significa só que está indo a ir á mesma páxina. E click aquí para a festa, que é por iso que cando premer nel, debe cambiar as cores, por sorte. 

E entón temos algún script aquí que só está conectado a este partido js dot arquivo, que está baleiro, porque nós non fixemos nada aínda. E é tan triste. Pero moi pronto, que vai cambiar cores, e vai ser incrible. 

Entón, eu só vou oriente-lo caras mediante como podemos abordar isto. Entón o primeiro que podemos querer facer, se estamos cambiando o fondo o corpo, o primeiro que pode querer facer é realmente coller o que o corpo é, non? Entón, nós queremos ter suma, o noso fondo, e se observar, Eu só automaticamente pode comezar a escribir. Non hai nada de especial que cómpre facer para os nosos arquivos JavaScript. Podo comezar a declaración de variables, e declarando funcións aleatorias. E é forma moito máis libre. É como con C, que lle deu todo estas regras duras, e creceu, polo que estamos como, "ir por diante. Sexa libre. Fai o que quere. " E iso é o que é JavaScript. Polo tanto, temos unha información aquí. Co noso modelo DOM, sabemos que pode facer documento dot obter elemento, e notar aquí, o noso corpo ten un Id. Non? Así, podemos facer chegar documento por Id, e aquí está un simple. Cal é o noso Id que queremos aquí? Audiencia: Fondo. ALLISON Buchholtz-AU: Fondo. Perfecto. E punto e coma ao final. Iso non desapareceu aínda. Aínda que de seus punto e coma. Aceptar. Entón, ese é o noso primeiro. E cando nós clic algo, nós quere que algo aconteza, non? Entón, nós pode querer algunha variable que está á espera de un click. O que imos facer é que imos facer a nosa conexión máis semellante a un botón. Entón nós imos ter un botón que é igual a documentar dot obter elemento por Id. E se eu estou falando sobre o prema na ligazón ou click aquí para festexar enlace, o que podería miña Id estar aquí? Parte. Correcto. OK non moi malo ata agora. Toda a xente conseguir o que estamos facendo? 

OK, entón agora temos o noso botón, e queremos que as cousas cambien cando eu facer clic sobre el. Entón, se nós recordamos do noso PowerPoint, cousa moi sinxela que podemos facer é só botón dot onclick, non? E iso vai para igualar algunha función. Esta é unha función anónima. E iso só as-- en realidade eu son vai facelo un pouco maior. 

Entón o que eu fixen aquí é que eu estou dicindo, OK, cando prememos noso botón, o que é esta conexión que nós só referido, nós estamos indo a executar esta función anónima. Non necesitamos calquera entrada. Non nos importa o que o usuario di. Cando premer nel, estamos vai facer o que queiramos, que é cambiar a cor de fondo. OK? Entón é por iso que non temos ningunha entradas, só temos esta función anónima. E agora nós estamos indo realmente para escribir esta función. 

Polo tanto, hai unha morea de formas que podería xerar unha cor aleatoria. O xeito que eu fixen foi para xerar tres números aleatorios e convertela los para un RGB triple. Entón, iso só amosa que algúns cool cousas que, se vostede é como, "Oh, Necesito xerar un aleatorio número. "Se Googled-lo, iso é o que ía atopar. 

Entón, nós temos tres diferentes cousas, Var, non vermello de novo, verde. Non? Polo tanto, estas son as tres cousas que compoñen unha cor. Azul, vermello e verde. Con estilo. E o que podemos facer é que sabemos que debe estar entre 255, e se mirou para algúns xerador de números aleatorios, pode obter algo como matemáticas dot aleatorio, que se lle buscar sobre o tema volve a algún número entre cero e un. OK? E o que os números de facer o noso Triples RGB pasar polo medio? Cero e que? O que poden ir ata? 255. Entón, se a matemática de puntos aleatorios vai entre cero e un, como podemos querer converter isto? Audiencia: Time? ALLISON Buchholtz-AU: Si, exactamente. Así, o tempo é de 255. 

Audiencia: [inaudível] É como [inaudível]. ALLISON Buchholtz-AU: Math dot aleatoria. Audiencia: Cool. ALLISON Buchholtz-AU: Si. JavaScript só coida de ti. Aceptar. Así, podemos facelo para todos eles. Non? Math puntúan momentos aleatorios 255. Entendido. Con estilo. Así, a cousa é, isto pode non voltar un enteiro. Non? Quizais obter algún número entre cero e un, e que fai que sexa lixeiramente off, e os nosos RGBs non pode ser Carrozas. Precisan ser enteiros. Entón, se xa intentou iso, probablemente ter algún comportamento errático. Sería un pouco descolados. Entón, o que nós facemos é que queremos facer seguro que estes son redondeados, e podería redondear calquera maneira. I redondeado con piso. Entón, eu sempre fixo-se que redondeados abaixo. Pero saíndo como simple era só para obter un número aleatorio, como pensas que nós pode andar este número? É moi similar. Algunha idea? Entón, se acaso era só punto de matemáticas aleatoria, por que pensas que fariamos chan? Andar dot Math. E tamén se pode facer teito dot matemáticas. Rolda é unha especie de ambiguo porque non facer saber se redondear para arriba ou para redondear abaixo. Entón, normalmente sempre facemos matemáticas andar dot, teito matemáticas punto. Pero honestly-- 

Audiencia: O chan rolda abaixo? 

ALLISON Buchholtz-AU: Piso arredonda abaixo. E iso é só unha selección da miña parte. 

Polo tanto, agora temos os nosos tres números que foron xerados ao azar, e o que imos facer agora é que estamos só vai cambiar o fondo. OK? Entón, nós xa temos o noso fondo tipo de gardado neste elemento chamado fondo. Entón, o que vai notar é que, se vostede chanceou con iso, queremos cambiar o estilo. E este é o tipo de cousas que vostede Google e descubrir, gusto de como cambiar a cor. 

Pero a forma de acceder a esta cor é fondo do punto fondo do estilo do punto. Entón isto está dicindo dada este obxecto, fondo, que se refire a esta elemento Id alí enriba, imos ollar para o estilo dentro do estilo, imos ollar para o fondo. OK? E se ir e investigar sobre o tema, pode facer un pouco máis de sentido, pero isto é, basicamente, só dicindo: "Dáme este atributo moi específico do que teño definido anteriormente. " Entón, o que estamos cambiando a cara é algúns RGB, porque ten sentido. Utilizamos RGB triplica, non? E nós have-- quero que seguro que eu obter o número correcto de citas aquí. Entón, o que facemos é que temos RGB, e imos a-- isto é como concatenación, que é vermello. E entón nós queremos algunha comas. E entón queremos verde plus, a continuación, algúns coma, e un pouco de azul. 

Así estas vantaxes só quere dicir, como concatenación. Polo tanto, esta é só crear esta cadea que está a suceder dentro RGB. OK? 

Audiencia: [inaudível] máis axiña a un verde máis, a continuación, o vermello. 

ALLISON Buchholtz-AU: Si, porque eu errei iso. Esa é unha multa. Oh, espera. Non. Porque eu teño que seguro que teño todo isto dereito. Entón eu vou explicar en momento uno. Verde, azul, perfecto. Agora eu son feito. Creo. 

Aceptar. Entón o que é iso, é que o fondo vai ser definida como unha cadea. Non? Que é o que temos aquí. Vai haber algún RGB 255 comas 255 de cero coma, ou calquera número que ten alí. Entón, nós estamos facendo aquí, temos algunha cadea. E o que queremos facer, é que estamos especie de crear dinamicamente que cando nós realmente executar este programa. Polo tanto, esta é unha cadea. Ademais, encadea-lo con o valor que o vermello ten, que encadea-lo con un coma, que concatena-lo co que é verde, e etc., e así por diante. OK? Ata o final, que é a pechando esta parénteses RGB aquí. OK? 

Entón o que é que isto vai xerar algún comando realmente que é RGB de tres números que o fondo xa está definido para. OK? Entón imos ver se funciona. Eu espero que fai, porque se non, eu vou estar moi triste. Ah, non. OK, espere. Definitivamente fondo fondo do punto estilo dot. Estou definitivamente ausente algo só pequena. Vostedes non odian tanto? Cando é só unha pequena pequeno erro? Fondo todopoderoso. RGB. 

Audiencia: [inaudível] ALLISON Buchholtz-AU: No. Intento iso antes da clase. Teño todo o que fixo antes clase, no caso eu era como, "Espera, o que foi que eu fixen de malo?" Porque eu era como, "Eu, probabelmente, romper iso nalgún momento. " Ademais verde. Todo parece que está concatenado correctamente. Aceptar. 

Audiencia: [inaudível] 

ALLISON Buchholtz-AU: Oh, alí vai. Iso é o que eu precisaba. Olle para iso. Tiffany para rescatar. Perfecto. Aceptar. Agora imos ver se funciona. Meu Deus. Aceptar. Aguante. 

Audiencia: Space tras a segunda plus. 

ALLISON Buchholtz-AU: Cal? Oh, espera, espera. Desgaste espazo? 

Audiencia: Second máis en a concatenación verde. ALLISON Buchholtz-AU: Oh. Audiencia: Non hai ningún espazo despois do máis, si. ALLISON Buchholtz-AU: Vostede Non é necesario que, mas- Audiencia: Oh, non? ALLISON Buchholtz-AU: Parece moito. Audiencia: Aceptar. Aceptar. 

ALLISON Buchholtz AU: Imos ver se funciona. Aceptar. Eu, obviamente, estou fallando en esta demo, que me fai lembrar dunha charla na outra semana, pero sei que isto vai funcionar. Sei que iso vai funcionar. Tan preto. A non ser que eu accidentalmente borrado meu script nun presente. Non, é o punto de partido js. Aceptar soster. Vou copiar este, e eu tamén son só vai borrar todo, porque eu tiña esa de traballo máis cedo. 

Eu prometer que funciona. Se non, eu vou te amosar o que é de Tommy. E alí. 

Audiencia: Está facendo referencia a partido dot CSS, e é unha festa de punto js. 

ALLISON Buchholtz-AU: Ah, ben aquí é js punto de partido. OK, o que eu fixen diferente? OK, imos ver se funciona agora. Bam. Entón, eu non sei o que eu fixen de forma diferente, pero iso é o que debería ocorrer. Kind cool. Prema no presente, como, para sempre. Pero podemos probar e ver o que eu fixen diferente que este. Eu non sei canto a vostedes, pero esta mira basicamente o que escribín. Había probablemente unha desaparecida punto e coma nalgún lugar é a miña cousa. De feito, despois, eu creo que estaba falta un punto e coma aquí, en realidade. Pero eu non podía velo porque era fóra da pantalla. 

Pero se observarmos, iso é moi moi exactamente o que eu escribín. Creo que, probablemente, a parte máis difícil de esta é só unha especie de esta cousa certa aquí, a comprensión o que está facendo alí. Estes tipos de cousas que aprende realmente só buscando por e honesta só tentando. Se pensas que hai algún atributo, probablemente hai. Entón, probalo. Mira o que acontece. Como dixen, hai unha morea de experimentación con JavaScript, e PHP, e todo o que material, e CSS especialmente. Esa é a única verdadeira xeito de comprende-lo. 

OK, entón despois dese fiasco con festa js punto, temos dúas outras opcións. Temos reloxo ou Twitter. Ambos son interesantes. Quizais non tan divertido como partido, que tivo un pouco de efecto estroboscópico legal cousa ao final. Vós ten algunha preferencia? Audiencia: Clock? ALLISON Buchholtz-AU: Clock? Aceptar. Con estilo. 

Entón, de novo, temos a nosa arquivo JavaScript baleiro. E como vemos aquí, nós ter algún HTML moi sinxelo. Temos a nosa folla de estilo, que só formata o que debe ser parecido. Temos a nosa div con un Id de reloxo, que só di, "este debe ser un reloxo." E nós temos o noso enlace ao noso arquivo JavaScript que realmente vai xerar o noso reloxo para nós. Porque a cousa legal, é que pode definir JavaScript para actualizar automaticamente si. OK? Entón, en vez de esperar que o usuario para bater Actualizar unha páxina de modo que pode obter horario actualizado, JavaScript pode actualiza-lo con todo, gusta. 

Entón, como acontece co noso último, queriamos para acceder ao noso fondo, non? Entón, o que pensas que pode ser o primeiro que queremos facer aquí? Se nós estamos saíndo este tipo de paradigma aquí? Nós probablemente vai querer acceder ao noso reloxo, non? Entón, nós temos algúns var reloxo, que equals-- que é o que pensas que vai ser? Documento dot obter elemento por-- Eu tamén amo Sublime-- Id ea nosa Id é o reloxo. Punto e coma. Teño que estar seguro de obter estes semicolons esta vez, porque eu sinto que foi o problema da última vez. OK, entón, como eu estaba dicindo coa tentativa de ter Javascript refrescar-se, hai esa gran función, I sei que veu a cadra o ano pasado, Eu non estou seguro que vén a cadra para este pset, pero chámase intervalo definido. E iso é realmente moi legal se vostedes fan nada co tempo ou ir información actualizada. Nun sitio web para a final proxecto, esta é probablemente unha función que quere obter super familiarizado. Así que definir o intervalo fai é que imos darlle unha función, e cantas veces debería chamar esa función. OK? 

Polo tanto, neste caso, nós só estamos indo a crear algunha función anónima de novo, OK, que se ve nosa data, e noso tempo, e entón actualizar as cousas e amosar-lo. Entón, imos preocupar con iso. Nós imos ser como xerar reloxo aquí. Pero o que necesitamos é como moitas veces para actualiza-la. Polo tanto, neste caso, é só milisegundos. Entón, nós só estamos indo a facer 100 milisegundos. Por suposto, totalmente arbitraria. Se quería para actualizar moito máis lentamente, o que puido. Podemos xogar co rango do partido, como é grande o noso rango é despois de chegar un reloxo a traballar, o que espera que eu vou chegar. Polo tanto, este é só dicir, "Aceptar, call esa función a cada 100 milisegundos. " OK? Isto é todo o que fai. 

Entón, o que queremos que a nosa función para facer é que queremos ter algunha data e algún tempo que se imos ter. Así, podemos comezar coa nosa data é igual a algo, e noso tempo é igual a algo que non sabemos aínda. Ou, en realidade, só necesitamos data, porque data incluirá todo. De novo, se acaba de Google nada sobre o que quere facer, se escribir, "Aceptar, Eu quero ir o tempo vía JavaScript, "it lle vai dar este gran función chamada data get. Literalmente, a maioría das cousas que quere facer, JavaScript terá Lo feito para ti xa. Polo tanto, é literalmente como novo obter data, que é creating-- ou nova data, rather-- que está a xerar algún obxecto que representa unha data. 

E o que imos facer aquí é iso eu é-- vou escribir isto, e, a continuación, explicar o que fai. Entón, eu vou estar seguro que eu teño ese dereito. 

OK, entón o que esta función fai, é que somos só crear o HTML que é realmente indo a ir dentro do noso Id div de reloxo. Entón o que é que isto vai ser feito é só xerar algunha corda, OK? Isto é, entón, será transplantadas no noso HTML. Basicamente o que vai facer é o que quere que nós-- que vou amosar-lle é que o que dicimos é HTML, imos substituír este texto aquí con todo o que é HTML. Entón, iso permitirá que -Nos a cambiar o noso reloxo de punto HTML de ser só o texto deste debe ser un reloxo, para realmente amosar os números e as cousas que nos importa aproximadamente, e realmente pode horas. 

Entón, o que nós imos facer é que estamos comezará a xerar este HTML. Así, do mesmo xeito que usamos para facer máis é igual para enteiros, agora pode facelo por cordas, agás que vai concatenar-los. Non? Como vimos con punto de partido js, ​​este só concatena todas estas cousas xuntas. Así, pode concatenar diferentes anacos de HTML desde variables, ou anacos de cordas que escribe para fóra mesmo, e iso só realmente permite que dinamicamente xerar HTML, que é moi legal. Entón, se ten algo moi usuario específico, iso pode permitir que faga iso. 

Polo tanto, temos HTML, para que eu vou tentar garantir que teño ese dereito. Entón, imos facer algunha cabeceira h1. Entón, o que é importante entender aquí é que se trata, en realidade, só HTML. Non? Estamos escribindo real Código HTML aquí, é non só unha secuencia na posición normal xeito que queremos pensar niso. Entón temos un pouco de HTML. Esta é considerada unha secuencia aquí aínda. E facemos data dot-- nós quere chegar nas nosas horas. De novo, se estaba a ollar por riba de calquera cousa sobre a data, ía dicirlle todos estes son os atributos que ten data. E aquí está o que pode usar nel. Por iso, probablemente, ten cousas como obter horas, e obter minutos, e obter segundos, e obter milisegundos, e quen sabe o que máis teñen. Pero se ollar para o documentación, todo iso vai estar alí. 

Polo tanto, temos obter horas, e logo, queremos concatenar que com-- eu son vai cambiar isto aquí. Entón, se estamos xerando agora, estamos realmente xerando o tempo, non? Temos horas, e, a continuación, o que é entre horas e minutos? Ten un punto e coma, non? Entón, nós queremos facer un punto e coma aquí. E entón nós queremos comezar a nosa minutos, de xeito que do mesmo xeito que temos data dot obter horas, como podemos obter os nosos minutos? É literalmente data dot obter minutos, o que eu medio que me gusta. É como, "Oh, no; ¿Como que o meu minutos? " Acaba de chegar en miñas minutos. 

Aceptar. E despois temos outros dous puntos aquí. E entón, se queremos obter a nosa segundo, como podemos obter a segunda? Data dot obter segundos. Creo que é moi legal. E o que é importante entender, é que nós tamén Debe pechar nosa etiqueta HTML aquí, porque inda debe ser HTML válido, polo tanto h1. Con estilo. 

Entón, despois diso, podemos facer reloxo dot HTML interior é igual ao HTML. OK? Entón recorda que eu dixen HTML interior basicamente leva todo o que é entre o dúas marcas que falamos e insercións ou manipula todo o que está aí dentro? Entón, o que provocará, se Imos volver para o noso reloxo, é que se refire ao reloxo todo dentro deste div. Este é o código HTML interna div deste reloxo Id. E así que vai mudalo para o HTML que acaba de xerar, que, o que, esperamos, espero, espero, mostrará o tempo agora. Imos ver. Claro. Tantas cuestións técnicas. Apenas-- de Allison que eu son fóra do meu xogo hoxe caras. OK, isto funciona. reloxo de punto HTML interior. Foi HTML Really? Ademais, este é o que pasa. Cando non pode ver algo, basta ollar para o seu código fonte. Aceptar. Queres coñecer un traballo legal en torno que nós imos facer aquí? 

Audiencia: Podes facer maiúsculas? As maiúsculas? Porque ten obter horas, e logo, obter minutos. 

ALLISON Buchholtz-AU: It é obter horas e get-- oh. Vostede é-- estrela de ouro. É todo unha proba, persoal. Eu prometer que estaba a traballar antes da clase. 

OK, pero algo legal saber é que pode Também-- se, por veces, seus arquivos externos son quedando un pouco tolo, tamén se pode simplemente poñer-los en liña recta aquí, o que tende a arranxar as cousas. Excepto isto é como realmente feo. Claro formatar todo. Asegúrese de que está todo ben. Aceptar. 

Quería facer todas as demos legal, e eles simplemente non está a traballar fóra. Aceptar. Script var reloxo. De calquera forma, o que é importante é que esta é a forma xeral que formatar JavaScript. Como verás, pode ser moi mimado, por veces, mesmo cando era literalmente traballando en dous segundos atrás. Ou non dous segundos atrás, pero moi, moi pouco. 

Entón, para dar a coñecer o que debe ser parecido, e para demostrar que non son tolo, e que todo é o mesmo, isto é o que debe ser parecido. Está indo só para facer esta parte superior aquí, e se ves o código fonte da páxina, se observa, fixo algúns as cousas máis tolas, eu simplifiquei-lo. Ademais, o crédito para Tommy McWilliam, que, de feito, me axudou a crear estes exemplos, que é por iso que eu sei que eles traballan. Porque Tommy é un mestre JavaScript. Pero se observarmos, temos algún set. Temos a nosa función de reloxo aquí. Isto é todo o que JavaScript que acaba de escribir, ou parte dela. Nós só escribiu este aquí. E ten un extra función que só almofadas-lo poñendo un cero antes dunha carta ou antes dun número, se é só un deles. Entón, se observar, iso é moi moi exactamente o que acabo de escribir. Ten algún reloxo variable que ten o noso elemento, obter elemento por ID, que é reloxo. Temos o noso rango do partido función, que é unha función anónima que executa todo isto. Temos algúns comezando secuencia de HTML que logo, de forma dinámica xerar por algún cabeceira h1, concatenando con obter as horas, máis noso colon, ademais de estar os minutos, ademais doutros colon, ademais dos nosos segundos, e, finalmente, o HTML final para el. E entón nós actualizamos noso reloxo dot HTML interior para HTML, e actualiza cada 100 milisegundos. OK? 

Mira, eu prometer que eu non son tolo. Eu non sei. Eu non sei por que non gusta de min. Eu sinto que ten o mesmo aspecto, pero aparentemente el me odia. 

Entón, imos ver no terceiro round vai mellor. Estamos a piques de ver. Eu non sei como é que isto vai pasar. Está todo o mundo, polo menos, a recibir o contras, como só o tema xeral de JavaScript, aínda? Espero que sexa polo menos útil, máis de amosar que é un pouco mimado. Pero o conxunto de problemas será moi divertido. Vai ser gran. Non vai ser tan aburrido como este, eu non creo. Vai realmente chegar a ver as cousas moi legais. 

Entón, por último, pero non menos importante, imos tratar Twitter un. Estou realmente con medo agora, rapaces. Eu non sei como isto vai pasar. Pero só para darlle un pouco máis me gusta, e esta é realmente cordas e manipulando insumos, o que nós imos facer é, se observarmos aquí con HTML-- este ten algo more-- temos algunha área de texto, o que corresponde a esta área de texto aquí. OK? E iso ten un ID de texto. Nós reestilizado-lo un pouco con algunha ancho e alto que temos predeterminado, e temos H1, o que só é noso único cabeceira que representa nosos personaxes esquerda. Demos algúns Id de caracteres restante, e entón temos algún script aquí, que eu son realmente esperando terceira vez do o encanto aquí, persoal. 

Entón, o que queremos facer, Na mesma liña xeral que fixemos con js reloxo de punto e dot partido js como temos notado, é que comezamos por realmente agarrando as cousas que nos interesan, non? Polo tanto, neste caso, hai dous cousas que nos preocupa, OK? Unha cousa que estamos, en realidade, unha especie de mirando para dentro e deseño de datos de, e unha cousa que estamos realmente cambiando. Polo tanto, non é o noso HTML. Se esta é a nosa páxina web aquí, o que é os datos que nós estamos mirando? Será o que quere o texto nas nosas caixas, non? Entón, calquera cousa que eu escriba aquí. Iso é o que quero saber, ou iso é o que quero ollar. E o que vai ser cambio na nosa páxina web? Os caracteres restantes. Así, do mesmo xeito, queremos comezar por arrincar variables que realmente prender eses elementos. OK? Entón, se temos algún var esa é a nosa área de texto, e nós temos algúns var que é residual. Non? Entón, estes van manter esas dúas cousas. Así, o mesmo tipo de cousas, documento dot-- OK, eu son indo para garantir que este é funcionará desa vez. Estou moi inflexíbel. OK, por iso, se queremos que o noso área de texto, de acordo ao noso HTML, que é o noso identificador? Cal é a nosa identidade? É só pasar a ser de texto, porque iso crea a nosa área de texto, OK, ea nosa Id é o texto, de xeito que é como podemos coller o que está aí. OK, punto e coma. Vou ser super que sobre o tema, porque quero que isto funcione esta vez. OK, facer o mesmo, obter elemento por Id. Realmente estou querendo saber o que ten causado os outros dous para interferir. OK, entón, nun presente, o que queremos para acceder? Cal é o noso Id aquí? Temos outro Id en noso HTML, o que é? Audiencia: caracteres restantes. ALLISON Buchholtz-AU: Personaxes resto. 

Aceptar. Con estilo. Entón, eu estou indo só para escribir esta moi rápido. Eu só vou escribir isto en segundo. Así, a área de texto. O que é interesante é B function-- alí moitas funcións que non só corresponden á súa rato, pero o seu teclado. OK? Entón pode dicir cando calquera tecla é preme, pode facer cousas deste tipo. Entón, o que estamos a usar chámase a tecla para arriba, o que di, "se preme calquera tecla teclado, cando o usuario ten levantado dedo no botón, e a clave converteuse en unpressed, entón imos facer algo. " OK? Entón, iso ten sentido, non? Porque cada personaxe digitamos, imos ter que levantar os nosos dedos off da mesma, polo que, cando a clave sobe, podemos saber para diminuír nosos personaxes restantes. 

Polo tanto, temos algúns en clave para arriba, e do mesmo xeito, imos dicir, "OK, cando facemos iso, nós imos crear algunha función que vai levar e ", neste caso, eo que queremos facer é calcular o número restante. OK, entón imos comezar creando unha variable. Polo tanto, temos algunha variable r, que vai representar cantos caracteres que nos queda. OK? Sabemos que imos comezar con 140, e se queremos saber, imos dicir, a lonxitude deste cadea que foi de entrada, Tendes algunha idea como podemos facelo? Só en base fóra do obvio cousas, como se quixésemos horas, acostumabamos estar horas. Sabemos que o noso obxectivo é área de texto, pero podería caras pensar no que podería vir despois dela? Calquera ideas? 

Así, tipo de agasallo de menos intuitivo, pero é valor de lonxitude do punto. Entón, só me dar algunha atributo de valor é, en realidade, a lonxitude desta secuencia. Entón, vai dicir: "OK, eu estou buscando nesta secuencia enteira dentro da área de texto, e eu vou dizer- canto tempo é ". Porque se recordamos cordas son realmente só matrices, por iso, pode coller a lonxitude deles. Polo tanto, temos que. Con estilo. 

Entón, o que queremos facer é nós Nunca máis quero facer que o usuario a entrada de máis que 140 caracteres, non? Porque se nós dicir como, "Oh, vostede só ten ese tanto restante, " e, a continuación, deixar los facer iso De calquera forma, temos que chegou a mentir. E este é outro cousa que JavaScript pode ser realmente bo para, é a validación do usuario e asegurarse de que o seu usuario encaixa dentro de todas as regras que teña solicitado a eles. Entón, se quere facer as cousas, como facer Asegúrese de entrada de alguén a súa dirección de correo electrónico, ou asegurarse de que, cando eles escribir dous contrasinais, combinan. JavaScript pode facelo. Faría algo así ", cando o formulario é enviado ", ou como, "Cando botón Enviar Formulario é premendo, comprobar todas esas cousas ". E podemos facelo JavaScript. Entón, iso é o que nós imos facer aquí. 

Entón, o que podería ser unha forma de comprobar se eles foron máis de 140 personaxes? O que vai ocorrer coa noso valor de r se tentar? Será negativo, non? Ou que vai ser menos que é igual a cero. Así, podemos utilizar un se iso for Así como todo máis. OK? E nós temos algunha área texto dot valor, e o que estamos facendo aquí é que estamos só cutting-- o que é? Sentímolo. Este, nós só queremos volver falso. Quedei confuso. Todo frangalhos de cousas non funciona. OK, nós só queremos return false, e entón nós quere amosar o restantes personaxes, non? Así, co reloxo, fixemos algo con HTML interior, non? Onde nós configure-lo igual a algún variable, entón o que podemos facer aquí? O que estamos cambiando o HTML interior de? 

Audiencia: Resto? 

ALLISON Buchholtz-AU: Estamos cambiando resto. Todo ben, eo que nós quero configurar-lo igual? Será r, porque iso deben ser os nosos personaxes restantes. OK? Entón, eu estou moi nervioso a ver se isto funciona agora, pero imos ver. Deixar isto. Iso é moi rápido. [Inaudível] OK. Unha vez máis, eu estou indo só para te amosar. Por algunha razón, mina non decide traballar, pero o que eu vou lle amosar é que este é-- oh eu debería poñer isto en. OK, nós observamos o mesmo tipo de cousa aquí, quedando a área de texto. 

Ademais, se aviso cara, se hai sempre algo que quere facer, e non sabe como facer la, basta con premer en Ver o código fonte da páxina, e eles van che dicir. Ás veces vai ser criptografada. Para a súa pset, nós cifrar todo, por iso, só se parece rabiscos. Pero se hai sempre un realmente sitio legal que lle gusta, se só clic en Ver código fonte da páxina, vai dicir-lle como facelo. Entón, de novo, traballar máis intelixente, non máis. E como ve aquí, todo esas cousas son as mesmas. este aquí só ten algún substring que, non me lembro exactamente o que este fai. Pero, obviamente, leva algún substring do valor de cero a dez, e retorna false o que debe deixar o usuario de inserir máis, e entón, obviamente, actualiza o código HTML interna alí. 

Con estilo. Entón grandes recortes a partir de hoxe, experiencia, ollar para o código fonte porque vai axudar moito, e todo o mundo, ás veces JavaScript Pode ser difícil de traballar e non fai sempre funciona do xeito que espera que el, pero só tentando manter porque eu prometer que vou. Eu prometer a todos estes exemplos estaban traballando antes da clase. Non entendo o que pasou. Eu literalmente teño todo o mesmo. 

Só unha cousa que eu só quero amosar a vostedes que poden ser super útil é em-- o que estaba funcionando antes? Temos partido para o traballo, non é? Creo que si. Si. Fixemos. Impresionante. OK, entón unha cousa que vostedes deberían saber é o rexistro da consola que eu falei. Entón consolar rexistro punto de Ola. Polo tanto, este é o tipo de Equivalente JavaScript de printf. Entón, se quere inspeccionar súas variables ou ver o que está pasando alí, o que podes facer é, se nós inspeccionar elemento, é o que quere ir a, e vai para consolar, vai ver que impreso Ola. 

Así, poderiamos telo imprimir todo o que queriamos. Se quixésemos-la para imprimir fondo fondo do punto estilo de punto, debemos ser capaces de ver o RGB triple que vén á tona. Ou non. Eu esquezo exactamente como imprimir unha variable así, pero ten que ser capaz de imprimir cousas así. Isto será moi útil para a súa pset cando estás a manexar Coordenadas ou outros adornos. Entón, eles tamén cambian esta peza en clase. Isto é distinto dos últimos anos, así só ser simpático cos seus TFS, ou os TFS en horario de oficina ao contrario, porque somos tipo de aprendizaxe xunto con vós. Pero o rexistro da consola foi super, super útil para JavaScript no ano pasado. Así, o amor dela. Saber como usalo. É máis fácil de usar que GDB, de xeito que debe ser, polo menos, un punto positivo. Pero grazas a vostedes están tendo comigo. Lamento que o meu exemplos para algunha razón só non quería cooperar comigo, pero eu espero que axudou tipo de obter-lle un pouco máis na zona de JavaScript. E envíe me todas as súas preguntas para a próxima semana, para que eu poida ser super reparada, e eu vou traer doces e mesmo extras doces, porque iso era ridículo. Pero vostedes son óptimos, e ter unha semana incrible.