TOMAS REIMERS: Ola, todo o mundo. Tomas Reimers do meu nome. MIKE Rizzo: E eu son Mike Rizzo. TOMAS REIMERS: Somos dous dos CS50s TS. E hoxe nós estamos levando o seminario sobre JavaScript e CSS para aplicacións web. Se quere seguir, o ligazón está logo alí. E quere poñelas brevemente no ordenador? Alí está a ligazón. É un pequeno sitio web, que ten conexións con todos os recursos que imos ser apuntándolle hoxe e tamén ten unha morea de información útil escrito por nós ler máis en profundidade cando atrás, e estás lembrar o que exactamente que dicir, o que estaba falando, etcétera. MIKE Rizzo: Todo ben. Entón, imos comezar. TOMAS REIMERS: Entón quere comezar? Aceptar. MIKE Rizzo: Yeah. Entón, primeiro quería comezar cunha ampla visión xeral sobre a Internet e tipos de ficheiros ao proxecto sitios web. Aínda que esta presentación queremos entrar en JavaScript moito máis máis tarde, queriamos comezar con só, tipo, como a vista dun paxaro ollo que un sitio é e como a pensar sobre como crear un sitio para o principio. Entón vós, neste momento - con el sendo venres á noite - debe ter sometido súas finanzas CS50 conxuntos de problemas. Afortunadamente, iso foi un bo gusto que de programación web pode ser. Pero aquí queremos, tipo, dar lle un outro gusto, tamén. TOMAS REIMERS: Entón, só para recapitular o que ocorre cando escribe a súa URL para o seu navegador, que recibe URL mirou cara arriba no ordenador. E o seu ordenador está conectado a outro ordenador, que aloxa o web. OK, entón, cando vai para google.com, está conectado a un dos de Google ordenadores, que contén o arquivos para google.com. A continuación, el pide un arquivo específico. Entón, se ir - Eu non sei - example.com / index.html ou / test.html, vai pedir que arquivo específico. E o servidor web vai para devolve-lo a vostede. Entón, unha vez que pasar por aquel arquivo - xa que está ordenador está que arquivo - que comezará construír unha páxina web. Entón, agora ten o arquivo HTML, que é unha especie de como o estrutura da páxina web. O arquivo HTML pode referencia Ficheiros CSS, que definen o estilo de páxina web. Arquivos JavaScript, que define interacción coa páxina web. Os ficheiros de imaxe, que son só imaxes. E, posiblemente, vincular a outros arquivos HTML, que pode entón visitar. MIKE Rizzo: OK, xenial. Entón, vostedes teñen todo, se cadra, meticulosamente configurar o servidor local na súa máquina virtual. E iso só, tipo, é o lugar de dominio que hóspede o seu ordenador só para vostede no seu propio enderezo IP. Entón, dentro diso, así que pode engadir a el as súas propias páxinas web. Quero dicir, en CS50 Finanzas, ten que ter engadidas algunhas páxinas HTML, que son, tipo, envolto en invólucro PHP. Pero, ao final, o que as súas páxinas PHP Foron saída era HTML. Pero, pensar de volta para o inicio do PSET, tivemos que definir os permisos para todo, non? Entón iso basicamente só nos permite saber que pode ler, escribir, e, posiblemente, realizar cada un dos arquivos. Entón, nós imos facer un rápido - hm? TOMAS REIMERS: Entón nós imos para facer unha demostración rápida. Entón, só para lembra-lo, cando conectar ao ordenador de Google - quen - e pedir un arquivo, o primeiro ordenador Debe estar seguro de que está autorizado para realmente ver este ficheiro ou ler que arquivo, porque non pode simplemente preguntar para calquera arquivo no ordenador, non? Iso sería un perigo para a seguridade. Así, os arquivos nos sistemas que utilizamos, como este aparello CS50, ten tres xeral as persoas que poden ter permisos para algo. O primeiro é o real propietario do devandito arquivo. A segunda é o grupo que o arquivo pertence. Non estamos indo centro-se moito sobre iso. E a última cousa é, máis ou menos, como o mundo ou como toda a xente que está non específico para este ficheiro e non ten dereitos de propiedade sobre el. Entón, se temos propietario, o grupo, e logo, o mundo. E entón, para cada un destes grupos, pode ter un dos tres permisos, OK, ou múltiple deles. Pode ter permisos de lectura. Pode ter os permisos axeitadas. E pode ter permisos de execución. Entón, en canto a tipos de arquivo reais, lea permiso é como realmente lendo o contido do arquivo. O permiso para a dereita está escribindo ao devandito arquivo. Un permiso de execución está a executar ficheiro como fai cando realizar unha das proxectos CS50. Entón, cando estamos a pensar sobre arquivos como cando necesitamos ler un HTML arquivo, que debe ser o mundo lexible, non? Presuntamente, tamén o propietario quere para poder editar este ficheiro. Así, o propietario vai ter ler e escribir permisos. Realmente non ten que realizar. Group, imos tratar o aínda que o mundo agora. Entón eles necesitan permisos de lectura. Pero eles non precisan de gravación ou permisos de execución. E agora, se pensamos ao ex Serie de exercicios, o que se entende é que este tipo de ollar como binario, non? 1 significa si. 0 para non. E podemos realmente traducir esta para binario. Así, 110 en binario sería 6. 100 sería 4. Mesmo co mundo. Polo tanto, o número que se obtén ao permisos para iso sería 644. MIKE Rizzo: E se pensas que volta a cando CHMOD algo, eu creo eles deron no conxunto de problemas a exemplo de onde podería facer algo así como chmod 644 e, a continuación, o nome do ficheiro. O 644 entón, agora pode ver directamente de onde isto vén. Polo tanto, agardamos que fai que a un pouco máis clara. E, a continuación, para maior claridade do que cara - oh si, aquí é novo. Así, 600, a continuación, sería só o exemplo desistimos aquí, onde o propietario ten permisos de lectura e dereito, mentres grupo e mundo non teñen permiso para acceder ao arquivo. TOMAS REIMERS: E entón temos unha rápida lista de permisos comúns. Así, directorios, quere para efectivamente chmod 711. Rápida de banda - a un directorio para ter permiso de execución significa poder para abrir o directorio. Imaxes, CSS, JavaScript, HTML necesidades 644, xa que basicamente o mundo necesidades permisos de lectura. E PHP, o que vostedes viron aínda que non imos estar falando sobre iso estrictamente está tipicamente con CHMOD permiso 600 porque é executado con os permisos do propietario. Polo menos no aparello. MIKE Rizzo: Entón, se aínda non especificamente especificar o tipo de ficheiro quere en realidade, definindo esta presentación - tivemos un problema con iso, porque todo non foi CHMOD correctamente - vai conseguir, de certa forma, un erro prohibido que o sitio en realidade non ten permiso para acceder a calquera ficheiro quere acceder. E, por suposto, que pode ser modificado - como no conxunto de problemas -, cambiando permisos apropiadamente. TOMAS REIMERS: E o último comentario para desenvolvemento local é rapidamente - nós trouxo este, pero nós só queriamos para trae-lo de novo - Se preguntar a un servidor - servidor tan local, por exemplo, con ou algo. - e non especificar un arquivo específico, o arquivo que o seu ordenador está indo para pedir chámase index.html. Ou, se iso non existe, index.php. Legal. Entón, iso é só un resumo de todo, espera-se, que nós Cubrimos en sección, e charla, e ata agora en CS50. E agora imos comezar a falar sobre especificamente bibliotecas. Bibliotecas JavaScript e CSS para aplicacións web. Así, unha razón rápida por iso que temos bibliotecas é a programación - hai unha morea de problemas en programación, que seguen xurdindo de novo, e de novo, e de novo. Pode notar que unha morea de sitios ten a capacidade de ter suspensa menús, por exemplo, ou precisa de capacidade ter un botón moi normal estilo, que non se pode a cousa máis fácil. Agora que comeza a entrar en HTML, vostede entender que os botóns realmente ollar moi feo se non faga nada. Entón, unha morea de persoas teñen escrito chamado bibliotecas. E, neste contexto, son tamén chamado de frameworks. Nós imos utilizar o dous alternativamente. E o que son é que son, basicamente, pezas premade de código - ou CSS ou Javascript - que sacar unha morea de equipo que ten na codificación. Entón, eles pre-definir unha morea de clases ou pre-definir unha chea de funcións para O caso de JavaScript, que pode conectar máis tarde. E entón pode, de algunha maneira, obter acceso a este código, sen ter que facer nada. Un exemplo da biblioteca foi CS50.H. Esa foi unha biblioteca que demos a vostede de volta nunha semana, o que lle permitiu facer cousas así GetInt e GetString sen ter que escribir calquera código vostede mesmo. MIKE Rizzo: Todo ben. Entón, aquí, como tivemos que inclúen na nosa c arquivos diferentes bibliotecas, tamén debe incluír en nosa arquivos HTML diferentes bibliotecas. Por exemplo, se quixésemos incluír unha biblioteca de JavaScript específico aquí, quizais, que escribimos nos como el aloxado localmente chamados script.js, só usar esta notación. Polo tanto, temos tipo guión iguais JavaScript fonte iguais Javascript.js. E se pensas que volta para a súa CS50 problema de financiamento establecido, se ollar para header.php no cartafol modelos, ten que ver algúns deles incluídos. Polo tanto, este primeiro - os guións - é ata unha biblioteca JavaScript. Incluíndo unha biblioteca de CSS é un pouco diferente. Aquí, en vez de a escritura TAG precisa da etiqueta ligazón. E, a continuación, o tipo de texto CSS é un pouco diferente. Vostede non sempre ten que incluír folla de estilo rel. Pero eu creo que é, en xeral, boas prácticas. E entón, finalmente, o HREF, que probablemente viu nos seus ATAGs para vincular en diferentes elos só Especifica o enlace de onde atopar iso. Por exemplo, se quixésemos poñer en marcha un biblioteca diferente - imos dicir - que viviu en styles.css. E nós queriamos de conexión que, no que se aloxado na web, teriamos entendido. E, a continuación, cola-lo en todo o que temos aquí no seu lugar. TOMAS REIMERS: OK, espero que caras xa están familiarizados coa forma de conexión CSS. Tiña que facelo na o seu último conxunto marrón. JavaScript, algúns de vostedes quizais ten algunha experiencia con. Algúns de vostedes poden non. Entón, por agora, sabemos que un ficheiro JavaScript é moi parecido a un arquivo CSS en sentido de que pode chamar a el ou que se pode inclui-lo internamente. E iso permítelle cousas de script. E nós estamos indo a oriente-lo a través dun pouco de JavaScript máis tarde. Entón, usando unha biblioteca - xa que incluíu, é como simple como, literalmente, chamando a funcións ou engadindo o nomes de clase a el. A última cousa que quero falar sobre en termos de biblioteca - e esta é unha nota técnica - é o licenzas de código aberto. Entón, cando atopar estas bibliotecas reais, pode estar a pensar en Preguntas como é OK que eu son só usando o código de outra persoa, especialmente porque iso é algo que moi díxolle para non facer neste curso. Así, no caso de licenzas de código aberto, unha morea de desenvolvedores - xa que escribiu unha biblioteca, que cre que podería ser útil para outras persoas - vai publicar-lo na web e darlle unha licenza. E unha licenza basicamente di que eu son aquí a concesión de permisos para outro a xente a usar este software co seguinte tipo de estipulacións. Nós temos unha ligazón a un bo sitio para axudar a comprender as licenzas en Se executar para eles. Estipulacións comúns son cousas como está invitado a usar a miña biblioteca para Sempre que me dar crédito. Estás convidado a utilizar a miña biblioteca sempre que, cando se rompe non me culpe. Estás convidado a utilizar a miña biblioteca de tanto tempo como non usalo para gañar cartos a si mesmo. Estes son os tipos de común estipulacións. Para este proxecto final CS50, eles non deben ser super relevante porque os proxectos que vostedes usan son Probablemente si, máis ou menos, coñecido. Pero cando realmente saír ao mundo e comezar a usar as bibliotecas, que pode ou non ser tamén aplicado como algúns dos máis populares estamos estará pasando. É bo ser capaz de comprender esas licenzas e de entender o que significan. E volvendo. MIKE Rizzo: Aceptar. Entón agora pasar exemplos CSS real. Neste punto, ata agora, pode non atopei iso. Pero pode ter atopado el en súa vida cotiá en que algo parecer unha forma nun navegador o mesmo non se pode ollar camiño noutro navegador. Isto chámase navegador navegador compatibilidade. E cada vez máis se está facendo máis e un problema, especialmente cando navegadores tomar máis e máis liberdades para aplicar cousas como eles queren. Polo tanto, para superar isto, hai, en realidade, é unha gran biblioteca chamada Normalize.CSS. TOMAS REIMERS: Foron incluídos a ligazón. Neste punto, é útil se ten o seu portátil alí ollando para o web. E nós estamos dando tanto a vostede dereita agora simplemente porque a final CS50 proxecto está indo realmente para pedirte para implementar lo do mesmo xeito e mediante navegadores. Entón, só para manter-se na parte traseira da súa cabeza, esta é unha biblioteca marabillosa porque vai, dalgún xeito, estandarizar as cousas. En Firefox, algo pode amosar como un píxel á esquerda. E entón Chrome pode decidir que, en realidade, o que quería dicir foi de 10 píxeles á esquerda. E quere estandarizar iso. Normalice vai realmente facer un bo traballo de asegurarse de que o seu sitio web ten o mesmo aspecto en todos os navegadores. MIKE Rizzo: Entón, se quixésemos só prema na ligazón moi rapidamente e amosar vostede o que parece, ten pode baixa-lo usando o botón xigante descarga. Ou eu animou a ler máis sobre o tema premendo nesta ligazón na parte inferior canto dereito. TOMAS REIMERS: E se o Prema en ler máis alí - clic na fonte no GitHub - vai realmente ver o código fonte aberto licenza en LICENSE.md alí mesmo. E vai ver aquí é a licenza MIT moi popular. De novo, se ler o texto, vai ser capaz de atopalo na web fixemos referencia antes e poder comprende-lo sen ter que ler a través do xerga legal. MIKE Rizzo: OK, xenial. Entón, iso é normalice. Queriamos darlle que moi rapidamente. Oh, tes unha pregunta? Audiencia: Entón, cando baixa-lo, simplemente sigue este código que teñen baixo o botón Download? TOMAS REIMERS: Si, por iso cando baixar - MIKE Rizzo: Oh, iso é un gran punto. Entón, a cuestión era como facer nós realmente baixa-lo? Entón, se nós, prema na ligazón, vemos que realmente aparece no código fonte. Entón, para facelo, o que puidemos non é só premer en Gardar como. Gardar como e que debería abrir un arquivo. E, entón, pode optar por gardar como normalize.CSS. E entón ten que liga-lo en - TOMAS REIMERS: Do mesmo xeito que conexión en calquera outro arquivo. E unha vez que liga-lo dentro, o que é óptimo sobre normalice é que vai realmente coidar de todo o disco traballar por si mesmo. O que significa que non ten para engadir as clases. Non ten que facer nada raro. El vai normalizar sen ti facer máis nada. Si, ten que inclui-lo. Google Chrome non está a responder. Só un rápido separadamente - Notei que saltou para iso. O resto da presentación é Vai ser unha rápida visión xeral. Unha investigación de bibliotecas. Basicamente, o que son. O que eles fan. Como son útiles. Como pode implementar las. Se queres comezar a ollar para eles, acompañando, e da lectura a través eles, eu altamente fomentar iso. Alternativamente, vostede é benvido tamén para comezar a baixa-los e ata los nunha visión só para ver o que mira como ou o que facer se ten seu portátil diante de ti. Se non, vostede é benvido para manter escoitar-nos falar. Nós imos seguir a falar. E nós temos tempo ao final, espero que imos realmente comezar a amosar-lle que algunhas destas bibliotecas parecen. MIKE Rizzo: Cool. Todo ben, entón agora imos falar sobre Font impresionante. TOMAS REIMERS: Awesome tan Font é un lugar moi legal, especialmente para aqueles de nós que son menos artisticamente talent. Ignorando o nome do tipo de letra impresionante, dá lle unha morea de iconas, que son moi útil. Entón, unha morea de veces que vai implementar un icona que pode querer como un bo x entón que se pode pechar algo. Ou pode querer algún tipo de botón Editar cun deseño a lapis como todo o mundo ten. E iso é cando aprende que deseño das iconas se pode moi tedioso e difícil. Orixe Awesome - se realmente ir ao sitio web - dálle unha morea de iconas baixo as iconas na parte superior. Si, só o principio. Que vai che dar unha morea de iconas de balde. Entón, aquí se ve que ten cousas como un asterisco, bares, un raio, unha calendario, un insecto, un libro, etcétera. Isto pode ser moi útil. O xeito como incluír este é incluír literalmente o ficheiro CSS. E despois que incluíu o arquivo CSS, o que pode facer é crear unha tag chamado I. satands para Icona coa clase FA de pé para Font impresionante. E entón, calquera clase que sexa. Entón, se eu quería unha icona desta máis cadrado aquí, eu daría que a clase FA. E entón FA guión máis cadrado guión. MIKE Rizzo: Cool, Aceptar. TOMAS REIMERS: E entón, a última CSS biblioteca queremos pasar estamos tentar mantelo o mínimo en CSS bibliotecas porque perciben a título desta presentación é JavaScript Libraries. Pero pensamos que podemos tamén presenta-lo a outras bibliotecas mentres nós estabamos falando sobre bibliotecas. É Google Web Fonts. E o que o Google Web Fonts lle permite que facer é engadir fontes para a súa web, que é un xeito moi sinxelo de facelo fermosa e de distinguir o conxunto de todos os demais é se ten unha pía batismal agradable, ou se ten un bo colección de fontes. Google Web Fonts é agradable a diferenza doutros bibliotecas, no sentido de que é un instalación realmente guiada. Entón, se seguir a ligazón, por google.com / fonts, eu creo. Se seguir isto, Pode escoller o tipo de letra. Pode escoller á esquerda da espesor, inclinación, etcétera. E entón, unha vez que teña escollido un, pode facer clic en uso rápido. Ben alí. Parte inferior dereita da caixa. E, a continuación, role para abaixo. Primeiro de todo, eles dan-lle o CSS ten que realmente chamar a el. É alí mesmo. Pode simplemente copiar e pegar que dentro E a cousa agradable sobre este é en realidade non precisa aínda de descargar o arquivo. O que vai facer é o que vai de conexión para a versión de Google do mesmo. Entón, de volta para o que iso significa. Isto significa que cando un usuario descargar o ficheiro - traslada a súa páxina HTML - o HTML páxina vai referenciar este arquivo. Entón, o ordenador vai ver, Oh, el aloxado no google.com en vez que en theirsite.com. Deixe-me ir pedir a Google para este ficheiro. E, a continuación, vai para incluír practicamente como se se tratase dun parte do seu propio sitio web. TOMAS REIMERS: Cool. E xa que incluír iso, entón a inclui-lo no seu CSS, dálle a liña real. Entón, vostede define a familia de fontes propiedade igual ao nome da súa fonte. MIKE Rizzo: Aceptar. Entón, nós acabamos con CSS. E algúns de vostedes poden estar pensando, así, tivemos algúns CSS en CS50 Finanzas. Pero biblioteca CSS foi de bootstrap. Nós realmente incluír Bootstrap algo máis tarde, en JavaScript, porque con a biblioteca Bootstrap CSS tamén ven con unha morea de JavaScript que Bootstrap ou Twitter - que fixo Bootstrap - usa para xestionar todo o seu CSS. TOMAS REIMERS: Alguén ten algunha preguntas ata agora preto de CSS en xeral? Somos bos? Incrible. MIKE Rizzo: Awesome. TOMAS REIMERS: Entón movendo para JavaScript. MIKE Rizzo: Entón, nós queriamos falar sobre jQuery para comezar. Alguén escoitou falar de jQuery antes ou usou? Si, unha parella? Entón, se traballar só con nativa JavaScript, vai atopar-se escribindo unha morea de selectores de lonxitude moito. Entón, o jQuery fai é que ofrece un invólucro agradable para Javascript linguaxe que permite que facilmente seleccionar e manipular distintos elementos dentro do modelo de obxecto de documento páxina web ou o DOM, o que eu creo Vostedes oíron falar en charla neste momento. TOMAS REIMERS: Se aínda non escoitou falar ou charla, se aínda non asistiu aínda, o Document Object Model é basicamente como as cousas están representados. Así HTML tipo de parece unha árbore cando realmente sacala. Ten o elemento HTML na parte superior. Ten a cabeza eo corpo. E, a continuación, dentro de que ten todo o demais. Isto se refire como o DOM - Document Object Model. Así, un modelo que representa obxectos o documento é un xeito doado de pensar sobre iso. E un dos gran cousa sobre jQuery é el realmente fai travesía iso e manipular elementos dentro que incrible simple. Así, sinxelo, de feito, que a maioría dos JavaScript bibliotecas ou, se non o maioría, a gran maioría dos queridos vai ver realmente necesitan jQuery así que poden executarse simplemente porque se non ten jQuery, vostede ía perder moito tempo tentando descubrir como seleccionar seguro elementos e como facer outras cousas. E a outra gran cousa sobre jQuery é que é cross browser compatible. Entón lembre de volta cando dixemos que non todos os navegadores aplicar as cousas do mesmo xeito? Isto é certo mesmo en JavaScript. E unha das grandes cousas sobre jQuery é que detectará o e detectar o navegador método axeitado. Entón, se ten que seleccionar un elemento, Internet Explorer pode dicir que é debería facer desa forma. Firefox pode dicir o correcto camiño é por aquí. jQuery non importa. Cando di a jQuery para seleccionar un elemento que vai descubrir como é debería facelo dentro do navegador usuario está actualmente en, a continuación, facer desta forma. MIKE Rizzo: Entón non imos falar de o uso de jQuery un pouco. Así como PHP, jQuery ten unha especial cariño ao cifrão. Entón verás que calquera jQuery - así, non todos. Ás veces pode substituír o dólar asinar coa palabra jQuery. Pero, xeralmente, só porque é máis curto, sempre que ve jQuery sendo usado será cun cifrão. Entón, aquí estamos só amosando un comezo selector para un elemento no DOM. Aquí temos o cifrão seguido por parénteses abertos e entón cita. E dentro das comiñas ir nosos selectores para os distintos elementos. Así como en CSS, necesitabamos selectores para poder estilo distintos elementos dentro da páxina. Estes diferentes selectores traducen exactamente en jQuery e JavaScript, na súa maior parte. Polo tanto, temos aquí un foo punto. Entón, se lembrar da clase, o punto significa só a clase. Entón, nós estamos seleccionando elemento coa clase foo. Entón, se eu ir adiante e abrir a nosa JavaScript consola aquí moi rapidamente só demostrar que, se eu escribir o cifrão, vemos que é algunha función que vén á tona. E só está definido por jQuery. TOMAS REIMERS: Para aqueles de vostedes descoñecido, a consola é unha ferramenta dentro Chrome, que permite que, basicamente, executa Javascript no páxina actual. Isto vai atopar incrible útil cando en realidade está depurando e Debe ser como, o que é o actual valor dalgunha variable global ou o que é outra cousa? É unha especie de como GDB con excepción que realmente pode manipular elementos na páxina lo dun xeito moito máis fácil. E tampouco, basicamente, comprobe contigo antes que fai calquera cousa. Así, mentres, GDB pode ser como, está seguro de que quere executar o seguinte paso? O console é en real. Así como a páxina web está prestando e facendo todo o que está facendo, o consello de tamén correr ao lado del. E pode poñer o código en imputar que consola, que será executarse na páxina. MIKE Rizzo: Entón para entrar na consola, Creo que eu debería brevemente mencionar como facelo. Nos últimos problemas que pode ter usar Chrome inspeccionar elemento funcións ou páxina view source - e os que son accesibles só por dereito click na páxina ou dalgún elemento e facer ou inspeccionar elemento ou páxina de orixe vista. Tamén pode acceder Javascript consola directamente por escoller inspeccionar elemento. Consola Entón acaba de bater sobre o lado dereito. Alternativamente, podería tamén ir para o ángulo superior dereito, que é cortado na pantalla onde ten as tres barras horizontais. E ir ata ferramentas e entón consola JavaScript aquí onde pode ver - polo menos en Windows - a ligazón é o Control de Cambio J. Entón se quixésemos seleccionar un elemento nesta páxina, así como eu mostre antes, facemos sinal de dólar parénteses abertas e logo, cita. Unha cousa interesante é, en xeral, aspas e comiñas dobres son trocável. Entón, unha morea de xente só usar único comiñas, porque son máis rápidos para escribir de comiñas, porque non ten que suxeitar a tecla maiúsculas premida. Entón eu vou facelo agora. Entón, quero seleccionar algo con clase. Container, só porque sei que é algo que está no noso páxina web agora. E eu prema Intro. E vemos que seleccionou. Así, el mostra-se que devolveu ese obxecto. Entón, iso é unha selección básica. Se quixésemos realmente manipule, que tería que chamar algo en que a selección, a cal imos entrar máis tarde. TOMAS REIMERS: Entón, só de ollar para este máis en profundidade, iso non é diferente do que as chamadas de función que fixemos en C. O nome da función aquí é un pouco raro. É sinal de dólar. É só un nome dunha función. Non hai nada especial sobre el. Temos parénteses abertos. Entón, nós temos o noso único argumento, que neste caso, pasa a ser unha cadea, que é un selector para el. E, a continuación, temos a nosa paréntese pechada. É iso aí. Non é que moi diferente. Aínda que, se parece moi raro. E iso pode ser, de certa forma, unha degola apuntan a unha chea de xente. MIKE Rizzo: Entón, do mesmo xeito, se quixésemos para seleccionar un elemento que ten un ID, Agora queremos seleccionar por ID en lugar de clase. Sería algo semellante en que Só ten que facer o sinal afiada para ID. Entón, nós estamos seleccionando aquí todo elementos que teñen bar ID. TOMAS REIMERS: E iso se estende. Isto esténdese CSS. Así como en CSS, pode seleccionar todos conexións, que teñen a clase foo. Aquí, é o mesmo. Podería facer a.foo, que selecionaria todo vínculos co foo clase. Podería facer un bar pechada, o que faría seleccione a ligazón coa barra de ID e así e por aí fóra. Calquera selector CSS é un válido selector jQuery. MIKE Rizzo: Yeah. OK, entón agora imos entrar un pouco de manipulación que pode facer nosa jQuery. Entón jQuery ten un tipo particular de notación onde nós só usar un punto ao final. E pode pensar niso como en C como tiñamos diferentes estruturas. E para ir a esas estruturas, faría utilizar un punto de entrar neles. É dicir, tipo, unha cousa semellante. Só que agora temos funcións dentro deste selector que podemos chamar diso. Entón, aquí, o primeiro exemplo podes ver é un selector CSS. E, basicamente, o que iso fai é aplícase o primeiro elemento do CSS para esta cousa que seleccionou - ese elemento que seleccionou - co valor que. TOMAS REIMERS: Entón unha tradución fácil que sería se jQuery basicamente só tomou foo. E, a continuación, en CSS dixo, cor vermella e preto. É a mesma idea. O que se fai é que é seleccionado todos os elementos foo. E entón el se aplica. Máis ou menos, a cor da propiedade coincide co vermello. MIKE Rizzo: Do ​​mesmo xeito, tamén podemos cambiar o contido real do que é mostrando no código HTML da páxina, que é moi legal porque significa que o páxinas web poden agora ser completamente dinámico e non ten que ser estático que imprime usando PHP a principios de a páxina que está a ser cargado. Entón, aquí, se quixésemos cambiar o HTML real da páxina, teriamos agora chamar a función HTML, que entón só insercións todo o que especifican en este elemento que seleccionou. Entón, aquí estamos seleccionando elemento con foo clase e, a continuación, dicindo que é HTML é agora Ola mundo. TOMAS REIMERS: E cando pensa sobre o que son aplicacións útiles de este, este CSS, o primeiro que pode comezar a pensar é en termos de mesmo menús suspendidos. Pode comezar a facer cousas como, cando un usuario pasa o rato sobre a parte superior of a down gota, quere facer a parte inferior visible. Non? Así, en CSS, temos propiedades facer algo visible. Cousas como exhibición colonos ningún faría invisible. Bloque de exhibición sería facelo visible. Ou mesmo se quere ir máis simple, ten cousas como iguais visibilidade visible, ea visibilidade é igual a oculto. E pode comezar a aplicar as cousas como menús desplegable á dereita despois de pasar a idea de como pode descubrir cando esta se abre, que nós imos pasar por moi brevemente. Pero podemos comezar a ver aplicacións deste. Nun sentido similar, se fose para intentar e aplicar, por exemplo, unha conversa motor e quere facer un pouco de globo de fala veña sempre que ten ten unha nova mensaxe, xa que comeza a nova mensaxe, pode facer un pouco speech bubble chegar a modificación o código HTML da páxina, non? Engadindo que a burbulla do discurso adicional co texto extra alí. Si? Audiencia: Entón incorporaría iso dentro o código HTML como unha especie de [Inaudível]? MIKE Rizzo: Certo. Si, nós imos chegar a iso de aquí a pouco. Si, é un semellante pouco para PHP. Non é exactamente similar. Unha boa distinción a facer é o que este é realmente a edición cando editamos a páxina, porque non vai ser editando o ficheiro real que está a ser mantidas no servidor, xa que o mundo non debe ter permiso para editar os seus arquivos. Isto é só a edición que está na páxina eo que está a ser amosado dentro o navegador. Entón, se fose para volver cargar a páxina despois, dicir, a exclusión de algo coma nós ver o que podemos facer coa chamada de eliminación, que cousa ía reaparecer. TOMAS REIMERS: Entón, unha forma de pensar iso é se eu son o seu ordenador e Mike é, de certa forma, o servidor. O que vai ocorrer é que eu vou pedir Mike, hey, podo ter unha copia do esta páxina web? E el me vai dar unha copia do mesmo. Non, non é o máis orixinais. É só unha copia. E entón, como sería, oh, hai JavaScript aquí. Está claro, eu debería editar a páxina para ser así. E eu estou editando o seu exemplar. Pero isto non está afectando a copia real. E se eu fose para lle preguntar de novo actualizar a páxina, - hey, eu podo ter outra copia limpa - el me vai dar outra copia limpa. E entón, eu vou facer o mesmo como, oh, este JS aquí que di para editar este. E eu vou seguir facendo iso. MIKE Rizzo: Entón, unha cousa moi legal que se pode facer con jQuery é realmente engadir diferentes tipos de animacións para a súa páxina. Eu non sei se xa viu onde estás a un recheo de un formulario en liña e non encher as cousas correctamente. Entón, unha pequena cousa desliza cara abaixo na parte superior e di que non fixo iso correctamente. Por favor, ténteo de novo. E, a continuación, pode mesmo desprazar cara arriba. Acontece que jQuery foi construído en funcións que fan que todo isto animación moi, moi fácil. Polo tanto, non é o primeiro en desaparecer función fóra, o que pode conectar en algo. E é un xeito de cambiar o CSS de ese elemento dunha forma animada. Por iso, leva todo o elemento chamalo desaparecer diante. E, a continuación, cambia lentamente a súa opacidade ata que vai totalmente transparente. TOMAS REIMERS: O outro populares é desprazar para abaixo, o que pode facer algo que apareza, deslizando-a para abaixo. Así, no caso de que o menú para abaixo, outra vez, cando aprendemos a detectar cando este foi pairava sobre, podería só dicir que este fondo parte desprazar para abaixo agora. E entón, parece deslizando cara a abaixo. MIKE Rizzo: E entón, se só ten algún tipo de animación presente que jQuery non necesariamente ofrecer. Por exemplo, digamos que jQuery lle proporcionar unha foto abaixo e deslice cara arriba. Ben, digamos que quería desprazar algo da esquerda ou da o tipo certo de como o CS50 Iniciar fai sempre vai a un novo panel. Vostede, entón, probablemente terá que implementar lo usando o animar función dentro jQuery. Así, do mesmo xeito, só animar. E entón, dentro del hai que unha dicionario dos distintos valores que debería pasar. Entón, aquí, se quixésemos animar o foo elemento de tal forma que a súa anchura ou expande ou contrae a 80 píxeles, dependendo do que é actualmente. Nós só pasar isto como argumento dentro del. Animar tamén algúns outros argumentos que podería pasalo, por exemplo, a velocidade da animación que quere dar a el. E para facelo, quere só de dicir Google rapidamente jQuery animar. E entón, traer á tona esta páxina, pode ver que ten unha morea de diferentes propiedades que pode pasar. E eu encouraged-lo - sempre que vén a través de algo que non fai saber ou só quere saber máis sobre un determinado método que pode chamar en algo - só Google. jQuery é moi ben documentado. E moitas veces hai un gran número de exemplos que fornecen para ti. Se rolar para baixo - camiño - que podemos utilizar, tamén. Unha vez máis, cando un creador realmente vai pola dificultade de escribir un biblioteca, eles normalmente queren alguén a usalo. Así, xunto vai ser unha documentación. E que a documentación se pode normalmente atopados na páxina do proxecto, que é por iso que che deu ese sitio orixinal en o principio, que conecta vostede ao páxinas do proxecto para que poida ver que a documentación. Normalmente, a páxina do proxecto no caso de [inaudível], el dixo que o nomes das clases. No caso de JavaScript, dá o nome das funcións. By the way, desprazarse ata o cumio, unha nota lateral rápida en funcións é sempre que ve unha función aplicada así co disco corchetes no medio, o que significa que esa propiedade é opcional. Só un heads up. Vin unha morea de preguntas sobre iso. Entón, aquí podemos ver que o animado leva propiedades como un argumento necesario. E todo o demais é opcional. Nota lateral - pode pensar niso, tipo de, como páxinas do manual. As páxinas mansión documentación para C e para unha morea de outras cousas, tamén. MIKE Rizzo: Entón, nós aprenden como cambiar CSS diferente na páxina, animar lo e eliminar engadir HTML. Pero un dos realmente máis potente cousas sobre JavaScript e especialmente jQuery - o que lle permite facer é responder a distintos elementos que acontecen. Por exemplo, temos aquí un manipulador de eventos. E iso só quere dicir que sempre que esta evento ocorre, nós tratar con isto dunha determinada maneira. Entón, aquí, o evento xenérico jQuery manipulador é o punto en. E, a continuación, o primeiro que subministra é o evento que debería ser escoitado. Entón, aquí, é o clic que estamos esperando. TOMAS REIMERS: Alternativamente, ten en foco, que é moi popular. Entón, de volta ao meu drop down idea menú. Vostede tería a de arriba en hover. E entón pode cambiar iso. MIKE Rizzo: Certo. E entón, cando isto ocorre, el só executa esta función que darlle como un argumento e que el alerta Ola ou ola. TOMAS REIMERS: Entón, no caso de JavaScript, este é un lugar que precisa eliminar-nos de C. Podemos realmente asumir funcións como argumentos. E hai unha morea de verdade formas complexas de facelo. Imos promover un xeito, que é o que pode facer que o funciona alí. Entón, cando está pedindo por unha función como un parámetro, está basicamente só vai definir a función no lugar. E a forma como define unha función en JavaScript é vostede literalmente dicir función. Entón, normalmente, o nome da función. Pero nós nunca imos facer referencia esta función de novo. Entón, nós deixar sen nome. A continuación, os parénteses, a continuación, o rizado chaves, e entón o código dentro dese. Entón, nós entendemos que pode ser un pouco confuso. Entón, nós dámoslle a forma xeral de o que un manipulador de eventos parece a continuación, o cal é en eventos. E entón, o seu código dentro dese. MIKE Rizzo: Hai algún preguntas sobre iso? Isto pode ser un pouco confuso a primeira vez que ve-lo. TOMAS REIMERS: Realmente quere abrir un arquivo e amosar-lles algúns jQuery agora? MIKE Rizzo: Si, imos facelo. Aceptar. TOMAS REIMERS: Entón agora estamos no aparello. E o que nós fixemos é que tomamos a liberdade de crear tanto un index.html arquivo, que conecta a un arquivo JavaScript. E podemos abrir o - si. Ben, fai dúas cousas. A primeira é a que une a o arquivo JavaScript. E veremos que aquí enriba. Vemos que na cabeza do Documento HTML, particularmente. Entón podes ver que hai que que, basicamente, dicir SRC, que representa a fonte. E esa é a URL. Entón, aquí pode dicir que temos incluído jQuery. E nós tamén temos scripts. A outra forma de incluír JavaScript que pode incluír un script incorporado tag como temos na parte inferior onde di tipo de escritura é un texto de JavaScript. Entón, nós estamos dicindo, escoita, estamos ata o punto de incluír un guión. E o tipo de que a escritura é JavaScript, que é un tipo de texto. Moi sinxelo. MIKE Rizzo: Entón, iso, de certa forma, comeza a súa pregunta sobre como nós temos JavaScript no arquivo, porque cando nós tiña PHP, facemos algo así. E entón, temos as nosas funcións PHP - digamos que facer stocks algo co que - vai alí. Con todo, agora temos as etiquetas de script que damos a ela, que en realidade son parte do propio HTML, porque non é finxindo ser un ficheiro HTML como se é en PHP, porque se realmente ir en e ollar para a fonte da páxina, vai ver estas etiquetas de script alí con Javascript asociado deles en que. Entón, se quixésemos escribir algún JavaScript - imos só dicir que quería cambiar o corpo porque agora eu non teño calquera outras marcas que realmente podo editar ademais corpo. Nós só dicir que eu quería cambiar o CSS de que. Entón, imos adiante e cambio a cor do que para o vermello. Entón eu gardar o ficheiro. Imos volver á nosa páxina web, actualizar, e el fai iso automaticamente porque non parece que esperou en todo, porque non estabamos escoitando para un evento ou algo así. TOMAS REIMERS: Entón, se volvemos a ese ficheiro en particular - o HTML arquivo - o que vai ver é que temos - lembre que este é cargado, dalgún xeito, en orde cronolóxica. Polo tanto, temos por primeira vez a cabeza. el leva estes dous arquivos. Entón imos para o corpo. E vemos Ola mundo. Entón prestamos Ola mundo. E entón a última cousa que temos si temos etiqueta script. Así, córrese o tag script, porque é non dicíndolle para esperar por nada. E iso é o máis básico forma de executar JavaScript. Con iso dito, pode pór a escritura marcar-se na cabeceira só para mostrar ese punto? E realizar iso. Nós imos entender que non cambiou a cor. E este é un dos problemas de JavaScript é que as cousas están cargados nunha orde cronolóxica. Así, no momento en que este código estaba correndo, foron seleccionados - volver - etiqueta corpo. A etiqueta corpo aínda non existe porque Javascript está en liña con HTML. Así, o navegador é como seleccionar corpo. Hai aínda existe tal cousa. Así, podemos ignorar isto. E nós continuar. E, entón, establecer unha etiqueta body. Pero iso non é actualizado. Entón, cando está aplicando guión etiquetas, asegúrese de poñer tras a etiqueta body. Seguinte foto. MIKE Rizzo: Aceptar. Polo tanto, cambiou algo. Pero non parece que respondeu a nós en todo, porque só unha especie de fixo así que cargou a páxina. Entón, agora, en vez de facelo, por que Non podemos engadir un manipulador de eventos. Entón, imos facer algo ao corpo outra vez. E imos dicir que facelo en - clic. Imos engadir unha función. TOMAS REIMERS: Imos mudar a súa cor para vermello de novo. Por que non? MIKE Rizzo: Si, imos cambiar súa "cor a vermello de novo. Todo ben. Entón, imos volver cargar a páxina. OK, imos ver - como se esperaba, non queda vermello aínda. Pero, entón, podemos ir adiante e prema nel. TOMAS REIMERS: E el está vermello. MIKE Rizzo: E fai quedan vermellos como esperado. TOMAS REIMERS: E vemos como podemos empezar a construír moi básico interacción. Outras cousas que pode querer facer é, se non quere facer o corpo cor vermella, imos facer o HTML fondo de cor vermella. Só así é a mesma CSS. E cando nós mudalo, podemos ver que efecto moi dramático de cambiar o páxina enteira. Entón, de novo, se está implementando cousas, pode ter un compoñente que se destina a ser premendo. Digamos que un botón Saír e todo outro compoñente, que se destina a reaccionar. Entón, ten que eliminar un diálogo cando isto ocorre. MIKE Rizzo: Aceptar. Só como exemplo - non pode ver iso antes - Eu vou te amosar o que parece como cando ocultar algo. Entón, eu vou adiante e non desprazar cara arriba. TOMAS REIMERS: Queres dispor que nun Tipo de parágrafo antes de facelo? MIKE Rizzo: Aceptar. Si, por que non facemos iso só para que podemos selecciona-lo un pouco máis. TOMAS Reimers: e imos darlle unha clase. MIKE Rizzo: Yeah. OK, entón imos ver. No canto de seleccionar o corpo real agora, eu vou escoller todo con Ola clase, que aquí nós só ten unha cousa. Así, non hai necesidade de preocupar con iso. Entón, eu vou actualiza-lo. Eu vou adiante e faga clic nel. E iso, de certa forma, fixo unha foto estraño se algo, o que non parecía que atractivo. Xeralmente, se parecen moi agradable. Coido que, este - para algúns razón - non o fixo. Vou só facer un fade out así pode ollar para iso tamén. Moito máis agradable. E entón, se eu abrir o Javascript consola de novo e queremos ver o que parece que cando se desvanece-lo dentro Agora, eu só chamo fade in nel. E el desaparece atrás dentro Do mesmo xeito, poderíamos tamén pasar un argumento para fade in ou fade out, o cal é, de certa forma, a velocidade do mesmo. Entón, imos seguir adiante e dicir que queremos que vaia desaparecer lentamente dentro Entón eu creo que aínda parecía moi rápido. Pero foi máis lento que antes. TOMAS REIMERS: E se quere atopar máis sobre estas cousas, unha vez máis, só tes que ir para a documentación do jQuery, que che dei, e ler a través destes. Eles documentan as súas funcións incrible ben. MIKE Rizzo: Aceptar. Entón eu creo que imos volver a iso. E podemos falar sobre a nosa última páxina. Así, podemos rematar con Bootstrap. E entón nós imos abrilo para algunhas preguntas. E se vós ten algunha idea de que que quere tentar xogar para arriba e ver se podemos implementar los con JavaScript rapidamente. Entón, moi rapidamente sobre Bootstrap, que automaticamente incluído no o seu último conxunto de problemas no cartafol CSS e, de feito, conexionada no seu header.php. Entón, vostede podería ter engadido as clases que establécense dentro Bootstrap para el. E tería un estilo automaticamente isto de acordo. TOMAS REIMERS: Entón Bootstrap é moi cousa máxica desenvolvido polas persoas en Twitter. E o que era para facer era - antes de sitios foron realmente difícil facer unha boa aparencia, especialmente cando tiñamos unha morea de compoñentes comúns. Entón, unha morea de botóns no web parecía o mesmo. Un gran número de campos de texto poden ser feitas para parece mellor que o texto estándar campo probablemente sabe de verdade sitios antigos ou moi mal feita sitios, que se parecen con literal caixas de texto, sen ningunha forma de texto sombra ou calquera especie de bo esbozo. Entón, o que fixemos foi Bootstrap dixo, ben, Temos moitos estilos comúns. Por que non facer un conxunto común de CSS e un conxunto común de JavaScript como ben, o que pode denominala lo como está e que pode dar ás persoas cousas como caída down menús, o que pode dar ás persoas cousas como modais. Modalidade é o que aparece sobre a páxina sempre que sexa estrictamente falando algo, que aínda inhibe interacción ata que interactuar con el. Algo como isto é, ten a certeza que quere eliminar esta cousa? Realmente non pode facer máis nada ata que diga si ou non. Levou todo isto e embalados xunto e dixo: aquí imos nós. As persoas poden agora utilizar isto. E pode atopalo máis en getbootstrap.com. Automaticamente incluídos dentro o seu último conxunto de problemas. E vostede é máis que benvidos para usalo no seu proxecto final. E se queres seguir que conexión para Bootstrap. Vai ver aquí é a Bootstrap local CSS. Verá Bootstrap. E se rolar para abaixo, verás como baixa-lo, como instala-lo, etcétera. MIKE Rizzo: E tamén se pode, curiosamente, personalizar-lo para ser o tipo de temas que quere. Sei que é algo que eu fixen para o meu proxecto final cando tirei a clase foi personalizar-lo. Unha versión diferente do que Bootstrap tiña un esquema de cores diferente e distintas formas de algúns cousas distintas. Entón eu encorajo a xogar con iso. É unha especie de divertido de facer. TOMAS REIMERS: Mirando na parte de arriba de novo, é moi parecido ao tipo de letra Excelente sitio. Unha gran cantidade de documentación terá comezo a parecer semellante cando ten vin o suficiente del. Polo tanto, temos aquí o CSS compoñente desta. E vai ver como pode denominar as cousas. Entón, se fai clic en táboas, por exemplo, pode inmediatamente facer un mesa moi simplemente engadindo a táboa de clase para el. Mesmas cousas para os botóns. Se simplemente engadir o BTN clase e BTN defecto ou BTN primaria, pode obter calquera destes botóns con estes estilos prefabricados. E entón, se está a buscar algo máis complexo do que simplemente restyling que w xa ten, ao longo de guía JavaScript na parte superior nós ten unha morea de compoñentes. Polo tanto, temos aquí transicións, modales, menús suspendidos, guías e consellos. A información é o que aparece baixo o seu rato cando pasa o rato en algo. Popovers, alertas, botóns, desmontable acordeões é o que son xeralmente chamados. Carrosséis, que aleta a través de imaxes como. Entón eses son os compoñentes de Bootstrap. Quere incentivos-lo a altamente van ollar para eles. Hai un compoñente de JavaScript e un compoñente CSS. Sinto-se libre para usalos como sexa. Non estamos indo a ir moito para eles porque sentimos a documentación é realmente ben feito. E si. Tes algunha dúbida sobre iso? MIKE Rizzo: Entón como son realmente rápidos banda, o deseño da páxina web que nós axiña xuntos para esta presentación é realmente feito empregando Bootstrap. Como verás, cando prememos sobre estes pestanas diferentes, nunca está realmente saír desta páxina index.html actual. Entón o que temos é diferente divs dentro deste index.html. E entón, sempre que facer clic nun diferente guía, é só cambiar que amosa o un. Por iso, segundo os sitúa, cambia o código HTML da páxina, de xeito que a guía actual está marcado como activo, de xeito aparece de forma diferente e aparencia moi bo. TOMAS REIMERS: Para que todo se fixo sen nós escribindo case todas as CSS. Vemos tamén unha cabeceira na parte superior, que as cores son por nós. Pero o real poñelas no parte superior da páxina e facer el desprazamento foi Bootstrap. E, a continuación, ata a outra biblioteca - este non é o que falamos, pero unha Pode google, se queres. Isto chámase prettify.js. E vai sintaxe destacar o seu código para ti, utilizando CSS e JavaScript. A última cousa que quero falar antes de libera-lo para o mundo a mirar para as bibliotecas para descubrir como usalos e, con sorte, ler documentación e atopar o que necesidade é como atopar bibliotecas. Así, a primeira é que estamos só vai empurrar Google. Ir a Google. Isto é literalmente o que facemos cando que facer algo é que Google. Existe unha biblioteca JavaScript que me permite manipular o tempo nun forma útil? Entón, se eu sei que algún usuario crear unha conta aquí, e iso é o actualidade, como podo calcular o diferenza de que, sen ter que calcula-lo eu mesmo? Polo tanto, esta é realmente unha cousa común, Biblioteca JavaScript tempo. E aquí nós Moment.js-- o máis popular. Se necesita unha biblioteca para manipular algo así como cor a ser capaz de xerar unha morea de cores aleatorias - posiblemente, para xerar un estilo ou algo así - poderiamos Google algo así como JavaScript biblioteca de cores. E estou seguro de que ía aparecer con mil e unha delas. Estás convidado a le-los. Así, a maioría das cousas - cando atopalos - van ser hospedado nun dos sitios que código servidor. Son algúns dos máis populares. O máis popular, por agora, é github.com. E se vai a GitHub é realmente Normalice onde estaba aloxado. Entón, se quere volver a aquela. B-lles que. MIKE Rizzo: E iso é realmente onde este aloxado tamén, se reparou. TOMAS REIMERS: Yeah. Entón, se pasar por riba de normalizar e ir ao GitHub. Era é isto? MIKE Rizzo: Esta cousa de gato é o símbolo GitHub. TOMAS REIMERS: Ah. Así GitHub emprega un método chamado Git para almacenar código. É que non sabe o que é ou isto asusta ti, iso é bo. Non ten que saber o que é o Git porque GitHub ten un botón de descarga na parte inferior dereita. A outra cousa útil saber sobre GitHub é a maioría dos produtos terá un me ler. E se eles non teñen un sitio web, o Ler me falar sobre como instala-lo, como usalo, o que fai, et cetera, et cetera, et cetera. O que temos sido, basicamente, pasos a través. MIKE Rizzo: desistir de Internet. TOMAS REIMERS: Isto é bo. As dúas últimas cousas que queriamos para falar - nós xa falamos sobre Git - é solución de problemas. E iso non é tan relevante para a o produto final, xa que é ao saír 50. E cando ten produtos implantación de bibliotecas ou aplicando o seu propio proxecto, vai ten dúbidas ou se está vai mirar para preguntas. Unha vez máis, Google. Isto é, literalmente, o que facemos. Isto vai parecer bobada. Pero, literalmente, que Google. E de novo, unha das primeiras cousas normalmente vai executar en é stackoverflow.com, que é un marabilloso preguntas e respostas vista. É marabilloso tanto porque pode publicar as preguntas e buscar respostas, pero tamén porque el xa ten unha morea de contido pre-cuberta alí. Por iso, normalmente cando Google unha programación cuestión na primeira matrimonio bate en xa pode funcionar para el durante os seus conxuntos de problemas. E entón, a última cousa que realmente breve é JSFIDDLE, que é - hoxe temos está a facer unha chea de traballo con JavaScript HTML CSS. JSFIDDLE é unha aplicación web, que basicamente permite que Tomé o HTML, SÚA JavaScript parte inferior esquerda, e seu superior dereita CSS. E entón pode crear unha rápida prestación el e ver como interactúa. É moi útil cando a xente está intentando para facer unha proba de concepto como esta é a forma como faría facer un menú desplegable. Quizais un uncover rápido ou o que sexa. MIKE Rizzo: Entón imos adiante e prema iso. Unha nota rápida - que, antes de ser facendo no clic. Acontece que JCorey Corea tamén ten un built prema o manipulador de eventos que usa só porque se atopa está vai querer facer unha morea de cousas cando quere algo clic. Do mesmo xeito, el tamén ten un foco. Pero, para obter toda a gama de aqueles, mire para o jQuery documentación e facelo. Eu fixen algo estúpido aquí. TOMAS REIMERS: Entón, eu teño un moi rápido programa aquí, que di botón no clic. Entón temos un lazo for. Para i é inferior a 404. El só vai aparecer estas mensaxes de alerta. MIKE Rizzo: E cal foi o código 404 representaba HTML? Alguén se lembra? Non se atopou, certo. Chrome tamén engadiu esta ordenado cousa en que pode - TOMAS REIMERS: porque a xente quere Mike comezou a facelo moito e usuarios irritantes, o que permite ves info. MIKE Rizzo: Yeah. TOMAS REIMERS: Será que temos algunha dúbida sobre iso, sobre JavaScript bibliotecas, atopando bibliotecas ou miradas que desenvolvemento web como no mundo real? Estamos correndo contra o tempo. Entón, eu non estou seguro de que imos ter tempo para aplicar a menos que sexa moi rápido. Será que somos bos? MIKE Rizzo: O que vostedes gustaríalles ver moi rápido, tipo, dous minutos ou menos? TOMAS REIMERS: Calquera cousa podemos aclarar? Como escribir en - Audiencia: [inaudível]? MIKE Rizzo: Si, así que isto é - TOMAS REIMERS: Pode só bater Control-K na páxina web. MIKE Rizzo: Oh, eu non sabía. TOMAS REIMERS: Eu creo que si. Control-U. É. MIKE Rizzo: Ah, entón ese é o código ao sitio. Pero se realmente quere facer a descarga noso arquivos e todo máis, está aloxado en github.com TOMAS REIMERS: reducir o meu nome - Tomas Reimers - Slash Seminario CS50 guión. MIKE Rizzo: E pode atopar todo alí. TOMAS REIMERS: Isto é o que GitHub parece, polo camiño. Entón, de novo, cando ve unha fonte aberta proxecto, normalmente, van ser unha lectura alí que podes ler. E se volver, notarás que ten o zip de descarga, que será permite a descarga da fonte código para incluír o produto na súa propia cousa. MIKE Rizzo: Si, e se nós só click nas index.html moi rapidamente - TOMAS REIMERS: Vai ver aquí é a código fonte para o noso sitio. MIKE Rizzo: Ademais, eu esquezo de empurrar dereito antes coa táboa grande que incluído, pero hai tamén unha mesa de chmods que incluímos só para a súa claridade. Pero se percorrer todo o camiño ata o fondo, nós realmente non facer moito moito co JavaScript cousas en todo con iso. É exclusivamente desde todo outra cousa que tivemos. Entón gracias a vós por vir e escoitar. Esperamos que este foi realmente útil. Se tes algunha JavaScript relacionado preguntas ou simplemente quero falar o que máis me gusta do que outras cousas legais podes facer con JavaScript, Adoraríamos para falar con vostede. TOMAS REIMERS: Se tes unha pregunta sobre o seu proxecto ou se iso se pode relevante, probablemente imos ir por aquí un pouco despois diso. Pero ademais, teñen un bo fin de semana. MIKE Rizzo: Si, gozar. Vexo vostedes. TOMAS REIMERS: Ata máis.