jQuery Introduccin

jQuery es un marco que est construido en la cima de JavaScript no es un lenguaje en s mismo

. Es posible escribir jQuery sin apenas conocimientos de JavaScript , pero no es algo que yo
recomendara . Si usted quiere ser capaz de escribir con confianza jQuery plug- ins para su sitio,
o alterar los plug- ins que otros han escrito , es necesario estar familiarizado con el lenguaje Java
bsico. Es por eso que estoy empezando con JavaScript que usted necesita saber. Este captulo
cubre :
t en una pgina web




Si est familiarizado con el lenguaje Java , es posible que se siente como saltarse este captulo.
Eso est bien , pero por favor considere desnate primero para asegurarse de que usted se sienta
cmodo con todo cubierto. Resista la tentacin de saltar a la jQuery partes - , porque usted
tendr que luchar con l. Confa en m, en un par de veces en captulos, todo esto va a parecer
vale la pena. Muchos desarrolladores que he ayudado en lnea han zambullido en jQuery con
impaciencia antes de quedar atrapado debido a la falta de comprensin de la lengua jQuery se
construye. Cuando usted est escribiendo jQuery, ests escribiendo JavaScript , pero utilizando
la librera jQuery . No puedo enfatizar lo importante que es que te asegures de los contenidos
cubiertos en este captulo es el contenido que usted se sienta cmodo antes de continuar. Le
sugiero que pruebe el cdigo a medida que avanza . No te engaes pensando que lo entiendes
porque usted lo ha ledo ; no hay sustituto para escribir el cdigo manualmente .
Para ejecutar el cdigo , te recomiendo JS Console ( www.jsconsole.com ), una herramienta de
Remy de Sharp que le permite ejecutar JavaScript y ver los resultados . Puede introducir el
cdigo en la barra superior y pulse Enter para ver los resultados. Esto es realmente til para las
lneas cortas de cdigo. La Figura 1-1 muestra un ejemplo de JS Console.
Figura 1-1. Ejecutar el cdigo de alerta ( " Jack ") y se observan los resultados JS Console
Para grandes piezas de cdigo, lo mejor es crear una pgina index.html e incluya su archivo
JavaScript en ese pas. Voy a explicar cmo hacerlo en la siguiente seccin de este captulo. A lo
largo de este captulo , voy a menudo utilizar la funcin de alerta de demostrar el valor de una
determinada variable. Esta es utilizada exclusivamente para la demostracin de conceptos . En
la vida real , cuando tengo que comprobar la variable , no lo utilizo siempre alertas utilizo consola
JavaScript de un navegador. La razn para el uso de alertas de ejemplos bsicos es que es mucho
ms fcil empezar a utilizar. No hay necesidad de cargar las herramientas de desarrollo , que
tienen tiempo para acostumbrarse. Una vez que avance en un cdigo ms complejo, podr pasar
tiempo explorando las herramientas de desarrollo. Al final de este captulo , te voy a mostrar
exactamente cmo hago eso, antes de pasar a jQuery. Uso de JavaScript en una pgina Web
Cuando usted tiene una pgina web bsica y desea aadir un poco de JavaScript para funcionar
, usted tiene dos opciones. En primer lugar, usted puede aadir su cdigo en lnea, dentro de
una etiqueta script , as:
Con formato: Justificado
<script type="text/javascript"> / / escribir cdigo aqu < / script >
O bien, puede crear un JavaScript externo archivo con la extensin de archivo js y luego cargarla
en , de nuevo a travs de la etiqueta de script . :
<script type="text/javascript" src="path/to/your/file.js"> < / script >
Tenga en cuenta que usted tiene que cerrar la etiqueta script. A pesar de que no hay nada entre
ella, no es una etiqueta de cierre automtico . Dentro de su archivo JS, usted es libre de escribir
JavaScript .
Dentro de un archivo HTML normal, normalmente hay dos lugares que la gente usa para cargar
sus archivos externos JS . La primera es en la cabeza, y el segundo es justo antes del cierre < /
body>. En el pasado , los guiones siempre se cargan en el elemento de cabeza, pero con
velocidades de rendimiento y carga de la pgina ms importante que nunca , a menudo se
recomienda colocar las secuencias de comandos en la parte inferior de la pgina. Este es un
enfoque que lado con , tambin.
El navegador muestra la pgina de arriba a abajo , y cuando se trata a travs de las secuencias
de comandos , se detiene haciendo que la pgina se cargue en sus JS . Por lo tanto , la pgina se
carga ms lenta (o, ms importante an , se siente de esa manera para el usuario) , ya la
prestacin est bloqueado por su carga de archivos JavaScript . Por lo tanto , poner los scripts
justo antes del cierre < / body> significa que cuando llegue el momento de cargar las secuencias
de comandos , el resto de la pgina se ha cargado.
Antes de pasar a mirar el lenguaje mismo, hay una cosa ms que me gustara sealar . Si est
utilizando el nuevo doctype HTML5 ( <! DOCTYPE html> ) en vez de uno de sus predecesores
ms de largo aliento , que en realidad no necesita definir el atributo de tipo en sus etiquetas de
script . Simplemente,
Messenger src="path/to/your/file.js"> < / script >
es suficiente. Esto no causa problemas en los navegadores ms viejos - tampoco lo hace el
HTML5 doctype - y recomiendo encarecidamente usarlo. Convenciones de sintaxis
La sintaxis de JavaScript es bastante bsico y claro, pero hay ciertas sutilezas que descubrir en
el camino. A menudo hay ms de una manera de hacer las cosas , pero la comunidad tiene ciertas
convenciones que se han pegado en el tiempo. Una convencin que quiero mencionar de
inmediato es el punto y coma . A menudo, en JavaScript , la adicin de un punto y coma al final
de una lnea es opcional, y podr ver tutoriales que no lo hacen . Sin embargo , la convencin es
usar siempre un punto y coma al final de una lnea , y eso es lo que voy a estar siguiendo aqu .
Obviamente, hay ciertas circunstancias en las que no se puede utilizar uno, y usted ver esos,
pero en cualquier situacin en la que un punto y coma es opcional , voy a usar uno . Te
recomiendo que hagas , tambin.
Otra consideracin a hacer es para el espacio en blanco . Es insignificante en JavaScript , por lo
que puede cdigo de diseo a su gusto en cuanto a espacio en blanco. Cada vez que usted est
dentro de un conjunto de llaves , debe sangra en un tabulador , pero aparte de eso , usted se
encontrar la adaptacin de su propio estndar .
Comentarios
Antes de continuar , en este momento vale la pena hablar de los comentarios . JavaScript nos
permite insertar comentarios. Este es el contenido que se pasa por alto y no se trata como
cdigo, de modo que usted puede poner lo que quieras en ellos. Es til para documentar el
cdigo. Hay dos sintaxis para comentarios - uno para una sola lnea de comentario y uno para
un comentario de varias lneas :
/ / esto es una sola lnea de comentario , que se denota por dos barras inclinadas
/ * Esto es un comentario de varias lneas , se inici con una barra y un asterisco y termin con
un asterisco y una barra * /
selos cuando te gusta para recordar acerca de un trozo de cdigo y lo que hace , o para
proporcionar referencias para el futuro . Despus de no trabajar en cdigo para un largo perodo
de tiempo, los comentarios realmente puede ayudarle a recordar por qu escribi lo que
escribi . Variables
A menudo, cuando la codificacin , queremos guardar el estado de algo. Tal vez queremos
recordar que el color actual de nuestro fondo es de color rojo , o el clculo que acabamos de
realizar totalizaron 33 JavaScript , como la mayora de las lenguas , tiene variables. :
un lugar para almacenar informacin. Para crear uno, usted simplemente declarar con la palabra
clave var , el nombre , y luego la ponemos a igualar a algo . Tambin puede declarar una variable
sin establecer explcitamente su valor. Si usted hace esto , la variable se establece en undefined
, un valor especial en JavaScript que simplemente significa que esta variable no se ha ajustado a
cualquier cosa.
var twoPlusThree = 5 ; twoplustwo var = 2 + 2 ; var notYetDefined ;
Aqu me declar tres variables. El primero , twoPlusThree , se establece en el valor 5 . El segundo
, twoplustwo , se establece para que sea el resultado de 2 2 . Aqu conocers a uno de los muchos
operadores de JavaScript, + . Estos operadores realizan operaciones en valores. La mayora de
ellos son obvios . Junto con + (suma ) , no hay - (resta ), / ( divisin ) , * ( multiplicacin) , y
muchos ms. Conocers a ms a lo largo del libro, as que no te preocupes demasiado por ellos
ahora. La tercera variable , notYetDefined , no tiene un valor y se establece en undefined , ya he
declarado una variable ( es decir, he creado una nueva variable) , pero no fij un valor.
Las variables pueden contener letras , dgitos y guiones bajos. No pueden empezar por un
nmero . As que el nombre 0abc variable no es vlido , mientras que ABC0 es . Por lo general ,
la mayora de los desarrolladores no usan dgitos en los nombres de variables , y, o bien se
adhieren a camelCase o la notacin de subrayado.
Nota: Tenga en cuenta que mi convencin de nombres para las variables. Estoy usando lo que
se conoce como camelCase . La primera palabra en el nombre de la variable debe comenzar con
una letra minscula , pero luego cada dos palabras en el nombre debe comenzar con una letra
mayscula. Voy a usar esto a lo largo del libro. Hay otras convenciones de nombres populares ,
sobre todo the_underscore_method . Esto mantiene todas las palabras en minsculas y los
separa con guiones bajos. Esto es ms popular en otros idiomas. La mayora de la comunidad
utiliza JavaScript camelCase .
Por supuesto , una vez que se establece una variable en un valor , esto no significa que usted no
puede cambiar el valor. Todas las variables pueden tener sus valores modificados. Est hecho
de manera muy similar a la forma en que declara una variable , con la nica diferencia de la
palabra clave var falta al principio. Eso slo se necesita cuando se declara una variable.
var CostoTotal = 5 ; CostoTotal = 5 + 3 ;
Aqu se ve que he puesto totalcost a 5, y despus he actualizado de nuevo para ser 5 + 3 (que
pudiera escribir como 8 , obviamente).
Tipos
Antes de continuar, te dars cuenta de que hasta el momento me he puesto todas las variables
como nmeros no decimales . En JavaScript (y todos los lenguajes de programacin ), existe la
nocin de tipos . Hay una serie de tipos que una variable puede ser . Los ms comunes son el
tipo de nmero y el tipo de cadena . Tambin est el tipo booleano , que slo se puede
establecer en true o false. Cuando se trabaja con JavaScript , por lo general, no tendr que
preocuparse demasiado acerca de los tipos . Incluso si se declara una variable con un valor
entero ( por ejemplo , 5 ) , que luego puede ser actualizado para ser un valor de cadena , de la
siguiente manera :
var testVariable = 5 ;
testVariable = " Jack" ;
Se puede ver aqu que he cambiado el tipo de testVariable de un entero a cadena y JavaScript
no se queja en absoluto. Junto con cadenas , nmeros y booleanos , los otros dos tipos que
tienen que preocuparse por (por ahora ) son arrays y objetos. Voy a cubrir tanto con ms detalle
en breve , pero por ahora , slo s que una matriz es esencialmente una lista de valores. Estos
valores pueden ser de cualquier tipo , y no todos los valores dentro de una matriz tienen que
ser del mismo tipo . Usted puede crear una matriz enumerando los valores entre corchetes , as:
cuadrados var = [ 1 , 4 , 9 , 16 , 25 ] ; mixed var = [ 1 , "Jack" , 5 , es cierto, 6.5, " Franklin "] ;
Por ahora , eso es todo lo que necesita saber acerca de las matrices . Los cubrir con ms detalle
antes de este captulo ha terminado.
El otro tipo , objeto , se explica ms fcilmente con un ejemplo . Digamos que usted tiene el
concepto de un coche en la aplicacin. Este coche tiene un cierto nmero de ruedas y asientos
, es un determinado color , y tiene una velocidad mxima . Se podra modelar este coche con
cuatro variables independientes:
var carWheelCount = 4 ; var carColour = "rojo "; var carSeatCount = 5 ; var carMaximumSpeed
= 99 ;
Sera ms fcil si usted podra tener una sola variable -car- que contena toda esta informacin.
Esto es lo que hace un objeto. Es una manera de almacenar gran cantidad de informacin ( que
suele estar relacionada ) dentro de una variable. Si estuviera usando objetos , el cdigo anterior
para el coche podra ser algo como :
coche var = { wheelCount : 4 , color: "rojo", seatCount : 5 , carMaximumSpeed : 99 } ; La sintaxis
para crear un objeto es un poco diferente de cualquier otra cosa que hayas visto hasta ahora ,
por lo que vamos a caminar a travs de l . Se crea la variable de forma normal, pero de ah a
crear un objeto, que se coloca en las llaves . Un objeto es un conjunto de pares clave-valor ,
tambin conocidos como propiedades. Para crear estos , mediante su inclusin en el formato
clave : valor , poniendo una coma al final de todos, pero la ltima propiedad . Como espero que
usted puede ver, esta es una manera mucho ms agradable para modelar su cdigo de
programacin.
Para acceder a las propiedades dentro del objeto , tiene dos opciones :
car.wheelCount ;
coche [" wheelCount "] ;
La razn de tener dos formas de acceder a las propiedades se demuestra fcilmente . La gran
mayora de las veces, usted va a utilizar la primera versin, la notacin de puntos . La nica vez
que tendr que utilizar la segunda versin es que si usted necesita para acceder a una clave en
un objeto cuando el nombre de esa clave se almacena en una variable. Esto es ms claro para
ver en una manifestacin.
Digamos que la clave que quiero acceder , wheelCount , se almacena en una variable debido a
algo de cdigo antes de la aplicacin. Si desea obtener el valor en wheelCount , usted tiene que
utilizar la segunda notacin, de la siguiente manera :
var keyToGet = " wheelCount ";
coche [ keyToGet ] ; / / esto nos dar 4
Esta situacin no se da mucho, pero a veces es necesario usarlo. Ver ejemplos de esto mucho
ms tarde en el libro. Por ahora, vamos a seguir adelante . Funciones
Una vez que usted ha escrito un cdigo que es posible que desee utilizar de nuevo en otro lugar
, usted tiene dos opciones. Podra simplemente copiar el cdigo de nuevo cuando hay que usarla
- pero eso no es un buen enfoque. Si necesita cambiarlo, usted tendra que cambiar en dos o
ms lugares. Sera mejor crear una funcin. Esto le permite reutilizar el cdigo en varios lugares
, y si usted necesita para hacer un cambio , slo tiene que cambiar en un solo lugar . Creacin
de una funcin es muy sencillo. Usar la palabra clave function para indicar que est creando una
nueva funcin. A continuacin, lo nombra y coloca el cdigo de su funcin dentro de llaves.
funcin alertTwo () {
alert (" 2 ");
}
Toda esta funcin no es mostrar una alerta que muestra "2" en la pantalla. Tenga en cuenta que
los soportes ( o parntesis ) despus del nombre de la funcin estn vacos. Esto significa que la
funcin se ha declarado no toma ningn argumento. Usted puede declarar otra funcin que
toma un argumento y las descripciones que , como en el siguiente :
funcin alertSomething ( algo) {alert ( algo) ; } Esta funcin se pasa un argumento , que dentro
de la funcin es una variable que puede referirse como algo. Todo lo que hago es alertar al valor
de esa variable , de la siguiente manera :
alertSomething ( "Jack" );
alertSomething ( 2 ) ;
Si se va a ejecutar este cdigo en un navegador, dos cajas de alerta seran pop-up, el primero
que muestra el texto " Jack" . Una vez que ha hecho clic en el cuadro de alerta para descartarla
, otra caja que contiene el nmero " 2 " podra aparecer.
Las funciones pueden tomar mltiples argumentos , tambin, por ejemplo :
alertThings funcin ( thing1 , thing2 ) {alert ( thing1 ); alerta ( thing2 ) ; } AlertThings ( " Jack ", "
Franklin " );
Como en el ejemplo anterior, esto tambin le da dos alertas. El primero contiene "Jack" y el
segundo " Franklin" .
Algo que se hace muy a menudo en el desarrollo de jQuery es pasar de un objeto a una funcin
en lugar de mltiples variables. Llamar a una funcin y pasando varios argumentos puede
prestarse a confusin ; por ejemplo :
someFunction ( " Jack ", " Franklin" , 1, 2 , 3 , 4, "a", "x ");
As que una gran cantidad de plug- ins , algo jQuery utiliza extensivamente -pass en un objeto a
una funcin. Por ejemplo , si estoy declarando una funcin que toma de tres a cuatro o ms
argumentos , probablemente me deje la funcin de toma de un objeto, de la siguiente manera
:
funcin unaPersona ( persona) {alert ( person.firstName ); alerta ( person.lastName ) ; alerta (
person.age ) ; }
var jack = { firstName : "Jack" , lastName : " Franklin" , edad: 20 } unaPersona (jack ); Si se ejecuta
este cdigo, ver tres alertas, cada alertar a las propiedades del objeto almacenado en la
variable toma.
Este es un patrn utilizado cuando se trabaja intensamente con jQuery , as que asegrese de
que entiende lo que est pasando aqu . Para evitar la transmisin de una gran cantidad de
argumentos a una funcin que hace que sea difcil de recordar que el argumento es el que y el
orden en que van en los desarrolladores a menudo escriben sus funciones a aceptar un objeto
como el nico argumento . Esto significa que cada argumento puede ser nombrado - el orden
no es importante - y como desarrollador , es mucho ms fcil mirar el cdigo y ver lo que est
pasando .
En lugar de las funciones de presentacin y todos sus detalles ahora , voy a discutir las
caractersticas que nos encontramos con ellos. Antes de que podamos seguir adelante, sin
embargo, tengo que discutir el concepto de funciones de los valores que regresan.
Funciones Devolver valores
Las funciones se utilizan a menudo como una forma de realizacin de algn clculo , tales como
la conversin de pulgadas a centmetros . Esta es una funcin que espera pasar un valor , y para
que pueda calcular y "retroceso" de un valor. A continuacin , vamos a ver cmo se podra hacer
esto .
funcin inchesToCM (pulgadas) { centmetros de retorno * 2.54 ; } SixFeetInInches var = 72 ; var
sixFeetInCM = inchesToCM ( sixFeetInInches );
Esto deja sixFeetInCM como 182.88 , que es 72 multiplicado por 2,54 . La razn por la variable
sixFeetInCM se da ese valor se debe a que la funcin inchesToCM est regresando a sus
argumentos - pulgadas - multiplicados por 2,54 . Al devolver el argumento , la variable
sixFeetInCM se establece en lo que sea pulgadas * 2.54 le da .
Las funciones pueden devolver absolutamente ningn valor. A menudo, es posible que desee
devolver un booleano , verdadero o falso , de la siguiente manera :
funcin isItSunnyInBritain () { return false; } Var isSunny = isItSunnyInBritain ();
Esta funcin devolver falso, como debe ser. Seamos realistas , nunca es soleada en Gran
Bretaa! Devolucin de valores de funciones es algo que va a utilizar con frecuencia.
Condicionales
Algo que normalmente se desea hacer es ejecutar cdigo de forma condicional. Es decir, slo
hacer algo si algo es verdadero o falso . Por ejemplo , alerta de "nio" si la variable edad es
inferior a 12 . JavaScript tiene esta capacidad a travs de sentencias if .
var age = 10 ; if ( edad < 12 ) { alert (" Nio "); } Pero lo que si quieres hacer algo ms si la edad
es mayor de 12 aos? Junto con la sentencia if , se puede adjuntar una cosa en el extremo de
que , de la siguiente manera :
var age = 15 ; if ( edad < 12 ) { alert (" Nio "); } Else { alert (" No es un nio ");
}
Aqu has conocido a otro operador - el smbolo de menor que, < . Hay tambin su opuesto ,
mayor que , > , as como " menos de o igual a " y "mayor que o igual a , " < = y > = ,
respectivamente . Si desea comprobar varias condiciones, tambin puede utilizar ms si , de este
modo:
if ( edad < = 12 ) { alert (" Nio "); } Else {if (edad < 20 ) { alert (" Adolescente "); } else
{
alert (" adultos ");
}
}
Por supuesto , puede utilizar mltiples sentencias else if , si es necesario , pero por lo general no
necesitar ms de una o tal vez dos. Cualquier cosa que se puede evaluar como verdadera o
falsa puede ser utilizado como la condicin de una sentencia if . Una forma ms fcil de conseguir
su cabeza alrededor de esto es imaginar que pone un poco de sentencia dentro de los corchetes
, y en su mente imaginar calcular si esta afirmacin es cierta o falsa. Si usted es capaz de hacer
eso , se puede utilizar dentro de una sentencia if .
var name = " Jack" ;
var age = 20 ;
if ( edad > 18 && nombre === "Jack" ) {alert ("Hola Jack , eres mayor de 18 aos "); }
Hay dos cosas nuevas para discutir aqu . En primer lugar, que se han combinado dos
condicionales en uno con el operador "and" , && .
Esto significa que la condicin slo se evaluar como true si tanto el lado derecho de esa
condicin izquierda y se evalan como true .
En segundo lugar, acabamos de ver cmo comprobar la igualdad. En JavaScript , este es un tema
complicado . Puede usar tanto == y === para comprobar la igualdad, ambas con diferencias
sutiles pero importantes . Por ahora, confa en m cuando te digo que usa siempre . ===
Junto con && , tambin hay | |, que es el operador OR . Vamos a ver esto en accin .
var age = 19 ; var name = " bob" ; if ( edad > 18 | | Nombre === "Jack" ) {alert ( "su nombre es
Jack o usted es mayor de 18 aos ");
}
La alerta se seguir muestra aqu, a pesar de que slo uno de los enunciados condicionales es
vlido . La edad es de hecho mayor que 18 , lo que hace irrelevante que el nombre de esta
persona no es Jack , porque la o el operador devolver cierto siempre y cuando se cumpla una
de las condiciones .
Asegrese de entender la diferencia entre | | y && . El primero se evaluar como true si alguna
de las condiciones se evalan como true; mientras que && evala a verdadero si ambos las
condiciones se evalan como true .
Tambin es posible para negar los condicionales , lo que significa que pasan si ocurre lo contrario
, de la siguiente manera :
var age = 20 ;
si {alert ("Hola adultos " ) (edad < 18 !) ; }
El operador de negacin , ! , Se invierte el resultado de la condicional. En este ejemplo , la edad
< 18 es falsa, pero el ! antepuesta los reveses condicionales false a true .
En general , trato de evitar las negaciones como la anterior , la escritura como la edad > = 18 en
lugar de ! Edad < 18 porque hace que el cdigo sea ms fcil de leer. El que ms rpido puede
escanear el cdigo y determinar su funcin , mejor. Depuracin con la consola
Anteriormente , mencion brevemente la consola de desarrollo disponibles en la mayora de los
navegadores modernos. Me dijo que una vez que llegu a ejemplos ms complejos , me gustara
cambiar el uso de la alerta () para usar console.log (). Antes de que pueda hacer esto , usted
necesita tomar un vistazo a la depuracin disponibles para usted.
La mayora de los navegadores modernos en estos das la nave con una consola de JavaScript ,
que es una herramienta muy valiosa en el arsenal de los desarrolladores de JavaScript. A
continuacin se describe la forma en que podemos encontrar en la consola en todos los
navegadores modernos : IE9 +: Pulse F12 y haga clic en la ficha Consola . Google Chrome: Alt +
Cmd + J en Mac OS. Ctrl + Shift + J en Windows.
Safari: Alt + Cmd + I en Mac OS. Ctrl + Alt + I en Windows.
Firefox : Alt + Cmd + K en el mac. Ctrl + Shift + K en Windows.
Opera: Alt + Cmd + I en Mac OS. Ctrl + Shift + I en Windows.
Puedo utilizar Google Chrome como mi navegador de su eleccin , por lo que cualquier capturas
de pantalla que aparecen en este libro son de consola de Chrome , pero todos los navegadores
tienen una caracterstica muy similar establecido y ellos tienen el mismo aspecto , as que escoja
el que ms le convenga. Mira el ejemplo de la Figura 1-2.
Figura 1-2 . Despus de declarar una variable , veo su valor en la consola JS de Google Chrome
La consola es ideal para probar piezas de cdigo , pero lo que realmente brilla es para la
depuracin. En cualquier navegador que tiene una consola , se puede acceder a un objeto en la
consola de JavaScript, que contiene mtodos para dar salida a los valores de la consola. El ms
popular es console.log (),
que los datos de registro a la consola para que usted vea . De ahora en adelante en este captulo
, voy a usar este en lugar de alertar a (). Cuando se trabaja con estructuras de datos complejas ,
console.log () proporciona una forma mucho ms agradable para ver los valores de las variables
.
Para ver un ejemplo , crear el cdigo HTML siguiente nombre de archivo es algo sensato - y luego
abrirlo en un navegador con herramientas de desarrollo :
<! DOCTYPE html> html head <title> Hey < / title> <script type="text/javascript" charset="utf-
8"> console.log ( "Jack" ); < / script > < / head> <body> < / body> < / html>
Si abre la consola de desarrollador , siguiendo las instrucciones anteriores , debera ver
algo parecido a la Figura 1-3.
Figura 1-3 . La cadena " Jack" se registra en la consola
Usted puede entrar absolutamente nada a la consola y se sabr cmo tratar con l . Usted ver
esto en accin ahora que te sumerjas en las matrices. Arrays
Antes de quedarse atascado en jQuery , es importante cubrir las matrices. Una matriz es
simplemente una lista de valores, como he mencionado antes . El siguiente es un ejemplo de
una matriz:
Los compaeros de clase var = [" Jack ", " Jamie ", " rico" , "Will "] ;
Eso es casi lo mismo que he cubierto antes, por lo que ahora es el momento de profundizar .
Puede acceder a un solo elemento de una matriz mediante la adicin de un nmero entre
corchetes despus de la variable , as:
Los compaeros de clase [ 1 ] ; / / Jamie
Ntese aqu que el elemento en la posicin 1 no es " Jack" , pero " Jamie " . Esto se debe a que
las matrices son indexados - cero. Es decir, el primer elemento de una matriz es en realidad en
la posicin 0 , no la posicin 1. Esto puede tomar algn tiempo para acostumbrarse a si usted no
es un programador, pero una vez que el cuelgue de ella , se convertir en una segunda
naturaleza . As que para conseguir mi nombre de la matriz, lo que necesito hacer compaeros
de clase [ 0]. Usted puede averiguar la longitud de una matriz haciendo classMates.length , que
en este caso devuelve 4 . Como una prueba rpida , cmo cree que podra obtener en el ltimo
elemento de una matriz cuando no se conoce la longitud ?
Lo haras as:
Los compaeros de clase [ classMates.length - 1 ] ; / / "Will"
Vea si usted puede averiguar cmo funciona esto sin necesidad de leer la explicacin primera .
classMates.length da la longitud de la matriz , que es 4 . As que para obtener el ltimo elemento
de la matriz , es necesario llevar a la persona en el ltimo ndice, que es la longitud menos uno,
hasta el hecho de que el primer elemento est en posicin 0 y no la posicin 1 . Recuerde , las
matrices de JavaScript pueden contener absolutamente nada dentro de ellos, incluyendo los
objetos y tambin otras matrices. Esto es lo que podramos llamar una matriz de dos
dimensiones , una matriz en la que cada elemento es a su vez una matriz:
var twoDArray = [ [" Jack ", " Jon ", " Fred "] , [" Sue ", " brezo ", " Amy "] ] ;
Para acceder a los elementos de una matriz de matrices , utilice la notacin de corchetes , tal
como lo haca con anterioridad, para obtener el segundo elemento de la matriz compaeros de
clase : compaeros de clase [ 1 ] :
twoDArray [ 0 ] [ 0]; / / Jack
twoDArray [ 1 ] [ 0 ] ; / / Sue
twoDArray [ 1 ] [ 2 ] ; / / Amy
El primer conjunto de corchetes agarra el elemento de twoDArray , as twoDArray [ 0 ] devuelve
la matriz que contiene " Jack ", " Jon" , y " Fred" . twoDArray [ 1 ] es la matriz que contiene "Sue
", " Heather " , y " Amy" .
Esto no es algo que tendr que hacerlo a menudo , pero es digno de mostrar , ya que realmente
se asegura de que usted entiende los fundamentos de matrices.
Para agregar un elemento a una matriz, utilice el mtodo push :
classMates.push ( " Catalina ");
Tenga en cuenta que pulsar siempre aadir un elemento al final de una matriz .
Desafortunadamente, no hay tal mtodo para eliminar fcilmente los elementos en arrays.
Usted puede utilizar el operador delete , que a primera vista hace todo lo necesario:
eliminar los compaeros de clase [ 1 ]
Si bien esto parece que va a trabajar , que en realidad no lo hace. Si lleva a cabo esa orden en la
matriz inicial de " Jack ", " Jamie ", " rico" , "podr" , esto es lo que sucede:
eliminar los compaeros de clase [ 1 ] ; console.log ( compaeros de clase ); / / [ "Jack" ,
undefined , " rico" , "Will "]
Este es el aspecto crucial de la eliminacin : no elimina el elemento de la matriz. Simplemente
reemplaza el valor de ese ndice con indefinido. Por lo tanto , para realmente eliminar
completamente un elemento de una matriz , que tiene un poco ms de trabajo que hacer. Voy
a volver a esto ms adelante en el libro , cuando este problema se produce en realidad . Loops
Ahora que sabes lo bsico de la utilizacin de matrices , puedo discutir looping . Es natural que
una vez que usted tiene una lista de elementos , a menudo se quiere ir a travs de cada uno a
su vez y realizar algn clculo o funcin en ella. Hay dos bucles voy a discutir aqu , el bucle while
y el bucle for .
El bucle while es muy simple y en realidad toma la forma de algo que ya ha visto , la sentencia if
. El bucle bsica, mientras que se ve algo como esto:
while ( condicin) {/ / cdigo }
El cdigo dentro de las llaves se ejecutar continuamente mientras que la condicin se evala
como verdadera . Esto tiene una serie de casos de uso , pero con mayor frecuencia se utiliza
para iterar sobre una lista , que se realiza de este modo:
var count = 0 ; while ( cuenta < classMates.length ) {
alerta ( compaeros de clase [ cuenta]) ; cuenta + + ;
}
Si se va a ejecutar ese cdigo , se obtendra cinco alertas en " Jack ", " Jamie " , y as
sucesivamente - para cada uno de los cinco elementos de la matriz compaeros de clase (en un
ejemplo anterior, que utiliz el mtodo push para agregar quinto , " Catherine" ) . Tomando esta
lnea por lnea , as es como funciona:
En primer lugar , se establece una nueva variable de conteo es igual a 0 .
que la variable de recuento debe ser menor que

clase [ 0 ] , entonces los compaeros de clase [ 1 ] , a los compaeros de clase [ 3 ] , la ltima vez
, ejecute cuenta + + , que es un nuevo operador que no has visto. Es simplemente un atajo para
count = count + 1 , por lo que incrementa la variable de recuento en 1.
Usted se encontrar con el bucle while muy a menudo. Por supuesto, no tiene que ser utilizado
con - arrays que pueden utilizarlo sin , pero causar un bucle infinito , as que no recomendara
ejecutarlo. He aqu un ejemplo :
while ( 1 < 5 ) {alert ("hola "); }
Aqu el estado, 1 < 5 , siempre habr cierto, por lo que el cdigo dentro del bucle se ejecutar
una y otra vez . La mayora de los navegadores modernos detectarn esto y evitar que el cdigo
de estrellarse el navegador pero an as, yo no recomendara ejecutarlo.
Junto con el bucle while , tambin hay un bucle for. La sintaxis para esto es un poco diferente :
para (antes bucle; condicin; iteracin) {
/ / cdigo } Dentro de los argumentos a favor de un bucle , se definen tres cosas :
la condicin que se debe cumplir para que el cdigo dentro de las llaves puede
, el cdigo que se ejecuta al final de cada iteracin.
Esto se ilustra mejor con un ejemplo . A continuacin se mostrarn los nmeros del 0 al
9 :
for (var i = 0 ; i < 10 ; i + +) {alert ( i); }
Si quisiera recorrer mi arsenal compaeros de clase utilizando un bucle en lugar de un tiempo,
se hace de este modo:
for (var i = 0 ; i < classMates.length ; i + +) {alert ( compaeros de clase [ i]) ; }
Compare esto con el bucle while :
var count = 0 ; while ( cuenta < classMates.length ) {alert ( compaeros de clase [ cuenta]) ;
cuenta + + ; }
Las nicas diferencias son que el recuento inicial de var = 0 ; se ha movido dentro de los
parntesis de la para , y cuenta + + se mueve hasta el final de los parntesis . A menudo, los
desarrolladores podrn utilizar la cuenta como variable para recorrer algo de cdigo ; Otras
veces, usted ver que utilic , como en " iterador. " Por supuesto, se puede utilizar cualquier
nombre de variable que desee, pero los dos tienden a ser los ms populares. Usar i para la
mayor parte de este libro, pero si lo prefiere el recuento ms detallado, o algo similar , siento
libre. Con un bucle while o un bucle , puede modificar los valores de la matriz cuando se recorre
por encima de ellos , de la siguiente manera :
var i = 0 ; while ( i < classMates.length ) { compaeros [ i] = "Class Mate" + i; i + + ; }
Que actualizara su gama compaeros de clase que sea:
[ "Class Mate 0 " , "Clase del compaero 1 " , "Clase 2 del compaero " , "Clase mate 3 "]
Antes de este captulo termina , hay una cosa ms sobre un bucle for que usted necesita saber.
Cuando se trabaja con un objeto , puede utilizar la combinacin de un bucle con el operador in
para recorrer las propiedades :
Los compaeros de clase var = {" Jamie ": 20 , "Will ": 21 , " rico" : 22 , "Jack" : 23 }
for ( compaero de clase en compaeros de clase ) { console.log ( Classmate + "es" + compaeros
[ Classmate ] + " aos "); }
Esto le dar la siguiente salida:
Jamie tiene 20 aos
Will tiene 21 aos
Rico tiene 22 aos
Jack tiene 23 aos
La clave aqu es la primera lnea , para ( compaero de clase en compaeros de clase ) { } . Este
bucle sobre los compaeros de clase de objeto y un bucle sobre cada propiedad del objeto . A
continuacin, puede obtener el valor de la propiedad a travs compaeros [ Classmate ] . Ms
console.log ()
Solas console.log () cuando se mira en las matrices , pero usted ha hasta ahora slo se utiliza en
la forma ms bsica pasndolo a un argumento que usted espera que ingrese a la consola. No
he mencionado que es mucho ms poderoso que eso. Usted puede pasar mltiples argumentos
y ser a todos ellos - en la misma lnea de registro. Por ejemplo :
Los compaeros de clase var = [" Jack ", " Jamie ", " rico" , "Will "] ; var twoplustwo = 4 ;
console.log ( compaeros de clase ); console.log ( " twoplustwo " , twoplustwo );
Ver el resultado que se muestra en la Figura 1-4 .
Figura 1-4 . La consola de la tala nuestra matriz y variables
Se puede ver que cerrar la sesin de la matriz compaeros hace que sea completamente claro
lo que contiene, y esto es exactamente lo console.log () hay para . Si usted desea enviar ms de
una cosa en una sola lnea , usted puede hacer fcilmente que al aprobar en varios argumentos
para la funcin. En el segundo ejemplo , me desconecto el " twoplustwo " cadena y luego la
twoplustwo variable. Muchas veces me voy a hacer esto al registrar una gran cantidad de valores
, por lo que es ms claro en la consola de la lnea que est registrando qu. Me va a utilizar
console.log () en gran medida a lo largo de este libro.