>> Muy bien.
Así, JavaScript.
Casi todo el mundo en esta sala probablemente tiene algún grado
de la comodidad con que si Fue allá cuando en SC50
o que ha sido personal proyectos web e incluso
si lo has hecho un poco de ella con este último proyecto de la base de PHP,
pero para la mayor parte, muchos de ustedes,
incluso si usted tiene un poco de consuelo
con JavaScript quizá no se han tomado
por sentado cómo el funciona el lenguaje y lo que sucede
de debajo del capó y lo que vamos a intentar
hacer hoy es pelar algunas de las capas técnicas
de lo que JavaScript está, cómo se diferencia de un lenguaje
como PHP, ¿cómo puede ser utilizado no sólo del lado del cliente
pero también del lado del servidor y a continuación, centrarse muy específicamente
en este marco, no notará ninguna JS que es esencialmente un tiempo de ejecución,
un programa con el que puede ejecutar código JavaScript
lado del servidor y se está convirtiendo tipo cada vez más popular
de la misma estatura de este día de probablemente Ruby y PHP
y Python y verás
que tiene algunos bastante características de gran alcance por medio de algunos
de la lengua incorporada construcciones.
Pero en primer lugar, algunas de las fáciles cosas sólo para recordarle
de cómo funciona esta lengua y si usted tiene problemas para ver cualquier
de esto, sólo el grito y vamos a ajustar.
Por lo tanto, uno como en PHP hay ninguna noción de una función principal,
que acaba de empezar a escribir código
y para ello se puede interpretarlo arriba a abajo.
En el contexto de un navegador
o en el lado algo del servidor vamos a ver algunos ejemplos
en un rato.
Condiciones, sintácticamente equivalente a PHP y C,
C + + y otros lenguajes tan sólo para darle un sentido
de cómo podríamos estructurarlo,
sólo hay una canónica condiciones.
Expresiones booleanas, misma exacta sintácticamente como usted ha visto
en esos mismos otros idiomas, tanto para oring
y para terminar las cosas juntos.
JavaScript tiene interruptores, muy parecido a PHP y otra de do
y no está limitado, como en C a primitivas integrales
como caracteres y ints puede en realidad hacer otros tipos de valores.
Loops. Por lo tanto, esto es exactamente de la misma
y probablemente una docena de idiomas, bucles while, do while
y entonces este truco aquí.
Por lo tanto, esto es una especie de conocido como enumeración rápida
y es una manera muy inteligente de igual que en PHP hacer
para cada FU como bar usted puede de manera similar,
en un objeto de JavaScript, donde object es el nombre
de la variable aquí, por ejemplo, var i en el objeto y en cada iteración
de este bucle, i es va a ser uno
de las claves de ese objeto.
Por lo tanto, si usted tiene un objeto para un estudiante, y el estudiante tiene un ID
y un nombre y una casa, iterativa tomaré
del valor de identificador y el nombre y casa y que pueda para ello el índice
en objeto como si fuera una matriz usando corchetes
notación para obtener el valor del DNI o nombre de clave
o casa y así sucesivamente.
Y al contrario de común supuesto, objetos JavaScript
propiedades no son necesariamente garantiza que sea
en el mismo orden, esta es también fiel a PHP lo que no asume
que las cosas se quedarán en el mismo orden
que se pone a los tecla pares de valores en un objeto.
¿Qué hay de las matrices?
Hay un par de maneras escribirlo sintácticamente
pero esto es probablemente el más común plaza ahora sólo usando
notación de corchetes.
Por lo tanto, esta es una variable a llamar a los números que contienen array
de seis enteros allí, aquí es una simple cadena
y observe lo que está ausente a partir de estos ejemplos,
¿Qué es JavaScript aparentemente inexistente.
Sí. Por lo tanto, no hay ninguna noción de escribir, luego, no
en este contexto aquí, pero esto es de hecho una cadena.
Así, JavaScript tiene tipos y que era de hecho un conjunto
que es en sí mismo un tipo y cada uno de los elementos
en la matriz fueron de tipo número que JavaScript les llama.
Por lo tanto, se trata de una vagamente escrito lenguaje y ya veremos
JavaScript como PHP tiene un operador identidad
y otros mecanismos de realmente comprobar cuál es el tipo
de alguna variable es tanto para la comprobación de errores
y para otras aplicaciones.
Y aquí hay un objeto de muestra contiene sólo un ID y un nombre.
Y ahora, notamos que estamos utilizando notación de corchetes rizado,
la sangría y el blanco el espacio es una especie de sentido
y esto declara una variable cuyo nombre es Rob
y cuyo ID es 1 y el tipo de fecha es aquí nuestro número
y la cadena, respectivamente.
Y entonces este es algo ligeramente diferente
si alguna vez has hecho algo con el Ajax en estos días?
Usted probablemente utilizado un objeto como éste
pero lo que vale la pena señalar aquí?
¿Qué es sintácticamente nunca tan diferente, tan sólo un par
de las cosas entre este ejemplo que es sin duda más pequeña
y este ejemplo más extenso.
Así, por primera vez en simples plazo, ¿qué es esto?
¿Cuál es el tipo de personal se lo vas a decir?
Bien, es una matriz, es una serie de qué?
>> Objetos.
>> Bien, es un conjunto de objetos.
Y ahora, se centran en un solo - cualquiera de estos objetos,
lo que es diferente entre esto y esto?
>> Las claves son cadenas.
Sí >>. Así, la llaves son cadenas,
y las teclas son en realidad cadenas en ambos casos
y esto es una especie de idiota
en mi opinión, el diseño histórico decisión cuando usted está utilizando
JSON, JavaScript Object Notation,
que es esencialmente un formato de transporte
para el envío de los datos normalmente a través de la red
entre el cliente y el servidor, es necesario recordar
que esto no es en realidad JSON válido y ésta es una
de estos FYIs menos que nunca golpear su cabeza contra la pared
durante varios minutos sin una buena razón, no es válida JSON
porque las teclas son en realidad no cotizado.
JSON requiere estúpidamente que las claves no sólo ser citado,
sino que se cotizarán doblemente, comillas simples no son suficientes.
Así, pequeña cosa estúpida y más de un hecho de la diversión
para los propósitos de la actualidad, pero esta también sería válido JavaScript
no se trata sólo - el inverso no es cierto.
Está bien.
Por lo tanto, vamos a ver un montón más de eso.
Está bien.
Entonces, eso es JavaScript sintácticamente probablemente bastante
familiar, cualquiera de ustedes que tienen nunca utilizado antes JavaScript
que no es un gran salto desde PHP o la mayoría de cualquier lenguaje de procedimientos
que podría haber usado.
Así, hoy nos centraremos en los aspectos interesantes
de JavaScript particularmente en el contexto de no js
pero no exclusivamente porque hasta ahora lo que has,
si utilizó Javascript, utilizado dentro de un navegador.
Por lo tanto, no JS es un entorno a continuación, en un poco que está pasando
que nos permitirá acceder El código JavaScript de cliente -
lado del servidor, pero en primer lugar, vamos a echar un vistazo
en algo que es un poco más del lado del cliente.
Por lo tanto, me he ido y esto es ligado en el sitio web de golf,
si quieres jugar a lo largo, hay dos subdirectorios
en Zip de hoy de la llamada pernos prisioneros de origen zip en el sitio web
y estos son sólo un algunos ejemplos que recuerdan
de las cosas que podría haber visto antes y en cierto modo me ellas construidas
desde simples a ligeramente más complicado de tomadura de pelo
algunas de las características de JavaScript.
Por lo tanto, vamos a seguir adelante y tomar un vistazo por ejemplo a esto.
Así que, por desgracia la etiqueta de parpadeo fue matado hace varios años
como la forma han conseguido más bonita y más bonita
y la etiqueta de parpadeo era literalmente corchete abierto parpadea corchete de cierre
y que tipo de no más tiempo con nosotros.
Pero, aún podemos resucitar esta idea de una etiqueta por sólo un poco
de pensar en ello lógicamente, ¿cómo ir
trata de hacer algo como Este parpadeo intuitivamente?
Suponiendo que usted sabe un poco poco de JavaScript y CSS o
en este punto, es Está bien si no lo haces.
>> Establecer un tiempo de espera y ocultar entonces después voy Etiquétalo
y mostrar de nuevo.
>> Sí, perfecto.
Esta es una especie de la programación 101,
¿cómo lograr una efecto visual de esta manera?
Bueno, de alguna manera tiene que mostrar algo
y luego ocultar algo, espectáculo algo, algo que ocultar
y como propone Jonathan el uso de algún tipo de tiempo de espera,
algún tipo de programa que usted puede hacer esto en varias ocasiones sin necesidad de
para utilizar un bucle o algo así.
Así que, déjame ir a blink-0.html
y déjame encojo el tipo de letra un poco
de modo que más de esto encaja.
Y vamos a echar un vistazo a lo que está pasando aquí.
Así que, primero de todo, cuenta de que el cuerpo
de esta página es super sencillo, en el interior del cuerpo
de la página es sólo un div.
He dado arbitrariamente un ID de felicitación
y que podría ser cualquier cosa en tanto que es único
y entonces sólo tengo un poco de texto simple, hola mundo.
Así pues, si ahora me desplazo hacia arriba, notar un poco de estilo suave y esponjosa.
Así, digo, agudo saludo, que como ustedes saben
en CSS sólo significa únicamente identificar el elemento
con una idea de saludo,
tamaño de la fuente va arbitrariamente ser esto, los márgenes y la alineación del texto.
Por lo tanto, carente de interés detalles estéticos
para centrar más o menos el texto.
Por lo tanto, la parte interesante es en la etiqueta de secuencia de comandos de aquí
que se me ocurre para poner dentro de de la cabeza de la página.
Así, We'Ll - usted puede hacer esto en cualquier número de maneras
y vamos a ver unos cuantos iteraciones de este mismo programa
pero vamos a empezar desde el principio.
Por lo tanto, he declarado una función llamada parpadeo
y al parecer se utiliza esta incorporada en el método DOM llamada
GetElementById que es quizás uno de los métodos más potentes
que se obtiene de la caja con JavaScript buscando
"Saludo" no tiene por qué ser comillas como si fuera
en HTML está bien está bien siempre y
como usted es estilísticamente consistente en estos días me atrevo a decir
muchas personas utilizan Java, comillas simples en JavaScript,
comillas en HTML, pero no importa realmente
siempre y cuando usted es consistente.
Así pues, aquí, si usted no está familiarizado, en realidad se puede acceder a
con JavaScript CSS propiedades en elementos.
Así, noto que tengo declarado una variable llamada div
y se almacena en el interior de esa variable,
una referencia a lo que sea ese elemento DOM es.
Por lo tanto, si usted piensa de nuevo a CS50 o cualquier clase en la que pensabas
sobre las estructuras de árbol y DOM, Document Object Model,
esto es sólo una referencia a un nodo en un árbol,
que representa esta página
y si div.style.visibility propiedad es igual, igual, igual,
oculto, entonces sólo quieren una palanca que
como Jonathan propuso de lo contrario yo quiero
para cambiarlo a oculto.
Ahora, como en el lado, por qué la triple es igual allí?
O ¿qué es eso en comparación con iguales dobles?
>> Equivalente estricto.
>> Lo sentimos.
>> Equivalente estricto.
Así, son los operadores de identidad
donde por no estás comprobando sólo el valor de la variable
como, sentido igual igual sino también el tipo de la misma.
Así, a pesar de que no tenemos especificados hasta aquí todos los datos
tipos para las variables en éste o cualquiera de los toboganes,
hay un tipo asociado con esa cadena oculta
con ese valor, oculto y que es de cadena curso.
Así, en este caso, se en realidad no importa
porque no hay manera de que vamos a combinar una cadena
de "oculto" con algún otro valor
pero esto es a menudo una buena hábito que le diría a conseguir
en el uso de la igualdad, igual,
signo igual es por lo general una buena cosa.
Esto hará que su código más robusto tanto en PHP, pero
y en JavaScript porque usted se quedará
en ocasiones casos de esquina donde el valor puede ser cero
que está comprobando y cero Se puede confundir con falso
o podría ser que no y como en PHP,
Javascript también puede tener múltiples valores falsamente donde por cero
y falso y null y undefined todos pueden resolver de forma implícita
false.
Pero si usted está realmente con ganas para comprobar si hay un valor particular
como cero, el número o falso booleano entonces usted tiene
utilizar este operador identidad.
Así, podría suceder para conseguir en todos modos a pesar de que aquí,
es una especie de sentido porque sabemos que estamos comprobando
para un valor de cadena y es no va a ser otra cosa.
Así pues, aquí está la magia entonces, si yo desplácese hacia abajo para esta línea aquí,
al parecer, construida en el objeto ventana
y esta es una característica de un navegador que puede acceder
a esta superpotencia mundial objeto llamado Ventana,
dentro de que es parte de la funcionalidad,
si pieza de la que se establece el intervalo
y que se necesita aparentemente ¿qué tipo de argumentos?
Sí.
>> Llamada función y un tiempo.
>> Bueno. Así, una función llamar y un tiempo
y de modo particularmente un referencia a una función,
un puntero a una función en sentido
y esa es la función eso va
para ser ejecutado cada número de milisegundos y en este caso,
es cada 500 milisegundos.
Por lo tanto, es una forma de inducir efectiva y bucle infinito
sin utilizar iteración pero lugar diciendo JavaScript
al motor en el interior del navegador
que hacer esto cada 500 milisegundos o está cerca
a 500 milisegundos como se puede,
resulta que debajo de la capilla,
hay lo que se llama un evento bucle y vamos a volver a este
en el contexto de nodo de JS que acaba constantemente clase
de ahí sentado, spinning, a la espera de trabajo por hacer
y tan pronto como se dan cuenta,
Han pasado 500 milisegundos blink se llamará de nuevo
y una y otra vez es junto con cualquier otro trabajo
que hay que hacer.
Así que, ¿qué podemos mejorar en esta lista?
Bueno, déjame abrir hasta blink-1.html
y demostrar un abrir y cerrar-1.html
como estéticamente perfectamente idénticos.
Entonces, ¿qué podríamos mejorar aquí?
Bueno, notará que era una especie de inútil
para definir una función llamada Blink porque cuántos
en cuántos lugares ¿verdad llamar al abrir y cerrar la función?
>> Sólo una vez.
>> Por lo tanto, uno.
Por lo tanto, no estaba mal, en hecho, es probablemente bastante
sencillo.
He definido un abrir y cerrar la función, me llamar a un abrir y cerrar la función por medio
de este parámetro, pero técnicamente,
no había razón para que y un paradigma común
en JavaScript es realidad hacer uso de las funciones lambda
como usted puede recordar de 51 o funciones anónimas
donde si no es necesario un nombre para una función,
si sólo estás llamando sin duda en un lugar,
¿por qué molestarse estorbar su código, que saturan la mente programadores
y su espacio de nombre realmente con símbolos
que en realidad no tenga que preocuparse.
Y así, en esta versión aquí,
Noto que estoy llamando window.setInterval directamente
en la parte superior de mi etiqueta script entonces yo estoy pasando
en una función sin nombre que no toma ningún argumento
y eso es perfectamente fino y entonces el cuerpo
de esa función que aparece es idéntica a lo que era antes
y la única sintáctica diferencia ahora es
aquí al lado de la 500.
Voy a cerrar el cuerpo de la función
y entonces yo digo ejecutar ese código anterior,
cada 500 milisegundos.
Cambio lo tanto, muy marginal
pero un paso hacia lo que es probablemente un más elegante
aplicación de la presente.
Por lo tanto, vamos a tomar éste intensificar aún más si ahora voy
en un abrir y cerrar dos, usted ver una biblioteca común,
el efecto de los cuales se va
para ser completamente insignificante estéticamente pero si vamos
en la versión dos aquí, aviso que en la parte superior de mi cabeza,
He incluido el última versión de JQuery.
Y entonces, aquí abajo, Acabo de limpiar
el código un poco, es no va a ser un mundo de diversión
seguir utilizando funciones DOM nativos
y una especie de prima de JavaScript.
De hecho, JQuery como puedas saber se ha convertido en tan popular
que la mayoría de la gente simplemente conflicto con jQuery JavaScript
pero en realidad sólo una cena biblioteca de utilidad escrita
un tipo llamado John Resig y desde otros
que tienen sólo hace un muchas cosas tediosas
en JavaScript más fácil y más sucinto.
Así, en este caso aquí lo que está pasando?
Así pues, tengo esta apariencia de un signo de dólar, más sobre esto
en un momento, y luego este es un selector CSS.
Así, es muy similar en espíritu de lo que hice antes,
pero esta vez, estoy literalmente, utilizando el hashtag
para indicar un único identificador de llamada de felicitación
y luego aparentemente . Css es un método integrado
a cualquier objeto es que me acabo de crear
y estoy comprobando el valor de la tecla de visibilidad.
Y si el valor de esa clave iguales, iguales, iguales, escondido,
entonces voy a cambiar y Voy a cambiar esta vez
utilizando el mismo método que aparentemente está sobrecargado
en el sentido de que tiene dos firmas diferentes,
uno con un argumento y uno con dos argumentos,
el segundo de los cuales es el pionero,
el primero de los cuales es un captador por así decirlo.
Y si curiosa y si lo En realidad nunca se vio en esto,
si vamos a jquery.css espero golpear la parte superior es de hecho este
y se puede ver una mayor explicación formal
que nos limitamos a usar esto, . Css con nombre de propiedad
y luego el organismo usa CSS dot
con un nombre de propiedad y un valor.
Así, marginalmente más limpia, pero cuenta el tipo de patrón aquí
con cada iteración de este código,
estamos especie de lo que es más y más fuerte y más fuerte
y no dicen mejores diseños
ya que estamos utilizando a alguien código de otra persona que ha eliminado
parte de la complejidad.
Así que, ahora vamos a hacer este aún más simple.
Y de hecho, si me quito toda la cotizaciones que usted verá apenas todo el
comentas verás cómo sencillo que esto ha llegado.
La única diferencia aquí, por supuesto, es
que estoy usando una palanca método que también viene incorporado
para jQuery y eso es sólo
porque otra persona escribió el código
que en realidad alterna el ajuste de visibilidad
de cualquier elemento DOM que lo envía.
Por lo tanto, cada vez mejor.
Y así, este es un patrón,
a pesar de que esto es una cena ejemplo sencillo y clasificar
del efecto neto estúpido que es una pieza de parpadeo de texto,
es esa clase de pensamiento proceso que usted debe pensar -
estar pensando en no necesariamente el primer
escritura pasiva algo para el próximo proyecto
pero sí como iterar con su asesor o conmigo
y sus reuniones de equipo o usted simplemente revisar su código de compañeros de equipo
acerca de apriete cosas, ¿verdad?
Después de todo, es menos -
unas pocas líneas de código que en última instancia tiene
en teoría, cuantos menos te molesta es probable que se invita
porque no son simplemente menos código que meterse con.
Está bien.
Por lo tanto, un par de robos de balón.
Funciones lambda, funciones anónimas,
muchos de los cuales han visto antes
y luego también acaba de apretar las cosas con una biblioteca
como jQuery en este caso particular.
Está bien.
¿Alguna pregunta?
Vamos a hacer otro cliente aspecto lateral aquí,
en forma de cero tenemos este efecto neto.
Forma de Super simple y aparentemente si trato de hacer clic regístrate aquí
Inicialmente me dice usted es registrado, bueno, no realmente.
Bueno, ¿por qué es eso?
Bueno, aquí está la forma-0.html muy poco código,
No JavaScript en absoluto y es completamente una especie falsa
de forma porque la acción valor es registered.html
lo que significa que no importa lo que Escribo en esta forma,
donde se va a ser enviados en el servidor?
Sí. Así que, para registered.html que es claramente un archivo HTML
que es, por lo tanto estática archivo que no tiene medios
de tomar la entrada del usuario asumiendo no hay código JavaScript
incrustado en él eso es mirando en la dirección URL
así que esto es totalmente un NOOP y que nada va a suceder
con los datos presentados, pero se puede ver la estructura
de una forma bastante simple HTML5
que tiene unos pocos contraseña, unos pocos tipos de entrada.
Así que, vamos a realmente ahora añadir un poco de comprobación de errores
y ver cómo podríamos mejorar esto.
Así pues, aquí es una especie de un pobre el camino del hombre de la aplicación de esta
y es una especie de pedazo repugnante de código.
Así, en primer lugar vamos a desplazamiento hasta la parte inferior
para ver lo que es lo mismo y lo que es diferente.
La única cosa diferente ahora entre este
y la versión anterior es que yo he dado la forma y el ID
de "registro" podría haber sido cualquier cosa que quiero
pero que va a ser única identificable incluso eso no es
estrictamente necesario porque si un página sólo tiene una forma seguramente
podría encontrar con una de métodos selectores de jQuery.
Pero de esta manera sólo hace es más determinista.
Así que, si me voy ahora a mi guión etiqueta, observe lo siguiente,
iguales window.onload una función anónima.
Entonces, ¿qué está haciendo esto?
Así, se recordará que, en la programación del lado del cliente -
De JavaScript en lugar de páginas HTML han asociado diversos eventos
con elementos, pulsando y la presentación y el enfoque
y la distorsión y otros tales eventos que podrían ocurrir
como un usuario normalmente interactúa con la página,
window.onload hace lo que dice.
Por las ventanas de toda la carga
así que una vez que todas las imágenes han sido descargado una vez que todos los archivos se
sido descargada y una vez la página se ha cargado,
hacer el siguiente código, y cuenta si me cambio a la parte inferior
de este método, observe que no hay paréntesis
después de la llave que es decir
que no estoy ejecutando esta función hasta ahora aquí,
el navegador va a ejecutar que para mí cuando se ha determinado
que la página se haya cargado.
Por lo tanto, vamos a ver lo que hemos hecho,
document.getElementById registro
de manera que sólo me da una referencia al nodo
en el árbol que es de cuenta un ID de registro.
Y ahora, me voy a registrar otro controlador de eventos
haciendo form.onsubmit obtiene esta función anónima
lo que significa que la siguiente código debe ejecutarse siempre que
esa forma se presenta.
Ahora, la mayor parte de esto es sólo especie de aburrido lógica.
Así, si el valor de la campo de correo electrónico en el formulario es
"Nada", entonces usted debe proporcionar su dirección de correo electrónico,
gritas al usuario una alertar y luego devolver false.
Y luego tengo una montón de otros controles,
los controles de la contraseña,
los comprueba si el contraseñas son las mismas,
los controles si el acuerdo casilla está marcada o no
y yo simplemente le grito a el usuario si cualquier
de esas pruebas en realidad un error.
Y así, aquí es un ejemplo aún aunque es un poco artificiosa
aquí el hecho de que estoy usando iguales, iguales, iguales,
significa que el usuario no se puede tratar de engañarme
escribiendo lo de valor.
O, más bien estoy verdaderamente la comprobación de la presencia
de la cadena vacía, el usuario no ha escrito nada todavía.
Si el usuario escribió en, literalmente, cero,
"Cero" potencialmente podría haber confundirse con la cadena vacía.
Y digo que es una especie de sentido aquí
porque, obviamente, incluso cero No es una dirección de correo electrónico.
Pero si esto era una más campo genérico como un campo de texto
o un nombre o una descripción o algo que valorar para
y no es necesariamente sintácticamente tener
al ser una dirección de correo electrónico, el usuario podría escribir algo así como cero
y de nuevo caso de esquina, pero eso es por eso suelen comprobar los tipos se
una cosa útil.
Usted está realmente la comprobación de que el usuario haya escrito nada
en ese campo.
Entonces, ¿qué sucede si ninguno de esas pruebas fallan, bueno,
devolviendo true interior de un controlador de eventos
como onsubmit sólo significa let el comportamiento original en realidad
propagar y, por tanto, la forma conseguirá presentado.
Y es por eso que cuando finalmente hace clic en Enviar antes de llegar
a través de register.html y si lo hago ahora, aviso,
Me gritar en si no lo hago proporcionar una dirección de correo electrónico
y puedo escribir malan@harvard.edu,
carmesí [fonético], carmesí, marcando la casilla,
y ahora registrar y me dice, de nuevo,
está registrado o no realmente.
Está bien.
Así que, vamos a limpiar esto sólo poco y luego la transición
a la nueva más reciente cosas del lado del servidor.
Así que, si me voy a la forma-2.html, notar un par de cosas.
Así que, uno, traje jQuery nuevo en la mezcla
por lo que de nuevo es este signo de dólar
y ahora estoy usando algunos métodos de jQuery.
Así, en primer lugar, ¿qué es lo que tiene el signo de dólar que es
tan especial aquí?
¿Cuál es el signo del dólar atado en la mayor parte de cualquier código de jQuery?
Sí.
[Inaudible Observación]
Aceptar. Por lo tanto, la función de signo de dólar pasa por el DOM buscando
para algo con este particular, selector CSS.
Así, cierto, pero casi demasiado precisa.
Eso es lo que sucede cuando se pasa de una cadena
como en este caso, pero no lo hace siempre tiene que pasar una serie.
De hecho, el caso en cuestión, la misma primera línea aquí es que no es un
Selector CSS, estoy pasando en una función lambda.
Así que, en general - por lo que, buena respuesta, pero demasiado preciso.
En términos más generales, ¿cuál es signo de dólar representa?
>> Sólo jQuery.
Sí >>. Así pues, apenas jQuery o es sólo una función
que hace algunos años guy escribió y otras personas tienen
enriquecido luego que, literalmente, por defecto se llama -
oops, se llama jQuery.
Simplemente - resulta a diferencia de muchos
de signo idiomas dólar es una símbolo perfectamente válido utilizar
en el nombre de una variable, mientras que
en signo de dólar PHP obviamente, tiene un significado especial
pero en JavaScript como en algunas lenguas, muestra de dólar
y el guión bajo y el otro tal caracteres especiales totalmente de fiar
para utilizar en su propio símbolo nombres de variables.
Así, alguien acaba de decidir que, ¿sabes qué?
Va a ser bastante tedioso
para que todo el mundo escriba jQuery todo el tiempo,
déjame especie de planta un estaca en el suelo y decir:
"Esta biblioteca se utilizar el signo de dólar ".
Y de hecho, esta no aumentar el riesgo
que alguien más presuntuosamente se va a utilizar el signo de dólar
para su biblioteca, pero hay maneras de especie de asegurar
que cuando se utiliza el dólar firmarlo asigna a jQuery
porque se puede probar si que ya se ha asignado
a otra cosa esencialmente.
Está bien.
Entonces, eso es todo lo que Es decir, no hay magia.
Es sólo un sexy busca pedazo de sintaxis que es agradable
y rápida y fácil de escribir.
Entonces, ¿qué sucede cuando se escriba la muestra de dólar paren abiertas
y a continuación, una función anónima.
Bueno, resulta que este es notación realmente taquigrafía
para el documento de puntos paren abierta lista.
Así que, como Cynthia notó anteriormente ya hemos encontrado una
caso esquina.
Si usted acaba de pasar en la función lambda,
el efecto del dólar muestra es un poco diferente.
De hecho, lo que realmente está sucediendo es que es equivalente a este,
pasando una referencia a el objeto de documento mundial
esto es mundial como el objeto de la ventana es
que le da un poco de funcionalidad especial
que afecta a toda la página o el navegador y resulta
que en el documento cuando usted lo envuelve con jQuery,
jQuery esencialmente se da cuenta, oh, esto es una referencia
a ese objeto documento especial,
permítanme registrar una controlador de eventos llama listo
que no es nativa JavaScript o DOM relacionados.
Ready es un jQuery Lo que dice
cuando la página se ha cargado todos los elementos HTML
pero no necesariamente cargado, la totalidad de la CSS y las imágenes
y archivos de JavaScript y archivos flash y los gustos.
Por lo tanto, es un paso antes de de la carga y luego seguir adelante
y ejecutar lo siguiente.
Y el lado positivo de la utilización de listas medios es que se puede, ya sabes,
que todos los elementos en su DOM,
todo de la identificación única cosas con ID, existen aún
si la página, su contenido se están cargando y carga
y usted tiene algún iconos rotos por un momento
o una página en blanco en el fondo.
Sí.
>> ¿Qué pasaría si [inaudible]?
>> Ejemplo perfecto, una pregunta perfecta.
Por lo tanto, vamos a ver si podemos simular esto ahora mismo.
Así pues, permítanme continuar y eliminar estas dos líneas aquí y luego
sin molestarse en arreglar la sangría, déjame ir por delante
y eliminar esta aquí - oops, esto de aquí abajo.
Y ahora, que me dejes pasar a la página, vaya a la forma-2.html y tipo
Registrarse, nada parecía suceder, digamos, ¿por qué fue que,
vamos a seguir adelante y abrir hasta inspector de Chrome,
abrir la consola sólo para ver si pasa algo aquí, ahora,
inscribirse, aún nada.
Así, el código es sintácticamente multa
así que no estoy viendo ninguna mensajes de error de color rojo,
pero lo que claramente No está sucediendo?
Ninguno de mi código es correcto, no funciona por lo que ninguno
de mis códigos parece ser ejecutando, así que ¿por qué es esto?
Bueno, JavaScript y navegadores más en general ejecutar el
contenido de una página web, la parte superior a abajo, de izquierda a derecha.
Y el problema es que debido a que la parte superior
de esta página ha HTML luego la cabeza a continuación, la escritura y luego otro guión,
esto va a quedar ejecutada antes lo que es aún listos,
o incluso existe en el árbol la representación de la página.
El formulario en sí mismo, ni siquiera el existe cuerpo en este momento.
Así, jQuery es lo suficientemente inteligente con él es la comprobación de errores
que si no hay ningún elemento con el identificador único del registro,
que no va a rescatar a los de usted
y acaba de desencadenar alguna consola error y romper toda la página,
que va a pasar por alto en silencio usted, pero la razón de que ninguno
de este código se ejecuta cada vez
porque cuando usted tiene registradas de este presente guía,
no existía ningún elemento para asociarlo.
Así que es una especie de no op allí.
Así, especificando lugar, espere hasta que la edad se ha cargado
si lo hiciéramos el window.onload Lo que es una especie
de la vieja manera de hacer escuela o la forma en jQuery sexy
de esta manera, podemos decirle que espere hasta que todos
de esas etiquetas HTML tienen sido analizada de manera que incluso
Si las imágenes no han cargado, en menos que el nodo está en el árbol,
entonces JQuery puede asegurar que todo está allí.
Sí.
[Inaudible Observación]
Sí, bueno, sí, absolutamente.
Así, la otra solución a esto, si usted no ha utilizado este
o no recordaba que esta existía,
se podía mover en absoluto todo esto a la parte inferior
de la página web, en el interior del cuerpo todavía pero por debajo de la forma
y que sería también resolver este problema.
Es sólo típicamente considerada una mala práctica.
Es un poco desordenado y descuidado especialmente
si sigues jamming todo a la parte inferior de la página,
sobre todo cuando me quedo cosas sencillas, poniendo todo
de mi código en el interior de la página HTML
cuando, por supuesto, usted puede sin duda entrar en el hábito
de factoring a cabo en un archivo separado
momento en el que es simplemente agradable
centralizar la archivos en la cabeza.
Excepto que hay un precio que usted paga
poniendo JavaScript otros activos, como archivos CSS
en la cabecera de la página, ¿cuál es el riesgo de que se ejecuta?
>> Más lenta carga de las páginas.
>> Más lenta carga de la página, ¿Por qué?
>> Debido a que estamos tratando para cargar todas las bibliotecas
antes de [inaudible].
>> Exactamente porque los navegadores lea la parte superior de código a abajo,
izquierda a derecha si Google analytics son lentos
o el jQuery CDN es lento o la API de Facebook es lento
y que el archivo simplemente se cuelga potencialmente dependiendo
sobre la forma que ha cargado el archivo, la página entera podría parecer que se bloquea.
Y si usted ve esto mucha franqueza
en los sitios web que tienen mucho anuncios de baja calidad
en ellos, somos sólo una lenta o sitio web derribado podría colgar una página
por alguna indefinida número de segundos
hasta que finalmente el navegador esperemos que el tiempo de espera en la que
y luego te muestra el resto de la página.
Así que, si alguna vez ha utilizado como el Facebook, como el botón,
en su página web, déjame a ver si puedo encontrar este
sin tener que iniciar sesión aquí.
Así pues, si usted va a la Botón como el de Facebook
y haga clic en un código get, maldita sea,
vamos a ver si podemos encontrar el ejemplo,
seguramente alguien había publicado esto.
[Pausa]
Voy a renunciar en unos pocos segundo, si no vemos esto.
Facebook asynch - OK.
Por lo tanto, este es el código y, a menos que han cambiado recientemente
que Facebook en realidad recomienda que utilice
para cargar su biblioteca y en realidad proponer
que se pone esto en el cuerpo de la página.
Así, Facebook le aconseja crear una especie de estúpido DIV
que acaba de ID único como esto, entonces tiene una etiqueta de script
y toda esta complejidad esencialmente hace la siguiente
y ellos no utilizan ningún JQuery porque no quieren
a asumir cualquier otra dependencias,
déjame pasar esta sobre un poco.
Así, cuenta que están función anónima aquí,
más sobre esto en un momento,
luego utilizan document.createElement,
que están creando un elemento de DOM, esto es como malloc por así decirlo
donde la etiqueta es de tipo guión, está a continuación, especificando
que el atributo async de esa etiqueta que está pasando
para ser verdad, entonces seguir adelante y averiguar cuál es la URL
de Facebook JavaScript debe ser
y esto es sólo la manera de lujo
de verificación deberán sea ​​HGP o HDPS.
Y, por último, se observe lo que hace Facebook,
consiguen el nodo DOM que tiene un ID de raíz Facebook
que es lo que dijeron usted ponga en la página
y luego se anexan al niño por lo que el efecto de todo esto es
al tipo de inyectar dinámicamente una nueva etiqueta de script en su página
como hijo de la DIV que usted insertado allí para que el resto
de la página se carga felizmente
y entonces este código en realidad que se carga de forma asíncrona.
Así, esencialmente después de la hecho y yo diferí mención
de la función anónima,
¿Qué es esto cobarde sintaxis refiriéndose a aquí
cuando tenga no sólo la función abrir paren, paren cerca
y luego entre llaves, por qué los paren abiertas aquí
y luego el cierre abierto, cerca Paren ahí, lo que hay que hacer?
>> [Inaudible] definiendo y luego la ejecución de?
>> Exactamente, es la definición de un función que sea anónima,
sino que se limita la definición de una función,
por supuesto, no se ejecuta una función hasta que se llame
por su nombre, pero por supuesto esto es una función anónima
por lo que no se puede llamar por su nombre, pero se puede
en JavaScript ejecutar una función anónima sólo
encapsulando todo el asunto entre paréntesis como lo hemos hecho
con este Paren y este Paren aquí y luego una fijación
al final de la función paren paren abrir, cerrar,
si usted no desea pasar ningún argumento.
Pero esto parece un poco estúpido,
como por qué este adicional complejidad sintáctica
que la mayoría de la gente no parecen reconocer, ¿cuál es el valor
de envolver los tres líneas de código
en una función anónima de esta manera.
Sí.
>> Para evitar sobrescribir un valioso en la [inaudible].
>> Exactamente, para evitar sobrescribir una variable
en la página existente, ¿no?
Facebook es un tanto presuntuosamente decidido,
que van a utilizar el variable de E, es muy probable
que usted o cualquier persona que utilice el Facebook como el botón
o cualquier otro plug sociales
en cuenta una variable en algún lugar llamado E. Así,
encapsulando todas de su código dentro
de esta función en el anonimato, que esencialmente tienen su propio ámbito
que no se arriesga clobbering las variables existentes.
Por lo tanto, esto también es en realidad un paradigma muy común,
especialmente cuando se escribe un código de la biblioteca
o cuando usted mismo no lo hace quieren el desorden de su espacio de nombres
con otras variables que quiere que el valor de vivir
y mueren una vez que salga ese bloque de código,
esta es una buena técnica en JavaScript.
Está bien.
Así, luego de vuelta a este ejemplo aquí, todo lo que hemos hecho en el final
con este ejemplo es simplemente limpiado el código.
Por lo tanto, todavía tiene en su conjunto montón de interruptores, un manojo entero
de las condiciones aquí, pero notar un poco de sintaxis,
este tiene acceso al nodo DOM con el registro único de identificación,
los medios espaciales parecen ahora para un descendiente de ese nodo,
encontrarlo si es de tipo de entrada y luego incluso
si usted no ha visto este antes, usted puede ser que sepa
que esto sólo significa encontrar con la etiqueta de entrada,
los elementos de entrada que tiene un atributo de nombre con un valor
de correo electrónico y, a continuación, dejar que me agito mi mano en algún
del resto no es todo lo que estimulante
pero en realidad sólo la sintaxis de jQuery para las mismas operaciones.
Está bien.
Pero lo que no es tan importante aquí es la materia lado del navegador
sino más bien el hecho de que tenían formas más limpias y menos contaminantes
realmente de hacer que el trabajo de código.
Está bien.
¿Alguna pregunta?
[Inaudible Observación]
Aceptar. Ahora la parte divertida.
Así, Node.js ¿Por qué?
A quién le importa?
¿Qué sabes de él hoy?
Node.js, ¿por qué?
Henry [ortografía supone].
[Inaudible Observación]
Restablecimiento de la batería?
Lo que - esto es un perfecta suspensión del acantilado
para la segunda mitad de hoy.
¿Por qué no vamos y tomamos un descanso de 5 minutos aquí,
hay una media de caramelo máquina allí si lo haría
como un caramelo sin poniendo un cuarto pulg