CS50 2015 - Week 9

>> [REPRODUCCIÓN DE MÚSICA] >> DAVID MALAN: Este es CS50. Este es el comienzo de la semana nueve. Y esto es lo que tendríasido 200o cumpleaños de Mr. Boole. Así que esto es los becariosa la que aludimos hemos bastantes veces sobre el uso deVariables booleanas verdaderas y falsas, 1 y 0 y tal. Y esta era de GoogleHomenaje a él hoy. Él habría cumplido 200. Así que si deseaúnase a nosotros para el almuerzo CS50, echar un vistazo a el enlaceen la página web del curso. Y esas caras y amigos comoéstos le esperan aquí en Cambridge. Rostros como estos te esperan en New Haven. Y, de hecho, en KenNew Haven amablemente hizo lo que se llama un GIF animado de Eliaquí en una reciente lunch-- un GIF es todavía otro formato de archivo gráfico,con la que estás familiar-- que se ve un poco algo como esto. Así que sólo una secuencia de-- Aceptar. Nadie aquí en Cambridge está riendo. Sin embargo, en New Haven, estees muy divertido, ¿verdad? Correcto. >> Así que únete a nosotros allí. Aquí en Harvard,En concreto, este miércoles, si usted es un estudiante de segundo año o estudiante de primer año even--o incluso el pensamiento junior-- de decisiones un interruptor en el ordenadorciencia, saber que no voy ser un CS asesorando feria de esteMiércoles, poco después de la clase a las 4:00 PM en el ordenadoredificio de ciencias Maxwell Dworkin. Vamos a poner esto en el curso desitio web para mañana, también. Donuts, me han dicho, se servirán. >> Correcto. Historia-- tan gracioso que estaba metiendoalrededor en el Internet, y me encontré con algunos viejos archivosde mi antiguo sitio web. Y resulta fuera-- alrededor de estetiempo, parece muy oportuna ya que tengo entendido que las elecciones de la UCestán a punto de prepararse de nuevo. Así que corrí para la UC, perdido miserablemente. Y tal vez esto fue en parte por qué. Así que este era mi sitio web en el tiempo. Por alguna razón, pensé que erauna buena idea, antes de decirle a la gente lo que mi plataforma era y por quédebe votar por mí, que tienen hacer clic para entrar al descubrir queinformación, que en retrospectiva es un poco escalofriante. Realmente no sé lo que era. >> Pero ciertamente no lo hizoayudar a mi campaña. También me di cuenta de que por la altaaño-- tuve este calendario Muppet. Muppets eran especie de moda en aquel entonces. O tal vez no lo eran. Tuve un calendario Muppet en aquel entonces. Y pensé que sería genial para nombrarmi equipo en la red de Harvard frogman.student.harvard.edu. En ese momento, todos teníamos únicanombres de host identificables. Y usted podría elegir alguna vanidadnombrar en lugar de su propio nombre. Y me fui con hombre rana por alguna razón. >> Y entonces me started-- Pasé muchode tiempo accediendo a estos enlaces esta mañana. Y esta fue mi página acerca,que ahora tipo de parece adorable. Pero también da testimonio de solohasta qué punto la tecnología ha llegado. Quiero decir, en su día,un 486 era algo. En estos días, es super, super,super lento y bien menos lo que podría tener en supropios bolsillos en estos días. Hay más allí queque es aún más vergonzoso. Así que voy a dejar las cosas así. Pero esa fue mi primeraincursión en web-- oh, no. Eso no era. Mi primera incursión real de programación webFue este sitio, que simplemente se me olvidó. En algún momento, aprendí ahacer que las imágenes de fondo repetitivas. Y así encontré este mosaico efectiva,como jugador de hockey, el fútbol y el golf pelota, o sea lo que seapara el sitio web Frosh mensajes instantáneos. Y esto era en realidad, realmente laprimer proyecto basado en la web que tomé en-- Creo que tal vez estudiante de segundo añoaño, año-- Junior después de tomar CS50 y CS51, unode las clases de seguimiento en común. Me di cuenta en la búsquedaa través de los archivos que uno de mis sucesores yamigos, Lee, una especie de cambiar los derechos de autor para sus adentros. Pero esto era en verdad algo queQue debería poseer la vergüenza a. Pero en ese momento, estefue el primer sitio web, como dije hace unas semanas,por el cual estudiantes de primer año podría inscribirse en deportes intramuros aquí. Y así resulta queque las imágenes de fondo así no son una buena idea. Pero la web era nuevo, ytodos estábamos experimentando. Y esto es lo queal parecer lo hizo en su momento. Correcto. Así que sin más preámbulos, cambiamosengranajes hoy para darle, en realidad, la última pieza que le puede resultarespecialmente útil para proyectos fin de carrera sino también que comenzará ahacer que la web en todo el mundo entero sentir un poco más comprensible. De hecho, vamos a introduciruna más lenguaje de programación llamada JavaScript que es similary diferente de diferentes maneras de las lenguas que hemos visto hasta el momento. >> Así C, recordar, es este lenguaje compilado. Tienes que ejecutar a través de un compilador. Usted recibe el código fuente de oposicióncódigo, o ceros y unos. Y esos son ceros y unos quesu CPU, Central Processing Unit, realmente entender. PHP, por el contrario, no esun lenguaje compilado. Es un qué? Es un lenguaje interpretado. Así que hay algún programallamado un intérprete que tiene que leer it-- arribaabajo, de izquierda a derecha- y averiguar lo que todossu sintaxis hace y significa, si se trata de un bucle o una condicióno cualquier otro número de la programación construye. Así que eso es un lenguaje interpretado. >> A continuación presentamos HTML. Y HTML ni siquiera es unlenguaje de programación. Nos llamamos qué? Un lenguaje de marcado, que es justouna especie de forma elegante de decir que no tiene construcciones de programación comovimos incluso en el día de Scratch. No hay bucles. No hay condiciones. Realmente es una lenguasobre el marcado de los datos y formatearlo ola estructuración de alguna manera. >> CSS, por su parte, de manera similarno es un lenguaje de programación. Es incluso más orientada estéticamente. Y le permite ordenar de afinarcosas como el tamaño y los colores de la fuente y colocación y todo eso. Luego tuvimos >> SQL. Así SQL es de hecho una programaciónlenguaje en cierto sentido, aunque a medidaespecíficamente a bases de datos. Pero a pesar de que sólo le presentamosseleccionar e insertar y borrar y actualizar y un par de otros,Resulta que en realidad se puede escribir funciones oprocedimientos, ya que son llamada, en SQL que se ven y actúanabsolutamente como funciones PHP y C. Así que sabemos que los existen. Pero ni siquiera nos molestamos con elloscomo acabamos rascamos la superficie aquí. Y luego JavaScript, el último denuestras lenguas introdujeron formalmente. Así JavaScript, también, esun lenguaje interpretado. Y los que están familiarizados, lo hacenquiere distinguirlo con alguna característicatanto desde C y PHP? ¿Qué lo hace diferente? >> AUDIENCIA: No es compilado. >> DAVID MALAN: Diga otra vez? >> AUDIENCIA: No es compilado. >> DAVID MALAN: No es compilado. Así que, también, se interpreta. Así que no es compilado. Pero eso hace que sea un poco como PHP. Pero sigue siendo diferente dePHP de alguna manera sorprendente, al menos en la forma en que usaremos. ¿Sí? >> AUDIENCIA: Se ejecuta en el cliente. >> DAVID MALAN: Corredel lado del cliente, por lo general. Eso es de hecho el distintivocaracterístico para nosotros en este momento. C fue del lado del servidor, en el sentidoque hicimos todo en IDE CS50. PHP ha sido hasta ahoradel lado del servidor en la medida ya que, también, se pone interpreted--no compilado, pero interpreted-- dentro CS50 IDE, que por supuesto essólo un servidor o servidores en la nube. >> Pero JavaScript, inclusoaunque te vas para empezar a escribir para, digamos, psetocho y tal vez definitiva projects-- eres ir a la derecha enIDE CS50 y guardarlo en los archivos dentro de IDE CS50, CS50 IDEy, a su vez, los servidores de la nube en el que se aloja, no vaninterpretar o ejecutar su código. Más bien, va a ser enviados enforma inalterada hasta el navegador. Y es entonces va a ser IEo Chrome o Firefox o Safari o lo que sea que realmente interpretaque, de arriba a abajo, de izquierda a derecha. Así que la distinción clavecaracterística para hoy es que JavaScript está del lado del clientey PHP, por ejemplo, ha sido del lado del servidor. Ahora, esto tiene implicaciones interesantespara, al igual que, la propiedad intelectual y que en realidad se puede ver su código. Y, en efecto, se puede iren la web y ver más cualquier código que alguien tieneescrito en JavaScript. A veces es más fácil de leer,a veces es ofuscado. Pero más sobre esto en su debido tiempo. >> Así JavaScript, lo suficientemente bien, esmuy similares, sintácticamente, a C. Y mucho como PHP,no hay función principal. Si quieres empezar a escribirCódigo de JavaScript, como se verá hoy, que acaba de empezar a escribirlo. Pero es, verás, en particularútil en el contexto de los navegadores web. Sin embargo, mi pequeñodisclaimer-- generalmente antes les hablé era decir que pueda cada vezuso hoy en día del lado del servidor JavaScript utilizando un marco de fantasía llamada Node.jsque algunas de las aplicaciones del CS50 propios están escritos en. Compruebe 50 utiliza realmente Node.js. Pero vamos a centrarse enDel lado del cliente JavaScript aquí en adelante. >> Así que aquí es un conjunto de condiciones en PHP. Lo sentimos, en-- realidad, quedeclaración, también es correcto. Este es también un conjunto decondiciones de JavaScript. Sintácticamente, esidéntica a C y PHP. Expresiones del Sr. Boole son,Del mismo modo, sintácticamente idéntica a ambos C y PHP. También contamos con interruptores enJavaScript que parecen idénticos. Tenemos para bucles que sonestructurado de forma idéntica, mientras bucles, hacer mientras bucles. >> Éste es un poco diferente. PHP tenía la para cada construcciónque podría estar usando o va a utilizar en el conjunto de procesadores siete, tal vez. JavaScript tiene esta versión especial depara donde usted dice, literalmente, algo como por clave variable de objeto, queEs una manera muy sucinta de decir, si tengo una objeto-- y vamos ahablar de éstos a su vez en un moment-- y quiero iterar sobre todosde los pares de claves de valor en el interior, Yo no tengo que encontrar la manera deíndice numéricamente con cero, uno, dos tres. >> Literalmente, lo que puedo decir esto. Y en cada iteración, JavaScriptme voy a actualizar la clave variable ser la primera clave, a continuación, la siguiente tecla,entonces la siguiente clave, entonces la siguiente tecla, etcetera. Y puedo llegar a su valor mediante el tratamientoun objeto en JavaScript, como veremos, como si se trata de unmatriz asociativa en PHP. De hecho, si finalmente envuelto suimporta alrededor de lo que es una matriz asociativa en PHP, se puede pensar en ello por ahora comoidéntica a un objeto en JavaScript. Pero eso es un poco deuna simplificación excesiva. >> Las matrices se ven, lo suficientemente bien, idénticaa PHP a excepción de un carácter. Hay una cosa que falta aquíque vimos la semana pasada con PHP. Lo que se omite? ¿Sí? Ningún signo de dólar. Así que estamos de vuelta a unmás mundo normal, donde variables que no tienen signos de dólar. Pero lo hace prefijo elloscon var, por lo general. Y var significa variable. Y al igual que PHP es vagamentetyped-- cual hay tipos, hay números y cadenasy carrozas, etc. forth-- JavaScript de manera similar tiene tipos. Pero está vagamente escrito en que ellos programadores no tienen que especificarlos. Sólo tenemos que ser conscientesque existen diferentes tipos. >> Variables, meanwhile-- aquí es comopodríamos declarar "hola, mundo" como una cadena. Observe que es idéntica aPHP pero ningún signo de dólar. Y esto es algo que va aempezar a ver más hoy, por el que usted tiene un objetocon claves y valores. Y si quieres probarinferir de última week-- la sintaxis es un poco diferente. Pero un poco de cordura check-- cuántosteclas hace este objeto parece tener? Así que veo cuatro. Veo dos. >> Por lo que es en realidad dos. Así que esta es una colecciónde dos pares clave-valor. La clave es símbolo cuyo valor es FB. La clave es el precio cuyo valor es 101.53. Así que estos son dos pares clave-valor. Y recuerda, PHP-- y esto es nuevosólo una especie de diferencia sintáctica. No es todo lo queintelectualmente interesante. PHP podría haber escrito este mismocosa como cita follows--, es igual. Y puedo cambiar estos para corchetes. Y entonces puedo cambiar esto auna palabra citado, "precio". Y entonces yo no uso dos puntos. ¿Qué es lo que uso la semana pasada? Sí, el signo igualflecha notación funky. >> Y luego hice lo mismo aquí. Lo mismo aquí. Y eso es todo. Así que es muy bien si esto no tienerealmente hundido en la memoria solo sin embargo, porque es realmenteintelectualmente interesante. Es simplemente diferencias sintácticas. Pero las ideas son exactamente los mismos. Dentro de esta variablecita en JavaScript es un conjunto de pares clave-valor,uno de los cuales es símbolo, uno de los cuales es el precio. Y puedo llegar a esos valorescon la siguiente sintaxis. Al igual que en PHP, por lo que pudehacer algo como-- dejar Me hago esta caja un poco más grande. Al igual que en PHP, por lo que pudehacer esto-- oh, maldita sea. Vamos. >> Al igual que en PHP-- OK, vamos asólo tiene que utilizar las notas del presentador. Al igual que en PHP, por lo que puedahacer $ cita ["símbolo"] cotización $, y esto meel valor de "símbolo". En JavaScript, que va a seridénticos, por lo que yo sólo puedo hacer esto. La única cosa que esfalta es el signo de dólar. >> Así que muy bien lo suficiente, entonces, no hayno tanto la sintaxis nueva. Así que lo que hoy nos centramos en, en realidad, esalgunas de las ideas y de las aplicaciones. Y la primera talesaplicación que usted puede ser haber visto si se zambulló en psetsiete ya es esta sintaxis. Así que en conjunto de procesadores siete, si tienesvisto o no visto todavía, saben que hay un archivo que le damosllamaste config.json-- JavaScript Objeto de notación. ¿Por qué? Queríamos ser capaces de ofrecerleuna plantilla con algunos pares clave-valor. Queríamos ser capaces de darle una listadel huésped, el nombre del servidor. Queríamos darle unamarcador de posición para el nombre de usuario y un marcador de posición para la contraseña. Si usted no está viendoesto, sin embargo, no se preocupe. Más sobre esto en conjunto de procesadores de siete[? spec. ?] Y entonces, Obviamente, queremos quellenar el las tareas pendientes porque cuando usted registra enCS50 IDE, cada uno de ustedes tener su propio nombre de usuario y contraseña. >> Así que podríamos haber usado una media docenao formatos de archivo más diferentes. Podíamos haber utilizado un archivo .txt. Podríamos utilizado un archivo CSV. Podríamos haber usado unArchivo INI, un archivo XML, un montón más siglas quees posible que no haya oído hablar nunca. Es un poco arbitrariaal final del día. Pero muy popular en estos días es un textoformato llamado JSON-- JavaScript Object Notation-- que se parece a esto. Es un poco críptico,notar los patrones. Se empieza con un rizado abiertacorsé, y terminas con el mismo. Dentro de eso es algo. Es un par clave-valor. Así que este es un objeto que estoymirando en la pantalla aquí que tiene una clave, que tiene un valor. Y justo inferir en base a lapatrón anterior, ¿cuál es la clave aquí? Base de datos, lo que hay quela izquierda del colon. >> Ahora, el valor pasa a sera múltiples líneas de esta vez. Pero el valor comienza con un rizadoprepararse y termina con una llave. Entonces, ¿qué propondría usted es eltipo del valor de base de datos? Un diccionario o, simplemente mássucintamente, un objeto. ¿Correcto? Esta es una especie de estructura de datos quepuede utilizar otras estructuras dentro de sí mismo. Así que si todo esto estamosllamar a un objeto-- y un objeto es sólo un montón de clave-valor pairs-- lavalor de la propia base de datos es un objeto. El valor de la base de datos tiene un montónde pares de valores clave, el primero de los cuales es anfitrión, a continuación, el nombre, entoncesnombre de usuario, contraseña y luego, cada uno de cuyos valores, por su parte, essólo una cadena aburrida entre comillas dobles. >> Así que incluso si eso no essúper clara todavía, sabemos que esto es sólo unanorma manera, bastante aburrida de almacenar datos en un formato estándar. Pero los errores comunes quepodría hacer, incluso en pset siete, son pequeñas cosas estúpidas, como siomitir accidentalmente la coma allí. Eso va a resultar en el archivono necesariamente siendo legible. Si omite accidentalmente cosas como lacotizaciones, no va a ser fácil de leer. Así que es un formato de archivo muy quisquillosa,pero es uno que es muy común. Y nos toca a utilizarlo, a pesar de queno utiliza ningún JavaScript otra manera, en pset siete. >> Correcto. Así que recuerde esta imagen. Hablamos, en HTML, queel código podría tener este aspecto. Este es el HyperText Markup Language[Inaudible] para apenas "hola, mundo". Pero entonces nos propusimos untiempo atrás que si ayuda, es posible que desee comenzar a pensarsobre esto ya como un árbol. De hecho, la indentación queutilizar sólo por el bien de la legibilidad o por causa de su estilola izquierda tipo lata de traducirse en este árbol, dondetener algún nodo raíz especial que vamos a genéricamente denominado documento, debajo de la cuales el elemento HTML raíz o etiqueta, HTML, que luego tiene doslos niños, la cabeza y el cuerpo. >> Y luego, a su vez, la cabeza tiene un título. Y el título tiene un valor de texto. Y el cuerpo tiene igualmente un valor de texto. Así que si estás cómodo diciendoeso sí, usted podría tomar este código HTML y hacer un dibujo comoesto, el lado derecho es un modelo mental agradable porque ahoraque tenemos JavaScript, una programación lenguaje que los navegadores puedenejecutar e interpretar para usted, resulta que loestamos a punto de hacerlo en el código es empezar a manipular estaestructura de árbol en la memoria. No tenemos para construirel árbol en memoria. No tenemos que hacer una especie deestructura de datos y cinco de estilo pset complejidad. El navegador, muy bien lo suficiente, alinterpretar superior HTML a abajo, izquierda o derecha, es, literalmente, va anosotros entregar el equivalente de un puntero a todo aquel árbol de forma gratuita. Lo hace todo el trabajo duro. Eso es lo que Mozilla y Appley otros han hecho por nosotros. >> Y con JavaScript vamos aser capaz de controlar y cambiar y hacer cosas interesantes aese árbol, de lo contrario conocida como DOM o Document Object Model. ¿Qué tipo de cosas? Bueno, resulta queen JavaScript, no hay esta larga lista deeventos que pueden tener lugar. Y no hemos usado realmente tanpalabra desde la semana cero y pset cero cuando hablábamos de Scratch. La mayoría de ustedes probablemente no utilizaronun evento en su proyecto de Scratch. Pero se puede recordarel simple Marco Polo ejemplo, donde teníamos dossprites, uno de ellos dijo, Marco. El otro de los que luego, al escuchary oyendo ese evento, dijo Polo. Si no es así, no dude enmirar hacia atrás que hacia atrás. >> Pero esto es sólo paradecir, y usted puede clase de inferir a partir de los nombres de éstoscosas, JavaScript, resulta que, nos va a dar una forma de escucharpara el ratón que va abajo o el ratón subiendo o ir tecla de abajo o la teclasubir o onselect onsubmit o onresizing algo. En otras palabras, cualquier acción físicaque un ser humano puede tomar con un navegador lo que hacen todos los días, puede escribircódigo para que la escucha de los eventos y luego hace algo apropiado. >> Por ejemplo, si utiliza Google Maps,¿qué pasa si se hace clic y se mueven el ratón, por lo general? Si hace clic y arrastra? ¿Sí? Exactamente. El mapa comienza a moverse. Así que usted puede especie de ver lo que hayaquí, lo que es de allá. ¿Y cómo Google implementar eso? Bueno, presumiblemente, sonusando un par de estos eventos oyentes, uno quedice, escuche el ratón down-- así que cuando el usuario físicamenteempuja su trackpad o su ratón abajo. Y luego estamos buscandoalgo así como el movimiento o algún otro evento quenos permite capturar arrastre. Y de hecho, de arrastre es similar en estedot dot dot lista de posibles opciones. >> Así que esto va a ser un poderosomanera de empezar a responder al usuario incluso antes de que él o ella realmente hace clicalgo explícita como presentar. Pero vamos a introducirun par de temas para llegar allí. Pero primero, vamos a la transiciónhasta cierto código real. Así que me voy a irpor delante y abrir dom-0, que es un ejemplo muy sencilloaquí que si el zoom en simplemente tiene esta entrada aquí para mí. Y yo voy a seguir adelante y escribir"David" a mi nombre y haga clic en Enviar. >> Y entonces, aunque especie de bajo precio, metener este símbolo que aparece que dice: "¡Hola David!" Así que esto es una especie decomo nuestro "hola, mundo" que hicimos hace un tiempo atrás en C yincluso en PHP porque he dinámicamente emitida mi nombre. Yo puedo hacer el nombre de alguien más aquí. Yo podría simplemente cambiar esto,como, Hannah, haga clic en Enviar. Y, en efecto, los pequeños cambios emergentes. >> Ahora, los pop-ups son uno de losmayoría de las características de abuso de la web. Y, de hecho, de vuelta enlos bloqueadores de ventanas emergentes día se puso de moda, ya queiría a algún website-- tal vez un lugar-- cuestionableque de repente iniciar salpicando la pantallacon un montón de ventanas emergentes. Y así esta habilidad para que aparezcaventanas en frente del usuario no ha sido especialmentebien recibido por la humanidad. Así que por eso se veeste prevenir cosa, que sólo hace toda esta cosa fea. Así que vamos a necesitar unmejor manera de pedir al usuario. Pero por ahora, que parece funcionar. Así que sólo intuitivamente, lo queparece estar sucediendo aquí? Sigo adelante y haga clic en Enviar, yentonces algo está sucediendo, con claridad. Pero lo que no está sucediendo que sucedióla semana pasada cualquier momento hice clic en Enviar? Lo que no ocurrió en la pantalla? ¿Apenado? Actualizar. La URL no cambió en absoluto. Le dije que esto era dom-0,y todavía estoy a dom-0. Normalmente, nos volveríamos a conseguir cambiamos a otroURL, como register.php o similares. >> Pero incluso cuando yo descartoesto haciendo clic en Aceptar, cuenta de que la URLqueda completamente puesto. Y, de hecho, si estoy un pocoescéptico, déjame abro Chrome. Permítanme abro la ficha Red. Y note que es en blanco en el momento. Déjame ir adelante y volver a enviar María. No hay tráfico de red que sea. Así que no hay HTTP. >> Así que de hecho, si me veo en el código fuentepara esto-- permítanme cerrar esta ventana e ir a la vista de origen. Interesante. Parece que hay algo denuevas etiquetas, entre ellos guión. Así que vamos a echar un vistazo dentro CS50IDE exactamente lo que envía al usuario. >> Así que aquí vamos a es--centrarse sólo en el código HTML. Aquí está la mitad inferior de dom-0.html. Y se dio cuenta de que tiene un título,una etiqueta de cabeza, un cuerpo de la etiqueta, una etiqueta de formulario. Pero lo que salta a usted comodiferente, especialmente si usted nunca ha escrito ninguna JavaScript ti mismo. Permítanme desplazo un pocoa la derecha aquí. Tengo una entrada,otra entrada para enviar. Tengo una identificación, que es una especie de nuevo. Pero nos hicieron ver esto con CSS. ¿Qué otra cosa es, sin duda de nuevo? ¿Sí? Agradable. >> Correcto. Así que donde dice onsubmit,cuenta de lo que parece seguir. Este es un atributoen la nomenclatura HTML. Su valor es esta cadena citado aquí. Y esto se ve un pocoextraño a primera vista. No es HTML. No es CSS. Se trata, como puede imaginar, JavaScript. Así que parece que construye en estepágina web es una función llamada saludo. Y estoy infiriendo que acabaporque es una palabra, saludarlo. Tiene una paren abierta,cerca paren, punto y coma. Parece una función C,se parece a una función de PHP. >> Y, en efecto, que va aser una función JavaScript. Entonces vuelvo falsa. Volveremos aque, en un momento. Pero donde se define esta función? Pues déjame desplazarse hacia arribaa la parte superior del archivo. Y a pesar de que se trata de una línea larga,Es relativamente sencillo. Permítanme Alejar aquí ycentrarse en estas cuatro líneas. >> Así que en JavaScript, justocomo PHP, sólo digamos, literalmente, la palabra "función"el nombre de la función, y luego paréntesis con cualquierarguments-- ningún argumento en este caso. Y no hay tipo de retornoen JavaScript, al igual que PHP. Así que es un poco más flojo que C.Corchete abierto, cerca de corchete. Construido en JavaScript es un function--no es un function-- recomendado pero una función llamada de alertacuyo único propósito en la vida es para tirar ese bastante feomensaje que vimos hace un momento. >> Ahora bien, esto es una especie de un bocado. ¿Que esta pasando aqui? Así que vamos a empezar aresaltar todo aquí. Ese es el mismo argumento para alertar. Y lo que está pasando? Esto sólo se ve como una cadena. Y resulta que, a diferencia de PHP y diferenciaC, no importa en JavaScript si usted comillas simples o dobles. Van a ser equivalente. Y, francamente, es sólopopular en estos días para los programadores de JavaScript para siempreusar comillas simples por alguna razón. Es sólo lo que hay que hacer. Pero podríamos utilizar comillas dobles, también. >> Así que además es un nuevo personaje. Pero aquellos de ustedes que han hechoesto antes, ¿qué quiere decir más? Sí. Concatenar. Así lo vimos en PHP. No es sólo el puntooperador en PHP que se concatenar dos cadenas juntas. C era un dolor en el cuello para hacer esto. Recuerde del conjunto de procesadores de seis, que eraun dolor especial en el cuello, usted tendría que usaralgo así como strcat después de la asignación de memoriaen la pila o el montón. Había que pasar por el arosólo para concatenar dos cadenas. En JavaScript, es super simple. Sólo tienes que utilizar el operador más entre ellos. >> Así que el complejo de aspectocosa parece ser la siguiente porque al final detoda esta cadena, sólo concatenar en un signo de exclamación. Así que si lo que estaba apareciendo fue"hola, David", "hola, Hannah," "hola, María," y así sucesivamente, con claridadcosa que media entre los dos ventajas me deben dar acceso a qué? ¿Qué hay allí con seguridad? Sí. Así que voy a fingir que aquí laresponder a su nombre, ¿verdad? Así que su nombre apareció en la finalresultado. Entonces, ¿qué significa esto? Bueno, he propuesto anteriormente en queimagen que la llamada de manera que el DOM tiene este elemento raíz especialcamino hasta la parte superior llamado documento. Y ahora, resulta que eso vaser una variable global especial en JavaScript, integrado en que es unatoda montón de funcionalidades útiles. Entre la funcionalidad útil es lacapacidad para llegar a cualquier nodo descendiente. Esos cuadrados o rectángulos o elipsesson sólo los nodos de un árbol, por así decirlo. >> Así resulta que construye enObjeto de documento de JavaScript es una función, también conocida como unamétodo, que llama getElementById. La sintaxis para llamaruna función en JavaScript que está dentro de un objeto o unavariable es simplemente con la notación punto. Y vimos esto en Clo que la sintaxis struct. Esto se ve en el conjunto de procesadores siete, clase de,más o menos, cuando ves CS50 :: consulta. Los dos puntos de colon en PHP es otroforma de llamar a una función que es dentro de algún objeto. >> Pero por ahora en JavaScript,es sólo un punto. Y así esta función,lo suficientemente bien, tipo de dice lo que does-- obtener elementos por ID. Un elemento es sólo otro nombrepara una etiqueta o nodo en el DOM. Y a fin de obtener elementos por ID "nombre"significa esto- aquí está mi HTML. Y en base a este código HTML, lo quenodo o lo etiqueta HTML soy yo va a ser mediante programación manollamando a document.getElementById? >> Si exacto. Voy a conseguir la entradaelemento existe cuyo ID es "nombre". Así específicamente, puedepensar en esta función, getElementById, como una manera de daruna copia de un puntero a ese nodo específica en el árbol. No hemos elaborado esteárbol, pero es una manera de conseguir el acceso a esarectángulo o ese rectángulo mediante la identificación única que a través de su ID. >> Ahora, ¿por qué es útil? Bueno, resulta queque una vez que haya recibido ese nodo, ese rectángulo de laimagen, ese nodo dentro de ella, a su vez, tiene un montón depares clave-valor properties-- o datos, uno de los cuales se llama valor. Así que, literalmente, es una especie debocado para explicar todo el asunto. Pero al final del día,todo esto hace es darle una cadena que el usuario escribió ende esta manera jerárquica. Pero no me gusta unpar de estas cosas. O más bien, hay un poco de curiosidad todavía. Todo eso parecía funcionar. ¿Por qué crees que regreséfalsa después de llamar a saludar? Esto parece un poco feo, queTengo dos declaraciones no separados por punto y coma. Adivina. Si me quita return false, lo queque podría suceder, simplemente por instinto? Lo sentimos, decir de nuevo? >> Abra un montón de de Windows. Así que tal vez algo potencialmenteal igual que sucedería. ¿Qué otra cosa? Podría presentar una solicitud por dónde? En la misma página. Así que, de hecho, eso es todocuanto más cerca respuesta aquí, a pesar de que, a diferenciaen el pasado, no tengo especifica el atributo de acción,que normalmente tenemos que hacer. Resulta que hay un defecto.Si no se especifica la acción, es como decir cita, fin de la citao el nombre del archivo en sí, que en este caso seríaser como dom-0.html. Es sólo un poco de inferir,o más bien implícita. >> Y por lo que si no hago esto, notemos. Voy a salvar esto. Y me he quitado de retorno falso. Permítanme volver a estaejemplo y la fuerza vuelva a cargarlo. Y es posible que haya visto yo sugieroesto en CS50 Discuta un montón de veces. Si hay algo que está siempre actuando funky y elexplorador no se comporta como se espera, muchas veces usted querrá mantenerMayús y haga clic en Actualizar. Eso obligará a cada archivo para recargary no utilizar caché local de su navegador o una copia de modo que ahora, déjame ir adelante yabrir mi inspector, en la ficha Red. Voy a hacer clicPreservar Iniciar porque no lo quieren para borrar las filasUna vez que consiga llevado lejos en otro lugar. >> Déjame ir por delante aquí yTipo de Andi, haga clic en Enviar. Correcto. Eso parece como se esperaba. Dice "hola, Andi." Permítanme haga clic en Aceptar. Interesante. Observe que la página ha cambiado,aunque en la página original. Observe el tipo de cambio de URL. Añadió un signo de interrogación,que suele ser un indicador que tratamos de presentar algo. Y a continuación, en la parte inferior,aún más explícita, aquí está la solicitud HTTP actual,que obtuvo una respuesta de 200 que me trajo de vuelta aquí. >> Así que esto no lo esque queremos hacer, ¿no? Porque no quierorecargar toda la página. Yo en cambio quería volverfalsa con el fin de cortocircuito el comportamiento predeterminado del navegador, queera, por supuesto, a presentar la página. >> Así que echemos un vistazo a unamarginalmente mejor ejemplo. Esta es la versión uno dom. Y note lo siguiente. Está bien si no lo asimilotodas las líneas de código. Pero lo que es fundamentalmente diferenteacerca de esta aplicación? Voy a estipulo que comporta lamisma, hace lo mismo. ¿Qué he obviamente hecho diferente? ¿Sí? >> AUDIENCIA: [inaudible]. DAVID MALAN: Sí. Así que la función se define differently--En otras palabras, ausentes de la forma, allá arriba, en línea o 7--más bien, la línea más larga 8-- ninguna tengo el atributo onsubmit. En el ejemplo anterior, tuve esto. Y luego, literalmente, escribí mi código aquí. Y entonces me dije return false. Y si no se froteque el camino equivocado, sin embargo, debe comenzar a la medidaya que, al igual que en HTML, cuando empezamos a co-mezclan locon CSS en los atributos de estilo, que acaba de empezar a ser un pocodesordenado o sentir un poco mal. >> Del mismo modo aquí, side empezar a tomar el HTML, y luego de forma automáticaplop algo de código JavaScript en el medio de una cadena entre comillas, esno va a ser muy fácil de mantener. ¿Correcto? Ni siquiera es evidente a primeralugar donde el código JavaScript es. Así que sería muy agradable yaun principio de mejor diseño, vamos a mantener nuestra HTML completoseparar de nuestra JavaScript. >> Así que para hacer eso, lo que hemoshecho aquí es la following-- simplemente usamos HTML sólo marcado. Y así, en versión de uno de esto, todoLo que tengo es un formulario con un identificador único. Y luego aquí, estoy aprovechandode una característica especial de JavaScript por el que puedo tener lo que hayllama una función anónima. Así que resulta que si yo llamodocument.getElementById de 'demostración' eso es como darme un puntero aeste nodo en mi árbol, el elemento de formulario, por así decirlo. >> Ahora, sólo sé desabiendo un poco de HTML ahora que estamos de haber leído algunas en líneade referencia, que un elemento de formulario compatible un montón de eventos en listeners--Es decir, la larga lista de eventos oyentes que vimos hace un momento. Sé que de la lectura de la documentaciónque onsubmit es un evento válido escucha para un elemento de formulario. >> Así que una vez que sé que,que es seguro para mí hacer el following-- conseguir ese nododesde el árbol, el elemento de formulario, y el acceso la llamada de supropiedad onsubmit. Así que el punto sólo significaesta es una propiedad, como un valor especial dentro de ella. ¿Y qué tipo de datos soy yoasignar, al parecer, a onSubmit, que esefectivamente una variable dentro de de ese nodo en el árbol? Es un campo en el interior de esa estructura. ¿Cuál es el tipo de datos? >> Una función, sí. Así resulta que PHP tenga. Y a pesar de queno le dirá al respecto, C también tiene punteros de función, loscapacidad de pasar y asignar funciones como propios los valores de las variables. Y no vamosa retroceder de nuevo a C. Pero por ahora, resulta queen el lado derecho aquí, a pesar de que se ve un pococobarde, este medio, hey navegador, dame una función. Yo no me voy a molestar incluso dandoun nombre porque estoy literalmente va a asignar llamémoslola dirección de esta función inmediatamente al onSubmit. En otras palabras, navegador, no es necesariosaber lo que esta función se llama. Usted sólo necesita saberdonde está en memoria. Y así es suficiente sólo paratener un signo igual no y no molestarse en nombrar a este, al igual quefoo o saludar o cualquier otra palabra. Y ahora esto es sólo una cosa de estilo. Podía mover este corcheteen el-- línea junto sorry-- como solemos hacer CS50. Pero en JavaScript, esrealidad estilísticamente común sólo para mantener la llave de laprimero, en esa primera línea. >> Pero de aquí en adelante, no haynada interesante. Esa llave de apertura justodemarca el inicio de mi función. La función es ahoraidéntica, excepto que he incluido el falso retornodentro de esta función. Porque resulta fuera--y sólo lo haría saber esto de la lecturala documentación-- que si la función que se asignaal controlador de onsubmit devuelve false, el browser conoce y está de acuerdono para enviar el formulario a un servidor. Si devuelve verdadero, presentaráa un servidor por razones que veremos son útiles en un momento. >> Y a continuación, el punto y coma despuésla llave de allí sólo significa que he terminado de definir la función. Usted sabe cómo llamarlo tan prontocomo se oye una presentación. Correcto. Esto sigue siendo sin duda un poco feo. Entonces, ¿qué más podemos hacer? >> Bueno, resulta que después enla versión dos, que es el last-- y sólo tendremos que echar un vistazo a esto. A riesgo de hacerlo más feo, resulta que hay una biblioteca enel mundo llama jQuery. Y jQuery es un superBiblioteca Popular JavaScript eso es tan popular que la mayoríacualquier JavaScript-- no es raro que la gente confundajQuery con JavaScript. ¿Por qué? Sí JavaScript tiene muymaneras de hacer las cosas-- detallados document.getElementById, dadadadadada. Se termina por tener muylargas líneas de código. >> Así que un tipo llamado John Resid,que en realidad trabaja para una startup hasta estos días, saliócon esta biblioteca años hace que muchas personas han contribuidoa llamada jQuery que cambia la sintaxis de la siguiente manera. Y para que lo has visto esto,Debido a que usted siempre ver esto si haciendo unproyecto final basado en la web, esta sería la forma equivalente dela aplicación de esa misma función utilizando esta biblioteca especial. >> Ahora, en lugar de tomadura de pelolo distinguen en su totalidad, vamos a mirar algunos patrones. Esta sintaxis parece tenercuántas funciones anónimas o funciones sin nombreo funciones lambda AKA? Dos, ¿verdad? Y sabes que, aunqueusted no es súper cómoda con esto, simplemente por el hecho de que sedice la función () dos veces. >> Y resulta quelo que este código es doing-- y nos referiremos a las referencias en línea,en última instancia, un poco de ayuda con esto. Esto sólo significa que cuandoel documento está listo, seguir adelante y registrarsela función siguiente como el controlador de presentar para el HTMLelemento cuya única idea es demostración. Y luego, cuando eso sucede,llamar a estas dos líneas de código. Y esto es, trágicamente, una másforma prolija de decir return false. Y mencioné esto sólo porqueverás código como este en línea. Y no es nada para ser intimidado por. Sino más bien, ten en cuenta que lo que estáva a ser común en JavaScript es este paradigma. Y por eso mostramos todo por ahora. Correcto. Así que sin detenerse demasiadotanto en que la sintaxis, se hay alguna pregunta sobreestos ejemplos o ideas hasta el momento? Correcto. Así que vamos a usar esto para algo útil. Hacer una página web que sólo dice hola,esto y lo otro no es tan interesante, no underwhelm. Este no va a ser hermoso,pero se va a hacer algo útil. Déjame volver a mi directorioaquí y abrir, por ejemplo, la forma-0.html. >> Así que supongo que este es el primer añopágina de registro deportes intramuros sin ningún tipo CSS o cualquier sentido del diseño. Y quiero seguir adelante yregistrarse aquí con una contraseña. Y voy a estar de acuerdo con los términosy las condiciones y haga clic en Registro. Y ahora el sitio web dice: "Tú eresregistrada! (Bueno en realidad no.)" Eso parece que funcionó, perodéjame ir por delante y la fuerza de recarga. >> Y déjenme decirles, no, no lo hacenecesitan mi dirección de correo electrónico real. O tal vez sólo tendremos que decimos electrónico en ese país. Contraseña será, como, 12.345. Y entonces, sólo porque soyun idiota, ahora es el 123 456 789. Y yo no voy a comprobar su caja. >> Hmm. Correcto. Así que hay varias oportunidadespara la mejora aquí. Y usted sabe, o se verá en psetsiete, que se puede escribir code-- y usted tiene que escribircódigo en PHP-- defender contra este tipo de usuarioerrores porque el usuario claramente no ha cooperado. Y él o ella no le ha dado toda laValores que querías o incluso en el formato que querías. Por lo que usted ve en pset siete de lasin duda podríamos tener alguna si las condiciones lo que dicensi la dirección de correo electrónico no es un username@something.edu,podríamos simplemente pedir perdón y pedir disculpas al usuariotanto, de que se puede estar en pset siete. O si no han comprobado que la caja,Resulta que en PHP, se puede detectar que, también. Y, ciertamente, si las contraseñasno coinciden como en register.php para pset siete, se puede detectar que. Pero eso es un dolor en elcuello que ahora solicitan nosotros ir todo el camino hasta el servidor. El usuario es informado del error. Y por lo menos a menos que utilicealgunas técnicas más elegantes, ahora tienen que hacer clic en la flecha hacia atrás. ¿No sería agradable, comouna gran cantidad de sitios web de hoy en día, si tuvieras más inmediatoretroalimentación, al instante? >> En otras palabras, déjame ir a la versiónuno, que va a haber más bonita. Pero tiene esta característica. Malan, 12345, 123456789, nova a marcar la casilla, Registro. Las contraseñas no coinciden. Así que, aunque este pop-up es ugly--podemos reemplazar este finalmente con algo como Manos a la Obra,que se verá en conjunto de procesadores de siete es un library-- muy popular que hicedetectan que las contraseñas no coinciden. Correcto. Bueno, déjame arreglar eso que el usuario. Déjenme seguir adelante y decir 12.345, 12.345. Aún no revisar el acuerdo. Usted debe aceptar lostérminos y Condiciones. ¿Entonces por qué? >> Si ya hemos planteamosque hay una manera, y les hemos requerido enpset siete a detectar el error condiciones como estadel lado del servidor, ¿por qué habría de hacerlo molestarse también hacer esto en JavaScript? ¿Qué es un argumento enfavor de añadir lo que estás a punto de ver como some--hay una complejidad adicional. >> Tal vez no hay alza. ¿Qué podría ser? AUDIENCIA: [inaudible]. DAVID MALAN: Oh, interesante. Exploits potenciales. Tan seguro, si usted no está manejandoentrada del usuario errónea de que grande, tal vez es mejor si seni siquiera llegar a su servidor. Me gustaría hacer retroceder allí ypor ejemplo, probablemente debería solucionar ambos problemas. Pero eso es justo. ¿Qué otra cosa? >> AUDIENCIA: [inaudible]. >> DAVID MALAN: Sí. Este código, como hemos dicho antes, esinterpretado en el lado del cliente. No se molestó en el servidor,lo que significa que no hace impacto de la carga o la capacidad del servidor. Y ahora, por poco me de edad,esto no tiene efecto significativo porque tengo un usuario en este momento. >> Pero si usted es cualquierpágina web de tamaño decente, especialmente los más grandes, como Facebook,cuanto más se puede mantener a la gente fuera de su servidor el mejorporque un servidor, por supuesto, solamente tiene una cantidad finita de memoria RAM,un número finito de gigahercios, un número finito de cosasque puede hacer por unidad de tiempo. Así que si hay más personas enel mundo golpear a su servidor, ingresar accidentalmenteincorrectamente, del mismo modo que si puede mantener ese peso de encima su servidor. Además, especialmente en un móvildevice-- Si alguna vez iniciar sesión en my.harvard oNetid de Yale o similar, hay esta la latencia con una gran cantidad desitios web como eso por lo que se necesita, como, un maldito segundo o dos veces. Y luego, Dios mío, si usted escribe mal,entonces usted tiene que devolver el golpe y rehacerlo. Así que hay latencia, especialmenteen conexiones de red lentas. Pero JavaScript, porqueque se ejecuta en el cliente y no tiene que ir y venira través de una internet potencialmente lenta conexión, usted puede conseguirretroalimentación casi instantánea. >> Así que echemos un vistazo a esto. Permítanme abro forma-0 ymirar el HTML aquí. Y vamos a ver lo que está pasando. Esta es una forma cuyala acción es register.php. Sólo estoy usando conseguir tanque podía ver la URL. Pero para las contraseñas, seguramente querríamospara cambiar esto para publicar en la realidad. He aquí un campo de entrada de tipo texto. Aquí hay otra entradacampo de tipo contraseña. Aquí es, si usted nunca ha visto,una entrada de casilla tipo. >> Pero no hay JavaScriptaquí en absoluto. Esto es sólo HTML queva a register.php. Pero en la versión uno, en el quecomenzado a obtener los pop-ups, vamos a ver lo que realmente sucede aquí. En la versión uno, lo queVoy a ver-- I Pensé que podría estancar suficientecon suficientes palabras, pero se me acabó. >> En la versión uno-- ahí vamos. En la versión uno, notar el following--y no es la mejor aplicación, pero es mi primera. Nótese que debajo de laforma, tengo una etiqueta de script. Y una etiqueta de script significa,bueno, navegador, aquí viene algo de código en,Típicamente, JavaScript. Y ahora, noto lo que estoy haciendo. En line-- apenas puedoleer it-- línea 32, que dice, var form-- así dameuna variable llamada formulario. Y a continuación, obtener document.getElementIdde "registro." ¿Que es esto? Bueno, déjame rebobinar hasta aquí. Y fíjense, ah, me di el elemento de formulariouna idea arbitraria pero descriptivo de registro. Así que esto me da una variable queme permite agarrar ese nodo, ese rectángulo en el árbol llamado formulario. medios form.onsubmit, hey navegador,registrar un detector de eventos en este formulario. En otras palabras, cuando esta forma espresentado, ejecute el siguiente código. No necesita un nombre, porque¿por qué necesita saber el nombre? Usted sólo necesita saberlo que para ejecutar, ergo es una función anónima o lambda. Y esa función estodas estas líneas aquí. Y ahora, para ser honesto, a pesar de quepodrían no haber escrito nunca JavaScript antes, es sólo C y PHP lógica. Así que si form.email.value == "" -así que si el campo de correo electrónico está en blanco, gritarle al usuario "Debeproporcionar su dirección de correo electrónico ". Porque si form.password.valuees el grito blanco al usuario, "Debe proporcionar la contraseña." >> Más interesante, lógicamente,si no lo hace form.password.value igual form.confirmation.value--¿de dónde vino la confirmación viene? Permítanme rebobinar. Bueno, llamé a esta entradacampo aquí la contraseña. Y llamé a este de aquí confirmación. Podría haber llamadocontraseña dos o cualquier otra cosa. Estoy lógicamente comprobandoque estos dos son lo mismo. Else-- resulta que esto es el Sr. Boolenuevo-- una la casilla de verificación valor booleano,. Así que si yo digo, exclamación point--si no form.agreement.checked, gritar en el usuario también. >> Así que esta sintaxis que verá esmuy común en JavaScript, donde usted tiene esta separada por puntos. Se empieza con un objeto aquí. Usted sumergirse más profundamente a un auna propiedad como contraseña. Y entonces usted consigue a su valor real. Y de nuevo, aquí está la entrada. Aquí está la clave nombre. Y su valor es lo que elhumano ha tecleado en realidad. >> Así, en todos estoscasos, yo regresamos falsa. Pero si no, vuelvo cierto. Y lo que ahora vemos unuso convincente de cuándo volverías falsoDeje de hacer lo que hace el usuario de y hacer que él o ella elijade nuevo o escriba de nuevo. De lo contrario, volvemos cierto. >> Y permítanme presentarles un solootra variante de este justo para sembrar una cierta comprensión de la misma. Bueno, en la versión 2 de la presente, la forma-2--Lo haré con un gesto de la mano. Esto es, para los curiosos,la versión de jQuery, aquellos de ustedes que quieranincursionar en esa biblioteca particular. Pero vamos a start-- y cualquier pregunta? Permítanme detenerme por momentos debidoeso fue rápido y mucho. >> Pero lo bueno es que tododel código es más o menos lo mismo. El nuevo material es lo que es el Reino? ¿Cuáles son estos rectángulos? ¿Cuáles son estos nodos? ¿Qué es una función anónima? ¿Qué es un controlador de eventos? Pero, por suerte, la mayoría de que es sóloal punto de partida de, por ejemplo, la semana cero. Correcto. Así que algo un poco más interesante? Bueno, primero que nada, déjame irpor delante y abrir Google Maps. Y te darás cuenta de que para que unmomento, en la segunda división, darse cuenta de lo que sucede cuandoHago clic suficientemente rápido. Y esta conexión en Harvard es tanrápido que no te das cuenta que. Pero, ¿qué tipo de especie de versi hago clic y arrastro muy rápido? Aquellos de ustedes viendo en línea,si vas más despacio esto a la velocidad de 0.5x, se puede ver esto mejor. >> ¿Qué estaba pasando justoantes hice clic y arrastré? Permítanme tratar aquí-- déjame hacerotra cosa, como 90210. Vamos a ir muy lejos. Eso fue muy rápido, demasiado. ¿Qué hay de Disney World? Allá vamos. OK. ¿Qué viste para una fracción de segundo? Simplemente, como, las plazas, ¿verdad? Los marcadores de posición para los azulejos? >> Bueno, ¿qué está pasando aquí? Google Maps es un buen ejemplo deesta tecnología que se llama AJAX. Y aquí es donde vamos a empezar autilizar el código JavaScript en un particular manera seductora. De vuelta en el día, no habíaEste sitio web llamado MapQuest. Y yo debería haber tomado unacaptura de pantalla de esto desde la década de 1990, donde si queríasbuscar aquí en el mapa, usted literalmente, haga clic en una flechaen la parte superior que mostró una plaza diferente del mapa. Si querías mover hacia la izquierda, sehecho clic una flecha que mostró una plaza diferente del mapa. Y algunos sitios web siguen haciendo esto hoy. Pero incluso MapQuest ha conseguidomejor, como Google Maps. >> En cambio, lo que es mejor estodías es los sitios web que utilizan AJAX. AJAX-- conocido comoAsynchronous JavaScript y XML, que es sólo una forma elegante de deciruna tecnología o técnica que permite un navegador usando JavaScripthacer peticiones HTTP adicionales después de la página se ha cargado. Entonces, ¿qué significa esto? Bueno, sería una especiemolesto en Gmail si cada vez que queríaspara comprobar su correo, hubieras golpeado literalmente Control-R oComando-R o haga clic en el botón Actualizar y toda la página maldito sería recargar. ¿Correcto? Sería parpadeará blancoprobablemente por segundo. Verá que la barra de progreso estúpido. Y sólo para ver si usted tiene nuevaelectrónico, toda la página web y la URL usted está en tendría que recargar. >> Pero eso no es lo que ocurre en Gmail. ¿Correcto? Cuando llegue un nuevo correo electrónico enGmail, lo que sucede en la pantalla? Esto demuestra, ¿verdad? Sólo aparece por arte de magiacomo una nueva fila en la tabla. Esto implica en realidad unacantidad decente de complejidad. De hecho, si se piensa en este árbol,que a pesar de que es muy simple aquí, Gmail-- y tendría que buscaren el código para ser sure-- probablemente tiene una tabla HTML o tal vezuna lista desordenada que hace cada uno de sus bandejas de entrada mensajes de correo electrónico como. >> Y por lo que si usted se imagina esto hayes un árbol en memoria cuando estás usando Gmail que se ve la clase de tipo deasí, cuando se da cuenta de Google, ooh, Tiene un nuevo correo electrónico, no lo hacequieren reconstruir el árbol entero. Más bien, quiere encontrar el nodoel árbol que representa su bandeja de entrada y basta con insertar un nuevo nodo. >> Así que es muy similar al juego de parámetros cinco, dondetuvo que insertar nodos en una tabla hash, de manera similar hace Google, a través deCódigo JavaScript que se ha escrito, travesía este árbol, averiguar dóndees esa parte la bandeja de entrada de la ventana, y luego insertar una nueva fila. Y una nueva fila sólo significa un soloo más nuevos nodos en un árbol. >> Y así AJAX es esta técnicaque permite exactamente eso. Una vez que usted ha visitado una URL,Sin embargo loco el tiempo que es, y una vez que la página tieneha cargado, puede todavía agarrar más datos delInternet- ya sea un correo electrónico o una baldosa de un map--agarrarlo entre bastidores y luego insertarlo en la páginapor lo que el ser humano en realidad no tener que esperar para ello. >> Facebook Messenger funciona de la misma manera. Cualquier número de otros websites--oh, en realidad, ni siquiera esto. Quiero decir, esto es, francamente, una especie deun molesto cuentan estos días. Si me pongo a buscar cats-- estees una especie de una experiencia de usuario horrible. Simplemente comienza a buscar para mí. Bueno, ¿qué está haciendo? La URL no ha cambiadoDesde que empecé a escribir. Pero lo que está pasando a través de lawire-- bien, hmm interesante. ¿Qué está pasando en todo elalambre de aquí sólo se pone más raro. >> OK. Así que déjame ir adelante y inspeccionoelemento y vaya a la ficha Red y tratar de hacer de estetécnica y menos acerca de los gatos. Mientras escribo, literalmente, gatosy- lo que está pasando per-- No voy a hacer clic eso. Correcto. Así que aquí, lo que ocurre cadavez que escribo un personaje, por lo visto? Al igual que, bajo nivel? ¿Qué está pasando con cada uno de lospersonajes que estoy escribiendo en mi teclado? ¿Sí? AUDIENCIA: [inaudible]. >> DAVID MALAN: Exactamente. Cada uno de esos personajes esir a Google, uno a la vez. Están construyendo una cadenaen su servidor que representa todo lo que he escrito en hasta el momento. Y cada vez que escribaotro personaje, que utilizar su salsa secreta de unbuscar algoritmo y averiguar, Qué quiere decir esta página gatoo esta página gato o similar? Así que, en cierto sentido, me proporciona unamejor experiencia en que yo no hago incluso deberá completar mi pensamiento. Y, en efecto, es un útilcosa, autocompletado en general. Si sus algoritmos son lo suficientemente buenosy si mis búsquedas son bastante obvias, Yo no tengo que escribir la palabra entera. Van a decirme lo quees que estoy realmente buscando. Así que lo que Google llama instantáneabúsqueda se acaba usando AJAX, utilizando el código que les permite solicitarcontenido adicional a través de un navegador web detrás de las escenas que utilizan estenuevo idioma, JavaScript. Así que tenemos un par de minutos para el final. Y déjame llamar a mi amigoColton al escenario, ya que parecíaespecialmente divertido última vez para introducir una tecnologíaque algunos de ustedes han expresado su interéspor los proyectos finales. Pensamos que sería divertido para llevarun voluntario, sin embargo, hoy en día que le muestre una adición aesto que usted-- permite sí, Vi por primera vez esta mano. Vamos arriba. Muy bien hecho. Buen trabajo. Voy a proyectar esto enla pantalla en un momento. ¿Cuál es tu nombre para todo el mundo? >> EPT: Soy Efa. >> DAVID MALAN: Etha? >> EPT: Efa. >> DAVID MALAN: Efa? >> EPT: Sí. >> DAVID MALAN: Encantado de verte. Correcto. A ver si esta listo. Vamos a lamedio con Colton aquí. Qué Colton tiene en sus manoshoy es un mando a distancia. Así que en lugar de te quedes ahí parado en unmundo tridimensional mirando a su alrededor como lo hizo Colton, ahora puede Efarealmente caminar subiendo, abajo, izquierda y derecha como unMando de Nintendo o Xbox. EPT: Voy a caer fuera del escenario. DAVID MALAN: lo harépermanecer más o menos por aquí. Pero ese es un riesgo. OK. Así que adelante y poner los de. Déjame ir adelante ycambiar a la pantalla aquí. Déjame apagar las luces. Y Colton, me dejóllegado stand de al lado de usted. >> ¿Quieres explicar aquícon el micrófono lo que estamos haciendo? Aqui tienes. >> COLTON: Claro. Así que ahora mismo estamoscargando el Oculus, Supongo operating-- que no operasistema, pero el programa principal, donde se puede acceder a todos los juegos yaplicaciones que se encuentran en su biblioteca. Así que ahora mismo, debe decirtoque el panel táctil para empezar. Touchpad va a ser en ellado derecho de los auriculares. Así que adelante y tap-- EPT: Oh, hombre. DAVID MALAN: Sí, ahí lo tienes. La calidad Efa está viendoes mucho más alta calidad. Esto es sólo el Wi-Fi aquí. COLTON: Entonces, ¿qué estásva a querer hacer es mirar hacia la parte superiorderecha de la pantalla. Sí, ese juego en la parte superior derecha. Y luego, cuando usted está seleccionandoque, toque la pantalla táctil de nuevo. Creo que sus Dreadhalls. Y entonces aquí está A-- aquí, y muchoyo sostengo sus anteojos para usted. >> Así que sólo le di un controlador. Así que ahora él puede controlar el juego. Él puede moverse y cosas por el estilo. Así que adelante y mirar hacia arriba hasta la cima. Debería ver New Game. Así que adelante y usted puede hacer eso. Ahora, usted debería ser capaz de controlara ti mismo con el controlador, así, tan pronto como seael juego se carga aquí. Esto podría ser un poco de miedo. >> EPT: Ahora usted me dice. OK. >> COLTON: De acuerdo. Así que confirme que puede moverse. OK. Puedes moverte. Perfecto. Así que si se mira hacia abajo, tienes un mapa. Mapa que muestra dónde se encuentra. Usted puede mirar alrededor de la habitación. Usted puede dar vuelta totalmente alrededor. Si exacto. Giro de vuelta. >> Así que mira a su izquierda. Creo que hay algo que se puederecoger en un barril en la habitación. >> EPT: ¿Cómo puedo obtener lamapa del camino? COLTON: Mire para arriba. Basta con mirar hacia arriba. Correcto. Ahi tienes. Ahora seguir adelante y simplemente dar la vuelta. Así que mira más hacia la izquierda. Manténgase en movimiento a la izquierda. Sigue buscando izquierdo. Continua. Sí. >> EPT: Oh, de esa manera. >> COLTON: Sí. Camina hacia ella con el controlador. Ahi tienes. Ahora debe decir recogerlo. Ahi tienes. Cógelo. Correcto. Ahora, vamos a salir de esta habitación. Vaya por delante y caminar a la puerta. Así que vas a hold-- dicemantenga pulsado el botón para que la fuerza abierta. Así que adelante y mantenga pulsado el botón. Sí, lo que obligó abrir. Correcto. Buen trabajo. Ahora estamos saliendo de la habitación. Así que voy a dejar el restopara usted y ver lo que averigüe. EPT: yo no voy en el cuarto oscuro. Oh espera. Ahora tengo que ir por el pasillo oscuro? OK, voy a volver [inaudible]. COLTON: De acuerdo. Algunos más elementos a recoger. Parece que algunas monedas. Eso es una ganzúa. Así que si usted encuentra un encerradospuerta, usted puede usar eso. ¿Tienes miedo? >> EPT: Todavía no. COLTON: OK. >> Pretend-- sí. Sólo fingir que eresen realidad allí de pie. Y si a su vez around--usted tiene que acostumbrarse a él. Pero tiene sentido. DAVID MALAN: Y mientras Efa siguejugar, ya que podíamos hacer esto todo el día, todos podemos puntillas aquí. Pero tenemos otros dos pares,si te gustaría venir y jugar. De lo contrario, vamos a verel próximo miércoles. ¡Gracias a nuestra voluntaria hoy. [Aplausos] >> [MÚSICA - "Seinfeld TEMA"] ALTAVOZ 1: Bueno, estoyponer una nueva PL montar en. Acabo de cambiar el OLPF-- >> ALTAVOZ 2: Entonces, ¿quéestás haciendo exactamente? >> ALTAVOZ 1: Bueno, cada uno de these--aquí, te voy a mostrar éste aquí. Se puede ver aquí. >> ALTAVOZ 3: Creo que estoy bien con estos. ¿Quieres algo más? >> ALTAVOZ 4: No, estoy bien. [Inaudible]. >> ALTAVOZ 3: No, [inaudible]. Toma un poco. ALTAVOZ 1: Diverso color. ALTAVOZ 2: OK. ALTAVOZ 1: Así que en última instancia, lo quehace es que ajusta el color de--