Scribd
Cargar
68 vistas

Javascript

Este documento describe conceptos básicos de JavaScript, incluyendo su estructura, características como variables, arreglos, condicionales y bucles. También explica funciones, objetos incorporados y funciones de objetos como Array y Date.

Cargado por

Kevin Anthony Tananta del Aguila
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
68 vistas

Javascript

Este documento describe conceptos básicos de JavaScript, incluyendo su estructura, características como variables, arreglos, condicionales y bucles. También explica funciones, objetos incorporados y funciones de objetos como Array y Date.

Cargado por

Kevin Anthony Tananta del Aguila
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 24

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

<script type="text/javascript">
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:
<script type="text/javascript">
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

Muestra el nmero de pixeles distantes a la pantalla, del


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

window.screenX

Muestra el nmero de pixeles distantes a la pantalla, del


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

23

window.screenY

Muestra el nmero de pixeles distantes a la pantalla, del


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

24

También podría gustarte