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>

 document.write(“cadena a imprimir en la pagina HTML”): permite escribir
texto en la pagina html.
CONDICIONALES
Las construcciones de decisión permiten a los programadores ejecutar un
bloque particular de código basado en una condición. En JavaScript existen dos
bloques de construcción:
1. La sentencia if … else
2. La sentencia switch … case
La sentencia if … else:
La estructura más utilizada en JavaScript y en la mayoría de lenguajes de
programación es la estructura if. Se emplea para tomar decisiones en función de una
condición que puede ser verdadera (true) o falsa (false).
Usos del Condicional
Condicional Simple Condicional Dobles
if (edad>=18){
alert (“Mayor de edad”);
}
if (edad>=18){
alert (“Mayor de edad”);
} else {
alert (“Menor de edad”);
}
Condicional Anidados
if (num==1){
alert (“Romano I”);
} else
if (num==2) {
alert (“Romano II”);
} else
if (num==3) {
alert (“Romano III”);
} else
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .

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

Guia java script

Más contenido relacionado

La actualidad más candente (13)

Similar a Guia java script (20)

Último (20)

Guia java script