ALLISON Buchholtz-AU: Todo el derecho de todos. Bienvenido de nuevo a la sección. Es nuestra penúltima sección. Es muy triste. No sé lo que voy a hacer sin ver que ustedes todos los lunes. Yo creo que deberíamos solo-- Tal vez podríamos sólo cumplir aquí y tener la cena o algo así. No lo sé. Voy a traer la comida en su lugar. Nos limitamos a hablar. Pero sí, la próxima semana lo hará ser nuestra última sección. En ese sentido, usted tiene una prueba la próxima semana. Sé que me olvidé de hacer mi, como, dos semanas de anticipación la semana pasada, pero espero que ustedes sabía que esto sucedería. Esperemos que este es uno de los últimos exámenes parciales para ustedes para el semestre. Pero va a cubrir toda la material que hemos repasado. Así que no es como usted puede olvidar unos cuatro bucles o variables. Debido a que aprendimos aquellos en el principio, esos son, obviamente, juego justo para su examen. 

Va a ser el mismo formato, el mismo longitud, por lo que ya están acostumbrados a ello. No va a ser codificación por problemas en las manos, tal vez algo de verdadero o falso, tal vez algo de respuesta corta. Por lo que debe ser familiarizarse con el formato, especialmente si toma las pruebas de la práctica. Pero como ya he dicho aquí, es acumulativo, pero definitivamente estamos va a estar centrado en cosas de la sexta semana en adelante. Por lo tanto, estamos probablemente no va preguntarle sobre cuántos bytes se encuentran en cada tipo o ese tipo de cosas, pero probablemente vamos a ser interesados ​​en cosas como listas enlazadas, o diferentes estructuras de datos, o algoritmos diferentes que ya hemos hablado. Así que asegúrate de que estás realmente sobre ellos, y si necesita ningún recurso, aquí hay un montón de recursos. Me acabo de dar clase de una lista rápida allí. 

La próxima semana será cuestionario revisar durante este tiempo. Así que si usted tiene alguna pregunta o temas específicos, cosas específicas sobre el cuestionario que desea ir, por favor enviar a mí antes de tiempo para que pueda tipo de preparar algún material para eso. Y además de esto sección de revisión, vamos a También se sostiene el curso de toda la revisamos como lo hicimos la última vez. Y va a ser hecho por la misma gente. No sé si eso hace que sea mejor o peor, pero va a ser yo, Hannah, Davan, y Gabe nuevo. Así que si quieres venir a ver todos nosotros bromas entre sí y caminar a través de concurso opinión, debería llegado a que el próximo lunes también. Así que vas a tener un atasco Lunes repleto de opinión concurso, lo cual es bueno porque entonces usted tiene Martes para procesar a través de todo. 

Pero sin duda hacer comprobar estos recursos. Study.csv.net es, con mucho, me pensar, uno de los más útiles, sobre todo porque tiene una gran cantidad de código de ejemplo, tiene todos los Power Points con todas las notas sobre él, que son realmente lo que más me baso de mis materiales de la sección de. Si hay algo en el anterior secciones que yo pueda haber enviados que puede que no tenga conseguido, sólo házmelo saber. Como ejemplo de código de la semana pasada, si alguien no consiguió que, me acaba de enviar por correo electrónico o venir a hablar conmigo, y me aseguraré de que usted recibe que. 

Así que con eso, hoy vamos estar hablando de JavaScript. Así que aquí estamos Tommy, quién era yo sólo hablar con usted anoche. Amo a Tommy. JavaScript es su favorito lenguaje, como él dice aquí. Van a tratar y te dicen que es no es el mejor, y van a estar equivocado. Así que Tommy es un maestro JavaScript. No estoy muy a su nivel, pero yo estaba como, "Tommy, ¿cómo puedo enseñar estos niños de JavaScript? " Así que me dio algunos consejos, por lo espero que funcionan. 

Así que un par de cosas que debe saber es que JavaScript es un script del lado del cliente idioma, por lo que PHP es algo que consideramos más del lado del servidor, se cargar en el servidor, compilado y ejecutado allí. Éste se ejecuta en su propia máquina. DE ACUERDO? Así que usted carga alguna página JavaScript y se ejecuta en su máquina. La sintaxis es muy similar a C y PHP. Vamos a ir a través de algunos ejemplos de JavaScript, y vas a ver que el forma en que hablamos acerca de las variables, bucles, y las condiciones son muy similares. DE ACUERDO? El hecho de que son tan similares es probablemente va a disparar algunos de ustedes hasta, en algunos casos, sólo porque podrás incorporar un poco de C donde no debería estar. Tal vez usted trata de escribir algo cuando no debería ser escrito. 

Y en eso, una cosa es saber es que JavaScript es un tipo dinámico lenguaje, como PHP. Así que si ustedes recuerden de sección de la semana pasada, cuando éramos clase de hacer nuestro curso acelerado PHP, vimos cómo una cadena de uno podría ser convertido en un int uno, y así sucesivamente. El tipo de variables se determinan en tiempo de ejecución, por lo que pueden cambiar con el el curso del programa, y de la misma manera que nunca realmente declarar tipos de variables de PHP, vamos a estar haciendo lo mismo cosa aquí, donde no estamos realmente el control de los tipos de nuestras variables, por así decirlo, como lo hacemos en C. 

Y luego una cosa que es bastante cool es que puede error comprobar a través de la consola, con esta gran función console.log, que permite imprimir diferente variables o los objetos que vamos a hablar. Al igual que la semana pasada cuando estaba como, "utilizar esta función," con vertedero de su conjunto de procesadores esta es una función que desea utilizar, console.log. Me sorprendió la cantidad de estudiantes en horario de oficina no sabía acerca de la función de volcado. Y yo estaba como, "chicos, esta voluntad hacer su vida mucho más fácil ". 

Muy bien, así que era una especie de sólo una cosa breve, como siempre, tenemos ejemplos. Sé que ustedes aman a los. Así que aquí está un ejemplo de una muy presentar aquí sencilla JavaScript. Así que sólo va a crear este pop-up que dice: "Hola mundo", cuando entrar en la página, pero vamos tratar de caminar a través de esto un poco. Así que, obviamente esto es sólo como su index.html normal. Así, sólo nuestra plantilla normal de aquí, y tenemos HTML, tenemos nuestra cabeza, y al igual que con CSS, cómo incluido algún archivo fuera, ¿verdad? Tenemos algunos script type texto que está JavaScript. Y la fuente es hello.js, que es aquí abajo. Este es el archivo completo de hello.js. Y luego tenemos algunos título y algo de HTML cuerpo que en realidad no importa. 

Lo que pasa es que cuando cargamos esta página, se ejecuta automáticamente este script. DE ACUERDO? Así JavaScript será ejecutar automáticamente. Entonces, ¿qué va a hacer, va ir de inmediato y ejecutar esto. Y se va a decir, "alerta. Hola Mundo. " ¿Cuál es la función de alerta que en realidad genera esta casilla. DE ACUERDO? Así que es algo de todos los abarcan. No hay nada extra que teníamos hacer, además de sólo alerta, y luego lo que quisiéramos dentro de nuestro cuadro de alerta. DE ACUERDO? Así que eso es sólo una super simple ejemplo de lo que el JavaScript. 

Uno de los muy cool cosas, como veremos, es que te permite JavaScript para manipular a sus páginas web, sin tener que ellos recargar cada vez. Así que si usted want-- por ejemplo, si que se ciernen sobre algo, si ustedes alguna vez han visto como barras de menú, o cuando se pasa sobre algunos tema, aparecerá un menú desplegable, eso es porque de JavaScript. DE ACUERDO? Así que usted no está recargando la totalidad La página de conseguir este menú aparezca, sólo estás buscando alguna específica acción que el usuario ha tomado, que se llaman eventos que vamos a llegar en, y una vez que vea que usted dice, "OK, editar algo en esta página y hacer que se vea diferente, pero sólo editar estas cosas específicas. No vuelva a cargar todo el asunto ". Así que en realidad es mucho más agradable, y usted no tiene que volver a cargar las páginas, y es realmente genial. 

Declaraciones tan variable, para que pueda especie de ver, Me puse en la parte superior aquí, vagamente escribe. Así que esto es muy parecido a PHP. Nosotros no necesitamos decirle JavaScript qué tipo estamos esperando cada una de estas variables sea. Pueden ser cualquier tipo que queremos. Así se observa en este caso, declaramos ellos de manera muy sencilla, sólo con "var" y luego lo que queramos nuestro nombre de la variable que sea. Una cosa a tener en cuenta es que cuando se poner var delante de un nombre de variable, localmente alcances ella. DE ACUERDO? Es totalmente razonable para usted completamente solo borrar la var y acabo de s es igual CS50, y eso sería una variable global. DE ACUERDO? Así que usted puede inicializar las dos cosas, sólo depende de cómo lo quieres. Así que si estás inicializar dentro de una función, y desea que la variable de quedarse con ámbito dentro de esa función, usted va a querer hacer algo así como var nombrar una variable, frente si lo quieres un ámbito global, que puede simplemente hacer el nombre de la variable y luego lo que usted desea es igual a. DE ACUERDO? 

Esta es una especie de cosa fresca aquí abajo, porque si nos damos cuenta de nuestra variable b comienza como cierto. Y lo que esto puede does-- alguien decirme lo que esto hace? Así que tenemos un poco de alerta. ¿Qué tipo de b estar en el principio? AUDIENCIA: Boolean. ALLISON Buchholtz-AU: Boolean. Derecha. Y luego reasignar b a esta cadena, ¿verdad? Así que aquí, ¿qué tipo de ayb? Sería una cadena, ¿verdad? ¿Cuál es tan importante aviso es que en c, que Nunca podría hacer casi algo así. Tendríamos que tener una variable, proyectarlo como algo más, tal vez hacer alguna función con dos i, voy de un cargo a un número entero. Pero si nos damos cuenta de que aquí, b muy fácilmente cambios de tipo. 

AUDIENCIA: ¿Esperar, lo que sólo puede ser como, "hacer b un entero?" 

ALLISON Buchholtz-AU: Sí. Usted sólo puede reasignar b en un entero. 

AUDIENCIA: ¿En serio? 

ALLISON Buchholtz-AU: Sí. Y entonces sería un int. Así que sus variables pueden cambiar a lo largo el curso del programa también. No son estrictamente mecanografiadas. Está muy libremente mecanografiada. DE ACUERDO? Básicamente las variables pueden hacer lo que quieren, como que tipo de vimos con PHP. Ellos pueden hacer algunas cosas locas, por lo es importante ser muy cuidadoso. Nombre sus variables bien. Si no, lo hace de repente que va a ser así, "Espera, pensé que esto era un cadena, y ahora es un int, y yo no estoy muy seguro lo que está pasando aquí ". Así que esto es sólo un ejemplo simple de mostrando cómo una variable puede fácilmente cambiar su tipo más el curso de un programa. 

DE ACUERDO. Así que esto debe verse súper, súper familiar. Así que estos son nuestros lazos en JavaScript. Son exactamente los mismos, excepto por en lugar de cuatro int i es igual a cero, pudiéramos decir var i es igual a cero. Y entonces podríamos tener nuestra misma especie del estado, mismo tipo de actualización, i plus plus funciona bien. Así cuatro patas son los mismos, ratos son los mismos, y hacer entre tanto que son exactamente los mismos. Mismo tipo de formato general. Notamos, cuatro, entre paréntesis, soportes, todo es lo mismo. También habrá un punto y coma cuando lleguemos al ejemplo de código. Ya verás que es bastante lo mismo que c. 

Por declaraciones de funciones, de nuevo, muy similar. Tenemos alguna función que sólo dice que es una función, y luego el nombre de nuestro función, y las entradas. Y de nuevo si nos damos cuenta, nos tener ningún tipo aquí en absoluto. Derecho? No tenemos nada diciendo que éstos deben ser enteros o dobles, o flotadores. Podrían ser lo que quieran. Lo importante es darse cuenta de que tenemos que escribir la función de antemano dejar que JavaScript sabe que esto es en realidad una función. 

Así que esto es sólo una simple suma función que devuelve xoy, y luego lo que es también fresco es que en realidad se puede asignar una función a una variable. Así que en este caso, la suma es ahora la función que realmente hace suma. Así que si usted nota aquí, tenemos función, el nombre de la función, las entradas. Derecho? Aquí sólo tenemos la función y los insumos. Esto se llama una función anónima. Y esto es algo que debe ser nuevo a la mayoría de ustedes, si no todos ustedes. Así que básicamente lo que esto significa es que no lo hacemos necesitar nombre de nuestro función en este caso. Sólo podemos decir: "Está bien, voy a tener esta función que se ejecuta, aquí son sus entradas, y aquí está lo que va a hacer. " Y sobre todo cuando se está asignando una función de alguna variable que vas a manipular, No necesariamente necesita nombrarlo porque vas a estar refiriéndose a ella por esta variable nombre, no por cualquier la función se llama en realidad. DE ACUERDO? 

Así que si vemos aquí, tener alguna variable suma ahora que es igual a la suma de tres y cinco. Y que iba a conseguir esto. Y esto sólo tendría alguna alerta, tres más cinco es igual a la cantidad. Este plus será simplemente concatenar cualquiera que sea nuestra respuesta fue en la cadena. También fresco, plus puede concatenar cadenas. 

Para JavaScript, como con PHP, HTML, CSS y como hemos dicho, muchos de ellos estamos como tomar las ruedas de entrenamiento fuera de aquí y ustedes tienen una gran cantidad de los conocimientos cómo entender realmente estas cosas. Son un poco diferente, pero no son tan ajeno y que usted no puede buscar en Google cosas o mirar hacia arriba en línea con las escuelas w3. Y realmente estamos esperando que chicos a, una especie de experimento y aprender por su cuenta. Así que, sé que esto puede parecer un poco menos completo que algunas de las cosas c que hacemos, pero eso es en realidad por una razón. Pero espero que no sea demasiado diferente, y no es abrumadora. 

Así arrays en JavaScript de nuevo muy, muy similares. Derecho? Tenemos cierta matriz de variables eso es igual a corchetes vacíos, y eso es sólo un conjunto vacío. Esto es a menudo llamado notación literal de matriz. Eso es sólo una cosa la llamamos. Si vemos la matriz de dos aquí, tenemos algunos literal de matriz que tiene tres elementos, ¿verdad? Y luego tenemos algunos var tercer elemento que es alguna variable que sólo va a celebrar esta cadena, JS. 

Los elementos, buenos a notar, están separados por comas, como es de esperar. Y también se puede acceder a estos, como lo hicimos en C, con esta notación índice, ¿verdad? Tan diferente de PHP Ahora, vamos a volver a sólo tipo de referencia a las cosas por índice. Al igual que C, es también el índice cero. Me siento como que sería muy cruel si de repente hicieron JavaScript uno índice, y que tenía que completamente repensar la forma de pensar acerca de las matrices. 

Una cosa interesante es que, en lugar de tener que hacer-- si alguna vez quería que la longitud de una matriz, tal vez usted iterar a través de él hasta que encuentre un fin, o usted acaba de saber lo que es. Debido a que JavaScript está muy floja en más maneras que sólo tipo, como vemos aquí, sólo podemos hacer que esta matriz más grande porque decidimos. Si notamos matriz tres tiene tres cosas para comenzar, pero luego, de repente, estamos como, "oh, es broma. De hecho, estamos pasando para que sea 101 cosas. " Así que si alguna vez quieres saber la longitud real de la matriz, usted lo hace así. Y vamos a ver mucho de esta notación en los ejemplos, pero con JavaScript que es típicamente lo objeto que estás hablando dot cualquier tipo de función usted desea que se aplique a la misma. DE ACUERDO? 

Así que en este caso, nuestro objeto es la matriz de dos, y decimos que queremos que el longitud de matriz de dos. Así que esto sólo llama, como la longitud de eso. Y eso va a devolver su longitud. También algo a tener en cuenta es que si nos damos cuenta de nuestros arrays, a diferencia de C, que no tienen a ser todos del mismo tipo. Esto es mucho más parecido a PHP. JavaScript es básicamente igual que esta interesante mezcla de la C y PHP. Así que vamos a entrar en eso. Por ahora, vamos a asumir que las matrices son básicamente como arrays de C, en que que se indexan cero. OK, así que eso es todo. También se puede simplemente extender una matriz a cualquier índice que desea. Mientras que esto probablemente SEG en fallo con usted o le dará un cierto error, JavaScript es como, "nah, está bien. Yo me encargo. Iremos directamente donde desea ". 

OK, así que los objetos son muy importantes. Ustedes va a utilizar una gran cantidad de estos en su conjunto P, si no recuerdo mal. Así que lo que estos son similar a la de C son estructuras. Así que usted puede pensar cuando sobre-- vamos a un ejemplo correcto después de esto creo que va a hacer mucho más sentido-- pero básicamente utilizamos objetos a sindicación de información de los cursos relacionados. Cuando hablamos acerca de estructuras en C, a menudo hablar de un estudiante que tenía algún nombre, Identificación, casa, ya sabes, la concentración. Y eso es algo de lo mismo que utilizamos objetos para aquí. Es sólo para organizar información similar. 

También se puede pensar en ellos como más similar a las matrices asociativas en PHP. Así que esta sería una especie de la cosa donde tenemos alguna clave con algún valor, muy similar a PHP. Así que usted puede inicializar algunos objeto vacío, como vemos aquí, sólo con llaves. Arrays también lo son entre corchetes. Objetos vacíos son llaves. Bueno distinción a tener. Y estos son sólo dos diferentes maneras de definir las propiedades. Así que esto es una especie de mucho más de una manera que es similar a PHP, con nuestro matrices asociativas, con la llave, y nuestro valor, mientras que ésta es-- podrás ver esto mucho más en JavaScript. Esto tiende a ser la convención. Y de la misma manera que lo hicimos matriz de dos longitud de punto, esto es decir, "OK, dame esto atributo de este objeto ". Derecho? Así que de la misma manera que era como, "dame la longitud del atributo de matriz de dos " esto está diciendo: "dame un poco propiedad de nuestro objeto vacío ". O en este caso, estamos asignándole cualquier valor aquí. Pero también se puede acceder a ella de esa manera. 

Y entonces aquí esto es sólo que muestra dos alertas diferentes. Así que esto mostraría las alertas sería exactamente el mismo, es sólo dos formas diferentes de acceder al elemento que queremos. ¿Tiene eso sentido para todo el mundo? Me siento como éste probablemente tiene más sentido, sólo porque estamos saliendo de PHP. Pero a medida que hacemos más ejemplos, este es, literalmente, exactamente de la misma. Mucho de esto se acaba de cambiar en la sintaxis. 

OK, así ejemplos. Me encanta ejemplos. Así que aquí está una cierta CS50 variable que es un objeto, y almacenamos todo esto información sobre el mismo. Así que tenemos por supuesto, instructor, tfs, conjuntos de procesadores, y grabadas. Entonces nos damos cuenta de que son casi todos de diferentes tipos. Derecho? Así, los objetos pueden almacenar atributos de diferentes tipos. Podemos pensar en esto- es muy similar a nuestra matriz asociativa en PHP. Así clave, valor, clave, valor, clave, valor, así sucesivamente y así sucesivamente. Lo que también es interesante de la misma manera que podemos tener dentro de arrays matrices, también podemos tener objetos dentro objetos o arrays de los objetos. Usted está en realidad nunca limitado a sólo una sola de las cosas. Podemos llegar muy Inceptionesque, justo seguir por la madriguera del conejo allí. 

Así que si nos damos cuenta, nos tener algún supuesto de que es una cadena, el instructor que es una cadena, y la matriz, un int y un booleano. Así que todas estas cosas diferentes. 

Muy bien, así que, tenemos otro. Así que en este caso, tenemos una matriz de objetos. Así que al igual que un objeto puede tener una matriz en ella. También podemos tener una matriz de objetos. Esto podría ser útil para pensar similar a la especie de la forma en que teníamos un hash mesa, tuvimos una matriz de todos estos diferentes tipos de estructuras que eran punteros a diferentes nodos y otras cosas. Pero en este caso, tener una matriz de objetos. Así que esto es como un array arrays de asociativos. Así que tener un poco de primer elemento ser el objeto con el nombre de James y albergar Winthrop. 

Ustedes podrán recordar algo muy similar a este con su último conjunto de procesadores, donde si sacó algo de su base de datos, el primer tipo de cosa en su conjunto era toda la información acerca el primer usuario que conoció a ella, y luego había que índice en que para conseguir su acción o su caché o lo que sea. Así que esto es muy similar cosa, sólo un poco de cambio en la sintaxis, el cambio poco en las palabras que usamos para describirlas. 

Así que si queríamos, ¿alguien puede decir me lo esta alerta gustaría hacer aquí? O lo que este pedacito de código haría por nosotros? AUDIENCIA: Te dará todos los nombres. ALLISON Buchholtz-AU: Derecho, por lo que sería simplemente alertar con todos los nombres porque sería ir a través de casa i, por lo que empezaría en cero. Así que me decía: Aceptar que estamos buscando en este primer objeto, el cual es el primer espacio en nuestra matriz. Y dice: "dame la atributo, el nombre de ese objeto ". Así que vamos allí, nos exploración, nos gustaría encontrar el nombre, y nos gustaría imprimimos James, Molly y Carl. Cualquier pregunta hasta ahora? JavaScript desgracia usted va a ser haciendo un montón de mirar para arriba en su propia, averiguar la sintaxis, lidiando con él. Pero por supuesto que estoy siempre aquí, horario de atención es siempre aquí. Yo podría ser el martes de esta semana. Así que si usted está allí, usted puede venir a visitar esta semana. Sería genial. 

OK, así DOM es el Modelo de documento-Object. Así que esto es sólo una forma que nos gusta pensar acerca de cómo nuestro HTML y todo en su interior se organiza. Esto es muy algo que probablemente van a plantear en su concurso. Sé que mi año, era como aquí está Archivo HTML, siga los pasos de la DOM para ello. Y que acaba de llenar en las cosas pequeñas. Estos deben ser puntos fáciles con suerte. Esperamos que usted ver-- 

AUDIENCIA: [inaudible] 

ALLISON Buchholtz-AU: Así vea este árbol aquí? 

AUDIENCIA: Sí. 

ALLISON Buchholtz-AU: Así le preguntarán uso para rellenar lo que se conoce con el cuerpo. Tal vez por debajo del cuerpo, tenemos algunos divs o que tienen algunos párrafos, y le pedimos que complete un árbol muy parecido a esto. Así que vamos a estar caminando a través de ella. Así el Documento-Object Modelo es sólo una forma estructurar y pensar acerca de nuestro HTML gráficamente. Y también cuando lleguemos en más JavaScript que va a ser el de manera que en realidad manipular diferente elementos de la página. Necesitamos una manera de acceder a cada de las cosas en nuestro HTML, y por lo que esta nos da una muy forma estandarizada de hormigón a través de varias páginas web para hacer eso. 

Así que si sólo caminamos por esto aquí, por supuesto nuestro documento es como todo nuestro archivo. Eso, obviamente, tiene sentido que es lo más alto, y luego tenemos nuestro HTML real, lo que corresponde a esta etiqueta aquí. Además, si en el guión tus etiquetas correctamente, entonces la creación de este árbol DOM se convierte en super simple. Así que tenemos un poco de cabeza aquí. Tenemos un cuerpo que vemos vástago fuera de HTML, es por ello que tenemos la cabeza y el cuerpo. Dentro de la cabeza, tenemos algunos etiqueta del título, una etiqueta de título del final, así que sabemos lo que viene después de la cabeza. Y dentro de nuestra etiqueta de título, tenemos hola, mundo. DE ACUERDO? Así que esa es toda esta rama izquierda. Y luego de la rama derecha aquí, vemos que tenemos HTML, Aceptar que hemos hecho esta parte de la cabeza, estamos mirando sólo al cuerpo, así que tenemos alguna área del cuerpo. Y dentro de eso, la única Lo que tenemos es hola, mundo. DE ACUERDO? Si tuviéramos cosas como algunos soporte de p y luego hola, mundo, y luego otra soporte p de adiós, mundo, tendríamos dos burbujas saliendo de aquí. Debido a que los dos están bajo el cuerpo, pero son párrafos separados este caso. Definitivamente hay práctica en que en pruebas anteriores, así como un montón en línea sobre el mismo. Aceptar así, esto sólo permite nosotros vemos todo muy bien y manipular cosas muy sistemática. DE ACUERDO? Sabemos exactamente cómo recorrer a través de este árbol, así que sabemos lo que queremos acceder. 

Aceptar lo que es por eso que queremos para tener este tipo de modelo, para que podamos usar cosas como esta, y entendemos lo que quieren decir, y están estandarizados en todas las cosas que hacemos. Así que el título del documento de punto es justo el título de our-- todos estos son bastante explica por sí mismo, Me gusta pensar. Tres para la primera ejemplos se acaba diciendo, "Está bien, sólo dame la título de esta página web ". Así que le dará lo que corresponde al título. 

Documento dot cuerpo se va a dar todo lo que es dentro de esas etiquetas del cuerpo. Así que usted puede manipular eso. Y dot dot cuerpo documento Introduce HTML es muy fresco, y tal vez no es como super intuitivo, pero el código HTML interno corresponde a este derecho aquí. Así que si alguna vez quieres manipular el texto en una página, normalmente vas a estar haciendo algo con dot cuerpo HTML interno. DE ACUERDO? Así HTML interno tiende a referirse a lo que es en realidad entre estas etiquetas. DE ACUERDO? Y entonces funciones útiles. Así que si quería llegar cualquiera de estos, cualquier elemento, tenemos algunos Id, clase nombre, o el nombre de la etiqueta. Esto es muy similar a la cosas que hicieron con CSS, ¿verdad? Donde tenemos algunos selectores que corresponder tanto a una etiqueta, una clase que ellos, o un Id damos. Esto es muy de la misma manera. Si usted tiene algo que tiene cierta clase de perro, y dices obtener elementos por nombre de la etiqueta, y pones perro en allí-- o lo siento, nombre de la clase. Usted puede poner punto en allí. Se va a devolver todos los elementos a usted que tienen esa clase. Así que usted puede manipular sólo aquellos. De la misma manera, tal vez sólo querer manipular algunos cabecera, por lo algunos encabezado h1, al igual que lo hicimos. Usted podría hacer llegar los elementos por etiqueta nombrar, porque h1 es un nombre de etiqueta. Y de la misma manera, si usted quiere conseguir algo único, puede hacerlo etiqueta get. Obtener elemento por Id. Y en realidad son un montón de estos. Estos son sólo como tres de muchos. Así que si usted va en línea, como Voy a alentar usted pueda hacer, y hacer algo investigación por su cuenta, Definitivamente lo recomiendo buscando en todo eso. Podrían ser súper útil, especialmente cuando quiere sólo tipo de manipular cosas muy específicas sin tener ir a través y tratar para analizar fuera todo. 

OK, así que lo último es JavaScript eventos. Así que cuando estaba hablando antes acerca de ir a un sitio web, y cuando se pasa sobre algo, o el puntero del ratón pasa por encima de algo, otra cosa sucede. Esto es lo que nos gustaría pensar como un evento. Así que lo que tenemos que poder ser útil aquí es onclick. Así que el mío era en vuelo estacionario, el cual, estoy bastante seguro, es sólo en vuelo estacionario. También un montón de éstos que se puede buscar. Hay una lista completa en línea de las diferentes cosas que se puede escuchar. 

Pero los eventos de JavaScript son básicamente responder a las cosas que su usuario está haciendo. Derecho? Así que su usuario hace algo, eso es un hecho, y JavaScript responderá sin embargo desea que lo haga. Se responderá en consecuencia. Así que en este caso, tenemos algunos onload ventana de punto. Así que lo que dice es, "esperar hasta cargado de la ventana ". DE ACUERDO? Así que cuando todo está cargado, onload, a continuación, puede ejecutar esta función. Así que cuando todo está cargado, vas tener algún botón de búsqueda que sufre es un elemento de identificación, y se imprime lo que elemento es que el botón Buscar. Y luego tenemos esta variable, decimos: "Está bien, onclick". Así que cuando escuchamos un click en el botón Buscar, ejecutar esta función, que es una alerta, haga clic en el botón Buscar. 

Entonces, ¿qué sucede es-- este es un buen poca representación gráfica aquí. Así que nuestra carga de documentos, esa es nuestra onload, nos encontramos con nuestra Búsqueda botón, que es esto. Estamos buscando a nuestro botón Buscar. Y luego, cuando el botón de búsqueda es se hace clic, se corresponde con la derecha aquí. Onclick. Entonces, finalmente, alertamos a nuestros usuarios, que es esta última línea aquí. DE ACUERDO? Así que cada uno de esos cuatro pasos sólo corresponde a las cuatro cajas allí abajo en la parte inferior. ¿Tiene eso sentido para todo el mundo? 

Y entonces una cosa que yo sólo voy mencionar muy, muy brevemente, que yo animo chicos a ir a buscar más en es jQuery, que es sólo una biblioteca que se construye en la parte superior de JavaScript. Es muy útil, ya que con la mayoría de las bibliotecas. Hay un montón de funciones. Así que si alguna vez hay algo que que quieres hacer en JavaScript su primer instinto no debe ser pensar de, "¿qué función debe Me código? "Que debería ser, "Déjame ver a alguien es ha hecho esto por mí ". Debido a que nueve de cada diez veces, alguien lo habrá hecho ya, y probablemente lo han hecho mejor. Las personas pasan mucho tiempo haciendo esto, y JavaScript se utiliza muy ampliamente, para que las personas están constantemente tratar de hacerlo mejor. Y jQuery tiene un montón de funciones que probablemente será útil para usted en su proyecto final si eres hacer cualquier cosa con el diseño web. Como me gusta decir, "trabajo más inteligente, no más difícil ". Si ustedes hacen eso, va a ser grande. Cuando estamos en el hackathon no lo hago quiero que seas todo estresado. Quiero que seas como: "Tengo esto. jQuery tiene mi espalda. No necesito escribir estas funciones ". 

Por lo que sólo dos cosas a Recuerdo, voy a dejar que ustedes miran más en jQuery por su cuenta. Todo lo que voy a decir es que hace algunas cosas bastante impresionantes y puede hacer su vida mucho más fácil. Pero lo que quiere tener es cualquier archivo que vas a utilizarlo en, usted va a querer estas dos líneas. Usted va a querer la guión de js jQuery punto js. Y en realidad su fuente va a ser un poco de URL. Si se busca en Google jQuery, Google en realidad alberga todos los archivos para usted. Así que debe de URL de entrada que en su lugar. Acabo de poner esto aquí por motivos de simplicidad. Todo esto significa es dónde encontrar su librería jQuery. Es enorme, por lo que no quiere alojarlo en su propio ordenador si puede evitarlo, es por ello que tienden a sólo hay que poner en la URL de Google que acoge todos estos archivos para usted. DE ACUERDO? Se busca en Google, te lo prometo que estará allí. 

Y entonces todo lo Archivo JavaScript que eres utilizando, así que esto es sólo algunos externos JavaScript archivo que está utilizando. De la misma manera que nos relacionamos en nuestro CSS archivos, este es el mismo tipo de cosas. Esto sólo vincula el archivo donde tu JavaScript es. Y tengo algunos ejemplos con un simple JavaScript. Así que vamos a ir a través de él. Y luego, en su índice de JavaScript que es su archivo JavaScript aquí, esto es una especie de la envoltura que tiene para jQuery. Ya casi 99.9 por ciento del tiempo va tener esto en su archivo index.js. Porque lo que dice es, "No ejecutar nada hasta que su documento es en realidad listo ", que es exactamente lo que quieres. Porque si el documento no está listo, y jQuery empieza a hacer las cosas, es sólo un desastre. Así que siempre quiero tener este envoltorio. Y entonces, por las cosas que van allí, me dejará al propio hojeando sus chicos. 

OK, así que ¿hay alguna pregunta derecha ahora acerca de JavaScript en general? O el modelo DOM? Si no, tenemos algunos fresco ejemplos que podemos ir a través, que ustedes me puede ayudar código. Pero yo también voy a ser super agradable, y si no quiero decir nada para ellos, eso está bien. Puedo también acaba de dar ejemplos. Pero nada en el PowerPoint antes de seguir adelante? Fresco. 

Me siento como ustedes necesita energía. Así que creo que vamos a empezar con mi ejemplo del partido primero. Tenemos tres ejemplos, usted tiene su opción. Así que tenemos reloj, hacia dónde vamos para implementar un reloj real que es va a actualizar el paso del tiempo. Tenemos esta gran función Twitter. Esto-- ¿sabes qué aferrarse. Vamos a hacer que esto desaparezca. Bam. DE ACUERDO. 

Tenemos esta gran función Twitter aquí, que-- Lo sé, ¿verdad? Va a ser grande. ¿Estás emocionado chicos? Eso va a contar el número de caracteres que le quedan, así que si escribo en este momento, obviamente todavía dice 140, pero sabemos que no es el caso. Y luego con nuestra última aquí, haga clic aquí a la fiesta. ¿Qué va a pasar es cuando hacemos clic, el fondo de va a cambiar los colores. Así que ustedes tienen sus opciones de cuál de ellos desea hacer primero. Te prometo que lo llevo muy fácil en usted. Me siento como todo un poco de sólo muy bajo llave en la actualidad. Así que te voy a caminar a través de la forma vamos a implementar todos estos. Si quieres sonar en, eso es genial, pero yo sentir que todo el mundo está un poco cansado. Así que sólo te voy a caminar a través de estos ejemplos. ¿Tenemos algo que nos gustaría hacer primero? Cualquier persona? Sin preferencia? DE ACUERDO. Sabes que? Estamos en la fiesta. Siento que ustedes necesitan un poco-- así, vamos a hacer una fiesta de primera. DE ACUERDO. 

Así que lo que tenemos aquí-- eso es no se supone que estar allí. Ahora que es bueno. DE ACUERDO. Así que lo que tenemos aquí es sólo una simple página HTML que ustedes deben estar todos súper conoce de sus dos últimos conjuntos de procesadores. tenemos nuestro tipo doc aquí. ¿Todo mundo puede ver? DE ACUERDO. Fresco. Tenemos nuestro HTML obviamente. Tenemos algo de cabecera que es vinculado a una hoja de estilo que acaba de hacer mi fuente agradable y grande y en negrita. Así que no te preocupes por eso. 

Tenemos un cuerpo con un fondo Id, OK? Porque vamos a ser cambiando el fondo. Así que cuando estamos cambiando la fondo de nuestro cuerpo, que recordamos de hace dos semanas cuando se trata de páginas web. Así que bueno tener eso. Y tenemos algunos Id es igual a fiesta. Este h ref libras sólo significa que que va a ir a la misma página. Y haga clic aquí a la fiesta, que es por eso que cuando lo hace clic, debe cambiar los colores, por suerte. 

Y luego tenemos una secuencia de comandos aquí que es simplemente vinculados a este partido js dot archivo, que está vacío porque no hemos hecho nada todavía. Y es tan triste. Pero muy pronto, que va a cambiar colores, y va a ser impresionante. 

Así que sólo voy a caminar chicos a través de cómo podríamos abordar este. Así que lo primero que lo que se quiere hacer, si estamos cambiando el fondo de el cuerpo, la primera cosa que puede ser que desee a hacer es realmente agarrar lo que el cuerpo es, ¿verdad? Así que queremos tener suma, nuestro fondo, y si te fijas, Acabo automáticamente comience a escribir. No hay nada especial que necesita hacer para nuestros archivos JavaScript. Puedo empezar a declarar variables, y declarando funciones aleatorias. Y es la forma mucho más libre. Es como con C, dimos a todos estas reglas duras, y que crecieron, así que estamos como, "ir adelante. Ser libre. Haz lo que quieras ". Y eso es lo que JavaScript está. Así que tenemos algunos antecedentes aquí. Con nuestro modelo DOM, sabemos que puede hacer llegar el documento dot elemento, y si nos damos cuenta de que aquí, nuestro cuerpo tiene un Id. Derecho? Así que podemos hacer llegar el documento por Id, y aquí es simple. ¿Cuál es nuestra Id que queremos aquí? AUDIENCIA: Antecedentes. ALLISON Buchholtz-AU: Antecedentes. Perfecto. Y punto y coma al final. Eso no ha desaparecido todavía. Usted todavía necesita sus puntos y comas. DE ACUERDO. Así que esa es nuestra primera. Y cuando hacemos clic en algo, quiere que pase algo, ¿no? Así que lo que se quiere alguna variable eso se espera de un clic. Lo que vamos a hacer es que vamos a hacer nuestra relación más similar a un botón. Así que vamos a tener algún botón que es igual a documentar dot obtener elemento de identificación. Y si yo estoy hablando de la haga clic en enlace o haga clic aquí para la fiesta enlace, ¿qué podría mi Id estar aquí? Parte. Correcto. Aceptar no está tan mal hasta ahora. Todo el mundo obtiene lo que estamos haciendo? 

OK, así que ahora tenemos nuestra botón, y queremos que las cosas cambien cuando hacemos clic en él. Así que si nos acordamos de nuestro PowerPoint, cosa muy simple que podemos hacer es sólo punto botón onclick, ¿verdad? Y eso va a ser igual a alguna función. Esta es una función anónima. Y esto sólo como-- realidad estoy va a hacer esto un poco más grande. 

Así que lo que acabo de hacer aquí es lo que estoy diciendo, OK, cuando hacemos clic nuestro botón, que es este enlace que sólo nos referimos, vamos a ejecutar esta función anónima. No necesitamos ningún insumo. No nos importa lo que dice el usuario. Al hacer clic en él, estamos va a hacer lo que queramos, que es cambiar el color de fondo. DE ACUERDO? Así que es por eso que no tenemos entradas, sólo tenemos esta función anónima. Y ahora estamos en realidad va escribir esta función. 

Así que hay un montón de maneras que usted podría generar un color aleatorio. La forma en que lo hice fue para generar tres números aleatorios y convertirlos a una triple RGB. Así que esto sólo muestra algunos fresco cosas que si usted es como, "oh, Necesito generar un azar número. "si el Google, esto es lo que puedes encontrar. 

Así que tenemos tres diferentes cosas, var, no de nuevo rojo, verde. Derecho? Así que estos son los tres cosas que componen un color. Azul, rojo y verde. Fresco. Y lo que podemos hacer es que sabemos que tiene que estar entre 255, y si miras un poco generador de números aleatorios, usted podría conseguir algo como matemáticas puntos aleatorios, que si se mira esto regresa a algún número entre cero y uno. DE ACUERDO? ¿Y qué números de hacer nuestro Triples RGB van entre? Cero y qué? ¿Qué pueden ir hasta? 255. Así que si las matemáticas dot azar va entre cero y uno, ¿cómo podríamos querer convertir esto? AUDIENCIA: Tiempo? ALLISON Buchholtz-AU: Sí, exactamente. Así que el tiempo es 255. 

AUDIENCIA: [inaudible] Es como [inaudible]. ALLISON Buchholtz-AU: Matemáticas puntos aleatorios. AUDIENCIA: Cool. ALLISON Buchholtz-AU: Sí. JavaScript sólo cuida de ti. DE ACUERDO. Por lo que podemos hacer eso por todos los éstos. Derecho? Matemáticas dot veces al azar 255. Entendido. Fresco. Así que la cosa es que esto puede no devolver un entero. Derecho? Tal vez lleguemos algún número entre cero y uno, y que hace que sea ligeramente apagado, y nuestros RGBs no pueden ser carrozas. Tienen que ser enteros. Así que si has probado esto, que probablemente tener un comportamiento errático. Sería un poco raro. Así que lo que hacemos es que queremos hacer asegurarse de que éstos se redondean, y usted podría redondear cualquier manera. Doblé con piso. Así que siempre aseguré que redondea hacia abajo. Pero ir fuera de lo simple que era apenas conseguir un número aleatorio, ¿cómo crees que podría piso este número? Es muy similar. ¿Alguna idea? Así que si al azar era sólo punto matemáticas al azar, por lo que piensa usted que haríamos piso? Piso de puntos de Matemáticas. Y también se puede hacer el techo de puntos matemáticas. Ronda es una especie de ambigua porque no lo hace saber si para redondear hacia arriba o hacia abajo redondear. Así que por lo general siempre hacemos matemáticas piso de punto, techo punto matemáticas. Pero honestly-- 

AUDIENCIA: ¿La ronda piso abajo? 

ALLISON Buchholtz-AU: redondea piso abajo. Y eso es sólo una elección de mi parte. 

Así que ahora tenemos nuestros tres números que se han generado de forma aleatoria, y lo que vamos a hacer ahora es que estamos sólo va a cambiar el fondo. DE ACUERDO? Así que ya tenemos nuestra tipo de fondo almacenada en este elemento denominado fondo. Entonces, ¿qué te darás cuenta es que, si que jugó un poco con esto, queremos cambiar el estilo. Y esto es una especie de algo que usted Google y averiguar, como la forma de cambiar el color. 

Pero la forma de acceder a este color es fondo del punto de fondo de punto del estilo. Así que esto está diciendo dado este objeto, fondo, que se refiere a que elemento Id allá arriba, vamos a mirar el estilo dentro del estilo, vamos a mirar en el fondo. DE ACUERDO? Y si vas y ves esto, que podría hacer un poco más de sentido, pero esto es básicamente diciendo, "Dame este atributo muy específico de lo que he definido anteriormente ". Así que lo que estamos cambiando a es algunos RGB, porque tiene sentido. Estamos utilizando RGB triplica, ¿verdad? Y nosotros tener-- Quiero asegurarme de que obtener el número correcto de citas aquí. Así que lo que hacemos es que tenemos RGB, y vamos a-- esto es como concatenación, que es de color rojo. Y luego queremos alguna coma. Y entonces queremos más de color verde, a continuación, algunos coma, y ​​algo de azul. 

Así que estas ventajas sólo significar como concatenación. Así que esto es sólo la creación de este cadena que está pasando dentro de RGB. DE ACUERDO? 

AUDIENCIA: [inaudible], más luego la de un verde más después el rojo. 

ALLISON Buchholtz-AU: Sí, porque metí la pata eso. Está bien que uno. Oh, espera. No. Porque necesito para asegurarse que me dieron todos estos derecha. Así que voy a explicar en Momento uno. Verde, azul, perfecto. Ahora he terminado. Yo creo. 

DE ACUERDO. Entonces, ¿qué es esto, es que el fondo va a ser fijado a una cuerda. Derecho? ¿Qué es lo que tenemos aquí. Va a haber algún RGB 255 comas 255 cero coma, o cualquier número que tener allí. Así que estamos haciendo aquí, tenemos un poco de cuerda. Y lo que queremos hacer, es que estamos tipo de crear dinámicamente que cuando realmente ejecutar este programa. Así que esto es un poco de cuerda. Plus concatena con el valor que el rojo tiene, que concatena con una coma, que concatena se con lo verde es, y así sucesivamente, y así sucesivamente. DE ACUERDO? Hasta el final, que es el el cierre de paréntesis de esta RGB aquí. DE ACUERDO? 

Así que lo que esto va a generar algún comando realmente es decir RGB de tres números que el fondo se establece ahora. DE ACUERDO? Así que vamos a ver si esto funciona. Espero que así sea, porque si no, yo voy a ser muy triste. ¡Oh, no. Aceptar, espera. Definitivamente fondo dot dot fondo estilo. Definitivamente me estoy perdiendo algo sólo pequeña. ¿No tienes chicos odian eso? Cuando es sólo una pequeña poco de error? Fondo Todopoderoso. RGB. 

AUDIENCIA: [inaudible] ALLISON Buchholtz-AU: No. He intentado esto antes de la clase. Tengo todo lo que hice antes clase por si yo estaba como, "Espera, ¿qué hice mal?" Porque yo estaba como, "Lo haré probablemente estropear esto en algún momento ". Plus verde. Todo se ve como si fuera concatenado correctamente. DE ACUERDO. 

AUDIENCIA: [inaudible] 

ALLISON Buchholtz-AU: Oh, ahí lo tienes. Eso es lo que necesitaba. Mira eso. Tiffany para rescatar. Perfecto. DE ACUERDO. Ahora vamos a ver si funciona. Dios mío. DE ACUERDO. Espere. 

AUDIENCIA: El espacio después de la segunda ventaja. 

ALLISON Buchholtz-AU: ¿Cuál? Oh, espera, espera. Desgaste espacio? 

AUDIENCIA: Segundo más en la concatenación verde. ALLISON Buchholtz-AU: Oh. AUDIENCIA: No hay ningún espacio después de que el más, sí. ALLISON Buchholtz-AU: Usted no es necesario que, pero- AUDIENCIA: ¡Oh, no lo hace? ALLISON Buchholtz-AU: Se ve bastante. AUDIENCIA: OK. DE ACUERDO. 

ALLISON Buchholtz AU: Vamos a ver si esto funciona. DE ACUERDO. Obviamente estoy fallando en esta demo, que me recuerda de una conferencia la otra semana, pero sé que esto va a funcionar. Sé que esto va a funcionar. Tan cerca. A menos que yo borré accidentalmente mi guión en este caso. No, se trata de puntos de partido js. Aceptar aferrarse. Voy a copiar esto, y estoy también sólo va a borrar todo, porque tenía este trabajo antes. 

Te prometo que funciona. Si no, voy a mostrarte lo que Tommy es. Y allí. 

AUDIENCIA: Usted está haciendo referencia a las partes dot CSS, y es un punto js partido. 

ALLISON Buchholtz-AU: Ah, bueno aquí es js punto de partido. Bien, ¿qué he hecho diferente? Bien, vamos a ver si esto funciona ahora. Bam. Por lo tanto, yo no sé lo que hice diferente, pero esto es lo que debe suceder. Un poco frío. He hecho clic en este, como, por siempre. Pero podemos tratar de ver lo que hice diferente que éste tenía. Yo no sé ustedes, pero esto ve básicamente lo que acabo de escribir. Probablemente hubo un faltante punto y coma en algún lugar es lo mío. En realidad después, creo que me estaba perdiendo un punto y coma aquí realmente. Pero yo no podía verlo porque era fuera de la pantalla. 

Pero si nos damos cuenta, esto es bastante mucho exactamente lo que acabo de escribir. Creo que probablemente la parte más difícil de esto es sólo un poco de esta cosa aquí, la comprensión lo que está haciendo allí. Este tipo de cosas que se aprenden realmente sólo buscando en Google y honestamente tratando. Si crees que hay alguna atributo, probablemente lo es. Así que probarlo. Vea lo que sucede. Como ya he dicho, hay una gran cantidad de la experimentación con el lenguaje Java, y PHP, y todo lo que cosas, y especialmente CSS. Esa es la única verdad forma de entenderlo. 

OK, así que después de ese fiasco con el partido js punto, tenemos otras dos opciones. Tenemos reloj o Twitter. Son a la vez interesante. Tal vez no es tan divertido como partido, que tenía un poco de efecto estroboscópico fresco cosa al final. ¿Ustedes tienen alguna preferencia? AUDIENCIA: Reloj? ALLISON Buchholtz-AU: Reloj? DE ACUERDO. Fresco. 

Así que de nuevo, tenemos nuestra archivo JavaScript vacía. Y como vemos aquí, tener algo muy simple de HTML. Tenemos nuestra hoja de estilo, que sólo Formatos de lo que debe ser similar. Tenemos nuestro div con un Id de reloj, que sólo dice, "esto debe ser un reloj." Y tenemos nuestro enlace en nuestro archivo JavaScript que en realidad va a generar nuestro reloj para nosotros. Porque lo bueno, es que se puede establecer JavaScript para actualizar automáticamente sí mismo. DE ACUERDO? Así que en lugar de esperar a que el usuario para golpear Actualizar en una página de modo que usted puede conseguir hora actualizada, JavaScript puede actualizarlo sin embargo le gusta. 

Así, al igual que con nuestro último, queríamos para acceder a nuestro fondo, ¿no? Entonces, ¿qué crees que podría ser el Lo primero que queremos hacer aquí? Si estamos tipo de irse este tipo de paradigma aquí? Probablemente Queremos acceder a nuestro reloj, ¿no? Así, tenemos un poco de var reloj, que equals-- ¿qué pensamos que va a ser? Documento dot obtener elemento por-- también amar Sublime-- Id y nuestra Id es reloj. Punto y coma. Tengo que asegúrese de obtener esos puntos y comas en esta ocasión, porque me siento como que fue el problema de la última vez. Aceptar lo que, como le estaba diciendo con tratar tener JavaScript refresque a sí mismo, hay esta gran función, I sé que vino muy bien el año pasado, No estoy seguro de que es muy útil para este conjunto de procesadores, pero se llama intervalo establecido. Y esto es realmente muy genial si ustedes hacen nada con el tiempo o conseguir información actualizada. En un sitio web para una final proyecto, esto es probablemente una función que desea conseguir súper familiarizados. Así que lo que hace es establecer el intervalo que vamos a darle una función, y con qué frecuencia debería llamar a esta función. DE ACUERDO? 

Así que en este caso, sólo vamos a crear una cierta función anónima de nuevo, Bueno, eso va a llegar nuestra cita, y nuestro tiempo, y luego actualizar las cosas y lo mostramos. Así que nos preocuparemos de eso. Seremos como generar reloj aquí. Pero lo que necesitamos es la forma a menudo para actualizarlo. Así que en este caso, es sólo milisegundos. Así que sólo vamos a hacer 100 milisegundos. Por supuesto, completamente arbitraria. Si querías que se actualice mucho más lentamente, lo que pudiste. No podemos perder el tiempo con el intervalo de tiempo establecido, qué tan grande es nuestro intervalo después de que conseguimos un reloj de trabajo, que espero poder llegar. Así que esto es sólo decir: "Está bien, llame al esta función cada 100 milisegundos ". DE ACUERDO? Eso es todo lo que hace. 

Entonces, ¿qué queremos que nuestra función para hacer es que queremos tener una fecha y algún tiempo es lo vamos a tener. Así que podemos comenzar con nuestra fecha es igual a algo, y nuestro tiempo es igual a algo que no sabemos todavía. O en realidad, sólo necesitamos la fecha, porque fecha en que se va a incluir todo. De nuevo, si usted acaba de Google nada sobre lo que quieres hacer, si usted escribe, "OK, Quiero conseguir el tiempo a través de JavaScript, "que le dará esta gran función llamada fecha de obtención. Literalmente, la mayoría de las cosas que quieres hacer, JavaScript va a tener que se haga para usted ya. Por lo que es, literalmente, como nuevo obtener la fecha, que es creating-- o una nueva fecha, rather-- que está generando algún objeto que representa una fecha. 

¿Y qué vamos a hacer aquí es este es-- voy a escribir esto, y luego explicar lo que hace. Así que voy a asegurarme de obtener este derecho. 

OK, así que lo que esta función hace, es sólo somos creando el código HTML que en realidad va a ir dentro de nuestro div id de reloj. Así que lo que esto va a estar haciendo se acaba de generar un poco de cuerda, OK? Es decir entonces va a ser trasplantado en nuestro HTML. Básicamente lo que va a hacer es lo Nosotros-- lo que yo te mostraré es que cualquier cosa que digamos HTML está, vamos a reemplazar este texto aquí con lo que es HTML. Así que esto va a permitir que cambiemos nuestra RELOJ HTML de ser sólo el texto de esta debe ser un reloj, para mostrar en realidad los números y las cosas que nos importan aproximadamente, y en realidad ser en punto. 

Así que lo que vamos a hacer es que estamos va a empezar a generar este HTML. Así, en la misma manera que se utilizó hacer más iguales para enteros, ahora usted puede hacer la de las series, excepto que va a concatenar. Derecho? Como vimos con el punto de partido js, ​​esto sólo concatena todas estas cosas juntas. Así que usted puede concatenar diferentes bits de HTML a partir de variables, o pedazos de cuerdas que escriba a ti mismo, y esto sólo realmente le permite de forma dinámica generar HTML, que es bastante guay. Así que si usted tiene algo muy usuario específico, esto puede permitir que hagas eso. 

Así que tenemos HTML, para que voy a tratar de asegurarme de obtener este derecho. Así que vamos a hacer un poco de cabecera h1. Así que lo que es importante darse cuenta aquí es que esto es en realidad sólo HTML. Derecho? Estamos escribiendo real Código HTML en aquí, es no sólo una cadena en la normalidad manera que íbamos a pensar en ello. Así que tenemos algo de HTML. Esto se considera una cadena aquí, sin embargo. Y lo hacemos fecha dot-- nosotros que desee obtener nuestros hora. De nuevo, si usted fuera a mirar hasta nada sobre la fecha, que te diría que son todos los atributos de esa fecha tiene. Y aquí está lo que usted puede utilizar en ella. Así que es probable que tenga cosas como obtener horas, y obtener minutos, y obtener segundos, y obtener milisegundos, y quién sabe qué más tienen. Pero si nos fijamos en el documentación, todo va a estar allí. 

Así que tenemos obtener horas, y luego nos gustaría para concatenar que con-- estoy va a pasar esto aquí. Así que si estamos generando en este momento, estamos generar realmente el tiempo, ¿verdad? Tenemos horas, y luego lo que está entre horas y minutos? Usted tiene un punto y coma, ¿verdad? Por eso queremos hacer un poco de punto y coma aquí. Y luego queremos conseguir nuestro minutos, por lo que de la misma manera que tenemos fecha dot obtener horas, ¿cómo podemos conseguir nuestros minutos? Es, literalmente, fecha dot llegar minutos, lo que me gusta. Es como, "oh, cómo Cómo puedo obtener mis minutos? " Acabo de llegar de mis minutos. 

DE ACUERDO. Y luego tenemos otros dos puntos aquí. Y luego, si queremos conseguir nuestro segundo, ¿cómo podríamos conseguir nuestra segunda? Fecha dot llegar segundo. Creo que es muy bueno. Y lo que es importante darse cuenta, es que nosotros también tenga que cerrar nuestra etiqueta HTML aquí, porque todavía debe ser HTML válida, por lo h1. Fresco. 

Así que después de eso, podemos hacer reloj dot HTML interno es igual a HTML. DE ACUERDO? Así que recuerde cómo me dije HTML interno básicamente toma lo que sea entre el dos etiquetas que hablamos y se inserta o manipula lo que está ahí? Así que lo que esto hace, si volvemos a nuestro reloj, es que el reloj se refiere a todo dentro de este div. Este es el código HTML interno de este reloj div id. Y por lo que va a cambiarlo a el HTML que acaba de generar, que, que, con suerte, ojalá, ojalá, mostrará el tiempo en este momento. Ya veremos. Por supuesto. Así que muchas cuestiones técnicas. Sólo-- de Allison soy fuera de mi juego de hoy chicos. Bien, eso funciona. reloj de puntos HTML interno. Fue HTML ¿En serio? También esto es lo que sucede. Cuando no se puede ver algo, basta con ver su código fuente. DE ACUERDO. ¿Usted quiere saber un trabajo fresco alrededor que vamos a hacer aquí? 

AUDIENCIA: ¿Puede usted hacer con mayúsculas? Las letras mayúsculas? Debido a que usted tiene conseguir horas, y luego conseguir minutos. 

ALLISON Buchholtz-AU: Se es conseguir hora y get-- oh. Usted trate: estrella de oro. Es todo una prueba, chicos. Te prometo que estaba trabajando antes de la clase. 

Bien, pero algo fresco saber es que puede También-- si a veces sus archivos externos son conseguir un poco loco, también puede simplemente ponerlos directamente aquí, lo que tiende a arreglar las cosas. Excepto esto es como realmente feo. Por supuesto formatear todo. Asegúrese de que todo es bonito. DE ACUERDO. 

Yo quería hacer todas las demos fresco, y que están simplemente no hacer ejercicio. DE ACUERDO. Reloj var Script. De todas formas, lo importante es que esta es la manera general que usted formatee JavaScript. Como puede ver, puede ser muy quisquillosos a veces, incluso cuando estaba literalmente trabajar hace dos segundos. O hace no dos en segundo lugar, pero muy, muy poco. 

Así que le muestre lo que debe ser similar, y para mostrar que no estoy loco, y que todo es exactamente mismo, esto es lo que debe ser similar. No eres más que va a hacer esta parte superior aquí, y si ve fuente de la página, si te fijas, que hizo algunos cosas locas, me simplificó. Además, el crédito a Tommy McWilliam, que en realidad me ayudó a crear estos ejemplos, que es por eso que sé que trabajan. Debido a que Tommy es un maestro JavaScript. Pero si nos damos cuenta, tenemos un conjunto. Tenemos nuestra función de reloj aquí. Esto es todo el código JavaScript que que acabamos de escribir, o parte de ella. ¡Acabamos de escribir esta de aquí. Y tiene un extra función que sólo se rellena poniendo un cero antes de una carta o antes de un número si es sólo uno de ellos. Así que si te fijas, esto es bastante mucho exactamente lo que acabo de escribir. Usted tiene algún reloj variable que tiene nuestro elemento, obtener elementos por ID, que es reloj. Tenemos nuestro intervalo establecido función, que es una función anónima que ejecuta todo esto. Hemos algunos partir cadena de HTML que entonces dinámicamente generar por tener algunos cabecera h1, concatenando con obtener las horas, más nuestro colon, además de conseguir los minutos, más otro colon, además de nuestras segundos, y finalmente el HTML terminando por ello. Y luego actualizamos nuestro reloj dot HTML interno a HTML, y actualizamos cada 100 milisegundos. DE ACUERDO? 

Mira, yo prometo que no estoy loco. No lo sé. No sé por qué no me quiere. Siento que tiene el mismo aspecto, pero parece ser que me odia. 

Así que vamos a ver si la tercera ronda va mejor. Estamos a punto de ver. No estoy seguro de cómo esto va a ir. Está todo el mundo, al menos, conseguir que el contras, como sólo el tema general de JavaScript, sin embargo? Espero que sea al menos útil, más de mostrar que es un poco fastidioso. Pero el conjunto de problemas va a ser muy divertido. Va a ser grande. No va a ser tan aburrido ya que esto, no creo. Usted realmente va a llegar a ver cosas muy interesantes. 

Así que por último pero no menos importante, vamos a tratar el Twitter. Estoy muy asustado ahora, chicos. No sé cómo va a ir. Pero sólo para darle un poco más sabor, y esto es en realidad cadenas de manipular y insumos, lo que van a hacer Es decir, si nos damos cuenta aquí con HTML-- éste tiene un poco más-- tenemos un área de texto, que corresponde a esta área de texto aquí. DE ACUERDO? Y eso tiene un Id de texto. Fue reformado un poco con un poco de anchura y altura que hemos predeterminado, y hemos H1, que sólo es nuestra cabecera que representa nuestros caracteres restantes. Le dimos un poco de Id de caracteres restantes, y luego tenemos una secuencia de comandos aquí, que estoy realmente esperando el tiempo de tercero el encanto aquí, chicos. 

Así que lo que queremos hacer, en el mismo sentido en general que hemos hecho con js RELOJ y el punto de partido js como hemos notado, Somos nosotros hemos empezado por el acaparamiento de realidad las cosas que nos importan, ¿verdad? Así pues, en este caso, hay dos cosas que nos importan, OK? Una cosa que en realidad estamos tipo de buscar en la elaboración y los datos de, y una cosa que en realidad estamos cambiando. Así que nuestro HTML. Si esta es nuestra página web aquí, lo que es los datos que estamos viendo? Va a ser lo el texto en nuestras cajas, ¿verdad? Así que lo que escribo aquí. Eso es lo que quiero saber, o eso es lo que quiero ver. Y lo que va a ser cambiando en nuestra página web? Los caracteres restantes. Así que de la misma manera, queremos empezar por inicializar las variables que en realidad sostienen a esos elementos. DE ACUERDO? Así que si tenemos un poco de var esa es nuestra área de texto, y tenemos un poco de var que queda. Derecho? Así que estos van a mantener esas dos cosas. Así mismo tipo de cosas, documento dot-- bien, estoy va a asegurarse de que esto es va a funcionar esta vez. Estoy muy inflexible. OK, así que si queremos que nuestra área de texto, de acuerdo en nuestro HTML, ¿cuál es nuestro identificador? ¿Cuál es nuestra identidad? Es sólo va a ser texto porque esto crea nuestra área de texto, OK, y nuestra Id es de texto, por lo que es cómo podemos tomar lo que hay allí. Aceptar, punto y coma. Yo voy a ser súper precisa al respecto, porque quiero que esto funcione esta vez. Aceptar, hacer lo mismo, conseguir elemento por Id. Realmente me estoy preguntando qué tiene causado los otros dos a estropear. Aceptar y luego en éste, ¿qué queremos acceder? ¿Cuál es nuestra Id aquí? Tenemos otro Id en nuestro HTML, ¿qué es? AUDIENCIA: Caracteres restantes. ALLISON Buchholtz-AU: Caracteres restantes. 

DE ACUERDO. Fresco. Así que sólo voy a escribir esto muy rápido. Yo sólo voy a escribir esto en segundos. Así área de texto. Lo que es interesante es B function-- allí un montón de funciones que no sólo corresponden a su ratón, pero su teclado. DE ACUERDO? Así que se puede decir cuando una tecla es presionado, se pueden hacer cosas como esas. Así que el que estamos utilizando se llama en clave, lo cual dice, "si se ha pulsado una tecla su teclado, cuando el usuario ha levantado su dedo de ese botón, y la clave se ha convertido sin prensar, entonces vamos a hacer algo ". DE ACUERDO? Así que esto tiene sentido, ¿verdad? Debido a que todos los personajes tecleamos, vamos a tener que levantar los dedos fuera de la misma, por lo que cuando la tecla sube, podemos conocer a disminuir nuestros caracteres restantes. 

Así que tenemos algo en clave arriba, y de la misma manera, vamos a decir, "Está bien, cuando hacemos eso, nos se va a crear una cierta función que va a tomar e, "en este caso, y lo que queremos hacer es calcular el número restante. OK, así que vamos a empezar mediante la creación de una variable. Así que tenemos algo variable r, eso va a representar el número de caracteres que nos queda. DE ACUERDO? Sabemos que partimos 140, y si queremos saber, digamos, la longitud de este cadena que de entrada ha estado, ¿Ustedes tienen alguna idea cómo podemos hacer eso? Sólo con sede fuera de lo obvio cosas, como si nos quisieran horas, solíamos obtener horas. Sabemos que nuestro objeto es área de texto, pero podrían ustedes pensar en lo que podría venir después de él? ¿Alguna idea? 

Así que tipo de esta una de menos intuitivo, pero es valor de la longitud del punto. Así que sólo me dan un poco de atributo de valor que es en realidad la longitud de esta cadena. Así que va a decir, "OK, estoy buscando en toda esta cadena en el área de texto, y yo voy a decir cuánto tiempo es ". Porque si recordamos cadenas en realidad sólo son arrays, por lo que sólo podemos tomar la longitud de ellos. Así que tenemos que. Fresco. 

Entonces lo que queremos hacer es que No faltará para permitir al usuario a la entrada de más de 140 caracteres, ¿no? Porque si decimos como, "oh, sólo tienen esta cantidad restante " y luego los deje hacer eso de todos modos, que hemos sido mintiendo. Y este es otro cosa que JavaScript puede ser muy bueno para, es la validación del usuario y asegurarse de que su usuario encaja dentro de las reglas que usted ha proporcionado a ellos. Así que si quieres hacer cosas como hacer Asegúrese que la entrada a alguien de su dirección de correo electrónico, o asegurarse de que cuando se Introduce dos contraseñas, coincidían. JavaScript puede hacer eso. Se podría hacer algo como, "cuando se envía el formulario, "o similar, "Cuando botón Enviar formulario es se hace clic, todas estas cosas ". Y podemos hacer eso JavaScript. Así que eso es justo lo que vamos a hacer aquí. 

Entonces, ¿qué podría ser una manera de comprobar si que han pasado más de 140 caracteres? ¿Qué va a pasar con nuestro valor de r si lo intentan? Va a ser negativo, ¿no? O que va a ser menos que o igual a cero. Así que podemos usar una si es al igual que todo lo demás. DE ACUERDO? Y tenemos algunos puntos área de texto valor, y lo que estamos haciendo aquí es sólo estamos cutting-- ¿qué es? Lo siento. Éste, que sólo quieren volver falsa. Me confundí. Todo agotado de las cosas que no trabaja. Aceptar, sólo queremos return false, y luego desee mostrar la caracteres restantes, ¿verdad? Así que con el reloj, lo hicimos algo con HTML interno, ¿no? ¿Dónde lo ponemos igual a algún variables, así que lo que podríamos hacer aquí? ¿Qué estamos cambiando el HTML interno? 

AUDIENCIA: restante? 

ALLISON Buchholtz-AU: Estamos cambiando restante. Muy bien, y lo que tenemos , desea configurar igual? Va a ser r, ya que deberían ser nuestros caracteres restantes. DE ACUERDO? Así que estoy muy nervioso para ver si esto funciona ahora, pero ya veremos. Deja esto. Eso es muy rápido. [Inaudible] en Aceptar. Una vez más, yo sólo voy a mostrar. Por alguna razón, la mía no decide trabajar, pero lo que yo te mostraré es que este es-- oh yo tenía que poner esto en. Bien, nos damos cuenta de la misma clase de cosa aquí, para obtener el área de texto. 

Además, si usted aviso chico, si hay alguna vez algo que quieres hacer, y usted no sabe cómo hacerlo , simplemente haga clic en Ver código fuente de página, y que van a decir. A veces va a ser encriptado. Para su conjunto de procesadores, codificamos todo, por lo que sólo se parece un galimatías. Pero si alguna vez hay una realidad sitio web muy interesante que te gusta, si sólo clic en Ver código fuente de página, que va a decir cómo hacerlo. Así que de nuevo, trabajar más inteligentemente, no más difícil. Y como se puede ver aquí, todos estas cosas son lo mismo. este de aquí sólo requiere un poco subcadena que, no recuerdo exactamente lo que esto hace. Pero, obviamente, lleva algún subcadena del valor de cero a diez, y devuelve falso lo que se debe dejar de al usuario de introducir más, y luego actualiza obviamente el código HTML interno allí. 

Fresco. Así grandes tomar las escapadas a partir de hoy, experimento, mirar el código fuente porque va a ayudar mucho, y todo el mundo, a veces JavaScript puede ser difícil de trabajar y no siempre funcionan de la manera que usted espera que, pero sólo seguir intentando porque te prometo que lo hará. Te prometo todos estos ejemplos estaban trabajando antes de la clase. No entiendo lo que pasó. Yo, literalmente, tengo todo lo mismo. 

Una cosa más que sólo quiero mostrar chicos que pueden ser super útil se en-- lo que estaba trabajando antes? Tenemos parte en el trabajo, ¿no? Creo que sí. Sí. Lo hicimos. Impresionante. OK, así que lo único que ustedes deben saber es el registro de la consola de la que hablé. Así consolar registro de puntos de hola. Así que esto es una especie de la Equivalente JavaScript de printf. Así que si alguna vez quieres inspeccionar las variables o ver lo que está pasando allí, lo que que puede hacer es, si inspeccionamos elemento, es lo que se quiere ir a, y te vas a la consola, verás que imprime hola. 

Así que podríamos tenerlo imprimir todo lo que queríamos. Si queríamos que imprime fondo fondo del punto del estilo del punto, debemos ser capaces de ver el RGB triples que aparece. O no. Yo recuerdo exactamente cómo imprimir una variable así, pero usted debería ser capaz de imprimir cosas por el estilo. Eso será muy útil para su conjunto de procesadores cuando usted está tratando de manipular coordina o lo que sea. Así que ellos también cambian esta pieza en clase. Esto es diferente de los últimos años, por lo sólo sea agradable a sus TFS, o la TFS en horas de oficina en lugar, porque somos tipo de aprendizaje junto con ustedes. Pero el registro de la consola era super, super útil para JavaScript año pasado. Así que me encanta. Aprenda cómo usarlo. Es más fácil de usar que el BGF, de modo que debe ser por lo menos un punto más. Pero gracias chicos están dando conmigo. Siento que mi ejemplos por alguna razón simplemente no quería cooperar conmigo, pero yo espero que ayudó tipo de conseguirle un poco más en la zona de JavaScript. Y enviarme todas sus preguntas para la próxima semana, así que puede ser reparado súper, y voy a traer dulces e incluso adicional dulces porque esto era ridículo. Pero ustedes son grandes, y tener una semana increíble.