[Powered by Google Translate] [Semana 9] [David J. Malan - Harvard University] [Esta es CS50. - CS50.TV] Está bien. Bienvenido de nuevo. Esto es CS50, y este es el comienzo de la semana 9. Hoy nos centramos en particular en el diseño, ya no en el contexto de la C pero en el contexto de PHP y un poco de SQL y un poco de JavaScript, especialmente hacia el fin de los dos pset 7 y también su proyecto final. De hecho, si usted está en ese punto en el proyecto final donde presumiblemente a partir de una hora o así que hace que por lo menos empezamos a pensar un poco a su proyecto final y estás pensando que te gustaría colaborar con 1 o 2 compañeros de clase, si usted está teniendo problemas para conectarse con dichos compañeros, no dude en rellenar el formulario en cs50.net/partners/form. Simplemente te pregunta quién eres, qué tipo de proyecto que usted está pensando, donde vive sólo por razones logísticas. Y luego, si desea mantener un ojo en la próxima semana o así que la URL de hoja de cálculo allí, A continuación, puede ver una versión de sólo lectura del documento de Google Docs en el que estamos recogiendo esa información. Así que si usted quiere trabajar con alguien, por todos los medios no dude en acercarse a la gente a través de ese mecanismo. Pero la mayoría de la gente hacer solo trabajo. Eso es totalmente bien. Así que no creo que esto es de alguna manera obligatoria. El viernes era sólo yo y unos pocos del equipo de aquí, teatro vacío en su mayor parte. Hubo 3 turistas sentado ahí arriba, así que fue un poco incómodo. Lo que hablaba era de bases de datos y hablamos de pset 7 un poco. Y si no fue así para capturar en video que por el momento, eso está bien. Voy a tratar de definir los términos que de otra manera sería dar por sentado basado en conferencia del viernes. 

Pero hoy vamos a tratar de llegar al punto de no sólo ser capaz de hacer algo así pset 7 pero realmente entender lo que está pasando debajo de la campana, en particular algunas de las abstracciones que hemos puesto en marcha en el archivo functions.php para hacer su vida un poco más fácil, pero por lo que entiendo que en última instancia de modo que cuando las ruedas de entrenamiento salir en un par de semanas usted todavía puede sobrevivir en el mundo real y hacer estas cosas sin un marco CS50 debajo de usted. Este $ _SESSION, para aquellos de ustedes que están familiarizados o que ya cogido el video el viernes, ¿qué vamos a hacer SESIÓN en una aplicación web basada en PHP? Esta es una variable superglobal, lo que significa que es similar en espíritu a GET y POST y algunos otros, pero ¿qué es esto útil? 

¿Cuál es SESIÓN utiliza? Si. [Estudiante] Logueandote ¿Cómo dice? [Estudiante] Logging in Logging in Indeed. En pset 7 que estamos usando este superglobal sesión para facilitar la tala pulg Y lo que es bueno de este superglobal es que es una matriz asociativa. Una matriz asociativa, recordar, es sólo un conjunto, pero cuyos índices ya no tienen que ser números como 012. Ellos pueden ser números o pueden ser incluso cadenas. Y lo que si ha buceado en pset 7, sin embargo, se recordará que estamos almacenando un ID de clave llamada dentro de esta matriz asociativa cuyo valor es algo así como 123 - cualquiera que sea el iniciado sesión ID de usuario es. El motivo de esto es que incluso después de que el usuario ha visitado localhost o mi sitio web en general y que han iniciado sesión, incluso si no hace clic en un enlace o volver a mi sitio web durante 5 minutos o incluso una hora o incluso un día, pero dejan su ventana del navegador abierta, a través de este superglobal puedo recordar que se ha autentificado 

En otras palabras, lo que me permite almacenar cualquier cosa un poco largo plazo Quiero acerca de un usuario. Y usted puede pensar que es realmente como la encarnación de un carrito de compras. Sitios como Amazon, obviamente, vamos a poner las cosas en un carro de compras, pero HTTP, el protocolo que alimenta la Web, es apátrida en el sentido de que cuando usted visita un sitio web, en su mayor parte no tiene algún tipo de conexión de red permanente entre su navegador y el servidor. Tan pronto como usted haya descargado el código HTML y JPEG y GIF las y los de todo, que la conexión desaparece y sólo hay una copia del código HTML y otras cosas desde el servidor. Pero si el servidor quiere recordar algo acerca de usted, la carga está en el servidor para registrar realmente esa información. Y por lo que el programador que tiene control sobre el servidor puede poner casi cualquier cosa que quieras dentro de esta matriz asociativa superglobal y que estará allí la próxima vez que el usuario vuelve, si se trata de minutos o incluso días más tarde, a menos que cerrar la ventana de su navegador, en la que SESIÓN punto desaparece. Así que es efímero almacenamiento, es no persistente, y que está destinado a desaparecer tan pronto como el usuario cierra su navegador - no sólo esa pestaña, a menudo el navegador entero, lo que efectivamente el registro el usuario fuera. Entonces, ¿cómo es esto en realidad práctica? Echemos un rápido vistazo a un ejemplo sencillo vimos el viernes. Para aquellos no familiarizados, es tan simple como esto. Esta es una página web cuyo único propósito en la vida es que me digas cuántas veces he visitado esta página. Esta es la primera vez hoy aquí que la visité, por lo que dice 0 veces. 

Pero si empiezo a volver a cargar esta página, se dice 1 hora, 2, 3, 4, 5, y esto finalmente se acaba de seguir contando hacia arriba, arriba, arriba, arriba, arriba por cada vez que haga clic en Actualizar en realidad en él. Entonces, ¿cómo es este trabajo? Déjame ir dentro de este archivo llamado counter.php. La parte superior de la misma es todos los comentarios azules, pero la parte interesante está aquí. En la línea 13 se llama session_start esta función, y que es, literalmente, todo lo que tienes que hacer si quieres tener acceso a este superglobal especial llamada $ _SESSION. Eso hace que todo sea posible, y veremos cómo en un momento en que todo es posible. En la línea 16 aviso de lo que estoy haciendo. Si la clave, llamado contra - en otras palabras, el valor del índice - "contador" existe dentro de esta matriz llamada SESSION, entonces ¿qué estoy haciendo con él en la línea de abajo? ¿Cuál es la línea 18 va? 

[Respuesta de los estudiantes inaudible] ¿Qué es eso? [Estudiante] Almacenar el valor. Bueno. Se almacena el valor que está en sesión en este momento en una nueva variable temporal local, $ Contador en minúsculas. Tenga en cuenta que PHP ya está siendo un poco perezoso aquí. Tenga en cuenta que no tenemos ninguna mención de int o float o cadena ni nada de eso debido a que PHP es tipos débiles, por lo que no es necesario especificar el tipo de una variable, y en este caso aquí no he siquiera lo declarado todavía. Lo estoy declarando dentro de estas llaves ya diferencia de C, esto es realmente bueno. No importa cuán profundamente anidado declaración de una variable es en PHP - dentro de llave, dentro de llave de cierre y similares - será en ese momento en el tiempo existe para el resto del programa, para bien o para mal. Así que inmediatamente se convierte en global tan pronto como usted lo define como estamos haciendo aquí. 

De lo contrario, si no me parece que haya nada en el superglobal REUNIÓN, Estoy aparentemente inicializar esta variable contador a 0, por lo tanto sólo suponiendo que el usuario nunca ha estado aquí antes. Y después de este curso es incrementar el contador, ¿cómo? Estoy actualizando el valor que hay dentro de esta matriz asociativa fijándola igual a lo que actualmente es contador + 1. Si me desplazo hasta aquí para el código HTML de la página, en realidad es bastante simple. Todo lo que tengo en el cuerpo de esta página es: "Usted ha visitado este sitio veces fulano de tal". Y este es un constructo PHP. Si lo hace <? =, Esto es equivalente a lo que efectivamente funciona? Realmente es equivalente a algo así como printf, que hemos visto muchas veces en C, aunque, como ustedes saben ya de la especificación en pset 7, impresión es también una función que sólo imprime algo, en realidad no utilizar códigos de formato, y en realidad se puede decir que echo también. Son todos muy ligeramente diferente, aunque el efecto neto es en última instancia el mismo. Así que este uso del signo igual es sólo una especie de una manera elegante de hacerlo más brevemente de lo que de otro modo podrían ser capaces de hacerlo. Así que eso es todo lo hace este sitio web. Se imprime el valor del contador. ¿Cómo es que todo esto realmente suceda? Usted puede recordar una semana o así que hace que empezamos a buscar debajo de la capucha la forma en que una página web funciona mediante el uso de esta ficha Inspector. 

Chrome tiene esta tanto en la versión para Mac, la versión de Windows, e incluso la versión de Linux, y Firefox e IE tienen mecanismos similares mediante el cual usted tiene este depurador integrado dentro del navegador. Vamos a echar un vistazo a la siguiente. Tenemos un montón de fichas de aquí, y recordar que la izquierda es un Elements, y no importa lo espantosa el código HTML y JavaScript en una página, Recordemos que con la pestaña Elementos en realidad se puede navegar por el código HTML jerárquicamente y agradable y ordenada. Así que si usted está tratando de aprender de un sitio web como Google o Facebook o en realidad cualquier sitio web, cuenta de que usted está probablemente mejor mirar el código fuente de esta manera en lugar de ver la fuente de crudo, que puede ser un desastre, como hemos visto, especialmente en el sitio de Google. Así que si en vez haga clic en la ficha Red aquí, vamos a ver lo que está pasando en mi visita a esta página. En primer lugar quiero limpiar mi caché. Voy a ir a Ajustes en Chrome y luego ir a la Historia y luego Borrar datos de navegación. Puede ser utilizado para hacer esto para otros fines, [risas] pero cuando se trata de desarrollo de sitios web, es realmente útil - si te ríes tú sabes. [Risas] De hecho, es muy útil en el desarrollo de sitios web porque la realidad es cosas como galletas y cosas por el estilo en caché los archivos HTML en caché, archivos JavaScript puede llegar a ser un gran dolor de cabeza, ya que si por cualquier razón el navegador decide almacenar en caché algún archivo y, sin embargo usted ha realizado cambios en el archivo en el servidor pero el navegador no se ha dado cuenta realmente de que el archivo ha cambiado y por lo tanto no es realmente volver a descargarlo, incluso cuando usted haga clic en el botón Actualizar, una de las formas más seguras de hacer sólo que la culpa no es de su código, es con el comportamiento del navegador, es ir en aquí en tu navegador y simplemente borrar el historial completo para que no haya confusión. 

Y entonces, si usted realmente quiere ser paranoico, salga del navegador, reinicia, y luego asegurarse de que todo está funcionando como se esperaba. Así que en resumen, caché de compensación es bueno cuando se hace el desarrollo. Así que aquí tenemos la pestaña Network. Yo había visitado previamente el sitio de 9 veces, pero déjame seguir adelante ahora y haga clic en Actualizar. Y estoy de vuelta a 0. Vamos a ver realmente cómo es que este superglobal sesión está siendo implementado. Voy a hacer clic en la solicitud de un HTTP que se hizo, y esta ventana de depuración me permite mirar dentro de eso. Aquí veo sólo la respuesta del servidor, que no es interesante. He visto esto en cualquier número de maneras. Pero lo que es técnicamente interesante son las cabeceras. Si me desplazo hasta aquí y se centran en las cabeceras de petición y haga clic en Ver código fuente, lo que voy a ver es, literalmente, la petición HTTP que acaba de ir de mi navegador al servidor, GET es la palabra clave y, a continuación, / counter.php siendo el nombre del archivo HTTP/1.1 sólo es la versión de HTTP que el navegador está usando. Esta línea aquí es un pequeño recordatorio desde el navegador al servidor cuál es el nombre del servidor es que quiere hablar. Y a continuación, el resto de este es a veces interesante, pero no es relevante en este momento. 

Esto es sólo una especie de curiosidad. Cryptic aunque esta cadena es, en cualquier momento de su navegador visita una página web se informa al servidor el navegador que está utilizando y qué sistema operativo que esté utilizando y qué versión de la misma. Así que si alguna vez se preguntó cómo los sitios web como CNN y otras cosas saber cuáles son los porcentajes de usuarios de Mac en los usuarios de PC, Web, Usuarios de Internet Explorer, los usuarios de Chrome y similares, es porque todos los navegadores están diciendo a todos los sitios web solo por ahí lo que somos. No necesariamente contienen información de identificación personal, pero sí indicar al servidor cuál es su dirección IP es y qué navegador y sistema operativo que esté utilizando. Así que ahí es donde esta información. Pero lo que es más interesante ahora, cuando se trata de estas sesiones es la cabecera de respuesta. Déjame ver el código fuente, haga clic en siguiente a la respuesta. Lo que es interesante aquí es algunas cosas. 1, tenemos un código de estado de 200. Nunca vemos este código de estado porque eso significa que todo está bien. Significa, literalmente, bien en contraste con otra cosa. ¿Qué es un número que a veces vemos que eso es malo? [Estudiante] 404. 404, archivo no encontrado, 403 usted puede ser que ya tropezar, lo que está prohibido, lo que significa que usted se olvidó de algo chmod, lo más probable. Y hay un montón de otros. 

Aquí abajo, esto es un poco loco. Me acabo de escribir este archivo hace unos minutos pegándola en gedit. ¿Por qué esta página expira en 1981, antes de que realmente era una Web? ¿Qué está pasando ahí? 

[Respuesta de los estudiantes inaudible] La marca de tiempo. Pero ¿por qué? Es algo arbitrario, pero es realmente útil. Lo que esto nos dice a mi navegador es el archivo PHP que acaba solicitado ya haya expirado. De hecho, expirado hace 30 años. Pero, ¿qué significa eso realmente? Sólo significa que la próxima vez que el usuario visita esta página, ya sea por carga o escribiendo la URL en la barra de direcciones, asegúrese de ir a buscar una nueva copia de la misma. Esta es una especie de un ejemplo de almacenamiento en caché, una palabra estúpida que sólo significa tratar de disuadir a los navegadores de hecho HTML almacenamiento en caché que se ha enviado desde un servidor de modo que usted no golpea accidentalmente recarga y luego ver la misma versión del archivo. Usted realmente quiere que el servidor envíe una copia nueva. Así que el hecho de que es 1981 sólo significa que eso es lo que el aparato está eligiendo como una fecha arbitraria en el pasado. Pero lo real es jugosa ahora esta. Incluso antes de los 50 es probable que vagamente familiarizado con las cookies. A partir de ahora, sobre todo entre los menos cómoda o en el medio, ¿qué es una cookie en su comprensión en este momento a pesar de que estamos a punto de hacer de su conocimiento más técnico? ¿Qué es una cookie? Si. [Estudiante] Información sobre el usuario, como si han escrito su nombre de usuario o algo así. 

Bueno. Es una información sobre el usuario, ya sea que haya escrito en su nombre de usuario ya. Las cookies son un medio por el cual los servidores pueden recordar algo acerca de un usuario. Y lo que realmente es una cookie es un archivo de texto o de alguna secuencia de bytes que está emplazada a un servidor dentro de su navegador, y dentro de ese archivo o entre los bytes es algún tipo de identificador. Tal vez sea literalmente su nombre de usuario, pero más a menudo es algo más críptico de aspecto como esta cosa aquí - bo8dal3ct y así sucesivamente - esta cadena alfanumérica muy grande que realmente sólo pretende ser un identificador único para ti. O usted puede pensar en él como una especie de sello de mano virtual. Si usted va a un club o un parque de diversiones, recordar que usted ha pagado y entrado, le pusieron una pegatina roja en la mano de algún tipo, y que recuerda a la gente en el mostrador que ya has pagado y que pueda entrar y salir cuando quiera. Las cookies son un poco similares en espíritu a eso. La primera vez que visité este sitio web, como acabo de hacer después de limpiar mi caché, el servidor web, el aparato en este caso, poner un sello en mi mano cuyo nombre es PHPSESSID, ID de sesión, cuyo valor es la cadena alfanumérica muy largo. 

Así que ahora es una especie de estampado en mi mano para que la próxima vez que me golpeó recargar o manualmente visitar esta URL en el navegador, mi navegador por definición de HTTP se va a presentar el sello en la mano una y otra vez y otra vez. Así que, aunque el servidor no tiene por qué saber quién soy, que por lo menos sé que soy el mismo usuario o por lo menos, más concretamente, el mismo navegador. Y esto es en última instancia cómo el superglobal sesión se implementa. El servidor no tiene idea de quién es usted cuando vuelva a visitar un sitio web para la segunda o tercera vez menos que usted presente este sello en la mano. Y tan pronto como usted presente que sello en la mano, el servidor web esencialmente entra en una pequeña base de datos de su propio y los cheques, vale, acabo de ver el sello de la mano de bo8dal3ct usuario y así sucesivamente. Déjame ver la información que el programador ha almacenado dentro de la superglobal sobre este usuario, y luego dejar que me asegure de que esos datos son de nuevo dentro de la sesión superglobal de modo que el programador puede volver a acceder a esos datos incluso si se ha establecido algunos minutos u horas antes. Así que en otras palabras, las galletas, que ha recibido una mala reputación desde hace algún tiempo a causa de la inseguridad en los navegadores y que realmente puede violar nuestra privacidad y todo esto, en realidad tienen una gran utilidad ya que sin ellos que constantemente se inicie sesión en cada página Facebook visitas o todos los correos electrónicos de Gmail que leer si el navegador no tuviera alguna manera de recordar que ya ha autenticado. 

Así que de esta manera se envían las cookies de ida y vuelta a través del cable. Otra curiosidad acerca de las cookies, sobre todo aquí, es que esto es completamente sin cifrar. No hay cifrado pasando aquí en absoluto, y de hecho estoy usando HTTP en el momento. Uno de nuestros momentos favoritos en CS50, que ahora es de 2 años, fue alrededor del tiempo de una herramienta llamada Firesheep salió. Este era un fanático de la descarga que fue hecho por un investigador de seguridad como una llamada de atención para la comunidad de decir cuán atrozmente implementado ciertos mecanismos de autenticación en la red eran. Así por algún tiempo, Facebook era casi enteramente a través de HTTP, HTTPS no. E incluso si usted no tiene idea de cómo funciona el cifrado, S es seguro lo que significa que hay por lo menos algunos cifrados. Facebook se utiliza para cifrar los nombres de usuario y contraseñas, pero tan pronto como lo hiciste con tu pokes o sus mensajes o su servicio de noticias, todo eso fue sin cifrar. Así fue hasta que Gmail sólo un año o dos atrás. Cada vez que usted ha entrado en sí, que utiliza cifrado seguro pero después no lo hicieron. ¿Y por qué podría ser? ¿Por qué no utilizar la criptografía todo el tiempo en los casos de uso de este tipo? ¿Qué es eso? Creo que he oído algo. [Estudiante] Velocidad. Velocidad, ¿no? Hay maneras de evitar esto. Pero si sólo un poco de pensar en ello, lógicamente, si cifra algo, lo que tienes que hacer por lo menos un poco más de trabajo. En pset 2 cuando usted implementa César o Vigenére o grieta, incluso, sólo imprime una cadena es relativamente fácil. Cifrar y luego imprimir una cadena mínimamente requiere un poco más. 

 Para los súper populares sitios web como Google y Facebook, si usted tiene que hacer más trabajo para cada usuario para cada página web única que visitan, que sólo se necesita más tiempo de CPU. Y si usted necesita más tiempo de CPU, es posible que necesite más servidores, lo que significa que usted puede ser que necesite más dinero. Y así, durante muchos años, este realmente no era la mejor práctica. La gente utiliza cifrado SSL sólo cuando era necesario. Pero resultó, y como este tipo con Firesheep hizo súper clara, cuando ustedes que se encuentran actualmente en Facebook en este momento - Por curiosidad, a ver si va a confesar. Si estás en Facebook ahora mismo en alguna pestaña, incluso si no está en primer plano, es la dirección URL HTTP o HTTPS? [Los estudiantes] varias S. S? [Risas] Bien. Cualquier HTTP? A sólo 1? Bien. Así que todos podemos hackear cuenta de ese tipo Facebook en estos momentos. En su mayor parte, esto se ha convertido activada de forma predeterminada, por lo menos en algunos sitios web. Y cuento largo, si el tráfico de su web no está cifrada, no sólo el código HTML ir y venir a través de las wifis sin cifrar, así que cosas como las galletas van y vienen todo el aire sin ningún tipo de encriptación. Así que si tienes un poco de sentido común de programación o un poco de google habilidades para encontrar software libre que hace esto, lo único que tienes que hacer es sentarse en Starbucks o sentarse en un aeropuerto donde hay generalmente no cifrado WiFi y mira por palabras claves como Set-Cookie: o PHPSESSID porque si usted tiene el conocimiento técnico para ver sólo el WiFi para todos los bits que fluyen a través del aire para este patrón, entonces se puede decir que PHPSESSID chico resulta ser bo8dal y así sucesivamente. Y luego otra vez si eres lo suficientemente experto en tecnología o tener la herramienta adecuada, a continuación, puede simplemente volver a configurar su propio navegador para iniciar la presentación de ese sello en la mano a Facebook.com, y Facebook es sólo va a suponer que usted es ese tipo porque todo lo que saben no es lo que eres, sino que tiene el siguiente identificador único. Así que si usted roba ese identificador único y presentarlo al servidor web como el suyo propio, que sólo se va a mostrar a esa persona feed de noticias o de esa persona mensajes o toques. 

Y yo haría Google ahora cómo activar HTTPS en Facebook, tal vez. Pero realmente es tan simple como eso. Y así, Facebook y Google y similares se han puesto realmente bueno en esto, pero mantener un ojo hacia fuera aún más por los sitios web que visite que no utilizan HTTP y tienen algún tipo de información sensible en ellos, ya sea financiera o personal o similar. Si no está utilizando esta, muy posiblemente puede ser galletas como este muy fácilmente robados y luego forjada, y eso es exactamente lo que hizo Firesheep. Usted no tiene que ser un programador. Todo lo que tenía que hacer era tener una conexión a Internet, descarga esta herramienta gratuita, y lo que haría es que se conecte y luego le mostrará los nombres de Facebook de todos en Sanders, en esta demostración particular, a su alrededor y todo lo que tenía que hacer era hacer clic en su nombre y el software automatizado el proceso de oler esa cookie, presentando a Facebook como el suyo propio, y, voila, usted está registrado Así que este es otro de esos "no hagas esto" oficialmente. Si usted tiene su propia red doméstica y desea retocar, por todos los medios, pero se dan cuenta que esto hace cruzar la línea en un entorno universitario. 

Pero el objetivo aquí es realmente para destacar no cómo hacerlo pero la forma de defenderse de este tipo de cosas. Y la solución trivial aquí, a pesar de que ella misma es defectuosa, es reducir realmente el uso de sitios que no utilizan HTTPS constantemente. Así que sitios como Facebook y Google tienen cada vez más casillas de verificación donde se puede optar por este tipo de cosas, y los bancos han tenido esto durante años por razones similares. Así que un poco de un factor de miedo si podemos. Pero eso es en pocas palabras. Así es como un servidor recuerde quién es usted. Y tan pronto como puedan recordar quiénes son, pueden recordar nada de ti que el programador ha almacenado en el interior de este superglobal especial llamada $ _SESSION. Y para pset 7 lo estamos usando trivialmente sólo para recordar un int, a saber, la identificación única del usuario que ha iniciado sesión, por lo que sabemos que han estado allí antes. Cualquier pregunta entonces sobre las sesiones o las cookies o similares? Firesheep no funciona tan bien ya, y tienes que poner el equipo en un modo promiscuo especial por lo que en realidad estás escuchando el tráfico además de ustedes mismos. Así que si usted está descargando actualmente Firesheep, hazlo realidad no es tan fácil como lo era antes de demostrar. Está bien. Y no lo hacen en Sanders. Hazlo en casa. Bases de datos. Una de las cosas que hicimos en el conjunto de procesadores 7 muy deliberadamente Se le dará una tabla de base de datos de la muestra para los usuarios que tiene algunos identificadores de usuario, algunos nombres de usuario, contraseñas encriptadas y algunos en el mismo. Y como verás, si no lo ha hecho, usted va a tener que cambiar la mesa un poco. Vas a tener que añadir un poco de caché para cada uno de los usuarios en esa mesa, y vas a tener que agregar otra tabla de historia, una mesa de carteras, o tal vez llamarlo de otra manera. Pero en términos de pensar acerca de cómo hacer esto, vamos a abrir esta herramienta que utilizamos el viernes, pero si no familiar, el aparato viene con una herramienta phpMyAdmin que se llama casualmente escrito en PHP, pero su propósito en la vida, después de iniciar sesión aquí como jharvard con carmesí, es que me diera una manera fácil de usar de ver y cambiar mi base de datos. 

La base de datos que estoy corriendo en el dispositivo que se llama MySQL. Esto es muy popular, y es una base de datos de código abierto que es maravillosamente fácil de usar, especialmente con extremos delanteros de esta manera. Lo que esta herramienta me permite hacer, por ejemplo, es hurgar tablas. Déjame ir adelante y hacerlo. El viernes creamos una tabla llamada alumnos que era super simple. Tenía 3 columnas - id, nombre y correo electrónico - y se inserta manualmente un par de filas como David y Mike en este ejemplo particular. Veamos esto un poco más, y vamos a suponer que queremos recordar más que sólo el nombre y el correo electrónico de un usuario. Permítanme haga clic en Estructura aquí en la parte superior. Y otra vez, el conjunto de procesadores le guía por los pasos necesarios aquí, así que no te preocupes si algo de esto es un poco rápido. Entonces voy a hacer clic aquí. Voy a añadir un cierto número de columnas que siguen email porque quiero añadir algo como casa. Me olvidé de registrar la casa de un estudiante. Permítanme hacer clic en Ir, y ahora tenemos esta forma que por desgracia es un poco amplio de izquierda a derecha, pero yo voy a llamar el nombre de esta casa de campo, y entonces el tipo que ahora tiene que elegir. Así que vamos a tener una breve charla sobre los distintos tipos de MySQL porque mientras que PHP es tipos débiles y que tipo de juega rápido y libremente con los tipos, en una base de datos especial que es super importante usar realmente escribiendo a su ventaja porque una de las cosas MySQL y otros motores de base de datos puede hacer por usted es asegurarse de que usted no pone datos falsos en su base de datos. Esta es una especie de error de cheques gratis a su disposición. 

En casa somos nosotros, obviamente, no queremos que sea un int, que es un valor de 32-bit en MySQL. Hicimos hablar brevemente el viernes sobre varchar, que significa carbón longitud variable. ¿Qué es esto? Esto le permite especificar que desea que se trata de una cadena de algún tipo. No se sabe muy bien de antemano cuánto tiempo es, por lo que voy a decir arbitrariamente un nombre de la casa puede ser de 255 caracteres, pero se puede ir con 32, 64 - un número realmente. Pero la ventaja de utilizar un varchar sobre un campo llamado char es lo que? Sólo intuitivamente si me desplazo hasta aquí, note que hay char y varchar hay. Varchar es la longitud de caracteres variable; char es una longitud fija de caracteres. Así que basado sólo en esa definición, ¿cuál es la ventaja o desventaja de cada uno de estos? En otras palabras, que se preocupa por la distinción, o por qué te importa? 

Si. [Estudiante] Varchar tiene más flexibilidad, pero ocupa más memoria. Bueno. Varchar ocupa más - Vamos a ver. No estoy seguro si he oído ese derecho. ¿Se puede decir que una vez más? [Estudiante] dije varchar probablemente tiene más flexibilidad pero ocupa más memoria. Interesante. Bien. Varchar probablemente le da más flexibilidad, pero ocupa más memoria. Este último no es necesariamente cierto. Depende del contexto, pero vamos a volver a eso. 

[Respuesta de los estudiantes inaudible] Exactamente. De hecho, es el caso que char suele utilizar más memoria porque un char, como en C, es como una cadena, es una serie de caracteres. Así que si te dicen que un campo char de longitud 255, la base de datos es, literalmente, te va a dar 255 caracteres. Y si la casa termina siendo personajes Mather y 6 en total, usted está perdiendo más de 200 caracteres. 

Así que un varchar efectivamente sólo utiliza tantos caracteres como sea necesario hasta un importe máximo. Pero el precio que se paga es en realidad el rendimiento, potencialmente. Si usted sabe de antemano que todas sus cadenas van a ser de 8 caracteres - Por ejemplo, suponga que requieren contraseñas de longitud 8 - la ventaja de utilizar un campo char de vez en cuando, aunque no a menudo, es especificar una longitud fija para algo así como una contraseña porque ahora la base de datos puede ser aún más inteligente. Si se sabe que cada campo char, cada cadena en una columna es la misma longitud, a recuperar la función de acceso aleatorio. Usted puede saltar entre los campos char diversas en la tabla de base de datos porque pensar en una base de datos como filas y columnas. Así que si cada una de las cadenas de la misma longitud, Sabía usted que la primera es en el byte 0, el siguiente es el byte 8 y luego 16 y luego 24 y así sucesivamente. Así que si todas las cuerdas son de la misma longitud, puede saltar mucho más eficiente. Así que puede ser un beneficio en términos de rendimiento, pero por lo general usted no tiene el lujo de saber de antemano, por lo que un varchar es el camino a seguir. Aquí hay otro detalle que incluso Facebook encontré con el tiempo. Ints son geniales, y nos tipo de utilizarlos de forma predeterminada cada vez que queramos un número, pero es sólo 32 bits. 

Y a pesar de que Facebook no acaba de tener 4 mil millones de usuarios ahora, definitivamente hay algunas personas por ahí con varias cuentas o las cuentas que se han abierto y cerrado, y por lo mismo creo que Facebook hace unos años tuvo la transición de int que, como es bien llamado, bigint, que está a sólo 64 bits en su lugar. Así que esto también es una decisión de diseño. Usted sería increíblemente afortunado si su proyecto final se convierte en el inicio, Dispone de 4 millones de dólares y los usuarios 1, más o menos, en cuyo caso el uso ints podría ser un poco miope. Pero, en realidad, su tabla de usuarios está probablemente muy bien con ints. Pero para que algo como pset 7, como su tabla de historia, es posible que tenga miles, millones de usuarios si convertirse en etrade.com. Así que, puede que no tenga más de 4 mil millones de usuarios, aquellos usuarios que sí tienen pueden tener más de 4 mil millones de transacciones a través del tiempo - compra y vende y las cosas en su historia. Así que si usted hace prever - una vez más, estos son buenos problemas a tener si usted tiene esta cantidad de datos - si lo hace anticipar datos que superan el tamaño de un int, ir con algo como bigint es una dirección que no con la frecuencia suficiente adoptado por los diseñadores porque figura gente que no va a ser un problema, pero es tan fácil de elegir algo más grande que eso. Decimal que estamos usando en pset 7, que especifica la precisión fija por lo que puede evitar los problemas relacionados con los flotadores y dobles y reales y similares. 

Y luego hay algunos otros campos aquí. Vamos a agitar las manos en ellos hasta cierto punto. Sin embargo, las fechas, horas tienen un formato establecido en MySQL, y la ventaja de almacenar fechas como fechas y VARCHAR no significa que la base de datos en realidad se puede cambiar el formato en diferentes formatos, si un formato de EE.UU. o formato europeo o similar - sin embargo usted lo desea - mucho más eficiente que si se tratara de algo genérico varchar. Y luego hay algunos otros binario, varbinary blobs. Estos son objetos binarios grandes, y también puede almacenar datos binarios así como los datos geométricos en una base de datos. Pero para nosotros, por lo general va a importa enteros y VARCHAR y similares. Vamos a terminar con este ejemplo casa. Casa que voy a decir arbitrariamente en 255 caracteres. A continuación, el valor por defecto que pudiéramos hacer esto. Podríamos poner a todos de forma predeterminada en Mather House, por ejemplo. Así es como podríamos especificar que la base de datos debe asegurarse de que siempre hay alguien que tiene un valor. Pero voy a dejar que sea. De hecho, para las personas que viven fuera de la escuela y no en una casa, tal vez yo realmente desea especificar que el valor predeterminado de la casa es NULL, y luego tengo que marcar esta casilla y decirle a la base de datos que está bien si la casa del usuario es NULL. 

Una vez más, este es otro mecanismo de defensa que puede poner en su lugar por lo que no tienen ni siquiera para ponerlo en el código PHP necesariamente. La base de datos se asegurará de que las cosas son o no son NULL. Y por último, Atributos. Ninguno de estos son realmente relevantes. Binario sin signo - ninguno de esos son relevantes para una varchar. Index. ¿Alguien sabe o no recuerda o tiene una conjetura en cuanto a lo que es un índice por algo como la casa? También esto es en realidad una decisión de diseño importante y relativamente fácil. Para aquellos que aún no la han visto, el viernes hablamos brevemente sobre las claves principales. En una tabla de base de datos, una clave primaria es el campo o columna que identifica de forma única las filas en la tabla. Así, en la tabla actual que tenemos identificaciones, tenemos nombres y correos electrónicos. ¿Cuál de ellos es el mejor candidato para ser una clave principal, cuya función consiste en identificar de forma única las filas? Probablemente ID. Sin duda, también podríamos usar lo que sin embargo? Tal vez usted podría utilizar el correo electrónico debido a que en teoría es único a menos que la gente está compartiendo cuentas de correo electrónico. Pero la realidad es que si usted está utilizando un ID numérico como 1234, eso es sólo de 32 bits, mientras que una dirección de correo electrónico podría ser esta cantidad de bytes o bytes que este. Así que en términos de eficiencia de los identificadores únicos, que tiende a ser buena práctica sólo para utilizar un int incluso si usted tiene algún candidato cadena que sin duda podría utilizar. 

Para algo como la casa, esto no debería ser una clave principal porque entonces sólo una persona podía vivir en Mather y 1 persona de Currier y similares. Del mismo modo, esto no debe ser única. La diferencia entre el primario y único es que en el caso de nuestra tabla actual, ID sería primario pero el correo electrónico no es primario por la razón que acabamos de mencionar - rendimiento - pero todavía debe ser único. Por lo que aún puede forzar unicidad sin hacer la reclamación que es un súper campo primario importante. Pero este es bastante útil: Index. Si usted sabe de antemano por su proyecto final, para pset 7, o en general, que esta casa de campo va a ser algo que usted busca en un terreno usando la palabra clave de selección o de alguna otra cosa, entonces preventivamente puede decir la base de datos para trabajar su magia y asegurarse de que se crea en la memoria de cualquier estructura de datos lujo necesario para agilizar las búsquedas basadas en casa. Tal vez pueda utilizar una tabla hash, tal vez va a utilizar una lista enlazada. En realidad, se tiende a utilizar un árbol, a menudo una estructura llamada B-tree - no es un árbol binario pero el árbol B-- que es un árbol muy grande que se pueden ver en una clase como CS124, la clase de estructuras de datos. Pero en fin, usted no tiene que preocuparse de que al utilizar el software de base de datos inteligente. Usted puede simplemente decir, "Índice de este campo, así que puede buscar en él de manera más eficiente." 

Si deja este apagado y usted trata de buscar para cada uno en la base de datos que reside en Mather, que recaerá en búsqueda lineal. Y si usted tiene 6.000 estudiantes de licenciatura todos los que viven en una casa, usted va a buscar en toda la tabla para encontrar las Matherites, mientras que si usted dice Index, espero que sea algo cercano a una búsqueda logarítmica para encontrar este tipo de estudiantes. Esto es sólo una función gratuita para encender, a pesar de que viene a un precio de una cierta cantidad de espacio. Por último, el incremento automático, este campo AI, Sólo significa que si se trata de un entero y no quiere cuidar a incrementarlo usted mismo cada vez que hay un nuevo usuario, comprobar que, y cada usuario que se inserta automáticamente obtendrá una nueva identificación. Vamos a hacer clic en Guardar, y ahora vamos a encontrar ningún defecto con este diseño. Si entro en Browse, observe que tanto Mike y mi casa es NULL. Puedo utilizar phpMyAdmin para editar este manual. Yo puedo entrar aquí y escriba Mather y luego pulsa Enter, y ahora cuenta de la tabla es diferente. Pero note que podía hacer algo más también. Identificación de David es 1, así que de nuevo phpMyAdmin es una herramienta administrativa; esto no es algo que los usuarios son cada vez va a ver. Así que si en vez haga clic en la ficha SQL encima de la tapa - y otra vez, pset 7 le dará a conocer más de estas consultas - Me puede ejecutar manualmente el comando SQL Lenguaje de consulta estructurado Usuarios UPDATE SET casa = 'Pfoho' WHERE id = 1. Estas consultas SQL son, bien poco, bastante legible de izquierda a derecha. Actualización de la tabla de usuarios, establezca el campo llamado casa a Pfoho donde el ID del usuario es 1. O incluso podría hacer que email = 'malan@harvard.edu'. Mientras que únicamente me identifica, que pueden funcionar tan bien. Pero Identificación tiende a ser más alto rendimiento, por lo que vamos a hacer eso. Vamos, haga clic en Ir. Bueno, lecture.users no existe. ¿Cuál es mi error? ¿Cuál es la mesa en realidad se llama aquí? Se llama a los estudiantes simplemente porque eso es lo que hemos hecho hasta aquí arriba a la izquierda. Se llama a los estudiantes no los usuarios. Entonces haga clic en Ir ahora. 1 fila afectada. Consulta tomó 0,01 segundos. Si hago clic en Explorar ahora, ahora vive en Pfoho Malan. Así que esa es otra muestra de SQL, pero el conjunto de procesadores le guiará a través de más un poco de eso. 

Hay una decisión estúpida que ya he hecho aquí. Yo diría que este diseño de base de datos es ineficiente porque cuantas más personas que se suman a la mesa de los estudiantes, los más de nosotros que empezar a añadir, más de la TFS que empezar a añadir, vamos a empezar a ver lo que los despidos en esta mesa? 

Si. [Alumno] Viendo que está en los estudiantes, estamos usando la misma [inaudible] Lo mismo - Claro, exactamente. Entonces, si 400 personas viven en Mather, más o menos, finalmente esta tabla va a tener 400 filas que dicen "Mather", "Mather," "Mather", "Mather", "Mather". Estamos perdiendo todos estos bytes, y hay un par de robos de balón allí. 1, está el caso de la esquina loca en la que si alguien paga un montón de dinero y cambia el nombre Mather, ahora tenemos que cambiar nuestra tabla de base de datos completa. Eso no va a ocurrir a menudo, aunque Pfoho una vez fue llamado North House hace 15 años, así sucede. Pero eso no es todo lo que convincente. Más convincente que un caso como ese rincón de la necesidad de actualizar los datos de forma masiva para una base de datos es ¿por qué almacenar MATHER una y otra vez y otra vez y otra vez? Eso es un montón de caracteres, 6 caracteres. ¿No podemos hacerlo mejor que eso, especialmente para Pforzheimer? Seguro que podemos hacer algo mejor que ese número de caracteres. ¿Por qué no asociar un identificador único a cada casa y la tienda que para cada usuario? Así que vamos a probar esto. En lugar de utilizar la tabla de los estudiantes, déjame ir a mi base de datos de lectura hasta aquí arriba a la izquierda. Nótese aquí que dice Crear tabla. Vamos a crear una tabla nueva llamada casas. El número de columnas va a ser 2. Intro. Ahora tengo dos campos. Voy a llamar a esto el nombre, y que va a ser un varchar de longitud 255, 

pero eso es bastante arbitraria. Déjame poner esto aquí por convención. Así que ponga una identificación aquí. Vamos a dar a cada casa un identificador único. Vamos a dar a cada casa un nombre. Vamos a especificar que el identificador no está firmado sólo por convención de utilizar sólo números positivos. Vamos a seguir adelante y dar a este un campo de incremento automático por ahora. Y ¿necesitamos algo más? Vamos a seguir adelante y haga clic en Guardar. Ahora tengo una segunda tabla. Observe como un aparte este es el comando SQL ligeramente críptica que habría tenido que escribir manualmente si no se utiliza una herramienta administrativa como phpMyAdmin. Así que otra razón por la que lo utilice. Es algo maravillosamente útil pedagógicamente porque puede hacer clic en torno a y averiguar cómo funcionan las cosas con sólo copiar y pegar lo que phpMyAdmin hizo. Sin embargo, el comando CREATE TABLE es lo ejecutado justo, y aquí está mi mesa. Déjame ir adelante ahora y usar SQL primas en lugar de simplificar demasiado, haga clic en la pestaña Insertar. Déjame hacer INSERT INTO casas, y yo voy a decir el nombre de la casa va a tener un valor de 'Mather. Eso es todo. Esta sintaxis es un poco más críptica. Este es el nombre de los campos que desee insertar. Estos son los valores que queremos insertar en esos campos. Permítanme hacer clic en Ir. 1 fila insertada tomó 0,02 segundos. Permítanme haga clic en Examinar ahora. 

Observe si hago clic en Examinar, hay Mather, cuyo ID es la automatización del número 1. Permítanme hacer otro. Déjame ir a la pestaña SQL. INSERT INTO casas. El nombre de la casa va a tener un valor de Pfoho y así sucesivamente. Go. Y puedo seguir haciendo esto una y otra vez y otra vez. O si te aburres con phpMyAdmin, puedes usar la pestaña Insertar y no tener que escribir el código SQL en bruto. Usted sólo puede golpear a cabo con mayor rapidez al escribir, por ejemplo, Currier, Enter, y ahora, si hacemos clic en Examinar, hay Currier con un diámetro interior de 3. Así que esto es lo que queremos decir con incremento automático. Pero ahora tenemos que arreglar algo en los estudiantes. En lo que a los estudiantes si el tipo de datos del campo casa ahora ser? Debe ser un entero, ¿no? Así, el objetivo aquí es para excluir, también conocido como normalizar, las tablas de modo que nosotros no almacenamos información redundante en ninguno de mis cuadros. Y de nuevo, el camino que estaban aquí va a decir Mather, Mather, Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, que es muy redundante en términos de despilfarro de los caracteres. Así que permítanme seguir adelante y cambiar esto haciendo clic en Estructura, y déjame seguir adelante y marcar el campo de casa, haga clic en Cambiar y ahora me voy a cambiar esto sea un int. 255 ya no es relevante. Déjenme seguir adelante y decir que está bien si todavía NULL. Guardar. Ahora los estudiantes de mesa ha sido alterado con éxito, y observe de nuevo la casa es un int. Como acotación al margen, ignora el número entre paréntesis cuando se trata de ints. 

Esto es por razones de herencia. De vuelta en el día en que no tenía GUIs, en su lugar había un entorno de línea de comandos, los 10 y 11, respectivamente, se especifican el número de caracteres que deben mostrar en la ventana de terminal para ver realmente los campos. No tiene nada que ver con la longitud en bits del campo real, por lo que sólo tendremos que hacer caso omiso de eso por ahora. Ahora tengo que entrar en esta tabla. Y si David vive en Mather, la casa no debe ser 0, que es un valor predeterminado int más cercano a NULL. Él debe vivir en la casa 1. Vamos a decir que arbitrariamente Mike vive en Pfoho casa, por lo que el número 2. Ahora mi mesa se ve un poco más críptico. Pero tenga en cuenta la eficiencia. Ahora estoy usando sólo 32 bits para identificar la casa, lo que significa que sólo hay una definición canónica de mi casa Mather y Pfoho y que está en la mesa de las casas. Así que si quiero a reunirse ahora estas tablas, pensar de esta manera. Aquí tengo mi mesa de los estudiantes, y en el lado derecho hay estos números, 1 y 2. 1 es Mather, 2 es Pfoho. Tenemos los mismos números en esta otra tabla, que se llama casas, 1 y 2 y 3 para las 3 casas. Lo que ahora quiero hacer es tener la capacidad en el código, PHP y SQL, a una especie de reunirse con estas tablas, en la que si estos son los estudiantes y estos son las casas, queremos de alguna manera de combinarlos para que uno se alinea con 1, 2 líneas con 2, y que por lo que podemos averiguar donde David y donde Mike y donde todo el mundo vive. Para ello, puede ejecutar una consulta SQL como la siguiente. SELECT * FROM estudiantes ÚNETE casas ON - ¿Y ahora qué campos queremos que se unan los? Así students.house = houses.id. 

Un poco críptico, sino que significa esta parte literalmente crear una nueva tabla temporal que es el resultado de unir a los estudiantes y casas. ¿Y cómo se quiere combinar la punta de los dedos en esta lista? Set de campo de casas iguales a las casas de los estudiantes "campo ID. Y si yo ahora haga clic en Ir, vuelva exactamente lo que yo esperaba. David está en Mather, Mike está en Pfoho, y también veo los identificadores únicos. Pero el punto es que ahora tengo una tabla completa. Y así, la comida para llevar aquí para pset 7 o realmente para el proyecto final: Si usted encuentra que usted está almacenando cualquier tipo de información redundante, si se trata de una casa, tal vez es una ciudad, estado y código postal donde ZIP puede por lo general, pero no siempre se utiliza como un identificador único, pasan por el ejercicio mental y luego con algo como phpMyAdmin de factoring que los datos comunes sobre todo porque la Página Web atrae más bien utilizado y más popular, esta es la forma de asegurarse de que todo es súper rápido, dando a la base de datos como muchas sugerencias en cuanto a la singularidad como sea posible. Eso era mucho. ¿Alguna pregunta? Está bien. Vamos a tomar un descanso de 5 minutos allí y reagruparse. Está bien. El siguiente es un ejemplo que se utilizó hace unos años cuando tomé CS161, que es la clase de sistemas operativos en el colegio que es conocido por ser increíble, pero una increíble cantidad de trabajo, y se concentra realmente en algunos de los problemas de bajo nivel que surgen en los sistemas operativos y también incluso en el mundo de las bases de datos. 

La historia que fue contada por mi profesor, Margo Seltzer, ese año fue el siguiente. Supongamos que usted tiene una nevera pequeña residencia para usted y su compañero de cuarto y los dos que realmente le gusta la leche. Así que llegas a casa de clase un día, su compañero de cuarto no es todavía allí, se abre la nevera, y te das cuenta, "Oh maldita sea, nos quedamos sin leche." Así se cierra la nevera, se puede caminar por la calle para CVS y obtener en las líneas cada vez más largas para comprar un poco de leche en CVS. Mientras tanto, su compañero de cuarto llega a casa de su clase, entra en la habitación, abre la nevera realmente quieren un poco de leche, abre la nevera y, "Maldita sea, no hay leche". Así que él o ella cierra la nevera, sale por la puerta, y se va a ABP o en algún lugar que no sea CVS en el que no vamos a chocar entre sí para ir a buscar un poco de leche. Por supuesto, unos minutos más tarde, los dos volver a casa y ahora usted tiene la leche dos veces más que en realidad quería. Y siendo la leche, ahora va a ir mal porque le gusta la leche pero no me gusta mucho la leche, por lo que ahora tiene mucha leche, así que va a agriarse. Esta es una situación horrible, horrible. ¿Qué podría haber resuelto esta situación si usted fuera el compañero de cuarto en casa por primera vez? Sí. [Estudiante] Debería haber dejado una nota. [Risas] Bueno. Debería haber dejado una nota. Usted debería haber puesto una nota Post-it o similar, diciendo: "Lo que para la leche" y luego su compañero de cuarto conceptualmente habría sido bloqueada de realmente hacer eso. O usted podría ir un paso más allá. Usted, literalmente, podría bloquear el refrigerador con una especie de candado, y ahora su compañero de cuarto, literalmente, se cerró la puerta de la nevera. Si generalizamos volver a la programación, casi se puede pensar en la nevera como una especie de variable o una estructura, algún tipo de contenedor de información. El problema fundamental aquí es que los dos se les permitió inspeccionar o leer el estado de esta estructura de datos, pero lo visto en diferentes momentos y sin embargo ambos se tomó una decisión basado en el estado del mundo en esos momentos diferentes en el tiempo. Así que te había bloqueado el refrigerador, habría al menos evitar su compañero de cuarto de haber sido capaz de inspeccionar el estado del mundo, para que él o ella no podría haber hecho la misma decisión. Entonces, bases de datos, como resultado, tienen este problema constantemente. 

Vamos a ver si podemos construir un escenario. Supongamos que eres una especie de chico malo y te vas a Bank of America o uno de los otros lugares en el cuadrado que tienen un lado par cajeros automáticos por lado, y de alguna manera descubrió cómo duplicar una tarjeta de cajero automático - no es tan difícil. Es sólo una banda magnética. Y por eso lo que quieres hacer es tratar de jugar a este juego mediante el cual se pone una tarjeta en una máquina, otra tarjeta en la máquina, y básicamente se quiere tratar de sacar dinero al mismo tiempo, porque imagino que la historia es la siguiente. La máquina de la izquierda toma su tarjeta y su PIN, y luego dices: "Dame 100 dólares". El cajero automático está programado para hacer primero una selección en su base de datos o su equivalente - cualquier base de datos que está utilizando - para ver qué este usuario tener al menos $ 100 en su cuenta? Si es así, entonces escupir los $ 100 y restar $ 100 de su balance. Pero por supuesto, si hay varias máquinas aquí o varias formas de inspección el Estado de ese mundo, la bóveda de un banco, para ver cuánto dinero usted tiene, supongamos que por casualidad la máquina a la izquierda y la derecha tanto esa pregunta casi al mismo momento en el tiempo. 

Y esto sí puede suceder. Los cajeros automáticos son las computadoras en estos días. Así que si la máquina de la izquierda dice: "Sí, usted tiene por lo menos $ 100" Mientras tanto, el equipo de la derecha dice: "Sí, usted tiene por lo menos 100 dólares" entonces ambos proceder a finalizar sus programas y, de hecho escupir los $ 100 y decir: "Anteriormente usted tenía $ 200." "Vamos a actualizar la variable a ser ahora $ 100 que queda en la cuenta." Pero si ambos han comprobado el saldo de su cuenta, hemos detectado que es $ 200 y dos de ellos luego hacer los cálculos y 200 dicen - 100, las máquinas potencialmente escupir dos billetes de $ 100 en cada máquina, pero sólo he actualizado el saldo de su cuenta a la suma de $ 100. En otras palabras, usted ha tomado fuera de $ 200, pero debido a que inspeccionó el estado del mundo simultáneamente y luego tomó una decisión sobre la base de ese valor, puede ser que no haga las cuentas en última instancia correctamente. Así que en una situación demasiado banco realmente desea tener algún tipo de bloqueo de modo que tan pronto como se haya comprobado el estado de alguna variable eso es muy importante, al igual que el saldo de su cuenta, No deje que otras personas tomen decisiones sobre la base de que hasta que haya terminado de hacer su cosa, donde en este caso es el cajero automático de la izquierda. Bloquee todos los demás fuera. En realidad se puede lograr este efecto en un par de maneras diferentes. 

La forma más sencilla de MySQL es una línea de SQL que le dio en la especificación de conjunto de problemas que se ve exactamente como esta. Inserte en la mesa - como se llame - un id, un símbolo, y compartir, un número de acciones, los siguientes valores, por ejemplo. Si usted no ha leído las especificaciones, sin embargo, este es un ejemplo relacionado con cómo usted va sobre la compra de 10 acciones de esta acción de penique para el presidente Skroob, cuyo ID de usuario pasa a ser el número 7? Esto dice INSERT INTO tabla el identificador siguiente, el símbolo y el número de acciones de 7, 'DVN.V', y 10. Pero - pero, pero, pero - la segunda línea es la importante. DUPLICADOS DE ACTUALIZACIÓN acciones clave = acciones + Valores (acciones). Así que totalmente de aspecto críptico a primera vista. Pero el hecho de que esta consulta SQL, a pesar de que se ajusta en 2 líneas, es una consulta de larga, esto significa que es atómica en el sentido de que esta consulta sea será ejecutado todos juntos o no en absoluto. Y por definición de MySQL, que es como se implementa esta consulta. Es, por definición, en el manual garantiza que ejecuta todo de una vez o en absoluto. La motivación para esto es la siguiente. Si en este caso usted está tratando de comprar 10 acciones, es una especie de la misma historia que la leche, es una especie de la misma historia que el cajero automático. 

Si comete el error de no utilizar esta sintaxis pero en lugar de seleccionar la base de datos para ver cuántas acciones de esta penny stock dice el presidente Skroob tener, y supongamos que tiene 10 acciones, y algo fracción de segundo más tarde, a continuación, hacer una instrucción UPDATE, que es otra declaración de SQL que dice seguir adelante y añadir 10 acciones más a su actual 10 idealmente de modo que el total es de 20, el problema se debe a que en los sistemas de bases de datos de hoy en día y debido a que en los ordenadores de hoy en día tiene varios procesadores, núcleos múltiples - en otras palabras, las computadoras, literalmente, puede hacer varias cosas a la vez - no hay garantía de que el SELECT y su actualización en este caso van a suceder una tras otra. Así que un mal escenario sería hacer el SELECT para ver cuántas acciones de esta acción de penique es Skroob tienen, y luego sólo por casualidad otra consulta de base de datos se ejecuta - tal vez su Skroob en otra ventana del navegador tratando de comprar 10 acciones en una ventana nueva del todo, al igual que el cajero automático - y supongamos que se mete en otra consulta SELECT y UPDATE entre el. Podría ser el caso que Skroob pierde ahora un cierto número de acciones porque otro proceso está inspeccionando el estado de su mundo, o se pone más acciones de lo que debería tener. No vamos a entrar en los detalles de exactamente cuáles son esas líneas de la historia en particular sería, pero el punto es que si usted tiene que comprobar un valor de variables y luego tomar una decisión, si hay un riesgo de que alguien más haciendo algo entre esos dos estados, como sucede en los sistemas multiprocesador, en sistemas multi-núcleo, equipos con la capacidad de hacer varias cosas a la vez, las cosas malas pueden suceder cuentas bancarias, como se efectúa el cargo incorrectamente, la compra de leche dos veces más, o en este caso el número equivocado de acciones. Pero hay una manera más fácil pensar en esto. 

Resulta que también es compatible con SQL, si configura su mesa correctamente, algo que se llama las transacciones, que yo diría que es incluso más fácil de entender que esto, pero no es un 1-liner, por lo que en realidad es un poco más complicado. Hay, literalmente, una declaración en SQL llamado START TRANSACTION. Al igual que hay SELECT, UPDATE, INSERT, DELETE y JOIN y un montón de otros, hay palabras claves como START TRANSACTION. Y lo que usted realice en el contexto del conjunto de procesadores 7 - usted no tiene que hacer esto para pset 7, es negada explícitamente que no es necesario, pero para proyectos de fin puede ser útil - si se llama a una consulta de START TRANSACTION y luego otra consulta y luego otra consulta y luego otro, otro, y otro, las consultas en realidad no se ejecutará hasta que se llama a la sentencia SQL COMMIT, momento en el cual, si se trata de dos declaraciones o afirmaciones 20, todos ellos serán ejecutados a la vez, lo que significa que nadie más puede querer comprar demasiada leche o débito demasiado dinero o recomprar acciones demasiados porque todas las consultas se ejecutará espalda con espalda a espalda con espalda. Y esto es super importante, sobre todo cuando estás haciendo algo como esto. Este es un ejemplo arbitrario que dice que vamos a actualizar la cuenta bancaria mediante el establecimiento de un equilibrio igual al saldo - $ 1000 donde el número de cuenta: 2. Y luego la segunda declaración es que ahora vamos a depositar que $ 1000 en la cuenta de otro banco cuyo número de cuenta: 1. 

En otras palabras, este es un ejemplo perfecto de donde usted quiere asegurarse de que ambos de estos estados ocurrir o no en absoluto porque de lo contrario el cliente se va a follar y usted va a tomar su dinero y no depositarlo en otra parte, o el banco va a follar a dónde va a depositar el dinero pero en realidad no lo restar de la cuenta del usuario. Así que usted quiere a ambos a ejecutar en conjunto. Así entra en las transacciones mundiales. Así que eso es algo a tener en la parte de atrás de tu mente, no tanto por los efectos de un proyecto final, pero si usted desea continuar con su proyecto final en algún lugar, si usted desea poner en marcha alguna empresa que lo rodea, si quiere resolver el problema de algún grupo de estudiantes en el campus y en realidad tiene un sitio web en vivo, activo, este es el tipo de errores sutiles que pueden surgir si no alcanzas a pensar a través de lo que puede suceder si 2 personas Está intentando acceder a su sitio web en, literalmente, en el mismo momento en el tiempo, por lo cual sus consultas de otro modo podrían quedar entrelazados. 

Preparado para algo de JavaScript, un teaser del mismo? Este es nuestro último idioma para el semestre. Está bien. Afortunadamente, JavaScript parece muy, muy, muy similar a los 2 idiomas, C y PHP, que hemos hecho hasta ahora. No hay ningún conjunto de procesadores JavaScript en 7, pero es una herramienta increíblemente útil cuando se trata de hacer basados ​​en la web los proyectos finales o en realidad sólo la programación web más general. Así que una rápida visión general de algo que se llama DOM. Aquí hay una página web súper simple que realmente sólo dice hola, mundo tanto en el título y en el cuerpo. Como la indentación ha estado sugiriendo durante algún tiempo, en efecto, hay una jerarquía de páginas web. Podía dibujar este fragmento de código HTML misma como un árbol, pensando en volver a nuestra discusión de las estructuras de datos en C, como se indica a continuación. Tengo algún nodo raíz especial llamado el nodo de documento, y vamos a ver la analogía de esto en JavaScript en un momento. El primer hijo y único hijo de que en este caso es la etiqueta HTML. No hay ninguna asignación directa del tipo de documento. Eso es algo especial, por lo que deberíamos ignorarlo cuando se trata de esta DOM, Este Modelo de Objetos de Documento árbol. Observe que la etiqueta HTML, que he representado arbitrariamente como un rectángulo, tiene 2 hijos: cabeza y cuerpo. 

Aquellos son igualmente elaborado en forma de rectángulos. Es significativo que la cabeza es gráficamente a la izquierda del cuerpo. La implicación es que la cabeza es lo primero en el árbol. Así que en realidad es un pedido para un árbol cuando lo dibuja como este, a pesar de que las formas y otras cosas son arbitrarias. Head por su parte tiene un hijo único llamado título, y el título en realidad tiene su propio hijo, que es "hola, mundo", que me atrajo deliberadamente como un óvalo aquí para que sea un poco diferente de la del rectángulo. Estos rectángulos son elementos, mientras que hola, mundo es en realidad un nodo de texto. Así que es un nodo en el árbol, pero es un tipo diferente de nodo así que lo sacó arbitrariamente diferente. Del mismo modo se tiene el cuerpo de un niño llamado hola, mundo, así, nodo de forma diferente aunque son casualmente el mismo texto, pero lo he dibujado con la misma forma. Entonces, ¿quién le importa? Bueno, lo bueno de HTML es que tiene este carácter jerárquico. Y lo que es bueno de JavaScript y en particular las bibliotecas que están libremente disponibles y populares como jQuery, puede navegar por la estructura de árbol tan increíblemente fácil. Cualquiera de las cosas que hicimos en C con los punteros y los árboles de desplazamiento y recursividad en los nodos hijo de la izquierda a la derecha niño, de repente podemos clasificar de dar por sentado por ser increíblemente iluminadora si no es un poco frustrante pero no casi una forma eficiente de ir sobre la programación. Y así, con estos lenguajes de alto nivel como JavaScript vamos a ser capaces de navegar por este árbol mucho más intuitiva. 

Y de hecho la sintaxis va a ser muy familiar. Si usted nunca ha visto antes de JavaScript, esta es una referencia muy agradable de la gente de Mozilla, la gente que hacer que Firefox, así que siéntase libre de navegar que a su conveniencia. Lo que vas a encontrar - y estas diapositivas son idénticos a los que se utilizó el otro día - Del mismo modo, la principal se ha ido. Así que cuando se escribe un programa en JavaScript, no hay una función principal. Usted acaba de empezar a escribir código. Sin embargo, una distinción clave entre JavaScript y C y PHP es que, mientras que C y PHP hasta ahora han sido ejecutadas lado del servidor por el aparato en este caso, o más generalmente, por un servidor, JavaScript por diseño normalmente se ejecuta en un navegador. En otras palabras, es posible escribir código JavaScript, ya que estamos a punto de, en un servidor en el aparato, sino que lo incluye entre su HTML, entre la CSS, entre sus GIFs y PNGs tus y tus JPEGs de modo que cuando el usuario visita su página web, si usted está utilizando JavaScript, que el código JavaScript llega desde el servidor al navegador, y es el navegador que realmente se ejecuta. Así que esto tiene implicaciones significativas para la propiedad intelectual, incluso. Es un poco tonto para pensar en la protección de su propiedad intelectual cuando se trata de código JavaScript ya que por la naturaleza de la lengua, el fichero es ejecutado normalmente lado del navegador. 

Se puede confundir, lo que significa que usted puede hacer que parezca una locura y lo feo sin espacios en blanco, horribles nombres de las variables, para que sea más difícil para la gente a robar su IP, pero la clave es que se ejecute lado del navegador. A pesar de que como parte del servidor a un lado JavaScript se puede utilizar, el caso de uso más común en este momento está todavía en el navegador. Y esto es lo que parece. He aquí un if-else if-else construir al igual que C, al igual que PHP. He aquí una expresión booleana cuando usted "o" las cosas 2 juntos. Aquí es cuando usted "y" 2 cosas juntas. Aquí es una declaración interruptor, que es similar a PHP en que se puede cambiar en diferentes tipos de valores. Loops similar para tener lazos aquí, que se estructuran de forma idéntica a lo que hemos visto antes. Mientras que los bucles; Tenemos que hacer bucles while. Variables, muy ligeramente diferente. Usted no declarar las variables como se hace en PHP y C, pero igualmente es JavaScript tipos débiles. No se especifica int o float o cadena ni nada de eso por lo general. Puede especificar var. Usted no tiene que especificar var, pero tiene implicaciones si no lo haces. Por lo general, si se omite var, que accidentalmente crear una variable global en lugar de local. Así que permítanme proponer que casi siempre acaba de decir var y luego el nombre de la variable. No es un tipo, que es sólo para la variable var. Este sería un ejemplo, ya sea 123 o "hola mundo". Las matrices están presentes y sintácticamente similar a PHP. Voy a decir números var y luego usar corchetes de nuevo para declarar una variable cuyo tipo es array que tiene estos números particulares en ella, separados por comas. Y luego, por último, esta es la única que realmente se ve diferente. Recordemos que en PHP que se han puesto en marcha una matriz asociativa para un estudiante como Zamyla que puede tener un aspecto como este, donde la variable se llama estudiante. Los corchetes significan aquí viene una matriz. 

El hecho de que no estoy usando índices numéricos sino cadenas - id, casa, y nombre - significa que se trata de una matriz asociativa, y estas flechas con el signo igual y el soporte angular significa que la clave es "id", el valor es 1; la clave está en "casa", el valor es Winthrop House; la clave es "nombre", el valor es Zamyla Chan. Así que hay tres claves dentro de esta matriz asociativa, cada uno de los cuales tiene su propio valor. Hemos visto que en el conjunto de procesadores 7, o pronto lo sabrá, en la idea JavaScript misma, pero va a tener este aspecto. Así estudiante var - sin signo de dólar y no se menciona pero todavía tipo var - equivale a continuación, abra las llaves porque en JavaScript cuando se tiene pares de claves de valor, que realmente utiliza algo llamado un objeto. Y aquellos de ustedes que tomaron APCS o similar podría recordar los objetos de Java o lenguajes similares. JavaScript no es Java, primero de todo. Fue un año de diseño deliberada decisión hace para desprender algo más que era popular, su nombre, a pesar de que no tiene una relación fundamental con Java en sí. JavaScript tiene los objetos, y se crean por medio de la notación de corchete. Los objetos en JavaScript son más o menos equivalentes a las matrices asociativas en PHP cuando se trata de almacenamiento de datos dentro de ellos. 

Pero incluso con más fuerza en JavaScript se puede asociar muy fácilmente las funciones dentro de un objeto, y aunque se puede hacer esto en otras lenguas, es todo un paradigma común, como veremos. En resumen, este objeto representa un estudiante, que es particularmente Zamyla, y es similar conceptualmente, sólo sintácticamente diferente de esto. Que en realidad el uso de JavaScript en un archivo. Resulta que hay una etiqueta script. Hemos visto una etiqueta de estilo y hemos visto otras etiquetas HTML. La etiqueta de script en realidad contienen algo de código JavaScript. Déjame entrar en el equipo donde tenemos algo de código fuente pre-hechos. Yo no lo he publicado aún en el sitio web, pero voy a hacer eso después de clase. Vamos a abrir éste, blink.html. De vuelta en la década de 1990, había literalmente una etiqueta HTML llamado la etiqueta blink, y esta fue una de las etiquetas más usadas en exceso maravillosamente en Internet por lo cual te gustaría visitar alguna página web estilo década de 1990 y empezar a ver el texto parpadeante de esta manera, los resultados de la etiqueta marqués, que había texto va así. Una de las pocas veces en que el mundo realmente ha acordado un estándar web, todo el mundo en todos los ámbitos de la etiqueta blink asesinado hace algunos años. Pero podemos resucitar con JavaScript como una demostración del poder que tiene cuando se puede escribir un programa dentro de una página web. Primero vamos a pasar por alto las cosas nuevas y centrarse sólo en lo viejo. 

Aquí está el material antiguo en este ejemplo. Tengo una etiqueta HTML, una etiqueta de la cabeza, y una etiqueta del título. Entonces tengo una etiqueta de cuerpo aquí con un div, lo que recuerdo es sólo una división rectangular de la página que le he dado un identificador único arbitrariamente de "saludo" a, sólo por lo que tienen una forma única de referirse a ella, que tiene un texto muy simple: hola, mundo. Ahora voy a desplazarse hasta la parte superior de este archivo y ver qué hay de nuevo. Lo primero que hay arriba hasta nuevo es la etiqueta script, y en el interior de la notificación etiqueta script que he declarado una función. Para declarar una función en JavaScript, bastante similar a PHP, que, literalmente, escribir la función, entonces el nombre de la función, entre paréntesis, y tal vez algunos argumentos si se necesita ninguna. Entonces tengo mi llave de cierre como de costumbre, y ahora tenemos algo de código nuevo ligeramente, pero vamos a ver lo que esto significa. Así div var, esto sólo significa dame un div llamado variable. Podría haberlo llamado foo, pero yo quería que fuera llamado div por razones que serán evidentes en un segundo. Luego resulta en JavaScript - y este es el código JavaScript incrustado en mi página web - hay una variable global de tipo especial llamado documento. JavaScript es de hecho un lenguaje orientado a objetos. No vamos a entrar en detalle en el 50 en cuanto a lo que significa, pero por ahora sabemos que un objeto es muy parecido a una estructura. Como vimos en el camino de regreso cuando uno de los primeros boletines de problemas donde ponemos una gran cantidad de información en una estructura, igualmente se documentan una estructura especial que viene con el navegador, viene con cualquier página web. No es algo que he creado. Dentro de esta estructura del documento, sin embargo, tiene no sólo los datos pero también hay funciones. 

Y cada vez que tienen una función dentro de una estructura, dentro de un objeto, se llama a un método. Pero es la misma cosa. Un método es una función que sólo da la circunstancia de estar dentro de algo más. Así que esto significa que esta variable global documento especial denominado tiene una función llamada getElementById que literalmente hace eso. Se le conseguirá un elemento del DOM, Document Object árbol del modelo, cuyo identificador es en este caso saludo. En otras palabras, todo el tiempo que pasamos en las estructuras de datos entra en juego aquí. Esta imagen de un DOM que tuvimos hace un momento, a pesar de que la página es un poco diferente, si yo tuviera un div en esta imagen, document.getElementById lo volvería a mí efectivamente sería un puntero para el rectángulo en el árbol, una referencia al rectángulo en el árbol. Así que eso es lo que significa llamar realmente una de esas funciones. En este caso de nuevo se trata de un div. No es un cuerpo o un título. Así que vamos a ver lo que quiero hacer con esto entonces div ahora que lo tengo dentro de este div variable llamada. Resulta que con el lenguaje Java tiene la capacidad de modificar el CSS de la página de forma dinámica. Hasta ahora, todo el CSS que hemos hecho, aunque limitado, es en los atributos de estilo, o donde más hemos puesto CSS? Yo como que echada a perder que uno. En la etiqueta de estilo en la parte superior del archivo. O el tercer puesto ha estado? 

Un archivo externo, algo. Css. Así que estos son los 3 lugares que hemos hecho hasta ahora CSS, pero el problema es que hemos codificado todo. Usted decide como se sumergió en pset 7, decidimos dar una conferencia antes de lo que nuestro CSS sería. Pero si usted quiere cambiar su CSS, usted realmente puede hacer que una vez que tenga un lenguaje de programación real. CSS, HTML - Lenguajes de programación no. JavaScript es. Así que resulta que tan pronto como usted tiene uno de esos rectángulos en el árbol llamado el DOM, que en sí tiene algunos datos dentro de la misma. Así que el div que me agarró por el árbol tiene lo que vamos a llamar a una propiedad dentro de ella llamado estilo, y la propiedad de estilo en sí tiene una propiedad llamada visibilidad. Yo sé que esto sólo por buscar un manual del usuario CSS. Resulta que hay una propiedad de visibilidad CSS que hace lo que dice. Hace algo visible o no, visible o no. ¿Y cómo se hace eso es la siguiente. Estoy pidiendo programación si la visibilidad de este div se oculta, ¿qué tengo que cambiar? Visible. Porque si la visibilidad de esta página no está oculto, lógicamente yo hago lo oculto. No tengo idea de por qué es visible y oculto y no es visible e invisible. Esta fue una decisión de diseño pobre a lo largo del camino. Pero esos son realmente opuestos en CSS: visibles y ocultos. Todo esto hace es que significa cambiar el CSS de mi archivo de encendido y apagado, encendido y apagado para que div particular. Pero, de nuevo, esta es una función llamada parpadeo. Cuando se llama a la función de parpadeo? Resulta que hay otra especial para ventanas de Global variable llamada, similar en espíritu al documento, pero, mientras que el documento se refiere a su página web como el árbol DOM, el HTML que envía desde el servidor, ventana se refiere al cromo alrededor de ella, la barra de direcciones, la barra de título, y todas esas cosas alrededor de su página web. 

Y resulta que el objeto ventana tiene una función especial dentro de la misma llamada setInterval que hace lo que dice. Se establecerá un intervalo - en este caso cada 500 milisegundos - y, tomar una conjetura, ¿qué va a hacer cada 500 milisegundos? Se va a ejecutar ese abrir y cerrar la función. Y lo que es bueno aquí es que podríamos haber hecho esto en C, aunque nunca lo hizo. C tiene algo llamado punteros a funciones donde se puede pasar alrededor de funciones como argumentos. Del mismo modo en JavaScript puede pasar el nombre de una función a otra función. Y darse cuenta de lo que estoy haciendo. No voy a hacer esto. Si pongo entre paréntesis después de abrir y cerrar, eso significaría que llamar a la función de parpadeo. Si los omite, que quiere decir aquí es la función de abrir y cerrar por lo que se puede llamar setInterval cada 500 milisegundos. Así, el resultado final, atroz que sea, es que si voy a ir a localhost y blink.html, Ahora tengo que esto ocurra una y otra vez. Y si realmente Inspeccionar elemento, vamos a ver si podemos ver esto. Permítanme Inspeccionar elemento, déjame desplácese hacia abajo un poco, permitirme elegir elementos de aquí y observe el interior de DOM inspector de Chrome. Es, literalmente, cambiar de ida y vuelta cada 500 milisegundos. Si vamos a nuestro amigo Nate, si alguna vez se preguntó cómo esto funciona, idea similar, con un intervalo de tiempo, pero Nate es en realidad hacer un uso muy eficaz del color en este caso particular aquí. Entonces, ¿qué más podemos hacer realmente con esto? Vamos a abrir otro ejemplo y probar algo eso es programación aún más útil que hacer parpadear las cosas. Déjame entrar en nuestro directorio formas hoy y entrar en form0. Esta fue la forma más fea posible que yo pudiera llegar a, y déjame mostrarte lo que parece en un navegador. 

Déjame entrar en localhost / forms, y esto es form0. Esta es una forma súper feo HTML que tiene unos campos de correo electrónico, la contraseña, contraseña, y luego una casilla pequeña que aceptar algunos términos y condiciones. El problema es si vuelvo a visitar esta forma y no quiero darte mi dirección de correo electrónico, No quiero estar de acuerdo con los términos y condiciones tal vez, puede hacer clic en Registro y me deja pasar de todos modos. Esto sucede a someterse a un archivo PHP llamado estúpido dump.php. Todo lo que hace es imprimir el contenido de $ _GET sólo para fines de diagnóstico. Eso fue lo que fue presentado por el usuario en este momento. Pero supongamos que en realidad desea validar la presentación del formulario de usuario. Déjame ir a la versión 1. Esto es form1.html. Se ve estéticamente tan malo, pero observe cómo de fantasía que es. Si hago clic en Regístrese sin cooperar, me gritó. "Usted debe proporcionar su dirección de correo electrónico." Está bien. Así que voy a tratar eso. Así malan@harvard.edu. No necesito una contraseña. Regístrate. "Usted debe proporcionar una contraseña." Está bien. Así que voy a proporcionar una contraseña de carmesí. Regístrate. "Las contraseñas no coinciden." Tengo que escribir ahora aquí en carmesí. Por error, he comprobado eso. Regístrate. "Usted debe aceptar los términos y condiciones." Está bien. Acepto allí. Regístrate. Y ahora me muestra la salida de diagnóstico por allí. 

Entonces, ¿qué ha pasado? Hemos tenido esta capacidad de validar los envíos de formularios. De hecho, si se hizo sumergirse en pset 7, hay una función disculpas que hace que sea muy fácil para gritarle al usuario mediante un mensaje en la pantalla. Estoy usando un mecanismo ligeramente diferente, la función de alerta, que no es una función que está sonreído ya que hace que los mensajes de usuario muy feos. Pero vamos a ver lo que estoy haciendo aquí. Esto es form1.html, y note que tengo una sintaxis bastante familiar: cuerpo de la etiqueta, etiqueta de la forma, atributo de acción, atributo método. Pero nótese que he dado mi forma un identificador único para mayor comodidad. Entonces tengo un campo de correo electrónico cuyo tipo es texto, un campo de contraseña cuyo tipo es la contraseña, confirmación campo cuyo tipo es la contraseña, y luego una casilla de verificación que se llama acuerdo de por aquí, es de tipo checkbox. Y luego tengo un botón de envío. Pero note en la parte superior lo más que tengo. En primer lugar, hay otro uso de la etiqueta script. Si tiene algún código JavaScript en otro archivo, al igual que con CSS se puede incluir. Y lo hace con una fuente de secuencia de comandos, y después se da cuenta que estoy conectando al parecer a googleapis.com a un camino muy largo, pero cuyo nombre termine en jquery.min para mínimo. js. jQuery es una biblioteca súper popular para JavaScript que sólo lo hace con JavaScript tanto más fácil de usar de usar. Ha convertido de hecho en un estándar de facto. Así que a pesar de que lo que vas a ver no es puro JavaScript per se, es una biblioteca de JavaScript en la parte superior al igual que la biblioteca CS50 es una capa en la parte superior de código de bajo nivel C, la realidad es que casi todo el mundo a través de Internet que utiliza. Así que no se trata de ruedas de entrenamiento. Esto es simplemente la mejor práctica en estos días. Ahora note debajo de ese es mi etiqueta de script propio y darse cuenta de lo que he hecho aquí. Resulta que jQuery hace algo un poco sofisticado. JavaScript tiene signos de dólar, pero no tienen sentido. 

Son como la letra A o B o C. jQuery simplemente ha adoptado la convención o el tipo de reclamaron al hecho que $ será su símbolo especial. Así que tan pronto como se carga este archivo global JavaScript hasta aquí con la etiqueta script, usted tiene acceso a una variable global especial que se llama $. Es mejor conocido como jQuery, pero que no se ve tan sexy como $. Pero $ no tiene ningún significado especial. En PHP que tenía un significado especial. Había que tener en frente de una variable. Esto es sólo una cosa sexy que asumió. ¿Qué está pasando aquí? Tenga en cuenta que estoy pasando a la función jQuery mi documento variable global y luego te llamo. listo. Lo que hace es esencialmente jQuery que te permite tomar algunas cosas de JavaScript vainilla como el objeto de documento, el objeto ventana, y si se le pasa a la función jQuery - y de nuevo, para ser claro, esta es una función llamada jQuery - lo que hace es que te vuelve a una versión especial del documento que tiene más funcionalidad asociada con él. Así que en JavaScript prima no hay ninguna función listo, pero si se pasa el documento a la función jQuery en primer lugar, devuelve a usted una versión especial del objeto de documento que tiene más características de lujo. Y por eso la gente le gusta. Simplemente hace las cosas más fáciles de hacer, ya que estamos a punto de ver. Entonces, ¿qué significa esta línea de código significa? Esta línea de código aquí significa que el documento está listo - en otras palabras, una vez que el navegador se realiza la lectura de este archivo superior a la inferior - seguir adelante y ejecutar la siguiente función. Lo que es realmente interesante en JavaScript - PHP tiene y esto también - es funciones anónimas. En JavaScript se pueden declarar funciones que no tienen nombre pero tienen un cuerpo. Observe lo que está pasando aquí. 

Esta es una función llamada lista, y sólo significa hacer lo siguiente cuando la página web todo está listo, cuando todo ha sido leído desde el servidor. ¿Qué quieres hacer? Quiero ejecutar un bloque de código. Tenga en cuenta que nosotros no queremos ejecutar este código enseguida. Si se omite esto, esto significaría iniciar inmediatamente la ejecución de estas líneas de código. Pero el hecho de que yo estoy diciendo no, no, no, terminar con esto en una función anónima como este significa que no se ejecutará sin embargo, llamar con el tiempo. Lo vimos hace un momento, en nuestro ejemplo anterior forma. ¿Qué función tenía que llamamos el tiempo, a 500 milésimas de segundo más tarde? Blink. Así que la idea misma. Una vez más, incluso si esto le parece un poco raro, simplemente tome por el momento en la fe que para declarar una función anónima que se llama el tiempo, sólo tiene que escribir function () { Entonces, ¿qué código vamos a ejecutar con el tiempo? El siguiente. Esto también se ve un poco nuevo, pero esto significa que esta es la función jQuery, y esto ahora es un atajo. Este fragmento de código HTML en la parte inferior de la pantalla, por supuesto, tiene una representación de árbol. No es esto. Esta página es más interesante que este ejemplo Hello World. Pero hay un árbol que corresponde a este HTML. Sería un dolor en el cuello a tener que implementar algún tipo de función recursiva para iniciar en el nodo raíz y luego encontrar el nodo cuyo identificador es el registro. Entonces, ¿qué jQuery hace muy fácil para nosotros es literalmente esto. Vaya por delante y me lo div o la forma que sea, cualquier elemento HTML tiene un ID de registro. Esto es equivalente a document.getElementById ('registro'). 

¿Por qué la gente como jQuery? Debido a que es más corta de escribir. Pero eso es todo lo que es. Es la misma idea. Póngame con el tag cuyo identificador es el registro. Y cuando esa etiqueta, que pasa a ser una forma, se presenta, seguir adelante y ejecutar este código. Así que echemos un vistazo ahora a cómo lo estamos haciendo validación de formularios. La sintaxis es ciertamente críptico al principio, pero ¿qué está pasando? Si esta línea de código es cierto, voy a gritar que el usuario proporcione su dirección de correo electrónico. Entonces, ¿qué es esta línea de código? $ Significa jQuery. Ahora note esto. Esta es una especie de CSS. Si has buceado en CSS, sin embargo, usted sabrá que esto significa que el elemento cuyo ID es la inscripción. El espacio significa encontrar a un niño o un descendiente de registro cuyo nombre es el de entrada. Y luego esta cosa entre corchetes es un filtro poco. Y aunque esto parece críptica, esto sólo significa ir al formulario cuyo identificador es el registro, ir al interior de ese elemento de entrada cuyo nombre es el correo electrónico, y luego obtener su valor, cualquiera que sea su valor pasa a ser - asdf si eso es todo lo escrito o malan@harvard.edu si eso es lo que he escrito. Así que si el valor del campo email del formulario == nada, grita al usuario. Porque si el valor del campo de contraseña == nada, grita al usuario. 

Else si el valor del campo de la contraseña no es igual al valor del campo de confirmación que era el elemento otra forma, gritarle al usuario. Y por último - y esta también tiene un poco de nueva sintaxis propia, pero una vez que lo has visto, es al menos un poco más razonable - else if el formulario cuyo ID es la inscripción tiene un elemento de entrada cuyo nombre es un acuerdo y se comprueba que, adelante y gritar en el usuario. Así que estoy totalmente de admitir que esto es completamente abrumador a primera vista. Se trata de una gran cantidad de nueva sintaxis. Pero todos jQuery sigue este tipo de patrones. Y honestamente, yo ni siquiera sabía que esto existía hasta hace unos minutos. Busqué en Google "¿Cómo comprobar si una casilla está marcada en jQuery?" y esta es la sintaxis, porque hay diferentes maneras de hacerlo con código real bruto JavaScript. Así como la primera página del Boletín de problemas 7 enfatiza, pset 7 es mucho más que un ejercicio en sí mismo bootstrapping en los que proporcionamos, con suerte, un marco conceptual para abordar el conjunto de procesadores. 

Pero, como suele ser el caso con el diseño web, le toca a usted realmente a hurgar, incorporar fragmentos de código y ejemplos de la Web siempre y cuando se les cite por los términos en que la primera hoja, y darse cuenta de que el aprendizaje de HTML, CSS, JavaScript e incluso SQL está realmente destinado a ser este ejercicio en casa a medida que empezamos a tomar estas ruedas de entrenamiento apagado. Y darse cuenta también que hay muchas cosas más que puedes hacer con un navegador. En el interior de la mayoría de estos elementos, hay otras cosas llamados controladores de eventos. Y a pesar de que acabamos de ver en los llamados onsubmit y onReady, usted puede hacer cosas como onkeydown, onkeyup, como cuando el usuario toca una tecla, se puede escuchar por eso y tecla de arriba. Gmail tiene atajos de teclado. ¿Cómo hace Google para poner en práctica métodos abreviados de teclado como C para componer? Escuchan para eventos, como se les llama, como onkeypress o onkeyup y onkeydown. Si alguna vez ha rondado el ratón sobre alguna opción de menú y, de repente voila, aparece un menú o la cambia de color gráfico, ¿cómo se hace eso? En lugar de escuchar onReady o onsubmit, escuchas o onmouseout onmouseover para. 

Así que en resumen, con estos conceptos básicos muy sencillos que hemos empezado a rascar la superficie de hoy y vamos a bucear en ellas para el miércoles, que tiene, cada vez más, facultad de aplicar el tipo de cosas que usted ya conoce. Así que vamos a terminar aquí, y vamos a continuar este miércoles. 

[CS50.TV]