TOMAS REIMERS: Hola a todos. Tomas Reimers de mi nombre. 

MIKE RIZZO: Y yo soy Mike Rizzo. 

TOMAS REIMERS: Somos dos de TS CS50s. Y hoy estamos liderando el seminario sobre JavaScript y CSS para aplicaciones web. Si quieres seguir adelante, la enlace está justo ahí. ¿Y usted quiere poner para arriba brevemente en la computadora? 

Ahí está el enlace. Es un sitio pequeño, que tiene vínculos con todos los recursos que van a ser que lo llevan hoy y también tiene una gran cantidad de información útil escrito por nosotros para leer más en profundidad cuando regrese, y que está tratando de recordar lo que fue exactamente lo que decimos, lo que eras hablando, et cetera. 

MIKE RIZZO: Muy bien. Así que vamos a empezar. 

TOMAS REIMERS: ¿Así que quieres comenzar? Aceptar. 

MIKE RIZZO: Si. Así que primero queríamos empezar con una amplia visión general acerca de la Internet y los tipos de archivos en el diseño de sitios web. Si bien esta presentación quiero entrar en JavaScript mucho más más tarde, queríamos empezar con simplemente, un poco, como a vista de pájaro de lo que un sitio web es y cómo a pensar en el diseño de un sitio web para el inicio. 

Así que ustedes, en este momento - con lo siendo viernes por la noche - debe tener presentado sus finanzas CS50 boletines de problemas. Con suerte, eso fue un buen sabor de lo que la programación web puede ser. Pero aquí queremos, algo así, dar que otro gusto, también. 

TOMAS REIMERS: Así que para recapitular lo sucede, cuando se escribe en su URL a su navegador de Internet, que pone URL miró en el ordenador. Y conecta su ordenador de a otro equipo, que alberga ese sitio web. OK, así que cuando vas a google.com, eres conectado a uno de Google de ordenadores, que tiene el archivos de google.com. 

Después se le pedirá un archivo específico. Así que si vas a - No sé - example.com / index.html o / test.html, usted va a pedir ese archivo específico. Y el servidor web va para volver a usted. 

Luego, una vez que pasan por ese archivo - una vez que estás equipo obtiene que archivo - que va a comenzar para construir una página web. Así que ahora que tiene el archivo HTML, que es algo así como el estructura de la página web. El archivo HTML también podría hacer referencia a Archivos CSS, que definen el estilo de la página web. 

Archivos JavaScript, que define interacción con la página web. Los archivos de imagen, que son sólo imágenes. Y, posiblemente, establecer vínculos con otros archivos HTML, que luego se puede visitar. 

MIKE RIZZO: OK, muy bien. Así que ustedes tienen de todo, tal vez, laboriosamente configurar su host local en su máquina virtual. Y eso, un poco, es lo local dominio que el equipo recibe sólo para usted en su propia dirección IP. 

Así que dentro de eso, entonces usted puede agregar a que sus propias páginas web. Quiero decir, en CS50 Finanzas, usted debe tener añadido algunas páginas HTML, que son, clase de, envuelto en la envoltura PHP. Pero al final, lo que sus páginas PHP fueron salida era HTML. 

Pero pensando en volver a los orígenes del PSET, tuvimos que establecer los permisos para todo, ¿verdad? Así que esto sólo básicamente nos permite saber ¿quién puede leer, escribir, y posiblemente ejecutar cada uno de los archivos. Así que vamos a hacer una rápida - hm? 

TOMAS REIMERS: Así que vamos para hacer una demostración rápida. Así que para recordar a usted, cuando usted conectarse al equipo de Google - quien - y pedir un archivo, la computadora primero hay que asegurarse de que está autorizado para realmente ver ese archivo o leer que presentar porque no se puede simplemente pregunta para cualquier archivo en ese equipo, ¿no? Eso sería un riesgo de seguridad. 

Así que los archivos de los sistemas que utilizamos, como este aparato CS50, tiene tres general, las personas que pueden tener permisos a algo. La primera es la real propietario de dicho archivo. El segundo es el grupo que pertenece el archivo. No nos vamos a centrar demasiado en eso. Y lo último es, más o menos, como el mundo, o como todo el mundo quién es no es específico de ese archivo y no tener derechos de propiedad sobre ella. 

Así que si tenemos el propietario, grupo, y luego mundo. Y luego, para cada uno de estos grupos, se puede tener uno de tres permisos, OK, o múltiplo de ellos. Usted puede tener permisos de lectura. Usted puede contar con los permisos adecuados. Y usted puede tener permisos de ejecución. 

Así que en términos de tipos de archivo reales, lea el permiso es como en realidad la lectura el contenido del archivo. Un permiso derecha está escribiendo a dicho archivo. Un permiso de ejecución se está ejecutando el presentar como se hace cuando se ejecuta una de sus proyectos CS50. 

Por eso, cuando estamos pensando en archivos como cuando necesitamos leer un archivo HTML archivo, que tiene que ser mundo legible, ¿verdad? Presumiblemente, también el propietario quiere ser capaz de editar ese archivo. Así que el dueño va a necesitar permisos de lectura y escritura. En realidad, no es necesario ejecutar. 

Grupo, que vamos a tratar el mismo que el mundo de hoy. Por lo que necesitan permisos de lectura. Pero no es necesario escribir o permisos de ejecución. Y ahora, si pensamos en volver a la antigua Conjuntos de procesadores, lo que nos damos cuenta es que este tipo de parecerse a binario, ¿verdad? 1 significa que sí. 0 para no. Y en realidad podemos traducir este a binario. 

Así que 110 en binario sería 6. 100 sería 4. Lo mismo con el mundo. Así que el número al que obtendría para el permisos para esto serían 644. 

MIKE RIZZO: Y si usted piensa de nuevo a cuando se efectuó chmod algo, creo dieron en el conjunto de problemas de la ejemplo de donde se podía hacer algo como chmod 644 y luego el nombre del archivo. El 644 entonces, ahora se puede ver directamente de dónde viene eso. Así que espero que eso hace que un poco más clara. 

Y a continuación, para mayor claridad de que tipo - oh, sí, aquí esto es nuevo. Así que 600 entonces no sería más que el ejemplo nos dimos por vencidos aquí donde el propietario tiene permisos de lectura y derecha mientras que el grupo y el mundo no tienen ningún permiso para acceder al archivo. 

TOMAS REIMERS: Y luego tenemos una rápida lista de permisos comunes. Así directorios te quieres chmod realidad 711. Aparte rápida - para un directorio para tener permiso de ejecución significa poder para abrir el directorio. Las imágenes, CSS, JavaScript, HTML necesidades 644, ya que, básicamente, el mundo necesidades permisos de lectura. 

Y PHP, lo que ustedes han visto aunque no vamos a estar hablando de él estrictamente normalmente se efectuó chmod con permiso 600 porque se ejecuta con los permisos del propietario. Al menos en el aparato. 

MIKE RIZZO: Así que si no lo hace específicamente especificar el tipo de archivo que desee en la configuración realidad esta presentación - hemos tenido un problema con esto porque todo lo que no se efectuó chmod correctamente - usted va a conseguir, una especie de, una error prohibido que el sitio web en realidad no tener permiso para acceder a cualquier archivo desea que se accede. Y, por supuesto, que se puede fijar - como en el conjunto de problemas - al cambiar permisos correctamente. 

TOMAS REIMERS: Y el último comentario para desarrollo rápido local es - nos traído esto, pero lo único que queríamos para traer de nuevo - si usted pide un servidor - huésped tan local, por ejemplo, com o lo que sea. - y no se especifica un archivo concreto, el archivo que el equipo va para pedir que se llama index.html. O si eso no existe, index.php. 

Genial. Así que eso es sólo una recapitulación de todo, con suerte, que hemos cubierto en sección, y una conferencia, y hasta el momento en CS50. Y ahora vamos a empezar a hablar bibliotecas sobre concreto. Bibliotecas de JavaScript y CSS para aplicaciones web. 

Así que una de las razones por la que tenemos rápida bibliotecas es la programación - hay un montón de problemas en programación, que siguen apareciendo otra vez, y otra vez, y otra vez. Usted puede notar que una gran cantidad de sitios web necesita la capacidad de tener desplegables menús, por ejemplo, o necesitan la capacidad para tener una tecla muy estándar estilo, que puede no ser la cosa más fácil. Ahora que usted comienza a entrar en HTML, darse cuenta de que los botones pueden realmente mirar muy feo si no hagas nada. 

Así que un montón de gente ha escrito llamado bibliotecas. Y en este contexto, son también llamado marcos. Vamos a utilizar el dos indistintamente. Y lo que son es que son básicamente piezas prefabricadas de código - ya sea CSS o JavaScript - que llevar una gran cantidad de la equipo que tiene en la codificación. 

Así que predefinir un montón de clases o pre-definir un manojo de funciones para El caso de JavaScript, que puede llamar más tarde. Y entonces usted puede, más o menos, obtener el acceso a este código sin tener que hacer nada. Un ejemplo de la biblioteca era CS50.H. Esa fue una biblioteca que dimos a usted de nuevo en la primera semana, lo que permitió que hagas cosas así GetInt y GetString sin tener que escribir cualquier código manualmente. 

MIKE RIZZO: Muy bien. Así que aquí, al igual que hemos tenido que incluir en nuestra c archivos los diferentes bibliotecas, también hay que incluir en archivos de nuestro HTML distintas bibliotecas. Por ejemplo, si quisiéramos incluir una biblioteca de JavaScript específico aquí, tal vez, uno que hemos escrito nosotros mismos, ya que está alojado de forma local llamados script.js, sólo utilizar esta notación. 

Así que tenemos iguales tipo guión JavaScript fuente iguales JavaScript.js. Y si usted piensa de nuevo a su CS50 problema financiero establecido, si uno mira en header.php en la carpeta de plantillas, usted debe haber visto algunos de ellos incluidos. Así que este primero - los scripts - es que incluye una biblioteca de JavaScript. Incluye una biblioteca de CSS es un poco diferente. 

Aquí, en lugar de la secuencia de comandos ETIQUETA usted necesita la etiqueta de enlace. Y a continuación, el tipo de texto CSS es un poco diferente. No siempre tiene que incluir hoja de estilo rel. Pero yo creo que es, en general, buenas prácticas. 

Y, finalmente, el HREF, que Probablemente vio en sus ATAGs para vincular en diferentes eslabones sólo especifica las el enlace de dónde encontrar eso. Por ejemplo, si quisiéramos vincular un diferente de la biblioteca - digamos - que vivió a styles.css. Y queríamos vincular que en eso es alojada en la web, queremos copiar eso. Y luego pegarla en cualquier que aquí tenemos en su lugar. 

TOMAS REIMERS: OK, esperamos que pueda chicos ya están familiarizados con la forma de vincular CSS. Tenías que hacer eso en su último conjunto marrón. JavaScript, algunos de ustedes tal vez tener algo de experiencia con. Algunos de ustedes puede que no. 

Así que por ahora, saber que un archivo JavaScript es muy parecido a un archivo CSS en el sentido de que se puede enlazar con él o que se pueden incluir de forma interna. Y es que permite a las cosas de guión. Y vamos a caminar a través de un poco de JavaScript más adelante. 

Así, utilizando una biblioteca - una vez que se ha incluido él, es como simple como literalmente llamando al funciones o la adición de la nombres de clase a la misma. La última cosa que queremos hablar aproximadamente, en términos de la biblioteca - y esto es más de una nota técnica - es la concesión de licencias de código abierto. Así que cuando usted encuentra estas bibliotecas reales, usted puede estar pensando en Preguntas como ¿está bien que sólo soy utilizando el código de otra persona, especialmente porque eso es algo que en gran medida Te dije que no lo hacen en este curso. 

Así que en el caso de las licencias de código abierto, muchos de los desarrolladores - una vez que han escrito una biblioteca, que piensan que podría ser útil a otras personas - lo publicará en la web y darle una licencia. Y una licencia básicamente dice que soy la presente la concesión de permisos a otros las personas a utilizar este software con el siguiente tipo de estipulaciones. 

Hemos incluido un enlace a un buen sitio para ayudarle a entender las licencias de caso de que encuentre en ellos. Estipulaciones comunes son cosas como le invitamos a usar mi biblioteca para siempre y cuando se nombre al autor. Le invitamos a usar mi biblioteca siempre que cuando se rompe no me culpes. Le invitamos a usar mi biblioteca tanto tiempo y cuando no lo utilice para hacer dinero por sí mismo. Estos son tipos de común estipulaciones. 

Para este proyecto final CS50, que no debe ser súper relevante porque los proyectos que ustedes SU USO probablemente más bien, una especie de, conocido. Pero cuando realmente salir al mundo y comenzar a usar las bibliotecas, las cuales pueden o no ser tan bien implementado como algunos de los más populares que estamos va a estar pasando. Es bueno ser capaz de entender estas licencias ya entender lo que significan. Y volviendo. 

MIKE RIZZO: OK. Así que ahora pasar a ejemplos de CSS real. En este punto, hasta el momento, es posible que no se han encontrado con esto. Pero es posible que haya encontrado en su vida cotidiana en el que algo que se ve de una manera en un navegador podrían no tener el mismo aspecto forma en otro navegador. 

Esto se llama navegador navegador compatibilidad. Y cada vez se está volviendo más y más de un problema, especialmente en lo navegadores toman más y más libertades para poner en práctica las cosas como ellos quieren. Así que para superar eso, hay en realidad es una gran biblioteca llamada Normalize.CSS. 

TOMAS REIMERS: Se incluyeron en el vínculo. En este punto, es útil si usted tiene su computadora portátil en la que hay buscando en el sitio. Y estamos dando esto a usted derecho ahora simplemente porque la final CS50 proyecto es en realidad va a pedirle que implementarlo de manera similar y por medio de los navegadores. 

Así que para mantener en la parte posterior de su la cabeza, esto es una biblioteca maravillosa porque será, más o menos, normalizar las cosas. En Firefox, algo puede mostrar como un píxel hacia la izquierda. Y luego Chrome puede decidir que en realidad lo que quería decir era 10 píxeles a la izquierda. Y desea estandarizar esto. Normalizar hará realmente una muy buena trabajo de asegurarse de que su sitio tiene el mismo aspecto en todos los navegadores. 

MIKE RIZZO: Así que si queríamos simplemente haga clic en el vínculo muy rápido y el espectáculo lo que parece, usted puede descargar usando el gigante botón Descargar. O le animo a leer mas sobre esto haciendo clic en este enlace en la parte inferior esquina derecha. 

TOMAS REIMERS: ¿Y si en realidad haga clic en Leer Más justo allí - haga clic en la fuente en GitHub - que realmente va a ver el código abierto otorgar una licencia en LICENSE.md allí. Y usted ve aquí es la licencia MIT muy popular. Una vez más, si usted lee a través del texto, usted será capaz de encontrarlo en el sitio hicimos referencia antes y ser capaces de entender sin tener que leer a través de la jerga jurídica. 

MIKE RIZZO: OK, muy bien. Así que eso es Normalizar. Queríamos darle que realmente rápidamente. Oh, ¿tienes alguna pregunta? 

AUDIENCIA: Así que cuando se descarga, se sólo tienes que seguir el código que tienen bajo el botón de descarga? 

TOMAS REIMERS: Sí, por lo que al descargar - 

MIKE RIZZO: Oh, eso es un gran punto. Así que la pregunta era cómo hacer que en realidad descargar? Así que si hacemos clic en el enlace, vemos que en realidad aparece en el código fuente. Así que para hacer esto, lo que hemos podido no es simplemente haga clic en Guardar como. Guardar como y que en caso de abrir un archivo. Y entonces podemos optar por guardar como normalize.CSS. Y luego habría que vincularlo en - 

TOMAS REIMERS: De la misma manera que relacionar en cualquier otro archivo. Y una vez que lo enlace en, lo que es genial sobre Normalizar es en realidad va a hacerse cargo de todo el duro trabajar por sí mismo. Lo que significa que usted no tiene añadir ninguna clase. 

Usted no tiene que hacer nada raro. Se normalizará sin ti hacer nada más. Sí, usted tiene que incluirlo. Google Chrome no está respondiendo. 

Sólo una rápida lado - Me di cuenta de que nos metió en esto. El resto de esta presentación es va a ser un resumen rápido. Una encuesta de las bibliotecas. 

Básicamente, lo que son. Lo que ellos hacen. ¿Cómo son útiles. ¿Cómo es posible ponerlas en práctica. Si quieres empezar a mirarlos, siguiendo a lo largo, y de la lectura a través de ellos, yo les animo a que. 

Como alternativa, le invitamos también a empezar a descargar ellos y que incluye en un espectáculo sólo para ver lo que parezca o qué hacer si tiene su computadora portátil en frente de usted. Si no es así, le invitamos a seguir nos escucha hablar. Vamos a seguir hablando. Y tenemos tiempo al final, con suerte vamos a realmente entrar en mostrándote lo que algunas de estas bibliotecas ser similar. 

MIKE RIZZO: Cool. Muy bien, así que ahora vamos a hablar sobre Font impresionante. 

TOMAS REIMERS: Awesome modo de fuente es una sitio realmente fantástico, especialmente para aquellos de nosotros que son menos artísticamente talentoso. Ignorando el Nombre de fuente impresionante, da que un montón de iconos, que son muy útil. Así que un montón de veces que se va a implementar un ICON es posible que desee como un bonito x lo que se puede cerrar algo. 

O puede que quiera algún tipo de botón Editar con un dibujo a lápiz como todo el mundo tiene. Y ahí es cuando se entera de que dibujo de los iconos puede ser muy tedioso y difícil. Fuente impresionante - si en realidad ir al sitio - te da un montón de iconos bajo los iconos de la parte superior. Sí, sólo la parte superior. Se le dará una gran cantidad de iconos gratis. 

Así que aquí ves que tenemos cosas como un asterisco, bares, un rayo, un calendario, un insecto, un libro, etc. Esto puede ser muy útil. La forma en que se incluye este es incluir literalmente, el archivo CSS. Y después de haber incluido el archivo CSS, lo que puede hacer es crear un etiqueta llamada I. satands TI para Icono con la clase FA de pie para Font impresionante. Y luego, cualquiera que sea la clase que usted desea. 

Así que si quería un icono de este plus cuadrar aquí, yo le daría que la clase FA. Y entonces guión FA plus cuadrado guión. 

MIKE RIZZO: Cool, OK. 

TOMAS REIMERS: Y entonces, la última CSS biblioteca que queremos conseguir a través de nosotros tratando de mantener lo mínimo sobre CSS bibliotecas, porque nos damos cuenta de la título de esta presentación es JavaScript Bibliotecas. Pero pensamos que podamos, así presentarte a otras bibliotecas mientras hablábamos acerca de las bibliotecas. 

Es Google Web Fonts. Y lo que Google Web Fonts le permite hacer es agregar las fuentes a su sitio web, que es una manera muy fácil de hacerlo bonita y distinguir el conjunto de de todos los demás es si tiene una fuente agradable o si se tiene un buen colección de fuentes. Google Web Fonts es agradable a diferencia de otros bibliotecas en el sentido de que es un instalación realmente guiada. 

Así que si usted sigue el enlace, es google.com / fonts, creo. Si sigue esto, puede elegir el tipo de letra. Usted puede elegir a la izquierda de espesor, inclinación, etc. Y luego, una vez que haya elegido uno, puede hacer clic en el uso rápido. Ahí mismo. Abajo a la derecha de la caja. 

Y luego, desplácese hacia abajo. En primer lugar, te dan la CSS que es necesario enlazar realmente a ella. Está justo allí. Usted puede simplemente copiar y pegar ese pulg Y lo bueno de esto es que en realidad no siquiera necesita descargar el archivo. 

¿Qué se va a hacer es que va vincular a la versión de Google de la misma. Así que de vuelta a lo que significa eso. Esto significa que cuando un usuario descarga tu archivo - descarga tu página HTML - su HTML la página se va a hacer referencia a este archivo. 

Así pues, el equipo va a ver, oh, está alojado en google.com en lugar que en theirsite.com. Déjame ir a preguntar Google para ese archivo. Y luego, se va a incluir casi como si se tratara de un parte de tu propio sitio. 

TOMAS REIMERS: Cool. Y una vez que se incluye que, a continuación, a incluirlo en tu CSS, le da la línea real. Así se establece la familia de fuentes de propiedad igual al nombre de su fuente. 

MIKE RIZZO: OK. Así que acabamos de terminar con CSS. Y algunos de ustedes podrían estar pensando, bueno, tuvimos algo de CSS en CS50 Finanzas. Pero biblioteca CSS fue de arranque. En realidad nos incluimos Bootstrap un poco más adelante bajo JavaScript porque con la biblioteca Bootstrap CSS también viene con un montón de JavaScript que Bootstrap o Twitter - quien hizo Bootstrap - utiliza para gestionar la totalidad de su CSS. 

TOMAS REIMERS: ¿Alguien tiene alguna preguntas hasta ahora sobre CSS en general? Estamos bien? Impresionante. 

MIKE RIZZO: Awesome. 

TOMAS REIMERS: Así se mueve en tener JavaScript. 

MIKE RIZZO: Así que quería hablar sobre jQuery, para empezar. ¿Alguien ha oído hablar de jQuery antes o usado? Sí, un par? Así que si usted acaba de trabajar con nativos JavaScript se encontrará escribiendo un montón de selectores largos mucho. Entonces, ¿qué jQuery hace es que proporciona un bonito envoltorio para el código JavaScript lenguaje que le permite seleccionar fácilmente y manipular diferentes elementos dentro del modelo de objetos de documento de la la página web o el DOM, que creo que ustedes han oído hablar de en dar una conferencia en este punto. 

TOMAS REIMERS: Si usted no ha oído hablar de o la conferencia si no has visto sin embargo, es el Document Object Model básicamente cómo se representan las cosas. Así HTML manera se parece a un árbol cuando en realidad lo alcanzará. Usted tiene el elemento HTML en la parte superior. Usted tiene la cabeza y el cuerpo. 

Y luego, dentro de que se tiene todo lo demás. Eso se conoce como el DOM - Document Object Model. Así que un modelo que representa los objetos en el documento es una manera fácil de pensar sobre eso. Y uno de la gran cosa acerca de jQuery es lo que realmente hace de desplazamiento y que la manipulación de elementos dentro de que increíblemente simple. 

Así simple, de hecho, que la mayoría de los JavaScript bibliotecas o si no el mayoría, la gran mayoría de los usted verá realmente requieren jQuery por lo que puedan funcionar a sí mismos simplemente porque si usted no tiene jQuery, que sería perder mucho tiempo tratando de encontrar la manera de seleccionar cierto elementos y la forma de hacer otras cosas. Y la otra gran cosa acerca de jQuery es que es transversal navegador compatible. 

Así que recuerde de nuevo cuando nos dijo que no todos los navegadores implementan cosas de la misma manera? Esto es cierto incluso en JavaScript. Y una de las mejores cosas de jQuery es que va a detectar el y detectar el navegador método apropiado. 

Así que si usted necesita para seleccionar un elemento, Internet Explorer podría decir que eres supone que debe hacer de esta manera. Firefox podría decir lo correcto forma es de esta manera. jQuery no le importa. Cuando le dices a jQuery para seleccionar un elemento que se darán cuenta de cómo es supone que hacerlo dentro del navegador del usuario está actualmente en, y luego hacer de esa manera. 

MIKE RIZZO: Así que no vamos a hablar acerca de el uso de jQuery un poco. Al igual que PHP, jQuery tiene una especial afición por el signo de dólar. Así que usted encontrará que cualquier jQuery - Bueno, no todos. A veces se puede reemplazar al dólar firmar con la palabra jQuery. Pero, en general, sólo porque es más corta, cada vez que vea siendo jQuery utilizado será con un signo de dólar. 

Así que aquí sólo estamos mostrando un comienzo selector para un elemento en el DOM. Aquí, tenemos el signo de dólar seguido por paréntesis de apertura y luego cita. Y dentro de las comillas ir nuestros selectores para los diferentes elementos. Al igual que en el CSS, necesitábamos selectores para ser capaz de aplicar estilo diferentes elementos dentro de la página. Esos diferentes selectores traducen exactamente en jQuery y JavaScript, en su mayor parte. 

Así que aquí tenemos un foo punto. Así que si usted recuerda de conferencia, el punto sólo significa la clase. Así que estamos seleccionando elemento con la clase foo. Así que si sigo adelante y abrir nuestros JavaScript consola de aquí muy rápido simplemente demostrar que, si yo sólo escribo la signo de dólar, vemos que se trata de alguna función que aparece. Y se acaba de definir por jQuery. 

TOMAS REIMERS: Para aquellos de ustedes desconocido, la consola es una herramienta dentro de Chrome, que le permite, básicamente, ejecute JavaScript en la página actual. Esto se puede encontrar muy útil cuando en realidad estás depuración y tiene que ser, qué es la corriente valor de una variable global o lo es algo más? Es algo así como GDB, con la excepción que en realidad se puede manipular los elementos de la página con que de una manera mucho más fácil. Y también no lo hace, básicamente, compruebe con usted antes de hacer nada. 

Así que, no GDB podría ser, ¿verdad Seguro de que desea ejecutar el siguiente paso? La consola está en real. Así que la página web es la prestación y haciendo lo que está haciendo, la consejo del también corriendo al lado de él. Y usted puede poner código de imputar a esa consola, que se ejecutarse en la página. 

MIKE RIZZO: Así que para entrar en la consola, Supongo que debería brevemente mencionar cómo hacerlo. En los últimos problemas que usted pueda tener usado Chrome de inspeccionar elemento funciones o visualización de la página de origen - y esos son accesible sólo por derecho clic en la página o una específica elemento y haciendo bien inspeccionar elemento o vista de la página de origen. También podemos acceder a JavaScript consola directamente por elegir inspeccionar elemento. Consola Así que usted acaba de golpear en el extremo derecho. 

Como alternativa, puede también haber ido a la esquina superior derecha, que se corta en esta pantalla donde cuenta con las tres barras horizontales. Y hay que bajar a las herramientas y a continuación, la consola JavaScript aquí, donde puede ver - al menos en Windows - el acceso directo es el Control Shift J. Entonces si queríamos para seleccionar un elemento en esta página, al igual que yo mostré antes, hacemos la muestra de dólar parens abiertas y luego cita. 

Una cosa interesante es, por lo general, Las comillas simples y dobles intercambiable. Así que mucha gente sólo tiene que utilizar un solo comillas porque son más rápidos de escribir de comillas porque no es así tiene que mantener pulsada la tecla Mayús. Así que voy a hacer eso ahora mismo. 

Así que quiero seleccionar algo con clase. Container, sólo porque sé que es algo que está en nuestra la página web en este momento. Y llegué a Enter. Y podemos ver que la seleccionó. Por lo tanto, se muestra que devuelto ese objeto. Así que esa es una selección básica. Si queremos manipular en realidad, usted tendría que llamar a algo en que la selección, la cual vamos a entrar en más adelante. 

TOMAS REIMERS: Así que sólo por ver que más en profundidad, esto no es diferente que las llamadas a funciones que hicimos en C. El nombre de la función aquí es un poco raro. Es signo de dólar. Es sólo un nombre de una función. No hay nada especial en ello. 

Tenemos paréntesis abiertos. Entonces, tenemos nuestro un argumento, que en este caso pasa a ser una cadena, que es un selector para ello. Y luego, tenemos nuestra paréntesis cerrado. Eso es todo. 

No es que muy diferentes. Aunque, que tiene un aspecto muy extraño. Y eso puede ser, más o menos, un escollo apuntar para un montón de gente. 

MIKE RIZZO: Así que de manera similar, si queríamos para seleccionar un elemento que tiene un ID, Ahora queremos seleccionar por Identificación lugar de clase. Sería una cosa similar en el que acaba de hacer el signo de sostenido por ID. Así que estamos seleccionando aquí todo elementos que tienen bar ID. 

TOMAS REIMERS: Y esto se extiende. Eso CSS extiende. Al igual que en el CSS, se puede seleccionar todo enlaces, que tienen la clase foo. Aquí, es la misma cosa. 

Usted podría hacer a.foo, que seleccionaría todos los vínculos con la clase Foo. Usted podría hacer una barra afilada, lo que haría seleccione el enlace con la barra de identificación y así sucesivamente y así sucesivamente. Cualquier selector CSS es una válida selector de jQuery. 

MIKE RIZZO: Si. OK, así que ahora vamos a entrar en un poco de manipulación que podemos hacer con nuestra jQuery. Así que jQuery tiene un tipo particular de notación en el que sólo utilizamos un punto al final. Y usted puede pensar en esto como en C cómo teníamos diferentes estructuras. Y para entrar en esas estructuras, lo haría utilizar un punto para entrar en ellos. 

Esto es, algo así, una cosa similar. Sólo que ahora tenemos funciones dentro de este selector que podemos recurrir a ella. Así que aquí, el primer ejemplo se puede ver es un selector CSS. Y, básicamente, lo que hace es se aplica el primer elemento CSS para este cosa que ha seleccionado - este elemento que ha seleccionado - con el valor que. 

TOMAS REIMERS: Así que una traducción fácil de eso sería si jQuery, básicamente, acaba de tomar foo. Y luego, en CSS, dijo, el rojo y cerrar. Es la misma idea. Lo que se hace es que está seleccionado todos los elementos Foo. Y entonces se aplica. Más o menos, el color de propiedad es igual a rojo. 

MIKE RIZZO: Del mismo modo, también podemos alterar el contenido real de lo que es que muestra en el código HTML de la página, que es realmente genial, porque significa que su páginas web ahora pueden ser completamente dinámico y no tienen que ser estática que imprima usando PHP en el comienzo de La página se está cargando. Así que aquí, si quisiéramos cambiar la HTML real de la página, lo haríamos hoy llamar a la función HTML, el cual sólo insertos lo que especificamos en ese elemento que hemos seleccionado. Así que aquí estamos seleccionando elemento con foo clase y luego diciendo que es HTML ahora es hola mundo. 

TOMAS REIMERS: Y cuando se piensa en ¿cuáles son las aplicaciones útiles de esto, esto CSS uno, lo primero que usted puede comenzar a pensar es incluso en términos de menús desplegables. Usted podría comenzar a hacer cosas como, cuando un usuario se desplaza sobre la parte superior of a down drop, quieres hacer la parte inferior visible. ¿Cierto? 

Así que en CSS, tenemos propiedades para hacer algo visible. Cosas como la pantalla de colon ninguno haría invisible. Bloque de visualización haría visible. O incluso si quieres ir más simple, que tener cosas como iguales visibilidad visible y la visibilidad es igual oculto. 

Y se podría empezar a aplicar las cosas como desplegable derecha menús después de pasar por la idea de cómo puede usted imaginar cuando este se abre, que vamos a salir de manera muy breve. Pero podemos comenzar a ver aplicaciones de este. En un sentido similar, si usted fuera a tratar y poner en práctica, digamos, una charla motor y quiere hacer un poco de burbuja de diálogo siempre que Ud. has tiene un nuevo mensaje, una vez que el nuevo mensaje, usted puede hacer un poco de burbuja de diálogo aparecerá de manera alterar el código HTML de la página, a la derecha? Añadiendo que la burbuja del discurso adicional con el texto adicional en ese país. ¿Sí? 

AUDIENCIA: ¿Así que usted integrar esto dentro el código HTML, en algo así como un [Inaudible]? 

MIKE RIZZO: Así es. Sí, vamos a llegar a eso dentro de un rato. Sí, es un parecido poco a PHP. No es exactamente similar. 

Una buena distinción de hacer es lo que este en realidad está editando cuando editamos la página, ya que no va a ser editando el archivo real que se guardado en el servidor porque el mundo no deberían tener permiso para editar sus archivos. Esto es sólo editando lo que está en la página y lo que se muestra en el navegador. Así que si usted fuera a volver a cargar la página después, decir, la eliminación de algo como lo vemos que podemos hacer con la llamada remove, eso sería volver a aparecer. 

TOMAS REIMERS: Así que una manera de pensar en esto es si yo soy tu computadora y Mike es, más o menos, el servidor. ¿Qué va a pasar es que voy a Pregunta a Mike, oye, ¿puedo tener una copia de esta página web? Y él me dará una copia del mismo. 

No, no es lo original. Es sólo una copia. Y entonces sería como, oh, hay código JavaScript escrito aquí. Claramente, debería editar el página sea así. Y estoy editando su copia. 

Pero eso no efectuar la copia real. Y si yo fuera a preguntarle de nuevo actualizar la página, - Hey, ¿puedo tener otra copia limpia - él va a darme otra copia limpia. Y entonces, yo voy a hacer lo mismo como, oh, esto JS aquí que dice editar este. Y yo voy a seguir haciendo eso. 

MIKE RIZZO: Así que una cosa realmente fresca que se puede hacer con jQuery es realmente agregar diferentes tipos de animaciones a la página. No sé si alguna vez has visto donde usted está tratando de un relleno de un formulario en línea y usted no llena las cosas correctamente. Así que una pequeña cosa se desliza hacia abajo en la parte superior y le dice no lo hayan hecho esto correctamente. Por favor, inténtelo de nuevo. Y entonces, tal vez incluso sólo deslizar hacia arriba. 

Resulta que jQuery se ha construido en funciones que hacen todo eso animación muy, muy fácil. Así que no es en primer lugar el desvanecimiento función, lo cual usted puede llamar en algo. Y es una manera de cambiar el CSS de ese elemento en forma animada. Así que toma lo que sea elemento usted lo llama fade out sucesivamente. Y luego, cambia lentamente de la opacidad hasta que se apague completamente transparente. 

TOMAS REIMERS: La otra populares se deslice hacia abajo, lo que hará algo parece deslizándolo hacia abajo. Así que en el caso del menú desplegable, de nuevo, cuando nos enteramos de la forma de detectar cuando este se ha mantenido por encima, usted podría decirle a este fondo parte deslice hacia abajo ahora. Y entonces, parece deslizando hacia abajo. 

MIKE RIZZO: Y entonces, si sólo tienes algún tipo de animación en cuenta que jQuery no necesariamente proporcionan. Por ejemplo, digamos que jQuery máquina le ofrece un tobogán hacia abajo y deslice hacia arriba. Bueno, vamos a decir que quería deslizar algo por la izquierda o desde el tipo correcto de como el CS50 página principal hace cada vez usted va a un nuevo panel. A continuación, probablemente tendrá que aplicar por sí mismo utilizando la animar función dentro de jQuery. 

Así que de manera similar, que acaba de animar. Y luego, dentro de ella que se necesita un Diccionario de los diferentes valores que se supone que debes pasar. Así que aquí, si quisiéramos animar la elemento foo de tal manera que su anchura sea se expande o contrae a 80 píxeles; dependiendo de lo que actualmente es. Nos acaba de pasar que, como el argumento en su interior. 

Animar también tienen algunos otros argumentos que usted podría pasar, por ejemplo, la velocidad de la animación que quieres darle. Y para hacer eso, yo sólo diría rápidamente Google jQuery animado. Y luego, la crianza de esta página, usted puede ver que tiene un montón de diferentes propiedades que puede aprobarlo. 

Y os animo - cada vez que vienen con algo que no lo hace saber o simplemente quiere aprender más sobre una método particular que puede llamar en algo - Sólo Google. jQuery es extremadamente bien documentado. Y muchas veces hay una gran cantidad de ejemplos que se proporcionan para usted. Si nos desplazamos hacia abajo - hasta abajo - que podemos utilizar, también. 

Una vez más, cuando un desarrollador se va en realidad por la molestia de escribir un biblioteca, por lo general quieren alguien a usarlo. Por ello, junto va a ser una documentación. Y que la documentación que generalmente puede ser que se encuentra en la página del proyecto, que es por eso le dimos ese sitio original en el principio, lo que se vincula a la páginas del proyecto para que pueda ver que la documentación. 

Normalmente, la página del proyecto en el caso de [inaudible], le dijo a la nombres de las clases. En el caso de JavaScript, que da que el nombre de las funciones. Por cierto, si nos desplazamos hasta la cima, una nota lateral rápida en las funciones es cada vez que vea una función implementada así con el disco paréntesis en el medio, lo que significa que esa propiedad es opcional. Sólo un mano a mano. He visto un montón de preguntas sobre eso. 

Así que aquí podemos ver que la animate tiene propiedades como un argumento necesario. Y todo lo demás es opcional. Nota al margen - usted puede pensar en esto, más o menos de, al igual que las páginas de manual. Las páginas man son de documentación para C y para un montón de otras cosas, también. 

MIKE RIZZO: Así que hemos aprendido a cambiar diverso CSS en la página, animarlo, y retire agregar HTML. Pero uno de los realmente más poderosa cosas acerca de JavaScript y especialmente jQuery - lo que le permite hacer es responder a diferentes elementos que suceden. Por ejemplo, aquí tenemos un controlador de eventos. Y eso sólo significa que cada vez que esto evento ocurre, lo manejamos en un de cierta manera. 

Así que aquí, el evento genérico jQuery handler es el punto en. Y entonces, lo primero que siempre es qué evento debería estar escuchando a. Así que aquí, es el clic que que estamos esperando. 

TOMAS REIMERS: Alternativamente, usted tiene en vuelo estacionario, el cual es muy popular. Así que de vuelta a mi desplegables idea menú. Usted tendría el de arriba en vuelo estacionario. Y entonces usted podría cambiar eso. 

MIKE RIZZO: Así es. Y entonces, cuando eso sucede, sólo ejecuta esta función que le damos como argumento y que alerta a hola o hola. 

TOMAS REIMERS: Así que en el caso de JavaScript, este es un lugar que tenemos que desligarnos de C. Podemos realmente tomar funciones como argumentos. Y hay un montón de muy complejas formas de hacer esto. Vamos a promover de una manera, que es se puede definir el funcionar allí. 

Así que cuando usted está pidiendo una función como un parámetro, eres básicamente va a definir la función en el acto. Y la manera de definir una función en JavaScript que es literalmente decir función. Entonces, por lo general, el nombre de la función. Pero nunca vamos a hacer referencia a esta función de nuevo. Así que lo dejamos sin nombre. 

A continuación, los paréntesis, a continuación, el rizado llaves, y luego el código dentro de esa. Así entendemos esta lata ser un poco confuso. Así que le damos la forma general de lo que es un controlador de eventos parece a continuación, que se encuentra en los acontecimientos. Y entonces, el código dentro de eso. 

MIKE RIZZO: ¿Hay alguna preguntas acerca de esto? Esto puede ser un poco confuso la primera vez que lo veo. 

TOMAS REIMERS: Usted realmente quiere abrir un archivo y mostrarles algunos jQuery en este momento? 

MIKE RIZZO: Sí, vamos a hacer eso. Aceptar. 

TOMAS REIMERS: Así que ahora estamos en el aparato. Y lo que hemos hecho es que hemos tomado la la libertad de crear a la vez un index.HTML archivo, que enlaza con un archivo JavaScript. ¿Y podemos abrir el - sí. Bueno, hace dos cosas. 

La primera es que se vincula a el archivo JavaScript. Y veremos que hasta aquí. Vemos que en la cabeza de la Documento HTML, en particular. Entonces verás que hay que que, básicamente, decimos SRC, que significa fuente. Y esa es la dirección URL. 

Así que aquí se puede decir que hemos incluido jQuery. Y también hemos incluido scripts. La otra manera de incluir JavaScript está que puede incluir una secuencia de comandos en línea tag que tenemos en la parte inferior donde se dice tipo de guión es el texto de JavaScript. 

Así que estamos diciendo, escucha, estamos a punto de incluir un script. Y el tipo de ese guión es JavaScript, que es un tipo de texto. Muy simple. 

MIKE RIZZO: Así que esto, un poco, llega a su pregunta acerca de cómo incluimos JavaScript en nuestros archivos, porque cuando nos había PHP, vamos a hacer algo como esto. Y luego, tenemos nuestras funciones de PHP - digamos que las poblaciones hacen algo con que - va allí. Sin embargo, ahora tenemos las etiquetas de script que nosotros le damos, que en realidad son parte del propio HTML, porque no es fingiendo ser un archivo HTML como si es en PHP, porque si intenta ir en y mirar la fuente de la página, verás estas etiquetas script en allí con el JavaScript asociado con en que. 

Así que, si queríamos escribir algo de JavaScript - digamos que queríamos cambiar el cuerpo porque en este momento no tengo cualesquiera otras etiquetas que realmente puedo editar además de cuerpo. Digamos que quería cambiar el CSS de eso. Así que vamos a seguir adelante y el cambio el color de la misma a rojo. 

Así que guarde el archivo. Volvamos a nuestra página Web, actualizar, y lo hace de forma automática ya que no parecía que esperaba en absoluto, porque nosotros no estábamos escuchando para un evento o algo por el estilo. 

TOMAS REIMERS: Entonces, si nos remontamos a ese presentar, en particular, - el código HTML Archivo - lo que vas ver es que tenemos - recuerde que este se carga, más o menos, cronológicamente. Así que tenemos por primera vez la cabeza. que carga los dos archivos. Luego nos dirigimos al cuerpo. Y vemos hola mundo. Así que prestamos hola mundo. 

Y entonces lo último que tenemos es que tenemos la etiqueta script. Así se ejecuta la etiqueta script porque es si la oculta que esperar para nada. Y eso es lo más básico forma de ejecutar JavaScript. 

Dicho esto, se puede poner el guión etiqueta en la cabecera sólo para demostrar este punto? Y corre eso. Vamos a notar que no cambió el color. Y este es uno de los problemas de JavaScript es que las cosas se cargan en un orden cronológico. 

Así en el momento que ese código estaba corriendo, seleccionamos - volver - la etiqueta body. El cuerpo de la etiqueta no existe todavía, porque JavaScript es acorde con HTML. Así que el navegador es como selecto cuerpo. Hay sin embargo, no hay tal cosa. Así que podemos ignorar eso. Y seguimos adelante. 

Y a continuación, se define una etiqueta body. Pero eso nunca se actualiza. Así que cuando la aplicación de la escritura etiquetas, asegúrese de colocar después de que el cuerpo de la etiqueta. Siguiente diapositiva. 

MIKE RIZZO: OK. Así que cambiamos algo. Pero no parece que respondió a nosotros en absoluto, ya que sólo un poco de lo hizo tan pronto como se carga la página. Así que ahora, en vez de hacer esto, ¿por qué No añadimos un controlador de eventos. 

Así que vamos a hacer algo para el cuerpo de nuevo. Y digamos que lo hacemos en - haga clic en. Vamos a añadir una función. 

Cambio Vamos: TOMAS REIMERS su color a rojo otra vez. ¿Por qué no? 

MIKE RIZZO: Sí, vamos a cambiar su "color a rojo otra vez. Está bien. Así que vamos a cargar la página. Bien, nos vemos - como se esperaba, no se enciende de color rojo todavía. Pero entonces podemos seguir adelante y haga clic en él. 

TOMAS REIMERS: Y no volverá de color rojo. 

MIKE RIZZO: Y lo hace volverá de color rojo como se esperaba. 

TOMAS REIMERS: Y podemos ver cómo podemos empezar a construir muy básico interacción. Otras cosas que puede querer hacer es, si no queremos que el cuerpo el rojo, vamos a hacer el código HTML fondo de color rojo. Justo lo que es el mismo CSS. 

Y cuando lo cambiamos, podemos ver esta efecto muy dramático de cambiar el página entera. Así que de nuevo, si usted está implementando cosas, usted puede tener un componente que está destinado a ser hecho clic en. Digamos que un botón Salir y todo un otro componente, que está destinado a responder. Por lo que le quite una ventana cuando esto sucede. 

MIKE RIZZO: OK. Sólo como un ejemplo - que no llega a ver esto antes - Sólo te voy a mostrar lo que parece como cuando nos escondemos algo. Así que voy a seguir adelante y hacerlo deslizar hacia arriba. 

TOMAS REIMERS: ¿Quieres envolver que en un texto de párrafo antes de hacer eso? 

MIKE RIZZO: OK. Sí, ¿por qué no lo hacemos sólo para podemos seleccionar un poco más. 

TOMAS Reimers: Y vamos a darle una clase. 

MIKE RIZZO: Si. OK, así que vamos a ver. En lugar de seleccionar el cuerpo real ahora, sólo voy a seleccionar todo con clase hola, que aquí estamos sólo hay una cosa. Así que no deberíamos tener que preocuparse por eso. 

Así que voy a actualizarlo. Voy a seguir adelante y haga clic en él. Y, más o menos, hizo una diapositiva raro cosa, que no parecía que atractivo. En general, se ven bastante bien. Supongo, esto - por alguna razón - no lo hizo. Voy a hacer un fundido de salida de modo se puede ver en eso también. Mucho mejor. 

Y luego, si abro el JavaScript consolamos de nuevo y queremos ver lo que parece que cuando nos caímos pulg Ahora, sólo llamo desvanecerse en el ajo. Y se desvanece interactivo 

Del mismo modo, en realidad podríamos pasar también un argumento para atenuar o intensificar cabo, que es, una especie de, la velocidad de la misma. Así que vamos a seguir adelante y decir que queremos que ir poco a poco se desvanecen pulg Así que supongo que todavía parecía bastante rápido. Pero fue más lento que antes. 

TOMAS REIMERS: Y si usted quiere encontrar Más información acerca de estas cosas, de nuevo, basta con ir a la documentación de jQuery, que les hemos dado, y leemos a través de estos. Documentan sus funciones increíblemente bien. 

MIKE RIZZO: OK. Así que supongo que vamos a volver a esto. Y podemos hablar de nuestra página pasada. Bueno, podemos terminar con Bootstrap. Y luego vamos a abrir hasta para algunas preguntas. Y si ustedes tienen alguna idea de que desea tratar de tirar hacia arriba y ver si somos capaces de ponerlas en práctica con JavaScript rápidamente. 

Así que en realidad rápidamente acerca de Manos a la Obra, que fue incluido automáticamente en su último conjunto de problemas en la carpeta CSS y de hecho vinculados en su header.php. Por lo que podría haber agregado clases que se definen dentro de Manos a la Obra a la misma. Y habría labrado de forma automática esas cosas en consecuencia. 

TOMAS REIMERS: Así Bootstrap es un muy cosa mágica desarrollado por el pueblo en Twitter. Y lo que debía hacer era - antes de los sitios web eran realmente duro para hacer vean bien, especialmente cuando tuvimos una gran cantidad de componentes comunes. Así que un montón de botones en el web se veía igual. 

Una gran cantidad de campos de texto se puede hacer para ven mejor que el texto estándar campo usted probablemente sabe de verdad webs antiguas o muy mal hechos sitios web, que sólo se ven como literal cuadros de texto sin ningún tipo de texto sombra o cualquier tipo de buen contorno. Así que lo que hizo fue Bootstrap dijo, bueno, Tenemos muchos estilos comunes. ¿Por qué no hacemos un conjunto común de CSS y un conjunto común de JavaScript como así, lo que puede diseñarlo como está y que puede dar a la gente cosas como caída menús desplegables, lo que puede dar a la gente cosas como los modales. 

Modal es lo que aparece sobre la página cada vez que sea estrictamente hablando algo, que inhibe aún más interacción hasta que interactuar con él. Algo como esto es, ¿estás segura de que desea eliminar esta cosa? Realmente no se puede hacer nada más hasta que digas sí o no. 

Le tomó todo esto y empaquetarla que juntos y dijo, aquí vamos. Ahora la gente puede usar esto. Y usted lo puede encontrar a través de en getbootstrap.com. Se incluye automáticamente dentro pon tu último problema. Y tú eres más que bienvenido a usarlo en su proyecto final. Y si quieres seguir ese enlace para obtener Bootstrap. 

Usted verá aquí es la Bootstrap sitio CSS. Verás Bootstrap. Y si se desplaza hacia abajo, verá cómo descargar, cómo instalarlo, et cetera. 

MIKE RIZZO: Y usted también puede, curiosamente, personalizarlo a ser cualquier tipo de temas que desee. Sé que eso es algo que hice para mi proyecto final cuando tomé la clase fue personalizarlo. Una versión diferente de Manos a la Obra que tenía un esquema de color diferente y diferentes formas de algunos cosas diferentes. Así que os animo a jugar con eso. Es un poco divertido que hacer. 

TOMAS REIMERS: Mirando a través de la parte superior de nuevo, es muy similar a la Font Sitio impresionante. Una gran cantidad de documentación se iniciará al parecer similar cuando has visto lo suficiente de él. Así que aquí tenemos la CSS componente de este. Y verás cómo puede labrar cosas. Así que si usted hace clic en tablas, por ejemplo, inmediatamente puede hacer un mesa bastante simplemente añadiendo la tabla de clases a la misma. 

Las mismas cosas para los botones. Si usted sólo tiene que añadir BTN clase y BTN defecto o BTN primaria, puede conseguir cualquiera de estos botones con estos estilos pre-hechos. Y entonces, si usted está buscando algo más complejo que la simple restyling lo w ya tienen, a lo largo de la ficha JavaScript a través de la que la parte superior tienen un montón de componentes. 

Así que aquí tenemos transiciones, modales, menús desplegables, tabuladores y la información sobre herramientas. Una información sobre herramientas es lo que aparece debajo de su ratón cuando pasa algo. Popovers, alertas, botones y plegable acordeones es lo por lo general se llaman. Carruseles, que flip a través de imágenes como. 

Así que estos son los componentes de Manos a la Obra. Te animaría a altamente ir a buscar en ellos. Hay un componente JavaScript y un componente de CSS. Siéntase libre de utilizar puesto que le servirán. No vamos a profundizar mucho en ellos porque sentimos la documentación está muy bien hecho. Y sí. ¿Tiene alguna pregunta acerca de eso? 

MIKE RIZZO: Así como son realmente rápida lado, el diseño de esta página web que rápidamente armamos para esta presentación es realmente se hace usando Bootstrap. Como usted puede ver, cuando hacemos clic sobre estos diferentes pestañas, nunca en realidad son salir de esta página index.html actual. Así que lo que tenemos es diferentes divs dentro de esta index.html. Y luego, cada vez que haga clic en un diferente pestaña, es sólo el cambio de que muestra de uno. 

Por lo tanto, en consecuencia los posiciona, cambia el código HTML de la página para que la ficha actual está marcada como activa para aparece de manera diferente y se ve realmente agradable. 

TOMAS REIMERS: Así que eso fue todo hecho sin escribir casi cualquier CSS. También vemos un encabezado en la parte superior, que los colores son por nosotros. Pero la verdadera puesta en el parte superior de la página y hacer que rollo era Bootstrap. Y a continuación, incluso para otra biblioteca - esta no es uno que hemos hablado, pero uno usted puede buscar en Google si quieres. Esto se llama prettify.js. Y será sintaxis resaltar su código para usted, utilizando tanto CSS y JavaScript. 

La última cosa que queremos hablar de antes de divulgar que salir a la mundo a mirar en las bibliotecas de averiguar cómo usarlos y, con suerte, leer la documentación y encontrar lo que necesidad es cómo encontrar bibliotecas. Así que la primera es sólo somos va a empujar Google. Ir Google. 

Eso es, literalmente, lo que hacemos cuando nos tenga que hacer algo que es Google. ¿Existe una biblioteca de JavaScript que me permite manipular el tiempo en un manera útil? Así que si yo sé que algún usuario que crea una cuenta aquí, y este es el hora actual, ¿cómo puedo calcular el diferencia con que sin tener que calcularlo yo mismo? Así que esto es realmente una cosa común, JavaScript biblioteca tiempo. Y aquí Moment.js-- el más popular. 

Si necesitamos una biblioteca para manipular algo así como el color para poder generar un montón de colores al azar - posiblemente, para generar una estilo o algo - podríamos buscar en Google algo así como JavaScript biblioteca de colores. Y estoy seguro de que habría una ventana con un mil y uno de ellos. Le invitamos a leer a través de ellos. 

Así que la mayoría de las cosas - cuando usted los encuentra - van ser alojado en uno de los sitios que codifican host. Son algunas de los más populares. El más popular, por ahora, es github.com. Y si vas a GitHub en realidad es donde fue acogido Normalizar. Así que si quiere volver a esa. Muéstrales que. 

MIKE RIZZO: Y eso es en realidad donde esta se encuentra alojado también, si te diste cuenta. 

TOMAS REIMERS: Si. Así que si vas a Normalizar e ir a la GitHub. Eran es eso? 

MIKE RIZZO: Esa cosita gato es el símbolo de GitHub. 

TOMAS REIMERS: Oh. Así GitHub utiliza un método llamado Git al código de tienda. Es que usted no sabe lo que es o que te asusta, eso está bien. Usted no tiene que saber qué es Git porque GitHub tiene un botón de descarga en la parte inferior derecha. 

La otra cosa útil saber sobre GitHub es la mayoría de los productos tendrá un me leen. Y si no tienen un sitio web, la leo me voy a hablar sobre cómo se instalarlo, cómo lo usa, lo que hace, et cetera, et cetera, et cetera. Lo que básicamente hemos estado caminar a través. 

MIKE RIZZO: dejar de fumar de Internet. 

TOMAS REIMERS: Eso está bien. Las dos últimas cosas que queríamos para hablar de - hemos hablado de Git - es la solución de problemas. Y éste no es tan relevante para la el producto final, ya que es cuando salga de 50. Y cuando te encuentras con productos la implementación de bibliotecas o la aplicación de su propio proyecto, vas tener preguntas o estás ir a buscar a las preguntas. 

Una vez más, buscar en Google. Eso es, literalmente, lo que hacemos. Esto va a sonar tonto. Pero, literalmente, que Google se. Y de nuevo, una de las primeras cosas por lo general, se encuentra con que es stackoverflow.com, que es una maravilla preguntas y respuestas a la vista. 

Es maravilloso, tanto porque se puede Publicación de las preguntas y buscar respuestas sino también porque que ya tiene una gran cantidad de contenido ya se encuentra completa allí. Así que por lo general cuando se busca en Google una programación cuestión en el primer pareja golpea es posible que ya haya ejecutado en ella durante sus boletines de problemas. 

Y luego, lo último que realmente breve es JSFIDDLE, que es - hoy hemos estado haciendo un montón de trabajo con JavaScript HTML CSS. JSFIDDLE es una aplicación web, que básicamente le permite tomar el código HTML, SU JavaScript parte inferior izquierda, y su parte superior derecha CSS. Y entonces se puede crear un render rápido de ella y ver cómo interactúa. Es muy útil cuando las personas están tratando hacer una prueba de concepto como así es como lo haría hacer un menú desplegable. Tal vez un destape rápido o lo que sea. 

MIKE RIZZO: Así que vamos a ir adelante y haga clic en este. Una nota rápida - mientras que, antes de que fuéramos haciendo al hacer clic. Resulta que JCorey Corea también ha incorporado un en controlador de eventos click que utiliza sólo porque figura eres va a querer hacer un montón de cosas cuando se quiere algo, haga clic en. 

Del mismo modo, también tiene un vuelo estacionario. Pero para llegar a todo el ámbito de esos, un vistazo a la jQuery documentación y hacerlo. Hice algo estúpido aquí. 

TOMAS REIMERS: Así que tengo una muy rápida programa de aquí, que dice botón de clic. Entonces tenemos un bucle for. Para i es menor que 404. Sólo va a aparecer estos mensajes de alerta. 

MIKE RIZZO: ¿Y cuál fue el código 404 se puso en HTML? ¿Recuerda alguien? No se ha encontrado, a la derecha. Chrome también añadió esta ordenada cosa donde se puede - 

TOMAS REIMERS: Porque la gente como Mike empezó a hacer esto mucho y molestar a los usuarios, lo que permite a ver info. 

MIKE RIZZO: Si. 

TOMAS REIMERS: ¿Tenemos alguna pregunta sobre esto, acerca de JavaScript bibliotecas, la búsqueda de bibliotecas o miradas lo desarrollo web como en el mundo real? Estamos corriendo contra el tiempo. Así que no estoy seguro de que vamos tener tiempo para poner en práctica a menos que sea realmente rápido. ¿Estamos bien? 

MIKE RIZZO: Cualquier cosa que ustedes le gustaría para ver realmente rápido, como, en dos minutos o menos? 

TOMAS REIMERS: Cualquier cosa podemos aclarar? Cómo escribir en - 

AUDIENCIA: [inaudible]? 

MIKE RIZZO: Sí, así que eso es - 

TOMAS REIMERS: Usted sólo puede golpear Control-U en el sitio web. 

MIKE RIZZO: Oh, no sabía eso. 

TOMAS REIMERS: Yo creo, sí. Control-U. Sí. 

MIKE RIZZO: Oh, así que esa es la código de la página web. Pero si usted realmente desea descargar nuestro archivos y todo, se encuentra alojada en github.com 

TOMAS REIMERS: recortar mi nombre - Tomas Reimers - slash Seminario de guión CS50. 

MIKE RIZZO: Y usted puede encontrar de todo allí. 

TOMAS REIMERS: Esto es lo que GitHub parece, por cierto. Así que de nuevo, cuando se ve una fuente abierta proyecto, por lo general, que va a ser una lectura yo ahí que usted puede leer. Y si vuelves, te darás cuenta de que usted tiene el zip de descarga, que se le permiten descargar la fuente código para incluir la producto en su propia cosa. 

MIKE RIZZO: Sí, y si sólo click en las index.html muy rápidamente - 

TOMAS REIMERS: Usted verá aquí está la código fuente de nuestro sitio web. 

MIKE RIZZO: También, me olvidé de empuje derecho antes de la gran mesa que incluidos, pero también hay una mesa de chmods que se incluyeron sólo por su claridad. Pero si nos desplazamos hasta el fondo de la inferior, en realidad no nos hacemos muy tanto con el código JavaScript cosas en absoluto con esto. Es exclusivamente a partir de todo lo otra cosa que lo que teníamos. 

Así que gracias chicos por venir y escuchando. Esperamos que este era muy servicial. Si usted tiene alguna JavaScript relacionada preguntas o simplemente quiere hablar ¿qué otra cosa como lo que otras cosas interesantes se puede hacer con JavaScript, nos encantaría hablar con usted. 

TOMAS REIMERS: Si usted tiene una pregunta acerca de su proyecto o si esto puede ser relevante, probablemente vamos quedemos un poco después de este. Pero aparte de eso, tienen un buen fin de semana. 

MIKE RIZZO: Sí, disfrutar. Nos vemos chicos. 

TOMAS REIMERS: Nos vemos.