>> Jason Hirschhorn: Benvido, todos, a semana nove.
Temos unha semana emocionante por diante porque temos o noso conxunto de problemas final.
Temos tamén unha nova linguaxe, JavaScript, que xa está en
medio da utilización non só para este conxunto de problemas, pero moitos de vós
probablemente utilizalo para a final proxectos, especialmente
proxectos finais baseados na web.
Entón é iso que nós imos pasar por riba hoxe, despois de fala brevemente sobre os recursos,
que facemos todas as semanas.
Imos ir para JavaScript, e despois imos gastar todo sección cunha
hands-on actividade de codificación Dolphin train 2K13, que é como Madden
De 2013, pero para os golfiños e en JavaScript.
>> [Risas]
>> Jason Hirschhorn: Entón, como sempre, unha lista de recursos para que confía.
Estes recursos son especialmente importantes porque a próxima semana
Mércores é un cuestionario, o seu segundo e cuestionario final neste curso.
Así como cuestionario cero, que é de 75 minutos e comeza un pouco despois das 01:00.
El cobre todo, dende o día cero deste curso, pero certamente
subliña todo o que ten pasou desde cuestionario un.
>> Pero, claro, nós Cubrimos loops no inicio do ano.
Por voltas probabelmente aínda van ser unha parte deste cuestionario, polo que non é
como pode ignorar todo o que pasou antes da semana de cinco ou cuestionario de cero
porque este curso baséase en en si unha gran cantidade.
Pero, sen dúbida, a énfase será sobre cousas que aprendemos desde semana seis.
Isto inclúe PHP, JavaScript, SQL para estar seguro, e tamén o máis avanzado
estruturas de datos que falamos en C. Unha serie de outros temas, pero nós
vai discutir iso a próxima semana como facemos unha revisión ao quiz.
>> E tamén, como sempre, se ten calquera preguntas sobre a proba que estea
preparar, sexa a vontade para envialas do meu xeito.
Agora, alguén ten algunha preguntas rápidas sobre o cuestionario?
>> Aceptar.
Non se preocupe con iso ou aberración se sobre o momento, pero manter isto
parte traseira da súa mente, porque iso é pasando unha semana e un día a partir de agora.
>> Finalmente, sei que estamos correndo cara o final do semestre -
hai só dúas seccións restantes despois iso - pero eu estou animado e
ansioso para o seu producto se ten algún.
Eu quero facer aqueles a dúas mellores seccións de sempre.
Eles probablemente van ser, porque cada sección é incrible eo mellor de sempre.
Eu non sei como iso é posible, pero todos eles foi fantástico, eu creo.
>> O producto que comece xa sumiu a nada e ninguén, pois ao
último par de semanas, polo que dar me un feedback se ten iso.
Leva tres minutos.
Que me pode dicir as cousas boas que quere que eu continúe a facer ou
cousas que podo traballar.
Estou intentando ser o mellor profesor posible, ou eu estou tentando facer o mellor
Podo, pero non podo facelo se eu non fai sei como vostedes están facendo.
E é difícil dicir por que está caendo durmindo na clase, así déixenme
coñecer despois por que ese era o caso.
>> Eu mostre-lle esta foto a semana pasada.
Este é o Teenage Mutante Ninja Turtle moto que eu tiña cando eu era máis novo,
e nós estamos continuando a empurrar vostedes sen rodinhas como mergullo
ti noutra lingua.
Pero por suposto, JavaScript, como PHP, é moi semellante a cousas que
feito no pasado.
Unha boa parte da lóxica traslada máis, se non a sintaxe, exactamente un por un.
Pero, de novo, todos estes idiomas nós fomos alí no último par de
semanas, a pesar de parecer esmagadora, son incriblemente potente e permitirá
facer unha morea no seu proxecto final e, probablemente, outros sitios que
código no futuro.
>> Así, sen máis delongas, imos para comezar a mergullo en JavaScript.
Nós imos falar sobre iso de forma breve e entón realmente entrar no hands-on
codificación parte desta sección.
Entón Javascript é un script do lado do cliente lingua, o que quere dicir que é
diferente do que PHP e é diferente de C. Javascript non está feita e
non se executa o servidor.
Pola contra, cargalo.
Vostede leva unha páxina de JavaScript cando leva unha páxina web, a continuación, el executa
na súa máquina.
O que significa que se pode ver todo o O código JavaScript que era
enviado para o seu ordenador.
>> Ás veces é acurtado ou codificados un bit, criptografía un pouco, de xeito que
non pode dicir explicitamente o que está pasando.
Por exemplo, se comprobar CS50 ou a solución persoal para esta semana
conxunto de problemas, e vai para service.js, notarás que non pode realmente dicir
o que facer a partir do que lle deu.
Nós cifrado-lo un pouco para facer que un pouco máis difícil.
Con todo, se pode ver exactamente o JavaScript arquivo que estamos executando
e noso programa está a ser executado.
Entón, iso é o que significa ser un linguaxe de script do lado do cliente.
>> Semellante ao C e PHP, porén, JavaScript ten para loops, if / else
condicións, mentres loops.
Semellante a PHP, que ten un loop foreach tamén.
E tamén, moi semellante ao sintaxe que vimos en
linguaxes que nós xa traballei.
>> Finalmente, unha das partes máis legais de JavaScript, e algo que será
facendo unha morea de hoxe, e, probablemente, vai estar facendo unha morea co seu conxunto de I se
non probou xa, é vostede Pode comprobar os erros que ten
no seu código vía JavaScript Console.
Nós miramos un pouco a semana pasada.
Miramos para un tipo de consola para inspeccionar unha páxina, pero en
Chrome, unha vez máis, podes ver o esquema, HTML, documentar que a súa páxina é
mostrando na pantalla.
Tamén pode ver a JavaScript formar esta páxina, e tamén pode, como
Eu dixen, ver os erros na consola de JavaScript.
E nós imos probar isto máis en un pouco cando comezar a programar.
>> Unha cousa a notar sobre JavaScript variables.
Como variables PHP, son feblemente tipado, así que non
darlles un tipo específico.
En termos de alcance, que se define por contrasinal "var".
Entón, se non poñer a palabra chave diante de algo, é só escribir o nome
da variable, a continuación, unha asignación operador, neste caso, o signo igual.
Estou esquecendo un punto e coma alí mesmo, pero supoñer que hai un punto e coma
alí mesmo.
>> Entón, está creando unha variable global.
Se pór o seu contrasinal "var", entón está dando algún tipo de lugares
ámbito, se isto é para unha función ou un lazo.
Entón iso é unha cousa para Vote variables.
>> JavaScript é a linguaxe.
jQuery é a biblioteca construída encima a linguaxe JavaScript, e ten
visto antes na charla.
Recomendo, se está indo a estar usando Javascript no seu último
proxecto, que comeza a coñecer jQuery.
Fai todo o que queiras para facer moito máis fácil.
Tamén ven con marabillosas documentación e exemplos para axudar a obter
comezou.
Hoxe imos ser usando jQuery tamén.
>> Estes, o que eu teño neste foto, son o básico de jQuery.
Na parte superior do seu arquivo HTML ou Sexa o que sexa - o ficheiro index.php, o seu
ficheiro index.html - ten que inclúen estas dúas liñas.
Estas son as liñas moi xerais.
A primeira liña inclúe o jQuery JavaScript arquivo, ea segunda liña
inclúe, sempre que escribiu seu propio código JavaScript.
E, por suposto, xa que na súa O código JavaScript que probablemente xa usou
algunhas funcións da biblioteca jQuery, que debe ir atrás do
jQuery script de inclusión.
Imos explorar esta novo nun momento.
>> E, finalmente, o ficheiro JavaScript, Eu chamo iso dunha index.js.
Podería ser scripts.js.
Sexa o que sexa, calquera que sexa o Javascript arquivo que, comeza xeralmente
con esta liña de código, sinal de dólar, paréntese aberto, documento, paren próximos,
período, listo, paréntese aberta, función, paréntese aberto, paren Pechar e
bosquexo.
Xoga o seu código dentro de alí, e entón remata-lo cunha bosquexo, preto
paréntese, punto e coma.
>> Entón tome isto como un dato adquirido.
Se está indo estar usando jQuery, enrole todo o seu código jQuery dentro
esta liña de código.
E veremos iso de novo nun segundo.
>> Unha vez máis imos traballar con jQuery, e por favor, facer preguntas como nós imos
hoxe en día, pero alguén ten algunha preguntas sobre jQuery ou
JavaScript agora?
>> Aceptar.
Así, sen máis delongas, eu presento para ti Dolphin train 2K13.
Estou super animado con este último versión do produto.
>> Oh, non!
Eu estaba tan animado.
Eu estaba indo a mostra-lo a vós, pero parece que non temos
implementado aínda.
Imos facer deste un pouco maior.
Entón, se eu cargar o código para Dolphin Trainer - Dang el.
Sinto moito, persoal.
Eu estaba a traballar neste antes da clase.
Penso telo completado, pero eu creo que aínda teño algúns
traballo a ser feito.
Pero, por sorte, vós todos teñen algún JavaScript jQuery e práctica, de xeito
imos adiante e rematar isto xuntos.
>> Eu creo que eu mandei vostedes copias deste, porque eu estaba super animado
sobre iso, entón ten que ter o mesmo código que eu teño.
Imos dirixirse para -
Dang, rapaces, me desculpe.
Imos dirixirse para o terminal, con todo.
>> Así como co seu problema pasado conxuntos, se ten o meu -
imos facelo un pouco máis grande, tamén, para vós -
levou o meu arquivo zip.
Probablemente abriu o zíper.
Imos aquí.
E entón, esperamos, vostede moveuse en no mesmo directorio onde salvo
seu conxunto de problemas oito código.
E nós gardar nese directorio para que eu poida acceder a ela - ou todo o que podemos acceder a
código no navegador Chrome no noso ordenador.
>> E, de novo, para chegar a ese código, escriba o enderezo atopar en
parte inferior, á dereita o aparello, aquí abaixo.
Atopa o seu enderezo IP.
Escribe en que o navegador Chrome no seu ordenador, e, neste caso,
xa que estamos a carpeta sección nove, Tamén temos que engadir unha
reducir sección nove.
>> Déixeme -
oops.
Eu estou indo a minimizar iso, entón eu non ten que estar pulsando por iso.
>> Entón é así que eu configurar este código.
Eu xa fixen iso xa.
Eu non vou pasar por aqueles pasos porque é iso que o
desde o inicio do conxunto de problemas anda a través de como facer.
Entón vai adiante e terá de definir esta Se en un segundo, pero primeiro imos
explotar este código como un grupo.
>> Imos ver o que eu fixen.
Tente obter a maior parte dela fixo Antes da clase, pero eu creo que
Foi un pouco para atrás.
Entón, imos abrir index.html.
>> Aceptar.
E index.html é realmente sinxelo páxina, por que eu non fixen
quero ir moi tolo.
Realmente quería estar seguro de que estaba a traballar, pero eu creo que eu
non chegar tan lonxe.
>> Aquí está a cabeza, o que vén logo dentro etiquetas HTML, e notamos
un par de cousas para a dereita fora do pau.
Temos o dereito de arquivo CSS aquí eo adecuado
localización do ficheiro CSS.
Temos a biblioteca jQuery aquí, e vai notar algo diferente
sobre iso.
A fonte é algo moi, moi longo.
ajax.googleapis.com/--
tipo de parece unha URL, pero non certamente opinión
js / jquery.js.
>> E iso é porque eu decidir que eu Non quero ter que descargar o
arquivo jQuery, e arrastralo lo e gardar iso na miña biblioteca, e ser
responsable por iso.
Pola contra, eu estou indo só para levar o Arquivo JavaScript que Google hosts.
Entón, Google realmente alberga unha serie de bibliotecas e jQuery, xa que é un
dos máis populares, abriga que un ben.
>> E por que o acolle, eu non se preocupe con iso, e eles
actualiza-lo, pero cando eles non actualiza-lo Eu probablemente vou ter que cambiar estes
números aquí mesmo.
Pero isto é só para facer todo o meu arquivo sistema algo menos limpa.
Realmente non me gusta de Aloxamento todos estes arquivos.
É moito máis agradable se Google ten que hóspede-los para min.
Entón, iso, unha vez máis, está a recibir todo JavaScript ficheiro, pero está só sendo
Hosted por Google, en vez de no meu sistema de ficheiros no meu ordenador.
>> Vemos tamén que eu coloque dous arquivos dolphins.js e trainer.js.
Nós imos ollar para aqueles en un segundo.
E, finalmente, este título aquí.
Quen me pode dicir o que este código dentro estas etiquetas de título, onde
que vai na miña páxina?
>> Audiencia: Como aquela que a barra de ferramentas ou o que?
>> Jason Hirschhorn: Si, a guía pouco na parte superior da ventá do Chrome.
É aí que o texto vai.
>> Dentro do corpo, como pode ver, non moita cousa aquí.
Teño só tres divs.
Eu darlles algunhas identificacións e Engada un pouco de texto dentro
Pero eu creo que é por iso que nós non ver nada por aquí.
De feito, podemos ver Dolphin train 2K13.
Vemos TODO.
Eu non sei onde iso está a benvida de porque eu non vexo iso aquí.
Entón quizais iso sexa nun dos meus arquivos JavaScript.
Imos comprobar iso nun segundo.
>> Pode alguén me dicir o que este ID significa aquí?
>> Audiencia: É unha forma de chamar a sección específica no [inaudível]
arquivo?
>> Jason Hirschhorn: Yeah.
É só un xeito para facer referencia esta div particular.
IDs son ideal único.
OK?
Multitude resistente.
Así, os IDs son xeralmente exclusivo.
Lle dá-los a un específico elemento no seu código.
>> E se eu quixese facer referencia a un número de elementos, se isto é para CSS
estilo ou jQuery?
O atributo que podo dar a eles?
>> Audiencia: Clase.
>> Jason Hirschhorn: Unha clase, exactamente.
Correcto.
>> OK, entón index.html, unha vez máis, Non moi aquí.
Entón, imos abrir outro arquivo.
Imos ver o que eu teño.
Isto é todo o que teño aquí.
Imos ao cartafol JS.
Eu non estou indo a preocuparse o CSS de momento.
Imos abrir dolphins.js.
>> Oops.
Ou mellor -
Aceptar.
Entón, dolphins.js, realmente parece moi semellante a algúns dos o código
foron dadas en conxunto de problemas oito.
Pode rolar por el.
Alguén me pode dicir, con todo, o que é golfiños?
Isto todo gorras Dolphins?
¿Que é iso?
Que tipo de datos que é isto?
>> Audiencia: Array.
>> Jason Hirschhorn: É unha matriz.
E sabemos que é unha matriz, porque eu ver eses corchetes aquí.
E outra persoa, o que se que un conxunto de?
>> Audiencia: Obxectos?
>> Jason Hirschhorn: É unha matriz de obxectos.
E podes ver iso.
E como é que sabe que é unha matriz de obxectos?
>> Audiencia: Por que ten ese colonos boot entre chaves?
>> Jason Hirschhorn: Certo.
Entón, eu teño esas claves aquí, e entón podes ver a coma
separar os diferentes obxectos nesta matriz.
E, a continuación, dentro de cada obxecto, eu teño algo colonos e algo máis.
E o que é, xeralmente, esta primeira parte, o máis á esquerda do colonos?
Como se chama isto?
Xenericamente?
Como nos referimos a isto?
>> Audiencia: Index?
>> Jason Hirschhorn: Index, ou probablemente máis xeralmente, a clave.
E, a continuación, á dereita banda, o valor.
Entón índice, clave.
Pero se estamos a falar de quen, xeralmente significa que a cousa en
O lado esquerdo.
>> Nunha matriz simple, de novo, tivemos índices 0.
1.
2.
3.
4.
E en golfiños, teremos golfiño 0, golfiños 1, 2 golfiños, golfiños 3,
golfiños 4.
Temos tamén, dentro dese obxecto, que xeralmente non referenciar as cousas.
Ou se só temos este obxecto dereito aquí, nós non imos dicir obxecto 0,
1 obxecto, o obxecto 2.
Digamos nome do obxecto, ou tipo de obxecto, obxecto longo, etcétera.
E é así que nós imos obter o valor no lado dereito.
Entón, se nós dixemos nome do obxecto, por exemplo, que teriamos esa cadea,
"Graza".
>> Así como vostedes teñen me contou, golfiños é simplemente unha matriz de obxectos.
E ve todos os obxectos ten un nome, un tipo, un xénero.
É que pronúnciase correctamente?
Calquera?
Xénero?
Grande.
>> Un longo, un peso.
É que pronúnciase correctamente?
Creo que si.
E unha imaxe, só unha URL para algún ficheiro online.
E aquí, imos pechar a matriz, ben alí na parte esquerda moi
lado da miña pantalla.
Entón, iso é todo o dolphins.js é.
>> Oh, meu Deus.
Isto explica todo.
Eu pensei que terminara todo, pero ollar.
Hai todos estes todos.
OK, espero que poidamos facer aqueles xuntos.
Pero imos en primeiro lugar, antes de facer que, así percorrer
este código moi rapidamente.
>> Entón, como eu mencionen, vemos pronto o comezando esta liña que eu tiña no
diapositivas, (document). ready (function ().
E esencialmente o que vai facer é agardar a que todo na súa
páxinas procede, entón espera ata que é todo array, todo é bo
ir, a continuación, iniciar a execución este código.
Entón, se precisa para realizar algúns PHP, se necesitas para obter algunhas imaxes,
Sexa o que sexa, todo o código foi conxunto e preparado para ir na súa páxina de índice
ou calquera que sexa a páxina que se cargou, e agora está indo a comezar
execución do seu código.
>> Entón o primeiro que facemos é montar esa matriz.
E eu non teño a palabra chave var alí, entón o que é o
alcance deste array?
>> Audiencia: É global.
>> Jason Hirschhorn: É global, así ocean_array se pode acceder desde
en calquera lugar neste arquivo.
>> E entón veremos iso por loop.
Ela non di foreach, pero esta é esencialmente un loop foreach.
E esta é só a versión de JavaScript, entón para cada golfiño var en golfiños,
que tipo de datos?
Aínda que, unha vez máis, non fai JavaScript ten eses tipos de datos, por si só, o que
tipo de datos é golfiño?
>> Audiencia: un obxecto.
>> Jason Hirschhorn: É un obxecto.
Estamos quedando cada obxecto na matriz golfiños.
Entón, aquí, parece que eu esquezo de poñer todos eses golfiños do noso
Golfiños xigantes pensar no ocean_array, entón nós probablemente debe facer
que en primeiro lugar.
>> E entón, algo chamado esta variable piscina.
Estou definíndoo como nulo.
E entón eu chamar esa función draw_ocean.
Eu adestrar un golfiño cando a súa imaxe é premendo -
Eu non fixen iso - e establecer un libre golfiño cando
o botón é premendo.
>> Entón, estas son as cousas que eu teño que facer.
Creo que eu debería darlle algún fondo sobre o que eu estaba tentando facer.
Entón, se nós aquí, o que realmente quería este ollar como foi unha serie up
aquí, en vez de el dicir "TODO:" Eu quería unha mesa, esencialmente, coa
fotos de todo golfiños.
E entón, cando fai clic nunha imaxe, Eu quería que poñelo
a metade inferior da pantalla e dar lle toda a información sobre el, e
que sería o golfiño na piscina, o golfiño estaba adestrando.
>> Entón eu penso que sería moi legal.
Ten todas estas golfiños no océano aquí enriba, a continuación, premer en un,
e ía á piscina, e entón podería adestralo.
Entón é iso que eu estaba tentando facer.
E, a continuación, habería un botón aquí abaixo na piscina, e pode premer,
como, "Set Free", e pode definir a golfiño libre, e sería volver
ao océano.
>> Entón é iso que eu estaba tentando crear, pero, de novo, eu vou ter da túa axuda
para crealo.
Polo tanto, agardamos que, algunhas destas palabras clave ou algúns deses termos comezará
ter sentido agora, no contexto deste programa.
>> Seguiremos a buscar a través deste ficheiro.
Chamamos esta función draw_ocean.
É a única función que chamamos da sección document.ready.
Entón, chamamos esta función draw_ocean e parece que el crea unha secuencia,
unha variable, aquí.
Algo colócase na secuencia, engade máis material para a cadea, engade máis
material da corda, e entón esta liña de código.
Digo que imprime a cadea HTML.
E alguén me explicar o que esta liña de código fai?
Ben, antes de todo, o que fai que cifrão significa?
Non é unha variable PHP, pero o que iso cifrão significa?
>> Audiencia: Ligando para o ID de HTML -
é coma se os enlaces para o código HTML?
>> Jason Hirschhorn: E sobre que cifrão?
O que isto cifrão indica?
>> Audiencia: Conectando ao HTML dalgún xeito?
>> Jason Hirschhorn: Onde vimos este sinal de dólar antes en JavaScript?
Vímolo na charla.
Nós falamos sobre isto.
O que fai o sinal de dólar significa?
>> Audiencia: Algo con jQuery?
>> Jason Hirschhorn: Exactamente.
Isto ten algo que ver con jQuery.
Este cifrão significa que está a usar unha función da biblioteca jQuery aquí.
Exactamente.
>> Entón, nós escribimos o signo de dólar, e, a continuación, temos este paréntese aberto e pechado
paréntese, e alí dentro, o que pasa alí dentro, cando está usando un
función da biblioteca jQuery, ou vostede é usar a biblioteca jQuery?
Unha vez máis, viu iso na charla.
Alguén me pode dar - e tamén ver algo aquí.
O que pasa alí dentro?
>> Jeff, me dea un palpite.
O que isto parece, # océano?
Onde xa vimos isto antes?
>> Audiencia: É unha biblioteca ou algo así?
Eu non teño idea.
>> Jason Hirschhorn: Ben, imos me abrir índice dot -
nope, lugar incorrecto.
>> Así, vemos que temos algo chamado océano aquí.
Onde vimos a hashtag # océano océano, sintaxe antes?
Si?
>> Audiencia: CSS?
>> Jason Hirschhorn: En CSS.
Entón, nós queriamos algo estilo, lembre que ía poñer o CSS hashtag
selector, ou hashtag océano, por exemplo, e toda a formato
que quería dar á cousa ID océano poñemos alí dentro.
>> Entón, aquí dentro non é CSS selector pasa aquí.
jQuery define a súa propia tipo de selectores.
Pero é a mesma idea, e, de feito, moitos deles se sobrepoñen con CSS.
Entón, dentro deses parénteses abertas, vostede poñer un selector, e calquera que sexa o
selector refírese, é o que vai estar a usar.
>> Polo tanto, neste caso, eu son seleccionando ID océano.
Se eu tivese unha clase -
digamos que eu teño unha clase de cousas chamado "imaxes", e eu dou iso a un
moitos elementos, como fago para referenciar unha clase de cousas chamado "imaxes?"
>> Audiencia: Coido que foi punto.
>> Jason Hirschhorn: Con un punto.
Polo tanto, se en vez diso eu poñer imaxes de puntos aquí, que me daría a clase de
cousas chamadas de "imaxes".
>> Por suposto, isto é super poderoso, e vostede pode facer referencia a unha chea de cousas.
En realidade, eu podería facer referencia a basicamente calquera etiqueta HTML.
Entón, se eu quixese facelo, td, iso é unha marca que xa vimos antes, cando
creación dunha táboa.
Probablemente está familiarizado con que a partir de I definir sete.
Neste caso, está realmente a suceder para seleccionar todos eles.
Me vai dar disposición de todas as marcas td.
Pero isto pode ser un pouco esmagadora, así fro agora estamos
vai ater-se só referenciando IDs.
>> Entón, o que iso fai, de novo, é que recibe, neste caso -
Sentímolo.
Vaia aquí, a index.html.
É un océano, no canto do ID océano fai referencia a unha div, entón esa parte da
liña de código obtén esta div.
>> E entón este punto significa que eu estou chamando unha función, eo nome que
función é HTML.
E iso é curto para, se vostedes viron antes, sinal de dólar, de documentos, obter dot
elemento por ID, dot HTML interior.
Esta é só a versión de jQuery.
Así, a función HTML só recibe o HTML interior.
Dese elemento.
Entón, de novo, se miramos cara atrás aquí, imos vexo que non hai HTML interior.
E así, se eu fixese iso, eu o faría tratar de facer que o HTML.
Cando eu tecleo iso, eu son definindo o HTML.
Entón, eu estou pasando esta función para cordas, a secuencia que eu creei
aquí, e dicindo que poñer dentro do div océano.
Si?
>> Audiencia: Cando comeza a HTML, está só comezando
unha copia se, non?
Non está eliminar-lo.
>> Jason Hirschhorn: Certo.
Se eu fixen iso e quería para gardar esta en var -
oops.
Iso sería obter toda a información que estaba alí e garda-lo noutro
variable, faga unha copia do mesmo.
>> Audiencia: Aceptar.
Entendín.
>> Jason Hirschhorn: Entón creamos algúns HTML, salvo que na secuencia.
Nós aforramos un pouco máis.
Aquí ve esa secuencia TODO.
Entón, iso é probablemente o lugar onde estamos conseguir que o todo de cando
imos para a nosa páxina.
E en realidade, se eu facer clic dereito sobre todo, Inspect Element, falamos de
Nesta última semana.
É así que vemos o HTML estrutura da nosa páxina.
>> Vostede notará que aquí abaixo -
imos facelo un pouco máis grande, tamén -
nós temos a nosa div ID océano aquí.
Todo o mundo ver que liña de código?
E iso é o que os tipos en index.html.
>> Dentro del, vemos agora ese liña da táboa de código.
E o que esta liña da táboa de código é, ese é o código que acaba de introducir en
este elemento.
E miramos para dentro del, nunca colgroup ingresaran e tbody.
Isto foi engadido para nós, xa que fixemos algunhas cousas extravagantes.
Pero vai notar que hai o tr, hai o td con todo.
>> Polo tanto, parece que, unha vez máis, o código que escribimos aquí.
Iso é o que este liña estaba facendo.
Estaba tomando nosa cadea HTML e poñelas dentro deste div aquí.
Inicialmente, non ten nada.
Esta páxina é cargada.
Cifrão, document.ready.
Iniciarase a execución.
Chamamos a función draw_ocean e dentro da función draw_ocean tomamos
este HTML e poñelas dentro desa div.
>> Nós acaba de pasar por moi ben alí.
Alguén ten algunha dúbida sobre iso?
Ou como funciona isto, ou jQuery?
Porque se entender que, a continuación, jQuery debe esperamos vir
relativamente fácil.
Si?
>> Audiencia: O que tiña no interior do parénteses baixo a impresión de HTML
corda, que é o nome do a variable de HTML que
declarar máis cedo?
>> Jason Hirschhorn: Este aquí?
>> Audiencia: Si
>> Jason Hirschhorn: si.
Audiencia: Entón se tivese nomeado que outra cousa, que algo máis
era o que poñer aquí.
>> Jason Hirschhorn: Exactamente.
E iso é un bo punto.
Isto é un pouco confuso, xa que Teño HTML html.
Este aquí dentro é o nome da miña variable, e iso aquí é o
nome da función jQuery.
>> Audiencia: Pero para que o jQuery funcionar para o traballo, ten que dar
algunha entrada HTML?
>> Jason Hirschhorn: Exactamente.
Ou tes que darlle unha corda.
El vai poñer esa secuencia dentro da div ou calquera outra cousa.
Esta é só unha cadea.
El non sabe que iso é HTML, pero obviamente, formato-lo co propósito de ser
HTML válido.
Isto responde a pregunta?
>> Audiencia: si.
>> Jason Hirschhorn: Aceptar.
Si?
>> Audiencia: E se o océano que se refire a un botón ou algo así?
Cal sería o. Html facer?
Tería que cambiar o texto do botón?
>> Jason Hirschhorn: Entón a cuestión é o que se refire a un botón?
Vai cambiar o interior HTML de algo.
Entón, se ten unha etiqueta de apertura e unha estreita tag, que vai poñer algo entre
tag abrir e pechar.
Se non hai apertura e peche tag, non vai facer nada.
>> Audiencia: É literalmente unha copia e pegar tipo de cousas?
>> Jason Hirschhorn: Yeah.
El copia e cola algo de calquera que sexa variable eu pasalo, o
corda eu pasalo, dentro dos etiquetas de abrir e pechar.
>> Imos dar un ollo aquí.
Oh, meu Deus. draw_pool non fixo facer nada alí.
Iso é unha chatice.
Adestrar, uau.
OK, entón non hai moito máis alá diso.
>> Entón, imos comezar, e imos fixar iso.
Eu vou ter de todo o mundo axudar a conseguir este feito.
Non hai, en realidade, que moitas liñas de código, creo, de escribir.
Eu creo que eu fixen iso hai uns anos para a versión 2K12, e hai
Non debe ser tan moitas liñas de código para escribir.
Non debería excluído este código.
Eu debería ter só salvou.
Oh, tolo.
>> En fin, imos comezar.
Entón, eu estou nesa matriz, ou eu estou nesa liña, e eu teño a miña ocean_array.
E quero poñer todo iso, todo a partir deste arquivo, no meu
ocean_array.
Entón, como podo ter todo, desde alí, e poñelas na
ocean_array?
É unha liña de código.
Quen me pode dar esa liña de código ou me diga, ten algunha idea do que esta liña
de código debe facer?
Por que non comezan aquí, e logo nós imos seguir movendo en torno do cuarto
responder a preguntas.
Kurt?
Cal é o primeiro?
>> Audiencia: Ocean_array, soporte, golfiño.
Igual golfiños, soporte de golfiños?
Golfiños cun capital de todo.
>> Jason Hirschhorn: Aceptar.
Imos examinar a sintaxe.
Aquí mesmo, é dicir como un loop foreach, polo que é, en realidade, facendo unha morea de
cousas para nós.
E golfiño é un obxecto.
Entón, nós non precisamos de escribir algo como os golfiños, golfiño, porque
golfiño en si é o obxectar que quero.
Non é o índice.
Será que isto ten sentido?
>> Audiencia: Yeah.
>> Jason Hirschhorn: Entón, como propor cambiar o seu código?
Se sabemos que estamos tendo en conta o índice?
>> Oh, desculpe.
Vostede é bo.
Pero como -
deixe-me facer unha pregunta distinta.
Se queremos -
imos realmente escribir isto.
Nunca mente.
Imos escribir isto.
Isto é óptimo.
Sentímolo.
Estaba moi confuso alí.
>> Imos deixar que, por agora, e imos volver adestrar un golfiño,
definindo un golfiño.
Imos primeiro resolver este océano deseño función, e nós imos volver
que, Kurt.
Pero, ata agora, todo ben.
>> Imos ollar para dentro draw_ocean.
A liña que semella malo é este "Imaxes de tendas de golfiños no
do océano, nunha secuencia de HTML. "E así agora, eu só me gusta, pero eu
Realmente quere poñer os golfiños fotos no océano.
Entón, o que, Noé, pensas que é o primeiro que debería facer?
Se eu queira pasar por todo o matriz, que é o primeiro
cousa que eu teño que facer?
>> Audiencia: Necesitamos crear un loop for.
>> Jason Hirschhorn: Un loop for.
E o que debería que loop parece?
>> Audiencia: Para -
necesitamos pasar por cada golfiño na matriz océano.
Así, para var golfiño en -
pode escribir arranxo océano?
>> Jason Hirschhorn: Así?
>> Audiencia: Probablemente é iso mesmo.
>> Jason Hirschhorn: Imos ir con que, polo de agora, e despois imos
volver a el.
E vai ser responsable para esta liña.
Entón, eu teño por loop.
Michael, está agora.
¿Que debería facer agora?
>> Audiencia: Vostede tería que tomar a almacenar fotos de golfiños.
>> Jason Hirschhorn: Entón, onde é que están gardados?
>> Audiencia: O array golfiño?
>> Jason Hirschhorn: Estou confuso agora moito sobre o que está pasando.
Imos descubrir como podemos facer debug iso, e entón eu virei
volta para ti, OK?
Qué é o equivalente a printf en JavaScript?
Annie?
>> Audiencia: É un documento que escribir?
>> Jason Hirschhorn: Ou como pode Vexo algo no
consolar-se na parte inferior?
>> Audiencia: console.log.
>> Jason Hirschhorn: console.log, exactamente.
Entón imos facer console.log, e imos só tes que poñer "golfiño" en, OK?
O ideal é que funciona isto, imos ter - imos ver, de volta o arquivo
dolphins.js, había seis golfiños, entón eu debería obter seis ou algo así
espero impreso para a consola, non?
É aí que estamos tan lonxe, porque nós fixo liña de Kurt-se aquí, e entón nós
fixo Noé do loop for, e temos esa liña, polo que espera que debemos ver seis
cousas impresos para a consola.
Entón imos aquí, imos abrir o noso consolar e actualizar a páxina.
>> OK, entón parece que vimos seis índices.
Cero, un, dous, tres, catro cinco, si.
>> Audiencia: Como é que comeza a que dentro da súa páxina -
>> Jason Hirschhorn: como fago para obter a esta cousa aquí abaixo?
>> Audiencia: Non, a páxina Chrome dentro [Inaudível] aparello.
Podemos ver que, ou non?
>> Jason Hirschhorn: Este Chrome páxina aquí?
>> Audiencia: Yeah.
>> Jason Hirschhorn: Entón, así como no conxunto P oito, abrín unha fiestra Chrome
no meu escritorio, no meu Área de traballo do Macintosh.
E se observar aquí esta URL enriba esquina superior esquerda, que corresponde a esta IP
abordar aquí.
Así, para facer isto, con todo, o inicio do conxunto de problemas de especificación anda vostede
través exactamente como facelo.
Pero eu só seguín tanto, e en vez de co código de transporte, eu só fixen
noso propio código.
>> O legal é que tamén pode inspeccionar ocean_array.
Polo tanto, parece que é ocean_array unha serie de seis obxectos, e
imos abrir cada un.
Boom!
Unha.
>> Entón Kurt, parece que o seu código funcionou perfectamente.
Todo comezou en ocean_array.
Porque eu misspoke antes.
Pero si, traballo impresionante.
O ocean_array é correcta, e parece como agora vemos que golfiño é
un número de 0 a 5, de xeito que parecía como un índice nunha matriz.
Así, dado que o coñecemento, Michael, o que temos que facer agora?
Pense en voz alta.
Que é algo que queremos facer?
>> Audiencia: Queremos chegar a JPEG para cada golfiño.
>> Jason Hirschhorn: Aceptar.
Entón, como podemos facer referencia -
como podemos obter o JPEG?
Por onde empezamos?
Onde está todo almacenado?
>> Audiencia: No ocean_array?
>> Jason Hirschhorn: Aceptar.
>> Audiencia: Entón ocean_array, golfiño -
>> Jason Hirschhorn: Como é que nós obter algo dentro -
entón iso nos dá ese obxecto.
E vimos que antes coa estrutura.
Entón, que tipo de notación que necesitamos empregar?
>> Audiencia: Sería o punto.
>> Jason Hirschhorn: Un punto.
E entón o que campo?
>> Audiencia: Imaxe?
Ou iso non é un campo -
>> Jason Hirschhorn: Qué é isto chamado dolphins.js?
E mira, pode ollar.
Podemos simplemente volver aquí.
Podemos ver ocean_array, podemos explorar iso.
Como se chama?
>> Audiencia: Tipo.
Espera.
Imaxe?
Eu dixen imaxe.
>> Jason Hirschhorn: Imaxe.
Correcto.
Non soar como vostede sabe o que estabas falando, con todo.
Parecía máis un palpite.
Así que a imaxe, de xeito que daría Connosco a URL da imaxe.
Jeff, ten unha pregunta?
>> Audiencia: Si, eu podo non conseguir o ten no seu Chrome
navegador no meu ordenador.
Acaba de recibir unha "referencia uncaught erro, consola non está definido. "
>> Jason Hirschhorn: Ten configurar todo?
>> Audiencia: Ben, eu creo que fixo todo o que
fixo na pantalla grande.
>> Jason Hirschhorn: E ti chmodded todos os ficheiros?
E se pasar por toda a configuración?
>> Audiencia: Vou tentar de novo.
>> Jason Hirschhorn: Aceptar.
Eu pulei moito iso no empezando, pero ten que pasar por
toda a configuración, así como no inicio da especificación conxunto de problemas.
Chmod todo e asegúrese de que está dentro
>> Audiencia: Eu irei e comprobe iso.
Eu penso que eu fixen iso, pero Vou comprobar de novo.
>> Jason Hirschhorn: Entón, iso parece como vai dar o
corda e unha imaxe.
Grande.
Temos a URL da imaxe.
Como é que imos agora poñelas -
o que pasa se escribimos só iso, Michael?
>> Audiencia: Ela só queda a imaxe.
En realidade, non amosar-lo.
>> Jason Hirschhorn: Imos ver o que acontece.
Imos gardar iso.
Imos executa-lo aquí.
Parece que non temos nada.
Se eu explotar esta táboa, parece que no interior -
Si, parece que eu non entendo nada.
>> Audiencia: Temos que -
>> Jason Hirschhorn: Esta é unha cadea, este código aquí.
Onde é que quero poñer esa cadea?
>> Audiencia: Quere poñelas no océano?
>> Jason Hirschhorn: Aceptar.
E aquí estou poñendo unha corda chamado html no océano.
>> Audiencia: Entón sería dólar sinal, océano, html [inaudível].
>> Jason Hirschhorn: Isto faría poñelas en liña recta alí.
Pero e se eu queira engadir-la a -
Eu xa estou creando unha cadea, non?
Para poñer no océano, o que se o nome desa secuencia?
>> Audiencia: HTML.
>> Jason Hirschhorn: HTML.
Entón, o que eu escriba a continuación?
>> Audiencia: Igual, é igual.
Ou só é igual?
>> Jason Hirschhorn: Cal será ocorrer se eu escribir iguais?
>> Audiencia: Non vai define-lo igual - ou non quere que -
>> Audiencia: o asignado?
>> Jason Hirschhorn: El vai asignar-lle, pero o que vai pasar con todo
que foi almacenada nel antes?
>> Audiencia: Vai se librar del.
>> Jason Hirschhorn: Vai se librar del.
Entón, como podo engadir lo ata a fin?
Quere só de copiar o -
>> Audiencia: Máis iguais.
>> Jason Hirschhorn: Máis coincide, perfecto.
Isto é exactamente correcto.
Entón, agora imos ver o que iso fai.
Boom!
Oh, meu Deus.
Isto é só unha morea de texto.
Aceptar.
>> Polo tanto, parece que temos moito de texto, aínda que iso é gran.
Vostedes fixeron -
Sei que é difícil, que é novo.
Ata agora, os tres de vós ter feito fantástico.
>> OK, é o seguinte.
O que temos que facer a continuación?
Nós, por suposto, non quere que el xogar só a cadea.
Si?
>> Audiencia: Eu só teño unha pregunta.
Vostede sabe, cando fai ocean_array, golfiño, entre parénteses, non é
golfiño como un asociativa conxunto en si mesmo?
>> Jason Hirschhorn: Eu misspoke.
Dolphin é o índice.
>> Audiencia: pero non é var golfiño no océano -
Quero dicir, cando inicialmente cargalo como ben, golfiño var en golfiños, non é
que golfiño unha matriz asociativa?
>> Jason Hirschhorn: Este golfiño?
>> Audiencia: Yeah.
>> Jason Hirschhorn: Non
Este golfiño é o índice.
>> Audiencia: Aceptar.
Entón, hai unha variable golfiño?
Quero dicir, como chave de golfiño en a matriz asociativa?
>> Jason Hirschhorn: Aquí?
Como, dolphin.name?
>> Audiencia: Si, está aí como golfiño dot -
como non é golfiño significaba ser cada obxecto?
>> Audiencia: Si, iso é o que eu penso, tamén.
>> Audiencia: Eu penso que era como golfiño a matriz asociativa en golfiños.
Porque hai seis asociativo arrays en golfiños, non?
>> Jason Hirschhorn: Certo.
O camiño que temos este escrito agora, non é.
>> Audiencia: Por que é?
>> Jason Hirschhorn: Poderiamos facelo, e hai realmente unha función jQuery
chamado. cada cal dá vostede cada cousa.
Pero esa sintaxe non é -
Eu misspoke antes - esta sintaxe non é que é índice.
Este é só dar-nos os índices.
Pero podería facer cifrão. Cada, que é unha función jQuery.
Que lle daría cada conxunto asociado.
Polo tanto, comproba iso.
Pero iso é o que todo este código fai.
>> Audiencia: Entón ese primeiro lazo for, eu creo que iterado seis veces
porque ten seis índices.
E, a continuación, o segundo loop for, non é o que a iteración
mesma cantidade de veces?
>> Jason Hirschhorn: Yeah.
>> Audiencia: Entón non hai realmente ningunha - nós podería escribir o primeiro loop for
de novo, e tería funcionando.
Como, golfiño var en golfiños?
>> Jason Hirschhorn: Si, pero estamos agora usando un ocean_array.
Cambiamos todo no ocean_array porque dicir que sempre quixo
para cambiar o que está en dolphins.js, ou se queremos manipular ocean_array
máis tarde, nós non queremos manexar golfiños, a variable.
Queremos manipular unha copia do mesmo, porque, se queremos levar algo
para fóra, así que nós estamos só será seguro.
Será que isto ten sentido.
>> Audiencia: Yeah.
>> Jason Hirschhorn: Aceptar.
Entón, Carlos, como fago para sacar esa cadea e facelo unha imaxe no seu lugar, e obter
a imaxe real?
Ve este código antes.
Cómo fago incluír unha imaxe nunha páxina?
>> Audiencia: É a que fixemos sobre que ademais de HTML é igual a chamada che trazo
ancho, ela apagou?
>> Jason Hirschhorn: Este cousas aquí?
>> Audiencia: Yeah.
Máis ou menos.
>> Jason Hirschhorn: non faga preocupar con iso.
Isto só comeza a cadea HTML.
Se eu queira incluir unha imaxe na miña Páxina web HTML, o que marca que eu uso?
>> Audiencia: Eu non me lembro.
>> Jason Hirschhorn: Aceptar.
Aviar, axudar?
>> Audiencia: Sería áncora, href, e entón liga-lo?
>> Jason Hirschhorn: Así como en A Ancora.
>> Audiencia: Non precisa vincula-lo, non?
>> Jason Hirschhorn: E se eu só Quere crear unha imaxe?
>> Audiencia: Sería IMG, e despois src coincide calquera que sexa a cadea é?
>> Jason Hirschhorn: OK, entón é iso mesmo, img.
Carlos, está indo a leva-lo a partir de aquí.
img significa "imaxe", e posto src a "fonte". e ten que darlle
un URL ou algúns -
nin sequera unha URL.
Algúns lugar onde este imaxe é almacenada.
Entón eu sei que me vai coller un imaxe, agora como fago para poñer iso todo
xuntos, penso?
Teño algunha sintaxe que eu teño corrixir.
O que exactamente eu teño para escribir, Carlos?
>> Audiencia: Non entendo o que estás a facer.
Entón estás a poñer todo as imaxes nunha táboa?
>> Jason Hirschhorn: Queremos mostrar todas as imaxes da páxina.
E vimos como esta liña de código para a dereita cordas aquí engadidos á nosa cadea HTML
e impreso-los así.
Pola contra quere amosar imaxes.
E entendemos, Maru, dixo-nos que esta liña de código -
entón imos ollar aquí.
Se nós fomos e explotado, nós imos modificar esta como HTML.
Maru, dixo que, se non se fai este tipo de sintaxe, temos unha imaxe.
Entón, iso ten sentido?
>> Este é o tipo de corda que Realmente quere poñer dentro do océano
mergullo, e non só o texto en si.
>> Audiencia: [inaudível]
>> Jason Hirschhorn: Sentímolo?
>> Audiencia: Non pode simplemente copiar aquel que deu Kianna,
e poñelas en que -
>> Jason Hirschhorn: Copia e pega este, e poñer isto aquí?
>> Audiencia: Yeah.
>> Jason Hirschhorn: É preto, pero hai un problema con iso, e
o que é iso?
HTML é unha cadea, e necesitamos para engadir cordas para el.
>> Audiencia: Entón poñelas - nah.
>> Jason Hirschhorn: E temos tres - iso aquí non é unha cadea.
Como é que podemos facelo unha corda?
Como sempre fai algo a corda?
>> Audiencia: Eu non sei.
>> Jason Hirschhorn: Se eu tivera texto, como fago para facelo unha corda?
Gústame aquí nesta liña aquí?
>> Audiencia: Pon-o nunha mesa?
>> Jason Hirschhorn: Que tal isto?
>> Audiencia: Cita.
>> Jason Hirschhorn: Dobre citas, non?
Comiñas fai algo unha corda.
Entón, iso fai que unha cadea, e esta é unha cadea.
¿Como poñer dúas cadeas xuntos en JavaScript?
>> Audiencia: Dot.
>> Jason Hirschhorn: Non dot.
Isto é PHP.
>> Audiencia: Plus.
>> Jason Hirschhorn: Ademais, exactamente correcto.
Así, ademais de, a continuación, o que fai propoñen que fago aquí?
>> Audiencia: Outra cita.
>> Jason Hirschhorn: Outra cita, Aceptar.
¿Como pechar unha corda?
>> Audiencia: Outra cita.
>> Jason Hirschhorn: Outra cita.
E como fago para poñer esa cadea xunto con esta corda?
Un plus.
Isto é exactamente correcto.
Só o fixo para nós.
Isto é perfecto.
>> Entón agora imos facer este.
E mira, temos un conxunto chea de imaxes.
Oh, meu Deus.
Aqueles son asustado.
Imos explorar los en un segundo.
Si, Noé?
>> Audiencia: Sei que realmente non materia, pero ten que pechar a súa
elementos con etiqueta de imaxe?
>> Jason Hirschhorn: Poderiamos si que queriamos, pechar a nosa imaxe
tag así.
Imos facer iso.
No, non, nós non podemos facelo.
>> Audiencia: Oh, eu rompe.
>> Jason Hirschhorn: Eu creo que iso é a validación, con todo.
Eu non creo que ten que a barra de pechar.
OK, iso é gran.
Carlos, grazas.
Ata o momento, os catro de vós fixo un traballo incrible.
>> Claro que, como podes ver, estamos a creación de calquera tipo de mesa de bisel.
E quero que esas cousas estar nunha mesa.
Entón, como fago para poñer estes cousas nunha táboa?
Que claramente algúns HTML.
Assam, que tipo de HTML estou ausente?
>> Audiencia: O que fai quere facer, moito?
>> Jason Hirschhorn: Eu quero poñer todo estas imaxes nunha táboa, de xeito que cada imaxe
debe estar nunha columna da táboa.
Como podo dicir que esta é unha columna?
Xa viu este código antes.
Isto está en I definir sete.
>> Audiencia: Lembro un deles foi tr?
>> Jason Hirschhorn: tr é a liña.
>> Audiencia: Eu non sei que fóra meu corazón, pero eu podía comprobar.
>> Jason Hirschhorn: O alguén se lembra?
>> Audiencia: td?
>> Jason Hirschhorn: td, exactamente correcto. td colócase como unha columna.
Entón, se eu poñer o td alí, Assam, o que eu teño poñer?
O que máis me teño que engadir?
>> Audiencia: Ten que pecha-lo?
>> Jason Hirschhorn: Exactamente.
Onde é que isto vai?
>> Audiencia: Aquí?
>> Jason Hirschhorn: Aquí?
>> Audiencia: Creo que si.
>> Jason Hirschhorn: Qué é isto pechar ben aquí?
¿Que é iso?
Esa cousa azul?
>> Audiencia: Isto é para a imaxe.
Debe ir atrás, eu creo.
>> Jason Hirschhorn: OK, exactamente correcto.
Entón, imos ver o que este fixo.
Oh, iso é raro.
Imos abrir o mar, mesa, corpo da táboa, tr.
Polo tanto, temos unha tonelada, pero eu Non vexo as imaxes.
Isto é raro.
Parece que el construíu, pero non me mostrou as imaxes.
Algunha idea por que podería ser o caso?
Calquera pensamentos?
>> Audiencia: Se rolar abaixo, vai ve-los.
>> Jason Hirschhorn: Boom!
Entón, eles están aí, pero que é estraño que todos eles son o camiño ata alí.
>> Audiencia: Eles están todos nunha liña.
>> Jason Hirschhorn: E están todos nun liña, e todos eles son de tamaños diferentes.
Entón Assam, me dea unha liña de código se podo facer todas as imaxes da
mesmo tamaño, e parece que eu teño xa indicado o tamaño I
quere que sexan.
Como podo facer que cada imaxe do mesmo tamaño?
Deixa un palpite.
>> E canto a esta liña de código?
>> Audiencia: Pode facer Como unha constante?
>> Jason Hirschhorn: Ou onde é outro lugar que eu podería poñer esta liña de código,
se eu simplemente copia-lo?
>> Audiencia: Todo o camiño ata nesa mesma liña?
>> Jason Hirschhorn: OK, imos poñer iso aquí, exactamente correcto.
E agora imos ver o que acontece.
Oh, meu Deus!
Agora parece que estamos empezando a estar algo, e parece que
todo tipo de caber na táboa que temos construído en cada td.
>> Ademais, Assam, digamos que me gusta deles alturas para ser un pouco máis -
a cousa alturas me xogando fóra, por iso, o que debo facer que o seu canto?
Escolla calquera número.
>> Audiencia: 200?
>> Jason Hirschhorn: 200.
Vou busca-100.
Isto é óptimo.
Para realmente como 200.
Alí imos nós!
OK, agora que está empezando a parecer un pouco mellor e un pouco máis organizado.
>> Outros pensamentos para o que necesitamos facer para almacenar imaxes de golfiños?
Si?
>> Audiencia: As citas, ou o único citas, en torno aos valores
fonte, altura, anchura, son aqueles opcional?
>> Jason Hirschhorn: Onde son aspas?
>> Audiencias: Como nalgúns dos exemplos, que tería como altura
é igual a cita "150." É que non é necesario.
>> Jason Hirschhorn: Entón, imos mirar para abaixo aquí.
Se clicarmos no océano, vai á táboa, vai notar aquí que realmente
engadiu aquelas citas para min.
>> Audiencia: Aceptar.
>> Jason Hirschhorn: E entón eu entendo o que estamos facendo parece dolorosamente lento.
Nós só escribise tres liñas de código Ata o momento, ou catro liñas de código, pero
este é, de feito, o proceso que Eu paso por cada vez que quero
para facer este sitio.
Liña por liña, usando a consola abaixo aquí, explorar e descubrir cousas
o paso a paso o que quero facer.
Polo tanto, agardamos que, este imita a vostedes dun xeito boa, o que pedagóxica
será realmente facendo cando crear o seu sitio.
>> Imos seguir adiante.
Creamos estas cousas.
Vou en realidade -
Aviar, eu teño unha gran pregunta para vostede.
Eu non sei, imos seguir adiante.
Imos para o "golfiño tren cando a súa imaxe é premendo. "Como
propoñen que escribo esta liña de código?
>> Audiencia: Existe unha función chamado "tren".
>> Jason Hirschhorn: Hai unha función chamado "tren", exactamente correcto.
>> Audiencia: El espera un índice.
>> Jason Hirschhorn: Tren espera un índice, por iso, Aceptar.
Aviar, este é o razoamento que me gusta de ver.
Adestrar espera un índice.
>> Audiencia: Entón está indo ter un loop for.
>> Jason Hirschhorn: Ben, quero facer cando unha imaxe de ser premendo, entón aviar,
como fago para supervisar cando un imaxe é premendo?
Hai algunhas formas de facelo.
Este é o poder de Javascript e jQuery, senón tamén a parte máis difícil.
>> Audiencia: Se paréntese, non.
Ou se se paréntese, ou algo relativamente simple?
>> Jason Hirschhorn: Entón vimos unha parella formas de facelo na charla.
Unha cousa era, ata aquí, podería facer algo como podería crear un
función como en clic, ou facer algo así como o clic.
Todo o mundo recorda de ver unha cousa desas?
Vostede fai iso dentro da etiqueta HTML.
Vexo algúns rostros inexistentes.
Algunhas persoas son como, o que está falando?
>> Isto é bo, porque eu creo que é a forma máis complicada de facelo.
Nós imos facer un moito máis fácil xeito usando jQuery.
Entón, aviar?
>> Audiencia: Hm?
>> Jason Hirschhorn: Se eu quero facer algo jQuery, eu, obviamente, comezar,
como antes, con este sinal de dólar, aberta paren, paren estreitas e dobre
cita aquí.
Agora sabemos que eu teño un selector aquí.
O selector que propón que se aplican para cada imaxe ou cada
imaxe única?
>> Audiencia: Imaxe?
>> Jason Hirschhorn: Isto é exactamente correcto.
Isto é aplicable a cada única imaxe.
Obtén todos eles.
Non é un ID, non é unha clase, é un tipo de etiqueta, e iso vai
obter cada un.
>> E agora eu vou che dicir iso por agora, e pode ollar para arriba máis
documentación sobre iso máis tarde, pero esta cousa chamada "na" trata sobre eventos.
Así que comeza a facer agora, e que é super-poderoso, é dicir que tipo de
evento que está a buscar e que quere facer cando
recibe este evento.
Entón, eu estou indo darlle un pouco algo máis de código, aviar, así
tes que ir, OK?
>> Audiencia: Aceptar.
>> Audiencia: On - imos dicir "Prema" neste caso, o que vai
xeralmente usan.
Entón, prema, e logo nós imos pasar unha función anónima.
E esa sintaxe que vai ver moito, e esperamos que vai
estar escribindo moito.
Que dicir, unha vez máis, nun clic imaxe dunha cousa chamada, calquera que sexa,
calquera cousa chamada de imaxe, imos a cabo esta función anónima.
>> Eu non estou dándolle un nome.
Eu non estou pasándoo argumentos.
Eu son só, como, crear aquí unha funciona, e aquí está o que o código
está indo facer.
É con este medio de sintaxe.
E tamén, como vai notar, parece moi semellante a esta aquí ata que nós
escribiu antes.
>> OK, aviar.
Entón quere chamar tren en índice.
É iso que quere facer?
>> Audiencia: si.
>> Jason Hirschhorn: É?
Aceptar.
Imos ver o que acontece.
>> Audiencia: Espérase, con todo.
O índice non é unha variable no momento.
>> Jason Hirschhorn: Entón índice non é unha variable no momento.
Eu non sei onde ten que partir.
>> Audiencia: [inaudível].
Entón tes que primeiro descubrir que golfiño foi premendo?
>> Jason Hirschhorn: Excelente.
Debe descubrir o que golfiño foi premendo.
Este é un tiro no escuro salvaxe.
Alguén ten algunha idea de como podo descubrir o que golfiño foi premendo?
Se non, eu vou dar a ti, porque iso é moi tolo.
Aceptar.
Entón, imos imprimir vía console.log.
>> Esta cousa.
Entón, sinal de dólar, paréntese aberto, este paréntese preto.
Entón, cando eu premer nesta imaxe, vou para imprimir este para a consola,
e imos ver o que acontece.
Imos volver aquí.
Imos ao consolar.
Sen erros, grazas a Deus.
>> Aceptar.
Prema.
Deixe-me facer iso de novo.
Prema esta primeira imaxe, e iso foi impreso na consola,
esta liña de cousas.
Eu vou estar usando o palabra "esta" moito.
Esta cousa aquí, iso, é moi especial, e está facendo exactamente o que
Aviar quere que faga.
Está quedando todo o que era premendo ou o que sexa.
Por unha vez, este selector pasa para tratar con moitas cousas, non
necesariamente sabe que cousa estamos falando, por iso queremos descubrir
que a cousa que estamos a falar sobre vía esa sintaxe.
Neste caso aquí, hashtag océano, a xente sempre sabe o que cousa estamos
estará falando, entón nós nunca realmente precisaba dese
dentro dun océano hashtag.
É sempre o océano, que div.
É un ID, só unha cousa é posible.
>> Pero, neste caso, esta aplícase a un lote de imaxes, de feito, seis imaxes,
e por iso queremos saber o que especial imaxe foi premida.
E parece que este é o tipo de información que temos.
Recibimos parece que algúns grandes corda, e temos todo isto
da información con este.
Temos toneladas e toneladas e toneladas de material.
jQuery é super poderoso.
Está nos dando unha tonelada de información sobre este elemento HTML particular.
Aviar, o que queremos saber sobre este elemento HTML?
>> Audiencia: Algo así como un número de identificación.
>> Jason Hirschhorn: Un ID.
Así, temos unha fonte, un ancho e unha altura.
>> Audiencia: Podemos usar unha fonte.
>> Jason Hirschhorn: Nós poden usar a fonte.
Isto vai dar unha corda, unha secuencia de URL.
O que imos facer con que unha vez que temos isto?
Como é que imos volver para o noso índice en ocean_array?
>> Audiencia: Podemos comparar lo para o outro.
>> Jason Hirschhorn: para que puidésemos loop través de cada un.
Agora nós podería loop novo e entón comparar este.
Imaxina o que sería unha forma máis simple, se podería só imaxinar un?
>> Audiencia: Non ter que loop.
>> Jason Hirschhorn: Non ter que loop.
>> Audiencia: Só para descubrir golfiño, [inaudível].
>> Jason Hirschhorn: figurando o que fóra golfiño.
Aceptar.
Entón, imos gardar a información nesta etiqueta de imaxe.
E unha vez máis, agora, parte dese material é só máxico, porque eu podería
amosar-lle isto por primeira vez, pero espero que estas son cousas
vai estar facendo.
Entón, iso é algo máxica que pode facer.
Pode gardar algúns metadatos adicional nun elemento.
El non vai aparecer, non vai afectar nada.
Só podes garda-lo alí.
E eu propoño que gardar o índice con cada imaxe.
>> Así, a forma de facelo é crear un atributo chamado guión de datos, e
a continuación, o nome que quero darlle.
Trazo de datos é unha cousa especial que é dado a ti, e el di que esta é
algo que o usuario vai crear.
Por iso, estamos creando esa cousa chamada índice, esta chave chamado índice.
>> E dentro del, imos poñer non só un de cada vez, pero o que facer
poñemos dentro del, aviar?
O que pasa aquí?
>> Audiencia: Golfiño.
>> Jason Hirschhorn: Golfiño.
Isto non é esa palabra.
Dolphin.
E unha vez máis, nós xa impreso golfiño anterior, que 0, 1, 2, 3, 4, 5, e
estamos aforrando que coa imaxe.
>> Entón, agora, se eu fai - e, de novo, imos gardar os metadatos.
Como accede os metadatos?
É con unha función chamado só de "datos". E ten que pasalo un
e só un argumento, que é o nome da cousa.
Entón eu vou para imprimir esta fóra, e entón eu vou tomar preguntas.
Pero, esencialmente, eu digo que me dar a este obxecto que foi premendo, ollar
en todos os seus atributos de datos, e un chamado "indexado"
dáme ese valor.
>> E imos ver o que acontece cando que actualiza esta páxina.
Exactamente o que esperabamos.
Unha vez máis, iso foi moi máxico.
Nós só fixemos moi ben alí.
Quen ten algunha dúbida sobre iso?
Si?
>> Audiencia: Eu só teño unha pregunta sobre o seu código en directo.
Podes usar como unha aspa simple, dobre cita, como alí mesmo.
>> Jason Hirschhorn: Ben aquí.
>> Audiencia: Yeah.
Hai unha razón para facer o aspas, comiñas dobres?
>> Jason Hirschhorn: Hai unha razón, e iso vai volver para o que Marcus
preguntou antes.
Nesta liña, eu estaba sendo un pouco mellor o meu codificación.
Eu quero isto, e iso é o que eu sinceramente debería ter feito todo o
tempo, para o ancho e alto en particular.
Imos dar un ollo aquí.
Vai ver aquí, podes ver iso?
Sei que é unha especie de pequeno, pero os datos índice de colisión é entre comiñas dobres.
Esas cousas precisan sempre estar entre comiñas dobres.
O valor que sempre estar entre comiñas dobres.
>> Pero aquí, se eu fixese unha aspa, que acabaría esa cadea aquí,
e agora eu non sería escribir unha cadea.
Así que evitar isto usando só un aspas porque unha única cita
non remata a secuencia de JavaScript, pero HTML que non importa se é
dándolle aspas ou comiñas dobres.
Só vai interpretala lo como comiñas dobres.
Será que isto ten sentido?
Si?
>> Audiencia: Como recibe o enderezo IP na parte inferior do seu cliente?
Mina di que non hai enderezo IP.
Hai algo que eu debería fixeron no [inaudível].
>> Jason Hirschhorn: No seu dispositivo, non ten nada?
>> Audiencia: si.
>> Jason Hirschhorn: Hai algo podes facer para resolve-lo, pero eu non son
vai gastar tempo camiñando a través diso agora.
Pero podemos facelo despois da sección.
>> Audiencia: Se volver a consola, por que foi o
número listado 012.321?
>> Jason Hirschhorn: Console?
Ah, por que eu estaba facendo clic arredor freneticamente.
>> Audiencia: Oh, Aceptar.
Nunca mente.
>> Jason Hirschhorn: E de novo, eu podo facer clic sobre algo veces bajillion.
>> Audiencia: Eu teño unha pregunta sobre seu ciclo de novo, o seu para loops.
Porque sabe que en I axustou oito, eles usar unha forma diferente de que loop.
Entón eles como var i é igual a 0, i menos que, ocean_array.length, i + +.
Son aqueles equivalente?
>> Jason Hirschhorn: Isto é un estándar para loop.
Ou si, iso é o de loops.
De feito, vimos que é equivalente.
>> Audiencia: Entón, iso é equivalente para o que fixo aquí?
É un considerado mellor do que o outro?
>> Jason Hirschhorn: Non
>> Entón, unha vez máis, fomos sobre algunhas cousas.
Agora cambiamos a nosa zona de confort e comecei a facer algunhas moi legal
cousas que non teñen necesariamente ir máis en clase antes, pero vai
espero ser moi poderosa para que cando a codificación.
>> Aviar, imos voltar aquí.
Eu teño o índice do golfiño.
Agora, o que eu teño que facer?
>> Audiencia: Debe adestralo.
Entón, en vez de poñer console.log, vostede pode definir unha variable igual a esa?
>> Jason Hirschhorn: Aceptar.
Entón?
>> Audiencia: Eu non estou seguro se pode facelo.
>> Jason Hirschhorn: Entón var x é igual a este, calquera que sexa este volve,
vai devolve-lo.
Non importa.
Pode voltar calquera variable.
Non hai ningún tipo aquí.
>> Audiencia: Ou podería só facer a chamada de función.
>> Jason Hirschhorn: Si, por que non podo facelo?
Só ten que facer a chamada de función.
>> Audiencia: Yeah.
Engade un outro conxunto de parénteses.
>> Jason Hirschhorn: Perfecto.
Isto é exactamente correcto.
Para que ha chamar a función de tren.
Por suposto, nada é o tren función, así propoñer, Akshar, o que eu
que facer a función de tren.
Déame algún código pseudo.
>> Audiencia: Eu creo que ten que retirar a golfiño da táboa orixinal.
>> Jason Hirschhorn: E isto está quedando a Noé antes porque copiamos
Lo nunha nova matriz.
Seguro, non porque podemos facer para modificar o noso variedade golfiños, xa que o que se outro
O programa de usalo ou o que se quere para acceder a ela noutro lugar?
Queremos facer unha copia, e que é o que imos editar.
>> Audiencia: Entón situar Lo no seu novo local.
>> Jason Hirschhorn: E o que facer o que necesitamos facer despois diso?
>> Audiencia: E entón imprimir o información sobre o golfiño.
>> Jason Hirschhorn: Isto é exactamente correcto.
Nós retirala do ocean_array, nós poñelas na piscina, e despois tiramos
o mar na piscina.
¿Como eliminar o golfiño do ocean_array?
>> Audiencia: Vai para o índice.
Oh, Aceptar.
Usar a función de emenda.
>> Jason Hirschhorn: OK, entón iso é certo.
Podería usar unha función de emenda que tira algo dunha matriz e
condensa-lo.
Isto é algo novo que non teña visto antes.
Pero eu realmente quero manter un espazo alí porque quero imprimir unha
espazo en branco no océano.
>> Audiencia: Entón pode definir a imaxe dese índice, o ocean_array
imaxe de índice punto.
>> Jason Hirschhorn: OK, ocean_array, índice.
>> Audiencia: Dot imaxe.
>> Jason Hirschhorn: Dot imaxe.
>> Audiencia: E ti definilo como nulo?
>> Jason Hirschhorn: Igual nulo.
Aceptar.
Polo tanto, nada está aí, polo que, a continuación, como fago para poñer na piscina?
Constantino, como fago poñelas na piscina?
Temos esta variable que chamamos, chamado piscina, aquí enriba.
>> Audiencia: Será que simplemente facer iguais índice ocean_array?
>> Audiencia: Non debe cambiar a orde?
>> Jason Hirschhorn: Un segundo.
Si?
>> Audiencia: Si, iso foi realmente un bo punto.
>> Jason Hirschhorn: Que pasa aquí?
>> Audiencia: É index?
>> Jason Hirschhorn: Index, exactamente.
E o que di, Constantino, é algo que temos que facer?
>> Audiencia: Debemos quizais cambiar a orde.
>> Jason Hirschhorn: E por que debería imos cambiar a orde, quizais?
>> Audiencia: Por aquela sinala-lo xa é nulo.
>> Jason Hirschhorn: Entón non é todo nulo, pero perdemos a URL da imaxe.
Xa perdemos para sempre?
>> Audiencia: Tecnicamente non?
>> Jason Hirschhorn: Teña perdemos para sempre?
>> Audiencia: Non
>> Jason Hirschhorn: Ben, onde está?
>> Audiencia: No seu golfiño orixinais -
>> Jason Hirschhorn: É en golfiños, pero en ocean_array
perdemos para sempre.
Entón Constantino, pode propoñer un mellor forma de escribir esta liña?
En realidade, sinto moito, é gardado na piscina.
Temos na piscina porque piscina é un obxecto, non é?
Índice Ocean_array, un ocean_array é unha matriz de obxectos.
>> Entón piscina é un obxecto, e non temos unha URL alí e abaixo
aquí defínese como nulo.
Entón, en realidade, non temos perdido para sempre.
É só salva na piscina.
Pero certamente non é en ocean_array, e como dixo, Carlos, é o
a matriz golfiños.
>> Polo tanto, este parece doce.
E entón como é que imos trazar o mar e da piscina?
Mario?
>> Audiencia: Pode só chamar draw_pool e draw_ocean?
Así como, draw_pool, e entón -
Ben, si, el non ten nada.
>> Jason Hirschhorn: gran.
O que está pasando draw_pool facer?
>> Audiencia: Debuxe na piscina?
>> Jason Hirschhorn: Si, ben, que é o que vai facer?
>> Audiencia: Sentímolo.
Podería facer o mesmo cousa, como ter un -
>> Jason Hirschhorn: Espere, nós imos chegar alí.
Nada.
El non fai nada agora.
A ver se isto funciona, con todo.
Quen nos deu ese código?
Akshar e Constantino deunos ese código?
OK, imos ver o que acontece.
>> Ah!
Iso foi tan emocionante.
El foise.
Oh, rapaz.
Isto é medio feo.
Ben, podemos volver e corrixir iso máis tarde.
Quere saber onde está?
Nós salvo nesa variable piscina.
Como podo descubrir se é nesa variable piscina?
Ben, unha vez máis, o poder do JavaScript, e, en particular, as ferramentas que
Chrome dálle, é que pode agora inspeccionar esa variable piscina.
É global, lembra-se?
Non poñemos a palabra chave var.
Entón, se eu escribir Escriba aquí, Constantino, o que pensas que eu son
se ve cando prema Intro?
>> Audiencia: Eu non sei.
>> Jason Hirschhorn: Guess.
>> Audiencia: Nada?
>> Jason Hirschhorn: Nada mal.
Iso foi un bo palpite, con todo.
Eu teño o obxecto.
Lembre que vostede me deu esta liña de código.
Pool, salvo na medida en que variable dun obxecto.
E, de feito, vemos o obxecto gardou nel.
Isto é incrible.
Podemos inspeccionar dende aquí.
É case como tempo real GDB que podemos ollar a través do noso código e
descubrir cousas.
Isto é super legal e super poderoso.
>> OK, imos rematar isto.
Imos deseñar a piscina en cinco minutos.
Maru, dáme unha liña de código para deseñar a piscina.
>> Audiencia: Podería ter outro HTML variable, pero / por.
>> Jason Hirschhorn: Imos facer moi sinxelo para o momento.
Imos imprimir o nome do o golfiño estamos adestrando.
>> Audiencia: E entón podes facer dólar asinar, parénteses abertos,
e logo, citar aberto.
Creo piscina libra, se que era unha cousa.
Eu non me lembro.
>> Jason Hirschhorn: Imos ollar cara atrás.
Creo que é unha cousa.
>> Audiencia: OK, si.
E entón quote preto, parénteses próximos . Html, parénteses abertos,
e entón eu creo piscina, como soporte aberto 0 ou algo parecido.
Pechar o nome de punto.
Eu non sei se isto funciona.
>> Audiencia: OK, imos ver o que acontece.
"Non se pode ler o nome da propiedade de indefinido. "Entón, de novo, aquí está o que
imos comprobar.
Imos explorar iso.
Fixo piscina, bracket0 aberto,. Nome.
Unha vez máis, eu fago iso o tempo, e eu son confuso o que está a suceder, o que fai
este aviso dicir.
Imos ollar para piscina.
Vexamos soporte piscina 0, indefinido.
Entón é aí onde nós estamos correndo para o noso problema, non?
Piscina soporte 0 non fai, obviamente, existir.
¿Que pensas que hai?
>> Audiencia: É só piscina un obxecto por si só?
>> Jason Hirschhorn: Ben, o que que di aquí?
Cando premer intro en piscina, o que di que é?
>> Audiencia: Object.
>> Jason Hirschhorn: é un obxecto, entón?
>> Audiencia: Ah, si.
Entón, só tes que pool.name en vez de -
>> Jason Hirschhorn: Pool.name dá exactamente o que quería.
E podo entender que estou pasando por iso lentamente e belaboring este punto, pero
iso é como fago estas cousas.
Vai se atopou con estes erros durante o seu proxecto final, entón eu espero que
este é capacitar sexa capaz para utilizar todas estas ferramentas.
Estes son cruciais e ganas te de super duper lonxe.
>> Entón eu non quero só imprimir o nome.
Imos facelo un pouco algo máis agradable do que iso.
>> Audiencia: O que máis queremos facer?
>> Jason Hirschhorn: OK, todo ben.
Nós imos facer exactamente isto.
Ugh.
Xente, non teredes vida.
>> OK, bum, entendín.
Parece bo.
Vai ver, Akshar, aquí en baixo, temos nulo, non se atopou.
Polo tanto, parece que aínda está intentando atopar algunha imaxe, e que non fixo
exactamente o que quería facer.
Non imos entrar en detalles agora, pero probablemente hai un xeito máis limpa de
facelo.
>> Audiencia: Podería deixar así un espazo en branco para a imaxe?
Como en vez de define-lo como nulo, vostede pode configurar-lo a gustar dun espazo baleiro
corda ou algo así?
>> Jason Hirschhorn: Gustoulle?
>> Audiencia: Yeah.
>> Jason Hirschhorn: [inaudível].
Non se atopou.
Polo tanto, hai un xeito mellor de facelo.
Eu proporía a facer isto.
Só axuste nulo alí.
Entón, por suposto, o que é vai pasar?
Vai desaparecer por completo.
Entón, se nós quería manter un espazo e facer que, probablemente quere facer algo
aquí enriba tamén.
Eu estou indo a comezar.
Akshar, dáme desa liña de código moi rápido.
>> Audiencia: Se ocean_array, golfiño, é igual, igual, igual - é igual a null?
É.
>> Jason Hirschhorn: Entón o que?
>> Audiencia: A continuación, faga html.
Só copiar o código de fondo, realmente.
>> Jason Hirschhorn: Pega o que?
>> Audiencia: Pode copiar o -
>> Jason Hirschhorn: Este?
>> Audiencia: Yeah.
>> Jason Hirschhorn: Todo isto?
Nós non temos unha imaxe.
>> Audiencia: Queres dicir que pode simplemente deixar a -
si, pode simplemente fechala.
Pero eu creo que tes que definir a largura.
>> Jason Hirschhorn: Ben, só crear unha columna baleira.
Aceptar.
E entón, nese caso, probablemente imos quero facelo tamén.
>> Oops.
Oh
Non funcionou, pero non estamos recibindo este erro.
Imos ver o que pasou aquí.
>> Entón, non hai nada alí, entón o que dixo que deberiamos engadir?
>> Audiencia: Debemos establecer o ancho da liña.
>> Jason Hirschhorn: Para que?
>> Audiencia: Creo que é 150.
>> Audiencia: Si, foi 150.
>> Jason Hirschhorn: Nós imos poñer iso aquí para manter o meu código consistente.
Pero este non é un deles.
OK, xenial.
Posta.
OK?
Por iso, aínda vai lonxe.
>> Audiencia: Oh, chame ancho?
>> Jason Hirschhorn: Parece como o ancho é de 150.
Imos ver.
Agora imos facer a final, , Cousa legal poderoso que eu son
vou lle amosar.
Non imos rematar este código, pero en liña antes de saír, todo isto
código estará correcto.
Vou enviar correo-e a versión corrixida cun pouco do meu propio estilo despois
sección, e que vai ser posta en liña.
Estimula-vos a continuar a explotar esta e usar isto como unha referencia, pero eu
quero amosar-lle a ferramenta final para este clase, e que é aquí en
o lado dereito.
E miramos para esta última semana, pero agora espero que sexa un pouco máis familiarizado
para ti e cómodo.
>> Pode xogar de forma dinámica co CSS dunha páxina.
Nós, en realidade, xa foi visto nos xogar de forma dinámica co HTML.
Lembre-se de que fixemos o correcto prema en Editar como HTML?
Aquí?
Entón nós tocamos dinámicamente co HTML.
>> Na consola, pode xogar de forma dinámica co JavaScript dunha páxina.
Por exemplo, isto é un válido JavaScript liña.
Boom, eu teño exactamente o que eu quería.
Así, podemos xogar de forma dinámica co HTML, xogar de forma dinámica co
JavaScript.
Agora imos dinámicamente xogar co CSS.
>> E todo iso é porque é coma instante, vivir GDB feedback, e así
pode saber o dereito de algo antes de ter para seguir o seu código, e pode
non creo que algo está vai parecer.
Entón, iso é super legal duper.
>> E imos, finalmente, ollar para dinamicamente xogar co CSS.
Ou sexa, máis aquí á dereita banda, element.style.
Imos a iso.
Aquí está o noso elemento.
Imos darlle algún CSS extra.
>> Ou moito, poderiamos darlle algúns extras CSS, pero é probable que, no presente caso,
quere cambiar este atributo.
Entón, imos descender aquí a esta liña.
Oh, eu non podo facer iso aquí.
Sentímolo.
Edite a -
Entón é así que pode editar o CSS.
Non estamos indo a editar o CSS neste segundo, pero queremos editar
HTML e darlle un atributo adicional.
O que propón cambiar isto?
Penso aviar tiña unha suxestión.
>> Audiencia: ancho Col?
>> Jason Hirschhorn: Isto parecía non fixo nada.
Imos tentar o CSS.
>> Audiencia: [inaudível] de clase?
>> Jason Hirschhorn: Di Non funciona.
Dá esa cousa amarela.
>> Audiencia: Pero [inaudível].
>> Audiencia: Non está definindo o ancho dunha imaxe para 150 cando fai isto?
Como que non é só usar ancho?
>> Jason Hirschhorn: Yeah.
>> Audiencia: Pero non temos unha imaxe máis.
>> Jason Hirschhorn: Non
Non temos nada alí dentro.
Entón, nós non imos resolver o problema específico.
Nós imos voltar a Akshar de solución, porque quero establecer un
golfiño libre para o momento, ou esa é a última
cousa que quero rematar.
Entón, imos deixar isto aquí recoñecendo á vez non é completamente
correcta, e nós estamos indo para volver a el.
>> Sentímolo.
Eu dixen que pode dinamicamente cambiar o CSS.
Imos ollar para iso e facer que moi rapidamente.
Entón, se eu inspeccionar este elemento aquí debaixo, e dicir que quero facelo azul,
pode vir aquí, a cor, porque Sei que cambia a cor de
algo, e xa vimos como el mudouse azul.
Así que me é dinámicamente cambiando o CSS.
Non cambia-lo para o ben, pero, a continuación, Podo volver para o meu arquivo de CSS e
cambiar a cor dun obxecto.
>> Aceptar.
Isto foi moito.
Non rematar o meu programa incrible.
Deixe-me amosar-lle isto ben rápido, e despois imos saír.
Oh, onde está?
Non!
Espere un pouco.
>> OK, entón como está facendo as maletas, unha vista incrible, ou fronte
ver, de próxima vez.
Este é Dolphin train de 2013, e non funciona.
Grande.
>> [Risas]
>> Jason Hirschhorn: Oh!
Boom!
O que significa isto?
>> Audiencia: Non chmod.
>> Jason Hirschhorn: Eu non chmod-lo.
>> Audiencia: fileira un.
>> Jason Hirschhorn: Oh, mira isto.
Aceptar.
Entón, eu teño os meus seis golfiños.
Que pasa?
Imos ver.
Se eu adestrar un, agora adestrando Lili.
Oh, eu quero che liberar, Lili.
Alí vai vostede, de volta ao océano.
>> Así que foi esta semana.
Se ten algunha dúbida, estaremos fóra.
E unha vez máis, eu vou enviar-lle o resto deste código.
Grazas, persoal.