JavaScript objetos

AnteriorSiguiente

En JavaScript, los objetos son rey. Si usted entiende los objetos, que
entiende JavaScript.

En JavaScript, casi "todo" es un objeto.

Los booleanos pueden ser objetos (si est definida con

la nueva palabra clave)
Los nmeros pueden ser objetos (si est definida con
la nueva palabra clave)
Las cadenas pueden ser objetos (si est definida con
la nueva palabra clave)
Las fechas son siempre objetos
Matemticas son siempre objetos
Las expresiones regulares son siempre objetos
Las matrices son siempre objetos
Las funciones son siempre objetos
Los objetos son siempre objetos

Todos los valores de JavaScript, excepto primitivas, son objetos.

Las primitivas de JavaScript

Un valor primitivo es un valor que no tiene propiedades o mtodos.

Un tipo de datos primitivo es de datos que tiene un valor primitivo.

JavaScript define 5 tipos de tipos de datos primitivos:

cuerda
nmero
booleano
nulo
indefinido

Los valores primitivos son inmutables (que estn codificados y por lo

tanto no se pueden cambiar).
si x = 3.14, puede cambiar el valor de x. Pero no se puede cambiar el
valor de 3,14.

Valor Tipo Comentario

"Hola" cuerda "Hola" es siempre "Hola"

3.14 nmero 3.14 3.14 es siempre

cierto booleano verdad siempre es cierto

falso booleano falsa siempre es falso

nulo null (objeto) nula es siempre nula

indefinido indefinido indefinido siempre es indefinido

Los objetos son variables que contiene

variables
las variables de JavaScript pueden contener valores individuales:

Ejemplo
var person = "John Doe";
Intntalo t mismo "

Los objetos son variables tambin. Sin embargo, los objetos pueden
contener muchos valores.

Los valores se escriben como nombre: valor pares (nombre y valor

separados por dos puntos).
Ejemplo
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
Intntalo t mismo "

Un objeto de JavaScript es un conjunto de valores con nombre

Propiedades del objeto

Los valores mencionados, en los objetos de JavaScript, se
denominan propiedades .

Propiedad Valor

nombre de pila John

apellido Gama

aos 50

color de los ojos azul

Objetos escritos en forma de pares de nombre y valor son similares a:

arrays asociativos en PHP

Diccionarios en Python
Las tablas hash en C
Los mapas de hash en Java
Hashes en Ruby y Perl

Mtodos de objetos
Los mtodos son acciones que se pueden realizar sobre los objetos.
Las propiedades de objeto pueden ser tanto valores primitivos, otros
objetos, y funciones.

Un mtodo de objeto es una propiedad de objeto que contiene

una definicin de funcin .

Propiedad Valor

nombre de pila John

apellido Gama

aos 50

color de los ojos azul

nombre completo la funcin () {return this.firstName + "" +

this.lastName;}

objetos JavaScript son contenedores de valores con nombre, llamadas

propiedades y mtodos.

Usted aprender ms sobre los mtodos en los prximos captulos.

Creacin de un objeto JavaScript

Con JavaScript, puede definir y crear sus propios objetos.

Hay diferentes maneras de crear nuevos objetos:

Definir y crear un nico objeto, utilizando un objeto literal.

Definir y crear un nico objeto, con la palabra clave nueva.
Definir un constructor de objetos, y luego crear objetos del tipo
construido.

En ECMAScript 5, un objeto tambin se puede crear con la funcin

Object.create ().
El uso de un objeto literal
Esta es la forma ms fcil de crear un objeto de JavaScript.

El uso de un objeto literal, tanto definir y crear un objeto en un

comunicado.

Un literal objeto es una lista del nombre: pares de valores (como edad:
50) dentro de llaves {}.

El siguiente ejemplo crea un nuevo objeto JavaScript con cuatro

propiedades:

Ejemplo
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
Intntalo t mismo "

Los espacios y saltos de lnea no son importantes. Una definicin de

objeto puede abarcar varias lneas:

Ejemplo
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
Intntalo t mismo "

Usando el nuevo JavaScript Palabra clave

El siguiente ejemplo tambin crea un nuevo objeto JavaScript con cuatro
propiedades:

Ejemplo
var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Intntalo t mismo "

Los dos ejemplos anteriores hacen exactamente lo mismo. No hay

necesidad de usar new Object ().
Por simplicidad, la legibilidad y la velocidad de ejecucin, utilice el
primero (el mtodo literal objeto).

El uso de un constructor de objetos

Los ejemplos anteriores son limitados en muchas situaciones. Ellos slo
crean un nico objeto.

A veces nos gustara tener un "tipo de objeto" que se puede utilizar para
crear muchos objetos de un tipo.

La forma habitual de crear un "tipo de objeto" es utilizar una funcin de

constructor de objeto:

Ejemplo
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");
Intntalo t mismo "

La funcin anterior (persona) es un constructor de objetos.

Una vez que tenga un constructor de objetos, puede crear nuevos

objetos del mismo tipo:

var myFather = new person("John", "Doe", 50, "blue");

var myMother = new person("Sally", "Rally", 48, "green");

La presente palabra clave

En JavaScript, lo que llamamos esto , es el objeto que "posee" el cdigo
JavaScript.

El valor de este , cuando se utiliza en una funcin, es el objeto que

"posee" la funcin.

El valor de este , cuando se utiliza en un objeto, es el objeto mismo.

La presente palabra clave en un constructor de objetos no tiene un

valor. Slo es un sustituto para el nuevo objeto.

El valor de este se convertir en el nuevo objeto cuando se utiliza el

constructor para crear un objeto.

Tenga en cuenta que esta no es una variable. Es una palabra clave. No

se puede cambiar el valor de esta .

Una funcin de JavaScript Constructores

JavaScript tiene constructores incorporadas para objetos nativos:

Ejemplo
var x1 = new Object(); // A new Object object
var x2 = new String(); // A new String object
var x3 = new Number(); // A new Number object
var x4 = new Boolean(); // A new Boolean object
var x5 = new Array(); // A new Array object
var x6 = new RegExp(); // A new RegExp object
var x7 = new Function(); // A new Function object
var x8 = new Date(); // A new Date object
Intntalo t mismo "

El objeto Math () no est en la lista. La matemtica es un objeto

global. La nueva palabra clave no se puede utilizar en matemticas.

Sabas?
Como se puede ver, JavaScript tiene versiones de los tipos de datos
primitivos de cuerda, el nmero y objeto de Boole.

No hay ninguna razn para crear objetos complejos. Los valores

primitivos ejecutan mucho ms rpido.
Y no hay ninguna razn para utilizar new Array (). Utilice literales de
matriz en su lugar: []

Y no hay ninguna razn para utilizar new RegExp (). Utilice literales
patrn en su lugar: / () /

Y no hay razn para usar la nueva funcin (). Utilizar las expresiones de
funcin en su lugar: function () {}.

Y no hay ninguna razn para utilizar new Object (). Utilizar literales en
su lugar: {}

Ejemplo
var x1 = {}; // new object
var x2 = ""; // new primitive string
var x3 = 0; // new primitive number
var x4 = false; // new primitive boolean
var x5 = []; // new array object
var x6 = /()/ // new regexp object
var x7 = function(){}; // new function object
Intntalo t mismo "

Objetos de cuerda
Normalmente, las cadenas se crean como primitivas: primerNombre
var = "John"

Sin embargo, las cadenas tambin se pueden crear como objetos

utilizando la nueva palabra clave: primerNombre var = new String (
"Juan")

Sepa por qu las cadenas no deben crearse como objeto en el

captulo JS Cuerdas .

nmero objetos
Normalmente, los nmeros se crean como primitivas: var x = 123

Pero los nmeros tambin se pueden crear como objetos utilizando

la nueva palabra clave: var x = nuevo nmero (123)
Sepa por qu los nmeros no se deben crear como objeto en los
captulos nmeros JS .

Objetos de Boole
Normalmente, booleanos se crean como primitivas: var x = false

Pero booleanos tambin se pueden crear como objetos utilizando

la nueva palabra clave: var x = new Boolean (false)

Sepa por qu booleanos no se deben crear como objeto en los

captulos JS booleanos .

Objetos de JavaScript son mutables

Los objetos son mutables: Estn dirigidas por referencia, no por valor.

Si la persona es un objeto, la siguiente declaracin no crear una copia

de la persona:

var x = person; // This will not create a copy of person.

El objeto x es no una copia de la persona. Que es persona. Tanto x

persona y son el mismo objeto.

Cualquier cambio en x tambin cambiar persona, porque xy persona

son el mismo objeto.

Ejemplo
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"}

var x = person;
x.age = 10; // This will change both x.age and
person.age
Intntalo t mismo "

Nota: Las variables JavaScript no son mutables. Slo los objetos de

JavaScript.
JavaScript propiedades de los
objetos
AnteriorSiguiente

Las propiedades son la parte ms importante de cualquier objeto de

JavaScript.

Propiedades de JavaScript
Las propiedades son los valores asociados a un objeto JavaScript.

Un objeto JavaScript es una coleccin de propiedades no ordenadas.

Propiedades por lo general se pueden cambiar, aadir y borrar, pero

algunos son de slo lectura.

Acceso a las propiedades de JavaScript

La sintaxis para acceder a la propiedad de un objeto es:

objectName.property // person.age

objectName["property"] // person["age"]

objectName[expression] // x = "age"; person[x]

La expresin debe evaluar a un nombre de propiedad.

Ejemplo 1
person.firstname + " is " + person.age + " years old.";
Intntalo t mismo "
Ejemplo 2
person["firstname"] + " is " + person["age"] + " years old.";
Intntalo t mismo "

JavaScript para ... en bucle

La JavaScript para ... en la declaracin de bucle a travs de las
propiedades de un objeto.

Sintaxis
for (variable in object) {
code to be executed
}

El bloque de cdigo dentro del bucle for ... in ser ejecutada una vez
para cada propiedad.

Bucle a travs de las propiedades de un objeto:

Ejemplo
var person = {fname:"John", lname:"Doe", age:25};

for (x in person) {
txt += person[x];
}
Intntalo t mismo "

Aadir nuevas propiedades

Puede aadir nuevas propiedades a un objeto existente simplemente
dando un valor.

Supongamos que la persona objeto ya existe - a continuacin, puede

darle nuevas propiedades:

Ejemplo
person.nationality = "English";
Intntalo t mismo "

No se puede utilizar palabras reservadas para la propiedad (o mtodo)

nombres. Se aplican las reglas de nomenclatura de JavaScript.

Supresin de propiedades
El borrado palabra clave se elimina una propiedad de un objeto:

Ejemplo
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
delete person.age; // or delete person["age"];

Intntalo t mismo "

La palabra clave de borrado elimina tanto el valor de la propiedad y la

propiedad en s.

Tras la eliminacin, la propiedad no puede ser utilizado antes de que se

vuelve a aadir de nuevo.

El operador de eliminacin est diseado para ser utilizado en las

propiedades del objeto. No tiene ningn efecto sobre las variables o
funciones.

El operador de eliminacin no debe utilizarse en predefinidas las

propiedades del objeto de JavaScript. Se puede bloquear su aplicacin.

Atributos de propiedad
Todas las propiedades tienen un nombre. Adems tambin tienen un
valor.

El valor es uno de los atributos de la propiedad.

Otros atributos son: enumerables, configurable y modificable.

Estos atributos definen cmo se puede acceder a la propiedad (es legible

?, es modificable?)
En JavaScript, todos los atributos se pueden leer, pero slo el atributo
de valor se pueden cambiar (y slo si la propiedad se puede escribir).

(ECMAScript 5 tiene mtodos tanto para obtener y establecer todos los

atributos de propiedad)

Propiedades del prototipo

objetos JavaScript heredan las propiedades de su prototipo.

La palabra clave de eliminacin no elimina las propiedades heredadas,

pero si elimina una propiedad prototipo, que afectar a todos los objetos
heredados del prototipo.

JavaScript mtodos del objeto

AnteriorSiguiente

Mtodos de JavaScript
mtodos de JavaScript son las acciones que se pueden realizar sobre los
objetos.

Un JavaScript mtodo es una propiedad que contiene una definicin

de funcin .

Propiedad Valor

nombre de pila John

apellido Gama
aos 50

color de los ojos azul

nombre completo la funcin () {return this.firstName + "" + this.lastName;}

Los mtodos son funciones almacenadas como propiedades del objeto.

El acceso a mtodos de objeto

Se crea un mtodo de objeto con la siguiente sintaxis:

methodName : function() { code lines }

Se accede a un mtodo de objeto con la siguiente sintaxis:

objectName.methodName()

Por lo general, va a describir fullName () como un mtodo del objeto

persona y fullName como una propiedad.

La propiedad fullName ejecutar (en funcin) cuando se invoca con ().

En este ejemplo se accede a la fullName () mtodo de un objeto de la

persona:

Ejemplo
name = person.fullName();
Intntalo t mismo "

Si accede a la fullName propiedad , sin (), devolver la definicin de

la funcin :

Ejemplo
name = person.fullName;
Intntalo t mismo "
Usando mtodos incorporados
Este ejemplo utiliza el mtodo toUpperCase () del objeto String, para
convertir un texto en maysculas:

var message = "Hello world!";

var x = message.toUpperCase();

El valor de x, despus de la ejecucin del cdigo anterior ser:

HELLO WORLD!

La adicin de nuevos mtodos

mtodos Agregando un objeto se realiza dentro de la funcin
constructor:

Ejemplo
function person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
};
}

La funcin changename () asigna el valor del nombre de la propiedad

lastName de la persona.

Ahora puede probar:

myMother.changeName("Doe");
Intntalo t mismo "

JavaScript sabe que la persona que est hablando por "sustitucin" de

este con myMother .
JavaScript prototipos de objetos
AnteriorSiguiente

Cada objeto tiene un prototipo de JavaScript. El prototipo es tambin

un objeto.

Todos los objetos JavaScript heredan sus propiedades y mtodos de

su prototipo.

Los prototipos de JavaScript

Todos los objetos JavaScript heredan las propiedades y mtodos de su
prototipo.

Los objetos creados utilizando un objeto literal o con new Object (),
heredan de un prototipo llamado Object.prototype.

Los objetos creados con new Date () heredan el Date.prototype.

El Object.prototype est en la parte superior de la cadena de prototipo.

Todos los objetos JavaScript (Fecha, Array, RegExp, funcin, ....)

heredan de la Object.prototype.

La creacin de un prototipo
La forma estndar para crear un prototipo objeto es utilizar una funcin
de constructor de objeto:

Ejemplo
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Con una funcin constructora, puede utilizar la nueva palabra clave para
crear nuevos objetos del mismo prototipo:

Ejemplo
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");
Intntalo t mismo "

La funcin del constructor es el prototipo de objetos Persona.

Se considera una buena prctica funcin de nombre de constructor con
una primera letra mayscula.

Adicin de propiedades y mtodos de los

objetos
A veces desea agregar nuevas propiedades (o mtodos) a un objeto
existente.

A veces desea agregar nuevas propiedades (o mtodos) a todos los

objetos existentes de un tipo dado.

A veces desea agregar nuevas propiedades (o mtodos) para un

prototipo de objeto.

Adicin de una propiedad de un objeto

Adicin de una nueva propiedad a un objeto existente es fcil:

Ejemplo
myFather.nationality = "English";
Intntalo t mismo "

La propiedad se aadir a myFather. No myMother. No a cualquier otro

objeto persona.
Adicin de un mtodo a un Objeto
Adicin de un nuevo mtodo para un objeto existente tambin es fcil:

Ejemplo
myFather.name = function () {
return this.firstName + " " + this.lastName;
};
Intntalo t mismo "

El mtodo se aadir a myFather. No myMother.

Adicin de propiedades a un prototipo

No se puede agregar una nueva propiedad a un prototipo de la misma
forma que se agrega una nueva propiedad a un objeto existente, debido
a que el prototipo no es un objeto existente.

Ejemplo
Person.nationality = "English";
Intntalo t mismo "

Para aadir una nueva propiedad a un prototipo, debe agregarlo a la

funcin constructora:

Ejemplo
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
Intntalo t mismo "

propiedades prototipo puede tener valores de prototipo (valores por

defecto).
Adicin de Mtodos a un prototipo
Su funcin constructora tambin puede definir mtodos:

Ejemplo
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.name = function() {return this.firstName + "
" + this.lastName;};
}
Intntalo t mismo "

Utilizando el prototipo de la propiedad

La propiedad prototipo de JavaScript permite aadir nuevas propiedades
a un prototipo existente:

Ejemplo
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";
Intntalo t mismo "

La propiedad prototipo de JavaScript tambin permite aadir nuevos

mtodos a un prototipo existente:

Ejemplo
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
 return this.firstName + " " + this.lastName;
};
Intntalo t mismo "

Slo modificar sus propios prototipos. Nunca modifique los prototipos

de objetos JavaScript estndar.

JavaScript definiciones de
funciones
AnteriorSiguiente

Funciones de JavaScript se definen con la funcin de la palabra

clave.

Se puede utilizar una funcin de declaracin o una funcin

de expresin .

Las declaraciones de funciones

Al principio de este tutorial, aprendi que las funciones se declaran con
la siguiente sintaxis:

function functionName(parameters) {
code to be executed
}

funciones declaradas no se ejecutan inmediatamente. Ellos son

"salvados para su uso posterior", y se ejecutarn ms adelante, cuando
se invoca (llamados).

Ejemplo
function myFunction(a, b) {
return a * b;
}

Intntalo t mismo "

Los puntos y comas se utilizan para separar sentencias JavaScript
ejecutables.
Desde una funcin de declaracin no es una instruccin ejecutable,
que no es comn para terminar con un punto y coma.

Las expresiones de funcin

Una funcin JavaScript tambin puede definirse usando una expresin .

Una expresin de funcin puede ser almacenado en una variable:

Ejemplo
var x = function (a, b) {return a * b};
Intntalo t mismo "

Despus de una expresin de la funcin se ha almacenado en una

variable, la variable puede ser utilizado como una funcin:

Ejemplo
var x = function (a, b) {return a * b};
var z = x(4, 3);
Intntalo t mismo "

La funcin anterior es en realidad una funcin annima (una funcin

sin nombre).

Las funciones almacenadas en las variables no necesitan nombres de

funcin. Ellos siempre se invocan (llamada), utilizando el nombre de la
variable.

La funcin anterior termina con un punto y coma, ya que es una parte

de una instruccin ejecutable.

La funcin () Constructor
Como se ha visto en los ejemplos anteriores, las funciones de JavaScript
se definen con la funcin de la palabra clave.
Las funciones tambin se pueden definir con un sistema incorporado en
JavaScript funcin constructora llamada de funcin ().

Ejemplo
var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

Intntalo t mismo "

En realidad no tiene que utilizar el constructor funcin. El ejemplo

anterior es lo mismo que escribir:

Ejemplo
var myFunction = function (a, b) {return a * b};

var x = myFunction(4, 3);

Intntalo t mismo "

La mayor parte del tiempo, se puede evitar el uso de la nueva palabra

clave en JavaScript.

Levantamiento de la funcin
Al principio de este tutorial, aprendi acerca de "elevacin".

Izado es el comportamiento por defecto de JavaScript de

mover declaraciones a la parte superior del mbito actual.

De elevacin se aplica a las declaraciones de variables y para la

declaracin de funciones.

Debido a esto, las funciones de JavaScript puede ser llamado antes de

que se declaran:

myFunction(5);

function myFunction(y) {
return y * y;
}

Las funciones definidas utilizando una expresin no se izan.

Funciones de auto-Invocando
Las expresiones de funcin se pueden hacer "auto-invocacin".

Una expresin de auto-invocacin se invoca (iniciado) de forma

automtica, sin ser llamado.

Las expresiones de funcin se ejecutar automticamente si la expresin

es seguido por ().

No se puede auto-invocar una declaracin de la funcin.

Usted tiene que agregar parntesis alrededor de la funcin para indicar

que se trata de una expresin de funcin:

Ejemplo
(function () {
var x = "Hello!!"; // I will invoke myself
})();
Intntalo t mismo "

La funcin anterior es en realidad una funcin de auto-invocando

annima (funcin sin nombre).

Las funciones pueden usarse como valores

funciones de JavaScript se pueden utilizar como valores:

Ejemplo
function myFunction(a, b) {
return a * b;
}

var x = myFunction(4, 3);

Intntalo t mismo "

funciones de JavaScript se pueden utilizar en las expresiones:

Ejemplo
function myFunction(a, b) {
return a * b;
}

var x = myFunction(4, 3) * 2;
Intntalo t mismo "

Las funciones son objetos

El typeof operador en JavaScript devuelve "funcin" de funciones.

Sin embargo, las funciones de JavaScript se pueden describir mejor

como objetos.

Funciones de JavaScript tienen ambas propiedades y mtodos .

La propiedad arguments.length devuelve el nmero de argumentos

recibido cuando se invoca la funcin:

Ejemplo
function myFunction(a, b) {
return arguments.length;
}
Intntalo t mismo "

El mtodo toString () devuelve la funcin como una cadena:

Ejemplo
function myFunction(a, b) {
return a * b;
}

var txt = myFunction.toString();

Intntalo t mismo "

Una funcin definida como la propiedad de un objeto, se llama un

mtodo para el objeto.
Una funcin diseada para crear nuevos objetos, se llama un constructor
de objetos.
JavaScript Parmetros de funciones
AnteriorSiguiente

Una funcin JavaScript no realiza ninguna comprobacin de valores

de los parmetros (argumentos).

Los parmetros de funcin y los

argumentos
Al principio de este tutorial, aprendi que las funciones pueden
tener parmetros :

functionName(parameter1, parameter2, parameter3) {

code to be executed
}

Funcin parmetros son los nombres que figuran en la definicin de

funcin.

Funcin argumentos son los verdaderos valores pasados a (y recibidos

por) la funcin.

Reglas de parmetros
la definicin de funciones de JavaScript no especifican los tipos de datos
de parmetros.

funciones de JavaScript no llevan a cabo la comprobacin de tipos en los

argumentos pasados.

funciones de JavaScript no comprueban el nmero de argumentos

recibidos.
valores predeterminados de los
parmetros
Si una funcin es llamada con argumentos que faltan (menos
declarada), los valores que faltan se establecen en:indefinido

A veces esto es aceptable, pero a veces es mejor asignar un valor por

defecto para el parmetro:

Ejemplo
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
Intntalo t mismo "

Si una funcin es llamada con demasiados argumentos (ms que

declarada), estos argumentos se pueden alcanzar usando objeto
arguments .

El objeto arguments
funciones de JavaScript tienen incorporado un objeto llamado objeto
arguments.

El objeto argumento contiene una matriz de los argumentos utilizados

cuando la funcin se llama (invocada).

De esta manera puede utilizar simplemente una funcin de encontrar

(por ejemplo) el valor ms alto de una lista de nmeros:

Ejemplo
x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
var i;
var max = -Infinity;
for (i = 0; i < arguments.length; i++) {
 if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
Intntalo t mismo "

O crear una funcin para resumir todos los valores de entrada:

Ejemplo
x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
var i, sum = 0;
for (i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
Intntalo t mismo "

Los argumentos se pasan por valor

Los parmetros, en una llamada de funcin, son argumentos de la
funcin.

JavaScript argumentos son pasados por valor : La funcin slo llega a

conocer los valores, no los lugares del argumento.

Si una funcin cambia el valor de un argumento, no cambia el valor

original del parmetro.

Los cambios en los argumentos no son visibles (reflejado) fuera

de la funcin.

Los objetos se pasan por referencia

En JavaScript, las referencias a objetos son valores.

Debido a esto, los objetos se comportan como si se pasan

por referencia:
Si una funcin cambia una propiedad de objeto, cambia el valor original.

Cambios a objeto propiedades son visibles (reflejada) fuera de la

funcin.

JavaScript invocacin de la funcin

AnteriorSiguiente

El cdigo dentro de una funcin de JavaScript se ejecutar cuando

"algo" lo invoca.

Invocar una funcin JavaScript

El cdigo dentro de una funcin no se ejecuta cuando la funcin
est definida .

El cdigo dentro de una funcin se ejecuta cuando se la

funcin invocada .

Es comn utilizar el trmino " llamar a una funcin " en lugar de

" invocar una funcin ".

Tambin es comn decir "invocar una funcin", "iniciar una funcin", o

"ejecutar una funcin".

En este tutorial, vamos a utilizar de invocacin , porque una funcin de

JavaScript se puede invocar sin ser llamado.

La invocacin de una funcin como

funcin
Ejemplo
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // Will return 20
Intntalo t mismo "
La funcin anterior no pertenece a ningn objeto. Pero en JavaScript
siempre hay un objeto global por defecto.

En HTML el objeto global por defecto es la pgina HTML en s, por lo que

la funcin anterior "pertenece" a la pgina HTML.

En un explorador del objeto de pgina es la ventana del navegador. La

funcin anterior se convierte automticamente en funcin de ventana.

myFunction () y window.myFunction () es la misma funcin:

Ejemplo
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // Will also return 20
Intntalo t mismo "

Esta es una forma comn para invocar una funcin JavaScript, pero no
una muy buena prctica.
Las variables globales, mtodos o funciones pueden crear conflictos de
nombres y errores en el objeto global.

La presente palabra clave

En JavaScript, lo que llamamos esto , es el objeto que "posee" el cdigo
actual.

El valor de este, cuando se utiliza en una funcin, es el objeto que

"posee" la funcin.

Tenga en cuenta que esta no es una variable. Es una palabra clave. No

se puede cambiar el valor de esta .

El objeto global
Cuando una funcin se llama un objeto sin dueo, el valor de este se
convierte en el objeto global.

En un navegador web al objeto global es la ventana del navegador.

Este ejemplo devuelve el objeto de ventana como el valor de esta :

Ejemplo
function myFunction() {
return this;
}
myFunction(); // Will return the window object
Intntalo t mismo "

La invocacin de una funcin como una funcin global, hace que el valor
de este que es el objeto global.
Utilizando el objeto de la ventana como una variable puede bloquear
fcilmente su programa.

Invocar una funcin como mtodo

En JavaScript se puede definir como la funcin de los mtodos de objeto.

El ejemplo siguiente crea un objeto ( myObject ), con dos propiedades

( firstName y lastName ), y un mtodo ( fullName ):

Ejemplo
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Will return "John Doe"
Intntalo t mismo "

El fullName mtodo es una funcin. La funcin pertenece al

objeto. myObject es el propietario de la funcin.

La cosa que se llama esto , es el objeto que "posee" el cdigo

JavaScript. En este caso, el valor de este es myObject .

Prubalo! Cambiar el fullName mtodo para devolver el valor de esta :

Ejemplo
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
myObject.fullName(); // Will return [object Object]
(the owner object)
Intntalo t mismo "

La invocacin de una funcin como un mtodo de objeto, hace que el

valor de este para ser el objeto mismo.

La invocacin de una funcin con un

constructor de funciones
Si una invocacin de la funcin es precedida con la nueva palabra clave,
es una invocacin del constructor.

Parece que se crea una nueva funcin, pero ya que las funciones de
JavaScript son objetos en realidad se crea un nuevo objeto:

Ejemplo
// This is a function constructor:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}

// This creates a new object

var x = new myFunction("John", "Doe");
x.firstName; // Will return "John"
Intntalo t mismo "

Una invocacin constructor crea un nuevo objeto. El nuevo objeto

hereda las propiedades y mtodos de su constructor.

La presente palabra clave en el constructor no tiene un valor.

El valor de este ser el nuevo objeto creado cuando se invoca la
funcin.
JavaScript llamada a funcin
AnteriorSiguiente

Las funciones son mtodos de objeto

Todas las funciones de JavaScript son mtodos del objeto.

Si una funcin no es un mtodo de un objeto de JavaScript, que es una

funcin del objeto global (vase el captulo anterior).

El ejemplo siguiente crea un objeto con 3 propiedades

( firstName , lastName , fullName ).

Ejemplo
var person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
person.fullName(); // Will return "John Doe"
Intntalo t mismo "

La propiedad fullName es un mtodo . El objeto persona es

el dueo del mtodo.

La propiedad fullName es un mtodo del objeto persona .

La llamada de JavaScript () Mtodo

La llamada () mtodo es un mtodo de funcin de JavaScript
predefinida.

Se puede utilizar para invocar (llamada) de una funcin con un objeto

propietario como primer argumento (parmetro).

Con la llamada () , puede utilizar un mtodo que pertenece a otro

objeto.
En este ejemplo se llama a la funcin fullName de la persona, pero lo
est utilizando en myObject:

Ejemplo
var person = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var myObject = {
firstName:"Mary",
lastName: "Doe",
}
person.fullName.call(myObject); // Will return "Mary Doe"

Intntalo t mismo "

JavaScript Funcin Aplicar

AnteriorSiguiente

El JavaScript apply () Mtodo

El apply () mtodo es similar al mtodo call ():

Ejemplo
var person = {
firstName:"John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var myObject = {
firstName:"Mary",
lastName: "Doe",
}
person.fullName.apply(myObject); // Will return "Mary Doe"
Intntalo t mismo "

La diferencia entre la llamada () y aplicar ()

La nica diferencia es:

llamada () toma argumentos de funcin por separado.

aplicar () toma cualquier argumentos de la funcin como una matriz.

El mtodo de aplicacin () es muy til si se desea utilizar una matriz en

lugar de una lista de argumentos.

Si desea obtener el mayor nmero en una lista de nmeros que puede

utilizar el mtodo Math.max ():

Ejemplo
Math.max(1,2,3); // Will return 3

Intntalo t mismo "

Dado que las matrices de JavaScript no tienen un mtodo max (), se

puede aplicar el Math.max () en su lugar.

Ejemplo
Math.max.apply(null,[1,2,3]); // Will also return 3

Intntalo t mismo "

El valor de este
En el modo estricto JavaScript, el primer argumento se convierte en el
valor de este en la funcin invocada, incluso si el argumento no es un
objeto.

En el modo "no estricto", si el valor del primer argumento es nulo o no

definido, se reemplaza con el objeto global.
JavaScript Cierres
AnteriorSiguiente

Variables JavaScript pueden pertenecer al local, o mundial alcance.

Las variables globales se pueden hacer local (privada) con cierres .

Variables globales
Una funcin puede tener acceso a todas las variables definidas dentro
de la funcin, como este:

Ejemplo
function myFunction() {
var a = 4;
return a * a;
}
Intntalo t mismo "

Sin embargo, una funcin tambin se puede acceder a las variables

definidas fuera de la funcin, como este:

Ejemplo
var a = 4;
function myFunction() {
return a * a;
}
Intntalo t mismo "

En el ltimo ejemplo, una es un mundial variable.

En una pgina web, variables globales pertenecen al objeto de ventana.

Las variables globales se pueden usar (y cambiar) por todas las

secuencias de comandos en la pgina (y en la ventana).

En el primer ejemplo, una es un local de variable.

Una variable local slo se puede utilizar dentro de la funcin en la que se
define. Se oculta a otras funciones y otros cdigos de secuencias de
comandos.

Las variables globales y locales con el mismo nombre son variables

diferentes. La modificacin de uno, no modifica la otra.

Las variables creadas sin la palabra clave var , siempre son globales,
incluso si se crean dentro de una funcin.

variable de por vida

Las variables globales viven tanto como su aplicacin (la ventana de su /
su pgina web) vive.

Las variables locales tienen una vida corta. Se crean cuando se invoca la
funcin, y se borran cuando se termina la funcin.

Un dilema Contador
Supongamos que se desea utilizar una variable para contar algo, y desea
que este contador est disponible para todas las funciones.

Se podra utilizar una variable global, y una funcin para aumentar el

contador:

Ejemplo
var counter = 0;

function add() {
counter += 1;
}

add();
add();
add();

// the counter is now equal to 3

Intntalo t mismo "
El contador slo debe ser cambiado por la funcin add ().

El problema es, que cualquier script de la pgina se puede cambiar el

contador, sin llamar a aadir ().

Si declaro el contador dentro de la funcin, nadie ser capaz de

cambiarlo sin llamar a aadir ():

Ejemplo
function add() {
var counter = 0;
counter += 1;
}

add();
add();
add();

// the counter should now be 3, but it does not work !

Intntalo t mismo "

No funcion! Cada vez que llamo la funcin add (), el contador se pone
a 1.

Una funcin JavaScript interno puede resolver esto.

Funciones JavaScript anidadas

Todas las funciones tienen acceso al mbito global.

De hecho, en JavaScript, todas las funciones tienen acceso al mbito

"por encima" de ellos.

JavaScript soporta funciones anidadas. Funciones anidadas tienen

acceso al mbito "por encima" de ellos.

En este ejemplo, la funcin interna ms () tiene acceso a

la contador variable en la funcin madre:

Ejemplo
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
 return counter;
}
Intntalo t mismo "

Esto podra haber resuelto el dilema del contador, si pudiramos

alcanzar el signo ms () la funcin desde el exterior.

Tambin tenemos que encontrar una manera de ejecutar contador =

0 slo una vez.

Necesitamos un cierre.

Los cierres de JavaScript

Recuerde que las funciones de auto-invocar? Qu hace esta funcin?

Ejemplo
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();

add();
add();
add();

// the counter is now 3

Intntalo t mismo "

ejemplo Explicacin
La variable complemento se le asigna el valor de retorno de una
funcin de auto-invocando.

La funcin de auto-invocando slo se ejecuta una vez. Se establece el

contador a cero (0), y devuelve una expresin de funcin.

De esta manera se convierte en una funcin de complemento. La parte

"maravilloso" es que se puede acceder al contador en el mbito padre.

Esto se llama un JavaScript cierre. Esto hace que sea posible para que
una funcin tiene " privadas variables".
El contador est protegido por el alcance de la funcin annima, y slo
puede cambiarse mediante la funcin add.

El cierre es una funcin que tenga acceso al mbito primario, incluso

despus de la funcin madre ha cerrado.

JavaScript HTML DOM

AnteriorSiguiente

Con el DOM de HTML, JavaScript puede acceder y cambiar todos los

elementos de un documento HTML.

El DOM HTML (Document Object Model)

Cuando se carga una pgina web, el navegador crea
una D DOCUMENTO O bject M odelo de la pgina.

El HTML DOM modelo est construido como un rbol de objetos :

El rbol DOM de objetos HTML

Con el modelo de objetos, JavaScript recibe toda la energa que necesita

para crear HTML dinmico:
 JavaScript puede cambiar todos los elementos HTML en la pgina
JavaScript puede cambiar todos los atributos de HTML en la
pgina
JavaScript puede cambiar todos los estilos CSS en la pgina
JavaScript puede eliminar elementos y atributos HTML existente
JavaScript puede aadir nuevos elementos y atributos HTML
JavaScript puede reaccionar a todos los eventos de HTML
existentes en la pgina
JavaScript puede crear nuevos eventos en la pgina HTML

Lo que vas a aprender

En los prximos captulos de este tutorial usted aprender:

Cmo cambiar el contenido de los elementos HTML

Cmo cambiar el estilo (CSS) de los elementos HTML
Cmo reaccionar a HTML eventos DOM
Cmo aadir y eliminar elementos HTML

Qu es el DOM?
El DOM es un W3C (World Wide Web Consortium) estndar.

El DOM define un estndar para acceso a los mismos:

"El modelo de objetos de documento W3C (DOM) es una interfaz de

plataforma y lenguaje neutro que permite a los programas y scripts
acceder y actualizar el contenido, la estructura y el estilo de un
documento de forma dinmica."

El estndar W3C DOM se separa en 3 partes diferentes:

Ncleo del DOM - modelo estndar para todos los tipos de

documentos
DOM XML - modelo estndar para documentos XML
HTML DOM - modelo estndar para documentos HTML

Cul es el cdigo HTML DOM?

El DOM HTML es un estndar de objetos de modelo y
de programacin de interfaces para HTML. Se define:

Los elementos HTML como objetos

Las propiedades de todos los elementos HTML
Los mtodos para acceder a todos los elementos HTML
los eventos de todos los elementos HTML

En otras palabras: El DOM HTML es un estndar de cmo obtener,

cambiar, aadir o eliminar elementos HTML.

JavaScript - Mtodos DOM HTML

AnteriorSiguiente

Mtodos HTML DOM son las acciones que puede realizar (en
elementos HTML).

Propiedades HTML DOM son los valores (de elementos HTML) que se
puede ajustar o cambiar.

La interfaz de programacin DOM

El HTML puede acceder al DOM con JavaScript (y con otros lenguajes de
programacin).

En el DOM, todos los elementos HTML se definen como objetos .

La interfaz de programacin es las propiedades y mtodos de cada

objeto.

Una propiedad es un valor que se puede obtener o establecer (como

cambiar el contenido de un elemento HTML).

Un mtodo es una accin que puede hacer (como aadir o eliminar un

elemento HTML).
Ejemplo
El siguiente ejemplo se cambia el contenido (el innerHTML) del elemento
<p> con id = "demo":

Ejemplo
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>
Intntalo t mismo "

En el ejemplo anterior, getElementById es un mtodo , mientras que

innerHTML es una propiedad .

El Mtodo getElemenById
La forma ms comn para acceder a un elemento HTML es utilizar el id
del elemento.

En el ejemplo anterior el mtodo getElementById utilizado id = "demo"

para encontrar el elemento.

La propiedad innerHTML
La forma ms fcil de obtener el contenido de un elemento es mediante
el uso de la innerHTML propiedad.

La propiedad innerHTML es til para obtener o reemplazar el contenido

de los elementos HTML.

La propiedad innerHTML puede ser utilizado para obtener o cambiar

cualquier elemento HTML, incluyendo <html> y <body>.
JavaScript documento HTML DOM
AnteriorSiguiente

El objeto de documento HTML DOM es el dueo de todos los dems

objetos en su pgina web.

El objeto de documentos HTML DOM

El objeto de documento representa su pgina web.

Si desea acceder a cualquier elemento en una pgina HTML, que siempre

comienza con el acceso al objeto de documento.

A continuacin se presentan algunos ejemplos de cmo se puede utilizar

el objeto de documento para acceder y manipular HTML.

Elementos HTML hallazgo

Method Description

document.getElementById(id) Find an element by element id

document.getElementsByTagName(name) Find elements by tag name

document.getElementsByClassName(name) Find elements by class name

Cambio de elementos HTML

Method Description

element.innerHTML = new html content Change the inner HTML of an e

element.attribute = new value Change the attribute value of a

element.setAttribute(attribute, value) Change the attribute value of a

element.style.property = new style Change the style of an HTML e

Adicin y eliminacin de elementos

Method Description

document.createElement(element) Create an HTML element

document.removeChild(element) Remove an HTML element

document.appendChild(element) Add an HTML element

document.replaceChild(element) Replace an HTML element

document.write(text) Write into the HTML output str

Adicin de Eventos Manipuladores

Method Description

document.getElementById(id).onclick = function(){code} Adding event handler code to

Encontrar los objetos HTML

La primera HTML DOM Nivel 1 (1998), define los objetos 11 HTML,
colecciones de objetos y propiedades. Estos siguen siendo vlidos en
HTML5.

Ms tarde, en HTML DOM Nivel 3, se agregaron ms objetos, colecciones

y propiedades.

Property Description DOM

document.anchors Returns all <a> elements that have 1
a name attribute
document.applets Returns all <applet> 1
elements (Deprecated in HTML5)
document.baseURI Returns the absolute base URI of 3
the document
document.body Returns the <body> element 1
document.cookie Returns the document's cookie 1
document.doctype Returns the document's doctype 3
document.documentElement Returns the <html> element 3
document.documentMode Returns the mode used by the 3
browser
document.documentURI Returns the URI of the document 3
document.domain Returns the domain name of the 1
document server
document.domConfig Obsolete. Returns the DOM 3
configuration
document.embeds Returns all <embed> elements 3
document.forms Returns all <form> elements 1
document.head Returns the <head> element 3
document.images Returns all <img> elements 1
document.implementation Returns the DOM implementation 3
document.inputEncoding Returns the document's encoding 3
(character set)
document.lastModified Returns the date and time the 3
document was updated
document.links Returns all <area> and <a> 1
elements that have a href attribute
document.readyState Returns the (loading) status of the 3
document
document.referrer Returns the URI of the referrer (the 1
linking document)
document.scripts Returns all <script> elements 3
document.strictErrorChecking Returns if error checking is 3
enforced
document.title Returns the <title> element 1
document.URL Returns the complete URL of the 1
document

JavaScript DOM elementos HTML

AnteriorSiguiente

Esta pgina le ensea cmo encontrar y elementos de acceso HTML

en una pgina HTML.

Elementos HTML hallazgo

A menudo, con JavaScript, que desea manipular los elementos HTML.

Para ello, usted tiene que encontrar los elementos primero. Hay un par
de maneras de hacer esto:

Encontrar los elementos HTML de Identificacin

Encontrar elementos HTML por nombre de etiqueta
Encontrar los elementos HTML de nombre de la clase
Encontrar los elementos HTML de selectores CSS
Encontrar los elementos HTML de colecciones de objetos HTML
Encontrar elemento HTML por Id
La forma ms fcil de encontrar un elemento HTML en el DOM, es
mediante el uso del elemento de identificacin.

En este ejemplo se encuentra el elemento con id = "intro":

Ejemplo
var myElement = document.getElementById("intro");
Intntalo t mismo "

Si se encuentra el elemento, el mtodo devolver el elemento como un

objeto (en myElement).

Si no se encuentra el elemento, myElement contendr nula.

Encontrar los elementos HTML de Nombre

de etiqueta
Este ejemplo busca todos los elementos <P>:

Ejemplo
var x = document.getElementsByTagName("p");
Intntalo t mismo "

En este ejemplo se encuentra el elemento con id = "principal", y luego

encuentra todos <p> elementos dentro "principal":

Ejemplo
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Intntalo t mismo "
Encontrar los elementos HTML de nombre
de clase
Si usted quiere encontrar todos los elementos HTML con el mismo
nombre de la clase, utilizar getElementsByClassName ().

En este ejemplo se devuelve una lista de todos los elementos con class
= "intro".

Ejemplo
var x = document.getElementsByClassName("intro");
Intntalo t mismo "

Encontrar elementos por nombre de la clase no funciona en Internet

Explorer 8 y versiones anteriores.

Encontrar los elementos HTML de

selectores CSS
Si usted quiere encontrar todos los elementos HTML que coincide con un
selector CSS especificado (id, nombres de clases, tipos, atributos,
valores de atributos, etc.), utilice el mtodo querySelectorAll ().

En este ejemplo se devuelve una lista de todos los elementos <P> con
class = "intro".

Ejemplo
var x = document.querySelectorAll("p.intro");
Intntalo t mismo "

El mtodo querySelectorAll () no funciona en Internet Explorer 8 y

versiones anteriores.

Encontrar los elementos HTML de

colecciones de objetos HTML
En este ejemplo se encuentra el elemento de formulario con id = "frm1",
en la coleccin de formularios, y muestra todos los valores de los
elementos:

Ejemplo
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Intntalo t mismo "

Los siguientes objetos HTML (y colecciones de objetos) son tambin

accesibles:

document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
titulo del documento

Ponte a prueba con los ejercicios!

JavaScript HTML DOM - Cambio de

HTML
AnteriorSiguiente

El DOM HTML permite Javascript para cambiar el contenido de los

elementos HTML.
Cambio de la secuencia de salida HTML
JavaScript puede crear contenido HTML dinmico:

Fecha: Sab Jul 2017 21:39:08 GMT 29 de-0500 (. Hora est

Pacfico, Sudamrica)

En JavaScript, document.write () se puede utilizar para escribir

directamente en la corriente de salida HTML:

Ejemplo
<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>
Intntalo t mismo "

Nunca use document.write (), despus de cargar el documento. Se

sobrescribir el documento.

Cambio de contenido HTML

La forma ms fcil de modificar el contenido de un elemento HTML es
mediante el uso de la innerHTML propiedad.

Para cambiar el contenido de un elemento HTML, utilice la siguiente

sintaxis:

document.getElementById(id).innerHTML = new HTML

Este ejemplo se cambia el contenido de un elemento <p>:

Ejemplo
<html>
<body>
<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>
Intntalo t mismo "

Ejemplo explic:

El documento HTML anterior contiene un elemento <p> con id =

"p1"
Utilizamos el DOM HTML para obtener el elemento con id = "p1"
Un JavaScript cambia el contenido (innerHTML) de ese elemento a
"Nuevo texto!"

Este ejemplo se cambia el contenido de un elemento <h1>:

Ejemplo
<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
var element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

</body>
</html>
Intntalo t mismo "

Ejemplo explic:

El documento HTML anterior contiene un elemento <h1> con id =

"ID01"
Utilizamos el DOM HTML para obtener el elemento con id = "ID01"
Un JavaScript cambia el contenido (innerHTML) de ese elemento
de "Nueva heaing"
Cambiar el valor de un atributo
Para cambiar el valor de un atributo HTML, utilice la siguiente sintaxis:

document.getElementById(id).attribute = new value

Este ejemplo se cambia el valor del atributo src de un elemento <img>:

Ejemplo
<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>
Intntalo t mismo "

Ejemplo explic:

El documento HTML anterior contiene un elemento <img> con id

= "myImage"
Utilizamos el DOM HTML para obtener el elemento con id =
"myImage"
Un JavaScript cambia el atributo src de ese elemento de
"smiley.gif" a "landscape.jpg"

Ponte a prueba con los ejercicios!

JavaScript DOM HTML - CSS

Cambio
AnteriorSiguiente
El DOM HTML permite Javascript para cambiar el estilo de los
elementos HTML.

Cambiar el estilo de HTML

Para cambiar el estilo de un elemento HTML, utilice la siguiente sintaxis:

document.getElementById(id).style.property = new style

El ejemplo siguiente cambia el estilo de un elemento <p>:

Ejemplo
<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>
Intntalo t mismo "

El uso de Eventos
El DOM HTML le permite ejecutar cdigo cuando se produce un evento.

Los eventos se generan por el navegador cuando "pasan cosas" a los

elementos HTML:

Un elemento que se hace clic en

La pgina se ha cargado
Los campos de entrada se cambian

Va a aprender ms acerca de los eventos en el siguiente captulo de este

tutorial.
En este ejemplo se cambia el estilo del elemento HTML con id = "ID1",
cuando el usuario hace clic en un botn:

Ejemplo
<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

</body>
</html>
Intntalo t mismo "

Ms ejemplos
Visibilidad Cmo hacer que un elemento invisible. Quieres mostrar el
elemento o no?

DOM Estilo HTML Object Reference

Para todas las propiedades de estilo HTML DOM, visita nuestra
completa referencia de objetos DOM estilo HTML .

Ponte a prueba con los ejercicios!

Ejercicio 1 Ejercicio 2 Ejercicio 3 Ejercicio 4 Ejercicio 5
JavaScript HTML DOM Animacin
AnteriorSiguiente

Aprender a crear animaciones HTML usando JavaScript.

Una pgina Web Bsico

Para demostrar cmo crear animaciones HTML con JavaScript, vamos a
utilizar una simple pgina web:

Ejemplo
<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript Animation</h1>

<div id="animation">My animation will go here</div>

</body>
</html>
Intntalo t mismo "

Crear un contenedor de Animacin

Todas las animaciones debe ser relativa a un elemento contenedor.

Ejemplo
<div id ="container">
<div id ="animate">My animation will go here</div>
</div>

El estilo de los elementos

El elemento contenedor debe ser creado con style = "position: relative".

El elemento de animacin debe ser creado con style = "position:

absolute".

Ejemplo
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
Intntalo t mismo "

Cdigo de animacin
animaciones de JavaScript se llevan a cabo mediante la programacin de
los cambios graduales en el estilo de un elemento.

Los cambios son llamados por un temporizador. Cuando el intervalo del

temporizador es pequea, la animacin se ve continuo.

El cdigo bsico es:

Ejemplo
var id = setInterval(frame, 5);

function frame() {
if (/* test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
Crear la animacin usando JavaScript
Ejemplo
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
Intntalo t mismo "

JavaScript HTML eventos DOM

AnteriorSiguiente

HTML DOM permite Javascript para reaccionar a eventos HTML:

Del ratn sobre m

Haz click en mi

Reaccin a los eventos

Un JavaScript puede ejecutarse cuando se produce un evento, como
cuando un usuario hace clic en un elemento HTML.

Para ejecutar cdigo cuando un usuario hace clic en un elemento, aadir

cdigo JavaScript a un atributo de evento HTML:

onclick=JavaScript
Ejemplos de eventos HTML:

Cuando un usuario hace clic en el ratn

Cuando una pgina web se ha cargado
Cuando una imagen se ha cargado
Cuando el ratn se mueve sobre un elemento
Cuando se cambia un campo de entrada
Cuando se enva un formulario HTML
Cuando un usuario acaricia una clave

En este ejemplo, el contenido del elemento <h1> se cambia cuando un

usuario hace clic en l:

Ejemplo
<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

</body>
</html>
Intntalo t mismo "

En este ejemplo, una funcin es llamada desde el controlador de

eventos:

Ejemplo
<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>

</body>
</html>
Intntalo t mismo "
Atributos HTML Evento
Para asignar eventos a elementos HTML que puede utilizar atributos de
los eventos.

Ejemplo
Asignar un evento onclick de un elemento de botn:

<button onclick="displayDate()">Try it</button>

Intntalo t mismo "

En el ejemplo anterior, una funcin llamada displayDate se ejecutar

cuando se hace clic en el botn.

Asignar eventos usando el DOM HTML

El DOM HTML le permite asignar eventos a elementos HTML utilizando
JavaScript:

Ejemplo
Asignar un evento onclick de un elemento de botn:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Intntalo t mismo "

En el ejemplo anterior, una funcin llamada displayDate se asigna a un

elemento HTML con el id = "myBtn".

La funcin se ejecuta cuando se hace clic en el botn.

Los onload y OnUnload Eventos

Los eventos onload y OnUnload se activan cuando el usuario entra o sale
de la pgina.
El proceso de carga se puede utilizar para comprobar el tipo de
navegador y versin del navegador del visitante, y cargar la versin
correcta de la pgina web en base a la informacin.

Los eventos onload y OnUnload se pueden utilizar para hacer frente a las
cookies.

Ejemplo
<body onload="checkCookies()">
Intntalo t mismo "

El evento onchange
El evento onchange se utiliza a menudo en combinacin con la validacin
de campos de entrada.

A continuacin se muestra un ejemplo de cmo utilizar el onchange. La

funcin de maysculas () ser llamada cuando un usuario cambia el
contenido de un campo de entrada.

Ejemplo
<input type="text" id="fname" onchange="upperCase()">
Intntalo t mismo "

Los onmouseover y onMouseOut Eventos

El onmouseover y onmouseout eventos se puede utilizar para activar
una funcin cuando el usuario pasa el ratn por encima, o fuera de, un
elemento HTML:

Del ratn sobre m

Intntalo t mismo "

El onMouseDown, onmouseup y eventos

onclick
El onMouseDown, onmouseup y eventos onclick son todos partes de un
clic del ratn. En primer lugar, cuando se hace clic en un botn del
ratn, el evento onMouseDown se activa, entonces, cuando se suelta el
botn del ratn, el evento se desencadena onmouseup, por ltimo,
cuando se completa la pulsacin del ratn, el evento onclick se dispara.

Click Me

Intntalo t mismo "

Ms ejemplos
onMouseDown y onmouseup
cambiar una imagen cuando un usuario presiona el botn del ratn.

onload
Mostrar un cuadro de alerta cuando la pgina ha terminado de cargar.

onfocus
Cambiar el color de fondo de un campo de entrada cuando se pone el
foco.

Eventos del ratn

Cambiar el color de un elemento cuando el cursor se mueve sobre ella.

HTML DOM evento de referencia de

objetos
Para obtener una lista de todos los eventos DOM HTML, visita nuestra
completa HTML DOM evento de referencia del objeto .

Ponte a prueba con los ejercicios!

JavaScript DOM de HTML
EventListener
AnteriorSiguiente

El mtodo addEventListener ()
Ejemplo
Aadir un detector de eventos que se activa cuando un usuario hace clic
en un botn:

document.getElementById("myBtn").addEventListener("click",
displayDate);
Intntalo t mismo "

El mtodo addEventListener () se une un controlador de eventos con el

elemento especificado.

El mtodo addEventListener () se une un controlador de eventos a un

elemento sin sobrescribir controladores de eventos existentes.

Usted puede agregar muchos controladores de eventos a un elemento.

Usted puede agregar muchos controladores de eventos del mismo tipo a

un elemento, es decir, dos eventos "clic".

Se pueden aadir detectores de eventos a cualquier objeto DOM no slo

los elementos HTML. es decir, el objeto de la ventana.

El mtodo addEventListener () hace que sea ms fcil controlar cmo

reacciona el caso de burbujeo.

Al utilizar el mtodo addEventListener (), el cdigo JavaScript se separa

del marcado HTML, para facilitar su lectura y le permite aadir
detectores de eventos, incluso cuando usted no controla el formato
HTML.

Usted puede quitar fcilmente un detector de eventos utilizando el

mtodo removeEventListener ().
Sintaxis
element.addEventListener(event, function, useCapture);

El primer parmetro es el tipo de evento (como "clic" o "mousedown").

El segundo parmetro es la funcin que queremos llamar cuando se

produce el evento.

El tercer parmetro es un valor booleano que especifica si se debe

utilizar burbujeo evento o captura de evento. Este parmetro es
opcional.

Tenga en cuenta que no se utiliza el prefijo "on" para el evento; usar

"clic" en lugar de "onclick".

Aadir un controlador de eventos a un

Elemento
Ejemplo
Alerta "Hello World!" cuando el usuario hace clic sobre un elemento:

element.addEventListener("click", function(){ alert("Hello

World!"); });
Intntalo t mismo "

Tambin puede hacer referencia a una funcin externa "llamada":

Ejemplo
Alerta "Hello World!" cuando el usuario hace clic sobre un elemento:

element.addEventListener("click", myFunction);

function myFunction() {
alert ("Hello World!");
}
Intntalo t mismo "
Aadir Muchos controladores de eventos
al mismo elemento
El mtodo addEventListener () permite agregar muchos eventos al
mismo elemento, sin sobrescribir los eventos existentes:

Ejemplo
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Intntalo t mismo "

Se pueden aadir eventos de diferentes tipos al mismo elemento:

Ejemplo
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Intntalo t mismo "

Aadir un controlador de eventos al

objeto de ventana
El mtodo addEventListener () le permite aadir detectores de eventos
en cualquier objeto DOM HTML como elementos HTML, el documento
HTML, el objeto de la ventana, u otros objetos que apoyan
acontecimientos, al igual que el objeto XMLHttpRequest.

Ejemplo
Aadir un detector de eventos que se activa cuando un usuario cambia
el tamao de la ventana:

window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Intntalo t mismo "
Paso de parmetros
Al pasar valores de parmetros, utilizar una "funcin annima" que llama
a la funcin especificada con los parmetros:

Ejemplo
element.addEventListener("click", function(){ myFunction(p1,
p2); });
Intntalo t mismo "

El burbujear evento o Captura de eventos?

Hay dos formas de propagacin de eventos en el DOM de HTML,
burbujeantes y captura.

propagacin de eventos es una manera de definir el orden de los

elementos cuando se produce un evento. Si usted tiene un elemento
<p> dentro de un elemento <div>, y el usuario hace clic en el elemento
<p>, que de elemento de "clic" evento debe ser manejado en primer
lugar?

En burbujeante caso de que la mayor parte del elemento interior se

maneja primero y luego el exterior: el <p> Haga clic en el evento del
elemento se maneja en primer lugar, a continuacin, haga clic en el
evento <div> del elemento.

en la captura evento de los ms de elemento externo es manejada

primero y luego el interior: el evento click <div> del elemento ser
tratada primero, luego el <p> Haga clic en el evento del elemento.

Con el mtodo addEventListener () puede especificar el tipo de

propagacin mediante el parmetro "useCapture":

addEventListener(event, function, useCapture);

El valor predeterminado es falso, que utilizar la propagacin burbujeo,

cuando el valor se establece en true, el evento utiliza la propagacin de
captura.

Ejemplo
document.getElementById("myP").addEventListener("click",
myFunction, true);
document.getElementById("myDiv").addEventListener("click",
myFunction, true);
Intntalo t mismo "

El mtodo removeEventListener ()
El mtodo removeEventListener () elimina los controladores de eventos
que se han adjuntado con el mtodo addEventListener ():

Ejemplo
element.removeEventListener("mousemove", myFunction);
Intntalo t mismo "

Soporte del navegador

Los nmeros de la tabla especifica la primera versin del navegador que
es totalmente compatible con estos mtodos.

Method

addEventListener() 1.0 9.0 1.0 1.

removeEventListener() 1.0 9.0 1.0 1.

Nota: El addEventListener () y removeEventListener () mtodos no son

compatibles con IE 8 y versiones anteriores y Opera 6.0 y versiones
anteriores. Sin embargo, para estas versiones especficas del navegador,
puede utilizar el mtodo attachEvent () para adjuntar un controladores
de eventos al elemento, y el mtodo detachEvent () para eliminarlo:

element.attachEvent(event, function);
element.detachEvent(event, function);

Ejemplo
solucin multi-navegador:

var x = document.getElementById("myBtn");
if (x.addEventListener) { // For all major
browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // For IE 8 and
earlier versions
x.attachEvent("onclick", myFunction);
}
Intntalo t mismo "

HTML DOM evento de referencia de

objetos
Para obtener una lista de todos los eventos DOM HTML, visita nuestra
completa HTML DOM evento de referencia del objeto .

JavaScript navegacin HTML DOM

AnteriorSiguiente

Con el DOM de HTML, se puede navegar por el rbol de nodos

utilizando relaciones de nodo.

Los nodos DOM

De acuerdo con el estndar W3C HTML DOM, todo en un documento
HTML es un nodo:

El documento entero es un nodo de documento

Cada elemento HTML es un nodo elemento
El texto dentro de los elementos HTML son nodos de texto
Cada atributo HTML es un nodo de atributo (en desuso)
Todos los comentarios son nodos de comentario
Con el DOM HTML, todos los nodos en el rbol de nodos se puede
acceder mediante JavaScript.

Nuevos nodos pueden ser creados, y todos los nodos pueden ser
modificados o eliminados.

relaciones nodo
Los nodos en el rbol de nodos tienen una relacin jerrquica entre s.

El trminos padre, hijo, hermano y se usan para describir las relaciones.

En un rbol de nodos, el nodo superior se llama la raz (o nodo

raz)
Cada nodo tiene exactamente un padre, excepto la raz (que no
tiene padre)
Un nodo puede tener un nmero de nios
Hermanos (hermanos o hermanas) son nodos con el mismo padre

<html>

<head>
<title>DOM Tutorial</title>
</head>

<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>

</html>
Desde el HTML anterior se puede leer:

<Html> es el nodo raz

<Html> no tiene padres
<Html> es la matriz de <head> y <body>
<Head> es el primer hijo de <html>
<Body> es el ltimo hijo de <html>

y:

<Head> tiene un hijo: <title>

<Title> tiene un hijo (un nodo de texto): "DOM Tutorial"
<Body> tiene dos hijos: <h1> y <p>
<H1> tiene un hijo: "Leccin DOM uno"
<P> tiene un hijo: "Hola, mundo!"
<h1> y <p> son hermanos

Navegando entre nodos

Puede utilizar las siguientes propiedades del nodo para navegar entre los
nodos con JavaScript:

parentNode
childNodes [ NodeNumber ]
primer hijo
ltimo nio
nextSibling
previousSibling
Nodos secundarios y valores de nodo
Un error comn en el procesamiento de DOM es esperar un nodo
elemento para contener texto.

Ejemplo:
<title id="demo">DOM Tutorial</title>

El nodo de elemento <title> (en el ejemplo anterior) no no contienen

texto.

Contiene un nodo de texto con el valor "DOM Tutorial".

El valor del nodo de texto se puede acceder por el nodo

de innerHTML propiedad:

var myTitle = document.getElementById("demo").innerHTML;

Acceso a la propiedad innerHTML es el mismo que el acceso a

la nodeValue del primer hijo:

var myTitle =
document.getElementById("demo").firstChild.nodeValue;

Acceso al primer hijo tambin se puede hacer de esta manera:

var myTitle =
document.getElementById("demo").childNodes[0].nodeValue;

Todas las (3) siguientes ejemplos recupera el texto de un elemento y lo

copia en un elemento <p> <h1>:

Ejemplo
<html>
<body>

<h1 id="id01">My First Page</h1>

<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").innerHTML;
</script>

</body>
</html>
Intntalo t mismo "

Ejemplo
<html>
<body>

<h1 id="id01">My First Page</h1>

<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>
Intntalo t mismo "

Ejemplo
<html>
<body>

<h1 id="id01">My First Page</h1>

<p id="id02">Hello!</p>

<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>
Intntalo t mismo "

InnerHTML
En este tutorial usamos la propiedad innerHTML para recuperar el
contenido de un elemento HTML.

Sin embargo, el aprendizaje de los otros mtodos anteriormente es til

para la comprensin de la estructura de rbol y la navegacin del DOM.
DOM raz nodos
Hay dos propiedades especiales que permiten el acceso al documento
completo:

document.body - El cuerpo del documento

document.documentElement - El documento completo

Ejemplo
<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates
the <b>document.body</b> property.</p>
</div>

<script>
alert(document.body.innerHTML);
</script>

</body>
</html>
Intntalo t mismo "

Ejemplo
<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates
the <b>document.documentElement</b> property.</p>
</div>

<script>
alert(document.documentElement.innerHTML);
</script>

</body>
</html>
Intntalo t mismo "
La propiedad nombreNodo
La propiedad nombreNodo especifica el nombre de un nodo.

nombreNodo es de slo lectura

nodeName de un nodo de elemento es el mismo que el nombre de
la etiqueta
nodeName de un nodo de atributo es el nombre del atributo
nodeName de un nodo de texto es siempre #text
nodeName del nodo documento est siempre #document

Ejemplo
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").nodeName;
</script>
Intntalo t mismo "

Nota: nombreNodo siempre contiene el nombre de la etiqueta en

maysculas de un elemento HTML.

La propiedad nodeValue
La propiedad nodeValue especifica el valor de un nodo.

nodeValue para nodos de elemento est definido

nodeValue para los nodos de texto es el propio texto
nodeValue para los nodos de atributo es el valor del atributo

La propiedad nodeType
La propiedad nodeType es de slo lectura. Se devuelve el tipo de un
nodo.

Ejemplo
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").nodeType;
</script>
Intntalo t mismo "

Las propiedades nodeType ms importantes son:

Node Type Example

ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE 2 class = "heading" (deprecated)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!-- This is a comment -->
DOCUMENT_NODE 9 <html>
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Tipo 2 est en desuso en el DOM de HTML (pero funciona). No est en

desuso en el DOM XML.

JavaScript HTML DOM elementos

(nodos)
AnteriorSiguiente

Adicin y eliminacin de nodos (elementos) HTML

Creacin de nuevos elementos HTML

(nodos)
Para aadir un nuevo elemento a la DOM de HTML, se debe crear el
elemento (nodo de elemento) en primer lugar y, a continuacin, aadir a
un elemento existente.

Ejemplo
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");

element.appendChild(para);
</script>
Intntalo t mismo "

ejemplo Explicacin
Este cdigo crea un nuevo elemento <p>:

var para = document.createElement("p");

Para aadir texto al elemento <p>, debe crear un nodo de texto en

primer lugar. Este cdigo crea un nodo de texto:

var node = document.createTextNode("This is a new paragraph.");

A continuacin, debe agregar el nodo de texto para el elemento <p>:

para.appendChild(node);

Finally you must append the new element to an existing element.

Este cdigo se encuentra un elemento existente:

var element = document.getElementById("div1");

Este cdigo aade el nuevo elemento al elemento existente:

element.appendChild(para);
La creacin de nuevos elementos HTML -
insertBefore ()
El mtodo appendChild () en el ejemplo anterior, aade el nuevo
elemento como el ltimo hijo de los padres.

Si no desea que se puede utilizar el mtodo insertBefore ():

Ejemplo
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");

var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
Intntalo t mismo "

Removing Existing HTML Elements

Para eliminar un elemento HTML, se debe conocer el padre del
elemento:

Ejemplo
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
Intntalo t mismo "

El node.remove mtodo () est implementado en la especificacin DOM

4.
Sin embargo, debido a la mala soporte de los navegadores, no debe
usarlo.

ejemplo Explicacin
Este documento HTML contiene un elemento <div> con dos nodos
secundarios (dos <p> elementos):

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

Encuentre el elemento con id = "div1":

var parent = document.getElementById("div1");

Encontrar el elemento <p> con id = "p1":

var child = document.getElementById("p1");

Retirar al nio de los padres:

parent.removeChild(child);

Sera agradable ser capaz de eliminar un elemento sin hacer referencia a

los padres.
Pero lo siento. El DOM necesita saber tanto el elemento que desea
eliminar, y su matriz.

Aqu es una solucin comn: Encontrar el nio que desea eliminar, y el

uso de su propiedad parentNode a encontrar al padre:

var child = document.getElementById("p1");

child.parentNode.removeChild(child);

Sustitucin de elementos HTML

Para reemplazar un elemento para el DOM de HTML, utilice el mtodo
replaceChild ():

Ejemplo
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var parent = document.getElementById("div1");

var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
Intntalo t mismo "

JavaScript H TML DOM Colecciones

AnteriorSiguiente

El objeto HTMLCollection
El mtodo getElementsByTagName () devuelve
un HTMLCollection objeto.

Un objeto HTMLCollection es una lista de arreglo similar (coleccin) de

elementos HTML.

El cdigo siguiente selecciona todos los elementos <p> en un

documento:

Ejemplo
var x = document.getElementsByTagName("p");

Los elementos de la coleccin pueden ser accedidos por un nmero de

ndice.
Para acceder al segundo elemento <p> puede escribir:

y = x[1];
Intntalo t mismo "

Nota: El ndice comienza en 0.

HTML HTMLCollection Longitud

La propiedad longitud define el nmero de elementos en una
HTMLCollection:

Ejemplo
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;
Intntalo t mismo "

Ejemplo explic:

1. Crear una coleccin de todos los elementos <P>

2. Mostrar la longitud de la coleccin

La propiedad length es til cuando se desea colocar a travs de los

elementos de una coleccin:

Ejemplo
Cambiar el color de fondo de todos los elementos <P>:

var myCollection = document.getElementsByTagName("p");

var i;
for (i = 0; i < myCollection.length; i++) {
myCollection[i].style.backgroundColor = "red";
}
Intntalo t mismo "

Un HTMLCollection no es una matriz!

Un HTMLCollection puede ver como una matriz, pero no lo es.

Puede bucle a travs de la lista y se refieren a los elementos con un

nmero (tal como una matriz).
Sin embargo, no se puede utilizar como mtodos de arreglos valueOf (),
pop (), push (), o unirse a () en una HTMLCollection.

JavaScript listas HTML DOM nodo

AnteriorSiguiente

El objeto HTML DOM NodeList

A NodeList objeto es una lista (coleccin) de nodos extrados de un
documento.

Un objeto NodeList es casi la misma como un objeto HTMLCollection.

Algunos navegadores (mayores) devuelven un objeto NodeList en lugar

de un HTMLCollection de mtodos como getElementsByClassName
() .

Todos los navegadores devuelven un objeto NodeList para la

propiedad childNodes .

La mayora de los navegadores devuelven un objeto NodeList para el

mtodo querySelectorAll () .

El cdigo siguiente selecciona todos <p> nodos de un documento:

Ejemplo
var myNodeList = document.querySelectorAll("p");

Los elementos de la NodeList pueden ser accedidos por un nmero de

ndice.

Para acceder al segundo nodo <p> puede escribir:

y = myNodeList[1];
Intntalo t mismo "

Nota: El ndice comienza en 0.

Lista de nodos DOM HTML Longitud
La propiedad longitud define el nmero de nodos de una lista de nodos:

Ejemplo
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;
Intntalo t mismo "

Ejemplo explic:

1. Crear una lista de todos los elementos <P>

2. Mostrar la longitud de la lista

La propiedad length es til cuando se desea colocar a travs de los

nodos de una lista de nodos:

Ejemplo
Cambiar el color de fondo de todos los elementos <p> en una lista de
nodos:

var myNodelist = document.querySelectorAll("p");

var i;
for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.backgroundColor = "red";
}
Intntalo t mismo "

La diferencia entre un HTMLCollection y

una NodeList
Un HTMLCollection (captulo anterior) es una coleccin de elementos
HTML.

A NodeList es una coleccin de nodos de documentos.

En muchos casos esto es mucho lo mismo.

Tanto un objeto HTMLCollection y un objeto NodeList es una lista de

arreglo similar (coleccin) de objetos.
Ambos tienen una propiedad de longitud que define el nmero de
elementos de la lista (coleccin).

Ambos proporcionan un ndice (0, 1, 2, 3, 4, ...) para acceder a cada

artculo como una matriz.

artculos HTMLCollection puede acceder por su nombre, identificacin, o

nmero de ndice.

artculos NodeList slo se puede acceder por su nmero de ndice.

Slo el objeto NodeList puede contener nodos de atributo y nodos de

texto.

Una lista de nodos no es una matriz!

Una lista de nodos puede ver como una matriz, pero no lo es.

Puede bucle a travs de la lista de nodos y se refieren a sus nodos como

una matriz.

Sin embargo, no se puede utilizar mtodos de arreglos, como valueOf (),

push (), pop (), o unirse a () en una lista de nodos.

JavaScript Ventana - El modelo de

objetos Explorador
AnteriorSiguiente

El Modelo Examinador de objetos (BOM) permite Javascript para

"hablar con" el navegador.

El Modelo Examinador de objetos (BOM)

No existen normas oficiales para el B rowser O bject M odelo (BOM).

Dado que los navegadores modernos han puesto en prctica (casi) los
mismos mtodos y propiedades de JavaScript interactividad, que se
refiere a menudo, como los mtodos y las propiedades de la lista de
materiales.

El objeto de la ventana
La ventana de objeto es soportado por todos los
navegadores. Representa la ventana del navegador.

Todos los objetos globales de JavaScript, funciones y variables se

convierten automticamente en miembros del objeto ventana.

Las variables globales son propiedades del objeto de la ventana.

funciones globales son mtodos del objeto ventana.

Incluso el objeto de documento (DOM del HTML) es una propiedad del

objeto de la ventana:

window.document.getElementById("header");

es lo mismo que:

document.getElementById("header");

Tamao de ventana
Dos propiedades se pueden utilizar para determinar el tamao de la
ventana del navegador.

Ambas propiedades devuelven los tamaos en pxeles:

window.innerHeight - la altura interior de la ventana del

navegador (en pxeles)
window.innerWidth - la anchura interior de la ventana del
navegador (en pxeles)

La ventana del navegador (la ventana del navegador) no est incluyendo

barras de herramientas y barras de desplazamiento.

Para Internet Explorer 8, 7, 6, 5:

document.documentElement.clientHeight
document.documentElement.clientWidth
 o
document.body.clientHeight
document.body.clientWidth

Una solucin prctica JavaScript (que abarca todos los navegadores):

Ejemplo
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
Intntalo t mismo "

El ejemplo muestra la altura de la ventana del navegador y anchura:

(NO incluyendo barras de herramientas / barras de desplazamiento)

Otros mtodos de ventana

Algunos otros mtodos:

window.open () - abrir una nueva ventana

window.close () - cerrar la ventana actual
window.moveTo () -Mover la ventana actual
window.resizeTo () -resize la ventana actual

JavaScript pantalla de la ventana

AnteriorSiguiente

El objeto window.screen contiene informacin acerca de la pantalla

del usuario.

Pantalla de la ventana
El window.screen objeto puede ser escrita sin el prefijo ventana.
propiedades:

screen.width
Screen.Height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth

Ancho de pantalla de la ventana

La propiedad screen.width devuelve el ancho de la pantalla del visitante
en pxeles.

Ejemplo
Visualizar el ancho de la pantalla en pxeles:

document.getElementById("demo").innerHTML =
"Screen Width: " + screen.width;

El resultado ser:

Screen Width: 1366

Intntalo t mismo "

Pantalla de la ventana Altura

La propiedad Screen.Height devuelve la altura de la pantalla del visitante
en pxeles.

Ejemplo
Mostrar la altura de la pantalla en pxeles:

document.getElementById("demo").innerHTML =
"Screen Height: " + screen.height;

El resultado ser:
Screen Height: 768
Intntalo t mismo "

Pantalla de la ventana Ancho disponible

La propiedad screen.availWidth devuelve el ancho de la pantalla del
visitante, en pxeles, menos interfaz de caractersticas como la barra de
tareas de Windows.

Ejemplo
Mostrar la anchura disponible de la pantalla en pxeles:

document.getElementById("demo").innerHTML =
"Available Screen Width: " + screen.availWidth;

El resultado ser:

Available Screen Width: 1366

Intntalo t mismo "

Pantalla de la ventana disponible Altura

La propiedad screen.availHeight devuelve la altura de la pantalla del
visitante, en pxeles, menos interfaz de caractersticas como la barra de
tareas de Windows.

Ejemplo
Mostrar la altura disponible de la pantalla en pxeles:

document.getElementById("demo").innerHTML =
"Available Screen Height: " + screen.availHeight;

El resultado ser:

Available Screen Height: 728

Intntalo t mismo "

Ventana de pantalla Profundidad de color

La propiedad screen.colorDepth devuelve el nmero de bits utilizados
para mostrar un color.

Todos los ordenadores modernos utilizan 24 bits o 32 bits de hardware

para la resolucin de color:

24 bits = 16.777.216 diferentes "True Colors"

32 bits = 4,294,967,296 diferentes "Deep Colors"

Los equipos ms antiguos utilizan 16 bits: 65.536 diferentes

resoluciones "altos colores".

Muy viejas computadoras y telfonos celulares viejos utilizan 8 bits: 256

diferentes colores "VGA".

Ejemplo
Mostrar la profundidad de color de la pantalla en bits:

document.getElementById("demo").innerHTML =
"Screen Color Depth: " + screen.colorDepth;

El resultado ser:

Screen Color Depth: 24

Intntalo t mismo "

Los valores #rrggbb (RGB) utilizados en HTML representa "True Colors"

(16.777.216 colores diferentes)

Ventana pxel de la pantalla Profundidad

La propiedad screen.pixelDepth devuelve la profundidad de pxeles de la
pantalla.

Ejemplo
Mostrar la profundidad de pxel de la pantalla en bits:

document.getElementById("demo").innerHTML =
"Screen Pixel Depth: " + screen.pixelDepth;

El resultado ser:

Screen Pixel Depth: 24

Intntalo t mismo "

Para las computadoras modernas, la profundidad de color y profundidad

de pxeles son iguales.

JavaScript ubicacin de ventana

AnteriorSiguiente

El objeto window.location puede ser utilizado para obtener la

corriente pgina de direcciones (URL) y para redirigir el navegador a
una pgina nueva.

ventana Ubicacin
El window.location objeto puede ser escrita sin el prefijo ventana.

Algunos ejemplos:

window.location.href devuelve el href (URL) de la pgina actual

window.location.hostname devuelve el nombre de dominio del
proveedor de alojamiento web
window.location.pathname devuelve la ruta y el nombre de la
pgina actual
window.location.protocol devuelve el protocolo web utilizado (http:
o https :)
window.location.assign carga un nuevo documento

Ventana Ubicacin Href

El window.location.href propiedad devuelve la URL de la pgina
actual.

Ejemplo
Mostrar la href (URL) de la pgina actual:

document.getElementById("demo").innerHTML =
"Page location is " + window.location.href;

El resultado es:

Page location is
https://www.w3schools.com/js/js_window_location.asp
Intntalo t mismo "

Ventana Ubicacin nombre de host

El window.location.hostname propiedad devuelve el nombre del host
de Internet (de la pgina actual).

Ejemplo
Mostrar el nombre del host:

document.getElementById("demo").innerHTML =
"Page hostname is " + window.location.hostname;

El resultado es:

Page hostname is www.w3schools.com

Intntalo t mismo "

Nombre de ruta de ubicacin de ventana

El window.location.pathname propiedad devuelve el nombre de ruta
de la pgina actual.
Ejemplo
Visualizar el nombre de la ruta de la URL actual:

document.getElementById("demo").innerHTML =
"Page path is " + window.location.pathname;

El resultado es:

/js/js_window_location.asp
Intntalo t mismo "

Ventana del protocolo de ubicacin

El window.location.protocol propiedad devuelve el protocolo de
Internet de la pgina.

Ejemplo
Mostrar el protocolo de Internet:

document.getElementById("demo").innerHTML =
"Page protocol is " + window.location.protocol;

El resultado es:

Page protocol is https:

Intntalo t mismo "

Ventana Ubicacin Puerto

El window.location.port propiedad devuelve el nmero del puerto de
host a Internet (de la pgina actual).

Ejemplo
Mostrar el nombre del host:

document.getElementById("demo").innerHTML =
"Port number is " + window.location.port;
El resultado es:

Port name is
Intntalo t mismo "

La mayora de los navegadores no mostrarn nmeros de puerto por

defecto (80 para HTTP y 443 para HTTPS)

Ventana Ubicacin Asignar

El window.location.assign () mtodo carga un nuevo documento.

Ejemplo
Cargar un nuevo documento:

<html>
<head>
<script>
function newDoc() {
window.location.assign("https://www.w3schools.com")
}
</script>
</head>
<body>

<input type="button" value="Load new

document" onclick="newDoc()">

</body>
</html>
Intntalo t mismo "

JavaScript ventana de la historia

AnteriorSiguiente

El objeto window.history contiene el historial de los navegadores.

Historia ventana
El window.history objeto puede ser escrita sin el prefijo ventana.

Para proteger la privacidad de los usuarios, existen limitaciones a la

forma en JavaScript puede acceder a este objeto.

Algunos mtodos:

history.back () - equivale a hacer clic de nuevo en el navegador

history.forward () - equivale a hacer clic adelante en el navegador

Ventana Historial Volver

El mtodo history.back () carga la URL anterior en la lista del historial.

Esto es lo mismo que hacer clic en el botn Atrs en el navegador.

Ejemplo
Crear un botn de retroceso en una pgina:

<html>
<head>
<script>
function goBack() {
window.history.back()
}
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

La salida del cdigo anterior ser:

Ventana de la historia hacia adelante
La historia mtodo forward () carga el siguiente URL en la lista del
historial.

Esto es lo mismo que hacer clic en el botn de avance en el navegador.

Ejemplo
Crear un botn de avance en una pgina:

<html>
<head>
<script>
function goForward() {
window.history.forward()
}
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html>

La salida del cdigo anterior ser:

JavaScript Window Navigator

AnteriorSiguiente

El objeto window.navigator contiene informacin sobre el navegador

del visitante.

ventana del navegador

El window.navigator objeto puede ser escrita sin el prefijo ventana.

Algunos ejemplos:

navigator.appName
navigator.appCodeName
navigator.platform

Las cookies del navegador

El cookieEnabled propiedad devuelve cierto si estn activadas las
cookies, de lo contrario falsa:

Ejemplo
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"cookiesEnabled is " + navigator.cookieEnabled;
</script>
Intntalo t mismo "

Nombre de la aplicacin del navegador

El appName propiedad devuelve el nombre de la aplicacin del
navegador:

Ejemplo
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"navigator.appName is " + navigator.appName;
</script>
Intntalo t mismo "

Bastante extrao, "Netscape" es el nombre de la aplicacin, tanto para

EI11, Chrome, Firefox y Safari.
Nombre cdigo de aplicacin del
navegador
El appCodeName propiedad devuelve el nombre cdigo de la aplicacin
del navegador:

Ejemplo
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"navigator.appCodeName is " + navigator.appCodeName;
</script>
Intntalo t mismo "

"Mozilla" es el nombre cdigo de la aplicacin, tanto para Chrome,

Firefox, Internet Explorer, Safari y Opera.

El motor del navegador

El producto propiedad devuelve el nombre del producto del motor del
navegador:

Ejemplo
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"navigator.product is " + navigator.product;
</script>
Intntalo t mismo "

No confe en esto. La mayora de los navegadores devuelve "Gecko"

como nombre del producto !!

La versin del explorador

El appVersion propiedad devuelve informacin sobre la versin del
navegador:

Ejemplo
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
navigator.appVersion;
</script>
Intntalo t mismo "

El navegador de Agente
El userAgent propiedad devuelve el encabezado de agente de usuario
enviado por el navegador al servidor:

Ejemplo
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.userAgent;
</script>
Intntalo t mismo "

Advertencia !!!
La informacin del navegador de objetos a menudo puede ser engaosa,
y no debe ser utilizado para detectar las versiones del navegador
porque:

Los diferentes navegadores pueden utilizar el mismo nombre

Los datos del navegador pueden ser cambiados por el propietario
del navegador
Algunos navegadores identifican incorrectamente a s mismos
ensayos in situ de bypass
Los navegadores no pueden informar de los nuevos sistemas
operativos, dado a conocer a ms tardar el navegador

La Plataforma Navegador
La plataforma de propiedad devuelve la plataforma del navegador
(sistema operativo):

Ejemplo
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.platform;
</script>
Intntalo t mismo "

El idioma Navegador
El lenguaje de propiedad devuelve el idioma del navegador:

Ejemplo
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.language;
</script>
Intntalo t mismo "

Es el navegador en lnea?
El onLine propiedad devuelve verdadero si el navegador est en lnea:

Ejemplo
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.onLine;
</script>
Intntalo t mismo "

Est habilitado Java?

El javaEnabled () mtodo devuelve verdadero si Java est habilitado:

Ejemplo
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
navigator.javaEnabled();
</script>
Intntalo t mismo "

JavaScript emergentes Cajas

AnteriorSiguiente

JavaScript tiene tres tipos de cajas emergentes: cuadro de alerta,

cuadro Confirmar, y cuadro de aviso.

Caja de alerta
Un cuadro de alerta se utiliza a menudo si usted quiere asegurarse de
que la informacin llega hasta el usuario.

Cuando un cuadro de alerta aparece, el usuario tendr que hacer clic en

"Aceptar" para continuar.

Sintaxis
window.alert("sometext");

El window.alert () mtodo puede ser escrita sin el prefijo ventana.

Ejemplo
alert("I am an alert box!");

Intntalo t mismo "

confirmar Box
Un cuadro Confirmar menudo se utiliza si desea que el usuario verifique
o aceptar algo.

Cuando un cuadro Confirmar aparece, el usuario tendr que haga clic en

"Aceptar" o "Cancelar" para continuar.

Si el usuario hace clic en "Aceptar", el cuadro devuelve verdadero. Si el

usuario hace clic en "Cancelar", la caja vuelve falsa.

Sintaxis
window.confirm("sometext");

El window.confirm () mtodo puede ser escrita sin el prefijo ventana.

Ejemplo
if (confirm("Press a button!") == true) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
Intntalo t mismo "

Caja pronta
Un cuadro de mensaje se utiliza a menudo si desea que el usuario
introduzca un valor antes de entrar en una pgina.

Cuando un cuadro de mensaje aparece, el usuario tendr que haga clic

en "Aceptar" o "Cancelar" para continuar despus de introducir un valor
de entrada.

Si el usuario hace clic en "OK" del cuadro devuelve el valor de

entrada. Si el usuario hace clic en "Cancelar" la caja devuelve un valor
nulo.

Sintaxis
window.prompt("sometext","defaultText");
El window.prompt () mtodo puede ser escrita sin el prefijo ventana.

Ejemplo
var person = prompt("Please enter your name", "Harry Potter");

if (person == null || person == "") {

txt = "User cancelled the prompt.";
} else {
txt = "Hello " + person + "! How are you today?";
}
Intntalo t mismo "

Saltos de lnea
Para visualizar los saltos de lnea dentro de una caja emergente, utilice
una barra invertida seguida por el carcter n.

Ejemplo
alert("Hello\nHow are you?");

Intntalo t mismo "

JavaScript eventos de tiempo

AnteriorSiguiente

1
2
3
4
5 JavaScript puede ejecutar en intervalos de tiempo.
6
7
8 Esto se conoce como eventos de tiempo.
9
10
11
12
Timing Eventos
El objeto de la ventana permite la ejecucin de cdigo a intervalos de
tiempo especificados.

Estos intervalos de tiempo son llamados eventos de tiempo.

Los dos mtodos principales para usar con JavaScript son:

setTimeout ( funcin, milisegundos )

Ejecuta una funcin, despus de esperar un nmero especificado
de milisegundos.
setInterval ( funcin, milisegundos )
Igual que setTimeout (), pero repite la ejecucin de la funcin
continuamente.

El setTimeout () y setInterval () son los dos mtodos del objeto HTML

Ventana DOM.

El setTimeout () Mtodo
window.setTimeout(function, milliseconds);

El window.setTimeout () mtodo puede ser escrita sin el prefijo

ventana.

El primer parmetro es una funcin a ejecutar.

El segundo parmetro indica el nmero de milisegundos antes de la

ejecucin.

Ejemplo
Haga clic en un botn. Espere 3 segundos, y la pgina alertar "Hola":

<button onclick="setTimeout(myFunction, 3000)">Try it</button>

<script>
function myFunction() {
alert('Hello');
}
</script>
Intntalo t mismo "
Cmo detener la ejecucin?
El mtodo clearTimeout () detiene la ejecucin de la funcin especificada
en setTimeout ().

window.clearTimeout(timeoutVariable)

El window.clearTimeout () mtodo puede ser escrita sin el prefijo

ventana.

El mtodo clearTimeout () utiliza la variable de regresar de setTimeout

():

myVar = setTimeout(function, milliseconds);

clearTimeout(myVar);

Si la funcin ya no se ha ejecutado, se puede detener la ejecucin

llamando al mtodo clearTimeout ():

Ejemplo
Mismo ejemplo anterior, pero con un botn aadido "Stop":

<button onclick="myVar = setTimeout(myFunction, 3000)">Try

it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>

Intntalo t mismo "

El setInterval () Mtodo
El mtodo setInterval () se repite una funcin dada en cada intervalo de
tiempo dado.

window.setInterval(function, milliseconds);

El window.setInterval () mtodo puede ser escrita sin el prefijo

ventana.

El primer parmetro es la funcin a ejecutar.

El segundo parmetro indica la longitud del intervalo de tiempo entre
cada ejecucin.

Este ejemplo ejecuta una funcin llamada "myTimer" una vez por
segundo (como un reloj digital).

Ejemplo
Mostrar la hora actual:

var myVar = setInterval(myTimer, 1000);

function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML =
d.toLocaleTimeString();
}
Intntalo t mismo "

Hay 1000 milisegundos en un segundo.

Cmo detener la ejecucin?

El mtodo clearInterval () se detiene la ejecucin de la funcin
especificada en el mtodo setInterval ().

window.clearInterval(timerVariable)

El window.clearInterval ( ) mtodo puede ser escrita sin el prefijo

ventana.

El mtodo clearInterval () utiliza la variable de regresar de setInterval

():

myVar = setInterval(function, milliseconds);

clearInterval(myVar);
Ejemplo
Mismo ejemplo anterior, pero hemos aadido un botn "Detener el
tiempo":

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML =
d.toLocaleTimeString();
}
</script>
Intntalo t mismo "

Ms ejemplos
Otra sincronizacin sencilla

Un reloj creado con un evento de calendario

JavaScript cookies
AnteriorSiguiente

Las cookies permiten almacenar informacin del usuario en pginas

web.

Cules son las cookies?

Las cookies son datos, almacenados en archivos de texto pequeos, en
el equipo.

Cuando un servidor web ha enviado una pgina web a un navegador, la

conexin se cierra, y el servidor se olvida de todo lo relacionado con el
usuario.

Las cookies se inventaron para resolver el problema de "cmo recordar

informacin sobre el usuario":

Cuando un usuario visita una pgina web, su nombre puede ser

almacenado en una cookie.
La prxima vez que el usuario visita la pgina, la cookie
"recuerda" su nombre.
Las cookies se guardan en pares de nombre y valor como:

username = John Doe

Cuando un navegador solicita una pgina web desde un servidor, las

cookies de la pgina se agrega a la solicitud. De esta manera el servidor
recibe los datos necesarios para "recordar" informacin acerca de los
usuarios.

Ninguno de los ejemplos ms adelante funcionar si su navegador tiene

las cookies locales de apoyo apagado.

Crear una cookie con Javascript

JavaScript puede crear, leer y borrar las cookies con
el document.cookie propiedad.

Con JavaScript, una cookie puede ser creado de esta manera:

document.cookie = "username=John Doe";

Tambin puede agregar una fecha de caducidad (en hora UTC). Por
defecto, se elimina la cookie cuando se cierra el navegador:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013

12:00:00 UTC";

Con un parmetro de ruta, puede decirle al navegador qu camino

pertenece a la cookie. Por defecto, la cookie pertenece a la pgina
actual.

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013

12:00:00 UTC; path=/";

Leer una cookie con Javascript

Con JavaScript, las cookies pueden ser ledas como esto:

var x = document.cookie;
document.cookie devolver todas las cookies en una secuencia muy
similar: cookie1 = valor; cookie2 = valor; cookie3 = valor;

Cambiar una cookie con Javascript

Con JavaScript, puede cambiar una galleta de la misma manera que lo
crea:

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013

12:00:00 UTC; path=/";

La vieja cookie es sobrescrito.

Eliminar una cookie con Javascript

Eliminacin de una cookie es muy simple.

Usted no tiene que especificar un valor de la cookie cuando se elimina

una cookie.

Slo hay que establecer el parmetro expira a una fecha pasada:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00

UTC; path=/;";

Debe definir la ruta de cookies para asegurarse de que las borre

derecha.

Algunos navegadores no permitirn que se elimina una cookie si no se

especifica la ruta de acceso.

La cadena de cookies
La propiedad document.cookie se parece a una cadena de texto
normal. Pero no lo es.

Incluso si se escribe una cadena de galletas a toda document.cookie,

cuando lo lea de nuevo, slo se puede ver el par nombre-valor de la
misma.
Si se establece una nueva cookie, cookies con una antigedad no se
sobrescriben. Se aade la nueva cookie para document.cookie, por lo
que si usted lee document.cookie nuevo obtendr algo como:

cookie1 = valor; cookie2 = valor;

Mostrar todas las cookies Crear 1 de la galleta Crear 2 de la

galleta Eliminar 1 de la galleta Eliminar 2 de la galleta

Si desea encontrar el valor de una galleta especificada, debe escribir una

funcin de JavaScript que busca el valor de la cookie en la cadena de
galleta.

JavaScript Ejemplo galleta

En el ejemplo a seguir, vamos a crear una cookie que almacena el
nombre de un visitante.

La primera vez que un visitante llega a la pgina web, se le pedir que

complete su nombre. El nombre se almacena en una cookie.

La prxima vez que el visitante llega a la misma pgina, recibir un

mensaje de bienvenida.

Para el ejemplo vamos a crear 3 funciones de JavaScript:

1. Una funcin para establecer un valor de la cookie

2. Una funcin para obtener un valor de la cookie
3. Una funcin para comprobar un valor de la cookie

Una funcin para establecer una cookie

En primer lugar, creamos una funcin que almacena el nombre del
visitante en una variable cookie:

Ejemplo
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires
+ ";path=/";
}

Ejemplo explic:

Los parmetros de la funcin de arriba son el nombre de la cookie

(CNAME), el valor de la cookie (cValue), y el nmero de das hasta que
la cookie debe expirar (exdays).

La funcin establece una cookie sumando el cookiename, el valor de la

cookie, y la vence cadena.

Una Funcin para obtener una cookie

A continuacin, creamos una funcin que devuelve el valor de una
cookie especificada:

Ejemplo
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

Funciones que se explican:

Tome el cookiename como parmetro (CNAME).

Crear una variable (nombre) con el texto a buscar (cname + "=").

Decodificar la cadena de galletas, galletas de manejar con caracteres

especiales, por ejemplo, '$'

document.cookie Split, en punto y coma en una matriz llamada ca (ca =

decodedCookie.split ( ';')).
Loop a travs de la matriz de ca (i = 0; i <ca.length; i ++), y lectura a
cada valor de c = ca [i]).

Si la cookie se encontr (c.indexOf (nombre) == 0), devolver el valor de

la cookie (c.substring (name.length, c.length).

Si no se encuentra la cookie, volver "".

Una funcin para comprobar una cookie

Por ltimo, creamos la funcin que comprueba si se ha establecido una
cookie.

Si se establece la cookie se mostrar un saludo.

Si la cookie no est establecido, se mostrar un cuadro de mensaje,

preguntando por el nombre del usuario, y almacena la cookie nombre de
usuario para 365 das, llamando a la funcin setCookie:

Ejemplo
function checkCookie() {
var username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}

Todos juntos ahora

Ejemplo
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires
+ ";path=/";
}

function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
Intntalo t mismo "

El ejemplo anterior se ejecuta la funcin checkCookie () cuando se carga

la pgina.

AJAX Introduccin
AnteriorSiguiente

AJAX es el sueo de un desarrollador, ya que se puede:

Leer datos desde un servidor web - despus de que la pgina

se ha cargado
Actualizar una pgina web sin tener que recargar la pgina
Enviar datos a un servidor web - en el fondo

Ejemplo AJAX

Let AJAX change this text

Change Content

Intntalo t mismo "

AJAX Ejemplo Explicacin

Pgina HTML
<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change
Content</button>
</div>

</body>
</html>

La pgina HTML contiene una seccin <div> y <botn>.

La seccin <div> se utiliza para mostrar informacin de un servidor.

El botn <> llama a una funcin (si se hace clic).

La funcin solicita datos desde un servidor web y lo muestra:

loadDoc funcin ()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
 Qu es AJAX?
AJAX = A sncrono J avascript A nd X ML.

AJAX no es un lenguaje de programacin.

AJAX slo utiliza una combinacin de:

Un navegador incorporado en el objeto XMLHttpRequest (a datos

de solicitud desde un servidor web)
JavaScript y HTML DOM (mostrar o usar los datos)

AJAX es un nombre engaoso. aplicaciones AJAX pueden utilizar XML

para transportar datos, pero es igualmente comn para transportar
datos como texto plano o texto JSON.

AJAX permite que las pginas web se actualicen de forma asincrnica

mediante el intercambio de datos con un servidor Web detrs de las
escenas. Esto significa que es posible actualizar partes de una pgina
web, sin necesidad de recargar la pgina entera.

Cmo funciona AJAX

1. Se produce un evento en una pgina web (la pgina se carga, se hace

clic en un botn)
2. Un objeto XMLHttpRequest es creado por JavaScript
3. El objeto XMLHttpRequest enva una peticin a un servidor web
 4. El servidor procesa la solicitud
5. El servidor enva una respuesta de vuelta a la pgina Web
6. La respuesta es ledo por JavaScript
7. La accin apropiada (como actualizacin de la pgina) se realiza
mediante JavaScript

AJAX - El Objeto XMLHttpRequest

AnteriorSiguiente

La piedra angular de AJAX es el objeto XMLHttpRequest.

El objeto XMLHttpRequest
Todos los navegadores modernos soportan el objeto XMLHttpRequest.

El objeto XMLHttpRequest se puede utilizar para intercambiar datos con

un servidor Web detrs de las escenas. Esto significa que es posible
actualizar partes de una pgina web, sin necesidad de recargar la pgina
entera.

Crear un objeto XMLHttpRequest

Todos los navegadores modernos (Chrome, Firefox, Internet Explorer 7
+, Edge, Safari, Opera) tienen un objeto incorporado en
XMLHttpRequest.

Sintaxis para crear un objeto XMLHttpRequest:

variable = new XMLHttpRequest();

Ejemplo
var xhttp = new XMLHttpRequest();
Intntalo t mismo "
El acceso entre dominios
Por razones de seguridad, los navegadores modernos no permiten el
acceso a travs de dominios.

Esto significa que tanto la pgina web y el archivo XML que intenta
cargar, deben estar ubicados en el mismo servidor.

Los ejemplos de W3Schools todos los archivos XML abiertos situados en

el dominio W3Schools.

Si desea utilizar el ejemplo anterior en una de sus propias pginas web,

los archivos XML que cargue deben estar ubicados en su propio servidor.

Navegadores de Edad (IE5 y IE6)

Las versiones antiguas de Internet Explorer (5/6) utilizan un objeto
ActiveX en lugar del objeto XMLHttpRequest:

variable = new ActiveXObject("Microsoft.XMLHTTP");

Para manejar IE5 e IE6, comprobar si el navegador es compatible con el

objeto XMLHttpRequest, o bien crear un objeto ActiveX:

Ejemplo
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
} else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Intntalo t mismo "

Mtodos objeto XMLHttpRequest

Method Description

new XMLHttpRequest() Creates a new XMLHttpRequest object

abort() Cancels the current request

getAllResponseHeaders() Returns header information

getResponseHeader() Returns specific header information

open(method, url, async, user, psw) Specifies the request

method: the request type GET or POST

url: the file location
async: true (asynchronous) or false (synchronou
user: optional user name
psw: optional password

send() Sends the request to the server

Used for GET requests

send(string) Sends the request to the server.

Used for POST requests

setRequestHeader() Adds a label/value pair to the header to be sent

Propiedades del objeto XMLHttpRequest

Property Description

onreadystatechange Defines a function to be called when the

readyState property changes

readyState Holds the status of the XMLHttpRequest.

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

responseText Returns the response data as a string

responseXML Returns the response data as XML data

status Returns the status-number of a request

200: "OK"
403: "Forbidden"
404: "Not Found"
For a complete list go to the Http Messages
Reference

statusText Returns the status-text (e.g. "OK" or "Not

Found")

AJAX - Enva una solicitud a un

servidor
AnteriorSiguiente

El objeto XMLHttpRequest se usa para intercambiar datos con un

servidor.

Enviar una solicitud a un servidor

Para enviar una peticin a un servidor, se utiliza el open () y send ()
mtodos del objeto XMLHttpRequest:

xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();
Method Description

open(method, url, async) Specifies the type of request

method: the type of request: GET or POST

url: the server (file) location
async: true (asynchronous) or false (synchronous)

send() Sends the request to the server (used for GET)

send(string) Sends the request to the server (used for POST)

GET o POST?
GET es ms simple y ms rpido que la POST, y se puede utilizar en la
mayora de los casos.

Sin embargo, siempre use peticiones POST cuando:

Un archivo de cach no es una opcin (actualizar un archivo o

base de datos en el servidor).
El envo de una gran cantidad de datos al servidor (POST no tiene
limitaciones de tamao).
Envo de la entrada del usuario (que puede contener caracteres
desconocidos), POST es ms robusto y seguro que GET.

Las peticiones GET

Una peticin GET sencilla:

Ejemplo
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
Intntalo t mismo "

En el ejemplo anterior, es posible obtener un resultado almacenado en

cach. Para evitar esto, aade un identificador nico a la URL:

Ejemplo
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
Intntalo t mismo "

Si desea enviar informacin con el mtodo GET, agregar la informacin

en la URL:

Ejemplo
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
Intntalo t mismo "

peticiones POST
Una solicitud POST sencilla:

Ejemplo
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Intntalo t mismo "

Para publicar datos como un formulario HTML, aadir una cabecera HTTP
con setRequestHeader (). Especificar los datos que desea enviar en el
mtodo send ():

Ejemplo
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
xhttp.send("fname=Henry&lname=Ford");
Intntalo t mismo "
Method Description

setRequestHeader(header, value) Adds HTTP headers to the request

header: specifies the header name

value: specifies the header value

La url - un archivo en un servidor

El parmetro url del mtodo open (), es una direccin a un archivo en un
servidor:

xhttp.open("GET", "ajax_test.asp", true);

El archivo puede ser cualquier tipo de archivo, como .txt y .xml o

archivos de secuencias de comandos de servidor como .asp y .php (que
puede llevar a cabo acciones en el servidor antes de enviar la respuesta
de vuelta).

Asncrono - Verdadero o Falso?

solicitudes de servidor deben ser enviados de forma asncrona.

El parmetro asncrono del mtodo open () se debe establecer en true:

xhttp.open("GET", "ajax_test.asp", true);

Mediante el envo de forma asncrona, el cdigo JavaScript no tiene que

esperar a la respuesta del servidor, sino que puede:

ejecutar otros scripts a la espera de respuesta del servidor

hacer frente a la respuesta despus de la respuesta est listo

La propiedad onreadystatechange
Con el objeto XMLHttpRequest se puede definir una funcin a ejecutar
cuando la solicitud recibe una respuesta.

La funcin se define el en el onreadystatechange propiedad del objeto

XMLHttpResponse:

Ejemplo
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Intntalo t mismo "

Usted aprender ms sobre onreadystatechange en un captulo

posterior.

Solicitud sncrona
Para ejecutar una peticin sncrona, cambiar el tercer parmetro en el
mtodo open () en false:

xhttp.open("GET", "ajax_info.txt", false);

A veces asncrono = false se utilizan para la prueba rpida. Tambin

encontrar peticiones sncronas en mayor cdigo JavaScript.

Dado que el cdigo va a esperar a la finalizacin del servidor, no hay

necesidad de una funcin onreadystatechange:

Ejemplo
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Intntalo t mismo "

XMLHttpRequest sncrono (async = false) no se recomienda debido a

que el JavaScript dejar de ejecutarse hasta que la respuesta del
servidor est listo. Si el servidor est ocupado o lento, la aplicacin se
bloquea o se detiene.
XMLHttpRequest sncrono est en proceso de ser retirado de la web
estndar, pero este proceso puede durar muchos aos.

herramientas de desarrollo modernas son animados para advertir sobre

el uso de peticiones sncronas y pueden lanzar una excepcin
InvalidAccessError cuando se produzca.

AJAX - Servidor de respuesta

AnteriorSiguiente

La propiedad onreadystatechange
El readyState propiedad se mantiene el estado de la XMLHttpRequest.

El onreadystatechange propiedad define una funcin que se ejecutar

cuando cambia el readyState.

El estado de la propiedad y la statusText propiedad se mantiene el

estado del objeto XMLHttpRequest.

Property Description

onreadystatechange Defines a function to be called when the readyState property chan

readyState Holds the status of the XMLHttpRequest.

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

status 200: "OK"

403: "Forbidden"
404: "Page not found"
 For a complete list go to the Http Messages Reference

statusText Returns the status-text (e.g. "OK" or "Not Found")

La funcin onreadystatechange se llama cada vez que cambia

readyState.

Cuando readyState es 4 y el estado es de 200, la respuesta est listo:

Ejemplo
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Intntalo t mismo "

El evento se dispara onreadystatechange cuatro veces (1-4), una vez

para cada cambio en la readyState.

Usando una funcin de devolucin de

llamada
Una funcin de devolucin de llamada es una funcin pasa como
parmetro a otra funcin.

Si usted tiene ms de una tarea AJAX en una pgina web, se debe crear
una funcin para ejecutar el objeto XMLHttpRequest, y una llamada de
retorno para cada tarea AJAX.

La llamada a la funcin debe contener la URL y cul es la funcin a

llamar cuando la respuesta est listo.
Ejemplo
loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {

var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}

function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
Intntalo t mismo "

Propiedades de respuesta del servidor

Property Description

responseText get the response data as a string

responseXML get the response data as XML data

Mtodos de respuesta del servidor

Method Description

getResponseHeader() Returns specific header information from the server resourc

getAllResponseHeaders() Returns all the header information from the server resource

La propiedad responseText
El responseText propiedad devuelve la respuesta del servidor como
una cadena JavaScript, y se puede utilizar en consecuencia:

Ejemplo
document.getElementById("demo").innerHTML = xhttp.responseText;
Intntalo t mismo "

La propiedad responseXML
El objeto HttpRequest XML tiene un analizador XML integrado.

El responseXML propiedad devuelve la respuesta del servidor como un

objeto DOM XML.

El uso de esta propiedad se puede analizar la respuesta como un objeto

DOM XML:

Ejemplo
Solicitar el archivo cd_catalog.xml y analizar la respuesta:

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
 }
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
Intntalo t mismo "

Usted va a aprender mucho ms sobre XML DOM DOM en los captulos

de este tutorial.

Los getAllResponseHeaders () Mtodo

El getAllResponseHeaders () mtodo devuelve toda la informacin de
cabecera de la respuesta del servidor.

Ejemplo
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
Intntalo t mismo "

El getResponseHeader () Mtodo
El getResponseHeader () mtodo devuelve la informacin de cabecera
especfica de la respuesta del servidor.

Ejemplo
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Intntalo t mismo "
AJAX Ejemplo XML
AnteriorSiguiente

AJAX se puede utilizar para la comunicacin interactiva con un

archivo XML.

Ejemplo XML AJAX

El siguiente ejemplo demostrar cmo una pgina web puede recuperar
informacin de un archivo XML con AJAX:

Ejemplo
Get CD info

Intntalo t mismo "

ejemplo Explicacin
Cuando un usuario hace clic en el botn "Obtener informacin de CD"
anterior, se ejecuta la funcin loadDoc ().

La funcin loadDoc () crea un objeto XMLHttpRequest, aade la funcin

a ejecutar cuando la respuesta del servidor est listo, y enva la solicitud
al servidor fuera.

Cuando la respuesta del servidor est listo, una tabla HTML se

construye, los nodos (elementos) se extraen del archivo XML, y
finalmente se actualiza el elemento de "demo" con la tabla HTML lleno
de datos XML:

LoadXMLDoc ()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
 }
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +

x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +

x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}

El archivo XML
El archivo XML que se utiliza en el ejemplo anterior se ve as:
" cd_catalog.xml ".

AJAX PHP Ejemplo

AnteriorSiguiente

AJAX se utiliza para crear aplicaciones ms interactivas.

AJAX PHP Ejemplo

El siguiente ejemplo demuestra cmo una pgina web puede
comunicarse con un servidor web, mientras que los tipos de caracteres
de un usuario en un campo de entrada:
Ejemplo
Start typing a name in the input field below:

First name:

Suggestions:

ejemplo Explicacin
En el ejemplo anterior, cuando un usuario escribe un carcter en el
campo de entrada, una funcin llamada se ejecuta "() ShowHint".

La funcin se activa por el evento onkeyup.

Aqu est el cdigo HTML:

Ejemplo
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

document.getElementById("txtHint").innerHTML = this.responseText
;
}
};
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Intntalo t mismo "

Cdigo explicacin:

En primer lugar, comprobar si el campo de entrada est vaca (str.length

== 0). Si es as, borrar el contenido del marcador de posicin txtHint y
salir de la funcin.

Sin embargo, si el campo de entrada no est vaca, haga lo siguiente:

Crear un objeto XMLHttpRequest

Cree la funcin a ejecutar cuando la respuesta del servidor est
listo
Enviar la solicitud fuera a un archivo PHP (gethint.php) en el
servidor
Observe que se agrega gethint.php parmetro q? Q = "+ str
La variable str mantiene el contenido del campo de entrada

El PHP Archivo - "gethint.php"

El archivo PHP comprueba una serie de nombres, y devuelve el nombre
correspondiente (s) al navegador:

<?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";

// get the q parameter from URL

$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""

if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}

// Output "no suggestion" if no hint was found or output correct

values
echo $hint === "" ? "no suggestion" : $hint;
?>
AJAX ASP Ejemplo
AnteriorSiguiente

AJAX se utiliza para crear aplicaciones ms interactivas.

AJAX ASP Ejemplo

El siguiente ejemplo demostrar cmo una pgina web puede
comunicarse con un servidor web, mientras que unos caracteres de tipo
de usuario en un campo de entrada:

Ejemplo
Start typing a name in the input field below:

First name: Suggestions:

ejemplo Explicacin
En el ejemplo anterior, cuando un usuario escribe un carcter en el
campo de entrada, una funcin llamada se ejecuta "() ShowHint".

La funcin se activa por el evento onkeyup.

Aqu est el cdigo HTML:

Ejemplo
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
 var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

document.getElementById("txtHint").innerHTML = this.responseText
;
}
};
xmlhttp.open("GET", "gethint.asp?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>

<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Intntalo t mismo "

Cdigo explicacin:

En primer lugar, comprobar si el campo de entrada est vaca (str.length

== 0). Si es as, borrar el contenido del marcador de posicin txtHint y
salir de la funcin.

Sin embargo, si el campo de entrada no est vaca, haga lo siguiente:

Crear un objeto XMLHttpRequest

Cree la funcin a ejecutar cuando la respuesta del servidor est
listo
Enviar la solicitud fuera a un archivo ASP (gethint.asp) en el
servidor
Observe que se agrega gethint.asp parmetro q? Q = "+ str
La variable str mantiene el contenido del campo de entrada

El archivo ASP - "gethint.asp"

El archivo ASP comprueba una serie de nombres, y devuelve el nombre
correspondiente (s) al navegador:

<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"

'get the q parameter from URL

q=ucase(request.querystring("q"))

'lookup all hints from array if length of q>0

if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
 hint=hint & " , " & a(i)
end if
end if
next
end if

'Output "no suggestion" if no hint were found

'or output the correct values
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>

AJAX Base de Datos de Ejemplo

AnteriorSiguiente

AJAX se puede utilizar para la comunicacin interactiva con una base

de datos.

AJAX Base de Datos de Ejemplo

El siguiente ejemplo demostrar cmo una pgina web puede recuperar
informacin de una base de datos con AJAX:

Ejemplo

Customer info will be listed here...

Intntalo t mismo "

Ejemplo Explicacin - El showCustomer)

Funcin (
Cuando un usuario selecciona un cliente en la lista desplegable
anteriormente, una funcin llamada "showCustomer ()" se ejecuta. La
funcin se activa por el evento "onchange":

showCustomer
function showCustomer(str) {
var xhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

document.getElementById("txtHint").innerHTML = this.responseText
;
}
};
xhttp.open("GET", "getcustomer.asp?q="+str, true);
xhttp.send();
}

La funcin showCustomer () hace lo siguiente:

Comprobar si se selecciona un cliente

Crear un objeto XMLHttpRequest
Cree la funcin a ejecutar cuando la respuesta del servidor est
listo
Enviar la solicitud fuera a un archivo en el servidor
Ntese que un parmetro (q) se aade a la URL (con el contenido
de la lista desplegable)

El servidor de pgina AJAX

La pgina en el servidor llamado por el cdigo JavaScript anterior es un
archivo ASP llamada "getcustomer.asp".

El archivo de servidor podra ser fcilmente reescrito en PHP, o algunos

otros lenguajes de servidor.

Mira un ejemplo correspondiente en PHP .

El cdigo fuente en "getcustomer.asp" ejecuta una consulta a una base
de datos, y devuelve el resultado en una tabla HTML:

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>

XML Aplicaciones
AnteriorSiguiente

En este captulo se demuestra algunas aplicaciones HTML usando

XML, HTTP, DOM y JavaScript.

El documento XML
En este captulo vamos a utilizar el archivo XML
llamado "cd_catalog.xml" .
Datos pantalla XML en una tabla HTML
En este ejemplo se coloca a travs de cada elemento <CD>, y muestra
los valores de la <ARTIST> y el <TITLE> elementos en una tabla HTML:

Ejemplo
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>

<table id="demo"></table>

<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "cd_catalog.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +

x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +

x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
 document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>
Intntalo t mismo "

Para obtener ms informacin sobre el uso de JavaScript y el DOM XML,

ir a DOM Intro.

Visualizar el primer CD en un div elemento

HTML
Este ejemplo utiliza una funcin para mostrar el primer elemento de CD
en un elemento HTML con id = "showCD":

Ejemplo
displayCD(0);

function displayCD(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this, i);
}
};
xmlhttp.open("GET", "cd_catalog.xml", true);
xmlhttp.send();
}

function myFunction(xml, i) {
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("CD");
document.getElementById("showCD").innerHTML =
"Artist: " +

x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"<br>Title: " +

x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"<br>Year: " +
x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
Intntalo t mismo "

Navegar entre los CDs

Para navegar entre los CDs, en el ejemplo anterior, agregue un lado () y
anterior () funcin:

Ejemplo
function next() {
// display the next CD, unless you are on the last CD
if (i < x.length-1) {
i++;
displayCD(i);
}
}

function previous() {
// display the previous CD, unless you are on the first CD
if (i > 0) {
i--;
displayCD(i);
}
}
Intntalo t mismo "

Mostrar informacin del lbum Al hacer

clic en un CD
El ltimo ejemplo muestra cmo se puede mostrar la informacin del
lbum cuando el usuario hace clic en un CD:

Intntelo usted mismo .

JSON - Introduccin
AnteriorSiguiente

JSON: J ava S cript O bject N flotacin.

JSON es una sintaxis para almacenar e intercambiar datos.

JSON es texto, escrito con notacin de objetos JavaScript.

Intercambio de datos
Al intercambiar datos entre un navegador y un servidor, los datos slo
pueden ser texto.

JSON es texto y que puede convertir cualquier objeto JavaScript en

JSON y JSON enviar al servidor.

Tambin podemos convertir cualquier JSON recibido del servidor en

objetos de JavaScript.

De esta manera se puede trabajar con los datos como objetos de

JavaScript, sin anlisis complicado y traducciones.

Envo de datos
Si tiene datos almacenados en un objeto de JavaScript, se puede
convertir el objeto en JSON, y enviarlo a un servidor:

Ejemplo
var myObj = { "name":"John", "age":31, "city":"New York" };
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

Intntalo t mismo "

Usted aprender ms sobre la funcin JSON.stringify () ms adelante en

este tutorial.
Los datos que recibe
Si recibe datos en formato JSON, puede convertirlo en un objeto de
JavaScript:

Ejemplo
var myJSON = '{ "name":"John", "age":31, "city":"New York" }';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
Intntalo t mismo "

Usted aprender ms sobre la funcin JSON.parse () ms adelante en

este tutorial.

Almacenamiento de datos
Al almacenar los datos, los datos tienen que ser un formato
determinado, y con independencia de donde se elige para
almacenarlo, el texto es siempre uno de los formatos legales.

JSON hace posible el almacenamiento de objetos JavaScript como texto.

Ejemplo
el almacenamiento de datos en el almacenamiento local

//Storing data:
myObj = { "name":"John", "age":31, "city":"New York" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

//Retrieving data:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;
Intntalo t mismo "

Qu es JSON?
 JSON significa J ava S cript O bject N flotacin
JSON es un formato de intercambio de datos ligera
JSON es "auto-descripcin" y fcil de entender
JSON es independiente del lenguaje *

*
JSON utiliza la sintaxis de JavaScript, pero el formato JSON es slo
texto.
El texto puede ser ledo y utilizado como un formato de datos por
cualquier lenguaje de programacin.

El formato JSON se especific originalmente por Douglas Crockford .

Por qu utilizar JSON?

Dado que el formato JSON es nico texto, que puede ser fcilmente
enviada desde y hacia un servidor, y se utiliza como un formato de datos
por cualquier lenguaje de programacin.

JavaScript ha construido en funcin de convertir una cadena, escrita en

formato JSON, en objetos de JavaScript nativas:

JSON.parse()

Por lo tanto, si recibe datos de un servidor, en formato JSON, que se

puede utilizar como cualquier otro objeto de JavaScript.

JSON sintaxis
AnteriorSiguiente

La sintaxis JSON es un subconjunto de la sintaxis de JavaScript.

Reglas de sintaxis JSON

sintaxis JSON se deriva de la notacin de sintaxis objeto JavaScript:
 Los datos estn en pares de nombre / valor
Los datos se separan por comas
Las llaves tienen objetos
corchetes tienen matrices

Los datos JSON - Un nombre y un valor

datos JSON se escribe como pares de nombre / valor.

Un par nombre / valor consiste en un nombre de campo (entre comillas

dobles), seguido de dos puntos, seguido de un valor:

Ejemplo
"name":"John"

nombres JSON requieren comillas dobles. nombres de JavaScript no lo

hacen.

JSON - Evala a Objetos de JavaScript

El formato JSON es casi idntica a objetos JavaScript.

En JSON, claves deben ser cadenas, escritos con comillas dobles:

JSON
{ "name":"John" }

En JavaScript, las claves pueden ser cadenas, nmeros o nombres de los

identificadores:

JavaScript
{ name:"John" }
Los valores JSON
En JSON, los valores deben ser uno de los siguientes tipos de datos:

una cuerda
un nmero
un objeto (objeto JSON)
una matriz
un valor lgico
nulo

En JavaScript valores pueden ser todo lo anterior, adems de cualquier

otra expresin de JavaScript vlida, incluyendo:

Una funcin
una cita
indefinido

En JSON, valores de cadena deben escribirse entre comillas dobles:

JSON
{ "name":"John" }

En JavaScript, puede escribir los valores de cadena con dobles o comillas

simples:

JavaScript
{ name:'John' }

JSON utiliza JavaScript Sintaxis

Debido a que la sintaxis JSON se deriva de notacin de objetos
JavaScript, se necesita muy poco software adicional para trabajar con
JSON en JavaScript.

Con JavaScript se puede crear un objeto y asignar datos a la misma, as:

Ejemplo
var person = { "name":"John", "age":31, "city":"New York" };
Se puede acceder a un objeto JavaScript como esto:

Ejemplo
// returns John
person.name;
Intntalo t mismo "

Tambin se puede acceder de esta manera:

Ejemplo
// returns John
person["name"];
Intntalo t mismo "

Los datos pueden ser modificados de esta manera:

Ejemplo
person.name = "Gilbert";
Intntalo t mismo "

Tambin se puede modificar la siguiente manera:

Ejemplo
person["name"] = "Gilbert";
Intntalo t mismo "

Usted aprender cmo convertir objetos JavaScript en JSON ms

adelante en este tutorial.

Las matrices de JavaScript como JSON

De la misma forma los objetos de JavaScript pueden ser utilizados como
matrices JSON, JavaScript tambin puede ser utilizado como JSON.

Va a aprender ms acerca de las matrices como JSON ms adelante en

este tutorial.

Los archivos JSON

 El tipo de archivo para archivos JSON es ".json"
El tipo MIME para el texto JSON es "application / json"

JSON vs XML
AnteriorSiguiente

Tanto JSON y XML se pueden utilizar para recibir datos de un servidor

web.

Los siguientes ejemplos JSON y XML ambos define una empleados

objeto, con una matriz de 3 empleados:

Ejemplo JSON
{"employees":[
{ "firstName":"John", "lastName":"Doe" },
{ "firstName":"Anna", "lastName":"Smith" },
{ "firstName":"Peter", "lastName":"Jones" }
]}

Ejemplo XML
<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones</lastName>
</employee>
</employees>

JSON es como XML Debido

Tanto JSON y XML son "auto describir" (legible)
Tanto JSON y XML son jerrquicas (valores dentro de los valores)
 Tanto JSON y XML pueden ser analizados y utilizados por una gran
cantidad de lenguajes de programacin
Tanto JSON y XML se pueden recuperar con un XMLHttpRequest

A diferencia de JSON es XML Debido

JSON no utiliza etiqueta final
JSON es ms corto
JSON es ms rpido para leer y escribir
JSON puede utilizar matrices

La mayor diferencia es:

XML tiene que ser analizado con un analizador XML. JSON se puede
analizar mediante una funcin de JavaScript estndar.

Por qu es mejor que el JSON XML

XML es mucho ms difcil de analizar que JSON.
JSON se analiza en un objeto JavaScript lista para su uso.

Para aplicaciones AJAX, JSON es ms rpido y ms fcil que XML:

El uso de XML

Fetch un documento XML

Utilizar el DOM XML para recorrer el documento
Los valores de extracto y se guardan en las variables

El uso de JSON

Obtiene una cadena JSON

JSON.parse la cadena JSON

JSON tipos de datos

AnteriorSiguiente
Tipos de datos vlidos
En JSON, los valores deben ser uno de los siguientes tipos de datos:

una cuerda
un nmero
un objeto (objeto JSON)
una matriz
un valor lgico
nulo

JSON valores no pueden ser uno de los siguientes tipos de datos:

Una funcin
una cita
indefinido

JSON Cuerdas
Las cadenas en JSON deben escribirse entre comillas dobles.

Ejemplo
{ "name":"John" }

nmeros JSON
Los nmeros en JSON deben ser un nmero entero o un punto flotante.

Ejemplo
{ "age":30 }

Objetos JSON
Los valores en JSON pueden ser objetos.
Ejemplo
{
"employee":{ "name":"John", "age":30, "city":"New York" }
}

Objetos como valores en JSON deben seguir las mismas reglas que los
objetos JSON.

JSON matrices
Values in JSON can be arrays.

Ejemplo
{
"employees":[ "John", "Anna", "Peter" ]
}

JSON Booleans
Values in JSON can be true/false.

Ejemplo
{ "sale":true }

JSON null
Values in JSON can be null.

Ejemplo
{ "middlename":null }
JSON objetos
AnteriorSiguiente

objeto de sintaxis
Ejemplo
{ "name":"John", "age":30, "car":null }

objetos JSON estn rodeadas por llaves {}.

objetos JSON estn escritos en pares clave / valor.

Las claves deben ser cadenas, y los valores deben ser un tipo de datos
JSON vlido (cadena, nmero, objeto, matriz booleana o null).

Claves y los valores estn separados por dos puntos.

Cada par clave / valor est separado por una coma.

Acceso a valores de objetos

Se puede acceder a los valores de los objetos mediante el uso de la
notacin de punto (.):

Ejemplo
myObj = { "name":"John", "age":30, "car":null };
x = myObj.name;

Intntalo t mismo "

Tambin puede acceder a los valores de los objetos mediante el uso de

la notacin de soporte ([]):

Ejemplo
myObj = { "name":"John", "age":30, "car":null };
x = myObj["name"];
Intntalo t mismo "

Looping un Objeto
Puede bucle a travs de las propiedades del objeto mediante el uso de la
para-en bucle:

Ejemplo
myObj = { "name":"John", "age":30, "car":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += x;
}
Intntalo t mismo "

En un para-en bucle, utilice la notacin soporte de acceso a la

propiedad valores :

Ejemplo
myObj = { "name":"John", "age":30, "car":null };
for (x in myObj) {
document.getElementById("demo").innerHTML += myObj[x];
}
Intntalo t mismo "

Anidada JSON objetos

Los valores en un objeto JSON puede ser otro objeto JSON.

Ejemplo
myObj = {
"name":"John",
"age":30,
"cars": {
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
 }
}

Se puede acceder a objetos JSON anidadas mediante el uso de la

notacin de puntos o notacin de corchetes:

Ejemplo
x = myObj.cars.car2;
//or:
x = myObj.cars["car2"];
Intntalo t mismo "

modificar Valores
Puede utilizar la notacin de puntos para modificar cualquier valor en un
objeto JSON:

Ejemplo
myObj.cars.car2 = "Mercedes";

Intntalo t mismo "

Tambin puede utilizar la notacin de corchetes para modificar un valor

en un objeto JSON:

Ejemplo
myObj.cars["car2"] = "Mercedes";
Intntalo t mismo "

Eliminar propiedades de los objetos

Usar la palabra clave de borrar para eliminar las propiedades de un
objeto JSON:

Ejemplo
delete myObj.cars.car2;
Intntalo t mismo "
JSON matrices
AnteriorSiguiente

Matrices como objetos JSON

Ejemplo
[ "Ford", "BMW", "Fiat" ]

Las matrices en JSON son casi las mismas que las matrices de
JavaScript.

En JSON, valores de la matriz deben ser de tipo de cadena, nmero,

objeto, matriz booleana o nula .

En JavaScript, valores de la matriz puede ser todo lo anterior, adems

de cualquier otra expresin de JavaScript vlida, incluyendo funciones,
fechas y definido.

Las matrices en JSON objetos

Las matrices pueden ser valores de una propiedad de objeto:

Ejemplo
{
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}

Acceso a valores de matriz

Se accede a los valores de la matriz utilizando el nmero de ndice:

Ejemplo
x = myObj.cars[0];

Intntalo t mismo "

Bucle a travs de una matriz

Se puede acceder a los valores de la matriz mediante el uso de un bucle
for-in:

Ejemplo
for (i in myObj.cars) {
x += myObj.cars[i];
}
Intntalo t mismo "

O puede utilizar un bucle for:

Ejemplo
for (i = 0; i < myObj.cars.length; i++) {
x += myObj.cars[i];
}
Intntalo t mismo "

Las matrices anidadas en JSON objetos

Valores en una matriz tambin puede ser otra matriz, o incluso otro
objeto JSON:

Ejemplo
myObj = {
"name":"John",
"age":30,
"cars": [

{ "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },

{ "name":"BMW", "models":[ "320", "X3", "X5" ] },
{ "name":"Fiat", "models":[ "500", "Panda" ] }
 ]
}

Para acceder a las matrices dentro de las matrices, utilizar un para-en

bucle para cada matriz:

Ejemplo
for (i in myObj.cars) {
x += "<h1>" + myObj.cars[i].name + "</h1>";
for (j in myObj.cars[i].models) {
x += myObj.cars[i].models[j];
}
}

Intntalo t mismo "

Modificar valores de matriz

Utilice el nmero de ndice de modificar una matriz:

Ejemplo
myObj.cars[1] = "Mercedes";
Intntalo t mismo "

Eliminar elementos de matriz

Usar la palabra clave de borrar para eliminar elementos de un array:

Ejemplo
delete myObj.cars[1];
Intntalo t mismo "
JSON .parse ()
AnteriorSiguiente

Un uso comn de JSON es el intercambio de datos a / desde un

servidor web.

Cuando se reciben datos desde un servidor web, los datos siempre es

una cadena.

Analizar los datos con JSON.parse (), y los datos se convierte en un

objeto de JavaScript.

Ejemplo - Analizar JSON

Imaginemos que hemos recibido este texto desde un servidor web:

'{ "name":"John", "age":30, "city":"New York"}'

Utilice la funcin JavaScript JSON.parse () para convertir texto en un

objeto de JavaScript:

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New

York"}');

Asegrese de que el texto est escrito en formato JSON, o de lo

contrario obtendr un error de sintaxis.

Utilice el objeto JavaScript en su pgina:

Ejemplo
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = obj.name + ", " +
obj.age;
</script>
Intntalo t mismo "
JSON desde el servidor
Puede solicitar JSON desde el servidor mediante el uso de una peticin
AJAX

Siempre y cuando la respuesta del servidor est escrito en formato

JSON, se puede analizar la cadena en un objeto JavaScript.

Ejemplo
Utilice el XMLHttpRequest para obtener datos del servidor:

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
Intntalo t mismo "

Echar un vistazo a json_demo.txt

Matriz como JSON

Cuando se utiliza el JSON.parse () en un JSON derivado de una matriz,
el mtodo devolver una matriz de JavaScript, en lugar de un objeto de
JavaScript.

Ejemplo
El JSON devuelto desde el servidor es una matriz:

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[0];
}
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();
Intntalo t mismo "

Echar un vistazo a json_demo_array.txt

excepciones
Fechas de anlisis
Fecha objetos no estn permitidos en JSON.

Si es necesario incluir una fecha, escribirlo como una cadena.

Puede convertir de nuevo en un objeto ms adelante:

Ejemplo
Convertir una cadena en una fecha:

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New

York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

document.getElementById("demo").innerHTML = obj.name + ", " +

obj.birth;
Intntalo t mismo "

O bien, puede usar el segundo parmetro, de la funcin JSON.parse (),

llamado resucitador .

El resucitador parmetro es una funcin que comprueba cada propiedad,

antes de devolver el valor.

Ejemplo
Convertir una cadena en una fecha, mediante el resucitador funcin:

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New

York"}';
var obj = JSON.parse(text, function (key, value) {
if (key == "birth") {
return new Date(value);
} else {
 return value;
}});

document.getElementById("demo").innerHTML = obj.name + ", " +

obj.birth;
Intntalo t mismo "

Funciones de anlisis
Las funciones no estn permitidos en JSON.

Si es necesario incluir una funcin, debe escribirse como una cadena.

Puede convertir de nuevo en una funcin ms adelante:

Ejemplo
Convertir una cadena en una funcin:

var text = '{ "name":"John", "age":"function () {return 30;}",

"city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

document.getElementById("demo").innerHTML = obj.name + ",

" + obj.age();
Intntalo t mismo "

Se debe evitar el uso de funciones en JSON, las funciones perdern su

alcance, y que tendra que utilizar eval () para convertir de nuevo en
funciones.

Soporte del navegador

La funcin JSON.parse () se incluye en todos los principales navegadores
y en el ltimo estndar ECMAScript (JavaScript):

Web Browsers Support

Firefox 3.5
Internet Explorer 8
Chrome
 Opera 10
Safari 4

Para los navegadores ms antiguos, una biblioteca JavaScript est

disponible enhttps://github.com/douglascrockford/JSON-js .

JSON .stringify ()
AnteriorSiguiente

Un uso comn de JSON es el intercambio de datos a / desde un

servidor web.

Al enviar datos a un servidor web, los datos tienen que ser una
cadena.

Convertir un objeto de JavaScript a una cadena con JSON.stringify ().

Stringify un objeto JavaScript

Imaginemos que tenemos este objeto en JavaScript:

var obj = { "name":"John", "age":30, "city":"New York"};

Utilice la funcin de JavaScript JSON.stringify () para convertirlo en una

cadena.

var myJSON = JSON.stringify(obj);

El resultado ser una cadena siguiendo la notacin JSON.

myJSON es ahora una cadena, y listo para ser enviado a un servidor:

Ejemplo
var obj = { "name":"John", "age":30, "city":"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
Intntalo t mismo "
Usted aprender cmo enviar JSON para el servidor en el siguiente
captulo.

Stringify una matriz de JavaScript

Tambin es posible stringify matrices de JavaScript:

Imaginemos que tenemos esta matriz en JavaScript:

var arr = [ "John", "Peter", "Sally", "Jane" ];

Utilice la funcin de JavaScript JSON.stringify () para convertirlo en una

cadena.

var myJSON = JSON.stringify(arr);

El resultado ser una cadena siguiendo la notacin JSON.

myJSON es ahora una cadena, y listo para ser enviado a un servidor:

Ejemplo
var arr = [ "John", "Peter", "Sally", "Jane" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;
Intntalo t mismo "

Usted aprender cmo enviar JSON para el servidor en el siguiente

captulo.

excepciones
Fechas stringify
En JSON, los objetos de fecha no estn permitidos. La funcin
JSON.stringify () convertir cualquier fecha en cadenas.

Ejemplo
var obj = { "name":"John", "today":new Date(), "city":"New
York"};
var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;
Intntalo t mismo "

Puede convertir la cadena de nuevo en un objeto de fecha en el

receptor.

Funciones stringify
En JSON, funciones no estn permitidos como valores de objeto.

La funcin JSON.stringify () eliminar cualquier funcin de un objeto de

JavaScript, tanto la clave y el valor:

Ejemplo
var obj = { "name":"John", "age":function ()
{return 30;}, "city":"New York"};
var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;
Intntalo t mismo "

Esto puede ser omitido si convierte sus funciones en cadenas antes de

ejecutar la funcin JSON.stringify ().

Ejemplo
var obj = { "name":"John", "age":function ()
{return 30;}, "city":"New York"};
obj.age = obj.age.toString();
var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;
Intntalo t mismo "

Se debe evitar el uso de funciones en JSON, las funciones perdern su

alcance, y que tendra que utilizar eval () para convertir de nuevo en
funciones.
Soporte del navegador
La funcin JSON.stringify () se incluye en todos los principales
navegadores y en el ltimo estndar ECMAScript (JavaScript):

Web Browsers Support

Firefox 3.5
Internet Explorer 8
Chrome
Opera 10
Safari 4

JSON PHP
AnteriorSiguiente

Un uso comn de JSON es para leer datos desde un servidor web, y

mostrar los datos en una pgina web.

Este captulo le ensear cmo intercambiar datos JSON entre el

cliente y el servidor PHP.

El archivo PHP
PHP tiene algunas funciones integradas para manejar JSON.

Los objetos en PHP se pueden convertir en JSON usando la funcin de

PHP json_encode () :

archivo PHP
<?php
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New York";

$myJSON = json_encode($myObj);
echo $myJSON;
?>
Mostrar archivo PHP

El JavaScript de cliente
Aqu es un cdigo JavaScript en el cliente mediante una llamada AJAX
para solicitar el archivo PHP en el ejemplo anterior:

Ejemplo
Utilice JSON.parse () para convertir el resultado en un objeto de
JavaScript:

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "demo_file.php", true);
xmlhttp.send();
Intntalo t mismo "

matriz PHP
Las matrices en PHP tambin se convertirn en JSON al utilizar la
funcin PHP json_encode () :

archivo PHP
<?php
$myArr = array("John", "Mary", "Peter", "Sally");

$myJSON = json_encode($myArr);

echo $myJSON;
?>
Mostrar archivo PHP
El JavaScript de cliente
Aqu es un cdigo JavaScript en el cliente mediante una llamada AJAX
para solicitar el archivo PHP desde la matriz de ejemplo anterior:

Ejemplo
Utilice JSON.parse () para convertir el resultado en una matriz de
JavaScript:

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj[2];
}
};
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();
Intntalo t mismo "

Base de datos de PHP

PHP es un lenguaje de programacin del lado del servidor, y se debe
utilizar para las operaciones que slo pueden ser realizadas por un
servidor, al igual que el acceso a una base de datos.

Imagine que tiene una base de datos en el servidor, que contiene los
clientes, productos y proveedores.

Quieres hacer una solicitud al servidor en el que solicita los primeros 10

registros de la tabla "clientes":

Ejemplo
Utilice JSON.stringify () para convertir el objeto JavaScript en JSON:

obj = { "table":"customers", "limit":10 };

dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.responseText;
 }
};
xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam, true);
xmlhttp.send();
Intntalo t mismo "

Ejemplo explic:
Definir un objeto que contiene una propiedad de mesa y una
propiedad lmite.
Convertir el objeto en una cadena JSON.
Enviar una solicitud al archivo PHP, con la cadena JSON como
parmetro.
Espere hasta que la solicitud devuelve con el resultado (como
JSON)
Mostrar el resultado recibido del archivo PHP.

Echar un vistazo al archivo PHP:

archivo PHP
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn
= new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->table." LIMIT
".$obj->limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>

PHP File explic:

Convertir la solicitud en objeto, usando la funcin de
PHP json_decode () .
Acceder a la base de datos, y llenar una matriz con los datos
solicitados.
Aadir la matriz a un objeto, y devolver el objeto como JSON
usando el json_encode () funcin.

A travs del bucle de Resultado

Convertir el resultado recibido del archivo PHP en un objeto JavaScript, o
en este caso, una matriz de JavaScript:

Ejemplo
Utilice JSON.parse () para convertir el JSON en un objeto de JavaScript:

...
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
...
Intntalo t mismo "

PHP method = post

Al enviar datos al servidor, a menudo es mejor utilizar el mtodo HTTP
POST.

Para enviar peticiones AJAX utilizando el mtodo POST, especificar el

mtodo, y la cabecera correcta.

Los datos enviados al servidor deben ahora ser un argumento para el

mtodo .send ():

Ejemplo
obj = { "table":"customers", "limit":10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-
form-urlencoded");
xmlhttp.send("x=" + dbParam);
Intntalo t mismo "

La nica diferencia en el archivo PHP es el mtodo para obtener los

datos transferidos.

archivo PHP
Usar $ _POST en lugar de $ _GET:

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["x"], false);

$conn
= new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->table." LIMIT
".$obj->limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>

JSON HTML
AnteriorNext

JSON can very easily be translated into JavaScript.

JavaScript puede ser utilizado para hacer HTML en sus pginas web.

HTML Table
Hacer una tabla HTML con los datos recibidos como JSON:
Ejemplo
obj = { "table":"customers", "limit":20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" + myObj[x].name + "</td></tr>";
}
txt += "</table>"
document.getElementById("demo").innerHTML = txt;
}
}
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-
form-urlencoded");
xmlhttp.send("x=" + dbParam);
Intntalo t mismo "

Dynamic HTML Table

Hacer la tabla HTML basado en el valor de un men
desplegable:

Ejemplo
<select id="myselect" onchange="change_myselect(this.value)">
<option value="">Choose an option:</option>
<option value="customers">Customers</option>
<option value="products">Products</option>
<option value="suppliers">Suppliers</option>
</select>

<script>
function change_myselect(sel) {
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { "table":sel, "limit":20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
 txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" +
myObj[x].name + "</td></tr>";
}
txt += "</table>"
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-
form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
</script>
Intntalo t mismo "

HTML Lista Desplegable

Crea un HTML lista desplegable con los datos recibidos como JSON:

Ejemplo
obj = { "table":"customers", "limit":20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<select>"
for (x in myObj) {
txt += "<option>" + myObj[x].name;
}
txt += "</select>"
document.getElementById("demo").innerHTML = txt;
}
}
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-
form-urlencoded");
xmlhttp.send("x=" + dbParam);
Intntalo t mismo "
JSONP
AnteriorSiguiente

JSONP es un mtodo para enviar datos JSON sin tener que

preocuparse acerca de los problemas entre dominios.

JSONP no utiliza el objeto XMLHttpRequest.

JSONP utiliza la etiqueta <script> en su lugar.

JSONP Intro
JSONP significa JSON con el acolchado.

Solicitar un archivo de otro dominio puede causar problemas, debido a la

poltica de varios dominios.

La solicitud de una externa de la escritura de otro dominio no tiene este

problema.

JSONP utiliza esta ventaja, y archivos de solicitud de uso de la etiqueta

del guin en lugar del objeto XMLHttpRequest.

<script src="demo_jsonp.php">

El servidor de archivos
El archivo en el servidor justifica el resultado dentro de una llamada de
funcin:

Ejemplo
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';

echo "myFunc(".$myJSON.");";
?>
Mostrar archivo PHP

El resultado devuelve una llamada a una funcin llamada "myFunc" con

los datos JSON como un parmetro.
Asegrese de que la funcin existe en el cliente.

La funcin JavaScript
La funcin denominada "myFunc" se encuentra en el cliente, y listo para
manejar los datos JSON:

Ejemplo
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
Intntalo t mismo "

La creacin de una etiqueta de script

dinmico
El ejemplo anterior se ejecutar la funcin "myFunc" cuando la pgina se
carga, en funcin de dnde se pone la etiqueta de script, que no es muy
satisfactorio.

La etiqueta de script slo se debe crear cuando sea necesario:

Ejemplo
Crear e insertar la etiqueta <script> cuando se hace clic en un botn:

function clickButton() {
var s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
Intntalo t mismo "

Resultado dinmica JSONP

Los ejemplos anteriores son todava muy esttica.
Hacer que el ejemplo dinmico mediante el envo de JSON para el
archivo php, y dejar que el archivo PHP devuelve un objeto JSON con
base en la informacin que recibe.

archivo PHP
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn
= new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT
".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo "myFunc(".json_encode($outp).")";
?>

PHP File explic:

Convertir la solicitud en objeto, usando la funcin de
PHP json_decode () .
Acceder a la base de datos, y llenar una matriz con los datos
solicitados.
Aadir la matriz a un objeto.
Convertir la matriz en JSON usando el json_encode () funcin.
Envolver "myFunc ()" alrededor del objeto de devolucin.

Ejemplo JavaScript
La funcin "myFunc" se llama desde el archivo php:

function clickButton() {
var obj, s
obj = { "table":"products", "limit":10 };
s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
}
function myFunc(myObj) {
var x, txt = "";
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
Intntalo t mismo "

Funcin de devolucin de llamada

Cuando se tiene ningn control sobre el archivo del servidor, cmo
obtener el archivo del servidor para llamar a la funcin correcta?

A veces el archivo del servidor ofrece una funcin de devolucin de

llamada como parmetro:

Ejemplo
El archivo PHP llamar a la funcin se pasa como un parmetro de
devolucin de llamada:

function clickButton() {
var s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);
}

Intntalo t mismo "