ALLISON Buchholtz-AU: All todos direita. Bem-vindo de volta à seção. É a nossa penúltima secção. É tão triste. Eu não sei o que eu vou fazer sem ver vocês toda segunda-feira. Eu acho que devemos só-- Talvez pudéssemos apenas encontram-se aqui e jantar ou algo assim. Eu não sei. Vou trazer comida em vez. Nós vamos apenas falar. Mas sim, na próxima semana vai ser a nossa última seção. Na mesma nota, você tem um teste na próxima semana. Eu sei que eu esqueci de fazer o meu, como, duas semanas de antecedência, na semana passada, Mas espero que vocês sabia que isso ia acontecer. Esperemos que este é um dos últimos midterms para vocês para o semestre. Mas que vai cobrir toda a material que temos ido mais. Portanto, não é como você pode simplesmente esquecer cerca de quatro laços ou variáveis. Porque nós aprendemos aqueles no início, aqueles são obviamente jogo justo para o seu quiz. 

Vai ser o mesmo formato, mesmo comprimento, de modo que você já está acostumado com isso. Não vai ser codificação por problemas de mão, talvez algum verdadeiro falso, talvez alguma resposta curta. Então você deve ser familiarizados com o formato, especialmente se você levar os testes práticos. Mas como eu digo aqui, é cumulativo, mas estamos definitivamente vai se concentrar em coisas de semana seis em diante. Então, nós estamos provavelmente não vai perguntar-lhe sobre quantos bytes são em cada tipo ou esses tipos de coisas, mas estamos provavelmente vai ser interessado em coisas como listas ligadas, ou diferentes estruturas de dados, ou algoritmos diferentes que nós já conversamos sobre. Portanto, verifique se você está realmente -se sobre aqueles, e se você precisa de recursos, aqui está um monte de recursos. Eu só te dei tipo de uma lista rápida lá. 

Na próxima semana será questionário rever durante este tempo. Então, se você tiver alguma dúvida ou temas específicos, coisas específicas sobre o quiz que você gostaria de passar por cima, por favor enviá-los para mim antes do tempo para que eu possa tipo de preparar algum material para isso. E para além disso avaliação seção, vamos também estar segurando o curso à escala avaliar como fizemos da última vez. E isso vai ser feito pelas mesmas pessoas. Eu não sei se isso faz com que seja melhor ou pior, mas vai ser de mim, Hannah, Davan, e Gabe novamente. Então, se você quiser vir ver todos nós brincadeiras uns com os outros e orientá-lo através questionário avaliação, você deve definitivamente chegar a essa próxima segunda-feira também. Então você vai ter um congestionamento de segunda-feira embalado de avaliação questionário, o que é bom porque então você tem terça-feira para processar através de tudo. 

Mas definitivamente fazer check- estes recursos. Study.csv.net é, de longe, I penso, um dos mais úteis, principalmente porque ele tem um monte de código de exemplo, ele tem todos os Pontos de Poder com todas as notas sobre ele, que são realmente o que eu desenhe mais dos meus materiais de seção de. Se há alguma coisa no anterior seções que eu possa ter enviados que você não pode ter começado, é só me avisar. Como código de exemplo da semana passada, se alguém não conseguir isso, apenas me e-mail ou vir falar comigo, e eu vou ter certeza de que você conseguiu isso. 

Então, com isso, hoje vamos estar falando de JavaScript. Então aqui nós Tommy, quem eu era apenas conversando com você na noite passada. Eu amo Tommy. JavaScript é o seu favorito língua, como ele diz aqui. Eles vão tentar dizer-lhe que ele é não é o melhor, e eles vão estar errado. Então, Tommy é um mestre JavaScript. Eu não estou muito em sua nível, mas eu era como, "Tommy, como faço para ensinar essas crianças javascript? " Então, eu tenho algumas dicas, então espero que eles funcionam. 

Assim, um par de coisas a saber é que JavaScript é um script do lado do cliente língua, por isso enquanto o PHP é algo que consideramos mais do lado do servidor, foi fazer o upload para o servidor, compilado e executado lá. Este é executada em sua própria máquina. OK? Então você carregar alguma página JavaScript, e ele é executado em sua máquina. A sintaxe é muito semelhante ao C e PHP. Nós vamos passar por alguns exemplos de JavaScript, e você vai ver que o nossa forma de falar sobre variáveis, loops, e as condições são muito semelhantes. OK? O fato de que eles são tão semelhantes é provavelmente vai tropeçar alguns de vocês -se, em alguns casos, só porque você vai incorporar um pouco de C onde não deveria estar. Talvez você tentar e digitar algo quando não deve ser digitado. 

E com isso, uma coisa a sabe é que o JavaScript é um tipo dinâmico linguagem, como PHP. Então, se vocês lembram da seção na semana passada, quando estávamos tipo de fazer nosso curso intensivo PHP, vimos como uma seqüência de um poderia ser transformou-se em um int um, e assim por diante. O tipo de suas variáveis são determinados em tempo de execução, assim eles podem mudar ao longo do o decurso do programa, e, da mesma forma que nunca realmente declarar tipos de variáveis ​​PHP, nós vamos estar fazendo a mesma coisa aqui, onde nós não somos realmente controlando os tipos de nossas variáveis, por assim dizer, como nós fazemos em C. 

E então uma coisa que é muito legal é que você pode erro verificar através do console, com este grande função console.log, que permite que você imprima diferente variáveis ​​ou objetos que vamos falar. Assim como na semana passada, quando eu era como, "utilizar esta função", com despejo a partir do seu pset esta é uma função que você deseja usar, console.log. Fiquei tão surpreso quantas estudantes em horário de expediente não sabia sobre a função de despejo. E eu era como, "caras, essa vontade tornar a sua vida muito mais fácil. " 

Tudo bem, de modo que era uma espécie de apenas uma coisa breve, como sempre, temos exemplos. Eu sei que vocês amam aqueles. Então aqui está um exemplo de uma muito simples arquivo JavaScript aqui. Por isso, só vai criar este pop-up que diz, "Olá mundo", quando você entrar na página, mas vamos tentar caminhar por este um pouco. Então, obviamente, este é apenas como o seu index.html normal. Assim, apenas o nosso modelo normal aqui, e temos HTML, temos a nossa cabeça, e, assim como com CSS, como nós incluíram alguns arquivo fora, certo? Temos algum tipo de script texto que é JavaScript. E a fonte é hello.js, que está aqui em baixo. Este é todo o arquivo de hello.js. E então nós temos alguns título e alguns HTML corpo que nós realmente não se preocupam. 

O que acontece é que, quando nós carregar esta página, ele executa automaticamente este script. OK? Então JavaScript vontade executar automaticamente. Então, o que ele vai fazer, ele vai para ir imediatamente e executar isso. E ele vai dizer ", alerta. Olá Mundo. " Quais alerta é a função que realmente gera essa caixa. OK? Então, é uma espécie de tudo abrangem. Não há nada extra que teve para fazer além de apenas alerta, e, em seguida, o que queríamos dentro da nossa caixa de alerta. OK? Então, isso é apenas um super simples exemplo do que JavaScript pode fazer. 

Um dos muito legal coisas, como veremos, JavaScript é que permite que você para manipular suas páginas web, sem ter de recarregá-los o tempo todo. Então, se você want-- por exemplo, se você está pairando sobre alguma coisa, se vocês já têm visto como barras de menus, ou quando você passa o mouse sobre algum tópico, um menu drop-down aparece, isso é por causa de JavaScript. OK? Então você não está recarregando o todo página para obter este menu para mostrar-se, você está apenas à procura de algum específico ação que o usuário tenha tomado, que são chamados de eventos que nós vamos chegar em, e uma vez que você ver que, você diz: "OK, editar algo sobre este página e torná-lo diferente, mas apenas editar essas coisas específicas. Não recarregue a coisa toda. " Por isso, na verdade, é muito mais agradável, e você não tem que recarregar suas páginas, e é muito legal. 

Então declarações de variáveis, assim você pode tipo de ver, Eu coloquei em cima aqui, vagamente digitado. Portanto, este é muito parecido com PHP. Nós não precisamos de dizer JavaScript que tipo nós somos esperam cada uma destas variáveis ​​a ser. Eles podem ser o que tipos nós queremos. Então você percebe neste caso, declaramos -los de maneira muito simples, apenas com "var" e, em seguida, o que queremos nosso nome da variável a ser. Uma coisa a notar é que, quando você var colocar na frente de um nome de variável, -lo localmente escopos-lo. OK? É totalmente razoável para você completamente apenas apagar a var e apenas se s é igual a CS50, e que seria apenas uma variável global. OK? Assim, você pode inicializar as duas coisas, só depende de como você quer. Então, se você está inicializando -lo dentro de uma função, e você quer que a variável ficar com escopo dentro dessa função, você vai querer fazer algo como var nomear uma variável, contra, se você quer que ele escopo global, o que você pode apenas fazer o nome de a variável e em seguida tudo o que você gostaria que ele defina igual a. OK? 

Este é o tipo de coisa legal aqui em baixo, porque se observarmos nossa variável b começa como verdade. E o que isso pode does-- alguém me diga o que isso faz? Portanto, temos alguns alerta. O que tipo de b ser no começo? AUDIÊNCIA: Boolean. ALLISON Buchholtz-AU: Boolean. Direita. E, depois, voltar a atribuir b para esta cadeia, certo? Assim, pois, aqui, que tipo de b ser? Seria uma corda, certo? Então, o que é importante aviso é que, em c, nós quase poderia nunca fazer algo parecido. Nós teríamos que ter uma variável, lançá-lo como algo mais, talvez fazer alguma função com um dois i, ir de uma carga em um inteiro. Mas se notar aqui, b muito facilmente muda digita. 

AUDIÊNCIA: Espere, então você pode apenas ser como, "fazer b um número inteiro?" 

ALLISON Buchholtz-AU: Yeah. Você pode apenas realocar b para um inteiro. 

AUDIÊNCIA: Sério? 

ALLISON Buchholtz-AU: Yeah. E então seria um int. Assim, suas variáveis ​​podem mudar ao longo do o curso do programa também. Eles não são estritamente digitado. É muito vagamente digitado. OK? Basicamente suas variáveis ​​podem fazer o que eles querem, como nós meio que viu com PHP. Eles podem fazer algumas coisas malucas, então é importante ser muito cuidadoso. Nome suas variáveis ​​bem. Se não, faça, de repente, você vai ser como, "Espere, eu pensei que este era um corda, e agora é um int, e eu realmente não estou certo o que está acontecendo aqui. " Portanto, este é apenas um exemplo simples de mostrando como uma variável pode facilmente alterar seu tipo sobre o curso de um programa. 

OK. Portanto, este deve olhar super, super familiar. Então, esses são os nossos laços em JavaScript. Eles são exactamente os mesmos, excepto para em vez de quatro int i é igual a zero, poderíamos dizer apenas var i é igual a zero. E então nós poderíamos ter o nosso mesmo tipo de condição, mesmo tipo de atualização, i plus plus funciona muito bem. Assim, quatro são os mesmos, whiles são os mesmos, e fazer whiles são exatamente os mesmos. Mesmo tipo de formato geral. Notamos, quatro, parênteses, colchetes, é tudo a mesma coisa. Também haverá ponto e vírgula quando chegarmos ao exemplo de código. Você verá que é muito o mesmo que c. 

Para declarações de função, novamente, muito semelhante. Temos alguma função que apenas diz que é uma função e, em seguida o nome da nossa função, e as entradas. E novamente se notar, nós temos nenhum tipo aqui qualquer. Certo? Não temos nada a dizer que estes precisam estar inteiros ou duplos, ou carros alegóricos. Eles podem ser o que quiserem. O importante é perceber que precisamos escrever função de antemão deixar JavaScript sabe que esta é realmente uma função. 

Portanto, esta é apenas uma soma simples função que retorna x ou y, e, em seguida, o que também é legal é que você pode, na verdade, atribuir uma função a uma variável. Portanto, neste caso, a soma é agora função que realmente faz soma. Então, se você observar aqui, temos função, o nome da função, entradas. Certo? Aqui só temos a função e insumos. Então, isso é chamado de uma função anônima. E isso é algo que deve ser novo para a maioria de vocês, se não todos vocês. Então, basicamente o que meios é que nós não precisa nome de nosso função neste caso. Nós podemos apenas dizer, "OK, eu vou têm essa função que executa, aqui são suas entradas, e é aqui o que vai fazer. " E, especialmente quando você está atribuindo uma função de alguma variável que você está indo para manipular, Você não precisa necessariamente preciso nomeá-lo porque você vai estar se referindo pelo presente variável nome, não pelo o que quer a função foi realmente chamado. OK? 

Então, se nós vemos aqui, nós ter alguma variável soma agora que é igual à soma de três e cinco anos. E gostaríamos de conseguir isso. E isso seria apenas ter algum alerta, três mais cinco é igual ao número. Isto além de só vai concatenar seja qual for a nossa resposta foi para a cadeia. Também legal, além de pode concatenar strings. 

Para JavaScript, como com PHP, HTML, CSS e como dissemos, um monte de que nós estamos nos levando as rodinhas aqui e vocês têm um monte de know como realmente entender essas coisas. Eles são um pouco diferentes, mas eles não são tão estranhos e que você não pode Google coisas ou procurá-los on-line com escolas w3. E nós estamos realmente esperando você caras para, tipo, experiência e aprender no seu próprio país. Então, eu sei que isso pode parecer um pouco menos completo do que algumas das coisas que c o que fazemos, mas que é, na verdade, por uma razão. Mas espero que não seja muito diferente, e não é esmagadora. 

Então matrizes em JavaScript, novamente muito, muito similar. Certo? Temos algumas matriz variável que é igual a colchetes vazios, e isso é apenas uma matriz vazia. Isso é muitas vezes chamado notação de matriz literal. Isso é apenas uma coisa que nós chamamos. Se formos ver matriz dois aqui, nós temos algumas literal matriz que tem três elementos, certo? E então nós temos alguns terceiro elemento var que é alguma variável que é apenas vai realizar esta cadeia, JS. 

Os elementos, é bom notar, são separados por vírgulas, como seria de esperar. E você também pode acessar estes, como fizemos em C, com esta notação índice, certo? Tão diferente do PHP Agora, vamos voltar para apenas um tipo de referir às coisas por índice. Assim como C, também é índice zero. Eu sinto que seria muito cruel se eles de repente fez um JavaScript índice, e você tinha que completamente repensar a forma como você pensa sobre arrays. 

Uma coisa legal é que, em vez de ter que fazer-- se você nunca queria que o comprimento de uma matriz, talvez você interagir com ele até encontrar algum fim, ou você só sabe o que é. Porque JavaScript é muito frouxo em mais maneiras do que apenas o tipo, como vemos aqui, podemos apenas fazer essa matriz maior porque decidimos. Se notarmos matriz de três tem três coisas para começar, mas então, de repente, nós somos como, "oh, estou brincando. Na verdade, estamos indo para torná-lo 101 coisas. " Então, se você sempre quis saber o comprimento real de sua matriz, você fazê-lo assim. E vamos ver um monte de esta notação em exemplos, mas com JavaScript é tipicamente o que quer objeto que você está falando dot qualquer tipo de função que deseja aplicar a ele. OK? 

Portanto, neste caso, o nosso objeto é matriz dois, e dizemos que queremos o comprimento de matriz de duas. Então, isso só chama, como o comprimento sobre isso. E que retornará seu comprimento. Também algo a se notar é que se observarmos nossas matrizes, ao contrário de C, eles não têm de ser todas do mesmo tipo. Isto é muito mais parecido com PHP. JavaScript é basicamente como esta fusão interessante de C e PHP. Então, vamos entrar nisso. Por enquanto, vamos assumir que suas matrizes são, basicamente, como matrizes C, em que eles são indexados zero. OK, de modo que é tudo. Você também pode simplesmente estender um matriz para qualquer que seja o índice que você quer. Considerando que esse provavelmente SEG culpa em você ou lhe dar algum erro, JavaScript é como, "nah, está tudo bem. Eu tenho esse. Vamos apenas ir direto onde você quer ". 

OK, então os objetos são muito importantes. Vocês estarão usando um monte deles no seu conjunto P, se bem me lembro. Então, a única coisa que estes são semelhante ao de C são estruturas. Então você pode pensar quando about-- vamos a um exemplo à direita depois disso, eu acho que ele vai fazer muito mais sense-- mas, basicamente, usar objetos para organizar de curso relacionado informações. Quando nós falamos sobre estruturas em C, que muitas vezes falar sobre um estudante que tinha algum nome, ID, casa, você sabe, a concentração. E isso é meio que a mesma coisa que usamos objetos para aqui. É só para organizar informações semelhantes. 

Você também pode pensar nisso como mais semelhante ao associativo matrizes em PHP. Portanto, este seria tipo da coisa onde temos alguma chave com algum valor, muito semelhantes para PHP. Assim, você pode inicializar alguns objeto vazio, como vemos aqui em cima, apenas com chaves. Matrizes assim são colchetes. Objetos vazios são chaves. Boa distinção de ter. E estes são apenas dois diferentes maneiras de definir propriedades. Portanto, este é o tipo de muito mais do que uma maneira é semelhante à de PHP, com o nosso matrizes de associação, com a nossa chave, e nosso valor, ao passo que um presente é-- você vai ver este muito mais em JavaScript. Este tende a ser a convenção. E, do mesmo modo que fizemos matriz de duas comprimento ponto, este está dizendo: "OK, dá-me dessa atributo deste objeto ". Certo? Então, da mesma forma como era, "dê-me o atributo de comprimento de matriz de duas, " este está dizendo: "me dê algum propriedade do nosso objeto vazio. " Ou, neste caso, estamos atribuí-la a algum valor aqui. Mas você também pode acessá-lo dessa forma. 

E então aqui esta é apenas mostrando dois alertas diferentes. Então, isso iria mostrar os alertas seria exatamente o mesmo, é apenas duas maneiras diferentes de acessando o elemento que nós queremos. Isso faz sentido para todos? Eu me sinto como um presente provavelmente faz mais sentido, só porque estamos saindo de PHP. Mas como fazemos mais exemplos, este é, literalmente, exatamente o mesmo. Muito disso é apenas mudar na sintaxe. 

OK, então exemplos. Eu amo exemplos. Então, aqui estão algumas CS50 variável que é um objeto, e nós guardamos tudo isso informações sobre ele. Portanto, temos claro, instrutor, tfs, Série de Exercícios, e gravado. Então percebemos estes são quase todos de diferentes tipos. Certo? Assim, os objetos podem armazenar atributos de diferentes tipos. Podemos pensar em isto-- é muito semelhante à nossa matriz associativa em PHP. Então chave, valor, chave, valor, chave, valor, assim por diante e assim por diante. O que também é interessante, da mesma forma que podemos ter matrizes dentro de matrizes, também podemos ter objetos dentro objetos, ou arrays dentro de objetos. Você nunca está realmente limitado a apenas uma única das coisas. Podemos ficar muito Inceptionesque, apenas continuar no buraco do coelho lá. 

Então, se nós observamos, nós Claro que tem alguns é uma cadeia, instrutor que é uma string, e array, um int, e um booleano. Então todas essas coisas diferentes. 

Tudo bem, então, temos uma outra. Portanto, neste caso, temos uma matriz de objetos. Então, tal como um objeto pode ter uma matriz na mesma. Também podemos ter uma matriz de objetos. Isto pode ser útil para pensar em semelhante ao tipo de como nós tivemos um hash mesa, tivemos uma matriz de todas estas diferentes tipos de estruturas que eram ponteiros para diferentes nós e outros enfeites. Mas, neste caso, nós tem uma matriz de objetos. Então, isso é como um array matrizes de associativo. Portanto, temos alguns primeiro consistirá ser o objecto com o nome de James e abrigar Winthrop. 

Vocês devem se lembrar algo muito semelhante a este com a sua última pset, onde se você tirou algo do seu banco de dados, o primeiro tipo de coisa em sua matriz foi todas as informações sobre o primeiro usuário que reuniu-lo, e depois que você teve para o índice em que para obter o seu estoque ou a sua cache ou outros enfeites. Então isso é muito muito mesmo coisa, apenas uma pequena mudança na sintaxe, a mudança pouco em as palavras que usamos para descrevê-los. 

Então, se nós queríamos, alguém pode dizer- me que este alerta faria aqui? Ou o que este pedaço de código poderia fazer por nós? AUDIÊNCIA: Ele vai dar-lhe todos os nomes. ALLISON Buchholtz-AU: Certo, então ele seria apenas alertar com todos os nomes porque ele iria passar por cottage i, por isso ia começar do zero. Por isso, diria que, OK estamos procurando neste primeiro objeto, o que é a primeira ranhura na nossa matriz. E ele diz: "dá-me a atributo, o nome do objeto. " Então vamos aqui, teremos digitalização, nós temos que procurar o nome, e teremos imprimir James, Molly e Carl. Quaisquer perguntas até agora? JavaScript infelizmente você vai ser fazendo um monte de olhar para cima no seu próprio, descobrir a sintaxe, às voltas com ele. Mas é claro que eu estou sempre aqui, horário de atendimento é sempre aqui. Eu poderia ser às terças-feiras desta semana. Então, se você está lá, você pode venha visitar-me esta semana. Seria ótimo. 

OK, então é DOM Document Object-Model. Portanto, esta é apenas uma maneira que nós gostamos de pensar sobre como o nosso HTML e tudo dentro dela está organizado. Isto é muito algo que provavelmente vai aparecer em seu quiz. Eu sei que o meu ano, era como é aqui Arquivo HTML, preencha o DOM para ele. E você só preencher pequenas coisas. Estes devem ser pontos fáceis, esperançoso. Esperamos que você vai see-- 

AUDIÊNCIA: [inaudível] 

ALLISON Buchholtz-AU: Então você vê essa árvore aqui? 

AUDIÊNCIA: Yeah. 

ALLISON Buchholtz-AU: Então, eles vão pedir uso para preencher o que se passa debaixo do corpo. Talvez sob o corpo, temos alguns divs ou temos alguns parágrafos, e nós vamos pedir-lhe para preencher uma árvore muito parecido com este. Então, nós vamos estar caminhando por ela. Assim, o Document Object- Modelo é apenas uma maneira estruturar e pensar sobre o nosso HTML graficamente. E também quando chegarmos em mais JavaScript, que vai ser o maneira que nós, na verdade, manipular diferente elementos na página. Precisamos de uma maneira de acessar cada das coisas em nosso HTML, e assim por isso nos dá uma muito forma padronizada concreto em várias páginas da web para fazer isso. 

Então, se nós apenas caminhar por este aqui, é claro nosso documento é como todo o nosso arquivo. Isso, obviamente, faz sentido que é a coisa mais elevada, e depois temos o nosso HTML real, o que corresponde a essa marca aqui. Além disso, se você no travessão suas tags corretamente, em seguida, criar essa árvore DOM torna-se super simples. Portanto, temos alguma cabeça aqui. Temos um corpo que vemos tronco fora de HTML, que é por isso que temos cabeça e no corpo. Dentro de cabeça, nós temos algumas Tag do título, um título de tag final, por isso sabemos que vem depois de cabeça. E dentro da nossa tag title, temos Olá, mundo. OK? Então, isso é todo este ramo mão esquerda. E, em seguida, para o ramo da direita aqui, vemos que temos HTML, OK fizemos esta parte da cabeça, nós estamos olhando apenas para o corpo, por isso temos alguma área do corpo. E dentro disso, a única coisa que temos é Olá, mundo. OK? Se tivéssemos coisas como algum suporte de p e, em seguida Olá, mundo, e depois outro suporte p de adeus, mundo, teríamos duas bolhas saindo daqui. Porque eles são ambos sob o corpo, mas eles são alíneas separadas neste caso. Há definitivamente prática em que em testes anteriores, assim como a abundância on-line on-lo. OK, então, isso só permite -nos ver tudo bem e manipular as coisas muito sistematicamente. OK? Sabemos exatamente como atravessar esta árvore, por isso sabemos o que queremos acessar. 

OK, então é por isso que nós queremos para ter esse tipo de modelo, para que possamos usar coisas como esta, e entendemos o que eles significam, e eles são padronizados em todas as coisas que fazemos. Então título do documento dot é apenas a título de our-- todos estes são bastante auto-explicativo, Eu gosto de pensar. Assim, o primeiro de três exemplos são apenas dizendo, "OK, é só me dar o título desta página web ". Então, ele vai te dar o que corresponde ao título. 

Corpo do documento dot vai dar-lhe tudo o que está dentro dessas tags do corpo. Assim, você pode manipular isso. E o corpo dot documento dot inserir HTML é muito legal, e, talvez, não é como super intuitivo, mas o HTML interior corresponde a este aqui. Então, se você quiser manipular o texto em uma página, normalmente você vai estar fazendo algo com dot corpo HTML interior. OK? Assim HTML interior tende a referir-se a o que é realmente entre essas tags. OK? E então funções úteis. Então, se você queria chegar qualquer destes, qualquer elemento, temos alguns Id, classe nome, ou o nome do tag. Isto é muito semelhante ao coisas que fizemos com CSS, certo? Onde temos alguns seletores que correspondem a uma tag, uma classe que lhes damos, ou um Id. Isto é muito da mesma maneira. Se você tem algo que Tem alguma classe de cão, e você diz obter elementos pelo nome da marca, e você colocar o cão na lá-- ou desculpe, nome da classe. Você pode colocar ponto lá. Vai voltar todos aqueles elementos para você que têm essa classe. Assim, você pode manipular apenas aqueles. Da mesma maneira, talvez você só quer manipular alguns cabeçalho, de modo alguns cabeçalho h1, como fizemos. Você poderia fazer obter elementos por tag nome, porque h1 é um nome de marca. E da mesma forma, se você quiser começar uma coisa única, você pode fazer tag get. Obter elemento por Id. E eles são, na verdade, muitos destes. Estes são apenas como três dos muitos. Então, se você vai online, como Eu estou indo para encorajar você fazer, e fazer alguma pesquisa em seu próprio país, Eu recomendo definitivamente olhando para tudo isso. Eles podem ser super útil, especialmente quando você quer apenas uma espécie de manipular coisas muito específicas, sem ter para passar e tentar para analisar a tudo. 

OK, então a última coisa é JavaScript eventos. Então, quando eu estava falando mais cedo sobre ir em um site, e quando você passa o mouse sobre alguma coisa, ou o mouse passa sobre alguma coisa, outra coisa acontece. Isto é o que nós gostaríamos de pensar sobre como um evento. Então o que temos que poder ser útil aqui é onclick. Então, o meu foi em foco, o que, eu sou quase certeza, é apenas em foco. Também uma tonelada destes que você pode procurar. Há toda uma lista on-line das coisas diferentes que você pode ouvir. 

Mas os eventos JavaScript são basicamente, apenas respondendo às coisas que o usuário está fazendo. Certo? Portanto, o seu usuário faz alguma coisa, isso é um evento, e JavaScript responderão contudo que você gostaria que ele. Ele vai responder em conformidade. Portanto, neste caso, temos alguns onload janela ponto. Então, o que isto diz é, "esperar até loaded da janela. " OK? Então, quando tudo está carregado, onload, em seguida, você pode executar esta função. Então, quando tudo está carregado, você está indo ter algum botão de pesquisa que obtém um elemento por Id, e imprime o que quer que elemento é como o botão Search. E então nós temos essa variável, podemos dizer, "OK, onclick." Assim, quando ouvimos um clique no botão Search, executar esta função, que é um alerta, você clicou no botão Search. 

Então o que acontece é-- este é um bom pouca representação gráfica aqui. Então, nossas cargas de documentos, esse é o nosso onload, encontramos o nosso Pesquisa botão, o que é isso. Nós estamos olhando para o nosso botão Search. E então, quando o botão de pesquisa é clicado, ele corresponde a direita aqui. Onclick. Então nós finalmente alertar o nosso usuário, que é esta última linha aqui. OK? Assim, cada uma dessas quatro etapas apenas corresponde aos quatro caixas lá em baixo na parte inferior. Isso faz sentido para todos? 

E, em seguida, uma coisa que eu só vou mencionar muito, muito brevemente, que eu incentivar vocês a vão olhar mais para se jQuery, que é apenas uma biblioteca que é construído em cima de JavaScript. Ele é super útil, como com a maioria das bibliotecas. Há muitas funções. Então, se há sempre algo que você quer fazer em JavaScript, seu primeiro instinto não deve ser pensar de, "o que função deve I código? "Deveria ser, "Deixe-me ver alguém é já fez isso por mim. " Porque nove em cada dez vezes, alguém vai ter feito isso já, e eles provavelmente ter feito melhor. As pessoas gastam muito tempo fazendo estes, e JavaScript é muito utilizado, para que as pessoas estão constantemente tentando fazê-lo melhor. E jQuery tem um monte de funções que, provavelmente, será útil para você em seu projeto final, se você estiver fazer qualquer coisa com web design. Como eu gosto de dizer ", o trabalho mais esperto, não mais. " Se vocês fazem isso, vai ser ótimo. Quando estamos no hackathon eu não quero que você seja tudo forçado para fora. Eu quero que você seja do tipo: "Eu tenho este. jQuery obtido minha parte traseira. Eu não preciso escrever estas funções ". 

Então, só duas coisas para lembre-se, eu vou para deixar vocês olhar mais em jQuery em seu próprio país. Tudo o que eu vou dizer é que faz algumas coisas muito impressionantes e pode fazer a sua vida muito mais fácil. Mas o que você quer tem é qualquer arquivo que você vai usá-lo em, você vai querer essas duas linhas. Você vai querer o roteiro de js jQuery ponto js. E, na verdade, a sua fonte vai haver alguma URL. Se você Google jQuery, Google na verdade hospeda todos os arquivos para você. Então você definitivamente quero de entrada que, em vez de URL. Acabei de colocar isso aqui por razões de simplicidade. Tudo isso significa que a encontrar sua biblioteca jQuery. É enorme, para que você não quer para hospedá-lo em seu próprio computador se você pode evitá-lo, o que é por isso que nós tendem a apenas colocar no URL do Google de que hospeda todos esses arquivos para você. OK? Você Google-lo, eu prometo ele vai estar lá. 

E então o que quer JavaScript arquivo que você está usando, então este é apenas alguns externo JavaScript arquivo que você está usando. Da mesma forma que nós ligamos para o nosso CSS arquivos, este é o mesmo tipo de coisa. Este apenas links para o arquivo onde o seu JavaScript está. E eu tenho alguns exemplos com JavaScript simples. Então, nós vamos estar passando por isso. E então, em seu índice de JavaScript, qual é o seu arquivo JavaScript aqui, este é o tipo de invólucro que você tem para jQuery. Você está quase 99,9 por cento do tempo indo ter isso em seu arquivo index.js. Porque o que este diz que é, "Não executar nada até que o documento é, na verdade, pronto ", que é exatamente o que você quer. Porque se o documento não está pronto, jQuery e começa a fazer as coisas, é apenas uma confusão. Assim, você sempre quer ter este wrapper. E, em seguida, para as coisas que ir lá, eu deixam a própria perusing dos seus rapazes. 

OK, então há dúvidas direita agora sobre JavaScript em geral? Ou o modelo DOM? Se não, nós temos alguns cool exemplos que podemos passar, que vocês podem me ajudar código. Mas eu também vou ser super agradável, e se você não quer dizer nada para estes, isso é bom. Eu também posso apenas dar-lhe exemplos. Mas nada no PowerPoint, antes de seguir em frente? Com estilo. 

Eu sinto que vocês precisam de energia. Então, eu acho que nós vamos começar com o meu exemplo do partido em primeiro lugar. Temos três exemplos, você tem a sua escolha. Portanto, temos de relógio, para onde estamos indo para implementar um relógio real que é indo para atualizar o passar do tempo. Temos este grande função Twitter. Isto-- você sabe o que, espera. Nós vamos fazer isso ir embora. Bam. OK. 

Temos este grande função Twitter aqui, isso-- eu sei, certo? Vai ser ótimo. Vocês estão excitados? Isso vai contar o número de caracteres que você deixou, por isso, se eu digitar agora, obviamente, ele ainda diz que 140, mas sabemos que não é o caso. E, em seguida, com a nossa última aqui, clique aqui para a festa. O que vai acontecer é quando clicamos, o fundo de vai mudar as cores. Então, vocês têm as suas opções de qual deles você quer fazer primeiro. Eu prometo que vou levá-lo muito fácil para você. Eu sinto que todo mundo é meio de apenas muito baixo chave hoje. Então, eu vou orientá-lo como vamos implementar todos estes. Se você quiser badalar em, isso é ótimo, mas eu sinto que todo mundo é um pouco cansado. Então eu vou levá-lo através destes exemplos. Nós temos algo que nós gostaríamos de fazer primeiro? Anyone? Sem preferências? OK. Você sabe o que? Nós estamos em festa. Eu sinto que vocês precisam de um little-- por isso, vamos fazer a um partido em primeiro lugar. OK. 

Então o que temos aqui-- é isso não deveria estar lá. Agora é bom. OK. Então o que temos aqui é apenas uma página HTML simples que vocês todos devem ser super familiarizado com o de seus dois últimos Série de Exercícios. temos o nosso tipo doc aqui. Todos podem ver? OK. Com estilo. Temos o nosso HTML obviamente. Temos alguns cabeçalho que é ligada a uma folha de estilo que só fez o meu pia batismal agradável e grande e corajoso. Então não se preocupe com isso. 

Temos algum corpo com um fundo Id, OK? Porque nós vamos ficar mudando o fundo. Então, quando nós estamos mudando o fundo do nosso corpo, lembramo-nos de duas semanas atrás quando estamos lidando com páginas da web. Tão bom ter isso. E nós temos alguns Id equivale festa. Este h ref libra significa apenas que ele está indo para ir para a mesma página. E clique aqui para a festa, que é por isso que quando clicar nele, ele deve alterar as cores, felizmente. 

E então nós temos algum script aqui que está apenas ligado a este partido js dot arquivo, que está vazio, porque nós não fizemos nada ainda. E é tão triste. Mas muito em breve, ele vai mudar cores, e vai ser incrível. 

Então, eu só vou orientá-lo caras através de como podemos abordar isso. Então a primeira coisa que podemos querer fazer, se estamos mudando o fundo de o corpo, a primeira coisa que pode querer fazer é realmente agarrar o que o corpo é, certo? Então, nós queremos ter soma, o nosso fundo, e se você observar, Eu só automaticamente basta começar a digitar. Não há nada de especial que precisa fazer para os nossos arquivos JavaScript. Eu posso começar a declaração de variáveis, e declarando funções aleatórias. E é forma muito mais livre. É como com C, que lhe deu tudo estas regras duras, e você cresceu, por isso estamos como, "ir por diante. Seja livre. Faça o que quiser. " E é isso que é JavaScript. Portanto, temos algumas informações aqui. Com o nosso modelo DOM, sabemos que pode fazer documento dot obter elemento, e se notar aqui, o nosso corpo tem um Id. Certo? Assim, podemos fazer chegar documento por Id, e aqui está um simples. Qual é o nosso Id que queremos aqui? AUDIÊNCIA: Fundo. ALLISON Buchholtz-AU: Fundo. Perfeito. E ponto e vírgula no final. Isso não desapareceu ainda. Você ainda precisa de seus ponto e vírgula. OK. Então, esse é o nosso primeiro. E quando nós clique algo, nós quer que algo aconteça, certo? Então, nós pode querer alguma variável que está à espera de um clique. O que vamos fazer é que vamos fazer a nossa ligação mais semelhante a um botão. Então nós vamos ter algum botão que é igual a documentar dot obter elemento por Id. E se eu estou falando sobre o clique no link ou clique aqui para festejar link, o que poderia minha Id estar aqui? Parte. Correto. OK não muito ruim até agora. Toda a gente conseguir o que estamos fazendo? 

OK, então agora temos o nosso botão, e nós queremos que as coisas mudem quando eu clicar sobre ele. Então, se nós nos lembramos do nosso PowerPoint, coisa muito simples que podemos fazer é apenas botão dot onclick, certo? E isso vai para igualar alguma função. Esta é uma função anônima. E isso só as-- na verdade eu sou vai fazer isso um pouco maior. 

Então o que eu fiz aqui é que eu estou dizendo, OK, quando clicamos nosso botão, o que é esta ligação que nós apenas referido, nós estamos indo para executar esta função anônima. Nós não precisamos de qualquer entrada. Nós não nos importamos o que o usuário diz. Quando clicar nele, estamos vai fazer o que quisermos, que é mudar a cor de fundo. OK? Então é por isso que não temos quaisquer entradas, só temos esta função anônima. E agora nós estamos indo realmente para escrever esta função. 

Portanto, há um monte de maneiras que você poderia gerar uma cor aleatória. A maneira que eu fiz foi para gerar três números aleatórios e convertê-los para um RGB triplo. Então, isso só mostra que alguns cool coisas que, se você é como, "oh, Eu preciso gerar um aleatório número. "Se você Googled-lo, isso é o que você iria encontrar. 

Então, nós temos três diferentes coisas, Var, não vermelho de novo, verde. Certo? Portanto, estas são as três coisas que compõem uma cor. Azul, vermelho e verde. Com estilo. E o que podemos fazer é que sabemos que deve estar entre 255, e se você olhou para alguns gerador de números aleatórios, você pode obter algo como matemática dot aleatório, que se você pesquisar sobre o assunto retorna para algum número entre zero e um. OK? E o que os números de fazer o nosso Triplos RGB passar pelo meio? Zero e o quê? O que eles podem ir até? 255. Então, se a matemática de pontos aleatórios vai entre zero e um, como podemos querer converter isso? AUDIÊNCIA: Time? ALLISON Buchholtz-AU: Sim, exatamente. Assim, o tempo é de 255. 

AUDIÊNCIA: [inaudível] É como [inaudível]. ALLISON Buchholtz-AU: Math dot aleatória. AUDIÊNCIA: Cool. ALLISON Buchholtz-AU: Sim. JavaScript apenas cuida de você. OK. Assim, podemos fazer isso para todos eles. Certo? Math pontuam momentos aleatórios 255. Entendido. Com estilo. Assim, a coisa é, isso pode não retornar um inteiro. Certo? Talvez nós obter algum número entre zero e um, e que faz com que seja ligeiramente off, e os nossos RGBs não pode ser carros alegóricos. Eles precisam ser inteiros. Então, se você já tentou isso, provavelmente ter algum comportamento errático. Seria um pouco descolados. Então, o que nós fazemos é que nós queremos fazer certo que estes são arredondados, e você poderia arredondar qualquer maneira. I arredondado com piso. Então, eu sempre fez-se que arredondados para baixo. Mas saindo de como simples era apenas para obter um número aleatório, como você acha que nós pode andar este número? É muito similar. Alguma idéia? Então, se acaso era apenas ponto de matemática aleatória, por que você acha que faríamos chão? Andar dot Math. E você também pode fazer teto dot matemática. Rodada é uma espécie de ambíguo porque você não fazer saber se arredondar para cima ou para arredondar para baixo. Então, normalmente sempre fazemos matemática andar dot, teto matemática ponto. Mas honestly-- 

AUDIÊNCIA: O chão rodada para baixo? 

ALLISON Buchholtz-AU: Piso arredonda para baixo. E isso é apenas uma escolha da minha parte. 

Portanto, agora temos os nossos três números que foram gerados aleatoriamente, e o que vamos fazer agora é que estamos só vai mudar o fundo. OK? Então, nós já temos o nosso fundo tipo de armazenado neste elemento chamado fundo. Então, o que você vai notar é que, se você brincou com isso, queremos mudar o estilo. E este é o tipo de coisa que você Google e descobrir, gosto de como mudar a cor. 

Mas a forma de acessar essa cor é fundo do ponto fundo do estilo do ponto. Então isto está dizendo dada este objeto, fundo, que se refere a essa elemento Id lá em cima, vamos olhar para o estilo dentro do estilo, vamos olhar para o fundo. OK? E se você ir e pesquisar sobre o assunto, ele pode fazer um pouco mais de sentido, mas isto é, basicamente, apenas dizendo: "Dá-me este atributo muito específico do que tenho definido anteriormente. " Então, o que nós estamos mudando-a para é alguns RGB, porque faz sentido. Estamos usando RGB triplica, certo? E nós have-- eu quero ter certeza que eu obter o número certo de citações aqui. Então, o que fazemos é que temos RGB, e vamos a-- isto é como concatenação, que é vermelho. E então nós queremos alguma vírgula. E então queremos verde plus, em seguida, alguns vírgula, e um pouco de azul. 

Assim estas vantagens apenas quer dizer, como concatenação. Portanto, esta é apenas criar esta string que está acontecendo dentro de RGB. OK? 

AUDIÊNCIA: [inaudível] mais seguida a um verde mais, em seguida, o vermelho. 

ALLISON Buchholtz-AU: Sim, porque eu errei isso. Essa é uma multa. Oh, espere. Não. Porque eu preciso ter certeza de que eu tenho tudo isso direito. Então eu vou explicar em momento uno. Verde, azul, perfeito. Agora eu sou feito. Acredito. 

OK. Então o que é isso, é que o fundo vai ser definida como uma string. Certo? Que é o que nós temos aqui. Vai haver algum RGB 255 vírgula 255 de zero vírgula, ou qualquer número que você tem lá. Então, nós estamos fazendo aqui, temos alguma string. E o que nós queremos fazer, é que estamos espécie de criar dinamicamente que quando nós realmente executar este programa. Portanto, esta é uma string. Além disso, encadeia-lo com o valor que o vermelho tem, que encadeia-lo com um vírgula, que concatena-lo com o que é verde, e assim por diante, e assim por diante. OK? Até ao fim, que é a fechando desta parênteses RGB aqui. OK? 

Então o que é que isto vai gerar algum comando realmente que é RGB de três números que o fundo já está definido para. OK? Então vamos ver se isso funciona. Eu espero que ele faz, porque se não, eu vou ficar muito triste. Ah, não. OK, espere. Definitivamente fundo fundo do ponto estilo dot. Eu estou definitivamente ausente algo apenas pequena. Vocês não odeiam isso? Quando é apenas uma pequena pequeno erro? Fundo Todo-Poderoso. RGB. 

AUDIÊNCIA: [inaudível] ALLISON Buchholtz-AU: No. Eu tentei isso antes da aula. Tenho tudo o que fez antes classe, no caso eu era como, "Espere, o que foi que eu fiz de errado?" Porque eu era como, "Eu, provavelmente, estragar isso em algum momento. " Além disso verde. Tudo parece que está concatenado correctamente. OK. 

AUDIÊNCIA: [inaudível] 

ALLISON Buchholtz-AU: Oh, lá vai. Isso é o que eu precisava. Olhe para isso. Tiffany para resgatar. Perfeito. OK. Agora vamos ver se funciona. Meu Deus. OK. Aguente. 

AUDIÊNCIA: Space após a segunda plus. 

ALLISON Buchholtz-AU: Qual? Oh, espere, espere. Desgaste espaço? 

AUDIÊNCIA: Second mais em a concatenação verde. ALLISON Buchholtz-AU: Oh. AUDIÊNCIA: Não há nenhum espaço depois do mais, sim. ALLISON Buchholtz-AU: Você Não é necessário que, mas- AUDIÊNCIA: Oh, você não? ALLISON Buchholtz-AU: Parece muito. AUDIÊNCIA: OK. OK. 

ALLISON Buchholtz AU: Vamos ver se isso funciona. OK. Eu, obviamente, estou falhando em esta demo, que me faz lembrar de uma palestra na outra semana, mas eu sei que isso vai funcionar. Eu sei que isso vai funcionar. Tão perto. A menos que eu acidentalmente apagado meu script em um presente. Não, é ponto de partido js. OK segurar. Vou copiar este, e eu também sou só vai apagar tudo, porque eu tinha essa de trabalho mais cedo. 

Eu prometo que funciona. Se não, eu vou te mostrar o que é de Tommy. E lá. 

AUDIÊNCIA: Você está fazendo referência a partido dot CSS, e é uma festa de ponto js. 

ALLISON Buchholtz-AU: Ah, bem aqui é js ponto de partido. OK, o que eu fiz diferente? OK, vamos ver se isso funciona agora. Bam. Então, eu não sei o que eu fiz de forma diferente, mas isso é o que deveria acontecer. Kinda cool. Eu cliquei no presente, como, para sempre. Mas podemos tentar e ver o que eu fiz diferente que este tinha. Eu não sei quanto a vocês, mas esta olha basicamente o que eu escrevi. Havia provavelmente uma desaparecida ponto e vírgula em algum lugar é a minha coisa. Na verdade, depois, eu acho que estava faltando um ponto e vírgula aqui, na verdade. Mas eu não podia vê-lo porque era fora da tela. 

Mas se observarmos, isso é muito muito exatamente o que eu escrevi. Eu acho que, provavelmente, a parte mais difícil de esta é apenas uma espécie de esta coisa certa aqui, a compreensão o que está fazendo lá. Esses tipos de coisas que você aprende realmente apenas pesquisando por e honesta apenas tentando. Se você acha que há algum atributo, provavelmente há. Então, experimentá-lo. Veja o que acontece. Como eu disse, há um monte de experimentação com JavaScript, e PHP, e tudo o que material, e CSS especialmente. Essa é a única verdadeira maneira de compreendê-lo. 

OK, então depois desse fiasco com festa js ponto, temos duas outras opções. Temos relógio ou Twitter. Ambos são interessantes. Talvez não tão divertido como partido, que teve um pouco de efeito estroboscópico legal coisa no final. Vocês tem alguma preferência? AUDIÊNCIA: Clock? ALLISON Buchholtz-AU: Clock? OK. Com estilo. 

Então, novamente, temos a nossa arquivo JavaScript vazio. E como vemos aqui, nós ter algum HTML muito simples. Nós temos a nossa folha de estilo, que apenas formata o que ele deve ser parecido. Nós temos nossa div com um Id de relógio, que apenas diz, "este deve ser um relógio." E nós temos o nosso link ao nosso arquivo JavaScript que realmente vai gerar o nosso relógio para nós. Porque a coisa legal, é que você pode definir JavaScript para atualizar automaticamente si. OK? Então, ao invés de esperar que o usuário para bater Atualizar em uma página de modo que você pode obter horário atualizado, JavaScript pode atualizá-lo no entanto, ele gosta. 

Então, como acontece com o nosso último, queríamos para acessar o nosso fundo, certo? Então, o que você acha que pode ser o primeira coisa que queremos fazer aqui? Se nós estamos nos saindo este tipo de paradigma aqui? Nós provavelmente vai querer acessar o nosso relógio, certo? Então, nós temos alguns var relógio, que equals-- o que é que acha que vai ser? Documento dot obter elemento por-- Eu também amo Sublime-- Id e nossa Id é o relógio. Ponto e vírgula. Tenho que ter certeza de obter esses semicolons desta vez, porque eu sinto que foi o problema da última vez. OK, então, como eu estava dizendo com a tentativa de ter o JavaScript refrescar-se, há essa grande função, I sei que veio a calhar no ano passado, Eu não tenho certeza que ele vem a calhar para este pset, mas ele é chamado de intervalo definido. E isso é realmente muito legal se vocês fazem nada com o tempo ou ficar informações atualizadas. Em um site para a final projeto, esta é provavelmente uma função que deseja obter super familiarizado. Assim que definir o intervalo faz é que vamos dar-lhe uma função, e quantas vezes ele deveria chamar essa função. OK? 

Portanto, neste caso, nós apenas estamos indo para criar alguma função anônima de novo, OK, que vai ficar nossa data, e nosso tempo, e então atualizar as coisas e exibi-lo. Então, vamos preocupar com isso. Nós vamos ser como gerar relógio aqui. Mas o que precisamos é como muitas vezes para atualizá-la. Portanto, neste caso, é apenas milissegundos. Então, nós apenas estamos indo para fazer 100 milissegundos. Naturalmente, completamente arbitrária. Se você queria para atualizar muito mais lentamente, o que pôde. Nós podemos mexer com o intervalo do jogo, como é grande o nosso intervalo é depois de chegarmos um relógio a trabalhar, o que espero que eu vou chegar. Portanto, este é apenas dizer, "OK, call essa função a cada 100 milissegundos. " OK? Isso é tudo o que ele faz. 

Então, o que nós queremos que a nossa função para fazer é que nós queremos ter alguma data e algum tempo que é vamos ter. Assim, podemos começar com a nossa data é igual a alguma coisa, e nosso tempo é igual a algo que nós não sabemos ainda. Ou, na verdade, só precisamos de data, porque data vai incluir tudo. Novamente, se você acabou de Google nada sobre o que você quer fazer, se você escrever, "OK, Eu quero ficar o tempo via JavaScript, "it vai lhe dar este grande função chamada data get. Literalmente, a maioria das coisas que você quer fazer, JavaScript vai ter -lo feito para você já. Portanto, é literalmente como novo obter data, que é creating-- ou nova data, rather-- que está a gerar algum objeto que representa uma data. 

E o que vamos fazer aqui é isso eu é-- vou escrever isso, e, em seguida, explicar o que faz. Então, eu vou ter certeza que eu tenho esse direito. 

OK, então o que esta função faz, é que nós somos apenas criar o HTML que é realmente indo para ir dentro do nosso Id div de relógio. Então o que é que isto vai ser feito é apenas gerar alguma corda, OK? Isso é, então, vai ser transplantadas em nosso HTML. Basicamente o que ele vai fazer é o que quer que nós-- que vou mostrar-lhe é que o que dizemos é HTML, vamos substituir este texto aqui com tudo o que é HTML. Então, isso vai permitir que -nos a mudar o nosso relógio de ponto HTML de ser apenas o texto deste deve ser um relógio, para realmente mostrar os números e as coisas que nós nos importamos aproximadamente, e realmente ser horas. 

Então, o que nós vamos fazer é que estamos vai começar a gerar este HTML. Assim, da mesma maneira que usamos para fazer mais é igual para inteiros, agora você pode fazer isso por cordas, exceto que vai concatenar-los. Certo? Como vimos com ponto de partido js, ​​este apenas concatena todas estas coisas juntas. Assim, você pode concatenar diferentes pedaços de HTML a partir de variáveis, ou pedaços de cordas que você escreve para fora mesmo, e isso só realmente permite que você dinamicamente gerar HTML, que é muito legal. Então, se você tem algo muito usuário específico, isso pode permitir que você faça isso. 

Portanto, temos HTML, para que eu vou tentar garantir que tenho esse direito. Então, vamos fazer alguma cabeçalho h1. Então, o que é importante perceber aqui é que este é, na verdade, apenas HTML. Certo? Estamos escrevendo real Código HTML aqui, é não apenas uma seqüência na posição normal maneira que gostaríamos de pensar nisso. Então nós temos um pouco de HTML. Esta é considerada uma seqüência aqui embora. E fazemos data dot-- nós quer chegar em nossas horas. Novamente, se você estava a olhar acima de qualquer coisa sobre a data, ele iria dizer-lhe todos estes são os atributos que tem data. E aqui está o que você pode usar nele. Por isso, provavelmente, tem coisas como obter horas, e obter minutos, e obter segundos, e obter milissegundos, e quem sabe o que mais eles têm. Mas se você olhar para o documentação, tudo isso vai estar lá. 

Portanto, temos obter horas, e, em seguida, gostaríamos concatenar que com-- eu sou vai se mudar isso aqui. Então, se estamos gerando agora, estamos realmente gerando o tempo, certo? Temos horas, e, em seguida, o que é entre horas e minutos? Você tem um ponto e vírgula, certo? Então, nós queremos fazer algum ponto e vírgula aqui. E então nós queremos começar nossa minutos, de modo que da mesma maneira que temos data dot obter horas, como podemos obter os nossos minutos? É literalmente data dot obter minutos, o que eu meio que gosto. É como, "oh, quão faço para que meu minutos? " Acabei de chegar em minhas minutos. 

OK. E depois temos outros dois pontos aqui. E então, se queremos obter a nossa segundo, como podemos obter a segunda? Data dot obter segundos. Eu acho que é muito legal. E o que é importante perceber, é que nós também precisa fechar nossa tag HTML aqui, porque ele ainda deve ser HTML válido, portanto h1. Com estilo. 

Então, depois disso, nós podemos fazer relógio dot HTML interior é igual ao HTML. OK? Então lembre-se que eu disse HTML interior basicamente leva tudo o que é entre o duas marcas que falamos e inserções ou manipula tudo o que está lá dentro? Então, o que isso faz, se Vamos voltar para o nosso relógio, é que se refere ao relógio tudo dentro deste div. Este é o código HTML interna div deste relógio Id. E assim que vai mudá-lo para o HTML que acabou de gerar, que, o que, esperamos, espero, espero, mostrará o tempo agora. Vamos ver. Claro. Tantas questões técnicas. Apenas-- de Allison que eu sou fora de meu jogo hoje caras. OK, isso funciona. relógio de ponto HTML interior. Foi HTML Really? Além disso, este é o que acontece. Quando você não consegue ver alguma coisa, você basta olhar para o seu código-fonte. OK. Você quer conhecer um trabalho legal em torno que nós vamos fazer aqui? 

AUDIÊNCIA: Você pode fazer letras maiúsculas? As letras maiúsculas? Porque você tem obter horas, e em seguida, obter minutos. 

ALLISON Buchholtz-AU: It é obter horas e get-- oh. Você é-- estrela de ouro. É tudo um teste, pessoal. Eu prometo que estava trabalhando antes da aula. 

OK, mas algo legal saber é que você pode Também-- se, por vezes, seus arquivos externos são ficando um pouco louco, você também pode simplesmente colocá-los em linha reta aqui, o que tende a consertar as coisas. Exceto isto é como realmente feio. Claro formatar tudo. Certifique-se de que está tudo bem. OK. 

Eu queria fazer todas as demos legal, e eles simplesmente não está trabalhando fora. OK. Script var relógio. De qualquer forma, o que é importante é que esta é a forma geral que você formatar JavaScript. Como você pode ver, pode ser muito mimado, por vezes, mesmo quando era literalmente trabalhando em dois segundos atrás. Ou não dois segundos atrás, mas muito, muito recentemente. 

Então, para mostrar o que ele deve ser parecido, e para mostrar que eu não sou louco, e que tudo é exatamente o mesmo, é isso que ele deve ser parecido. Você está indo só para fazer esta parte superior aqui, e se você ver o código fonte da página, se você observar, ele fez alguns as coisas mais loucas, eu simplifiquei-lo. Além disso, o crédito para Tommy McWilliam, que, na verdade, me ajudou a criar estes exemplos, que é por isso que eu sei que eles trabalham. Porque Tommy é um mestre JavaScript. Mas se observarmos, nós temos algum set. Nós temos a nossa função de relógio aqui. Isso é tudo o que JavaScript que acabou de escrever, ou parte dela. Nós apenas escreveu este aqui. E ele tem um extra função que apenas almofadas-lo colocando um zero antes de uma carta ou antes de um número, se é apenas um deles. Então, se você observar, isso é muito muito exatamente o que acabei de escrever. Você tem algum relógio variável que tem o nosso elemento, obter elemento por ID, que é relógio. Temos o nosso intervalo do jogo função, que é uma função anônima que executa tudo isto. Temos alguns começando seqüência de HTML que, em seguida, de forma dinâmica gerar por ter algum cabeçalho h1, concatenando com obter as horas, mais nosso cólon, além de ficar os minutos, além de outros cólon, além dos nossos segundos, e, finalmente, o HTML final para ele. E então nós atualizamos nosso relógio dot HTML interior para HTML, e atualiza a cada 100 milissegundos. OK? 

Veja, eu prometo que eu não sou louco. Eu não sei. Eu não sei por que ele não gosta de mim. Eu sinto que tem a mesma aparência, mas aparentemente ele me odeia. 

Então, vamos ver se no terceiro round vai melhor. Estamos prestes a ver. Eu não sei como é que isto vai passar. Está todo mundo, pelo menos, recebendo o contras, como apenas o tema geral de JavaScript, embora? Espero que seja pelo menos útil, mais de mostrar que é um pouco mimado. Mas o conjunto de problemas será muito divertido. Vai ser ótimo. Não vai ser tão tedioso como este, eu não acho. Você vai realmente chegar a ver as coisas muito legais. 

Então, por último, mas não menos importante, vamos tentar o Twitter um. Estou realmente com medo agora, rapazes. Eu não sei como isso vai passar. Mas só para lhe dar um pouco mais gosto, e esta é realmente cordas e manipulando insumos, o que nós vamos fazer é, se observarmos aqui com HTML-- este tem um pouco more-- temos alguma área de texto, o que corresponde a esta área de texto aqui. OK? E isso tem um ID de texto. Nós reestilizado-lo um pouco com alguma largura e altura que temos pré-determinado, e temos H1, o que só é nosso único cabeçalho que representa nossos personagens esquerda. Demos alguns Id de caracteres restante, e então nós temos algum script aqui, que eu sou realmente esperando terceira vez do o charme aqui, pessoal. 

Então, o que nós queremos fazer, Na mesma linha geral que fizemos com js relógio de ponto e dot partido js como temos notado, é que começamos por realmente agarrando as coisas que nos interessam, certo? Portanto, neste caso, existem dois coisas que nos preocupamos com, OK? Uma coisa que nós estamos, na verdade, uma espécie de olhando para dentro e desenho de dados de, e uma coisa que estamos realmente mudando. Portanto, não é o nosso HTML. Se esta é a nossa página web aqui, o que é os dados que nós estamos olhando? Vai ser o que quer o texto em nossas caixas, certo? Então, qualquer coisa que eu escreva aqui. Isso é o que eu quero saber, ou isso é o que eu quero olhar. E o que vai ser mudança na nossa página web? Os caracteres restantes. Assim, da mesma forma, queremos começar por inicializar variáveis que realmente prender esses elementos. OK? Então, se temos algum var essa é a nossa área de texto, e nós temos alguns var que é remanescente. Certo? Então, estes vão manter essas duas coisas. Assim, o mesmo tipo de coisa, documento dot-- OK, eu sou indo para garantir que este é vai funcionar dessa vez. Estou muito inflexível. OK, por isso, se queremos que o nosso área de texto, de acordo ao nosso HTML, qual é o nosso identificador? Qual é a nossa identidade? É só passar a ser de texto, porque isso cria a nossa área de texto, OK, e nossa Id é o texto, de modo que é como podemos pegar o que está lá. OK, ponto e vírgula. Vou ser super preciso sobre o assunto, porque eu quero que isso funcione desta vez. OK, fazer a mesma coisa, obter elemento por Id. Eu realmente estou querendo saber o que tem causado os outros dois para atrapalhar. OK, então, em um presente, o que queremos para acessar? Qual é o nosso Id aqui? Temos outro Id em nosso HTML, o que é? AUDIÊNCIA: caracteres restantes. ALLISON Buchholtz-AU: Personagens restante. 

OK. Com estilo. Então, eu estou indo só para escrever esta muito rápido. Eu só vou escrever isso em segundo. Assim, a área de texto. O que é interessante é B function-- lá muitas funções que não só correspondem à sua mouse, mas seu teclado. OK? Então você pode dizer quando qualquer tecla é pressionado, você pode fazer coisas desse tipo. Então, o que nós estamos usando é chamado a tecla para cima, o que diz, "se você pressionado qualquer tecla seu teclado, quando o usuário tem levantado seu dedo no botão, e a chave tornou-se unpressed, então vamos fazer alguma coisa. " OK? Então, isso faz sentido, certo? Porque cada personagem digitamos, vamos ter que levantar nossos dedos off da mesma, por isso, quando a chave sobe, podemos saber para diminuir nossos personagens restantes. 

Portanto, temos alguns em chave para cima, e da mesma forma, vamos dizer, "OK, quando fazemos isso, nós vamos criar alguma função que vai levar e ", no presente caso, eo que nós queremos fazer é calcular o número restante. OK, então vamos começar criando uma variável. Portanto, temos alguma variável r, que vai representar quantos caracteres que nos resta. OK? Sabemos que vamos começar com 140, e se nós queremos saber, vamos dizer, o comprimento deste cadeia que tem sido de entrada, Vocês têm alguma idéia como podemos fazer isso? Apenas com base fora do óbvio coisas, como se quiséssemos horas, costumávamos ficar horas. Sabemos que o nosso objetivo é área de texto, mas você poderia caras pensar no que poderia vir depois dela? Qualquer idéias? 

Assim, tipo de um presente de menos intuitivo, mas é valor de comprimento do ponto. Então, só me dar alguma atributo de valor é, na verdade, o comprimento dessa seqüência. Então, ele vai dizer: "OK, eu estou procurando nesta seqüência inteira dentro da área de texto, e eu vou dizer- quanto tempo ele é ". Porque se nos lembramos cordas são realmente apenas matrizes, por isso, pode simplesmente pegar o comprimento deles. Portanto, temos que. Com estilo. 

Então, o que nós queremos fazer é nós Nunca mais quero permitir que o usuário a entrada de mais do que 140 caracteres, certo? Porque se nós dizer como, "oh, você só tem esse tanto restante, " e, em seguida, deixá-los fazer isso De qualquer forma, temos vindo a mentir. E este é outro coisa que JavaScript pode ser realmente bom para, é a validação do usuário e certificando-se de que o seu usuário se encaixa dentro de todas as regras que você tenha fornecido a eles. Então, se você quer fazer as coisas, como fazer Certifique-se de entrada de alguém seu endereço de e-mail, ou certificando-se de que, quando eles digitar duas senhas, eles combinam. JavaScript pode fazer isso. Você faria algo assim ", quando o formulário é enviado ", ou como, "Quando botão Enviar Formulário é clicado, verificar todas essas coisas ". E nós podemos fazer isso JavaScript. Então, isso é exatamente o que nós vamos fazer aqui. 

Então, o que poderia ser uma maneira de verificar se eles foram mais de 140 personagens? O que vai acontecer com nosso valor de r se tentar? Vai ser negativo, certo? Ou ele vai ser menos que ou igual a zero. Assim, podemos usar um se isso for Assim como tudo mais. OK? E nós temos alguma área texto dot valor, e o que estamos fazendo aqui é que estamos apenas cutting-- o que é? Desculpe. Este, nós só queremos retornar falso. Fiquei confuso. Todos os frangalhos de coisas não está funcionando. OK, nós só queremos return false, e então nós deseja exibir o restantes personagens, certo? Assim, com o relógio, fizemos algo com HTML interior, certo? Onde nós configurá-lo igual a algum variável, então o que podemos fazer aqui? O que estamos mudando o HTML interior de? 

AUDIÊNCIA: Remanescente? 

ALLISON Buchholtz-AU: Estamos mudando restante. Tudo bem, eo que nós quero configurá-lo igual? Vai ser r, porque isso devem ser os nossos personagens restantes. OK? Então, eu estou muito nervoso para ver se isso funciona agora, mas vamos ver. Deixar isso. Isso é muito rápido. [Inaudível] OK. Mais uma vez, eu estou indo só para te mostrar. Por alguma razão, mina não decide trabalhar, mas o que eu vou lhe mostrar é que este é-- oh eu deveria colocar isso em. OK, nós observamos o mesmo tipo de coisa aqui, ficando a área de texto. 

Além disso, se você aviso cara, se há sempre algo que você quer fazer, e você não sabe como fazer la, basta clicar em Exibir código fonte da página, e eles vão te dizer. Às vezes ele vai ser criptografados. Para sua pset, nós criptografar tudo, por isso, apenas se parece com rabiscos. Mas se há sempre um realmente site legal que você gosta, se você apenas clique em Exibir código fonte da página, ele vai dizer-lhe como fazê-lo. Então, novamente, trabalhar mais esperto, não mais. E como você vê aqui, todos essas coisas são as mesmas. este aqui só tem algum substring que, não me lembro exatamente o que este faz. Mas, obviamente, leva algum substring do valor de zero a dez, e retorna false o que deve parar o usuário de inserir mais, e então, obviamente, atualiza o código HTML interna lá. 

Com estilo. Então grandes recortes a partir de hoje, experiência, olhar para o código-fonte porque ele vai ajudá-lo muito, e todo mundo, às vezes JavaScript Pode ser difícil de trabalhar e não faz sempre funciona da maneira que você espera que ele, mas apenas tentando manter porque eu prometo que vou. Eu prometo a todos esses exemplos estavam trabalhando antes da aula. Eu não entendo o que aconteceu. Eu literalmente tenho tudo a mesma coisa. 

Só mais uma coisa que eu só quero mostrar para vocês que podem ser super útil é em-- o que estava funcionando antes? Temos partido para o trabalho, não é? Acho que sim. Sim. Nós fizemos. Impressionante. OK, então uma coisa que vocês deveriam saber é o log do console que eu falei. Então consolar log ponto de Olá. Portanto, este é o tipo de Equivalente JavaScript de printf. Então, se você quiser inspecionar suas variáveis ou ver o que está acontecendo lá, o que você pode fazer é, se nós inspecionar elemento, é o que você quer ir a, e você vai para consolar, você vai ver que ele impresso Olá. 

Assim, poderíamos tê-lo imprimir tudo o que queríamos. Se quiséssemos-la para imprimir fundo fundo do ponto estilo de ponto, devemos ser capazes de ver o RGB triplo que vem à tona. Ou não. Eu esqueço exatamente como você imprimir uma variável assim, mas você deve ser capaz de imprimir coisas assim. Isso será muito útil para o seu pset quando você está tentando manipular Coordenadas ou outros enfeites. Então, eles também mudam esta peça em sala de aula. Isto é diferente dos últimos anos, assim apenas ser simpático com seus TFs, ou os TFs em horário de expediente ao contrário, porque somos tipo de aprendizagem junto com vocês. Mas o log do console foi super, super útil para JavaScript no ano passado. Assim, o amor dela. Saiba como usá-lo. É mais fácil de usar do que GDB, de modo que deve ser, pelo menos, um ponto positivo. Mas graças a vocês estão tendo comigo. Lamento que o meu exemplos para alguma razão apenas não queria cooperar comigo, mas eu espero que ele ajudou tipo de obter-lhe um pouco mais na zona de JavaScript. E envie-me todas as suas perguntas para na próxima semana, para que eu possa ser super reparado, e eu vou trazer doces e até mesmo extras doces, porque isso era ridículo. Mas vocês são ótimos, e ter uma semana incrível.