guia java script

Elaborado Por: TSU Laur Vanegas

JAVASCRIPT

JavaScript, al igual que java, es una de las múltiples maneras que han surgido

par entender las capacidades del lenguaje HTML. JavaScript no es un lenguaje de

programación propiamente dicho. Es un lenguaje script orientada a documento, como

pueden ser los lenguajes de marcos que tienen muchos procesadores de texto.

JavaScript es un lenguaje de programación que se utiliza principalmente para

crear páginas web dinámicas, es decir, paginas que incorporan efectos como texto que

aparece y desaparece, animaciones, acciones que se activan al pulsar botones y

ventanas con mensajes de aviso al usuario.

JavaScript es un lenguaje interpretado, por lo que no es necesario compilar los

programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript

se pueden probar directamente en cualquier navegador sin necesidad de procesos

intermedios.

La principal diferencia entre JavaScript y Java, es que este último es un

lenguaje de programación completo. Lo único que comparten es la misma sintaxis.

UTILIDAD DE JAVASCRIPT

Las funciones que pueden llevarse a cabo con JavaScript son diversas

permitiendo que la navegación sea más rica interactiva. Entre las que se pueden citar:

Los efectos de cambio de imágenes al pasar el ratón.

Menús desplegables, herramientas de selección de color.

Alarmas: generar mensajes que aparecen cuando el visitante hace algo, por

ejemplo, antes de entrar en una página. Por ejemplo, pueden mostrar una cita

o un lema diferente cada día.

Calendarios, relojes...

Cajas de texto independientes del resto de la página (utilizadas, por ejemplo,

para incluir información legal, términos de servicio...)

Formularios para correo electrónico, por ejemplo para preparar una encuesta.


Efectos de audio y de imagen: cambio de color del fondo.

Juegos sencillos para jugar online.

CARACTERISTICA DE JAVASCRIPT

1. JavaScript adopta una tecnología basada en objetos, lo que significa que

proporciona un conjunto de objetos del navegador predefinidos. JavaScript

permite a los usuarios definir objetos para su uso en el script..

2. Está basado en un modelo manejado por eventos. En este tipo de modelos, se

necesita una acción apropiada en respuesta a los eventos del usuario.

3. Se puede usar para hacer interactivas las paginas estáticas HTML. Se puede

por ejemplo saludar al usuario de acuerdo a la hora del día o validar los

campos del formulario para ver si el usuario ingresa correctamente los valores

requeridos.

4. Es independiente del navegador, en consecuencia JavaScript se puede ejecutar

en cualquier navegador que tenga el motor script de JavaScript

5. La sintaxis es similar a java y sus construcciones son similares a C, C++ o

Java.

6. Su código se integra en las paginas HTML

INCLUIR JAVASCRIPT EN HTML

Existen tres formas de incluir JavaScript en páginas HTML:

1. Incluir JavaScript en el mismo documento HTML

2. Incluir JavaScript como un archivo externo al documento HTML

3. Incluir JavaScript en los elementos del documento HTML

Incluir JavaScript en el mismo documento HTML:

Para insertar JavaScript dentro del documento HTML, se hace uso de la

etiqueta < script >…< /script > con los siguientes atributos:


Nombre Descripción

type=”…” Se utiliza para indicar el tipo de script que se va a escribir. Para JavaScript si valor

es "text/javascript"

Todo lo que se escriba dentro de las etiquetas

<script type="text/javascript">…< /script > debe de respetar la sintaxis del lenguaje.

Es una buena práctica de programación colocar esta etiqueta dentro de la etiqueta

<head>…</head>.

Ejemplo: Ejemplo de código JavaScript en el propio documento

Este método se emplea cuando se define un bloque pequeño de código o

cuando se quieren incluir instrucciones específicas en un determinado documento

HTML que completen las instrucciones y funciones que se incluyen por defecto en

todos los documentos del sitio web.

El principal inconveniente es que si se quiere hacer una modificación en el

bloque de código, es necesario modificar todas las páginas que incluyen ese mismo

bloque de código JavaScript

Incluir JavaScript como un archivo externo al documento HTML

Al igual que en el primer caso, se hace uso de la etiqueta <script>…</script>

con el atributo type="text/javascript" pero agregándosele un nuevo atributo.

Nombre Descripción

src=”…” Precisa el URL (dirección) del script a insertar en el documento. Este es un archivo

con la extensión “.js”

<html>

<head>

<title> Ejemplo de código JavaScript en el propio

documento</title>

<script type="text/javascript">

alert("Un mensaje de prueba");

</script>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>


Ejemplo: Ejemplo de código JavaScript en un archivo externo

Primero creamos un archivo JavaScript de nombre “ejemplo.js”, que contenga

la siguiente información:

Luego creamos la página HTML de nombre:

Cada etiqueta <script> solamente puede enlazar un único archivo, pero en una

misma página se pueden incluir tantas etiquetas <script> como sean necesarias. Los

archivos de tipo JavaScript son documentos normales de texto con la extensión .js,

que se pueden crear con cualquier editor de texto

La principal ventaja de enlazar un archivo JavaScript externo es que se

simplifica el código HTML de la página, se puede reutilizar el mismo código

JavaScript en todas las páginas del sitio web y que cualquier modificación realizada

en el archivo JavaScript se ve reflejada inmediatamente en todas las páginas HTML

que lo enlazan.

Incluir JavaScript en los elementos del documento HTML

Este método es muy poco utilizado ya que consiste en incluir trozos de

JavaScript dentro del código HTML de la página. El mayor inconveniente de este

método es que ensucia innecesariamente el código HTML de la página y complica el

mantenimiento del código JavaScript. En general, este método sólo se utiliza para

definir algunos eventos.

Ejemplo: Ejemplo de código JavaScript en elementos del documento HTML

<html>

<head>

<title> Ejemplo de código JavaScript en un archivo externo </title> <script type="text/javascript" src=”ejemplo.js”> </script>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

alert("Un mensaje de prueba");

<html>

<head>

<title>Ejemplo de código JavaScript en elementos del documento HTML</title>

</head>

<body>

<p onclick="alert('Un mensaje de prueba')">

De un Clic.

</p>

</body>

</html>


SINTAXIS DEL LENGUAJE

Las normas básicas que definen la sintaxis de JavaScript son las siguientes:

No se tienen en cuenta los espacios en blanco y las nuevas líneas: como

sucede con HTML, el intérprete de JavaScript ignora cualquier espacio en

blanco sobrante, por lo que el código se puede ordenar de forma adecuada

para entenderlo mejor (tabulando las líneas, añadiendo espacios, creando

nuevas líneas, etc.)

Se distinguen las mayúsculas y minúsculas.

No se define el tipo de las variables: al crear una variable, no es necesario

indicar el tipo de dato que almacenará. De esta forma, una misma variable

puede almacenar diferentes tipos de datos durante la ejecución del script.

No es necesario terminar cada sentencia con el carácter de punto y coma: en la

mayoría de lenguajes de programación, es obligatorio terminar cada sentencia

con el carácter ;. Aunque JavaScript no obliga a hacerlo, es conveniente seguir

la tradición de terminar cada sentencia con el carácter del punto y coma.

Se pueden incluir comentarios: los comentarios se utilizan para añadir

información en el código fuente del programa. Aunque el contenido de los

comentarios no se visualiza por pantalla, si que se envía al navegador del

usuario junto con el resto del script, por lo que es necesario extremar las

precauciones sobre la información incluida en los comentarios.

VARIABLES

Las variables en JavaScript como sigue:

Ejemplo: Declarando variables en JavaScript

Var nombreVariable = valor;


Var nombreEstudiante=”Juan Carlos”;

Var idEstudiante, carrera;

idEstudiante=”17516321”

carrera=”ING SISTEMAS”;

</script>


JavaScript también permite que se declaren variables de forma implícita. Es

decir que no es necesario que se declare la variable.

Ejemplo: Declarando variables Implícitas en JavaScript

CONSTANTES

Al igual que en C++, las constantes en JavaScript se declaran mediante la

siguiente sintaxis:

Ejemplo: Declarando constantes Implícitas en JavaScript

TIPOS DE DATOS

A pesar de que en JavaScript no es necesario indicarle a un variable el tipo de

dato, los valores que puede tomar son:

TIPOS DE DATOS DE JAVASCRIPT

TIPO EJEMPLOS DESCRIPCIÓN

Number 4.5, 8.2, 10 Cualquier numero positivo, negativo o cero

Boolean True, false Un verdadero o falso. Valores lógicos

String “juan”, „Hola Mundo‟ Cualquier cadena dentro de las comillas

Object Estudiante, instructor Cualquier entidad que tenga propiedades y métodos.

undefined corresponde a las variables que han sido declaradas y todavía no se les ha asignado un

valor

OPERADORES

Al igual que todos los lenguajes de programación, JavaScript proporciona un

rico conjunto de operadores que ayudan a simplificar y darle solución a los

problemas.


Var Codigo=”P001”;

nombreProducto=”Leche Entera”;

</script>

const nombreConstante = valor;


const PI= 3.1416;

</script>


INTERACTUAR CON EL USUARIO

Uno de los usos comunes de los operadores en JavaScript es el de realizar

algunos cálculos en el lado del cliente y presentar los resultados a los usuarios.

JavaScript tiene algunos métodos predefinidos para efectuar operaciones en el lado

del cliente, como son:

alert (“cadena a mostrar”): abre una ventana con la cadena que se le pasa

como parámetro.

Ejemplo: Uso de la Función alert

prompt(“Texto a Mostrar”, ” Valor por defecto”): permite mostrar una

ventana para que el usuario ingrese texto. Esta función retorna el dato que el

usuario ingreso o el valor por defecto en caso de no haber ingresado

información alguna. “”

Ejemplo: Uso de la Función prompt

TIPO OPERADORES SIMBOLOS

Asignación =

Aritméticos +, - , *, /, %

Incremento y Decremento ++, --

Lógicos &&(and), | | (OR), ¡ (Negación)

Relacionales >, <, >=, <=, !=, = =

<html>

<head>

<title> Uso de la Funcion alert </title>


alert(“Hola Mundo”);

</script>

</head>

<body>

</body>

</html>

<html>

<head>

<title> Uso de la Funcion alert </title>


var usuario=prompt(“Escriba su Nombre”, “Ingrese su Nombre”);

document.write(“Su Nombre es: <b>” + usuario+”</b>”);

</script>

</head>

<body>

</body>

</html>


La sentencia switch … case:

Esta es similar a la construcción switch disponibles en lenguajes de

programación como C, C++ o Java. La sintaxis de esta construcción es la siguiente:

Ejemplo: Uso de Condicionales

switch (variable) {

case valor1:

// sentencias a ejecutar

break;

case valor2:


break;

......

defaulf:


}

<html>

<head>

<title> Ejemplo de condiciones </title>

</head>


var num=prompt("Escriba un Numero (1-7)", "Numero");

if (num=='1')

alert("Lunes")

else

if (num=='2')

alert("Martes")

else

if (num=='3')

alert("Miercoles")

else

if (num=='4')

alert("Jueves")

else

if (num=='5')

alert("Viernes")

else

if (num=='6')

alert("Sabado")

else

if (num=='7')

alert("Domingo");

else

document.write("<b>Error Ingresaste:</b> " + num);

</script>

<body>

</body>

</html>


Ejemplo: Uso Switch

ESTRUCTURAS REPETITIVAS

Permiten a los programadores ejecutar un bloque de código particular un

numero dado de veces, hasta que se alcance una condición para finalizar el bucle.

JavaScript proporciona tres tipos de ciclos:

1. Ciclo for

2. Ciclo while

3. Ciclo do...while

<html>

<head>


</head>


var num=prompt("Escriba un Numero (1-7)", "Numero");

switch (num) {

case num=='1':

alert("Lunes");

break;

case num=='2':

alert("Martes")

break;

case num=='3':

alert("Miercoles")

break;

case num=='4':

alert("Jueves")

break;

case num=='5':

alert("Viernes")

break;

case num=='6':

alert("Sabado")

break;

case num=='7':

alert("Domingo");

break;

default: document.write("<b>Error Ingresaste:</b> " + num);

}

</script>

<body>

</body>

</html>


Ciclo For

La sintaxis del ciclo es la siguiente:

La idea del funcionamiento de un bucle for es la siguiente: "mientras la

condición indicada se siga cumpliendo, repite la ejecución de las instrucciones

definidas dentro del for. Además, después de cada repetición, actualiza el valor de las

variables que se utilizan en la condición".

La "inicialización" es la zona en la que se establece los valores iniciales de las

variables que controlan la repetición.

La "condición" es el único elemento que decide si continua o se detiene la

repetición.

La "actualización" es el nuevo valor que se asigna después de cada repetición

a las variables que controlan la repetición.

Ejemplo: Código que imprime por Pantalla los Números del 1 al 10

Ciclo while

La sintaxis se este ciclo es la siguiente:

for (inicializacion; condicion; incremento o decremento) {

// Sentencias a ejecutar

}

<html>

<head>


</head>


alert("Se van a Imprimir los Numero del 1 al 10")

document.write("<b>Listado de Numero:</b> <br>");

for (var i=1; i<=10; i++) {

document.write(i + "<br>");

}

</script>

<body>

</body>

</html>


El funcionamiento del bucle while se resume en: "mientras se cumpla la

condición indicada, repite indefinidamente las instrucciones incluidas dentro del

bucle".

Si la condición no se cumple ni siquiera la primera vez, el bucle no se ejecuta.

Si la condición se cumple, se ejecutan las instrucciones una vez y se vuelve a

comprobar la condición. Si se sigue cumpliendo la condición, se vuelve a ejecutar el

bucle y así se continúa hasta que la condición no se cumpla.

Evidentemente, las variables que controlan la condición deben modificarse

dentro del propio bucle, ya que de otra forma, la condición se cumpliría siempre y el

bucle while se repetiría indefinidamente.


Ciclo do … while

La sintaxis se este ciclo es la siguiente:

while (condición) {


}

<html>

<head>


</head>




var i=1;

while (i<=10) {


i++;

}

</script>

<body>

</body>

</html>

do {


} while (condición)´;


El bucle de tipo do...while es muy similar al bucle while, salvo que en este

caso siempre se ejecutan las instrucciones del bucle al menos la primera vez.

De esta forma, como la condición se comprueba después de cada repetición, la

primera vez siempre se ejecutan las instrucciones del bucle. Es importante no olvidar

que después del while() se debe añadir el carácter ; (al contrario de lo que sucede con

el bucle while simple)


ARREGLOS EN JAVASCRIPT

En JavaScript un array es una colección de variables que pueden ser todas del

mismo tipo o cada una de un tipo diferente. Es decir, un arreglo permite guardar

varias variables y acceder a ellas de manera independiente, es como tener una

variable con distintos compartimentos donde podemos introducir datos distintos. Para

ello utilizamos un índice que nos permite especificar el compartimiento o posición a

la que nos estamos refiriendo.

Para crear array en JavaScript se pueden emplear dos métodos:

1. Por asignación de valores

2. Utilizando la clase Array()

<html>

<head>


</head>




var i=1;

do {


i++;

} while (i<=10)

</script>

<body>

</body>

</html>


Crear arreglos por Asignación de Valores

Este método consiste en asignarle valores a las posiciones del arreglo de

manera manual. Por ejemplo: imaginemos que necesitamos almacenar los días de la

semana en el arreglo diasSemanas, el código JavaScript seria el siguiente:

El código anterior declara el arreglo unidimensional diasSemanas como un

vector de 7 posiciones. Para acceder a los valores del arreglo se utiliza el índice que

indique la posición del elemento al que se quiera acceder (la primera posición de los

arreglos en JavaScript es cero, la segunda es uno y así sucesivamente). Por ejemplo:

De igual forma, el arreglo diasSemanas se puede imprimir haciendo uso de

ciclos repetitivos, por ejemplo:

Por otro lado, los arreglos en JavaScript se pueden declarar empleando otro

tipo de asignación. Suponga que se quiere almacenar en un arreglo los siguientes

datos:

La cadena “Hola Mundo”, en la posición 1

El valor de la contante PI, 3.1416, en la posición 2

el valor lógico false en la posición 3

El código seria:

Var diasSemanas= [“lunes”,”martes”,”miercoles”,”jueves”,”viernes”,”sabado”,”domingo”];

Document.write(diasSemanas[0]); // muestra lunes

Document.write(diasSemanas[2]); // muestra martes

... ... ... ...

Document.write(diasSemanas[6]); // muestra domingo

for (var i=0; i<diasSemanas.length; i++){

Document.write(diasSemanas[i]);

}

arreglo[0]= “Hola Mundo”;

arreglo[1]= 3.1416;

arreglo[2]= false;


Es decir, un arreglo en JavaScript también se puede declarar asignándole

valores a cada una de las posiciones del arreglo. Asimismo, en el código anterior se

muestra unas de las ricas características de los array, y es la posibilidad de almacenar

diferentes datos en diferentes posiciones dentro de la misma estructura, acción que no

es permitida en otros lenguajes como PASCAL, Lenguaje C, entre otros.

Crear arreglos usando la Clase Array()

Para crear arreglos utilizando la clase Array() se pueden emplear dos sintaxis,

la primera es indicando el tamaño del arreglo y luego asignarle valores a cada

posición, es decir:

En la segunda se indica en la declaración los valores que debe tener el arreglo,

tal como se ejemplifica:

Funciones útiles para Arreglos

length: calcula el número de elementos de un array.

concat(): se emplea para concatenar los elementos de varios arrays

var miArreglo = new Array(3); // declaración del arreglo

// Asignando valores a cada posición

arreglo[0]= “Hola Mundo”;

arreglo[1]= 3.1416;

arreglo[2]= false;

// declaración del arreglo

var miArreglo = new Array(“Hola Mundo”,3.1416, false);

var vocales = ["a", "e", "i", "o", "u"];

var numeroVocales = vocales.length; // numeroVocales = 5

var array1 = [1, 2, 3];

array2 = array1.concat(4, 5, 6); // array2 = [1, 2, 3, 4, 5, 6]

array3 = array1.concat([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]


join(separador): Une todos los elementos de un array para formar una cadena

de texto. Para unir los elementos se utiliza el carácter separador indicado.

pop(): elimina el último elemento del array y lo devuelve. El array original se

modifica y su longitud disminuye en 1 elemento.

push(): añade un elemento al final del array. El array original se modifica y

aumenta su longitud en 1 elemento. (También es posible añadir más de un

elemento a la vez)

shift(): elimina el primer elemento del array y lo devuelve. El array original se

ve modificado y su longitud disminuida en 1 elemento.

unshift(): añade un elemento al principio del array. El array original se

modifica y aumenta su longitud en 1 elemento. (También es posible añadir

más de un elemento a la vez)

reverse(): modifica un array colocando sus elementos en el orden inverso a su

posición original

var array = ["hola", "mundo"];

var mensaje = array.join(""); // mensaje = "holamundo"

mensaje = array.join(" "); // mensaje = "hola mundo"

var array = [1, 2, 3];

var ultimo = array.pop();

// ahora array = [1, 2], ultimo = 3

var array = [1, 2, 3];

array.push(4);

// ahora array = [1, 2, 3, 4]

var array = [1, 2, 3];

var primero = array.shift();

// ahora array = [2, 3], primero = 1

var array = [1, 2, 3];

array.unshift(0);

// ahora array = [0, 1, 2, 3]

var array = [1, 2, 3];

array.reverse();

// ahora array = [3, 2, 1]


Ejemplo: Uso de Arreglos en JavaScript

FUNCIONES EN JAVASCRIPT

Una función es un grupo de sentencias de código para lograr una determinada

funcionalidad. Las funciones de JavaScript pueden recibir uno o más parámetros de

entrada y devolver los resultados. El uso de funciones en JavaScript es similar al de C

o C++, sin embargo la sintaxis es diferente. Las funciones en JavaScript se pueden

dividir en dos grupos:

1. Funciones propias de JavaScript

2. Funciones definidas por el programador.

<html>

<head>

<title> Uso de Arreglos en JavaScript </title>

</head>


// Declaro los dos vectores

var nombres=Array(3);

var edades=Array(3);

// cargo ambos vectores

for (var i=0; i<=3; i++){

nombres[i]=prompt("Teclee su Nombre:","Nombre...");

edades[i]=prompt("Ahora su edad "+ nombres[i],"Edad...");

}

// Genero la Salida

var salida="";

for (var i=0; i<=3; i++){

salida+=(i+1)+".- "+nombres[i]+ " tiene "+edades[i]+"\n";

}

alert(salida)

</script>

<body>

</body>

</html>


Funciones propias de JavaScript

JavaScript incorpora una serie funciones y propiedades para el manejo de las

variables. De esta forma, muchas de las operaciones básicas con las variables, se

pueden realizar directamente con las utilidades que ofrece JavaScript.

Algunas de las funciones incorporadas que ofrece el lenguaje son:

eval (cadena): Esta función recibe una cadena de caracteres y la ejecuta como

si fuera una sentencia de JavaScript.

isNaN (numero): esta función evalúa el parámetro de entrada para determinar

si NO ES UN NUMERO. Retorna trae si no es un numero y false si lo es.

parseInt (cadena, base): Recibe una cadena y una base. Devuelve un valor

numérico resultante de convertir la cadena en un número en la base indicada.

La base puede ser 10 para decimal, 8 para octal y 16 para hexadecimal.

parseFloat(cadena, base): Convierte la cadena en un número dependiendo de

la base y lo devuelve. Los valores de base son iguales que para la función

parseInt.

Además de las funciones antes descritas, JavaScript proporciona otro rico

conjunto de funciones para manejar cadenas, fechas, arreglos, números, entre otros;

dentro de objetos. Es decir, en el lenguaje existen ciertos objetos predefinidos,

llamados Objetos JavaScript, con propiedades y métodos que ayudan a lograr

algunas funcionalidades. Estos objetos son:

Boolean

Array

Number

String

Date

Math.


NOTA: Para los efectos de la guía, solo se explicaran los objetos Boolean, String,

Date y Math. Los restantes objetos quedan a investigación del estudiante.

El Objeto Boolean

Se usa para manejar los valores lógicos dentro del lenguaje verdadero o falso

(trae o false). Un objeto Boolean se crea de la siguiente manera:

El objeto Boolean tiene un método valueOf(), que retorna el valor primitivo.

El paso de un parámetro al constructor crea un objeto Boolean.

Los objetos Boolean siguen ciertas reglas al tomar un valor particular. Estas

son:

0 se toma como false. Cualquier valor distinto de cero se considera como

verdadero.

Una cadena vacía es tomada como false. Cualquier otra cadena es tomada

como true.

Cualquier objeto valido se toma como trae. El valor null se toma como false.

Ejemplo: Uso del Objeto Boolean.

El Objeto String

Cualquier cadena que entre enmarcada por las comillas simples o dobles se

considera como objetos String. Para crear un objeto String se puede usar:

O también:

miVariable = new Boolean (value);

<html>

<head>


</head>


var valorLogico = new Boolean(false);

alert("El valor de la variable es: " + valorLogico);

</script>

<body>

</body>

</html>

miVariable = new String (“cadena”);


El objeto String proporciona muchos métodos útiles para manipular cadenas.

Entre los cuales se destacan:

length: calcula la longitud de una cadena de texto (el número de caracteres

que la forman).

concat(“cadena”): se utiliza para concatenar cadenas, es similar al uso del

operador “+”.

toUpperCase(): transforma todos los caracteres de la cadena a sus

correspondientes caracteres en mayúsculas.

toLowerCase(): transforma todos los caracteres de la cadena a sus

correspondientes caracteres en minúsculas.

charAt(posicion): obtiene el carácter que se encuentra en la posición

indicada.

indexOf(caracter): calcula la posición en la que se encuentra el carácter

indicado dentro de la cadena de texto. Si el carácter se incluye varias veces

miVariable = “cadena”;

var mensaje = "Hola Mundo";

var numeroLetras = mensaje.length; // numeroLetras = 10

var mensaje = "Hola";

var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"

var mensaje3= mensaje1 + " Mundo"; // mensaje3 = "Hola Mundo"


var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"

var mensaje = "HOLA";

var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"


var letra = mensaje.charAt(0); // letra = H

letra = mensaje.charAt(2); // letra = l


dentro de la cadena de texto, se devuelve su primera posición empezando a

buscar desde la izquierda. Si la cadena no contiene el carácter, la función

devuelve el valor -1.

lastIndexOf(caracter): calcula la última posición en la que se encuentra el

carácter indicado dentro de la cadena de texto. Si la cadena no contiene el

carácter, la función devuelve el valor -1. Esta función comienza su búsqueda

desde el final de la cadena hacia el principio aunque la posición devuelta es la

correcta empezando a contar desde el principio de la palabra.

substring(inicio, final): extrae una porción de una cadena de texto. El

segundo parámetro es opcional. Si sólo se indica el parámetro inicio, la

función devuelve la parte de la cadena original correspondiente desde esa

posición hasta el final.

split(separador): convierte una cadena de texto en un array de cadenas de

texto. La función parte la cadena de texto determinando sus trozos a partir del

carácter separador indicado.


var posicion = mensaje.indexOf('a'); // posicion = 3

posicion = mensaje.indexOf('b'); // posicion = -1


var posicion = mensaje.lastIndexOf('a'); // posicion = 3

posicion = mensaje.lastIndexOf('b'); // posicion = -1

var mensaje = "Hola Mundo";

var porcion = mensaje.substring(2); // porcion = "la Mundo"

porcion = mensaje.substring(5); // porcion = "Mundo"

porcion = mensaje.substring(7); // porcion = "ndo"

var mensaje = "Hola Mundo, soy una cadena de texto!";

var palabras = mensaje.split(" ");

// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];

var palabra = "Hola";

var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]


bold(): coloca la cadena en negrilla. Similar a la etiqueta <B> de HTML.

fontColor(color) : Pone la fuente al color indicado. Similar a la etiqueta

<FONT color=el_color_indicado> de HTML.

fontSize(tamaño) : Pone la fuente al tamaño indicado. Similar a la etiqueta

<FONT> con el atributo size de HTML.

italics() : Pone la fuente en cursiva. Etiqueta <I>.

sub(): Actualiza el texto como si se estuviera utilizando la etiqueta <SUB>,

de subíndice.

sup() : Como si utilizásemos la etiqueta <SUP>, de superíndice.

El Objeto Date

Sobre este objeto recae todo el trabajo con fechas en Javascript, como obtener

una fecha, el día la hora y otras cosas. Para trabajar con fechas se necesita instanciar

un objeto de la clase Date y con él poder realizar las operaciones requeridas.

Un objeto de la clase Date se puede crear de dos maneras distintas. Por un

lado crear el objeto con el día y hora actuales y por otro crearlo con un día y hora

distintos a los actuales. Esto depende de los parámetros que se le pase a la hora de

construir el objeto.

Para crear un objeto fecha con el día y hora actuales se colocan los paréntesis

vacíos al llamar al constructor de la clase Date:

Para crear un objeto fecha con un día y hora distintos de los actuales se debe

de indicar entre paréntesis los formatos, una guía de cómo hacerlo serian las

siguientes:

var miFecha = new Date();

var miFecha = new Date(año,mes,dia,hora,minutos,segundos);

var miFecha = new Date(año,mes,dia);


NOTA: Los valores que debe recibir el constructor son siempre numéricos. El mes

comienza por 0, es decir, enero es el mes 0. Si no se indica la hora, el objeto fecha se

crea con hora 00:00:00.

Los objetos de la clase Date no tienen propiedades pero si varios métodos

listados a continuación:

getDate(): Devuelve el día del mes.

getDay(): Devuelve el día de la semana.

getHours(): Retorna la hora.

getMinutes(): Devuelve los minutos.

getMonth(): Devuelve el mes (atención al mes que empieza por 0).

getSeconds(): Devuelve los segundos.

getTime(): Devuelve los milisegundos transcurridos entre el día 1 de enero de

1970 y la fecha correspondiente al objeto al que se le pasa el mensaje.

getFullYear(): Retorna el año con todos los dígitos. Usar este método para

estar seguros de que funcionará todo bien en fechas posteriores al año 2000.

setDate(dia): Actualiza el día del mes.

setHours(hora): Actualiza la hora.

setMinutes(minutos): Cambia los minutos.

setMonth(mes): Cambia el mes (0 enero, 1 febrero, …).

setSeconds(segundos): Cambia los segundos.


setFullYear(año): Cambia el año de la fecha al número que recibe por

parámetro. El número se indica completo ej: 2005 o 1995. Utilizar este

método para estar seguros que todo funciona para fechas posteriores a 2000.

El Objeto Math

La clase Math proporciona los mecanismos para realizar operaciones

matemáticas en JavaScript. Algunas operaciones se resuelven rápidamente con los

operadores aritméticos, como la multiplicación o la suma, pero hay una serie de

operaciones matemáticas adicionales que se tienen que realizar usando el objeto Math

como pueden ser calcular un seno o hacer una raíz cuadrada.

El objeto Math proporciona un rico conjunto de propiedades y métodos que

podemos acceder empleando la siguiente sintaxis:

Algunas de las propiedades que nos brinda el objeto Math son:

E: Número E o constante de Euler, la base de los logaritmos neperianos.

LN2: Logaritmo neperiano de 2.

LN10: Logaritmo neperiano de 10.

LOG2E: Logaritmo en base 2 de E.

LOG10E: Logaritmo en base 10 de E.

PI: Conocido número para cálculo con círculos.

SQRT1_2: Raíz cuadrada de un medio.

SQRT2: Raíz cuadrada de 2.

Math.Propiedad o Math.Metodo


Así mismo, algunos métodos importantes del objeto son:

abs(): Devuelve el valor absoluto de un número. El valor después de quitarle

el signo.

acos(): Devuelve el arcocoseno de un número en radianes.

asin(): Devuelve el arcoseno de un numero en radianes.

atan(): Devuelve un arcotangente de un numero.

ceil(): Devuelve el entero igual o inmediatamente siguiente de un número. Por

ejemplo, ceil(3) vale 3, ceil(3.4) es 4.

cos(): Retorna el coseno de un número.

exp(): Retorna el resultado de elevar el número E por un número.

floor(): Lo contrario de ceil(), pues devuelve un número igual o

inmediatamente inferior.

log(): Devuelve el logaritmo neperiano de un número.

max(): Retorna el mayor de 2 números.

min(): Retorna el menor de 2 números.

pow(): Recibe dos números como parámetros y devuelve el primer número

elevado al segundo número.

random(): Devuelve un número aleatorio entre 0 y 1.

round(): Redondea al entero más próximo.


sin(): Devuelve el seno de un número con un ángulo en radianes.

sqrt(): Retorna la raíz cuadrada de un número.

tan(): Calcula y devuelve la tangente de un número en radianes.

Funciones definidas por el Programador

Cuando una serie de instrucciones se repiten una y otra vez, se complica

demasiado el código fuente de la aplicación, ya que:

El código de la aplicación es mucho más largo porque muchas instrucciones

están repetidas.

Si se quiere modificar alguna de las instrucciones repetidas, se deben hacer

tantas modificaciones como veces se haya escrito esa instrucción, lo que se

convierte en un trabajo muy pesado y muy propenso a cometer errores.

Las funciones son la solución a todos estos problemas, tanto en JavaScript

como en el resto de lenguajes de programación. Una función es un conjunto de

instrucciones que se agrupan bajo un nombre para realizar una tarea concreta y que se

pueden reutilizar fácilmente.

Declaración de una Función en JavaScript

En JavaScript las funciones se declaran de la siguiente forma:

function nombreFuncion (parametro1, parametro2,...) {

// Cuerpo de la Función

}


Las funciones normalmente son definidas dentro de las etiquetas

<script>…</script> presentes en la etiqueta <head>…</head> y básicamente están

compuestas por:

La palabra reservada function, que le indica a JavaScript que se va a definir

una función.

El nombreFuncion, que debe ser único para cada función dentro de un mismo

script y se utiliza para llamar a la función cuando sea necesario, es decir, para

que la función ejecute las acciones que están en su cuerpo.

Los parametro1, parametro2,..., o también llamados argumentos de la

función. Son variables (pueden ser cero, una o varias en cuyo caso deben de

separase por comas) o datos que necesita la función para poder cumplir su

cometido.

El Cuerpo de la Función, que se encuentra limitado entre las llaves { }. El

mismo esta conformado por estructuras secuencias, selectivas y/o repetitivas.

Cabe acotar que en el mismo pueden haber llamadas a otras funcione

previamente definidas.

Ejemplo: Definición de una función sin parámetros, que muestra una ventana de

“Bienvenidos”

El código anterior muestra la definición de la función mostrarMensaje, esta

función no posee argumentos y el cuerpo solo esta conformado por la llamada a la

función interna de JavaScript alert.

function mostrarMensaje(){

alert(“BIENVENIDO”);

}


El código completo de HTML, en el que se define a la función es el siguiente:

Si intentamos ejecutar el código, verificamos que no proporciona ninguna

salida. Esto es debido a que para que una función pueda ser ejecutada hay que realizar

una llamado de la misma. Es decir, se debe de colocar el nombre de la función

seguido de los paréntesis ( ). En el caso de que la función reciba parámetros estos se

deben de pasar en el llamado de la función.

Para el ejemplo anterior, el código correcto seria:

Argumentos de una función

Las funciones más sencillas no necesitan ninguna información para producir

sus resultados. Sin embargo, la mayoría de funciones de las aplicaciones reales deben

acceder al valor de algunas variables para producir sus resultados.

<html>

<head>





}

</script>

</head>

<body>

</body>

</html>

<html>

<head>



// Definicion de la funcion



}

// Llamado a la funcion

mostrarMensaje();

</script>

</head>

<body>

</body>

</html>


Las variables que necesitan las funciones se llaman argumentos. Antes de que

pueda utilizarlos, la función debe indicar cuántos argumentos necesita y cuál es el

nombre de cada argumento. Además, al invocar la función, se deben incluir los

valores que se le van a pasar a la función. Los argumentos se indican dentro de los

paréntesis que van detrás del nombre de la función y se separan con una coma (,).

La función que se definió anteriormente, mostrarMensaje, se puede hacer más

general, es decir, puede construirse de manera que no solo muestre el mensaje

“Bienvenido” si no que muestre el mensaje dependiendo del valor que reciba como

parámetro. De esta manera la función quedaría definida como sigue:

En donde mensaje, es un parámetro de la función pensado para recibir una

cadena que luego será mostrada al usuario a través de la función alert. Cuando se

define una función con parámetros, en la llamada de función, se deben de indicar los

valores de cada uno separados por comas.

Ejemplo: Pagina que muestra el uso de la funciones con parámetros.

function mostrarMensaje(mensaje){

alert(mensaje);

}

<html>

<head>



// Definicion de la funcion

function mostrarMensaje(mensaje){

alert(mensaje);

}

// Llamado a la funcion

mostrarMensaje("Bienvendios");

mostrarMensaje("Segundo llamado a la funcion");

mostrarMensaje("Tercer llamado a la funcion");

var texto="Ultimo llamado...\n DIOSSSSSSSSSSSSS";

mostrarMensaje(texto);

</script>

</head>

<body>

</body>

</html>


Para finalizar con la discusión de los parámetros, se presentan ciertos puntos a

tener en cuenta cuando se emplean en las funciones:

Los parámetros a un función se pueden pasar de manera directa o utilizando

variables. Aunque casi siempre el segundo método es el mas empleado.

El número de argumentos que se pasa a una función debería ser el mismo que

el número de argumentos que ha indicado la función. No obstante, JavaScript

no muestra ningún error si se pasan más o menos argumentos de los

necesarios.

El orden de los argumentos es fundamental, ya que el primer dato que se

indica en la llamada, será el primer valor que espera la función; el segundo

valor indicado en la llamada, es el segundo valor que espera la función y así

sucesivamente.

Se puede utilizar un número ilimitado de argumentos, aunque si su número es

muy grande, se complica en exceso la llamada a la función.

No es obligatorio que coincida el nombre de los argumentos que utiliza la

función y el nombre de los argumentos que se le pasan.

Valor de retorno de una función

Las funciones no solamente pueden recibir variables y datos, sino que también

pueden devolver los valores que han calculado. Para devolver valores dentro de una

función, se utiliza la palabra reservada return. Aunque las funciones pueden devolver

valores de cualquier tipo, solamente pueden devolver un valor cada vez que se

ejecutan.


Para que la función devuelva un valor, solamente es necesario escribir la

palabra reservada return junto con el nombre de la variable que se quiere devolver.

Suponga que se quiere crear una función de suma, que reciba como

parámetros dos números y calcula su suma. La función seria:

En el código anterior, cuando la ejecución de la función llega a la instrucción

return suma, se devuelve el valor que posee la variable suma.

Como la función devuelve un valor, en el punto en el que se realiza la

llamada, debe indicarse el nombre de una variable en el que se guarda el valor

devuelto:

Si no se indica el nombre de ninguna variable, JavaScript no muestra ningún

error y el valor devuelto por la función simplemente se pierde y por tanto, no se

utilizará en el resto del programa. En este caso, tampoco es obligatorio que el nombre

de la variable devuelta por la función coincida con el nombre de la variable en la que

se va a almacenar ese valor.

Si la función llega a una instrucción de tipo return, se devuelve el valor

indicado y finaliza la ejecución de la función. Por tanto, todas las instrucciones que se

incluyen después de un return se ignoran y por ese motivo la instrucción return suele

ser la última de la mayoría de funciones.

function suma(num1, num2){

var suma = num1 + num2;

return suma;

}

var result = suma(10,5);

// result=15


Ámbito de las Variables

Al trabajar con funciones es necesario entender el concepto de “Ámbito de

variables”. El ámbito de una variable, se define como la zona del programa en la que

se define la variable. JavaScript define dos ámbitos para las variables: global y local.

Una variable se define como ámbito global cuando se declara fuera de

cualquier función, independientemente de si se define utilizando la palabra reservada

var o no.

Asimismo, si en el interior de una función, las variables se declaran mediante

var se consideran locales y las variables que no se han declarado mediante var, se

transforman automáticamente en variables globales.

Ejemplo: Pagina que lleva la conversión de grados centígrados a Fahrenheit

<html>

<head>

<title> Ejemplos de JavaScript </title>


// Definicion de las funciones

function calcular(tempCentigrados){

var Temperatura=(tempCentigrados*1.8)+32

return Temperatura

}

var Temperatura= prompt("Introduzca la Temperatura en

Centígrados:", "Ingrese...")

document.write("El Equivalente en Fahrenheit es: " +

calcular(Temperatura));

</script>

</head>

<body>

</body>

</html>


QUE ES EL DOM (Modelo de Objetos de Documentos)

Es una interfaz de programación de aplicaciones (API) para documentos

HTML y XML. Define la estructura lógica de los documentos y el modo en que se

accede y manipula el mismo.

Con el Modelo de Objetos del Documento los programadores pueden

construir documentos, navegar por su estructura, y añadir, modificar o eliminar

elementos y contenido. Se puede acceder a cualquier cosa que se encuentre en un

documento HTML o XML, y se puede modificar, eliminar o añadir usando el Modelo

de Objetos del Documento.

Es la estructura de objetos que genera el navegador cuando se carga un

documento y se puede alterar mediante JavaScript para cambiar

dinámicamente los contenidos y aspecto de la página.

Árbol de Nodos

DOM transforma todos los documentos HTML en un conjunto de elementos

llamados nodos, que están interconectados y que representan los contenidos de las

páginas web y las relaciones entre ellos. Por su aspecto, la unión de todos los nodos

se llaman Árbol de Nodos.

Por ejemplo, la siguiendo pagina HTML

<html>

<head>

<title> Pagina Sencilla </title> </head>

<body>

<p>Un párrafo de <b>texto.</b> </p>

</body>

</html>


Se transforma en el siguiente árbol de nodos:

En el esquema anterior, cada rectángulo representa un nodo DOM y las

flechas indican las relaciones entre nodos. La raíz de cualquier documento HTML es

document.

A partir de ese nodo raíz, cada etiqueta HTML se transforma en un nodo de

tipo element. La conversión de etiquetas en nodos se realiza de forma jerárquica. De

esta forma, del nodo raíz solamente pueden derivar los nodos HEAD y BODY. A

partir de esta derivación inicial, cada etiqueta HTML se transforma en un nodo que

deriva del nodo correspondiente a su etiqueta padre.

La transformación automática de la página en un árbol de nodos siempre sigue

las siguientes reglas:


1. Las etiquetas HTML se transforman en dos nodos: el primero es la propia

etiqueta y el segundo nodo es el hijo del primero y consiste en el contenido

textual de la etiqueta.

2. Si una etiqueta HTML se encuentra dentro de otra, se sigue el mimos

procedimiento anterior, pero los nodos generados serán nodos hijos de su

etiqueta padre.

La siguiente jerarquía, muestra los diferentes elementos del modelo de objeto

del documento y sus relaciones:

Tipos de Nodos

En DOM existen 12 tipos de nodos, aunque para las páginas HTML se pueden

manipular solamente con cuatro o cinco tipos de nodo:

1. document: es el nodo raíz de todos los documentos HTML, todos los demás

nodos derivan del él.

2. element: representa cada una de las etiquetas HTML. Se trata del único nodo

que puede contener atributos y el único del que pueden derivar otros nodos.


3. atrr: se define un nodo de este tipo para representar cada uno de los atributos

de las etiquetas HTML, es decir, uno por cada par atributo=valor

4. text: almacena el contenido que se encuentra entre una etiqueta de apertura y

una de cierre.

5. comment: representa los comentarios incluidos en la pagina HTML

Propiedades y Métodos de los Nodos

getNodeName(): retorna el nombre del nodo, es decir, el nombre de la etiqueta

getNodeValue(): retorna el valor que almacena el nodo (etiqueta)

getAttributes(): retorna el conjunto de atributos presentes en un nodo

particular.

getNodeType(): retorna el tipo de nodo. Los valores más utilizados son:

Constantes Valor

ELEMENT_NODE 1

ATTRIBUTE_NODE 2

TEXT_NODE 3

DOCUMENT_NODE 9


Acceso a los Nodos del Árbol

Los nodos del árbol DOM se pueden acceder si y solo si la pagina está

completamente cargada de lo contrario se producirá un error, es decir, el acceso a los

nodos, modificación y su eliminación solamente es posible cuando el árbol DOM ha

sido construido.

Como acceder a un nodo del árbol es equivalente a acceder a un trozo de la

página, una vez construido el árbol, ya es posible manipular de forma sencilla la

página: acceder al valor de un elemento, establecer el valor de un elemento, mover un

elemento de la página, crear y añadir nuevos elementos, etc.

Los elementos (nodos) del DOM se pueden acceder por dos métodos:

1. Nombre del Elemento

2. Empleando Funciones de Acceso Directo

1. Nombre del Elemento

Los diferentes elementos de una página se pueden acceder utilizando el valor

del atributo NAME, por ejemplo: supóngase que se ha declarado

Objeto Navigator

Representa al navegador que esta usándose en la maquina cliente, es decir, en

la maquina en la que se está visualizando la pagina. Este objeto tiene propiedades y

métodos que pueden detectar el tipo, versión y agente de usuario del navegador.


Propiedades

appCodeName: Cadena que contiene el nombre del código del cliente.

appName: Cadena que contiene el nombre del cliente.

appVersion: Cadena que contiene información sobre la versión del cliente.

Language: Cadena de dos caracteres que contiene información sobre el idioma

de la versión del cliente.

mimeTypes: Array que contiene todos los tipos MIME soportados por el

cliente. A partir de NS 3.

Platform: Cadena con la plataforma sobre la que se está ejecutando el

programa cliente.

Plugins: Array que contiene todos los plug-ins soportados por el cliente. A

partir de NS 3.

userAgent: Cadena que contiene la cabecera completa del agente enviada en

una petición HTTP. Contiene la información de las propiedades

appCodeName y appVersion.

Métodos

javaEnabled(). Devuelve true si el cliente permite la utilización de Java, en

caso contrario, devuelve false.

El Objeto window

Se trata del objeto más alto en la jerarquía del navegador (navigator es un

objeto independiente de todos en la jerarquía), pues todos los componentes de una

página web están situados dentro de una ventana. El objeto window hace referencia a

la ventana actual.


Propiedades

1. closed: Válida a partir de Netscape 3 en adelante y MSIE 4 en adelante. Es un

booleano que nos dice si la ventana está cerrada ( closed = true ) o no ( closed

= false ).

2. defaultStatus: Cadena que contiene el texto por defecto que aparece en la

barra de estado (status bar) del navegador.

3. frames:. Es un array: cada elemento de este array (frames[0], frames[1], ...) es

uno de los frames que contiene la ventana. Su orden se asigna según se

definen en el documento HTML.

4. history: Se trata de un array que representa las URLS visitadas por la ventana

(están almacenadas en su historial).

5. length: Variable que nos indica cuántos frames tiene la ventana actual.

6. location: Cadena con la URL de la barra de dirección.

7. name: Contiene el nombre de la ventana, o del frame actual.

8. opener: Es una referencia al objeto window que lo abrió, si la ventana fue

abierta usando el método open() que veremos cuando estudiemos los métodos.

9. parent: Referencia al objeto window que contiene el frameset.

10. self: Es un nombre alternativo del window actual.

11. Status: String con el mensaje que tiene la barra de estado.

12. top: Nombre alternativo de la ventana del nivel superior.

13. window: Igual que self: nombre alternativo del objeto window actual.

Método

1. alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de diálogo

2. blur(). Elimina el foco del objeto window actual. A partir de NS 3, IE 4.

3. clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el método

setInterval(), también del objeto window). A partir de NS 4, IE 4.


4. clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver el

método setTimeout(), también del objeto window).

5. close(). Cierra el objeto window actual.

6. confirm(mensaje). Muestra un cuadro de diálogo con el mensaje 'mensaje' y

dos botones, uno de aceptar y otro de cancelar. Devuelve true si se pulsa

aceptar y devuelve false si se pulsa cancelar.

7. focus(). Captura el foco del ratón sobre el objeto window actual. A partir de

NS 3, IE 4.

8. moveBy(x,y). Mueve el objeto window actual el número de pixels

especificados por (x,y). A partir de NS 4.

9. moveTo(x,y). Mueve el objeto window actual a las coordenadas (x,y). A partir

de NS 4.

10. open(URL,nombre,caracteristicas). Abre la URL que le pasemos como primer

parámetro en una ventana de nombre 'nombre'. Si esta ventana no existe,

abrirá una ventana nueva en la que mostrará el contenido con las

características especificadas. Las características que podemos elegir para la

ventana que queramos abrir son las siguientes:

toolbar = [yes|no|1|0]. Nos dice si la ventana tendrá barra de

herramientas (yes,1) o no la tendrá (no,0).

location = [yes|no|1|0]. Nos dice si la ventana tendrá campo de

localización o no.

directories = [yes|no|1|0]. Nos dice si la nueva ventana tendrá botones

de dirección o no.

status = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barra de

estado o no.

menubar = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barra de

menús o no.

scrollbars = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barras de

desplazamiento o no.

resizable = [yes|no|1|0]. Nos dice si la nueva ventana podrá ser

cambiada de tamaño (con el ratón) o no.

width = px. Nos dice el ancho de la ventana en pixels.

height = px. Nos dice el alto de la ventana en pixels.


outerWidth = px. Nos dice el ancho *total* de la ventana en pixels. A

partir de NS 4.

outerHeight = px. Nos dice el alto *total* de la ventana el pixels. A

partir de NS 4

left = px. Nos dice la distancia en pixels desde el lado izquierdo de la

pantalla a la que se debe colocar la ventana.

top = px. Nos dice la distancia en pixels desde el lado superior de la

pantalla a la que se debe colocar la ventana.

11. prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de diálogo que

contiene una caja de texto en la cual podremos escribir una respuesta a lo que

nos pregunte en 'mensaje'. El parámetro 'respuesta_por_defecto' es opcional, y

mostrará la respuesta por defecto indicada al abrirse el cuadro de diálogo. El

método retorna una cadena de caracteres con la respuesta introducida.

12. scroll(x,y). Desplaza el objeto window actual a las coordenadas especificadas

por (x,y). A partir de NS3, IE4.

13. scrollBy(x,y). Desplaza el objeto window actual el número de pixels

especificado por (x,y). A partir de NS4.

14. scrollTo(x,y). Desplaza el objeto window actual a las coordenadas

especificadas por (x,y). A partir de NS4.

15. setInterval(expresion,tiempo). Evalúa la expresión especificada después de

que hayan pasado el número de milisegundos especificados en tiempo.

Devuelve un valor que puede ser usado como identificativo por

clearInterval(). A partir de NS4, IE4.

16. setTimeout(expresion,tiempo). Evalúa la expresión especificada después de

que hayan pasado el número de milisegundos especificados en tiempo.

Devuelve un valor que puede ser usado como identificativo por

clearTimeout(). A partir de NS4, IE4.


El Objeto Location

Este objeto representa el URL cargado en la ventana. Se usa para navegar

hacia una página en un sitio local u otra página en el internet. Al cambiar la propiedad

de este objeto, el documento cargado en la ventana puede ser cambiado. Su finalidad

principal es, por una parte, modificar el objeto location para cambiar a una nueva

URL, y extraer los componentes de dicha URL de forma separada para poder trabajar

con ellos de forma individual si es el caso. Recordemos que la sintaxis de una URL

era: protocolo://maquina_host[:puerto]/camino_al_recurso

Propiedades

1. hash. Cadena que contiene el nombre del enlace, dentro de la URL.

2. host. Cadena que contiene el nombre del servidor y el número del puerto,

dentro de la URL.

3. hostname. Cadena que contiene el nombre de dominio del servidor (o la

dirección IP), dentro de la URL.

4. href. Cadena que contiene la URL completa.

5. pathname. Cadena que contiene el camino al recurso, dentro de la URL.

6. port. Cadena que contiene el número de puerto del servidor, dentro de la URL.

7. protocol. Cadena que contiene el protocolo utilizado (incluyendo los dos

puntos), dentro de la URL.

8. search. Cadena que contiene la información pasada en una llamada a un script,

dentro de la URL.

Métodos

1. reload(). Vuelve a cargar la URL especificada en la propiedad href del objeto

location.

2. replace(cadenaURL). Reemplaza el historial actual mientras carga la URL

especificada en cadenaURL.

El Objeto History

Este objeto se encarga de almacenar una lista con los sitios por los que se ha

estado navegando, es decir, guarda las referencias de los lugares visitados. Se utiliza,

sobre todo, para movernos hacia delante o hacia atrás en dicha lista.


Propiedades

1. current. Cadena que contiene la URL completa de la entrada actual en el

historial.

2. next. Cadena que contiene la URL completa de la siguiente entrada en el

historial.

3. length. Entero que contiene el número de entradas del historial (i.e., cuántas

direcciones han sido visitadas).

4. previous. Cadena que contiene la URL completa de la anterior entrada en el

historial.

Métodos

1. back(). Vuelve a cargar la URL del documento anterior dentro del historial.

2. forward(). Vuelve a cargar la URL del documento siguiente dentro del

historial.

3. go(posicion). Vuelve a cargar la URL del documento especificado por

posicion dentro del historial. posicion puede ser un entero, en cuyo caso

indica la posición relativa del documento dentro del historial; o puede ser una

cadena de caracteres, en cuyo caso representa toda o parte de una URL que

esté en el historial.

El Objeto Document

El objeto document es el que tiene el contenido de toda la página que se está

visualizando. Esto incluye el texto, imágenes, enlaces, formularios, entre otros.

Gracias a este objeto vamos a poder añadir dinámicamente contenido a la página, o

hacer cambios, según nos convenga.

Propiedades

1. alinkColor. Esta propiedad tiene almacenado el color de los enlaces activos

2. anchors. Se trata de un array con los enlaces internos existentes en el

documento

3. applets. Es un array con los applets existentes en el documento

4. bgColor. Propiedad que almacena el color de fondo del documento

5. cookie. Es una cadena con los valores de las cookies del documento actual


6. domain. Guarda el nombre del servidor que ha servido el documento

7. embeds. Es un array con todos los EMBED del documento

8. fgColor. En esta propiedad tenemos el color del primer plano

9. forms. Se trata de un array con todos los formularios del documento. Los

formularios tienen a su vez elementos (cajas de texto, botones, etc) que tienen

sus propias propiedades y métodos, y serán tratados en el siguiente capítulo.

10. images. Array con todas las imágenes del documento

11. lastModified. Es una cadena con la fecha de la última modificación del

documento

12. linkColor. Propiedad que almacena el color de los enlaces

13. links. Es un array con los enlaces externos

14. location. Cadena con la URL del documento actual

15. referrer. Cadena con la URL del documento que llamó al actual, en caso de

usar un enlace.

16. title. Cadena con el título del documento actual

17. vlinkColor. Propiedad en la que se guarda el color de los enlaces visitados

Métodos

1. clear(). Limpia la ventana del documento

2. open(). Abre la escritura sobre un documento.

3. close(). Cierra la escritura sobre el documento actual

4. write(). Escribe texto en el documento.

5. writeln(). Escribe texto en el documento, y además lo finaliza con un salto de

línea

El Objeto Anchor

Este objeto engloba todas las propiedades que tienen los enlaces internos al

documento actual.

Propiedades

1. name. Nombre del ancla.

2. target. Es una cadena que tiene el nombre de la ventana o del frame

especificado en el parámetro TARGET


El Objeto Link

Este objeto engloba todas las propiedades que tienen los enlaces externos al

documento actual.

Propiedades

1. target. Es una cadena que tiene el nombre de la ventana o del frame

especificado en el parámetro TARGET

2. hash. Es una cadena con el nombre del enlace, dentro de la URL

3. host. Es una cadena con el nombre del servidor y número de puerto, dentro de

la URL

4. hostname. Es una cadena con el nombre de dominio del servidor (o la

dirección IP) dentro de la URL

5. href. Es una cadena con la URL completa

6. pathname. Es una cadena con el camino al recurso, dentro de la URL

7. port. Es una cadena con el número de puerto, dentro de la URL

8. protocol. Es una cadena con el protocolo usado, incluyendo los : (los dos

puntos), dentro de la URL

9. search. Es una cadena que tiene la información pasada en una llamada a un

script, dentro de la URL

El Objeto Image

Este objeto representa las imágenes que aparecen en los documentos. Se

pueden manipular las propiedades de las imgenes usando este objeto. Todas las

imágenes dentro de un documento particular sin almacenadas en el arreglo images. La

sintaxis usada para acceder a un objeto Images particular es:

document.images[0].src=”imagen.jpg”


Propiedades

1. border. Contiene el valor del parámetro 'border' de la imagen.

2. complete. Es un valor booleano que nos dice si la imagen se ha descargado

completamente o no.

3. height. Contiene el valor del parámetro 'height' de la imagen.

4. hspace. Contiene el valor del parámetro 'hspace' de la imagen.

5. lowsrc. Contiene el valor del parámetro 'lowsrc' de la imagen.

6. name. Contiene el valor del parámetro 'name' de la imagen.

7. src. Contiene el valor del parámetro 'src' de la imagen.

8. vspace. Contiene el valor del parámetro 'vspace' de la imagen.

9. width. Contiene el valor del parámetro 'width' de la imagen.

El Objeto Form

Este objeto es el contenedor de todos los elementos del formulario. Los

formularios se agrupan en el array forms dentro del objeto document. Cada elemento

de este array es un objeto de tipo form. Es decir, un formulario particular puede

accederse del siguiente modo:

document.forms[“nombreFormulario”]

document.forms[0]

Propiedades

1. action. Es una cadena que contiene la URL del parámetro ACTION del form,

es decir, la dirección en la que los datos del formulario serán procesados.

2. elements. Es un array que contiene todos los elementos del formulario, en el

mismo orden en el que se definen en el documento HTML. Por ejemplo, si en

el formulario hemos puesto, en este orden, una caja de texto, un checkbox y

una lista de selección, la caja de texto será elements[0], el checkbox será

elements[1] y la lista de selección será elements[2].

3. encoding. Es una cadena que tiene la codificación mime especificada en el

parámetro ENCTYPE del form.

4. method. Es una cadena que tiene el nombre del método con el que se va a

recibir/procesar la información del formulario (GET/POST).


Métodos

1. reset(). Resetea el formulario: tiene el mismo efecto que si pulsáramos un

botón de tipo RESET dispuesto en el form.

2. submit(). Envía el formulario: tiene el mismo efecto que si pulsáramos un

botón de tipo SUBMIT dispuesto en el form.

Objetos del Campo Formulario

Los objetos que representan los diversos campos de un formulario son objetos

form field. Los objetos form-field son:

1. Button

2. Submit

3. Reset

4. Textbox

5. Textarea

6. Password

7. Hidden

8. Radio

9. Checkbox

10. Select

Los Objetos Text, TextArea, Password

Estos objetos representan los campos de texto dentro de un formulario.

Además, el objeto password es exactamente igual que el text salvo en que no muestra

los caracteres introducidos por el usuario, poniendo asteriscos (*) en su lugar.

Propiedades

1. dafaultValue. Es una cadena que contiene el valor por defecto que se le ha

dado a uno de estos objetos por defecto.

2. name. Es una cadena que contiene el valor del parámetro NAME.

3. value. Es una cadena que contiene el valor del parámetro VALUE.

4. maxlength. Número máximo de caracteres que puede contener el campo de

texto.

5. type. Representa el atributo type del campo de formulario

6. form. Representa el formulario que almacena el campo de formulario.


Métodos

1. blur(). Pierde el foco del ratón sobre el objeto especificado.

2. focus(). Obtiene el foco del ratón sobre el objeto especificado.

3. select(). Selecciona el texto dentro del objeto dado.

Los Objetos Hidden, Button, Submit y Reset

Tenemos tres tipos de botones: un botón genérico, 'button', que no tiene

acción asignada, y dos botones específicos, 'submit' y 'reset'. Estos dos últimos sí que

tienen una acción asignada al ser pulsados: el primero envía el formulario y el

segundo limpia los valores del formulario.

Propiedades





Métodos

1. click(). Realiza la acción de pulsado del botón

NOTA: este método no es válido para el objeto hidden.

El Objeto CheckBox

Las "checkboxes" nos permiten seleccionar varias opciones marcando el

cuadrito que aparece a su izquierda. El cuadrito pulsado equivale a un "sí" y sin

pulsar a un "no" o, lo que es lo mismo, a "true" o "false".

Propiedades

1. checked. Valor booleano que nos dice si el checkbox está pulsado o no

2. defaultChecked. Valor booleano que nos dice si el checkbox debe estar

seleccionado por defecto o no






Métodos

1. click(). Realiza la acción de pulsado del botón

El Objeto Radio

Al contrario que con los checkbox, que nos permiten elegir varias

posibilidades entre las dadas, los objetos radio sólo nos permiten elegir una de entre

todas las que hay. Están pensados para posibilidades mútuamente excluyentes (no se

puede ser a la vez mayor de 18 años y menor de 18 años, no se puede estar a la vez

soltero y casado, etc.).

Propiedades

1. checked. Valor booleano que nos dice si el radio está seleccionado o no.

2. defaultChecked. Valor booleano que nos dice si el radio debe estar

seleccionado por defecto o no.

3. length. Valor numérico que nos dice el número de opciones dentro de un

grupo de elementos radio.



Métodos

1. click(). Realiza la acción de pulsado del botón.


El Objeto Select

Este objeto representa una lista de opciones dentro de un formulario. Puede

tratarse de una lista desplegable de la que podremos escoger alguna (o algunas) de sus

opciones.

Propiedades

1. length. Valor numérico que nos indica cuántas opciones tiene la lista

2. name. Es una cadena que contiene el valor del parámetro NAME

3. options. Se trata de un array que contiene cada una de las opciones de la lista.

Este array tiene, a su vez, las siguientes propiedades:

4. defaultSelected. Valor booleano que nos indica si la opción está seleccionada

por defecto.

5. index. Valor numérico que nos da la posición de la opción dentro de la lista.

6. length. Valor numérico que nos dice cuántas opciones tiene la lista.

7. options. Cadena con todo el código HTML de la lista.

8. selected. Valor booleano que nos dice si la opción está actualmente

seleccionada o no.

9. text. Cadena con el texto mostrado en la lista de una opción concreta.

10. value. Es una cadena que contiene el valor del parámetro VALUE de la

opción concreta de la lista.

11. selectedIndex. Valor numérico que nos dice cuál de todas las opciones

disponibles está actualmente seleccionada.

Eventos y Manejadores de Eventos

En JavaScript, la interacción con el usuario se consigue mediante la captura de

los eventos que éste produce. Un evento es una acción del usuario ante la cual puede

realizarse algún proceso (por ejemplo, el cambio del valor de un formulario, o la

pulsación de un enlace).

Los eventos se capturan mediante los manejadores de eventos. El proceso a

realizar se programa mediante funciones JavaScript llamadas por los manejadores de

eventos.


La siguiente tabla muestra los manejadores de eventos que pueden utilizarse

en JavaScript, la versión a partir de la cual están soportados y su significado.

Eventos Descripción

onAbort El usuario interrumpe la carga de una imagen

onBlur Un elemento de formulario, una ventana o un marco pierden el foco

onChange El valor de un campo de formulario cambia

onClick Se hace click en un objeto o formulario

onDblClick Se hace click doble en un objeto o formulario

onDragDrop El usuario arrastra y suelta un objeto en la ventana

onError La carga de un documento o imagen produce un error

onFocus Una ventana, marco o elemento de formulario recibe el foco

onKeyDown El usuario pulsa una tecla

onKeyPress El usuario mantiene pulsada una tecla

onKeyUp El usuario libera una tecla

onLoad El navegador termina la carga de una ventana

onMouseDown El usuario pulsa un botón del ratón

onMouseMove El usuario mueve el puntero

onMouseOut El puntero abandono una área o enlace

onMouseOver El puntero entra en una área o imagen

onMouseUp El usuario libera un botón del ratón

onMove Se mueve una ventana o un marco

onReset El usuario limpia un formulario

onResize Se cambia el tamaño de una ventana o marco

onSelect Se selecciona el texto del campo texto o área de texto de un

formulario

onSubmit El usuario envía un formulario

onUnload El usuario abandona una página

No todos los eventos son posibles sobre todos los objetos. El resumen de la

correspondencia entre eventos y objetos se muestra en la siguiente tabla.

Eventos Objetos para los q están definidos

onAbort Image

onBlur Button, Checkbox, FileUpload, Layer, Password, Radio, Reset,

Select, Submit, Text, Textarea, window

onChange FileUpload, Select, Text, Textarea

onClick Button, document, Checkbox, Link, Radio, Reset, Submit

onDblClick document, Link


onDragDrop Window

onError Image, window

onFocus Button, Checkbox, FileUpload, Layer, Password, Radio, Reset,

Select, Submit, Text, Textarea, window

onKeyDown document, Image, Link, Textarea

onKeyPress document, Image, Link, Textarea

onKeyUp document, Image, Link, Textarea

onLoad Image, Layer, window

onMouseDown Button, document, Link

onMouseMove Ninguno (debe asociarse a uno)

onMouseOut Layer, Link

onMouseOver Layer, Link

onMouseUp Button, document, Link

onMove Window

onReset Form

onResize Frame, Window

onSelect Text, Textarea

onSubmit Form

onUnload window


http://gollum.inforg.uniovi.es/aii/ejemplos.php?id_codigo=8&codigo=DOM+HTML

http://www.webestilo.com/javascript/js16.phtml

Excelente

http://gollum.inforg.uniovi.es/aii/ejemplos.php?id_codigo=8&codigo=DOM+HTML

http://www.webestilo.com/javascript/js16.phtml

guia java script

Education