JavaScript

Es un lenguaje de programacin interpretado, dialecto del estndar ECMAScript. Se

define como orientado a objetos, basado en prototipos, imperativo, dbilmente tipado y
dinmico.
Se utiliza principalmente en su forma del lado del cliente (client-side), implementado
como parte de un navegador web permitiendo mejoras en la interfaz de
usuario y pginas web dinmicas aunque existe una forma de JavaScript del lado del
servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web,
por ejemplo en documentos PDF, aplicaciones de escritorio
(mayoritariamente widgets) es tambin significativo.
JavaScript se dise con una sintaxis similar al C, aunque adopta nombres y
convenciones del lenguaje de programacin Java. Sin embargo Java y JavaScript no
estn relacionados y tienen semnticas y propsitos diferentes.
Todos los navegadores modernos interpretan el cdigo JavaScript integrado en las
pginas web. Para interactuar con una pgina web se provee al lenguaje JavaScript de
una implementacin del Document Object Model (DOM).
Tradicionalmente se vena utilizando en pginas web HTML para realizar operaciones
y nicamente en el marco de la aplicacin cliente, sin acceso a funciones del servidor.
Actualmente es ampliamente utilizado para enviar y recibir informacin del servidor
junto con ayuda de otras tecnologas como AJAX. JavaScript se interpreta en
el agente de usuario al mismo tiempo que las sentencias van descargndose junto con
el cdigo HTML.
Desde el lanzamiento en junio de 1997 del estndar ECMAScript 1, han existido las
versiones 2, 3 y 5, que es la ms usada actualmente (la 4 se abandon5 ). En junio de
2015 se cerr y public la versin ECMAScript 6.

Variables

Aunque todas las variables de JavaScript se crean de la misma forma (mediante la

palabra reservada var), la forma en la que se les asigna un valor depende del tipo de
valor que se quiere almacenar (nmeros, textos, etc.)
Numricas
Se utilizan para almacenar valores numricos enteros (llamados integer en ingls) o
decimales (llamados float en ingls). En este caso, el valor se asigna indicando
directamente el nmero entero o decimal. Los nmeros decimales utilizan el carcter .
(punto) en vez de , (coma) para separar la parte entera y la parte decimal.

var iva = 16; // variable tipo entero

var total = 234.65; // variable tipo decimal

Cadenas de texto

Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para asignar el
valor a la variable, se encierra el valor entre comillas dobles o simples, para delimitar
su comienzo y su final

var mensaje = "Bienvenido a nuestro sitio web";

var nombreProducto = 'Producto ABC';
var letraSeleccionada = 'c';

En ocasiones, el texto que se almacena en las variables no es tan sencillo. Si por

ejemplo el propio texto contiene comillas simples o dobles, la estrategia que se sigue
es la de encerrar el texto con las comillas (simples o dobles) que no utilice el texto:
/* El contenido de texto1 tiene comillas simples, por lo que
se encierra con comillas dobles */
var texto1 = "Una frase con 'comillas simples' dentro";

/* El contenido de texto2 tiene comillas dobles, por lo que

se encierra con comillas simples */
var texto2 = 'Una frase con "comillas dobles" dentro';

Mtodos de JavaScript

En la siguiente tabla se muestran los mtodos de JavaScript.

Objeto
Mtodo Descripcin
JavaScript

anchor Pone un delimitador HTML que tiene un atributo String

(Mtodo) NAME alrededor del texto.

apply (Mtodo) Aplica un mtodo de un objeto y sustituye otro objeto Function

por el objeto actual.

atEnd (Mtodo) Devuelve un valor de tipo Boolean que indica si el Enumerato

enumerador est al final de la coleccin. r

big (Mtodo) Pone etiquetas HTML <BIG> alrededor del texto. String

bind (Mtodo) Crea una funcin que est asociada a un objeto Function
especificado y que puede tener parmetros iniciales
concretos.

blink (Mtodo) Pone etiquetas HTML <BLINK> alrededor del texto. String

bold (Mtodo) Pone etiquetas HTML <B> alrededor del texto. String

call (Mtodo) Llama a un mtodo de un objeto y sustituye el objeto Function

actual por otro.

charAt (Mtodo) Devuelve el carcter que se encuentra en el ndice String

especificado.

charCodeAt Devuelve la codificacin Unicode del carcter que se String

(Mtodo) especifique.

compile Compila una expresin regular y la convierte en un Regular

(Mtodo) formato interno. Expressio
n

concat (Mtodo, Devuelve una matriz nueva que se compone de una Array
Array) combinacin de dos matrices.
concat (Mtodo, Devuelve un objeto String que contiene la String
String) concatenacin de las dos cadenas proporcionadas.

dimensions Devuelve el nmero de dimensiones de un objeto VBArray

(Mtodo) VBArray.

every (Mtodo) Comprueba si una funcin de devolucin de llamada Array

definida devuelve true para todos los elementos de
una matriz.

exec (Mtodo) Ejecuta una bsqueda en una cadena especificada. Regular

Expressio
n

filter (Mtodo) Llama a una funcin de devolucin de llamada Array

definida para cada elemento de una matriz y devuelve
una matriz de aquellos valores para los que esa
funcin devuelve true.

fixed (Mtodo) Pone etiquetas HTML <TT> alrededor del texto. String

fontcolor Pone etiquetas HTML <FONT> con un atributo String

(Mtodo) COLOR alrededor del texto.

fontsize Pone etiquetas HTML <FONT> con un atributo SIZE String

(Mtodo) alrededor del texto.

forEach Llama a una funcin de devolucin de llamada Array

(Mtodo) definida para cada elemento de una matriz.

getDate Devuelve el valor de da del mes usando la hora local. date

(Mtodo)

getDay Devuelve el valor de da de la semana usando la hora date

(Mtodo) local.

getFullYear Devuelve el valor de ao usando la hora local. date

(Mtodo)

getHours Devuelve el valor de horas usando la hora local. date

(Mtodo)

getItem Devuelve el elemento que se encuentra en la VBArray

(Mtodo) ubicacin especificada.

getMilliseconds Devuelve el valor de milisegundos usando la hora date

(Mtodo) local.

getMinutes Devuelve el valor de minutos usando la hora local. date

(Mtodo)
getMonth Devuelve el valor de mes usando la hora local. date
(Mtodo)

getSeconds Devuelve el valor de segundos usando la hora local. date

(Mtodo)

getTime Devuelve el valor de tiempo en un objeto Date en date

(Mtodo) milisegundos desde la medianoche del 1 de enero de
1970.

getTimezoneOff Devuelve la diferencia en minutos entre la hora del date

set (Mtodo) equipo host y la hora universal coordinada (UTC).

getUTCDate Devuelve el valor de da del mes usando la hora UTC. date

(Mtodo)

getUTCDay Devuelve el valor de da de la semana usando la hora date

(Mtodo) UTC.

getUTCFullYear Devuelve el valor de ao usando la hora UTC. date

(Mtodo)

getUTCHours Devuelve el valor de horas usando la hora UTC. date

(Mtodo)

getUTCMillisec Devuelve el valor de milisegundos usando la hora date

onds (Mtodo) UTC.

getUTCMinutes Devuelve el valor de minutos usando la hora UTC. date

(Mtodo)

getUTCMonth Devuelve el valor de mes usando la hora UTC. date

(Mtodo)

getUTCSecond Devuelve el valor de segundos usando la hora UTC. date

s (Mtodo)

getVarDate Devuelve el valor de VT_DATE de un objeto Date. date

(Mtodo)

getYear Devuelve el valor de ao. date

(Mtodo)

hasOwnPropert Devuelve un valor Boolean que indica si un objeto Multiple

y (Mtodo) tiene una propiedad con el nombre especificado.

indexOf Devuelve el ndice de la primera aparicin de un valor Array

(Mtodo, Array) de una matriz.

indexOf Devuelve la posicin del carcter donde tiene lugar la String

(Mtodo, String) primera repeticin de una subcadena dentro de un
objeto String.

isPrototypeOf Devuelve un valor Boolean que indica si un objeto Multiple

(Mtodo) existe en la cadena de prototipos de otro objeto.

italics (Mtodo) Pone etiquetas HTML <I> alrededor del texto. String

item (Mtodo) Devuelve el elemento actual de la coleccin. Enumerato

r

join (Mtodo) Devuelve un objeto String formado por todos los Array
elementos de una matriz concatenados entre s.

lastIndexOf Devuelve el ndice de la ltima aparicin de un valor Array

(Mtodo, Array) especificado de una matriz.

lastIndexOf Devuelve la ltima repeticin de una subcadena String

(Mtodo, String) dentro de un objetoString.

lbound Devuelve el menor valor de ndice que se utiliza en la VBArray

(Mtodo) dimensin especificada de un objeto VBArray.

link (Mtodo) Pone un delimitador HTML que tiene un atributo String

HREF alrededor del texto.

localeCompare Devuelve un valor que indica si dos cadenas son String

(Mtodo) equivalentes en la configuracin regional actual.

map (Mtodo) Llama a una funcin de devolucin de llamada Array

definida para cada elemento de una matriz y devuelve
una matriz que contiene los resultados.

match (Mtodo) Devuelve, como matriz, los resultados de una String

bsqueda en una cadena utilizando el objeto Regular
Expression proporcionado.

moveFirst Restablece el elemento actual de la coleccin en el Enumerato

(Mtodo) primer elemento. r

moveNext Desplaza el elemento actual al siguiente elemento de Enumerato

(Mtodo) la coleccin. r

pop (Mtodo) Quita el ltimo elemento de una matriz y lo devuelve. Array

propertyIsEnum Devuelve un valor Boolean que indica si una Multiple

erable (Mtodo) propiedad especificada forma parte de un objeto y si
se puede enumerar.

push (Mtodo) Anexa nuevos elementos a una matriz y devuelve la Array

 nueva longitud de la matriz.

reduce Acumula un solo resultado llamando a una funcin de Array

(Mtodo) devolucin de llamada definida para todos los
elementos de una matriz. El valor devuelto de la
funcin de devolucin de llamada es el resultado
acumulado, y se proporciona como argumento en la
siguiente llamada a dicha funcin.

reduceRight Acumula un solo resultado llamando a una funcin de Array

(Mtodo) devolucin de llamada definida para todos los
elementos de una matriz, en orden descendente. El
valor devuelto de la funcin de devolucin de llamada
es el resultado acumulado, y se proporciona como
argumento en la siguiente llamada a dicha funcin.

replace Devuelve una copia de una cadena con texto String

(Mtodo) reemplazado utilizando una expresin regular.

reverse Devuelve un objeto Array con los elementos Array

(Mtodo) invertidos.

search Devuelve la posicin de la primera coincidencia de String

(Mtodo) subcadena en una bsqueda de expresin regular.

setDate Establece el da del mes numrico usando la hora date

(Mtodo) local.

setFullYear Establece el valor de ao usando la hora local. date

(Mtodo)

setHours Establece el valor de horas usando la hora local. date

(Mtodo)

setMilliseconds Establece el valor de milisegundos usando la hora date

(Mtodo) local.

setMinutes Establece el valor de minutos usando la hora local. date

(Mtodo)

setMonth Establece el valor de mes usando la hora local. date

(Mtodo)

setSeconds Establece el valor de segundos usando la hora local. date

(Mtodo)

setTime Establece el valor de fecha y hora en el objeto Date. date

(Mtodo)

setUTCDate Establece el da numrico del mes usando la hora date

(Mtodo) UTC.

setUTCFullYear Establece el valor de ao usando la hora UTC. date

(Mtodo)

setUTCHours Establece el valor de horas usando la hora UTC. date

(Mtodo)

setUTCMillisec Establece el valor de milisegundos usando la hora date

onds (Mtodo) UTC.

setUTCMinutes Establece el valor de minutos usando la hora UTC. date

(Mtodo)

setUTCMonth Establece el valor de mes usando la hora UTC. date

(Mtodo)

setUTCSecond Establece el valor de segundos usando la hora UTC. date

s (Mtodo)

setYear Establece el valor de ao usando la hora local. date

(Mtodo)

shift (Mtodo) Quita el primer elemento de una matriz y lo devuelve. Array

slice (Mtodo, Devuelve una seccin de una matriz. Array

Array)

slice (Mtodo, Devuelve una seccin de una cadena. String

String)

small (Mtodo) Pone etiquetas HTML <SMALL> alrededor del texto. String

some (Mtodo) Comprueba si una funcin de devolucin de llamada Array

definida devuelvetrue para cualquier elemento de una
matriz.

sort (Mtodo) Devuelve un objeto Array con los elementos Array

ordenados.

splice (Mtodo) Quita elementos de una matriz, inserta nuevos Array

elementos en su lugar si procede y devuelve los
elementos eliminados.

split (Mtodo) Devuelve la matriz de cadenas resultante de la String

separacin de una cadena en subcadenas.

strike (Mtodo) Pone etiquetas HTML <STRIKE> alrededor del texto. String
sub (Mtodo) Pone etiquetas HTML <SUB> alrededor del texto. String

substr (Mtodo) Devuelve una subcadena que comienza en una String

posicin especificada y tiene una longitud
especificada.

substring Devuelve la subcadena en la ubicacin especificada String

(Mtodo) dentro de un objetoString.

sup (Mtodo) Pone etiquetas HTML <SUP> alrededor del texto. String

test (Mtodo) Devuelve un valor Boolean que indica si existe o no Regular

un patrn en una cadena de bsqueda. Expressio
n

toArray Devuelve una matriz JavaScript estndar convertida a VBArray

(Mtodo) partir de un objeto VBArray.

toDateString Devuelve una fecha como un valor alfanumrico. date

(Mtodo)

toExponential Devuelve una cadena que contiene un nmero Number

(Mtodo) representado en notacin exponencial.

toFixed Devuelve una cadena que representa un nmero en Number

(Mtodo) notacin de punto fijo.

toGMTString Devuelve una fecha convertida en cadena utilizando date

(Mtodo) la hora media de Greenwich (GMT).

toISOString Devuelve una fecha como un valor alfanumrico en date

(Mtodo) formato ISO.

toJSON Se utiliza para transformar datos de un tipo de objeto date

(Mtodo) antes de la serializacin JSON.

toLocaleDateStr Devuelve una fecha como un valor alfanumrico date

ing (Mtodo) apropiado para la configuracin regional actual del
entorno host.

toLocaleLower Devuelve una cadena donde todos los caracteres String

Case (Mtodo) alfabticos se han convertido a minsculas, segn la
configuracin regional actual del entorno host.

toLocaleString Devuelve un objeto convertido en cadena usando la Multiple

(Mtodo) configuracin regional actual.

toLocaleTimeSt Devuelve una hora como un valor alfanumrico date

ring (Mtodo) apropiado para la configuracin regional actual del
entorno host.
toLocaleUpper Devuelve una cadena donde todos los caracteres String
Case (Mtodo) alfabticos se han convertido a maysculas, segn la
configuracin regional actual del entorno host.

toLowerCase Devuelve una cadena donde todos los caracteres String

(Mtodo) alfabticos se han convertido a minsculas.

toPrecision Devuelve una cadena que contiene un nmero Number

(Mtodo) representado en notacin exponencial o de punto fijo
con un nmero especificado de dgitos.

toString Devuelve una representacin alfanumrica de un Multiple

(Mtodo) objeto.

toTimeString Devuelve una hora como un valor alfanumrico. date

(Mtodo)

toUpperCase Devuelve una cadena donde todos los caracteres String

(Mtodo) alfabticos se han convertido a maysculas.

toUTCString Devuelve una fecha convertida en cadena usando la date

(Mtodo) hora UTC.

trim (Mtodo) Devuelve una cadena donde se han quitado los String
caracteres de espacio en blanco y de terminador de
lnea iniciales y finales.

ubound Devuelve el mayor valor de ndice utilizado en la VBArray

(Mtodo) dimensin especificada del objeto VBArray.

unshift Inserta nuevos elementos al principio de una matriz. Array

(Mtodo)

valueOf Devuelve el valor primitivo del objeto especificado. Multiple

(Mtodo)

Los mtodos en JavaScript

As pues, un mtodo es una accin que ejecutamos sobre los datos de un objeto. La
sintaxis para escribir un mtodo es:

Objeto.nombreMetodo = nombreFuncion

Bien ahora les pasare una lista de mtodos que permiten contextos diferentes dentro
de Javascript:

Mtodo Apply() permite aplicar a un mtodo en el contexto de un objeto diferente. As

pues con apply() podemos escribir un mtodo una sola vez y heredarlo en otro objeto
sin necesidad de tener que reescribir el mtodo cmo un objeto nuevo, ejemplo:
apply(this, argumentomatriz)

Apply() es similar al mtodo call() salvo en el tipo de argumentos que soporta.

Podemos utilizar los argumentos de una matriz en vez de nombrar uno a uno los
parmetros de la misma. De est modo podemos obtener todos los valores de un
objeto con slo llamarlo.

Blur() quita el focus(cursor) del objeto que lo llama. Hace referencia de un objeto de
tipo password, select, text o textarea.

objeto.blur()

Call() permite ejecutar un mtodo en el contexto de otro diferente.

call(this,arg1,arg2,?)
,arg2,?)
Clear() es mtodos limpia el contenido de un document

document.clear()

Click() permite generar la pulsacin del botn izquierdo del ratn en objetos de tipo
button, checkbox, radio, reset o submit.

objeto.click()

Close() est mtodo puede emplearse con dos objetos distintos. En el objeto
document, el mtodo permite cerrar la corriente de un documento mostrado en
pantalla toda la informacin del documento que se tiene. Es similar a la pulsacin del
botn detener en el navegador. En el objeto window, el mtodo cierra la ventana actual
o la ventana que efectuara la llamada.

window.close()

Focus() est mtodo permite seleccionar el objeto que lo llaman, dando control al
cursor.

objeto.focus()

Hace referencia a un objeto tipo password, select, text o textarea.

Select() permite seleccionar al elemento que lo llama. Puede ser un objeto password,
select, text o textarea.

objeto.select()

Con stos mtodos finalizo est publicacin, quedo en espera de sus cometarios al
respecto, reciban un saludo Cristina Rojas.
Lista de propiedades CSS 3

La tabla siguiente resume las propiedades definidas en las recomendaciones de Hojas

de Estilo en Cascada (CSS 3):
Bordes

Decoracin de texto
Propiedad Descripcin Valores
text-shadow sombras color && distancia {2, 3}
Fondos
Propiedad Descripcin Valores
background fondos mltiples separados por comas
repeticin de la imagen de
background-repeat CSS 2 | space | round
fondo
lmite de la imagen de border-box | padding-box | content-
background-clip
fondo box
tamao de la imagen de auto | [ distancia | porcentaje ] {2}
background-size
fondo | contain | cover
origen de la imagen de border-box | padding-box | content-
background-origin
fondo box
Bordes
Propiedad Descripcin Valores
border-radius bordes redondeados [ distancia | porcentaje ] {1, 4}
border-top-right- borde superior derecho
distancia | porcentaje
radius redondeado
border-bottom-right- borde inferior derecho
distancia | porcentaje
radius redondeado
border-bottom-left- borde inferior izquierdo
distancia | porcentaje
radius redondeado
border-top-left- borde superior izquierdo
distancia | porcentaje
radius redondeado

Las diferentes propiedades en CSS3

En este artculo presentar las nuevas propiedades de CSS3.

Nota: Internet Explorer solo interpreta CSS3 a partir de la versin 9.

Aqu utilizo el prefijo -moz- para Mozilla Firefoz

Los bordes

El W3C permite efectuar nuevas acciones sobre los bordes.

Borde con colores diferentes

La propiedad -moz-border-colors: permite crear varios bordes de colores diferentes.

Esta propiedad puede ser utilizada tambin como: -moz-borders-top-color: (adicin de

bordes, top, bottom, left, right)

#midiv {

border:8px solid #000000;

-moz-border-colors : #CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000

#550000;

padding: 5px ;

En image

Imgenes como bordes

CSS3 permite el uso de imgenes como bordes de los elementos de la pgina
Las dos propiedades:
border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image

border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

#mi-div {

border-image: url(border.png) 27 27 27 27 round round;

En imagen:
#mi_div {

border-image: url(border.png) 27 27 27 27 stretch stretch;

Bordes redondeados en las esquinas

La propiedad <gras<border-radius</gras> de CSS3 permite a los desarrolladores web

definir bordes redondeados en las esquinas, sin necesidad de imgenes de esquinas
ni recurrir al uso de etiquetas div multiples.

#contenedor {

-moz-border-radius: 15px; /* Prefijo Moz para Mozilla (no valido W3C)*/

border-radius: 15px; /* Ningn prefijo para los navegadores que incorporan la

propiedad sin prefijo (valido W3C) */

Crear sombras en CSS3

Una nueva funcionalidad de CSS3 implementada a partir de la versin 3.1 de Firefox,

es la posibilidad de crear sombras de colores: esta es la propiedad box-shadow

Esta propiedad requiere de algunos parmetros para definir las caractersticas de la

sombra:

1. Desplazamiento horizontal de la sombra: un valor positivo significa que la

sombra aparece desde la derecha, un desplazamiento negativo har que la
sombra aparezca desde la izquierda.

2. Desplazamiento vertical de la sombra: un valor negativo significa que el box-

shadowaparecer desde arriba, un valor negativo har aparecer la sombra
desde abajo.
 3. En cuanto al difuminado, cuanto ms cerca de cero est este valor, la sombra
ser ms definida. En cambio, cuanto ms se acerque de 1, la sombra estar
ms difuminada.

Ejemplos:

.sombra {

box-shadow: 10px 10px 5px #888;

padding: 5px 5px 5px 15px;

.sombra_2 {

box-shadow: -10px -10px 0px #000000;

border-radius: 5px;

padding: 5px 5px 5px 15px;

Es el equivalente de text-shadow en CSS2 .

Imgenes de fondo de elementos en CSS3

background-clip y background-origin

La propiedad background-origin de CSS3 permite determinar la manera en que la

imagen de fondo se posicionar en un elemento.
Esta propiedad toma 3 valores: border-box, padding-box y content-box.
Las implementaciones experimentales tienen como propiedades:

-Webkit-background-origin / -moz-background-origin

-Webkit-background-clip / -moz-background-clip

Las implementaciones estables

background-origin

background-clip

background-size

CSS3 permite especificar un tamao a las imgenes de fondo. Este tamao puede ser
especificado en pixeles, (height y width), o en porcentaje. Si se especifica una tamao
en porcentaje, el tamao es relativo al ancho o altura de la zona a la que se ha
atribuido la propiedad background-origin.

Imgenes de fondo multiples en CSS3

Es simple:

background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) top

11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-
middle.gif) left repeat-y;

Nota: estas son propiedades experimentales!

Los colores en CSS3

CSS3 podria ver la introduccin de la propiedad HSL (Matiz, Saturacion,

Luminosidad).

HSL toma tres valores:

Matiz: corresponde a la tinta: 0 (0 360) es de color rojo, verde vale 120 y, 240 es azul.
Los otros valores son matices de colores.

Saturacin: La saturacin es un valor en porcentaje. 100% es el color exacto.

Luminosidad: La luz es igualmente un porcentaje. 0% es la sombra (negro), y 100%

completamente claro (blanco), 50% corresponde al valor medio.

Esto da una amplia gama de posibilidades en cuanto al tono de los colores.

Hasta el momento, HSL ha sido implementado en Opera 9.5, safari 3, Konqueror y

Mozilla.

Ejemplo:

#mi_div_hsl {

background-color: hsl(240,100%, 50%);