Javascript

CONCEPTOS BSICOS DE JAVASCRIPT
1. Definicin.
JavaScript es un lenguaje interpretado lnea a lnea y orientado a HTML; por tanto,
no necesita de un compilador. Es un lenguaje de programacin que se puede
utilizar para construir sitios Web y para hacerlos ms interactivos. Aunque
comparte muchas de las caractersticas y de las estructuras del lenguaje Java, fue
desarrollado independientemente. El lenguaje JavaScript puede interactuar con el
cdigo HTML, permitiendo a los programadores web utilizar contenido dinmico.
Se utiliza principalmente del lado del cliente (es decir, se ejecuta en nuestro
ordenador a travs de los navegadores webs). En la actualidad, casi todos los
navegadores modernos interpretan el cdigo JavaScript integrado en las pginas
web.
Es necesario resaltar que hay dos tipos de JavaScript: por un lado est el que se
ejecuta en el cliente (navegador), este es el JavaScript propiamente dicho, aunque
tcnicamente se denomina Navigator JavaScript. Pero tambin existe un
JavaScript que se ejecuta en el servidor, es ms reciente y se denomina LiveWire
JavaScript.
2. Estructura de JavaScript en HTML
2.1. Desde la pgina HTML.
<HTML>
<HEAD>
<TITLE>Ttulo de la pgina</TITLE>
</HEAD>
<BODY>
<script type="text/javascript">
</script>
</BODY>
</HTML>
2.2.
Desde un archivo externo.
<HTML>
<HEAD>
<script type="text/javascript"src="micodigo.js"></script>
</HEAD>
<BODY>
</BODY>
1
</HTML>
3. Caractersticas de JavaScript.
Su sintaxis es similar a la usada en Java; al ser un lenguaje del lado del cliente
este es interpretado por el navegador, no se necesita tener instalado ningn
Framework.
3.1.
Variables.
Una variable no es ms que un contenedor para un valor. Las variables se

declaran por medio de la palabra clave var, pero a diferencia de otros lenguajes de
programacin en JavaScript no es necesario declarar su tipo.
var a = 15;
var b = "gato";
Las nicas limitaciones a la hora de crear variables son:
Los nombres de las variables pueden comenzar por una letra, el guin bajo
(_) y el smbolo de dolar ($); el resto de los caracteres puede ser cualquier
combinacin de los anteriores, adems de cifras. As, registro_01,
$vnculos, listaNodos o _cuao1 son nombres correctos; 1_lista_de_cosas,
elementos-lista o nuevo%elemento no
Los nombres de las variables no pueden coincidir con palabras clave

pertenecientes a la propia sintaxis de JavaScript, ni con las palabras
reservadas.
3.2.
Arreglos.
Un arreglo almacena diversos valores , a los que se accede haciendo referencia al

ndice del valor. Cuando se conocen los valores, se pueden declarar de esta
manera:
var vientos = new Array();

var vientos = new Array("Breas","Cfiro","Noto","Euro");
var vientos = new Array();
vientos[0] = "Breas";
vientos[1] = "Cfiro";
vientos[2] = "Noto";
vientos[3] = "Euro";
var sucesiones = new Array();
suceciones[0] = new Array("2","4","6","8","10");
suceciones[1] = new Array("2","4","8","16","32");
3.3. Condicionales.
if(i<10){ }
else{..}
switch (variable){
case(valor1):
enunciados a ejecutar para ese valor
break;
case(valor2):
enunciados a ejecutar para ese valor
break;
3.4. Bucles o ciclos.

for(var i=0;i>=100;i++){ }
do{
alert(obras[i]);
i++;
} while (ilt;=14);
4. Utilidades de JavaScript.
Entre los diferentes servicios que se encuentran realizados con Javascript en
Internet se encuentran:
Correo
Chat
Buscadores de Informacin
Tambin podemos encontrar o crear cdigos para insertarlos en las pginas como:
Reloj
Contadores de visitas
Fechas
Calculadoras
Validadores de formularios
Detectores de navegadores e idiomas
5. Funciones en JavaScript
Una funcin es un bloque de enunciados que componen un comportamiento que
puede ser invocado las veces que sea necesario.
La definicin de una funcin (tambin llamada declaracin de funcin) consiste en
la palabra clave (reservada) function, seguida por:
El nombre de la funcin (opcional).
Una lista de argumentos para la funcin, encerrados por parntesis y

separados por comas (,).
Las declaraciones JavaScript que definen la funcin, encerradas por

llaves, { }.
La sintaxis general de una funcin es:
function nombre_de_la_funcin (argumento1,argumento1,){

enunciados a ejecutar }
function sumar(x,y){
var total = x + y;
alert(total);}
Para ejecutar la funcin utilizamos su nombre seguido de los parntesis. Por

ejemplo, as llamaramos a la funcin sumar() que acabamos de crear.
sumar(1,2);
sumar(3,5);
sumar(8,13);
En la funcin sumar total adquiere sucesivamente los valores de 3, 8 y 21, que es

lo que mostraran tres alertas.
Por ltimo, sobre los argumentos hay que recordar las respuestas a tres
preguntas:
Qu ocurre si se enva a una funcin menos argumentos que los que se

han especificado?: Los argumentos que no han recibido un valor adoptan el
de undefined.
Qu ocurre si se enva a una funcin ms argumentos que los que se han
especificado?: Los argumentos que sobran son ignorados.
4
Cuntos argumentos se pueden especificar como mximo?: 255.
5.1.
Objetos nativos e incorporados en JavaScript.
Un objeto es una coleccin de propiedades una serie de valores y

de mtodos una serie de funciones. Para acceder a una propiedad o un
mtodo de un objeto hay que concatenar sta con el nombre del objeto por medio
de un punto (.).
var fecha = new Date;

alert(fecha.getFullYear());
Segn ECMA-262 los objetos se clasifican en:

5.1.1.Nativos: Son objetos proporcionados por una implementacin de este
estndar que son independientes del entorno. Eso quiere decir que
cualquier lenguaje basado en ECMAScript y conforme a l debe
implementarlos. Son:
Array
Boolean
Date
Error
EvalError
Function
Number
Object
RangeError
ReferenceError
RegExp
String
SyntaxError
TypeError
URIError
Cada vez que se quiere emplear uno de ellos hay que crear una instancia del
objeto por medio de la palabra clave new, como he mostrado en el ejemplo de la
fecha.
5
o 5.1.2. Incorporados (en ingls built-in): Son, como los anteriores, objetos
que tiene que proporcionar una implementacin deECMA-262 y que
tambin son independientes del entorno, pero que deben estar presentes al
iniciarse la ejecucin de un programa de ECMAScript. Son: Global y Math.
5.2. Funciones de objetos en JavaScript.
5.2.1. Array.
Mtodo
Descripcin
pop
Devuelve el ltimo elemento de la matriz, y lo elimina de la

misma.
Aade un elemento al final de la matriz, y devuelve la
nueva longitud.
Invierte el orden de los elementos de la matriz.
Devuelve el primer elemento de la matriz, y lo elimina de la
misma.
Ordena los elementos de una matriz.
Aade o elimina elementos de una matriz.
Aade un elemento al principio de la matriz y devuelve la
nueva longitud.
Devuelve una matriz con todos los elementos de las
matrices y/o valores concatenados.
Une todos los elementos de una matriz en una nica
cadena literal.
Extrae una seccin de una matriz y la devuelve como una
nueva matriz.
Devuelve una cadena que representa a la matriz y a sus
elementos.
push
reverse
shift
sort
splice
unshift
concat
join
slice
toString
Modifica
matriz?
S
la
S
S
S
S
S
S
No
No
No
No
5.2.2. Date.
Mtodo
parse
getDate
getDay
getFullYear
getHours
getMilliseconds
getMinutes
getMonth
getTime
Descripcin
Convierte una cadena que representauna fecha en el nmero de
milisegundos
transcurridos
desde las 12 en punto de la noche del 1 de enero de 1970.
Devuelve el da del mes de acuerdo con la hora local.
Devuelve el da de la semana de acuerdo con la hora local.
Devuelve el ao de acuerdo con la hora local.
Devuelve la hora de acuerdo con la hora local.
Devuelve el milisegundo de acuerdo con la hora local.
Devuelve el minuto de acuerdo con la hora local.
Devuelve el mes de acuerdo con la hora local.
Devuelve el nmero de milisegundos transcurridos desde las 12
6
getSeconds
getTimezoneOffset
getUTCDate
getUTCDay
getUTCFullYear
getUTCHours
getUTCMillisecond
s
getUTCMinutes
getUTCMonth
getUTCSeconds
toString
toDateString
toUTCString
toLocaleString
toLocaleDateString
toLocaleTimeString
valueOf
en punto de la noche del 1 de enero de 1970.

Devuelve el segundo de acuerdo con la hora local.
Devuelve los minutos de diferencia entre la hora local y el UTC1.
Devuelve el da del mes de acuerdo con la hora universal.
Devuelve el da de la semana de acuerdo con la hora universal.
Devuelve el ao de acuerdo con la hora universal.
Devuelve la hora de acuerdo con la hora universal.
Devuelve el milisegundo de acuerdo con la hora universal.
Devuelve el minuto de acuerdo con la hora universal.
Devuelve el mes de acuerdo con la hora universal.
Devuelve el segundo de acuerdo con la hora universal.
Convierte la fecha en una cadena literal que la representa.
Convierte una fecha en una cadena legible para seres humanos.
Convierte una fecha en una cadena acorde con la
convencin UTC de Internet.
Convierte una fecha en una cadena acorde con la convencin
de la hora local.
Como el anterior, pero slo para la porcin de da/mes/ao.
Como el anterior, pero slo para la porcin de
hora/minuto/segundo.
Devuelve el nmero de milisegundos transcurridos desde las 12
en punto de la noche del 1 de enero de 1970.
5.2.3. String.
Mtodo
charAt
charCodeAt
fromCharCod
e
concat
indexOf
lastIndexOf
match
replace
search
slice
Descripcin
Devuelve el caracter en determinado ndice de la cadena.
Devuelve el valor Unicode del caracter en determinado ndice de la
cadena.
El inverso del anterior, convierte una cadena de valores Unicode en
una literal.
Combina el texto de dos cadenas para crear una nueva.
Devuelve el ndice de la primera coincidencia de un caracter dentro de
una cadena, o -1 si no existe.
Devuelve el ndice de la ltima coincidencia de un caracter dentro de
una cadena, o -1 si no existe.
Busca las coincidencias de una expresin en una cadena literal.
Devuelve las coincidencias, si se producen.
Sustituye una expresin por una cadena dentro de otra cadena.
Igual que match, pero devuelve los ndices de las coincidencias, o -1 si
no se da ninguna.
Extrae una seccin de una cadena. Devuelve la subcadena.
7
split
substr
substr
toLowerCase
toUpperCase
+
5.2.4.
Devuelve una matriz poblada con subcadenas de una cadena.

Devuelve los caracteres solicitados a partir de un ndice.
Devuelve los caracteres dentro de los ndices especificados.
Devuelve la cadena en minsculas.
Devuelve la cadena en maysculas.
concatenar cadenas
Global.
Mtodos
decodeURI
decodeURIComponent
encodeURI
encodeURIComponent
Eval
parseFloat
parseInt
Descripcin
Decodifica un URI y lo convierte en una cadena literal.
Igual que decodeURI, pero para una porcin de URI.
Codifica una cadena literal convirtindola en un URI.
Igual que encodeURI, pero para una porcin de URI.
Trata la cadena no como un literal, sino como una
expresin de JavaScript.
Convierte una cadena literal en un nmero con parte
decimal.
Convierte una cadena literal en un nmero entero.
5.2.5. Math.
Propiedad
E
LN2
LN10
LOG2E
LOG10E
PI
SQRT1_2
Mtodo
abs
acos
asin
atan
ceil
cos
exp
floor
log
max
min
Descripcin
Devuelve la constante de Euler.
Devuelve el logaritmo natural de 2.
Devuelve el logaritmo natural de 10.
Devuelve el logaritmo de la constante de Euler en base 2.
Devuelve el logaritmo de la constante de Euler en base 10.
Devuelve el valor de .
Devuelve la raz cuadrada de 1/2.
Descripcin
Devuelve el valor absoluto de un nmero.
Devuelve el arcocoseno de un valor (en radianes).
Devuelve el arcoseno de un valor (en radianes).
Devuelve la arcotangente de un valor (en radianes).
Devuelve el entero ms pequeo mayor o igual que el valor.
Devuelve el coseno de un valor (en radianes).
Devuelve el valor de la constante de Euler elevada al valor
proporcionado.
Devuelve el entero ms grande menor o igual que el valor.
Devuelve el logaritmo natural del valor.
Devuelve el mayor de dos valores.
Devuelve el menor de dos valores.
8
pow
Eleva una base a una potencia.
random
Devuelve un valor pseudoaleatorio entre 0 y 1.
round
Devuelve un valor redondeado al entero ms cercano.
sin
Devuelve el seno de un valor (en radianes).
sqrt
Devuelve la raz cuadrada de un valor.
tan
Devuelve la tangente de un valor (en radianes).
6. Eventos en JavaScript.
Los eventos son acciones que ocurren sobre un documento, bien por parte del
usuario como por ejemplo que haga clic sobre un elemento o bien por parte
del navegador por ejemplo cargar el documento. La lista de eventos es la
siguiente:
Evento
Descripcin
blur
El elemento pierde el foco.
change
El contenido del elemento cambia.
click
El usuario hace clic sobre el elemento.
dblclick
El usuario hace doble clic sobre el elemento.
focus
El elemento gana el foco.
keydown
El usuario presiona una tecla.
keypress
El usuario presiona una tecla y la mantiene pulsada.
keyup
El usuario libera la tecla.
load
El documento termina su carga.
mousedow
n
mousemov
e
mouseout
El usuario presiona el botn del ratn en un elemento.
mouseover
El usuario mantiene el puntero sobre un elemento.
mouseup
El usuario libera el botn pulsado del ratn sobre un elemento.
reset
El usuario presiona el botn de restablecer de un formulario.
select
El usuario selecciona el texto de un elemento.
submit
El usuario presiona el botn de envo de un formulario.
unload
El documento se descarga, bien porque se cierra la ventana, bien

porque se navega a otra pgina, bien porque el documento se
recarga.
El usuario mueve el puntero del ratn sobre un elemento.

El usuario mueve el puntero fuera de un elemento.
7. DOM en JavaScript.
7.1.
Definicin.
El modelo de objetos de documento del 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
La creacin del Document Object Model o DOM es una de las innovaciones que
ms ha influido en el desarrollo de las pginas web dinmicas y de las
aplicaciones web ms complejas.
DOM permite a los programadores web acceder y manipular las pginas XHTML
como si fueran documentos XML. De hecho, DOM se dise originalmente para
manipular de forma sencilla los documentos XML.
Con el DOM de HTML, JavaScript puede acceder y cambiar todos los elementos
de un documento HTML.
Cuando se carga una pgina web, el navegador crea un Modelo de objetos de
documento (DOM) de la pgina.
El HTML DOM modelo est construido como un rbol de objetos:
10
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 agregar 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

7.2.
DOM en HTML
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
11
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.
7.3.
rbol de nodos
Una de las tareas habituales en la programacin de aplicaciones web con

JavaScript consiste en la manipulacin de las pginas web. De esta forma, es
habitual obtener el valor almacenado por algunos elementos (por ejemplo los
elementos de un formulario), crear un elemento (prrafos, <div>, etc.) de forma
dinmica y aadirlo a la pgina, aplicar una animacin a un elemento (que
aparezca/desaparezca, que se desplace, etc.).
Todas estas tareas habituales son muy sencillas de realizar gracias a DOM. Sin
embargo, para poder utilizar las utilidades de DOM, es necesario "transformar" la
pgina original. Una pgina HTML normal no es ms que una sucesin de
caracteres, por lo que es un formato muy difcil de manipular. Por ello, los
navegadores web transforman automticamente todas las pginas web en una
estructura ms eficiente de manipular.
Esta transformacin la realizan todos los navegadores de forma automtica y nos
permite utilizar las herramientas de DOM de forma muy sencilla. El motivo por el
que se muestra el funcionamiento de esta transformacin interna es que
condiciona el comportamiento de DOM y por tanto, la forma en la que se
manipulan las pginas.
DOM transforma todos los documentos XHTML en un conjunto de elementos
llamados nodos, que estn interconectados y que representan los contenidos de
las pginas web y las relaciones entre ellos. Por su aspecto, la unin de todos los
nodos se llama "rbol de nodos".
La siguiente pgina XHTML sencilla:
12
Se transforma en el siguiente rbol de nodos:
7.4.
Tipos de nodos
La especificacin completa
aunque las pginas
manipular
cuatro o
nodos:
de DOM define 12 tipos de nodos,

XHTML habituales se pueden
manejando solamente
cinco tipos de
Document,
nodo raz
del que
derivan
todos los dems nodos del rbol.
Element, representa cada una de las etiquetas

XHTML. Se trata del nico nodo que puede contener atributos y el nico del
que pueden derivar otros nodos.
Attr, se define un nodo de este tipo para representar cada uno de los
atributos de las etiquetas XHTML, es decir, uno por cada par atributo=valor.
Text, nodo que contiene el texto encerrado por una etiqueta XHTML.
Comment, representa los comentarios incluidos en la pgina XHTML.
Los
otros
tipos
de
nodos
existentes
que
no
se
van
considerar
son DocumentType, CDataSection,DocumentFragment, Entity, EntityReference, Pr

ocessingInstruction y Notation.
13
7.5.
Navegacin a travs del DOM
Una vez accedido a un nodo, podemos navegar a partir de l y acceder a otros

nodos a n cuando no sepamos sus identificadores (o estos no hayan sido
definidos). Para ello podemos recorrer el rbol del DOM utilizando las siguientes
funciones y propiedades:
childNodes: (propiedad) es una matriz que contiene todos los hijos de un

nodo (pero no los hijos de stos).
firstChild y lastChild : (propiedades) contienen, respectivamente, el primer

y ltimo hijo de un nodo (es decir, son atajos para facilitar el uso de la
matriz anterior).
parentNode: (propiedad) permite acceder al nodo padre, esto es, al nodo

del que cuelga el actual.
previousSibling y nextSibling: (propiedades) permiten acceder a los

hermanos del nodo.
parentNode: (propiedad) permite acceder al nodo padre, esto es, al nodo

del que cuelga el actual.
hasChildNodes(): (mtodo) devuelve un valor lgico indicando si el nodo

tiene o no nodos hijos.
En caso de que no exista una determinada propiedad (por ejemplo, un nodo no

tiene hermanos e intentamos acceder a su previousSibling), la propiedad tiene
valor null.
7.6.
Acceder a la DOM.
Una vez construido automticamente el rbol completo de nodos DOM, ya es

posible utilizar las funciones DOM para acceder de forma directa a cualquier nodo
del rbol
Si queremos acceder a un elemento del DOM, tenemos mtodos para hacerlo:
getElementByTagName(etiqueta)
obtener nodo(s) mediante el nombre de la

etiqueta (tag)
14
getElementByName(valor)
obtener nodo(s) mediante el valor asignado al

atributo name del elemento
getElementByID(valor)
obtener nodo(s) mediante el valor asignado al

atributo id del elemento
Adicin y eliminacin de elementos:
createElement(etiqueta)
crear nodo de tipo elemento
createTextNode(texto)
crear nodo de tipo texto
appendChild(nodo)
agregar nodo como hijo de otro nodo
removeChild(nodo)
remover nodo de un nodo padre
Cambio de elementos HTML
Method
element.innerHTML
content
Description
= new
html Change the inner HTML of an element
element.attribute = new value
Change the attribute value of an HTML

element
element.setAttribute(attribute,
value)
Change the attribute value of an HTML

element
element.style.property = new style
Change the style of an HTML element
Adicin de Eventos Manipuladores.
Method
Description
document.getElementById(id).onclick
function(){code}
15
= Adding event handler code to an

onclick event
Encontrar los objetos HTML:
La primera HTML DOM Nivel 1 (1998), define los objetos HTML, 11 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
document.anchors
Returns all <a> elements that have a 1

name attribute
document.applets
Returns
all
<applet> 1
elements (Deprecated in HTML5)
document.baseURI
Returns the absolute base URI of the 3

document
document.body
Returns the <body> element
document.cookie
Returns the document's cookie
document.doctype
Returns the document's doctype
document.documentElement
Returns the <html> element
document.documentMode
Returns the mode used by the browser
document.documentURI
Returns the URI of the document
document.domain
Returns the domain

document server
document.domConfig
Obsolete. Returns the DOM configuration
document.embeds
Returns all <embed> elements
document.forms
Returns all <form> elements
document.head
Returns the <head> element
16
DOM
name
of
the 1
document.images
Returns all <img> elements
document.implementation
Returns the DOM implementation
document.inputEncoding
Returns
the
(character set)
document.lastModified
Returns the date and time the document 3

was updated
document.links
Returns all <area> and <a> elements that 1

have a href attribute
document.readyState
Returns the
document
document.referrer
Returns the URI of the referrer (the linking 1

document)
document.scripts
Returns all <script> elements
document.strictErrorChecking
Returns if error checking is enforced
document.title
Returns the <title> element
document.URL
Returns the
document
document's
encoding 3
(loading) status of
complete
URL
of
the 3
the 1
8. Navigator Object.
Los siguientes mtodos devuelven informacin del navegador usado para cargar
la pgina.
navigator.appCodeName
Devuelve el cdigo del nombre del navegador web

con que se carga la pgina
navigator.appName
Devuelve el nombre del navegador

17
navigator.appVersion
Versin del navegador
navigator.cookieEnabled
Comprueba si estn habilitadas las cookies en el

navegador (true=Si, false=No)
navigator.platform
Plataforma del navegador
navigator.userAgent
Agente de usuario enviado por el navegador al

servidor
navigator.javaEnabled
Se comprueba si est habilitada Java en el

navegador (true=Si, false=No)
9. Location Object.
location.host
Devuelve el nombre del host de una direccin web
location.hostname
Similar al anterior
location.href
Devuelve la direccin URL completa
location.pathname
Devuelve solo la ruta relativa en el servidor a la pagina
location.port
Devuelve el nmero del puerto usado
location.protocol
Muestra el protocolo usado (http, https, file, ftp, etc.)
location.reload()
Vuelve a cargar la pgina (window.location.reload(true))
location.href
Encadenando location.href se refresca el contenido de la

pgina (vuelve a cargarla), en este caso se usa:
location.href=location.href
Ver el cdigo fuente Para eso se encadena de la siguiente

de la pgina
location.href = 'view-source:' + window.location.href
10. History Object
18
forma:
history.length
Devuelve la cantidad de direcciones URL en la lista del historial
history.back()
Pgina anterior en el historial
history.forward() Pgina siguiente en el historial
Carga una pgina determinada del historial, en este caso se

emplea:
history.go()
history.go(0)
por lo que recarga la pgina actual, similar a usar la tecla F5
11. Screen Object.

screen.height
Devuelve la altura total de la pantalla en pixeles
screen.width
Devuelve el ancho total de la pantalla en pixeles
screen.availHeight
Devuelve la altura de la pantalla disponible en pixeles
screen.availWidth
Devuelve el ancho de la pantalla disponible en pixeles
screen.colorDepth
Profundidad de color de la pantalla para mostrar imgenes
screen.pixelDepth
Resolucin del color en bits por pixel de la pantalla
12. Window Object.
19
Ejecuta una funcin o varias inmediatamente despus de

que termine la carga de la pgina por completo, en este
caso se emplea una alerta que se muestra al entrar a la
pgina. El cdigo usado es:
window.onload
window.onload=alert('Hola, Bienvenido a Javascript')
</script>
Este cdigo se debe insertar en el final de la pgina, justo
antes del cierre de la etiqueta </body>
window.parent.locatio
Devuelve la direccin URL de la pgina actual
n
window.parent.locatio Conduce a una direccin web, en este ejemplo:

n
window.parent.location='http://norfipc.com'
window.alert()
Muestra una ventana de alerta con un mensaje:

window.alert('Mensaje')
Confirmacin, muestra un cuadro de dialogo con un
mensaje, un botn Aceptar y uno Cancelar:
window.confirm()
window.confirm('Desea?....')
Generalmente se usa encadenada con otra funcin
Muestra un cuadro de dialogo que inquiere al usuario por
una respuesta, se usa:
window.prompt()
window.prompt('Mensaje','Quiere..?')
Al igual que la anterior se usa con una funcin que se
ejecuta en caso del usuario oprimir el botn Aceptar
20
window.open()
Abre una nueva ventana o pestaa segn como se emplee,

ninguna de las variantes funciona en el navegador Internet
Explorer por cuestiones de seguridad.
En este ejemplo se abre una nueva ventana llamada "new",
para eso se emplea el siguiente cdigo:
window.open()
nv=window.open('','new','width=344,height=444,left=50,top=
50')
Mas informacin sobre todas las opciones de
window.open() en la siguiente pgina: Como abrir links de
una pgina web en una nueva ventana con Internet
Explorer y otros navegadores.
close()
Cierra una ventana, en este ejemplo cierra la ventana

abierta anteriormente:
nv.close()
window.open()
En este ejemplo se emplea window.open() para abrir una

nueva pestaa
close()
Cierra la pestaa abierta anteriormente
top.close()
Cerrar pestaa
Muestra el nombre de una ventana, se emplea:
window.name
nv=window.open('','new','width=344,height=444');
nv.document.write('Esta ventana se llama: ' + nv.name)
window.innerHeight
Muestra la altura en pixeles del tamao de la ventana del

navegador (No es compatible con Internet Explorer)
window.innerWidth
Muestra el ancho en pixeles del tamao de la ventana del

navegador (No es compatible con Internet Explorer)
21
window.print()
window.resizeBy()
Imprime el contenido de la ventana.

Ms informacin sobre las opciones para utilizar
window.print(), puedes leerla en la siguiente pgina: Como
imprimir solo un rea, parte o seccin de una pgina web
Este mtodo cambia de tamao la ventana del navegador,

mueve la esquina derecha inferior de la ventana, la cantidad
de pixeles que se determine, ya sea positiva un incremento
o negativa una reduccin, la esquina superior izquierda
permanecer inmvil. En este ejemplo se emplea:
window.resizeBy(100,100)
lo que incrementa en 100 pixeles su tamao en cada eje
(no funciona en Opera y Chrome).
window.resizeTo()
Ajusta el tamao de la ventana al nmero de pixeles que se

determine, en este ejemplo se emplea:
window.resizeTo(1000,800)
Desplaza el contenido de la ventana en un determinado
nmero de pixeles, hacia arriba o hacia abajo segn se
establezca de forma positiva o negativa, en este ejemplo se
emplea:
window.scrollBy(50,-50)
window.scrollBy()
Combinando la function window.scrollBy con setTimeout se

puede hacer que la pgina vaya desplazndose
continuamente, se puede iniciar la funcin al cargar la
pgina mediante el evento onload o con un vnculo de la
siguiente forma:
function pageScroll() {window.scrollBy(0,30);
scrolldelay = setTimeout('pageScroll()',800);}
22
function stopScroll() {clearTimeout(scrolldelay);}

</script>
<a href="javascript:pageScroll()">Scroll</a>
<a href="javascript:stopScroll()">STOP</a>
Scroll STOP
window.scrollTo()
Dezplaza el contenido de la ventana a unas coordenadas

especficas, en este caso se usa:
window.scrollTo(750,650)
window.moveTo()
Mueve la ventana del navegador a una posicin especfica

en la pantalla definida en pixeles, en este caso:
window.moveTo(222,222)
window.moveBy()
Mueve la ventana del navegador a una ubicacin en

relacin con su posicin actual determinada en pixeles, en
este caso:
window.moveBy(200,300)
window.screenLeft
Muestra el nmero de pixeles distantes a la pantalla, del

borde izquierdo de la ventana al borde izquierdo de la
pantalla (Solo Internet Explorer)
window.screenTop

borde superior de la ventana al borde superior de la pantalla
(Solo Internet Explorer)
window.screenX

borde izquierdo de la ventana al borde izquierdo de la
pantalla (Firefox y Google Chrome)
23
window.screenY

borde superior de la ventana al borde superior de la pantalla
(Firefox y Google Chrome)
24

Javascript

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Javascript

Caricato da

Copyright:

Formati disponibili

CONCEPTOS BSICOS DE JAVASCRIPT

Desde un archivo externo.

Una variable no es ms que un contenedor para un valor. Las variables se

Las nicas limitaciones a la hora de crear variables son:

Los nombres de las variables no pueden coincidir con palabras clave

Un arreglo almacena diversos valores , a los que se accede haciendo referencia al

var vientos = new Array();

3.4. Bucles o ciclos.

El nombre de la funcin (opcional).

Una lista de argumentos para la funcin, encerrados por parntesis y

Las declaraciones JavaScript que definen la funcin, encerradas por

La sintaxis general de una funcin es:

function nombre_de_la_funcin (argumento1,argumento1,){

Para ejecutar la funcin utilizamos su nombre seguido de los parntesis. Por

En la funcin sumar total adquiere sucesivamente los valores de 3, 8 y 21, que es

Qu ocurre si se enva a una funcin menos argumentos que los que se

Cuntos argumentos se pueden especificar como mximo?: 255.

Objetos nativos e incorporados en JavaScript.

Un objeto es una coleccin de propiedades una serie de valores y

var fecha = new Date;

Segn ECMA-262 los objetos se clasifican en:

Devuelve el ltimo elemento de la matriz, y lo elimina de la

en punto de la noche del 1 de enero de 1970.

Devuelve una matriz poblada con subcadenas de una cadena.

El elemento pierde el foco.

El contenido del elemento cambia.

El usuario hace clic sobre el elemento.

El usuario hace doble clic sobre el elemento.

El elemento gana el foco.

El usuario presiona una tecla.

El usuario presiona una tecla y la mantiene pulsada.

El usuario libera la tecla.

El documento termina su carga.

El usuario presiona el botn del ratn en un elemento.

El usuario mantiene el puntero sobre un elemento.

El usuario libera el botn pulsado del ratn sobre un elemento.

El usuario presiona el botn de restablecer de un formulario.

El usuario selecciona el texto de un elemento.

El usuario presiona el botn de envo de un formulario.

El documento se descarga, bien porque se cierra la ventana, bien

El usuario mueve el puntero del ratn sobre un elemento.

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

DOM XML - modelo estndar para documentos XML

HTML DOM - modelo estndar para documentos HTML

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 agregar nuevos elementos y atributos HTML

JavaScript puede reaccionar a todos los eventos de HTML existentes en la

JavaScript puede crear nuevos eventos en la pgina HTML

El DOM HTML es un estndar de objetos de modelo y de programacin de

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,

Una de las tareas habituales en la programacin de aplicaciones web con

Se transforma en el siguiente rbol de nodos:

de DOM define 12 tipos de nodos,

Element, representa cada una de las etiquetas

Comment, representa los comentarios incluidos en la pgina XHTML.

son DocumentType, CDataSection,DocumentFragment, Entity, EntityReference, Pr

Navegacin a travs del DOM