>> [REPRODUCCIÓN DE MÚSICA]
>> DAVID MALAN: Este es CS50.
Este es el comienzo de la semana nueve.
Y esto es lo que tendría sido 200o cumpleaños de Mr. Boole.
Así que esto es los becarios a la que aludimos hemos
bastantes veces sobre el uso de Variables booleanas verdaderas y falsas,
1 y 0 y tal.
Y esta era de Google Homenaje a él hoy.
Él habría cumplido 200.
Así que si desea únase a nosotros para el almuerzo CS50,
echar un vistazo a el enlace en 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 Ken New Haven amablemente hizo
lo que se llama un GIF animado de Eli aquí 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, este es 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 ordenador ciencia, saber que no voy
ser un CS asesorando feria de este Miércoles, poco después de la clase
a las 4:00 PM en el ordenador edificio de ciencias Maxwell Dworkin.
Vamos a poner esto en el curso de sitio web para mañana, también.
Donuts, me han dicho, se servirán.
>> Correcto.
Historia-- tan gracioso que estaba metiendo alrededor en el Internet,
y me encontré con algunos viejos archivos de mi antiguo sitio web.
Y resulta fuera-- alrededor de este tiempo, parece muy oportuna
ya que tengo entendido que las elecciones de la UC está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 era una 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 que información, que en retrospectiva es
un poco escalofriante.
Realmente no sé lo que era.
>> Pero ciertamente no lo hizo ayudar a mi campaña.
También me di cuenta de que por la alta añ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 nombrar mi equipo en la red de Harvard
frogman.student.harvard.edu.
En ese momento, todos teníamos única nombres de host identificables.
Y usted podría elegir alguna vanidad nombrar en lugar de su propio nombre.
Y me fui con hombre rana por alguna razón.
>> Y entonces me started-- Pasé mucho de 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 solo hasta 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 su propios bolsillos en estos días.
Hay más allí que que es aún más vergonzoso.
Así que voy a dejar las cosas así.
Pero esa fue mi primera incursión en web-- oh, no.
Eso no era.
Mi primera incursión real de programación web Fue este sitio, que simplemente se me olvidó.
En algún momento, aprendí a hacer 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 sea para el sitio web Frosh mensajes instantáneos.
Y esto era en realidad, realmente la primer proyecto basado en la web que tomé en--
Creo que tal vez estudiante de segundo año año, año-- Junior
después de tomar CS50 y CS51, uno de las clases de seguimiento en común.
Me di cuenta en la búsqueda a través de los archivos
que uno de mis sucesores y amigos, Lee, una especie de cambiar
los derechos de autor para sus adentros.
Pero esto era en verdad algo que Que debería poseer la vergüenza a.
Pero en ese momento, este fue 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 que que las imágenes de fondo
así no son una buena idea.
Pero la web era nuevo, y todos estábamos experimentando.
Y esto es lo que al parecer lo hizo en su momento.
Correcto.
Así que sin más preámbulos, cambiamos engranajes hoy para darle, en realidad,
la última pieza que le puede resultar especialmente útil para proyectos fin de carrera
sino también que comenzará a hacer que la web en todo el mundo entero
sentir un poco más comprensible.
De hecho, vamos a introducir una más lenguaje de programación
llamada JavaScript que es similar y 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ón código, o ceros y unos.
Y esos son ceros y unos que su CPU, Central Processing Unit,
realmente entender.
PHP, por el contrario, no es un lenguaje compilado.
Es un qué?
Es un lenguaje interpretado.
Así que hay algún programa llamado un intérprete que
tiene que leer it-- arriba abajo, de izquierda a derecha-
y averiguar lo que todos su sintaxis hace y significa,
si se trata de un bucle o una condición o 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 un lenguaje de programación.
Nos llamamos qué?
Un lenguaje de marcado, que es justo una especie de forma elegante de decir que
no tiene construcciones de programación como vimos incluso en el día de Scratch.
No hay bucles.
No hay condiciones.
Realmente es una lengua sobre el marcado de los datos
y formatearlo o la estructuración de alguna manera.
>> CSS, por su parte, de manera similar no es un lenguaje de programación.
Es incluso más orientada estéticamente.
Y le permite ordenar de afinar cosas 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ón lenguaje en cierto sentido,
aunque a medida específicamente a bases de datos.
Pero a pesar de que sólo le presentamos seleccionar e insertar y borrar y actualizar
y un par de otros, Resulta que en realidad se puede
escribir funciones o procedimientos, ya que son
llamada, en SQL que se ven y actúan absolutamente como funciones PHP y C.
Así que sabemos que los existen.
Pero ni siquiera nos molestamos con ellos como acabamos rascamos la superficie aquí.
Y luego JavaScript, el último de nuestras lenguas introdujeron formalmente.
Así JavaScript, también, es un lenguaje interpretado.
Y los que están familiarizados, lo hacen quiere distinguirlo
con alguna característica tanto 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 de PHP de alguna manera sorprendente,
al menos en la forma en que usaremos.
¿Sí?
>> AUDIENCIA: Se ejecuta en el cliente.
>> DAVID MALAN: Corre del lado del cliente, por lo general.
Eso es de hecho el distintivo característico para nosotros en este momento.
C fue del lado del servidor, en el sentido que hicimos todo en IDE CS50.
PHP ha sido hasta ahora del lado del servidor en la medida
ya que, también, se pone interpreted-- no compilado, pero interpreted--
dentro CS50 IDE, que por supuesto es sólo un servidor o servidores en la nube.
>> Pero JavaScript, incluso aunque te vas
para empezar a escribir para, digamos, pset ocho y tal vez definitiva projects-- eres
ir a la derecha en IDE CS50 y guardarlo
en los archivos dentro de IDE CS50, CS50 IDE y, a su vez, los servidores de la nube
en el que se aloja, no van interpretar o ejecutar su código.
Más bien, va a ser enviados en forma inalterada hasta el navegador.
Y es entonces va a ser IE o Chrome o Firefox o Safari
o lo que sea que realmente interpreta que, de arriba a abajo, de izquierda a derecha.
Así que la distinción clave característica para hoy
es que JavaScript está del lado del cliente y PHP, por ejemplo,
ha sido del lado del servidor.
Ahora, esto tiene implicaciones interesantes para, al igual que, la propiedad intelectual
y que en realidad se puede ver su código.
Y, en efecto, se puede ir en la web y ver más
cualquier código que alguien tiene escrito 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, es muy similares, sintácticamente, a C.
Y mucho como PHP, no hay función principal.
Si quieres empezar a escribir Có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ño disclaimer-- generalmente antes les hablé
era decir que pueda cada vez uso hoy en día del lado del servidor JavaScript
utilizando un marco de fantasía llamada Node.js que algunas de las aplicaciones del CS50 propios
están escritos en.
Compruebe 50 utiliza realmente Node.js.
Pero vamos a centrarse en Del lado del cliente JavaScript aquí en adelante.
>> Así que aquí es un conjunto de condiciones en PHP.
Lo sentimos, en-- realidad, que declaración, también es correcto.
Este es también un conjunto de condiciones de JavaScript.
Sintácticamente, es idé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 en JavaScript que parecen idénticos.
Tenemos para bucles que son estructurado de forma idéntica,
mientras bucles, hacer mientras bucles.
>> Éste es un poco diferente.
PHP tenía la para cada construcción que podría estar usando
o va a utilizar en el conjunto de procesadores siete, tal vez.
JavaScript tiene esta versión especial de para donde usted dice, literalmente, algo
como por clave variable de objeto, que Es una manera muy sucinta de decir,
si tengo una objeto-- y vamos a hablar de éstos a su vez en un moment--
y quiero iterar sobre todos de 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, JavaScript me 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 tratamiento un objeto en JavaScript, como veremos,
como si se trata de un matriz asociativa en PHP.
De hecho, si finalmente envuelto su importa alrededor de lo que es una matriz asociativa
en PHP, se puede pensar en ello por ahora como idéntica a un objeto en JavaScript.
Pero eso es un poco de una simplificación excesiva.
>> Las matrices se ven, lo suficientemente bien, idéntica a 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 un más mundo normal, donde
variables que no tienen signos de dólar.
Pero lo hace prefijo ellos con var, por lo general.
Y var significa variable.
Y al igual que PHP es vagamente typed-- cual hay tipos,
hay números y cadenas y carrozas, etc. forth--
JavaScript de manera similar tiene tipos.
Pero está vagamente escrito en que el los programadores no tienen que especificarlos.
Sólo tenemos que ser conscientes que existen diferentes tipos.
>> Variables, meanwhile-- aquí es como podríamos declarar "hola, mundo"
como una cadena.
Observe que es idéntica a PHP pero ningún signo de dólar.
Y esto es algo que va a empezar a ver más hoy,
por el que usted tiene un objeto con claves y valores.
Y si quieres probar inferir de última week--
la sintaxis es un poco diferente.
Pero un poco de cordura check-- cuántos teclas hace este objeto parece tener?
Así que veo cuatro.
Veo dos.
>> Por lo que es en realidad dos.
Así que esta es una colección de 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 nuevo sólo una especie de diferencia sintáctica.
No es todo lo que intelectualmente interesante.
PHP podría haber escrito este mismo cosa como cita follows--, es igual.
Y puedo cambiar estos para corchetes.
Y entonces puedo cambiar esto a una palabra citado, "precio".
Y entonces yo no uso dos puntos.
¿Qué es lo que uso la semana pasada?
Sí, el signo igual flecha notación funky.
>> Y luego hice lo mismo aquí.
Lo mismo aquí.
Y eso es todo.
Así que es muy bien si esto no tiene realmente hundido en la memoria solo
sin embargo, porque es realmente intelectualmente interesante.
Es simplemente diferencias sintácticas.
Pero las ideas son exactamente los mismos.
Dentro de esta variable cita 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 valores con la siguiente sintaxis.
Al igual que en PHP, por lo que pude hacer algo como-- dejar
Me hago esta caja un poco más grande.
Al igual que en PHP, por lo que pude hacer esto-- oh, maldita sea.
Vamos.
>> Al igual que en PHP-- OK, vamos a sólo tiene que utilizar las notas del presentador.
Al igual que en PHP, por lo que pueda hacer $ cita ["símbolo"] cotización $,
y esto me el valor de "símbolo".
En JavaScript, que va a ser idénticos, por lo que yo sólo puedo hacer esto.
La única cosa que es falta es el signo de dólar.
>> Así que muy bien lo suficiente, entonces, no hay no tanto la sintaxis nueva.
Así que lo que hoy nos centramos en, en realidad, es algunas de las ideas y de las aplicaciones.
Y la primera tales aplicación que usted puede ser
haber visto si se zambulló en pset siete ya es esta sintaxis.
Así que en conjunto de procesadores siete, si tienes visto o no visto todavía,
saben que hay un archivo que le damos llamaste config.json-- JavaScript
Objeto de notación.
¿Por qué?
Queríamos ser capaces de ofrecerle una plantilla con algunos pares clave-valor.
Queríamos ser capaces de darle una lista del huésped, el nombre del servidor.
Queríamos darle una marcador de posición para el nombre de usuario
y un marcador de posición para la contraseña.
Si usted no está viendo esto, sin embargo, no se preocupe.
Más sobre esto en conjunto de procesadores de siete [? spec. ?] Y entonces,
Obviamente, queremos que llenar el las tareas pendientes
porque cuando usted registra en CS50 IDE, cada uno de ustedes
tener su propio nombre de usuario y contraseña.
>> Así que podríamos haber usado una media docena o formatos de archivo más diferentes.
Podíamos haber utilizado un archivo .txt.
Podríamos utilizado un archivo CSV.
Podríamos haber usado un Archivo INI, un archivo XML,
un montón más siglas que es posible que no haya oído hablar nunca.
Es un poco arbitraria al final del día.
Pero muy popular en estos días es un texto formato llamado JSON-- JavaScript Object
Notation-- que se parece a esto.
Es un poco críptico, notar los patrones.
Se empieza con un rizado abierta corsé, y terminas con el mismo.
Dentro de eso es algo.
Es un par clave-valor.
Así que este es un objeto que estoy mirando en la pantalla aquí
que tiene una clave, que tiene un valor.
Y justo inferir en base a la patrón anterior, ¿cuál es la clave aquí?
Base de datos, lo que hay que la izquierda del colon.
>> Ahora, el valor pasa a ser a múltiples líneas de esta vez.
Pero el valor comienza con un rizado prepararse y termina con una llave.
Entonces, ¿qué propondría usted es el tipo del valor de base de datos?
Un diccionario o, simplemente más sucintamente, un objeto.
¿Correcto?
Esta es una especie de estructura de datos que puede utilizar otras estructuras dentro de sí mismo.
Así que si todo esto estamos llamar a un objeto-- y un objeto
es sólo un montón de clave-valor pairs-- la valor de la propia base de datos es un objeto.
El valor de la base de datos tiene un montón de pares de valores clave, el primero de los cuales
es anfitrión, a continuación, el nombre, entonces nombre de usuario, contraseña y luego,
cada uno de cuyos valores, por su parte, es sólo una cadena aburrida entre comillas dobles.
>> Así que incluso si eso no es súper clara todavía,
sabemos que esto es sólo una norma manera, bastante aburrida
de almacenar datos en un formato estándar.
Pero los errores comunes que podría hacer, incluso en pset siete,
son pequeñas cosas estúpidas, como si omitir accidentalmente la coma allí.
Eso va a resultar en el archivo no necesariamente siendo legible.
Si omite accidentalmente cosas como la cotizaciones, 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 que no utiliza ningún JavaScript otra manera,
en pset siete.
>> Correcto.
Así que recuerde esta imagen.
Hablamos, en HTML, que el código podría tener este aspecto.
Este es el HyperText Markup Language [Inaudible] para apenas "hola, mundo".
Pero entonces nos propusimos un tiempo atrás que si ayuda,
es posible que desee comenzar a pensar sobre esto ya como un árbol.
De hecho, la indentación que utilizar sólo por el bien de la legibilidad
o por causa de su estilo la izquierda tipo lata de
traducirse en este árbol, donde tener algún nodo raíz especial que vamos a
genéricamente denominado documento, debajo de la cual es el elemento HTML raíz o etiqueta, HTML,
que luego tiene dos los 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 diciendo eso sí, usted podría tomar este código HTML
y hacer un dibujo como esto, el lado derecho
es un modelo mental agradable porque ahora que tenemos JavaScript, una programación
lenguaje que los navegadores pueden ejecutar e interpretar para usted,
resulta que lo estamos a punto de hacerlo en el código
es empezar a manipular esta estructura de árbol en la memoria.
No tenemos para construir el árbol en memoria.
No tenemos que hacer una especie de estructura de datos y cinco de estilo pset
complejidad.
El navegador, muy bien lo suficiente, al interpretar superior HTML a abajo,
izquierda o derecha, es, literalmente, va a nosotros 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 Apple y otros han hecho por nosotros.
>> Y con JavaScript vamos a ser capaz de controlar y cambiar y hacer
cosas interesantes a ese árbol, de lo contrario conocida
como DOM o Document Object Model.
¿Qué tipo de cosas?
Bueno, resulta que en JavaScript, no hay
esta larga lista de eventos que pueden tener lugar.
Y no hemos usado realmente tan palabra desde la semana cero y pset
cero cuando hablábamos de Scratch.
La mayoría de ustedes probablemente no utilizaron un evento en su proyecto de Scratch.
Pero se puede recordar el simple Marco Polo
ejemplo, donde teníamos dos sprites, uno de ellos dijo, Marco.
El otro de los que luego, al escuchar y oyendo ese evento, dijo Polo.
Si no es así, no dude en mirar hacia atrás que hacia atrás.
>> Pero esto es sólo para decir, y usted puede clase de
inferir a partir de los nombres de éstos cosas, JavaScript, resulta que,
nos va a dar una forma de escuchar para el ratón que va abajo o el ratón subiendo
o ir tecla de abajo o la tecla subir o onselect onsubmit
o onresizing algo.
En otras palabras, cualquier acción física que un ser humano puede tomar con un navegador
lo que hacen todos los días, puede escribir có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 hay aquí, lo que es de allá.
¿Y cómo Google implementar eso?
Bueno, presumiblemente, son usando un par de estos eventos
oyentes, uno que dice, escuche el ratón
down-- así que cuando el usuario físicamente empuja su trackpad o su ratón
abajo.
Y luego estamos buscando algo así como el movimiento
o algún otro evento que nos permite capturar arrastre.
Y de hecho, de arrastre es similar en este dot dot dot lista de posibles opciones.
>> Así que esto va a ser un poderoso manera de empezar a responder al usuario
incluso antes de que él o ella realmente hace clic algo explícita como presentar.
Pero vamos a introducir un par de temas para llegar allí.
Pero primero, vamos a la transición hasta cierto código real.
Así que me voy a ir por delante y abrir dom-0,
que es un ejemplo muy sencillo aquí 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, me tener este símbolo que aparece que dice:
"¡Hola David!"
Así que esto es una especie de como nuestro "hola, mundo"
que hicimos hace un tiempo atrás en C y incluso 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 los mayoría de las características de abuso de la web.
Y, de hecho, de vuelta en los bloqueadores de ventanas emergentes día
se puso de moda, ya que iría a algún website--
tal vez un lugar-- cuestionable que de repente
iniciar salpicando la pantalla con un montón de ventanas emergentes.
Y así esta habilidad para que aparezca ventanas en frente del usuario
no ha sido especialmente bien recibido por la humanidad.
Así que por eso se ve este prevenir cosa,
que sólo hace toda esta cosa fea.
Así que vamos a necesitar un mejor manera de pedir al usuario.
Pero por ahora, que parece funcionar.
Así que sólo intuitivamente, lo que parece estar sucediendo aquí?
Sigo adelante y haga clic en Enviar, y entonces 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 otro URL, como register.php o similares.
>> Pero incluso cuando yo descarto esto haciendo clic en Aceptar,
cuenta de que la URL queda completamente puesto.
Y, de hecho, si estoy un poco escé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 fuente para esto-- permítanme cerrar esta ventana
e ir a la vista de origen.
Interesante.
Parece que hay algo de nuevas etiquetas, entre ellos guión.
Así que vamos a echar un vistazo dentro CS50 IDE 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 como diferente, especialmente si usted nunca ha
escrito ninguna JavaScript ti mismo.
Permítanme desplazo un poco a 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 atributo en la nomenclatura HTML.
Su valor es esta cadena citado aquí.
Y esto se ve un poco extraño a primera vista.
No es HTML.
No es CSS.
Se trata, como puede imaginar, JavaScript.
Así que parece que construye en este página web es una función llamada saludo.
Y estoy infiriendo que acaba porque 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 a ser una función JavaScript.
Entonces vuelvo falsa.
Volveremos a que, en un momento.
Pero donde se define esta función?
Pues déjame desplazarse hacia arriba a la parte superior del archivo.
Y a pesar de que se trata de una línea larga, Es relativamente sencillo.
Permítanme Alejar aquí y centrarse en estas cuatro líneas.
>> Así que en JavaScript, justo como PHP, sólo
digamos, literalmente, la palabra "función" el nombre de la función,
y luego paréntesis con cualquier arguments-- ningún argumento en este caso.
Y no hay tipo de retorno en 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 alerta cuyo único propósito en la vida
es para tirar ese bastante feo mensaje que vimos hace un momento.
>> Ahora bien, esto es una especie de un bocado.
¿Que esta pasando aqui?
Así que vamos a empezar a resaltar 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 diferencia C, no importa en JavaScript
si usted comillas simples o dobles.
Van a ser equivalente.
Y, francamente, es sólo popular en estos días
para los programadores de JavaScript para siempre usar 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 hecho esto antes, ¿qué quiere decir más?
Sí.
Concatenar.
Así lo vimos en PHP.
No es sólo el punto operador 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 era un dolor especial en el cuello,
usted tendría que usar algo así como strcat
después de la asignación de memoria en la pila o el montón.
Había que pasar por el aro só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 aspecto cosa parece ser la siguiente
porque al final de toda 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 claridad cosa 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í la responder a su nombre, ¿verdad?
Así que su nombre apareció en la final resultado. Entonces, ¿qué significa esto?
Bueno, he propuesto anteriormente en que imagen que la llamada de manera que el DOM
tiene este elemento raíz especial camino hasta la parte superior llamado documento.
Y ahora, resulta que eso va ser una variable global especial
en JavaScript, integrado en que es una toda montón de funcionalidades útiles.
Entre la funcionalidad útil es la capacidad para llegar a cualquier nodo descendiente.
Esos cuadrados o rectángulos o elipses son sólo los nodos de un árbol, por así decirlo.
>> Así resulta que construye en Objeto de documento de JavaScript
es una función, también conocida como una método, que llama getElementById.
La sintaxis para llamar una función en JavaScript
que está dentro de un objeto o una variable es simplemente con la notación punto.
Y vimos esto en C lo 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 otro forma 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 nombre para 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 que nodo o lo etiqueta HTML soy yo
va a ser mediante programación mano llamando a document.getElementById?
>> Si exacto.
Voy a conseguir la entrada elemento existe cuyo ID es "nombre".
Así específicamente, puede pensar en esta función,
getElementById, como una manera de dar una 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 esa rectángulo o ese rectángulo
mediante la identificación única que a través de su ID.
>> Ahora, ¿por qué es útil?
Bueno, resulta que que una vez que haya recibido
ese nodo, ese rectángulo de la imagen, ese nodo dentro de ella,
a su vez, tiene un montón de pares clave-valor properties--
o datos, uno de los cuales se llama valor.
Así que, literalmente, es una especie de bocado para explicar todo el asunto.
Pero al final del día, todo esto hace es darle
una cadena que el usuario escribió en de esta manera jerárquica.
Pero no me gusta un par 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, que Tengo dos declaraciones no
separados por punto y coma.
Adivina.
Si me quita return false, lo que que podría suceder, simplemente por instinto?
Lo sentimos, decir de nuevo?
>> Abra un montón de de Windows.
Así que tal vez algo potencialmente al 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 todo cuanto más cerca respuesta aquí,
a pesar de que, a diferencia en 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 cita o el nombre del archivo en sí,
que en este caso sería ser 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 esta ejemplo y la fuerza vuelva a cargarlo.
Y es posible que haya visto yo sugiero esto en CS50 Discuta un montón de veces.
Si hay algo que está siempre actuando funky y el explorador no se comporta como se espera,
muchas veces usted querrá mantener Mayús y haga clic en Actualizar.
Eso obligará a cada archivo para recargar y no utilizar caché local de su navegador
o una copia de modo que ahora, déjame ir adelante y abrir mi inspector, en la ficha Red.
Voy a hacer clic Preservar Iniciar porque
no lo quieren para borrar las filas Una vez que consiga llevado lejos en otro lugar.
>> Déjame ir por delante aquí y Tipo 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 es que queremos hacer, ¿no?
Porque no quiero recargar toda la página.
Yo en cambio quería volver falsa con el fin de cortocircuito
el comportamiento predeterminado del navegador, que era, por supuesto, a presentar la página.
>> Así que echemos un vistazo a una marginalmente mejor ejemplo.
Esta es la versión uno dom.
Y note lo siguiente.
Está bien si no lo asimilo todas las líneas de código.
Pero lo que es fundamentalmente diferente acerca de esta aplicación?
Voy a estipulo que comporta la misma, 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 frote que el camino equivocado, sin embargo,
debe comenzar a la medida ya que, al igual que en HTML,
cuando empezamos a co-mezclan lo con CSS en los atributos de estilo,
que acaba de empezar a ser un poco desordenado o sentir un poco mal.
>> Del mismo modo aquí, si de empezar a tomar el HTML,
y luego de forma automática plop algo de código JavaScript
en el medio de una cadena entre comillas, es no va a ser muy fácil de mantener.
¿Correcto?
Ni siquiera es evidente a primera lugar donde el código JavaScript es.
Así que sería muy agradable ya un principio de mejor diseño,
vamos a mantener nuestra HTML completo separar de nuestra JavaScript.
>> Así que para hacer eso, lo que hemos hecho aquí es la following--
simplemente usamos HTML sólo marcado.
Y así, en versión de uno de esto, todo Lo que tengo es un formulario con un identificador único.
Y luego aquí, estoy aprovechando de una característica especial de JavaScript
por el que puedo tener lo que hay llama una función anónima.
Así que resulta que si yo llamo document.getElementById de 'demostración'
eso es como darme un puntero a este nodo en mi árbol, el elemento de formulario,
por así decirlo.
>> Ahora, sólo sé de sabiendo un poco de HTML
ahora que estamos de haber leído algunas en línea de 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ón que 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 nodo desde el árbol, el elemento de formulario,
y el acceso la llamada de su propiedad onsubmit.
Así que el punto sólo significa esta es una propiedad,
como un valor especial dentro de ella.
¿Y qué tipo de datos soy yo asignar, al parecer,
a onSubmit, que es efectivamente 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 que no le dirá al respecto,
C también tiene punteros de función, los capacidad de pasar y asignar funciones
como propios los valores de las variables.
Y no vamos a retroceder de nuevo a C.
Pero por ahora, resulta que en el lado derecho aquí,
a pesar de que se ve un poco cobarde, este medio, hey navegador,
dame una función.
Yo no me voy a molestar incluso dando un nombre porque estoy literalmente
va a asignar llamémoslo la dirección de esta función
inmediatamente al onSubmit.
En otras palabras, navegador, no es necesario saber lo que esta función se llama.
Usted sólo necesita saber donde está en memoria.
Y así es suficiente sólo para tener un signo igual no
y no molestarse en nombrar a este, al igual que foo o saludar o cualquier otra palabra.
Y ahora esto es sólo una cosa de estilo.
Podía mover este corchete en el-- línea junto sorry--
como solemos hacer CS50.
Pero en JavaScript, es realidad estilísticamente común
sólo para mantener la llave de la primero, en esa primera línea.
>> Pero de aquí en adelante, no hay nada interesante.
Esa llave de apertura justo demarca el inicio de mi función.
La función es ahora idéntica, excepto que he
incluido el falso retorno dentro de esta función.
Porque resulta fuera-- y sólo lo haría
saber esto de la lectura la documentación--
que si la función que se asigna al controlador de onsubmit devuelve false,
el browser conoce y está de acuerdo no 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és la llave de allí sólo
significa que he terminado de definir la función.
Usted sabe cómo llamarlo tan pronto como 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 en la versión dos, que es el last--
y sólo tendremos que echar un vistazo a esto.
A riesgo de hacer lo más feo, resulta
que hay una biblioteca en el mundo llama jQuery.
Y jQuery es un super Biblioteca Popular JavaScript
eso es tan popular que la mayoría cualquier JavaScript-- no es
raro que la gente confunda jQuery con JavaScript.
¿Por qué?
Sí JavaScript tiene muy maneras de hacer las cosas-- detallados
document.getElementById, dadadadadada.
Se termina por tener muy largas 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 contribuido a 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 un proyecto final basado en la web,
esta sería la forma equivalente de la aplicación de esa misma función utilizando
esta biblioteca especial.
>> Ahora, en lugar de tomadura de pelo lo distinguen en su totalidad,
vamos a mirar algunos patrones.
Esta sintaxis parece tener cuántas funciones anónimas
o funciones sin nombre o funciones lambda AKA?
Dos, ¿verdad?
Y sabes que, aunque usted no es súper cómoda con esto,
simplemente por el hecho de que se dice la función () dos veces.
>> Y resulta que lo 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 cuando el documento está listo,
seguir adelante y registrarse la función siguiente
como el controlador de presentar para el HTML elemento 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ás forma prolija de decir return false.
Y mencioné esto sólo porque verá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 demasiado tanto en que la sintaxis,
se hay alguna pregunta sobre estos 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 directorio aquí y abrir, por ejemplo, la forma-0.html.
>> Así que supongo que este es el primer año página de registro deportes intramuros
sin ningún tipo CSS o cualquier sentido del diseño.
Y quiero seguir adelante y registrarse aquí con una contraseña.
Y voy a estar de acuerdo con los términos y las condiciones y haga clic en Registro.
Y ahora el sitio web dice: "Tú eres registrada! (Bueno en realidad no.)"
Eso parece que funcionó, pero déjame ir por delante y la fuerza de recarga.
>> Y déjenme decirles, no, no lo hace necesitan 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 soy un idiota, ahora es el 123 456 789.
Y yo no voy a comprobar su caja.
>> Hmm.
Correcto.
Así que hay varias oportunidades para la mejora aquí.
Y usted sabe, o se verá en pset siete, que se puede escribir code--
y usted tiene que escribir código en PHP-- defender
contra este tipo de usuario errores porque el usuario claramente
no ha cooperado.
Y él o ella no le ha dado toda la Valores que querías o incluso en el formato
que querías.
Por lo que usted ve en pset siete de la sin duda podríamos tener alguna
si las condiciones lo que dicen si la dirección de correo electrónico
no es un username@something.edu, podríamos simplemente
pedir perdón y pedir disculpas al usuario tanto, 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ñas no coinciden como en register.php
para pset siete, se puede detectar que.
Pero eso es un dolor en el cuello que ahora solicitan
nosotros ir todo el camino hasta el servidor.
El usuario es informado del error.
Y por lo menos a menos que utilice algunas técnicas más elegantes,
ahora tienen que hacer clic en la flecha hacia atrás.
¿No sería agradable, como una gran cantidad de sitios web de hoy en día,
si tuvieras más inmediato retroalimentación, al instante?
>> En otras palabras, déjame ir a la versión uno, que va a haber más bonita.
Pero tiene esta característica.
Malan, 12345, 123456789, no va 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 hice detectan 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 los términos y Condiciones.
¿Entonces por qué?
>> Si ya hemos planteamos que hay una manera,
y les hemos requerido en pset siete a detectar el error
condiciones como esta del lado del servidor, ¿por qué habría de hacerlo
molestarse también hacer esto en JavaScript?
¿Qué es un argumento en favor 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á manejando entrada del usuario errónea de que grande,
tal vez es mejor si se ni siquiera llegar a su servidor.
Me gustaría hacer retroceder allí y por 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, es interpretado 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 cualquier pá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 mejor porque un servidor, por supuesto,
solamente tiene una cantidad finita de memoria RAM, un número finito de gigahercios,
un número finito de cosas que puede hacer por unidad de tiempo.
Así que si hay más personas en el mundo golpear a su servidor,
ingresar accidentalmente incorrectamente, del mismo modo que si
puede mantener ese peso de encima su servidor.
Además, especialmente en un móvil device-- Si alguna vez
iniciar sesión en my.harvard o Netid de Yale o similar,
hay esta la latencia con una gran cantidad de sitios 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, especialmente en conexiones de red lentas.
Pero JavaScript, porque que se ejecuta en el cliente
y no tiene que ir y venir a través de una internet potencialmente lenta
conexión, usted puede conseguir retroalimentación casi instantánea.
>> Así que echemos un vistazo a esto.
Permítanme abro forma-0 y mirar el HTML aquí.
Y vamos a ver lo que está pasando.
Esta es una forma cuya la acción es register.php.
Sólo estoy usando conseguir tan que podía ver la URL.
Pero para las contraseñas, seguramente querríamos para cambiar esto para publicar en la realidad.
He aquí un campo de entrada de tipo texto.
Aquí hay otra entrada campo de tipo contraseña.
Aquí es, si usted nunca ha visto, una entrada de casilla tipo.
>> Pero no hay JavaScript aquí en absoluto.
Esto es sólo HTML que va a register.php.
Pero en la versión uno, en el que comenzado a obtener los pop-ups,
vamos a ver lo que realmente sucede aquí.
En la versión uno, lo que Voy a ver-- I
Pensé que podría estancar suficiente con 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 la forma, 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 puedo leer it-- línea 32, que dice,
var form-- así dame una variable llamada formulario.
Y a continuación, obtener document.getElementId de "registro."
¿Que es esto?
Bueno, déjame rebobinar hasta aquí.
Y fíjense, ah, me di el elemento de formulario una idea arbitraria pero descriptivo
de registro.
Así que esto me da una variable que me 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 es presentado, ejecute el siguiente código.
No necesita un nombre, porque ¿por qué necesita saber el nombre?
Usted sólo necesita saber lo que para ejecutar, ergo
es una función anónima o lambda.
Y esa función es todas estas líneas aquí.
Y ahora, para ser honesto, a pesar de que podrí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 "Debe proporcionar su dirección de correo electrónico ".
Porque si form.password.value es 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 entrada campo aquí la contraseña.
Y llamé a este de aquí confirmación.
Podría haber llamado contraseña dos o cualquier otra cosa.
Estoy lógicamente comprobando que estos dos son lo mismo.
Else-- resulta que esto es el Sr. Boole nuevo-- 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á es muy común en JavaScript,
donde usted tiene esta separada por puntos.
Se empieza con un objeto aquí.
Usted sumergirse más profundamente a un a una 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 el humano ha tecleado en realidad.
>> Así, en todos estos casos, yo regresamos falsa.
Pero si no, vuelvo cierto.
Y lo que ahora vemos un uso convincente de cuándo
volverías falso Deje de hacer lo que hace el usuario de
y hacer que él o ella elija de nuevo o escriba de nuevo.
De lo contrario, volvemos cierto.
>> Y permítanme presentarles un solo otra 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 quieran incursionar en esa biblioteca particular.
Pero vamos a start-- y cualquier pregunta?
Permítanme detenerme por momentos debido eso fue rápido y mucho.
>> Pero lo bueno es que todo del 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ólo al punto de partida de, por ejemplo, la semana cero.
Correcto.
Así que algo un poco más interesante?
Bueno, primero que nada, déjame ir por delante y abrir Google Maps.
Y te darás cuenta de que para que un momento, en la segunda división,
darse cuenta de lo que sucede cuando Hago clic suficientemente rápido.
Y esta conexión en Harvard es tan rápido que no te das cuenta que.
Pero, ¿qué tipo de especie de ver si 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 justo antes hice clic y arrastré?
Permítanme tratar aquí-- déjame hacer otra 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 de esta tecnología que se llama AJAX.
Y aquí es donde vamos a empezar a utilizar el código JavaScript en un particular
manera seductora.
De vuelta en el día, no había Este sitio web llamado MapQuest.
Y yo debería haber tomado una captura de pantalla de esto desde la década de 1990,
donde si querías buscar aquí en el mapa,
usted literalmente, haga clic en una flecha en la parte superior que mostró
una plaza diferente del mapa.
Si querías mover hacia la izquierda, se hecho clic una flecha que mostró
una plaza diferente del mapa.
Y algunos sitios web siguen haciendo esto hoy.
Pero incluso MapQuest ha conseguido mejor, como Google Maps.
>> En cambio, lo que es mejor esto días es los sitios web que utilizan AJAX.
AJAX-- conocido como Asynchronous JavaScript y XML,
que es sólo una forma elegante de decir una tecnología o técnica que
permite un navegador usando JavaScript hacer peticiones HTTP adicionales
después de la página se ha cargado.
Entonces, ¿qué significa esto?
Bueno, sería una especie molesto en Gmail
si cada vez que querías para comprobar su correo,
hubieras golpeado literalmente Control-R o Comando-R o haga clic en el botón Actualizar
y toda la página maldito sería recargar.
¿Correcto?
Sería parpadeará blanco probablemente por segundo.
Verá que la barra de progreso estúpido.
Y sólo para ver si usted tiene nueva electró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 en Gmail, lo que sucede en la pantalla?
Esto demuestra, ¿verdad?
Sólo aparece por arte de magia como una nueva fila en la tabla.
Esto implica en realidad una cantidad 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 buscar en el código para ser sure--
probablemente tiene una tabla HTML o tal vez una 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 hay es un árbol en memoria cuando estás
usando Gmail que se ve la clase de tipo de así, cuando se da cuenta de Google, ooh,
Tiene un nuevo correo electrónico, no lo hace quieren reconstruir el árbol entero.
Más bien, quiere encontrar el nodo el á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, donde tuvo que insertar nodos en una tabla hash,
de manera similar hace Google, a través de Código JavaScript que se ha escrito,
travesía este árbol, averiguar dónde es esa parte la bandeja de entrada de la ventana,
y luego insertar una nueva fila.
Y una nueva fila sólo significa un solo o más nuevos nodos en un árbol.
>> Y así AJAX es esta técnica que 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 tiene ha cargado, puede todavía
agarrar más datos del Internet- ya sea
un correo electrónico o una baldosa de un map-- agarrarlo entre bastidores
y luego insertarlo en la página por 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 de un molesto cuentan estos días.
Si me pongo a buscar cats-- este es una especie de una experiencia de usuario horrible.
Simplemente comienza a buscar para mí.
Bueno, ¿qué está haciendo?
La URL no ha cambiado Desde que empecé a escribir.
Pero lo que está pasando a través de la wire-- bien, hmm interesante.
¿Qué está pasando en todo el alambre de aquí sólo se pone más raro.
>> OK.
Así que déjame ir adelante y inspecciono elemento y vaya a la ficha Red
y tratar de hacer de este técnica y menos acerca de los gatos.
Mientras escribo, literalmente, gatos y- lo que está pasando
per-- No voy a hacer clic eso.
Correcto.
Así que aquí, lo que ocurre cada vez que escribo un personaje, por lo visto?
Al igual que, bajo nivel?
¿Qué está pasando con cada uno de los personajes que estoy escribiendo en mi teclado?
¿Sí?
AUDIENCIA: [inaudible].
>> DAVID MALAN: Exactamente.
Cada uno de esos personajes es ir a Google, uno a la vez.
Están construyendo una cadena en su servidor que representa
todo lo que he escrito en hasta el momento.
Y cada vez que escriba otro personaje, que
utilizar su salsa secreta de un buscar algoritmo y averiguar,
Qué quiere decir esta página gato o esta página gato o similar?
Así que, en cierto sentido, me proporciona una mejor experiencia en que yo no hago incluso
deberá completar mi pensamiento.
Y, en efecto, es un útil cosa, autocompletado en general.
Si sus algoritmos son lo suficientemente buenos y si mis búsquedas son bastante obvias,
Yo no tengo que escribir la palabra entera.
Van a decirme lo que es que estoy realmente buscando.
Así que lo que Google llama instantánea búsqueda se acaba usando AJAX,
utilizando el código que les permite solicitar contenido adicional a través de un navegador web
detrás de las escenas que utilizan este nuevo idioma, JavaScript.
Así que tenemos un par de minutos para el final.
Y déjame llamar a mi amigo Colton al escenario,
ya que parecía especialmente divertido última vez
para introducir una tecnología que algunos de ustedes
han expresado su interés por los proyectos finales.
Pensamos que sería divertido para llevar un voluntario, sin embargo, hoy en día
que le muestre una adición a esto que usted-- permite sí,
Vi por primera vez esta mano.
Vamos arriba.
Muy bien hecho.
Buen trabajo.
Voy a proyectar esto en la 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 la medio con Colton aquí.
Qué Colton tiene en sus manos hoy es un mando a distancia.
Así que en lugar de te quedes ahí parado en un mundo tridimensional mirando a su alrededor
como lo hizo Colton, ahora puede Efa realmente caminar subiendo,
abajo, izquierda y derecha como un Mando 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 y cambiar 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 estamos cargando el Oculus,
Supongo operating-- que no opera sistema, pero el programa principal, donde
se puede acceder a todos los juegos y aplicaciones que se encuentran en su biblioteca.
Así que ahora mismo, debe decir toque el panel táctil para empezar.
Touchpad va a ser en el lado derecho de los auriculares.
Así que adelante y tap--
EPT: Oh, hombre.
DAVID MALAN: Sí, ahí lo tienes.
La calidad Efa está viendo es mucho más alta calidad.
Esto es sólo el Wi-Fi aquí.
COLTON: Entonces, ¿qué estás va a querer hacer
es mirar hacia la parte superior derecha de la pantalla.
Sí, ese juego en la parte superior derecha.
Y luego, cuando usted está seleccionando que, toque la pantalla táctil de nuevo.
Creo que sus Dreadhalls.
Y entonces aquí está A-- aquí, y mucho yo 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 controlar a ti mismo con el controlador,
así, tan pronto como sea el 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 puede recoger en un barril en la habitación.
>> EPT: ¿Cómo puedo obtener la mapa 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-- dice mantenga 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 resto para 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 encerrados puerta, usted puede usar eso.
¿Tienes miedo?
>> EPT: Todavía no.
COLTON: OK.
>> Pretend-- sí.
Sólo fingir que eres en realidad allí de pie.
Y si a su vez around-- usted tiene que acostumbrarse a él.
Pero tiene sentido.
DAVID MALAN: Y mientras Efa sigue jugar, 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 ver el próximo miércoles.
¡Gracias a nuestra voluntaria hoy.
[Aplausos]
>> [MÚSICA - "Seinfeld TEMA"]
ALTAVOZ 1: Bueno, estoy poner 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 que hace es que ajusta el color de--