[MÚSICA DE FONDO]
DAVID: Muy bien.
Esto es CS50 e iniciaremos la lección 11, estamos muy cerca del final.
Entre los objetivos de hoy, la siguiente vez y para nuestra lección final
juntos, está unir las cosas que vimos desde la semana cero.
Con esa intención, pensé que podríamos iniciar con el siguiente clip,
tal vez lo recordemos de unas semanas atrás,
en donde tratamos de observar en medios de comunicación populares la percepción
de los espectadores sobre la tecnología, si confían más
en programas como este, en CSI y similares que vemos en la pantalla
aunque técnicamente esto no es muy preciso.
También es maravilloso decirles, que muy recientemente salió Stranger Things 2,
seguramente la mayoría de ustedes sabe a qué me refiero y tal vez
si son como yo la terminaron el sábado, después de que salió el viernes.
Y lo que vimos en la pantalla,
déjenme decirles esto, no es un spoiler,
pero estaba tan orgulloso de esta serie en particular.
Pero antes de que lleguemos allí, les adelantaré
una versión de CS50 de esa misma serie.
Si pudiéramos atenuar las luces.
[REPRODUCCIÓN DEL TEMA STRANGER THINGS]
OK, eso básicamente fue una introducción para lo siguiente,
si nunca hemos visto Stranger Things, o al menos todos los episodios,
y no quiero que todo el Internet me odie,
y mucho menos los que están en esta sala, pero cerremos nuestros ojos brevemente,
en verdad esto no es un spoiler, todo es técnico y no arruina ninguna trama,
aunque a nadie va a importarle en algunas semanas,
así que pensamos que podríamos revelar esto.
Es momento de que pongamos los dedos en nuestros oídos
y cerremos los ojos si no queremos saber más, en algún momento de la presentación,
tenemos esta escena de aquí.
Por supuesto, en cada serie como CSI, La ley y el orden,
y cosas por el estilo, si amplían y mejoran la pantalla,
se vuelve un sinsentido, como un programa de tipo crayón, como lo que vimos en CSI.
Pero estaba tan orgulloso de ver eso que si nos acercamos a esta pantalla,
veremos este código, en un lenguaje llamado Visual Basic.
Y a pesar de que no aprenderemos Visual Basic,
ni muchas personas usan Visual Basic tanto como antes,
¿podemos deducir lo que este programador hacía en la pantalla?
¿Qué parece ocurrir?
PÚBLICO: ¿Es algo como obtener una contraseña de cuatro dígitos o romperla?
DAVID: Sí, fue un programa con el cual
rompieron una contraseña de cuatro dígitos.
Si deducimos todos los bucles en esta estructura,
veremos que hace intentos para obtener un dígito tras otro dígito
tras otro dígito tras otro dígito y prueba con todos ellos,
hasta que finalmente encuentra ese valor y sucede algo interesante.
Ahora, todos lo que tengan los ojos cerrados pueden escuchar esto,
pueden sacar los dedos de sus oídos y continuaremos.
Pero tal vez el primer ejemplo de los medios y un programa reciente
sea lo que funciona en la pantalla.
Hoy veremos nuevamente un modelo que
presentamos hace algún tiempo, el MVC o modelo-vista-controlador, que solo
es una manera elegante para describir un tipo de programación
muy popular en la web, en estos días, con el cual tenemos un controlador, que
es el código que escribimos en Pset 6
y ahora en Pset 7, en application.pi.
El hecho de que se llame application.pi es por una convención en Flask,
pero allí es a donde va toda nuestra lógica.
Como en el código que dirige nuestro sitio web,
¿en cuál carpeta o archivos está lo que conocemos como vistas?
¿Díganlo de nuevo?
PÚBLICO: ¿En HTML?
DAVID: Sí, en el archivo HTML.
En el subdirectorio de formatos, que también es parte de Flask,
tenemos un montón de archivos HTML, que son
las vistas, la estética o la presentación de la información de nuestro
programa.
La semana pasada, al final les presentamos el modelo, la M en MVC,
que representa los datos, a nuestra base de datos,
tal vez sea un archivo csv, api o para obtener cotizaciones de la bolsa,
tal vez es una base de datos continua, en la que almacenemos a los usuarios,
carteras de acciones y más.
Juntas, estas tres entidades conforman
una aplicación bastante interesante, ya sea para Pset 6, Pset 7
o alguna posterior.
Pero hoy, les presentaremos una pieza más y otro lenguaje.
Sé que hemos descubierto bastantes lenguajes hasta ahora,
Scratch, C, Python y SQL, sin mencionar el HTML y el CSS.
Pero hoy, presentaremos el último de nuestros lenguaje en CS50, JavaScript.
Veremos que JavaScript es la última de las tecnologías de apoyo que
nos permitirá construir funciones y herramientas que conocemos muy bien
en estos tiempos, en nuestros teléfonos y laptops.
Pero antes de hacer eso, nos detendremos en
un ejemplo, por medio del cual conectaremos la semana pasada
con esta, en una última mirada al sitio web de Frosh IMs de antaño.
Para continuar ejecutaré este programa de la siguiente manera.
flask run.
Este es froshims4, está disponible en el código de distribución de hoy.
Para continuar, si abro esta URL, es un programa muy simple,
le hare un acercamiento, que le da a los usuarios la habilidad
para registrarse, ver quién se registró y anular su registro ellos mismos.
Si quiero continuar aquí y registrarme,
veré un formulario como este y puedo elegir del menú desplegable
mi dormitorio de Harvard y después registrar mi nombre.
En la primera versión, hace algunas semanas, este programa no hizo nada.
Solamente desechamos la información
entonces hicimos algo un poco más interesante,
guardamos los datos en el correo electrónico de alguien más,
con solo enviarle un correo y añadimos los archivos csv, que no estuvieron mal,
pero ¿cuáles son los inconvenientes de usar solamente archivos de texto csv?
PÚBLICO: Toma mucho tiempo buscarlos.
DAVID: Sí, puede tomar mucho tiempo buscarlos,
porque, en especial, a medida que crecen más y más, lo mejor que podemos hacer
es de tipo lineal,
tenemos que buscar en todo archivo solo para encontrar un valor
porque no existe una estructura en los datos,
son como un arreglo de líneas, por así decirlo, una lista de texto
que tenemos que buscar.
Tampoco tenemos funciones como seleccionar, insertar y eliminar,
estos verbos u operadores que obtuvimos de una base de datos
la semana pasada, que nos permiten trabajar más y más fácilmente, sin tener
que escribir tanto del código.
Podemos únicamente ejecutar un comando de SQL,
como seleccionar, insertar, eliminar, actualizar o algo así.
¿Cómo construimos una pieza como esta?
Bueno, recordemos que si entramos en el código fuente de Frosh IMs 4,
tendríamos algún punto de entrada, como application.pi,
y algunas rutas diferentes.
Esto nos resultaría conocido si nos sumergimos antes en finanzas CS50,
la primera de estas rutas, hasta arriba, renders index. HTML,
allí es donde veo el menú.
Y las posibilidades son, un index. HTML es esa lista con viñetas
de tres opciones, cada una de las cuales enlaza una ruta diferente.
Entonces las rutas comienzan a volverse un poco más interesantes.
En la pantalla aquí, de la línea 13 hacia abajo,
está la lógica, mi código controlador, por así decirlo,
este me permite insertar un usuario en mi base de datos.
¿Y cómo lo hago?
Bueno, en las líneas 15 y 16 hago la siguiente pregunta,
Si el método de solicitudes y que para entrar es get ¿qué es lo que hago?
¿En inglés?
Coloco el formato de registro.
Le muestro al usuario register.HTML, uso
la función render_template, que antes
utilizamos para generar los archivos HTML.
De lo contrario, si el usuario utilizó la publicación, es decir,
al parecer hizo clic en un botón, y lo envió al mismo punto de
término, solo vamos a distinguir el comportamiento.
Si enviaron un formulario
mediante una publicación, seguimos y ejecutamos estas cinco líneas de aquí.
Y esta línea, la 18, si no se solicita, o si no se le solicita el name y el dorm,
esa era una manera de indicar si el usuario olvidó darnos su dormitorio
o su nombre y emite un mensaje de error como este failure.HTML.
De lo contrario, si el usuario nos dio la información,
podemos usar el método de ejecución de CS50 en la variable db que declaramos aquí
podemos insertar en into registrants un name y un dorm, estos dos valores
en específico y recordemos que esta sintaxis con dos puntos es nueva,
en gran parte del mundo de SQLs es una convención
que cuando queremos conectar los valores, en lugar de
usar %s, como en nuestros días en C o de usar las llaves
de nuestros días con Python y los stringf, en su lugar
solo pasamos dos valores por medio de nombres como name y dorm.
Luego, ¿qué pasa aquí, exactamente?
Si entro en este sitio web y registro David
de St. Matthews, hago clic en Register, porque la aplicación se
ejecuta con Flask, me dice que estoy registrado.
¿Cómo puedo demostrarlo?
Bueno, a continuación abriré otra terminal,
entraré en el código fuente de hoy, froshims4 y si luego escribo ls,
noten que esto es lo que conforma esta aplicación.
Uno de estos archivos es froshims.db, si sigo y ejecuto esta herramienta de la
línea de comando, sqlite3 en froshims4.db
Obtuve una interfaz de línea de comando.
Tal vez no estemos cómodos con este enfoque y eso está bien,
pero nos permite hacer cosas muy simples como mostrarme mi esquema
y desde esta interface textual puedo ver cuál es el formato
de esa base de datos, solo tiene una tabla que se llama registrants
y luego, si quisiera ver quién está registrado
tal vez además de mí, ¿qué puedo escribir en esta interfaz de línea de comandos?
¿Qué puedo escribir aquí?
¿Sí?
PÚBLICO: Select * from registrants.
DAVID: Sí, select * from registrants
punto y coma, y ​​veo una tabla que se basa mucho en el texto
que me muestra quién está en la base de datos.
Hasta ahora, solo soy yo.
Podría jugar con esto en la línea de comandos,
como actualizarlo, eliminarlo y demás, pero la clave de la última vez,
fue que una vez que estemos más cómodos con el SQL,
comenzaremos a usar declaraciones en SQL, las ponemos
entre comillas dobles en Python y hacemos que Python ejecute estas consultas
en SQL para nosotros, en nuestra base de datos.
Mientras tanto, démosle un vistazo a otra función aquí.
Antes de registrarme hace un momento, tenía este menú desplegable,
podría haber codificado esto, lo cual sin duda estaría bien.
Pero si quisiera eliminar un usuario y permítanme
mostrarles esto aquí.
Si entro, ¿qué archivos son esos? eso está en mi directorio de formatos.
Si voy a register.HTML aquí, codifiqué
todos esos dormitorios, disponibles para que los estudiantes de Harvard
se registren en ellos.
Pero ¿qué pasa con mi página para anular el registro?
Déjenme regresar, hare clic en anular el registro
y lo que veremos aquí, veo un menú más bonito
que tiene el nombre de la persona, su dormitorio y si se registró.
Pero quiero anular, de alguna manera, el registro del usuario
Bueno, si continúo y envío este formato, ¿cuál valor podría
querer el navegador para enviarlo desde el navegador al servidor?
¿David?
¿Matthews?
¿David from Matthews?
¿Algún otro?
¿Qué dice nuestro instinto cuando enviamos algo desde un formato
a un servidor, cuando quiero hacer algo con esos datos,
como en este caso, como anular el registro del usuario?
¿Qué es lo que piensan?
PÚBLICO: ¿El número ID?
DAVID: Sí, tal vez su número ID.
Pero, ¿por qué?
Tengo esta cadena, David from Matthews, ¿por qué no
envío la cadena, la busco en mi base de datos
y luego elimino a David from Matthews?
PÚBLICO: Podría haber otros David from Matthew.
DAVID: Sí, potencialmente podría haber una equivocación.
Si hay por alguna coincidencia hay un par o más de David from Matthew,
podríamos anular el registro de todos ellos,
de ambos, por muchos que tengamos.
Entonces queremos algo prioritario para identificar a los usuarios.
Y prioritario hace alusión a las claves primarias, que la última vez dijimos,
por lo general, son un número, como el número uno que vimos hace un momento,
cuando miré en el contenido de esta base de datos hace solo un momento,
noten que David sí tenía, tiene un ID único, uno, o al menos
veríamos que es único si añadimos
cada vez más usuarios a la base de datos.
¿Y cómo le hice para generar esto?
Bueno, si voy a unregister. HTML, observen que
tengo que usar algo de otro lenguaje,
no es particularmente un lenguaje elegante, pero se
llama Jinja, el lenguaje de los formatos.
Noten lo que hice aquí,
Este es el formato, unregister.HTML, que el usuario ve
cuando intento anular el registro de alguien.
Tengo un formato cuya acción es unregister, el método aquí es publicarlo,
y luego tengo el menú de selección
porque quiero
dejarle en claro al servidor que el valor va a recibir
se llama ID y que será un número, como uno o dos o tres
y esta es la manera en la que itero ¿sobre qué?
¿Qué es lo que hago en las líneas 6, 8 y 9?
¿Qué es lo que pasa allí en términos del inglés?
PÚBLICO: El número de registrados en SQL.
DAVID: Sí, itero sobre el número de registrados
que tengo en mi base de datos en SQL.
Bueno, parece que solo lo deduzco,
parece que tengo acceso a algunas variables de los registrados,
veremos más de eso después, for registering in registrants,
la sintaxis que vimos antes en Python solo
nos permite iterar sobre las cosas en una lista.
A pesar de que técnicamente esto es Jinja, usa una sintaxis similar.
Pero qué quiero hacer en cada iteración de los bucles for,
mientras itero sobre David, María, Brian y Rob
y quien sea que esté registrado en froshims, para cada uno de los estudiantes
quiero la salida <option value = " "
y esto un poco como un trabalenguas, pero dice
muestra el número ID de los registrados actuales
y las llaves dobles son la manera en que Jinja dice, toma ese valor
e introdúcelo entre esas comillas.
Mientras tanto, recordemos que una opción del menú desplegable
tiene dos partes, su valor y luego la cosa que está
entre su etiqueta abierta la cerrada.
¿qué quiero que el usuario vea aquí? es "registrant.name"
from registrant.dorm
Esta fue una decisión del diseño.
Esa la razón, por esa razón el formato de esta lista
es exactamente así,
esto y esto de tal y tal lugar.
Y la idea clave la cual haremos que suceda
en application.pi, será la siguiente.
Cuando visito "/unregister" mediante "get" que está predeterminado por si visitamos
la URL, noten que ejecuto un SELECT
como el que propusieron hace poco SELECT * FROM registrants.
Pero esta vez, en lugar de solo verlo en la pantalla,
quiero hacer algo con esto.
Así que tomo estos rows que son devueltos desde el método execute
y los paso a este formato,
al que podría nombrar como quisiera.
Podría haberlo nombrado rows, x, y o z.
Pero lo nombré, un poco más conceptualmente,
registrants = rows.
De modo que, básicamente le entrego al formato cada fila de esa tabla o base
de datos.
De esta manera en Pset 7, si aún no lo hicimos,
comenzaremos a construir bases de datos más dinámicas
al igual que sitios web más dinámicos, mediante las entradas del usuario,
guardándolas, como cuando me registré incluso eliminándolas o actualizándolas
para generar los contenidos con la programación.
Esta es la diferencia entre un sitio web estático
donde, si lo notan, cada día se ve igual.
Porque alguien lo escribió, codificó y guardó así para siempre
frente a un sitio web dinámico como Gmail, Facebook y otros similares
que obviamente cambian todo el tiempo y cada vez tienen más contenido.
Y así en el fondo Facebook, Gmail y otras aplicaciones
son bases de datos basadas en SQL, que usan lenguajes
como Python, JavaScript y otras.
Entonces comenzaremos a ver cuáles otras características podemos
añadirle a este tipo de sitios web.
¿Hay alguna pregunta sobre el tipo de modelo para crear una aplicación basada
en la web?
¿Ninguna?
Sí.
PÚBLICO: ¿Cómo le hace un programa para saber si una solicitud fue
enviada por medio de get o de una publicación?
DAVID: Muy buena pregunta.
¿Cómo le hace un programa, application.pi, para saber si una solicitud llegó
por get o una publicación?
¿Dónde se encuentra almacenada o disponible esa información?
¿Alguien lo recuerda?
Siempre olvido traer más de estos accesorios,
pero recordemos ese sobre virtual oh, aquí hay uno más,
recordemos que cuando un navegador envía una solicitud
seguimos el juego al decir, oh bueno, esto
pone una solicitud dentro de este sobre, algo como llévame a la página de inicio
o aquí hay una foto o mi nombre los cuales estoy cargando en el sitio.
Literalmente hay un mensaje aquí, un mensaje en HTTP
que dice las palabras "obtener" o "publicar", como su primera línea.
En el momento en que el servidor ve ese mensaje dentro del tan conocido sobre
sabe si fue obtener o publicar.
Dense cuenta, este soy solo yo siendo un poco ordenado,
pero no hay ninguna razón por la que no podamos definir dos rutas como esta
en Flask podríamos tener una ruta llamada
register_form, cuyo único propósito es que el usuario vea formato de registro
y lo único que haría es mostrar def register_form( ):
y return render_template ("register.html") ¿cierto?
Y asumirá ciegamente que si el usuario visita el formato de registro
llegó allí por medio del get predeterminado
Luego podría ocurrir que ese usuario lo envía a otra parte
si la ruta es actually_register
el método será: method = ["POST"], debemos indicar a POST explícitamente
porque no está predeterminado para nosotros.
Después digo: def actually_register( ).
Aquí podría tener todo el código de mi base de datos
eso supone que solamente si el usuario llegó a este punto final,
envió el formato.
Luego puse allí todo el código relacionado con la base de datos.
Les recuerdo que estoy siendo un poco ordenado o analítico
cuando de diseñar esto se trata,
porque no me gusta la idea de tener
algo como este punto de terminación y esta cosa,
son dos cosas por separado en las cuales pensar
y también lo que ve el usuario no es bonito, es tan lindo como una URL,
no es solamente un /register, lo cual tiene un poco más de sentido.
De esta manera intuitiva lograremos que el usuario esté constantemente
en /register,
pero el sitio web se comporta un poco diferente.
Si la solicitud viene por un GET o mostrarle algo al usuario, sino,
si envió un formato, continuar y hacer lo de la base de datos.
Eso es todo.
Solo es mi manera de compactar dos rutas separadas en una sola
para mantener las cosas estrechamente unidas.
Buena pregunta.
¿Alguna otra pregunta?
Muy bien, hagamos la transición hacia un nuevo mundo, totalmente en JavaScript.
Aun cuando podría sentirse un poco abrumador,
hasta ahora, que ya hemos visto otro lenguaje
darnos cuenta de que los puntos importantes al día de hoy son pocos.
Veremos alguna sintaxis conocida,
pero hay muchas características compartidas como funciones, bucles,
condiciones y variables,
todas ellas están presentes en el mismo lenguaje.
Y sintácticamente, son muy muy similares a C y a Python.
Ese es un punto importante.
Y el segundo será, que nos permite explorar
un tipo diferente de programación.
Porque, consideremos lo que hicimos hasta ahora,
cuando escribimos los programas en C, comenzamos con cosas como #include,
luego tuvimos int, main y todo lo demás,
escribimos nuestros programas de arriba hacia abajo,
los compilamos
y después los ejecutamos.
Y básicamente se ejecutaron, de arriba hacia abajo, por así decirlo.
También comenzamos a hacer eso en Python,
En Pset 6, podemos recordar el programa de comparación o el programa de puntajes,
esos también los escribimos en un código de Python, de arriba hacia abajo,
que luego ejecutó esos programas.
Pero luego comenzamos a hacer algo un poco diferente con Flask,
En Flask, application.pi, si lo ejecutamos de manera secundaria al escribir flask run
¿nos lo permite alguna vez?
No, me refiero a que, vemos algo raro como salida en la pantalla,
como algunas direcciones IP y todas las solicitudes que llegan,
pero básicamente, vemos una línea que nunca se va,
porque está hecho en Flask al igual que cualquier servidor web,
es un bucle infinito,
no es un error,
Es una característica del programa, por la cual, una vez que se ejecuta,
escucha constantemente las solicitudes HTTP.
Cada vez que nuestra aplicación.pi recibe una solicitud HTTP, ¿cómo
sabe qué hacer con ella?
No hay una función main.
Pero si solo espera y espera a que entren las solicitudes,
¿Cómo le hace la application.pi para saber qué hacer y cuándo?
¿Qué ha ocurrido todo este tiempo?
PÚBLICO: Al comparar los puntos de terminación.
DAVID: Sí, así es, simplemente al comparar los puntos de terminación.
En el interior de este sobre que sigo sujetando
está la solicitud para una determinada página.
Es get/register o post/register o algo similar.
Tan pronto como application.pi o específicamente Flask,
el entorno en el que construimos nuestra aplicación, lo nota, oh,
veo /register,
déjame ver si el programador definió una ruta para /register con
nuestra sintaxis "en", @app.route
y luego, oh, esa es la función que supuestamente quiere que llame,
al recibir esa solicitud específica
y la cumple al devolver algún valor.
Pero luego regresará únicamente a escuchar, en este bucle infinito.
Este es un ejemplo de lo que llamamos programación orientada a eventos.
No solo escribimos un programa de arriba hacia abajo que solo comienza y se detiene,
escribimos un programa que siempre se ejecuta, a menos que lo eliminemos
a la fuerza, al presionar Control+c, o reiniciemos el IDE
o algo tan dramático como eso.
De lo contrario, se ejecuta de manera constante.
Pero los eventos que entrarían son la recepción de los mensajes
o solicitudes HTTP como estas.
Asimismo, en un navegador
hay muchísimos tipos de eventos diferentes
que pueden suceder, no en el Internet como tal, pero sí a nivel local, aquí.
Cada vez que hago clic en mi panel táctil o en el mouse, eso es un evento, clic,
cada vez que toco el panel táctil o muevo mi mouse,
eso es un evento, un evento de arrastre o de movimiento del mouse.
Cada vez que hago clic en algún lugar de la pantalla, selecciono algo
desde un menú o uso las teclas de mi teclado, eso es un evento.
Así que lo que haremos hoy será concluir
la última de nuestras interfaces de usuario.
Las últimas semanas nos enfocamos en el servidor,
Hoy y la próxima semana nos enfocaremos en el cliente y el navegador,
al juntarlos tendremos dos piezas del rompecabezas
que se comunicarán entre sí, escucharán la entrada del usuario en el navegador
y harán algo con la entrada del usuario en el servidor.
Hagamos esa transición,
Desde luego comenzamos con Scratch,
hicimos la transición a C, luego a Python y posteriormente a SQL,
el cual fue sintácticamente un poco diferente, sin duda,
pero nos permitió obtener y actualizar los datos.
Pero hoy nos enfocaremos en este, JavaScript.
Técnicamente, ¿cuál es la relación, entre JavaScript, el enfoque de hoy
y el lenguaje que algunos tuvimos que aprender en la preparatoria, en concreto,
llamado Java?
Sí.
PÚBLICO: Es como [INAUDIBLE]
DAVID: ¿Es como cuál?
PÚBLICO: [INAUDIBLE] Es totalmente diferente.
DAVID: Es totalmente diferente, exacto.
En realidad, solo fue una cuestión de marketing,
Java estaba muy de moda en ese momento
y JavaScript era un nuevo lenguaje.
Y oye, ¿por qué no nombramos a nuestro lenguaje después de otra cosa que ya es
bastante popular y apoyamos la tendencia?
Pero no son el mismo lenguaje,
Si conocemos Java, conocemos Java.
Si sabemos JavaScript, sabemos JavaScript.
Son similares sintácticamente,
pero básicamente no hay ninguna relación entre ambos.
JavaScript es un lenguaje, que históricamente
se usó con las limitaciones de un navegador.
Es decir que en nuestra Mac o PC, este lenguaje solo se ejecuta en nuestra Mac o PC
sin embargo, puede usarse y cada vez se usa más
en el servidor, en algo también llamado node.js.
Pero hoy y aquí, nos enfocaremos en su uso dentro del navegador.
Afortunadamente, no es del todo tan diferente de Python o incluso de C.
Aquí hay un fragmento de una función en JavaScript.
¿Qué más conocemos?
Bueno, está la palabra clave function que tenemos en Python,
también hay algunos paréntesis abiertos como en Python
hay listas de argumentos separadas por comas,
como las que tenemos en Python y también en C,
llaves, que tenemos en C, pero no tantas ni de la misma manera en Python.
Parece una especie de combinación de algunas de las funciones
hemos visto hasta ahora.
Las sangrías no son estrictamente importantes.
Ahora que estamos otra vez por nuestra cuenta, tal que un buen estilo
significa que debemos hacer sangrías de manera eficiente y no esperar
a que el traductor nos grite.
Pero noten que esto también es válido en JavaScript.
Pero, ¿qué sucedió?
Antes.
Después.
¿Qué es lo que al parecer falta en la segunda versión?
PÚBLICO: Un nombre.
DAVID: Un nombre.
En JavaScript podemos tener
y es algo muy común el tener funciones anónimas, funciones que
no tienen un nombre de manera explícita o de manera elegante, son funciones lambda.
Y literalmente no tienen un nombre.
Pronto veremos porque son útiles.
Pero noten, que ésta será una característica que técnicamente también
está presente en Java y que puede implementarse de otras formas en C,
pero es un paradigma mucho más común en JavaScript.
Así que pongámonos cómodos con la idea de que nuestras funciones no tengan nombre
y con que también será un punto importante para hoy.
Variables, notaremos esto.
Y tal vez podamos deducir lo que hace esto en inglés, incluso si nunca
antes vimos JavaScript.
¿Qué es lo que hace esto probablemente?
¿Dilo de nuevo?
PÚBLICO: Define una variable.
DAVID: Sí, define una variable llamada i
y la asigna igual a 0.
Por primera vez se lee muy bien.
Establece i es igual a 0.
La declara maravillosamente, porque eso es
exactamente lo que queremos que haga.
¿Qué es lo que le falta a esta línea de código que teníamos en C?
Los tipos de datos.
No se menciona explícitamente a int, float, strings y demás.
JavaScript tiene formatos.
Pero su escritura se parece ligeramente a la de Python,
hay formatos, pero no es necesario que los mencionemos explícitamente,
es muy sensible al contexto,
y básicamente, la computadora averigua cuál
tipo de datos es qué cosa, desde este contexto.
Pero otra vez tendremos expresiones Booleanas,
por ejemplo, la pregunta donde i es menor a 50, o más en general,
es x menor que y, donde cada una de ellas serían las variables.
Aquí está el bucle do while,
si lo extrañamos en Python, bueno, está de regreso en JavaScript.
Y podemos hacer algo aquí.
Otra pequeña cosa que notaremos, ¿capitalizamos
o no capitalizamos "true" en JavaScript?
Al parecer no, basándonos en la inferencia.
Este es el tipo de pequeñas cosas que,
honestamente, podría hacernos tropezar desde el principio
y es normal frustrarse por eso,
pero básicamente no debemos desanimarnos por este tipo de detalles.
Es como si supiéramos dos lenguas romances o dos idiomas asiáticos
y algunas veces confundiéramos un carácter o una palabra,
eso también pasará de manera inevitable en la programación.
Aquí hay un bucle while, también hay bucles while infinitos en JavaScript.
Este es un bucle for.
Noten que son casi idénticos a los que vimos en C,
excepto por la falta de un tipo de datos en específico,
en su lugar, declaro de manera implícita que i será un entero, en este caso.
y esto se pondrá un poco más interesante.
Tenemos una sintaxis similar en Python
y es casi lo mismo en JavaScript.
si queremos iterar sobre los valores de un arreglo,
diremos let value, donde esto puede ser una variable x, y o z,
"of" es una palabra clave que codificaremos en un arreglo
y será algún arreglo en cuestión.
Y veremos, en donde tenemos arreglos
que nos permitan iterar sobre los valores en un arreglo.
JavaScript también tiene algo llamado objeto, sin embargo,
Python también los tiene
y ya los mencionamos un par de veces.
Técnicamente, cuando declaramos la variable db
para usar la biblioteca SQL de CS50, eso es un objeto,
es una variable que es un tipo de objeto.
Así que lo hemos visto.
Pero volveremos a verlos aún más explícitamente en JavaScript,
exactamente para qué sirve un objeto.
Mientras tanto, afortunadamente, tendremos una sintaxis conocida.
Volveremos a nuestros días en C.
Porque "else" e "if" no son una cosa en JavaScript, pero else-if claramente lo es.
De modo que hay un pequeño matiz.
Aquí hay una declaración de arreglos, bastante parecidos a las listas de Python
si lo desean, y déjenme arreglar esto para ser consistente.
Técnicamente var también es una palabra clave,
Pero funciona un poco diferente de let,
Así que definamos esto como: let numbers =
corchetes [ ] y estos números de aquí.
Noten que los corchetes significan que se trata de un arreglo.
Pero en JavaScript, los arreglos pueden cambiar de tamaño,
pueden crecer y reducirse, de manera similar ¿como a qué en Python?
PÚBLICO: Una lista.
DAVID: Una lista.
Y es muy diferente a los arreglos en C. Hay una especie de compensaciones.
Nuevamente, para Google están bien cosas como,
cambiarle el tamaño a los arreglos en JavaScript, si olvidamos estas cosas.
Pero este es el tipo de diferencias, cuando
aprendemos lenguajes nuevos, que eventualmente asimilaremos.
Aquí hay un ejemplo de cómo llamaremos a un objeto alias
un diccionario o dict en Python.
Un diccionario, o más en general, una tabla hash tiene claves y valores,
Y eso es todo.
Podemos tener una estructura más elegante.
Pero a fin de cuentas, solo es un montón de claves y de valores.
Diferentes lenguajes usan una sintaxis distinta para estos, llaves, dos puntos
signos iguales, flechas y demás cosas raras.
Pero la idea es la misma.
Si quiero declarar un "quote" en JavaScript,
como un stock quote para que sea una estructura de datos, como un struct en C,
con tres claves,
name, price y symbol,
los enumero aquí, con dos puntos después de los nombres
luego puse los valores entre comillas si son cadenas, o sin comillas
si no son cadenas, del lado derecho.
En el contexto de CS50 Finance, una aplicación basada en la web
para descargar cotizaciones de la bolsa y más, si
queremos obtener un dato que represente el precio de las acciones de Netflix
puede que el servidor nos devuelva algo
que luzca un poco como esto.
Técnicamente, y no quiero abrumarlos esta vez, técnicamente,
es probable que sea algo que se llama formato JSON, notación de objetos de
JavaScript, formato JSON, que tiene comillas adicionales sobre las cosas,
como aquí.
Veremos que estará en uso en poco tiempo.
Además de eso, además de eso, eso es el tipo de esencia, de sintaxis,
de JavaScript.
Ahora veremos que tiene funciones más poderosas y su paradigma de
programación.
Si conocemos C y si conocemos Python, ya es una especie de
conocimiento, al menos básico, de la sintaxis de JavaScript.
Ahora, solo necesitamos saber cómo, cuándo y dónde usarlo.
Pero de sintaxis, antes de seguir adelante, ¿alguna pregunta?
¿No?
OK.
Para continuar haré lo siguiente.
Entraré al IDE y prepararé un pequeño ejemplo,
para continuar llamaré a dom0.html.
Vimos brevemente este término hace algún tiempo.
DOM se refiere al modelo de objetos de un documento, que
es una forma elegante de decir: el árbol que representa una página web.
Una página web, por supuesto, podría lucir, muy simple, como esta en HTML.
La jerarquía está ahí debido a las etiquetas de apertura y las de cierre.
La sangría está allí solo por mí, el humano,
y se espera que la lectura sea un poco más elegante.
Esta estructura de aquí en HTML, podría implementarse en la memoria
en cualquier lenguaje usando este tipo de estructura de árbol.
Esta estructura de árbol se llama el modelo de objeto del documento.
Es el modelo mental correcto, la manera de pensar acerca de
lo que está por debajo del agua en una página web.
¿Por qué esto es útil?
Todo este tiempo, cuando escribimos páginas web,
en su mayor parte, las hemos escrito HTML o las hemos
escrito en Python, el cual genera HTML.
O eso es lo que ahora hacemos.
¿Y si queremos cambiar una página web después de que el HTML
se escribió o se envió al usuario?
Lo ejecutamos al escribir código Python, pero no tenemos la habilidad de
ejecutar Python en las computadoras de nuestros usuarios o clientes.
Debido a que solo se usa en el servidor.
Envía HTML y CSS, eso es todo.
Perdimos el control sobre la experiencia del usuario.
A menos que, además del HTML y el CSS que enviamos al usuario,
también les enviemos un poco de JavaScript, un programa adicional
escrito en este nuevo lenguaje que al final se ejecuta,
en su Mac o PC después de que dejó nuestro servidor.
Veamos qué significa esto.
Para continuar, prepararé un pequeño ejemplo como este.
dom0.html.
Tendremos nuestro DOCTYPE habitual en la parte superior que dice, hey, aquí
viene el HTML 5.
Aquí está el inicio de mi página web.
Es bueno tener un titular aquí con un título simple como dom0.
El cuerpo de esta página web será bastante sencillo.
Para continuar definiré un formato que tiene un ID único llamado demo, solo
con fines demostrativos.
Dentro de este formato estará una entrada cuya
forma será: <input id="name" placeholder=
el elegante texto gris, será:"Name",
y que será: type="text"/>
Y me daré a mí mismo el botón de enviar:
Aquí tengo, una vez que guardé eso, una página web bastante simple que
solo tiene una forma HTML muy simple.
Para continuar, ejecutaré esto.
Para continuar, haré esto simplemente al servir.
Al hacer clic derecho o control en mi espacio de trabajo y en el servidor,
se verá bastante simple y feo el servidor web, cuyo único propósito en la vida
es servir los archivos HTML que escribí.
A continuación, haré clic en dom0.html.
Este es el archivo muy sencillo, que hice de improviso
Si escribo algo, y presiono enviar, ¿qué
pasará con la información?
En realidad, nada.
No lo conecté a nada.
No tuve una acción, o un atributo de método en el formato.
Todavía no termino de escribir este programa.
¿Qué quiero hacer para que esto suceda?
Para continuar, haré esto.
Primero, proseguiré al titular de mi página web
y en lugar de, solo tener un título, introduciré una nueva etiqueta del script.
como su nombre lo indica, aquí viene un script.
Un script en general es sinónimo de un programa corto similar.
En estos días, los programas en una página web se pueden escribir
prácticamente solo en JavaScript.
De vuelta en el día, nosotros podríamos usar otros lenguajes,
en especial en los navegadores de Microsoft.
Pero en su mayor parte, el mundo solo usa JavaScript en este contexto.
Dentro del script, puedo comenzar a escribir el código.
En particular, puedo hacer algo así: alert ("hello, world");
Alert es bastante patética, pero una utilidad de la función en JavaScript
es que imprimirá una molesta ventana emergente.
A continuación, guardaré la página, regresaré
a mi navegador, lo volveré a cargar, y ahí vamos, mi primer página web
de tipo interactiva.
Hace esto, que en realidad es feo.
Solo dice, hello, world.
Y digo fea porque muestra mi nombre de dominio y mi puerto.
Eso es un poco patético y desordenado.
Al menos, transmito algo de información para el usuario.
Parece que, lo que un navegador hace es,
de hecho, que cuando recibe una solicitud HTTP se envía este archivo.
Y cuando nuestro navegador recibe ese archivo, lo lee de arriba a abajo,
de izquierda a derecha, y lo ejecuta o interpreta cada línea de código.
No solo hace que nos enfrentemos a las cosas de manera audaz, centrada y demás.
En realidad, ejecutará líneas de código dentro de las etiquetas del script.
Ahora, hagamos esto, un poco más interactivo.
En lugar de llamar alerta de esa manera, pongámosla en una función,
Llamémosla: function greet( ).
Aquí están de vuelta mis llaves, como en nuestros días de C.
A continuación, ahora diré: alert ("hello, world");
Si vuelvo a cargar esta página, ¿veré o no la alerta?
PÚBLICO: No la vemos.
DAVID: Probablemente no la vemos, a menos que, por alguna razón,
el navegador ejecute la función greet, de manera automática.
Y no es así,
no lo es.
No hay equivalente de main en JavaScript.
Y ciertamente no significa greet.
No sucede nada,
pero está ahí.
Supongamos que ahora quiero conectar estas cosas de alguna manera.
¿Qué podríamos hacer?
En mi formato, ¿saben qué?, en lugar de enviarlo a algún punto final,
la acción debe ser: action="/register">, o algo parecido,
para continuar, diré esto:
onsubmit="greet( );">
Es un poco desordenado,
y limpiaremos esto.
Pero introduje un nuevo atributo de HTML que literalmente hace lo que dice.
Al enviar este formato, llama a este código, ejecútalo.
Y ese código, que definimos arriba, saludará al usuario.
Veamos.
Déjenme ir a esta página web,
como siempre, volveré a cargar la página para la veamos actualizada.
A continuación, escribiré mi nombre y lo enviaré.
Ahí vamos, hello, world.
Y de repente, la página se restablece.
En realidad, se recargó a sí misma.
Para continuar, limpiaré esto un poco.
Después de llamar a greet, haré: return false;
Porque no tengo ningún lugar al que el nombre de los usuarios pueda ir,
no hay ningún servidor.
Quiero asegurarme de que desactivé la funcionalidad incorporada
a este navegador.
Ahora, cuando escribo mi nombre y hago clic en enviar,
todavía funciona como antes.
Pero, noten que la página web es la misma,
no se recargó,
no me llevó a otro sitio,
solo se quedó ahí.
Ahora, uso el formato HTML como una aplicación local
y no lo conecta con nada en el servidor.
Pero esto es un poco molesto.
Es posible que nos preguntemos, por qué esto hace esto.
La mayoría de los navegadores lo hacen.
Finalmente, esto se volverá un poco desordenado.
Es algo un poco comprometedor con la privacidad de nuestros formatos.
¿Cómo puedo desactivar esta función para que no recuerden los nombres de los
usuarios en los cuadros de texto?
Si nunca lo supieron, simplemente se hace autocompletar = "apagado".
Ya pudieron ver esto en PSet 7,
o en otro lugar en la web, así es como hacemos eso.
Iré directo y volveré a cargar la página.
Noten eso, ¿cómo puedo interactuar con este formato?
Al visitar la página, no puedo escribir mi nombre de manera predeterminada.
¿Por qué?
Eso probablemente no fue bueno para mi teclado.
¿Ustedes que harían, en este caso, para resolver este estúpido problema?
Sí, como hacer clic aquí.
Ahora, esto es un ejemplo, aunque sea pequeño,
de la experiencia del usuario del bueno contra el malo o UX.
Si el único propósito de nuestra página web es que el usuario
escriba su nombre, entonces ¿por qué duplicamos el número de pasos
para que el usuario haga clic primero aquí y después,
el o ella, escriban su nombre?
¿Por qué no centrarse en el texto de manera automática?
Es una operación en un navegador para enfocar un formato de campo.
Entonces, de hecho, si regreso a mi código y agrego
autofocus y solo como un atributo.
No necesita estrictamente un valor entre comillas o con un signo igual.
Ahora, si recargo la página con Comand+r o Ctrl+r, noten que ahora,
el cursor está parpadeando.
El cuadro de texto es azul en Mac OS,
y está listo para tomar mi nombre de inmediato.
Así que, empiecen a pensar en dos de estas pequeñas sutilezas,
no solo técnicamente cómo trabajan, o cómo hacerlos,
también por qué haríamos esto.
Como mi discurso del otro día sobre por qué un sitio web no puede aceptar
números de teléfono en diferentes formatos.
Estas son las pequeñas cosas que comienzan para distinguir buen código de un mal código.
El enfoque también tiene otro detalle.
Si presiono tab, es muy común, especialmente en Mac OS,
es muy obvio, donde las cosas comienzan a destacarse en azul.
Podemos presionar tab alrededor de la interfaz del usuario
que es importante, en especial, para la accesibilidad.
Si alguien usa un lector de pantalla porque el usuario no puede
ver las palabras en la pantalla, y mucho menos la interfaz,
usando tab y un lector de pantalla puede que le digan lo que está en la pantalla.
A ese resaltado, se le denomina foco,
tiene un verdadero valor funcional, tal que
conoce exactamente lo que sucederá si comienza a interactuar con el sitio web.
¿Se hará clic en el botón?
¿El texto terminará en la caja?
Depende de lo que tenga enfoque.
Solo una cosa tendría enfoque a la vez, por esos cuadros azules.
De acuerdo, con lo que se dijo, esto no es tan elegante en este momento.
No soy del tipo que practique lo que pregoné
por tanto tiempo sobre combinar un lenguaje dentro de otro.
Empezamos a bajar este camino hace algún tiempo.
Empecé a poner CSS en mis atributos de estilo.
Y luego lo puse aquí.
Finalmente, lo saqué de ahí y lo puse en un archivo separado.
Así que aquí también, estaremos en esa misma trayectoria.
Haré las cosas un poco diferentes, como se indica a continuación.
Al poner el código dentro de las etiquetas de un script como este,
no es necesaria la mejor práctica.
Podemos, porque se requiere hacer esto.
Esta es la parte más fea del código.
Puede ser que ahora no sea obvio,
pero no se recomienda, poner comillas dentro del código en HTML.
Porque una vez más, tenemos un lenguaje dentro de otro,
y no es obvio lo que esta página hará
cuando se mire a primera vista.
Si estamos colaborando con alguien, tal vez estamos
de frente al diseñador de la interfaz del usuario.
Y somos muy buenos con el diseño y el arte,
entonces haremos la interfaz.
Y alguien más escribe el código y la lógica,
porque les gusta más hacer las funciones auxiliares.
No es posible que nos ocupemos en ambos eficazmente, si todo nuestro trabajo
se mezcla en el mismo archivo.
Lo que queremos es sacar esto de ahí.
Entonces, ¿cómo damos un paso hacia eso?
Para continuar, crearé un archivo nuevo
al que llamaré dom1.html.
Iniciaré en el mismo lugar,
pero continuaré al hacer esto.
Me desharé de este controlador de eventos,
y dejaré de usar ese atributo por completo.
También, proseguiré al hacer esto.
Me desharé de mi código de saludo.
Continuaré y me desharé de esta etiqueta del script.
Por ahora, temporalmente,
pondré el script en la parte inferior de la página por razones que pronto veremos.
En la parte inferior de la página, podría hacer: alert ("hello, world");
Desde luego, recrea el mismo problema que antes.
No quiero que ocurra siempre.
Quiero que suceda solo cuando se envía el formato.
¿Cómo haría eso si trato de evitar este desorden, esta mezcla
de código y HTML?
Bien, hay una manera de decirle al navegador
haz algo cuando algo suceda.
En específico, puedo hacer esto: document.
Y el documento será una variable global especial que
se refiere a mi página web, el documento que escribo actualmente.
document.getElementById (), que es una función larga cuyo nombre
existe en JavaScript.
Noten que las letras E, B e I están en mayúscula,
pero la g inicial es minúscula.
Esto es convencional.
En muchos lenguajes, no utilizamos mayúsculas
en la primera letra de nuestra función, pero
después de cada palabra pondremos una mayúscula.
Es algo llamado letra de camello, que es como subir y bajar
subir y bajar.
Porque, es un poco más legible que todas las letras sean minúsculas
y ciertas letras sean mayúsculas.
¿Qué ID quiero obtener?
A continuación, obtendré la ID: demo.
Veremos qué eso significa, en un momento.
Registraré un gestor de eventos de la siguiente manera.
Terminaremos esta idea en un momento.
¿De dónde proviene demo?
¿Dónde vimos eso antes?
Sí, en algunas líneas antes.
Acabo de dar mi manera arbitraria, pero muy particular, de la ID de demo.
La pude llamar de cualquier manera.
También, pude hacer esto de diferentes maneras.
Pero esto es muy explícito.
Inclusive, si nunca hemos visto JavaScript antes,
podemos comenzar a inferir que esto dice: hey documento, hey página web,
dame el elemento ById("demo").
De una manera u otra, esta es una función que
tomará de la memoria del navegador el cuadrado o el rectángulo
que dibujé antes.
La razón por la que DOM o el objeto modelo del documento es interesante,
es que teóricamente con: document.getElementById,
tenemos la capacidad de tomar uno de estos nodos en el árbol
o una de estas estructuras de datos en la memoria y hacer algo con eso.
Ahora, ¿qué haremos?
Estamos a punto de ver.
Cuando tengo acceso a este formato,
sucede que los formatos, para el manual para HTML, por así decirlo,
tienen diferentes gestores de eventos en el envío,
tal vez hacer clic, mover el mouse, arrastrar el mouse,
depende del elemento.
Pero los formatos pueden, desde luego, enviarse.
Así que, al decir: .onsubmit, es el equivalente de decir: call this
function.
Esto es un pseudocódigo,
necesito darle una función.
Puedo hacer esto en un par de formas,
puedo hacerlo así.
Así que, function greet es una función que solo dice, hello, world.
En este punto de la historia, definí una función aquí
y le di un nombre.
Aquí dice: en envío del formato demo, llame a esta función.
Pero, notemos la diferencia,
es sutil.
No hice esto, que es lo normal.
En cambio, hice esto.
Por qué, aunque sutil, ¿es probable que sea importante
que omitamos el paréntesis?
¿Qué es lo que piensan sobre esto?
PÚBLICO: Porque no acepta cualquier argumento.
DAVID: No acepta cualquier argumento.
Eso es cierto, pero no es la razón para hacer esto.
Buena idea, sin embargo.
Sí.
PÚBLICO: Tal vez nadie puede cambiarlo.
DAVID: Nadie puede cambiarlo. No, también ahí.
Creo que cualquiera que tenga acceso al archivo sin duda puede cambiar mi código.
No es eso.
PÚBLICO: ¿Por qué tratas de enviarlo a la salida?
DAVID: Muy cerca.
Trato de enviarlo a la salida.
No del todo, pero creo estamos en el camino correcto.
PÚBLICO: Entonces, no lo quieres llamar de inmediato.
DAVID: Sí.
Para que no lo llame de inmediato.
Desde la semana uno de CS50, cada vez que vimos el nombre de una función,
seguido de abrir y cerrar paréntesis, tal vez con algunos argumentos dentro,
significó llamar a esta función y tal vez pasar en estos inputs.
Eso no es lo que quiero en esta línea de código.
En esta línea de código, queremos que el navegador sepa qué función llamar,
no llamarla en ese mismo momento.
No queremos que esa función sea llamada
tan pronto como tomemos esta línea de código.
Porque de lo contrario, veremos la alerta, no importa qué,
en el momento en que el navegador lea esa línea de código en la pantalla.
En cambio, solo queremos decirle al navegador, hey,
para que lo sepas en el futuro, cuando se envíe el formato,
aquí está solo el nombre de la funcionar que llamarás.
Pero no la llames ahora.
Entonces, esa estúpida y simple diferencia, hace toda la diferencia
funcionalmente, en este caso.
Proseguiré a deshacerme de esto,
y abandonar el programa de la siguiente manera.
Regresaré a la página web, volveré a cargarla y haré clic en enviar.
Y vemos, hello, world.
La funcionalidad realmente no cambió.
Pero al menos, progresamos un poco.
No hice tanto como sería lo ideal.
Creo que sería mucho mejor hacer dos cosas.
Una, esto es un poco patética.
Definí una función llamada saludar (greet).
Después, usé el nombre de la función en un solo lugar.
Lo que sugiere que nunca necesité esta palabra greet en el primer lugar.
Lo sabemos, está bien,
está claro,
es correcto.
Sabemos que yo recuerdo de antes
que JavaScript admite funciones anónimas, que no tienen nombres.
¿Cómo podría hacer esto?
Bueno, podemos hacerlo de una sola vez.
Para continuar, cortaré, pegaré y me desharé del exceso de espacio en blanco,
ahora, me desharé de la función greet, y solo haré esto.
Solo por claridad, pondré la llave en la misma línea,
a pesar de que estrictamente no importa.
Esto sería estilísticamente más común.
¿Que estoy haciendo?
Ahora esto dice, hey JavaScript, obtén el elemento
llamado demo o con una ID de demo y cuando se envíe,
llama a esta función.
Aquí hay una diferencia sutil, de nuevo.
Abre y cierra paréntesis, lo que no significa llamar a la función.
Inmediatamente le siguen las llaves, lo que significa que
viene el código que se debe ejecutar cuando se llama a esta función.
Termina con un punto y coma, no porque las funciones, por sí mismas
necesiten terminar con punto y coma, todo esto es una larga línea de código
a la que le puse sangría.
Porque estamos declarando una función y asignándolo de derecha a
a la izquierda a la vez.
Aquí hay un enorme trabalenguas.
De nuevo, ninguna de las ideas son nuevas, excepto por el hecho
de que funciones pueden ser anónimas, sin nombre.
Podemos pasar funciones alrededor, y llamarlas más tarde.
¿Alguna pregunta sobre esto?
Sí.
PÚBLICO: Entonces, ¿puedes eliminar funciones, y en su lugar
solo poner: = alert ("hello, world")?
DAVID: Buena pregunta.
¿Puedo deshacerme de la función y simplemente hacer esto?
Respuesta corta, no.
Porque, si hago esto, esto será igual que en C,
llamará a esta función, que visualizará esa alert.
Después, asignará el valor de retorno de esa función, que yo no
creo que tenga en absoluto, para enviar.
Esto llama a la función, asigna su valor de retorno,
que técnicamente no está definida, a esto.
Entonces, nada sucederá si posteriormente se hace clic en enviar.
Será llamado prematuramente.
La manera de evitar esto es, de nuevo, definir una función,
y luego solo pasar por su nombre.
O declararla de manera anónima, por así decirlo, como esta.
Para que solo se le diga al navegador, en enviar,
llama a este fragmento de código en entre llaves.
Eso es todo.
OK.
Este todavía es el tonto demo,
porque continua diciendo: hello, world.
Sin embargo, tengo un formato con el cual el usuario puede escribir su nombre.
Entonces, ¿cómo consigo ese valor?
Bueno, en realidad, aquí es bastante sencillo, potencialmente.
A continuación, haré esto.
Hello, quiero que diga David, si soy yo el que escribe mi nombre.
Desde luego, yo no quiero codificar eso.
Quiero, de alguna manera, obtener el nombre del usuario e introducirlo aquí.
¿Cómo puedo hacer eso?
Puedo decir: let name = document.
Solo para que veamos a dónde irá esto: getElementById, tal vez el name.
Porque, tengo otra ID.
Recuerden, tenía la expectativa de escribir antes esa línea de código.
Obtenga el nombre del usuario.
Nosotros solo sabemos esto porque lo vimos antes, en línea,
o en el curso, .value me dará el texto que el usuario tecleó, y después
punto y coma.
Ahora, al igual que en C y en Python,
No quiero hacer esto.
Porque eso dirá, hello, name.
Quiero introducirlo.
Puedo hacer esto de varias maneras.
Quizás la más evidente es esta.
Aquellos de ustedes que tomaron APCS o similares
podrían saber qué más significa en Java.
Esto es solo una coincidencia, que también funciona aquí.
¿Qué es lo que significa el signo de más, en sistemas, además de sumar?
PÚBLICO: Concatenación.
DAVID: Concatenación.
En C, esto pudo ser un dolor en el cuello.
En C, esto es donde tenemos que sacar de repente
como malloc, o algunos grandes arreglos en los estantes
y como introducen un nombre dentro de otro.
En Python, también podemos concatenar cosas usando el signo de más.
O podemos usar f-strings o cadenas de formato.
En JavaScript, podemos hacer signos de más como este.
Esto concatenará "hello" con la palabra name y lo imprimirá.
Veamos lo qué sucede.
Si no cometí algún error, cuando recargue esta página, escriba mi nombre
y haga clic en enviar, hmm, ¿qué hice mal?
¿Qué es eso?
Olvidé refrescarlo.
Me acabo de dar cuenta de que también olvidé cambiar la URL.
Ahora estamos en demo1.html.
Recargaremos, David, enviar.
Y ahí tenemos a David.
Y solo por si acaso, escribiré María, enviar.
Parece ser que cambió dinámicamente.
Esa es una buena mejora, ahora que hicimos eso.
¿Estrictamente necesitamos esta variable?
No, pero si tenemos esta variable, notemos que también podemos hacer esto.
Solo vimos esto, en JavaScript, para bien o para mal,
tenemos esto llamado comillas invertidas, que son la clave en un teclado de EE. UU
en general está en la parte superior izquierda, debajo de la tecla Esc.
Si tengo acentos graves, ¿adivinen qué?
Podemos hacer esto, que es más feo que las f-strings de Python,
pero hace exactamente lo mismo.
De nuevo, este es el tipo de cosas donde
comenzaremos a entornar los ojos como aspirantes a programadores.
Donde, si un lenguaje hace algo un poco diferente, solo
tenemos que recordar constantemente, es la misma idea,
es exactamente la misma idea,
solo es una sintaxis diferente.
Esto introduciría el nombre en esos acentos graves.
Esto es llamado formato en JavaScript.
Muy bien.
¿Alguna pregunta sobre eso hasta ahora?
Está bien, presentaré un último adelanto, como el siguiente.
Para continuar hoy, entraré en nuestro código de distribución
y abriré, digamos, en source 11, este directorio de aquí.
En un momento, veremos todos los archivos de aquí
y mostraré un par de ejemplos.
Uno es muy común, desde luego, para tener formatos basados ​​en la web
donde el usuario puede o no puede darnos,
lo que queremos que escriba.
Es bueno validar su entrada,
como lo hicimos en el servidor.
Si validamos la entrada del usuario y nos aseguramos de
que nos dieron un correo electrónico y dos contraseñas iguales
y verificó nuestros términos y condiciones de casilla de verificación y demás,
podemos hacer todo eso en Python.
Vimos cómo hacer eso en application.pi.
Es una mejor experiencia de usuario, UX, si
el usuario más inmediato da comentarios, tal vez comentarios más bonitos,
usa algunos colores y los destaca en la pantalla
llama nuestra atención a lo que está mal.
Con JavaScript, nosotros tenemos esa capacidad.
Además, en JavaScript, tenemos el capacidad para hacer algo como esto.
Si ejecuto el servidor web en el código de distribución de hoy
y abro esta URL, veré una lista de nuevo.
Proseguiré, subiré a donde dice ajax1.html.
Aquí tengo un formato web muy simple, no es diferente
en espíritu a lo que tenemos en finanzas de CS50.
Pero, si quiero ver cuál es la cotización de las acciones de Netflix,
Puedo escribir, después oprimo get quote, y lo obtengo solo para el cliente.
No lo necesito enviar a otra ruta.
No necesito usar Python, que parece interpretar un formato.
Puedo interactuar directamente con el formato y hacer esto.
Por último, solo un adelanto, podemos hacer algo como esto por lo cual,
si en realidad,
diablos, si en realidad configuramos las cosas correctamente,
nosotros mismos podemos conseguir un mapa completo usando JavaScript.
Al final, podamos usar JavaScript y comencemos
a hacer aplicaciones interactivas como esta,
que usen la API de Google Maps para que el usuario haga clic y arrastre
e interactúe con ella.
Al hacer clic en, por decir algo, Stanford, California,
y ver lo que pasa en las noticias en Stanford, California ahora mismo,
al escribir el código que se ejecuta en el navegador, que habla con otro servidor,
recupera los datos y los interpreta.
Comenzamos la introducción de JavaScript, para ver
la sintaxis con la que podemos hacer esto.
Tomemos nuestros 5 minutos de descanso y después
comenzaremos a construir algunas de estas cosas para ver cómo interactúan.
Muy bien.
Muy bien, estamos de vuelta.
Recordemos que el formato que creamos hace un momento solo se ve así.
Es el bastante simple, feo HTML.
No hay CSS.
Aquí, nos enfocamos en la funcionalidad.
Les di un enfoque automático hacia el campo del correo electrónico,
comenzaré a iniciar sesión de inmediato.
Quiero llevar a cabo este comportamiento.
Saben que, yo no quiero cooperar.
Solo quiero registrarme y miren lo que sucede.
Quiero validar este formato.
Aquí hay una manera.
Parece que usa el método de alerta y dice correo electrónico perdido.
No permito que el usuario se registre.
OK, cooperaré un poco, malan@harvard.edu, registrarse.
Ahora dice, falta la contraseña.
A continuación, le daré una contraseña.
Uno, dos, tres, cuatro, cinco, registrarse.
Las contraseñas no coinciden.
Desde luego que no,
porque no la escribí.
Uno, dos, tres, cuatro, cinco, registrarse.
Las contraseñas aún no coinciden porque accidentalmente escribí seis.
Registrarse, casilla de verificación está sin marcar, y así sucesivamente.
Una vez que verifique la casilla y haga clic en registrarse,
Quiero que el formato pase al servidor.
¿Cómo comenzamos a imponer ese tipo de lógica?
Podríamos hacer lo que hacen en CS50 Finance, mediante el cual
verifican el servidor y se aseguran que el usuario les dio
correo electrónico, contraseña, confirmación y casilla de verificación.
Si no, se muestran con ellos como el gato gruñón y
se quejan de que no cooperaron.
Eso es todo lindo la primera vez,
pero no es la mejor experiencia de usuario.
Porque ahora el usuario tiene que hacer clic en el botón Atrás
y tiene que rellenar el formato y hacerlo de nuevo.
Sería bueno obtener comentarios más inmediatos
como los que llegan aquí.
Y no necesariamente tan fea como esta retroalimentación,
porque, yo diría, que esta alerta es solo para depuración.
Pero, al menos es rápida,
y no nos molestamos de hablar con el servidor.
Aquí está el HTML con el que podríamos crear ese formato.
Para la mayor parte de esto, está el cortador de galletas,
deshabilité la función de autocompletar, porque estaba demasiado celoso de ella.
No es estrictamente necesaria para contraseñas.
Porque los navegadores no hacen esto de manera predeterminada.
Solo quiero que se vea como este, que es incluso más pequeño.
Tengo un campo llamado email con formato text.
Tengo otro campo llamado password con formato password.
Tengo otro campo llamado confirmation también con formato password.
Tengo una entrada de formato checkbox llamada agreement
seguido por el botón de submit.
Eso es todo.
¿Cómo comienzo a implementar algo de la lógica que acabamos de ver?
Bien, haré esto.
Aquí en la etiqueta del script, eventualmente
factorizaremos esto a otro archivo,
por aquí, haré esto.
Declararé una variable llamada form y
y obtendré por medio de: document.getElementById ("registration").
¿Por qué eso?
Bueno, noten que di un ID único a mi formato de registro
solo porque quiero acceder a él, como aquí.
Sé que los formatos tienen gestores de envío, puedo continuar y decir,
hey navegador, en el envío de este formato, ve directo y llama
la siguiente función, aunque sea una función anónima.
Todo lo que me queda por hacer es implementar esta función anónima.
Que es lo que quiero hacer cuando el usuario haga clic en el botón enviar.
Quiero validar su entrada de alguna manera.
Así que, lo haré de esta manera lógica.
Si este formato del campo email tiene un valor de formato del usuario que
solo es igual a apertura y cierre de comillas, para continuar
alertaré al usuario al decir: alert("missing email");
a continuación devolveré falso.
Porque eso es todo.
No devolveré cierto.
Devolver verdadero, significaría que el usuario enviara el formato.
Devolver falso, significaría que se detendría el envío del formato.
El usuario lo intentará de nuevo.
Hagamos esto ahora para contraseñas.
¿Qué tal si decimos? else if (form.password.value == "")
para continuar, alertaré al usuario
alert("missing password"); return false;
Lo que sigue es un poco más interesante,
porque ahora puedo decir: else if (form.password.value)
¿Qué es lo que quiero decir aquí de manera lógica?
PÚBLICO: .length
DAVID: .lenght, podría hacer eso.
Esa no es una pista que vimos y que tengo en la interfaz de usuario.
PÚBLICO: ¿Nos encontraremos con algún tipo de confirmación?
DAVID: La confirmación, sí.
Resulta que la sintaxis es la misma que en C,
!= form.confirmation.value
A continuación diré, creo que dije,
passwords, qué dije, alert ("passwords don´t match");
y también: return false;
La casilla de verificación es un poco diferente.
Puedo decir: else if (! form.agreement.checked)
Eso es un booleano asociado a una casilla de verificación.
Solo podríamos saber esto por la documentación de JavaScript.
Pero no lo invierte.
Si no está marcado, alertaré al usuario
alert ("checkbox unchecked"); return false;
Si ninguna de esas condiciones se aplican y lo hacemos
a través de este guantelete de verificaciones de error,
Probablemente, ¿qué querré hacer aquí?
¿Qué quiero devolver?
PÚBLICO: Devolver cierto.
DAVID: Sí, devuelve cierto.
Eso significa, hey navegador, haz lo que quieras hacer de manera predeterminada.
Terminé la verificación de errores del usuario.
Hay algunas oportunidades para el refinamiento aquí.
Podría decir, no necesito compararlo contra la cadena vacía.
Podría decir, si no hay un valor, lo cual es un poco más ajustado.
Y puedo decir, si no hay una contraseña,
podría limpiarlo de esa manera.
Podría usar la cadena length, que es una cosa.
Podría decir algo, si quisiera ser quisquilloso,
else if (form.password.value.length < 8) caracteres,
Puedo decir algo como: alert ("password too short");
lo que sería una verificación agradable: return false;
Si quiero estar seguro, me aseguraré de que el usuario tenga un estilo aleatorio
que busque la contraseña, tal vez con algunos números o caracteres especiales
o algunas de esas, un tanto molestas, pero posiblemente buenas restricciones,
a menos que usemos un gestor de contraseñas.
Así es como exactamente lo hacen los sitios web.
Pero todavía hay una oportunidad de mejorar aquí en un par de maneras.
Este código está, otra vez, mezclado con mi HTML.
Esto es fácil de arreglar.
A continuación, copiaré todo este código o resaltaré todo este código,
que hace un momento escribimos, lo cortaré y
me desharé del conjunto de etiquetas del script.
En cambio, en la cabeza de mi página web, donde previamente
pusimos títulos y quizás algunas etiquetas de estilo o longitud de CSS,
Proseguiré a decir: <script src= de la fuente que
será: "form1.js" para JavaScript.
A pesar de esto, se ve un poco raro,
esta es la manera correcta de hacerlo.
Se abre y se cierra una etiqueta cercana.
No es válido, por razones tontas, para hacer esto.
Aunque este tipo de cosas no tienen sentido, haremos esto de cualquier manera.
Así es el mundo.
Iré directo a crear otro archivo, pegaré el mismo código que acabo de escribir.
Para continuar, quitaré la sangría solo para mantener las cosas más limpias.
En realidad, no tiene la sangría de la manera correcta.
Hagamos esto una vez más.
Guardaré esto como: form1.js, save.
Y ahora tengo una mejor versión de esto.
¿Qué es lo que hará el navegador?
Al igual que, cuando usamos imágenes en nuestras páginas web anteriores,
como el gato, que hace referencia a: image source = " ",
así que, tenemos a: <script src=" ", que aquí tiene algo entre comillas.
Ahora, cuando un usuario visita esta página, form1.html,
el navegador lo leerá de la parte superior a la inferior, de izquierda a derecha.
No verá a cualquier JavaScript real.
Así que, nada lo ejecutará de inmediato.
Pero, veremos este otro archivo.
Será recursivo, si quieren
descargar ese archivo para que la página web tenga acceso a todo el código allí.
Ese sería un refinamiento.
Ahora volviendo a lo que, yo diría, es un mejor diseño.
Pero, hay otra manera de hacerlo.
Abriré una versión prefabricada de esto.
Algunas cosas en JavaScript pueden ser bastante tediosas.
Porque desde el principio el lenguaje, era bastante inmaduro.
La gente trató de conseguir hacer cosas que simplemente no eran
muy fáciles de hacer en el lenguaje.
Así surgieron las bibliotecas populares, como también fue el caso en Python.
Aquí tenemos un ejemplo llamado form2.html
que en realidad usa una biblioteca que, por algún tiempo,
fue una de las más grandes y populares llamadas jQuery.
JQuery no es un lenguaje en sí mismo.
Es solo un código que un grupo de gente agradable
escribió para que, en ciertas cosas, JavaScript fuera más fácil de usar
El precio que pagamos por esa facilidad de uso es que algunas cosas
tienen una sintaxis de aspecto extraño.
No nos ocuparemos mucho en la sintaxis de jQuery.
Pero jQuery es la biblioteca para JavaScript que usa Bootstrap.
Quizás recordemos Bootstrap de las últimas dos semanas.
Cada vez que creamos sitios web más bonitos de lo que soy capaz, cuando
tienen buenos formatos y todo tiene una codificación de color agradable
y cambian muy bien de tamaño, eso es porque
usamos la biblioteca de Bootstrap de CSS, que también
vienen con algunas funciones interactivas de JavaScript que
requiere que también jQuery esté vinculado a su página web.
Es por eso que lo usaremos, así como para ver lo siguiente.
Aquí hay otra implementación del mismo programa entre las
etiquetas del script, por ahora, dentro de mi cabeza.
Pero hice un par de cosas diferentes.
Esta línea de código es quizás la que más raro luce a primera vista,
en parte, debido a este signo de dólar.
Hace un momento, vimos un signo de dólar dentro de esas cadenas
con las comillas invertidas.
Esto significa algo diferente.
Tan pronto como importe este archivo, que es la última versión de jQuery,
que se alojó en otra parte, no en mi propio IDE,
nos da acceso a una variable global llamada jQuery,
deletreada como tal.
Hace tiempo, sin embargo, las personas que escribieron jQuery
decidieron que era un poco tedioso si cada vez que los usuarios en el mundo
que quieran usar nuestra biblioteca, escriban esta palabra larga jQuery.
Así que, crearon un alias para ello llamado signo de dólar.
Y extrañamente, los signos de dólar en JavaScript y otros signos de puntuación
legitiman las funciones para usarlas en los nombres de las variables.
Esto no es cierto en C, tampoco es cierto en Python.
Pero es cierto, en JavaScript aunque que esto nos parece raro a todos,
al menos, en relación con las letras del alfabeto, es un símbolo válido.
Pudo ser fu, bar, x o y.
jQuery llegó primero, y lo reclamó para el mundo,
usaremos el signo de dólar para todas nuestras funciones.
Eso es todo lo que significa.
¿Qué hacen éstas funciones por nosotros?
Esto es un trabalenguas.
Veremos si es posible analizar lo que pasa.
El documento está en nuestras propias palabras ¿en las palabras de alguien más?
Sí.
PÚBLICO: la página web.
DAVID: La página web.
Es una variable global que se refiere a la misma página web que vemos.
Ese es el llamado documento.
Esta sintaxis, signo de dólar, abrir y cerrar paréntesis,
es la manera en la que jQuery envuelve el documento
con alguna funcionalidad adicional.
El navegador nos da esta variable global (document).
Y obtiene alguna funcionalidad construida, como getElementById.
También hay otras cosas,
pero no las analizaremos en detalle.
Estos signos: $( ), toman la variable global
y agrega aún más funcionalidad
porque lo hace aún más fácil de usar para nosotros los humanos.
Una de las piezas que nos da funcionalidad es esta función llamada ready.
La función ready, es un poco inusual, pero similar a lo que acabamos de ver,
toma un argumento como su entrada,
y ese argumento es una función.
La función se debería llamar cuando el documento está listo.
Eso es.
Porque las páginas web pueden ser bastante grandes, ¿cierto?
Nosotros vamos a cnn.com, Google noticias, Facebook o Gmail,
toma un cierto número de milisegundos o, a veces, incluso segundos
para que finalmente cargue toda la página
y ver la totalidad de la página web.
Eso significa que la página web está lista, una vez que vemos todo en ella.
La manera de decir, por medio de un programa, hola navegador,
ejecuta el siguiente código cuando el documento esté listo,
es con una línea de código como esta.
Está bien si tenemos que copiar y pegar eso hasta que se hunda,
pero eso es todo lo que dice.
Agregue alguna funcionalidad al documento, como esta habilidad de
esperar hasta que la página web esté lista.
Cuando esté listo, llamaremos a esta función anónima, es decir,
este fragmento de código.
¿Qué sucede debajo de eso?
Hay una sintaxis alternativa
en jQuery para que se haga lo mismo que acabamos de hacer.
Aunque parece misterioso, este signo de dólar con los paréntesis
toma un argumento que, es diferente de document.
Si pasamos una cadena con ese tipo de aspecto como CSS,
recordemos que antes usamos selectores de CSS,
donde tendríamos un nombre con una etiqueta en nuestro archivo CSS o hashtag
algo, que es la ID, la única ID, en un archivo.
O punto, que vagamente significó un curso de CSS.
Regresemos a algunos ejemplos de CSS, si no lo recordamos del todo.
En CSS, esos son selectores.
Este solo significa, toma el nodo dom, cuya única ID es registro.
La sintaxis de jQuery para esa misma expresión es esto.
Esta línea de código es esencialmente equivalente
a document.getElementById("registration")
La razón por la que jQuery existe es que dice en aproximadamente la mitad
de los caracteres, que si tomo el doble de caracteres para escribir algo.
Eso es todo.
No es una idea nueva.
Solo es más sucinto, es más misterioso.
Además en JavaScript puro, se escribe .onsubmit,
en jQuery, es .submit.
Solo porque no necesitemos dos caracteres extra
Realmente no los necesitamos.
Eso es todo lo que vemos aquí.
Lo que sucede ahora, es que la sintaxis,
ciertamente, está un poco más rara.
No gastaremos mucho tiempo aquí.
Si no tuvimos la previsión, o por cualquier razón no
querer dar identificadores únicos a todos nuestros campos de formato, está bien.
Porque podemos usar selectores estilo CSS, más elegantes
que los que introdujimos en el curso, que dicen hey,
busca en la página web el elemento cuyo ID es único en el registro.
Mira dentro de él, es el hijo o descendiente,
de un elemento de formato de entrada.
Solo toma el valor de esa entrada si su nombre es email.
de nuevo, no nos detendremos en esto.
Porque esa es la manera más fácil de hacer eso.
Pero con jQuery, obtenemos la expresividad que vemos aquí.
Y todo el resto del código en la pantalla
hace exactamente lo mismo con otra sintaxis.
Usen esto como un soporte cuando se experimenta con, digamos,
para el próximo proyecto o proyecto final, jQuery,
si quieren veremos análogos desde no jQuery hasta sí jQuery,
pero no son diferentes de manera fundamental.
Es solo una sintaxis diferente.
Pero será una función más poderosa que ahora obtenemos de jQuery.
Cuando visitamos los sitios web
como maps.google.com, como este.
Esto no es todo el mundo.
Por el momento, descubrí que estoy en Cambridge.
Me muestra solo un pequeño fragmento de Cambridge.
También Google, aunque solo miro a Cambridge,
tampoco se descargaron proactivamente imágenes del resto del mundo
y almacenarlos en la memoria de mi navegador.
Eso es bastante estúpido.
Porque rara vez necesito ir muy lejos de donde estoy.
Y aun así, si quiero ir a algo como New Haven,
No necesito que todas las ciudades y pueblos que están entre
New Haven y yo, estén en mi navegador.
Podemos solo saltar directamente ahí.
Podemos ver este artefacto de la siguiente manera.
Si hago clic y arrastro rápidamente, ¿qué vemos que sucede?
Debería ir a algún lado donde hay tierra.
¿Qué vemos que sucede a la izquierda, ya que lo hago rápido?
PÚBLICO: Hay un retraso.
DAVID: Sí, hay un retraso.
Vemos estas baldosas grises, como marcadores de posición,
hasta que, finalmente, se llenan.
¿Por qué sucede eso?
Saben qué, iré al menú del desarrollador de mi navegador,
herramientas de desarrollador, que deben ser un hábito que se incrementa
cuando queremos entender algo o resolver algún problema
o simplemente aprender por curiosidad.
Aclararé esto temporalmente.
Pero, cada vez que hago clic, guau.
Solo se induce al hacer clic y arrastrar, a partir de ahora, 89,
ups, ahí está mi protector de pantalla,
92 más solicitudes HTTP.
¿Qué creen que se les solicita cada vez que hago clic y arrastro?
Más imágenes, más mosaicos, como se les llama en Google Maps.
¿Qué característica de los navegadores
al pedirlos, les permite obtener más y más datos como este?
Esta es una tecnología o técnica llamada AJAX.
AJAX es una manera elegante de decir que una función en los navegadores
les permite ejecutar solicitudes HTTP después de que el primero haya terminado.
Quiere decir que cuando visitamos por primera vez Facebook, Gmail o Google Maps,
y recibimos una respuesta del servidor que contiene el mapa de Cambridge,
el navegador, gracias a AJAX, que es una tecnología más moderna
de los últimos años, tiene la capacidad para enviar más de estos sobres
en internet diciendo: necesito los mosaicos para la esquina noreste,
o necesito los mosaicos para la esquina suroeste,
envíamelas de vuelta.
Constantemente, ahora estamos por encima de 651 sobres adicionales
que regresan de Google con el fin de completar todos los espacios en blanco
que al hacer clic rápidamente y arrastrarlo a diferentes ubicaciones.
No tiene que ser de naturaleza gráfica.
Hace un momento, vimos las cotizaciones de la bolsa.
Y lo que, tal vez, es incluso un paradigma más sencillo,
si solo quiero obtener algo de información ligeramente adicional.
A continuación, abriré ajax.html,
lo veremos en este formato de aquí.
Proseguiré como debería ser, de nuevo, un hábito en aumento,
ve a mi pestaña Network.
Noten que, solo por si acaso, también al entrar en el hábito
de hacer clic en conservar registro.
Solo en caso de que la página web redirija o vaya a cualquier otro lado,
no borra todo lo que miramos.
Todavía vemos todo.
Para continuar, escribiré NFLX para Netflix y obtendré una cotización.
Notemos lo que vimos antes, la respuesta que devuelve el servidor.
A partir de este momento, es $198.41, pero ¿cómo lo sabemos?
Descartaré la alerta y me enfocaré aquí abajo.
Después de cargar esta página, en apariencia, envió una solicitud HTTP más,
que fue exitosa.
¿Por qué?
¿Cómo lo sé?
Sí, 200 OK.
Chrome me está mostrando eso también.
Podemos hacer esto en Edge, Firefox y Safari.
Pero actualmente, Chrome es una especie de navegador para el desarrollo.
Así que, nos animaremos a seguir usándolo para esto.
Si hago clic en esto, puedo ver qué la solicitud y la respuesta fueron recibidas.
Aquí están todos esos encabezados.
Hay algunas cookies involucradas, que son el resultado del IDE
y no mi propio código.
Pero es la respuesta que me importa,
continuaré al ver la fuente.
Notemos que algunas cosas familiares regresaron,
y algunas no lo son.
Entre los encabezados, de hecho está, 200 OK, entonces eso es algo bueno.
Sin embargo, notemos qué tipo de contenido regresó.
En el pasado fue text/html.
Pero, ¿qué regresó esta vez?
Sí, application/json.
Una aplicación, es un poco raro.
No es una aplicación,
no es un programa.
Pero es un formato utilizado por programas, podemos pensar en eso.
JSON es la notación de objetos de JavaScript.
Probablemente, lo que regresó es algo con algunas llaves, dos puntos
y comillas.
Veremos en un momento, 47 bytes que, de hecho, valen la pena,
y también regresaron otras cosas desde el servidor.
Haré clic en la respuesta.
Y qué sabemos, de la respuesta del servidor,
no es otra página web.
No es una etiqueta HTML, de cuerpo, de cabeza, o cualquier otra cosa.
Es solo este texto, pero en un formato oficial.
Apertura y cierre de llaves, que provienen de un objeto de JavaScript.
¿Qué es un objeto?
Es una tabla hash o una diccionario con claves y valores.
¿Qué son?
Una key es un nombre.
Value es Netflix.
Price es una clave.
198.41 es un valor.
Symbol es una clave.
Netflix es un valor.
Es solo una manera de recuperar una o más piezas
de información útil.
Entonces, ¿cómo hago esto y cómo obtengo la información de vuelta?
Para eso, tenemos que mirar el código en sí.
Entonces, en ajax0.html, tenemos este código.
En HTML form, es igual que nuestro primer ejemplo de hoy,
simplemente codificado por dentro de un atributo onsubmit,
una función llamada quote, y después devuelve falso.
Es decir, no volvamos a cargar la página, no enviemos el formato de manera real,
solo llamemos a la función quote.
¿Dónde se definió la función quote?
Por el momento, de manera perezosa, está definida en el mismo archivo.
Pero está bien,
porque esta es nuestra primera vez.
Notemos que tengo dos cosas para JavaScript.
Una, es jQuery, la biblioteca que mencioné antes, tiene que venir primero.
Porque al igual que en C, necesitamos saber que las funciones
se cargaron antes de que se usaran más tarde.
Este mi propio script, mi propio JavaScript.
Aquí está mi función quote.
No toma ningún argumento.
Porque los conseguiremos en el código del navegador.
Y la sintaxis aquí es un poco rara.
Pero lo destilaremos en un momento.
¿De qué es sinónimo el signo de dólar?
PÚBLICO: De jQuery.
DAVID: De jQuery.
Esto es solo una manera bastante más confusa de decirlo.
jQuery.getJSON.
getJSON es una función, o un método, por así decirlo, cuyo propósito en la vida
es hacer eso, buscar algunos datos JSON.
¿De dónde debería obtenerlos?
/quote, como veremos en un momento, es una ruta muy corta que implementé
en Python en la parte final.
Sin embargo, podría haber sido implementado en cualquier lenguaje.
Esto parece un poco misterioso, así que volveremos con esto en un momento.
Así que borraré esto temporalmente y diré lo siguiente.
La función getJSON que viene con jQuery
en este caso toma al menos dos argumentos.
El primero es la URL (" / quote"... para obtener JSON de ella.
Y la segunda es, ¿qué podemos deducir?
PÚBLICO: Una función anónima.
DAVID: ¿Una qué?
PÚBLICO: Una función anónima.
DAVID: Una función anónima.
Esa función anónima, a diferencia de las que vimos antes,
esta vez toma la entrada,
de modo que no tiene un nombre
pero ese no es un problema,
porque toma un argumento: (data).
Este es un ejemplo de cómo usamos una función anónima
o como propiamente la llamamos, una devolución de llamada.
Porque el Internet puede ser lento.
Y si estoy tratando de obtener una cotización de acciones de /quote,
tal vez regrese muy rápido.
Pero tal vez el servidor está sobrecargado,
mi conexión a Internet es lenta
o quizás estoy en mi teléfono
y podría tomar un segundo o dos que obtenga esa respuesta.
Imaginemos si las cosas esperaran en el mundo de la web a que los datos regresaran,
la experiencia, la experiencia del usuario o UX sería bastante mala, ¿cierto?
Todo el navegador se caería, congelaría o veríamos la tonta pelota de playa giratoria
mientras esperamos a que algo suceda.
Imaginemos que en Facebook, cada vez que nuestro amigo
escribe algo vemos el ta-ta-ta,
pero no podríamos hacer nada en el sitio web hasta que él presione Enter
y finalmente obtengamos el mensaje.
Eso nos impediría hacer algo en verdad útil, bueno
"cosas en verdad útiles" de usar Facebook de otras maneras.
En cambio, ¿cómo podemos decirle al navegador,
consígueme algo más, más mosaicos del mapa, más mensajes
de mi amigo, más cotizaciones de la bolsa de un servidor,
pero llámame cuando tengas los datos para que pueda seguir trabajando?
De modo que, podría estar aquí en mi escritorio.
Y Brian, si no te importa puedes venir.
Y Brian puede estar aquí en su pequeña oficina en casa.
Tengo mucha curiosidad sobre cuál es el precio de las acciones de Netflix.
Para continuar, traeré a Brian aquí.
BRIAN: Hola.
DAVID: ¿Hola, Brian?
BRIAN: Hola.
DAVID: Hola, soy David.
BRIAN: Hola, ¿cómo estás?
DAVID: Hola, estoy muy bien, gracias.
Necesito el precio de las acciones de Netflix actualizado, por favor.
BRIAN: El precio de las acciones de Netflix actualizado, trabajaré en eso.
Pero tendré que llamarte de nuevo.
Me tomará algo tiempo.
DAVID: OK, gracias.
BRIAN: No hay problema.
finance.cs50.net.
DAVID: ¿Oh, hola?
BRIAN: ¿Hola?
Hola.
La participación actual en Netflix cuesta $198
DAVID: Espera un momento, está entrando una llamada de Colton.
BRIAN: OK, y $0.35.
DAVID: Espera, tendré que llamar de vuelta a Colton, un segundo.
Espera, ¿hola?
BRIAN: Hola.
DAVID: Oh, hola Brian.
BRIAN: Una participación en Netflix cuesta $198.35
DAVID: OK, muchas gracias, Brian.
BRIAN: No hay problema.
DAVID: Adiós.
OK, acabo de colgarle a Colton en Internet.
Muchas gracias.
OK, ¿cuál fue el punto en esa sorpresa inesperada y qué tan extraño
fue que él me llamara justo en ese momento?
El punto es que las devoluciones en las llamadas son algo
que ya conocemos con, cierto, en el mundo real donde
queremos que alguien nos devuelva algo de información.
Tal vez no sea tan arreglado como oye, necesito una cotización rápidamente,
envíamela.
Pero esperamos que nos devuelvan la llamada con algo de información.
¿Cómo implementamos esto en el código?
Es exactamente la misma idea.
Así que tenemos esta función especial llamada getJSON,
está dentro de esta biblioteca llamada jQuery, cuyo apodo es el signo de dólar.
Entonces digo, búscame algunos datos de "/quote" o el equivalente,
a Brian en el mundo real,
luego, le digo a getJSON, cuando tengas lista esta información,
devuélveme la llamada, por así decirlo.
¿Cómo me devuelve la llamada?
Bueno, saben algo, escribiré con anticipación un código al que
quiero que llamemos, pero desde la computadora, cuando los datos estén listos.
y como Brian me pasó verbalmente la cotización de acciones
de vuelta por el teléfono, entonces esta función anónima puede
recibirla como un argumento, un parámetro de datos o un argumento
al que yo, entonces, puedo tener acceso.
De modo que puedo usar la notación de puntos como en C, con structures
y obtener el name, el price o el symbol, que fueron los tres
valores que vimos en ese objeto en JSON.
Pero mientras tanto, esta línea de código se ejecuta al instante
y registra, si lo deseamos, una función de devolución de llamada con getJSON.
Así sabe a quién devolverle la llamada.
Esto significa que si mi página web fuera mucho más
interesante que esto y es Facebook o G-mail con muchas
muchas otras funciones, puedo seguir
con mi trabajo usando estas funciones, si luego me interrumpen cuando
el teléfono suene, llegue un mensaje de mi amigo,
reciba un nuevo correo electrónico o me devuelvan una cotización de acciones.
Todo eso sucede súper rápido con una conexión rápida a internet, pero no
necesariamente es el caso con una más lenta,
como vimos con Google Maps, cuando tratábamos de obtener más y más títulos.
Pero, ¿cómo puedo limpiar esto?
Esa era la versión 0,
Para continuar abriré la versión 1.
Noten que esta vez hago las cosas un poco diferente.
Oh, y déjenme revelarles una última cosa mediante este ejemplo de aquí.
¿Qué es lo que hacemos de manera diferente aquí?
En este caso, ahora adjunto, abriré el otro para que podamos ir
allí y regresar,
en esta primera versión, recuerdo, que hice el tipo descuidado de cosa
en la que combiné mi HTML y mi JavaScript,
y este es un mal diseño,
no debemos hacerlo, aunque eso sea donde comenzamos la historia.
¿Cómo puedo hacer esto con la programación, en código?
Bueno, si ahora este es mi formato y noten que no se menciona a onsubmit,
no se menciona ese atributo.
Lo hago completamente en código.
¿Cómo lo hago?
Bueno, lo que puedo decirles es que cuando el documento esté listo,
debemos continuar y registrar este controlador de envío, por así decirlo.
Gestor de eventos sería el término general para todas cosas.
Cuando se envía ese formato, éste llama a getJSON de /quote
luego vuelve a llamar a este número, digamos, cuando los datos están listos.
Y antes borré temporalmente esto,
Pero analicemos qué es esto,
se ve un poco críptico.
Permítanme limpiar eso de la siguiente manera.
Para continuar diré lo siguiente: let http_parameters
ser este objeto en JavaScript el cual tiene un symbol y cuyo
valor es esta cosa de aquí: $("#symbol").val( )
y esto también es un poco críptico.
Pero lo analizaremos en un segundo.
Ahora reemplazaré esto con http_parameters
¿qué es lo que pasa aquí?
Soy más prolijo, pero esto no es lo más correcto.
Aquí hay una variable llamada http_parameters
¿Qué tipo de variable es?
Es un objeto en JavaScript, tengamos en cuenta la nomenclatura,
debido a las llaves,
esa es la clave.
Recordemos que un objeto tiene llaves y valores separados por dos puntos.
De modo que aquí hay un clave el symbol
y aquí hay un valor.
Esta es una forma muy original de escribirlo,
pero esta es la manera de jQuery de decir esto
document.getElementById("symbol").value.
De nuevo, el valor, sin juego de palabras, de usar jQuery en contextos como este
es presionar menos teclas.
Es más críptico,
Tendremos que recordar la sintaxis a largo plazo.
Pero hay menos cosas para escribir.
Y eso es todo lo que hace.
Obtiene el valor de symbol de lo que haya escrito el usuario,
como un NFLX para Netflix y luego se almacena como el valor de esta clave.
Luego para obtener JSON, pasa en esos http_parameters
para crear la URL que esperaba.
Y, ¿cuál era la URL que esperaba, la esperaba en el sentido de mí mismo
como el programador?
Bueno, si desplazo el cursor sobre la URL en el registro de Chrome,
Visité /quote?symbol=NFLX.
Parece que lo que getJSON hace por mí, en realidad, es construir,
dinámicamente, una GET request.
Simplemente horneando en la URL los parámetros que quiero pasar.
Fundamentalmente, ese ejemplo lo hace al final.
¿Tienen alguna pregunta sobre AJAX o de la sintaxis con la que
hacemos esto?
¿Sí?
PÚBLICO: ¿Por qué la palabra clave symbol no está entre comillas?
DAVID: Es una buena pregunta.
¿Por qué la palabra symbol no está entre comillas?
Podría ser.
Esto también sería perfectamente correcto,
no es estrictamente necesario cuando lo proporcionamos como entrada, digamos,
en este contexto,
es necesario en la salida.
Por razones tontas, el formato JSON que
está destinado a devolver como respuesta, todas deben estar entre comillas.
Cuando escribimos código JavaScript con objetos, claves
y valores, no es estrictamente necesario poner comillas a las cosas.
Solo es un mal diseño en el lenguaje.
¿Alguna otra pregunta?
Está bien, los puntos importantes hasta el momento
son que JavaScript tiene funciones y funciones anónimas,
que es un poco interesante, bucles, condiciones, variables y más,
aunque no usamos algunas de esas funciones,
como bucles y condiciones.
Porque tuvimos una lucha mortal con Python y C,
ellos están ahí.
Pero lo más importante, es que existe esta noción
de devolución de llamadas, la capacidad de llamar a una línea de código
y entonces decir, cuando estemos listos con nuestro valor de retorno,
regrésame la llamada, al llamar a esta función.
Este es un ejemplo de lo que se llama, código asíncrono en contraste,
con sincronía.
Hasta ahora, casi todo lo que hemos escrito y todo lo que escribimos en C,
fue sincrónico, lo que significa que si se ejecuta una línea de código,
y esa función tarda un tiempo en ejecutarse, nuestro código
se quedará allí por un tiempo.
Y Dios no lo quiera, tiene un bucle infinito,
que se quedará allí para siempre y bloqueará todo.
Empezamos a ver el código asíncrono en Python,
a pesar de que no lo llamamos así, hace una o dos semanas, cuando
comenzamos a usar Flask.
Debido a que Flask es asincrónico, ya que escribimos nuestro programa,
registra todas esas rutas, y entonces solo espera que sucedan
las cosas de manera asíncrona, se desordenen o tengan cualquier orden.
Pero ahora en JavaScript, realmente sentimos el poder
de la asincronía, de la siguiente manera.
La razón por la que lo pude ordenar,
en realidad, no hice nada útil con mi tiempo.
Solo estuve con mis dedos cruzados aquí.
Pero teóricamente, podría haber hecho otra llamada,
revisado mi correo electrónico,
o comido algo mientras espero a que Brian me responda.
Pude haber hecho un trabajo real.
Porque si permitimos la asincronicidad,
haríamos cosas entre el inicio y el final de algún objetivo.
Ahí fue cuando Brian me devolvió la llamada,
pude usar ese tiempo en algo útil, al igual que mi programa o mi sitio web
podría hacer otras cosas mientras espero por estos datos.
Entonces, lo importante de la asincronicidad es que
estaremos listos para hacer más cosas a la vez.
¿Cuáles son algunas de las cosas que querríamos hacer?
Bueno, abriré algunos ejemplos pendientes, aquí, como sigue.
Para continuar, abriré este otro aquí.
Esto tiene incorporado una funcionalidad que es realmente genial,
a pesar de que es un poco detallado.
Si alguna vez pusimos atención, en estos tiempos, las páginas web
y desde luego las aplicaciones móviles, pueden saber dónde estamos.
Simplemente, Google sabía dónde estuve cuando llegué,
Google Maps, aun cuando no estaba conectado, lo cual es un poco escalofriante,
pero tenían suficiente Información sobre mí.
¿Cómo podríamos ser tan escalofriantes en nuestros propios sitios web
como para averiguar dónde está el usuario?
Tal vez no debí decirlo de ese modo.
Bueno, esto es un trabalenguas.
Pero las ideas son exactamente las mismas.
Resulta que esta de aquí, es otra variable global
que viene con los navegadores actuales.
No es solo un documento,
también es el navegador.
Y el navegador es como esta variable global especial
que está geográficamente relacionada con la funcionalidad incorporada en él.
Una de esas piezas de funcionalidad es navigator.geolocation,
que es como una característica dentro de este objeto de navegación global
y viene con una función también conocida
como un método llamado ubicación actual,
el cual, si leemos la documentación,
se supone que debe obtener al usuario o técnicamente
la ubicación actual del navegador en el mundo, la latitud y la longitud,
mediante coordenadas de GPS o similares.
Pero puede tomar un tiempo averiguar dónde está el usuario.
Si habláramos en un contexto como el de CSI, tiene que triangular al usuario,
averiguar dónde se encuentra y hacer todo eso,
algunas veces hablando con el servidor,
de alguna manera, su posición está determinada
y tomaría un segundo, tal vez un minuto o una cierta cantidad de tiempo.
Así que es una buena oportunidad para una implementación asincrónica,
el usar una devolución de llamada, tal y como lo hicimos con Brian,
para que cuando el navegador descubra mi ubicación,
me lo haga saber y no vea el molesto balón de playa girando
hasta que esa respuesta llegue.
Así que, ¿cómo hago esto?
Llamo a getCurrentPosition.
Paso a una función anónima, aunque podría tener un nombre,
pero no lo necesita.
La función anónima que toma, según la documentación,
un argumento llamado position, que será un objeto especial que contiene
coordenadas.
Cuando se llama a esa función algunos segundos o milisegundos después,
esta una línea de código ejecutará, document.write,
que no hemos visto.
Esto es solo una manera de escribir palabras adicionales al documento,
como el cuerpo de la página web.
position.coords.latitude, para las coordenadas.
Una coma para concatenar, solo para mantenerla bonita.
Y después concatenar, position.coords.longitude.
Este es un enorme trabalenguas que dice, haz lo siguiente.
Déjame entrar en la página web llamada geolocation.html.
Todavía, nada parece suceder.
Pero si yo,
¿Por qué no pasó nada?
Oh no.
OK,
aquí vamos.
No funcionó porque no accedí a HTTPS para las demostraciones
de hoy, lo que no es un gran problema.
Porque de cualquier manera solo son demos públicas.
Pero al navegador no le gustó,
porque quiere la comunicación de mis coordenadas de GPS para estar seguro.
Tan pronto como cambie a HTTPS, esto dice:
hey, mi nombre de dominio en el IDE, quiere saber su ubicación.
Algunos de nosotros tendríamos el hábito de solo hacer clic en bloquear.
En cambio, algunos de nosotros tendríamos el hábito de solo hacer clic en permitir.
Algunos de nosotros tendríamos el hábito de solo hacer clic en Enter,
y quién sabe lo que acaba de suceder.
Si hago clic en permitir y esperen, porque es asincrónico,
Brian podría tardar un tiempo en descubrir dónde estoy.
Esta es increíblemente precisa, al usar valores de punto flotante,
mi ubicación en el mundo, al menos, con alta probabilidad.
Ahora, puedo verificar esto, creo.
Esto resulta ser Cambridge, Massachusetts.
Si voy a Google Maps y busco esas coordenadas de GPS,
de hecho, eso es condenadamente aterrador.
Es bastante bueno,
eso es, de hecho, donde estamos.
La conclusión es, ¿cómo podemos hacer esto?
Podemos hacer esto al entender lo que es una devolución de llamada
y lo qué es un código asíncrono.
De nuevo, el paradigma está cambiando.
No solo llamo a getCurrentPosition y luego
obtengo un valor de retorno como el que recibimos durante semanas en C y Python.
Ahora, no hay nada en el lado izquierdo.
No espero un valor de retorno como tal.
Ciertamente no almaceno un valor de retorno en el lado izquierdo,
como lo hicimos durante mucho tiempo con Python y C.
En cambio, paso a una función, funcionalidad,
como mi teléfono que dice, regrese cuando tenga la respuesta.
Y ese es el paradigma que empezó a cambiar para nosotros.
Hay un par de cosas más que también podemos hacer a lo largo de estas líneas.
Abriré uno, que es un poco tonto,
pero me trae de vuelta a mis días de HTML.
Hace tiempo, en HTML y en 1.0, había una etiqueta increíble llamada blink.
Por lo cual, si escribíamos [blink],
luego escribíamos algunas palabras y cerrábamos la etiqueta,
simplemente haría esto en la página web.
Estoy muy seguro de que así nos saludaron
cuando visitaron mi sitio web de primer año o el de segundo año como,
hola, bienvenidos a mi sitio web.
Esto es tonto.
Con los años, lo único bueno que hicieron los organismos de normalización
fue quitar la funcionalidad blink de todos lados.
Había una etiqueta de marquesina, parecida a un tablero de cotizaciones,
o como una marquesina de espectáculo de Broadway, donde simplemente
se desplazaba el texto en la pantalla, como esto, que también es bastante tonto.
Pero, podemos traer de vuelta la etiqueta blink de la siguiente manera.
Aquí hay una página web bastante sencilla con un solo div y el ID de
greeting, solo para que tenga una manera única de identificarla.
Supongamos que quiero hacer que este texto parpadee.
Si consideramos, que ahora tenemos la habilidad
para ejecutar código en la computadora del usuario,
deberíamos ser capaces de lograr esto al activar CSS y desactivar CSS,
encendido y apagado.
Es posible que no hayan hecho esto antes.
Porque posiblemente solo usamos CSS para centrar texto similar, o hacerlo
negrita, de color, de diferente tamaño o similar.
También podemos hacer que se visualice o no, y que sea visible o invisible.
Si miramos el código de script, para bien o para mal,
consideraré cómo podría hacerlo.
Para continuar, definiré una función llamada blink
que solo obtiene esa div por su ID.
Ya vimos eso antes,
y después solo hago esto.
Si la propiedad de estilo de div, y nosotros únicamente
sabemos que existe porque lo vimos en el curso, lo leímos en un manual
o lo vimos en línea. Si este div, que vino de esta línea:
if (div.style.visibility == "hidden") entonces usa esta línea de código:
{div.style.visibility == "visible";}
De lo contrario: else {div.style.visibility == "hidden";}
Hasta el día de hoy, no sé por qué lo contrario de visible no es invisible,
es oculto (hidden).
Pero, esa es también una decisión de diseño con la que estamos atrapados.
¿Cómo funciona esto?
Esta es una función que solo cambia el estado.
Pero algo no parpadeará a menos que cambie,
luego cambie, cambie y cambie.
Otra función hermosa de JavaScript
que utilizamos para el mal, es hacer algo repetidamente
pero asincrónicamente.
Fácilmente podría hacer que algo parpadeara, parpadeara,
y solo parpadeara, al hacer un bucle infinito.
Pero, si tuviera un bucle infinito while o un bucle for,
por definición, nunca saldrían de eso.
Por lo tanto, la página parpadearía para siempre,
pero no haría nada más.
Con un código asíncrono como este, puedo registrar una función con un navegador
y decirle, llama esta función cada 500 milisegundos.
Noten que esta es una línea de código: window.setInterval(blink, 500);
Cuando el navegador ejecuta este código, ejecuta una línea,
y simplemente continúa.
Pero recordemos, cada 500 milisegundos recordemos parar lo que sea que hagamos,
parpadea, luego continúa, luego parpadea, luego continúa.
De esta manera, podemos tener varias cosas sucediendo en nuestra página web,
porque la manera en que funciona JavaScript es en sí misma,
el lenguaje, integrado en el navegador, esencialmente,
tiene este bucle infinito.
Y se escucha que constantemente los usuarios hace clic en las cosas,
se escucha constantemente que el mouse se mueve,
se escucha constantemente que el cronómetro se apaga.
Y cada vez que sucede uno de estos eventos,
el gestor envía la función que se le dijo
para llamar en respuesta a esos eventos.
El resultado final con un blink es este.
Si vuelvo a mi índice de directorio, y abro blink.html,
vemos que hace exactamente eso.
Puedo modificar esto de manera un poco diferente.
Si quiero hacerlo cada décima de segundo, podemos hacer esto.
Y si hacemos esto demasiado rápido, probablemente no sea saludable.
Así que, lo dejaremos en 50.
Así es como aprendí a hacer web hace años.
¿Qué más podemos hacer de una manera más convincente?
Veamos un ejemplo final que arreglé durante el descanso,
es este mapa de aquí.
Aquí es donde el mundo comienza a ser muy, muy interesante.
Debido a que hay tantas API de terceros por ahí,
interfaces de programación de aplicaciones,
como gente y compañías atractivas que intentan vendernos servicios.
Tienen funciones y código que escribieron, el cual ponen a disposición
en internet para que los usemos, ya sea tomando datos de ellos,
como en el caso de CS50 Finance que emite cotizaciones bursátiles.
O como el caso de Google Maps, que hornea funcionalidad adicional
a nuestra aplicación, por lo que no tenemos que implementarla nosotros mismos.
Si alguien alguna vez usó Lyft o Uber en su teléfono,
Lyft y Uber no comenzaron por ser empresas de mapas,
enviando autos alrededor del mundo, mapeando todo el planeta.
Sería una locura que de arranque se intentara hacer eso.
Ellos quería construir un servicio de auto compartido
además de otra característica, lo cual es solo un ingrediente necesario.
Así que, usaron Google o alguna otra compañía,
a la que le pagaron para construir sus mapas en su propia aplicación.
Entonces, ellos contribuyeron con su propiedad intelectual e ideas propias.
¿Cómo podemos hacer esto?
Bien, si tengo una página web bastante simple,
para continuar, eliminaré esto muy rápido,
para que luzca de la siguiente manera.
Aquí hay una página web muy simple, que tiene un cuerpo y
un div dentro de ella, cuyo ID es map.
Después, en la parte inferior del archivo, notemos
que existe este código JavaScript, que apunta específicamente
a API de Google, programación de aplicaciones interfaz, diagonal map diagonal algo.
Y lo que hice durante el descanso fue que descargué una nueva clave API,
lo que me permite, David Malan, usar su API para que todas
estas solicitudes estén asociadas a mí.
Anteriormente, tenía una clave antigua
que sencillamente ya no funciona,
Es por eso, que recibimos el mensaje de error.
Así que, me inscribí para obtener una clave API gratuita.
¿Cómo hago algo con este mapa?
Bueno, podemos hacer algunas cosas diferentes
siguiendo, la documentación en línea de la manera correcta.
Para continuar, abriré lo siguiente.
Si continúo y cargo esta página ahora mismo, eliminé ese código,
y abro map.html, no hay nada ahí.
Es solo una gran página en blanco.
Y eso es porque no agregué mi propio código.
Si voy a la etiqueta del script, para continuar haré lo siguiente.
Definiré una función sin argumentos: function initMap( )
Dentro de esta función, a continuación haré esto.
Declararé una variable llamada map, que tomará el valor de un nuevo objeto:
var map = new google.maps.Map (document.getElementById("map"))
eso será un objeto especial.
Veremos qué significa esto en un momento.
La sintaxis aquí es un poco rara.
Pero, esta línea de código que solo conozco por leer
la documentación para Google Maps,
y Google Maps me dijo, si quieres un nuevo mapa, escribe esto.
Si queremos recordar ese mapa en un valor de retorno o una variable, lo siento,
debí decir let, lo almacenamos en map, a la izquierda.
La cosa extraña aquí es la siguiente,
los dos argumentos son estos.
Esta es una línea de código que ya vimos antes y dice, oye navegador,
ve a buscar el elemento HTML del dom cuyo único ID es "map".
¿Cuál es ese elemento?
Es este div: < /div>
Y está vacío.
Obviamente allí no hay un mapa.
No hay nada entre ese paréntesis angular de cierre y el de apertura.
Esa es la razón de que no haya un mapa.
Pero esta línea de código, es la que usaremos
para informarle a Google dónde debe poner su mapa para mí.
Toma otro argumento aquí, según la llave
y la llave de cierre, el cual es un argumento que
quiere decir: la documentación me dijo que tengo que pasar pares de valores clave
múltiples,
tengo que configurar el mapa.
Lo haré en un momento.
A continuación, volveré a cargar el mapa subiré al navegador y volveré a cargarlo.
Interesante, no hace nada todavía.
Pero progresamos, ¿cierto?
Es gris,
Lo que sugiere que no he configurado el mapa.
Déjenme hacerlo.
Sabría esto solamente a partir de la documentación,
que necesito proporcionar una clave center
y ese center necesita la latitud y la longitud: center: {lat: , lng:
Y solo para ser neutral aquí, puedo elegir 39.833
y una longitud negativa -98.583, cierro la llave.
Luego una clave zoom de 4.
Fuera del contexto de Google, esto no significa nada.
Conozco esto solo a partir de leer la documentación.
Y la documentación de Google me dijo asegúrate de usar una clave llamada center.
Tiene este argumento después de los dos puntos, es otro objeto de JavaScript
con dos claves, lat y long, cada una de las cuales
es exactamente eso, un float que representa una latitud y una longitud.
También dime, el Google API, ¿qué nivel de zoom quieres?
¿Quieres ver la vista panorámica acá arriba?
o ¿quieres hacer un acercamiento del terreno?
Y como es de más o menos 4, está en un cierto nivel que es útil.
Pero también podemos jugar con eso.
Déjenme guardarlo.
Regresamos aquí, volvemos a cargar la página y voilà.
Me localizo en lo que es más o menos el centro de los Estados Unidos
con un cierto nivel de zoom.
Si quiero cambiar uno de esos valores solo para verlo,
hagamos esto tal vez 8, guardar.
Recargar.
Ahora estoy realmente cerca de lo que parece ser Kansas o Nebraska,
dependiendo del nivel de acercamiento.
Puedo moverme alrededor del mundo, por así decirlo.
Veamos, si voy a como 139, veamos a dónde me lleva eso.
Recargar.
Puede ser que eso no sea posible geográficamente.
Hagamos 42, qué tal
cambiará eso a 42, volver a cargar.
Ahora estamos sobre Sioux City.
Quizás vamos a 44.
De cualquier manera, movemos el mapa a lugares que no conozco de ante mano.
Ahora estamos en Dakota del Sur.
En cualquier caso, todo lo que hicimos es solo configurar
el mapa para estar en diferentes lugares.
Pero hay otra funcionalidad en Google Maps.
Revertiré esto y declararé un par de otras cosas.
De hecho, puedo declarar un marcador, de la siguiente manera.
let marker = new google.maps.Marker({ });
se cierra el paréntesis.
Noten que también tengo una llave ahí.
Porque el marcador es otra función de Google Maps API
eso me permite especificar en qué: map, quiero poner el marcador.
Hay una clave llamada map.
Por casualidad, la variable que definí aquí
se llama map.
Proseguiré con otra cosa, la posición de este marcador.
Pondré esto: position: {lat: 42.3762,
y una longitud negativa: lng: -71.1158
Solo por si acaso, hagamos uno más de estos.
Estrictamente no necesito una variable aquí.
A continuación me desharé de eso,
y hare: new google.maps.Marker( )
Con la misma sintaxis que antes,
el mapa será el mismo: map : map,
pero la posición de este marcador será: position: {lat: 41.3104
y una longitud de: lng:-72.9289}, guardar.
Y si no lo arruiné, lo cual hice.
Me está gritando,
problema de formato: símbolo inesperado, oh, OK, olvidé esto.
Guardar.
Desaparece,
desaparece.
Recargar.
Alejémonos,
y miren eso.
Tenemos marcadores, afortunadamente, sobre lo que son Harvard y Yale.
¿De dónde vino todo esto?
Bueno, de Google Maps,
eso es lo que busqué en Google durante el descanso, clave de API.
Google Maps API.
Y si voy a esta URL, como también lo haremos pronto,
veremos que debajo de la documentación, ellos
tienen muchas API diferentes, algunas para teléfonos, algunas que
son para páginas web como esta, la JavaScript API.
Y veremos que hay una interfaz bastante rica para crear
este tipo de mapas.
A primera vista, la documentación puede ser un poco abrumadora.
Pero aquí nos dan ejemplos de cómo poner un marcador, por ejemplo,
sobre Australia.
Así es como deduje cómo poner uno sobre Cambridge, Massachusetts y New
Haven.
También hay otras funcionalidades,
como estas cosas llamadas Info Windows.
Con Info Windows, me desplazo hacia abajo en este ejemplo, aquí,
podremos agregar capacidad de hacer clic.
Si registro un gestor de eventos no lo enviará, sino que hará clic,
Puedo hacer este tipo de cosas, al igual que Google,
por lo que al hacer clic en un marcador, provocará que algo más suceda,
en este caso, abrir Info Windows, y así obtener funcionalidad.
Lo que haremos, en última instancia, para unir todo esto,
nuestra última serie de problemas de mezcla de CS50,
será implementar una interfaz de usuario con algunos de estos componentes básicos.
Estamos centrados sobre Stanford, California,
observemos que el mapa está en pantalla completa.
Podemos acercarnos e ir hacia abajo.
Notemos que hay un cuadro de texto, que es un formato HTML bastante
simple en la parte superior.
Notemos que tal como lo hice antes, configuramos la solución del equipo,
el suyo también lo hará pronto, para escuchar los clics y sobre los clics
llamar a una función que hace una solicitud AJAX a un servidor,
devolverá algunas noticias, al crear una lista desordenada de ellas,
y las mostrará en una de estas ventanas de información.
Si miramos lo que pasa por debajo del agua,
ir a mi developer menu, en developer tools.
Y deberíamos tener el hábito de mirar a nuestra pestaña Network,
a continuación haré exactamente esto.
Limpiaré esto, haré clic en Noticias de Palo Alto, California.
Veamos que algunas cosas solo sucedieron.
Una, mi navegador hizo una solicitud a una ruta de artículos,
pasando por la geografía de este código postal aquí.
Recuperé algunos gifs aquí.
Internet es tan rápido aquí, que no vimos la barra de progreso.
Podríamos haber visto un pequeño giro indicador si el Internet fuera lento.
Así es como obtuve esos resultados de noticias.
Si hago clic en los artículos, vean lo que estoy recuperando
OK, hola.
Siempre revise las noticias del día antes del curso.
Lo que veo aquí es un gran objeto JSON,
y todo está en una línea.
Es un poco difícil de ver.
Pero estoy seguro de que nos podemos desplazar por las noticias
más tarde y ver los artículos y las URL mismas.
Pero hay una pieza más de funcionalidad.
Todos nosotros hemos visto la función autocompletar en nuestros navegadores,
porque normalmente recuerda lo que hemos escrito previamente.
Un autocompletado más poderoso se basa
no en lo que los usuarios escribieron en el pasado, sino en lo que pensaremos en el futuro
que podrían escribir.
Si realmente quiero buscar 02138,
noten que puedo reducir la lista de todas las ciudades en EE. UU. para que pueda
hacer clic en ese autocompletado.
Ahora tenemos un localizado el mapa del área de Cambridge
donde puedo obtener las noticias locales de nuestra área.
O no tengo que buscar solo por código postal,
Puedo escribir New Haven, Connecticut y obtener cualquiera de sus códigos postales
y de manera similar teletransportarnos ahí.
Entre los desafíos está el descargar un archivo bastante grande, un archivo
de texto, llamado us.text, en el cual hay muchos de nombres y estados de ciudades
y códigos postales, importarlos en su propia base de datos similar a SQL,
implementar algunas rutas para que pregunten a nuestra base de datos cuáles
son las pocas ciudades a la vista y cuál es la noticia actual en esta área,
después usar JavaScript y las ideas de hoy, unir toda esta funcionalidad
para mezclar todas estas ideas diferentes en un resultado final,
el último.
Eso es todo por hoy.
Me quedare para contestar preguntas personalizadas.
De lo contrario, nos vemos a la próxima.