You are on page 1of 61

Manual de JavaScript.

1.

Introduccin.
1.1. Qu es JavaScript?
1.2. Jerarqua de los Objetos en JavaScript.
1.3. Dnde y Cmo Incluir JavaScript.
1.4. Gramtica.
1.5. Variables.
1.6. Tipos de Datos
1.7. Sentencias de Control:
1.7.1. if.
1.7.2. else if
1.7.3. switch.
1.7.4. while.
1.7.5. do while.
1.7.6. for.

2.

Operadores
2.1. Operadores Aritmticos.
2.2. Operadores de Comparacin.
2.3. Operadores Lgicos.

3.

Objetos del Lenguaje:


3.1. String.
3.1.1. Propiedades
3.1.1.1. Length
3.1.2. Mtodos
3.1.2.1. charAt().
3.1.2.2. indexOf().
3.1.2.3. lastIndexOf().
3.1.2.4. substring().
3.1.2.5. concat().
3.1.2.6. split().
3.1.2.7. toLowerCase().
3.1.2.8. toUpperCase().
3.2. Array.
3.2.1. Propiedades
3.2.1.1. Length
3.2.2. Mtodos.
3.2.2.1. push().
3.2.2.2. pop().
3.2.2.3. shift().
3.2.2.4. unshift().
3.2.2.5. join().
3.2.2.6. reverse().
3.2.2.7. sort().
3.3. Date.
3.3.1. getDate().
3.3.2. getDay().
3.3.3. getHours().
3.3.4. getMinutes().
3.3.5. getSeconds().
3.3.6. getMonth().
3.3.7. getYear().
3.3.8. getFullYear().
3.3.9. .toString().
3.4. Math.
3.4.1. Propiedades
3.4.1.1. Pi().

3.4.2. Mtodos
3.4.2.1. abs().
3.4.2.2. acos().
3.4.2.3. asin().
3.4.2.4. atan().
3.4.2.5. cos().
3.4.2.6. log().
3.4.2.7. pow().
3.4.2.8. random().
3.4.2.9. round().
3.4.2.10.sin().
3.4.2.11. sqrt().
3.4.2.12.tan().
3.5. Mtodos Globales.
3.5.1. eval().
3.5.2. isNaN().
3.5.3. parseFloat().
3.5.4. parseInt().
3.6. Mtodos Adicionales.
4.

Objetos del Navegador:


4.1. Objeto Window.
4.1.1. alert().
4.1.2. open() y confirm().
4.1.3. prompt().
4.2. Objeto Location.
4.3. Objeto History.
4.4. Objeto Document.
4.4.1. Propiedades:
4.4.1.1. bgColor().
4.4.1.2. fgColor().
4.4.1.3. linkColor().
4.4.1.4. vlinkColor().
4.4.1.5. location().
4.4.2. Mtodos:
4.4.2.1. write().
4.4.2.2. writeln().

5.

Objeto Form:
5.1. Cmo trabajar con formularios?
5.2. Text y password.
5.3. TextArea.
5.4. Checkbox.
5.5. Radio.
5.6. Select.
5.7. Button.
5.8. Reset.
5.9. Submit.

6.
7.

Eventos Adicionales.
CSS.

Qu es JavaScript?
Se trata de un lenguaje de tipo script compacto, basado en objetos y
guiado por eventos diseado especficamente para el desarrollo de aplicaciones cliente-servidor dentro
del mbito de Internet. Los programas JavaScript van incrustados en los documentos HMTL, y se
encargan de realizar acciones en el cliente, como pueden ser pedir datos, confirmaciones, mostrar
mensajes, crear animaciones, comprobar campos... JavaScript es un lenguaje de Alto Nivel con
capacidades orientadas a objetos, incrustado en los navegadores como Netscape e Internet Explorer, es
decir, no se necesita instalar ningn software adicional pues estos navegadores tienen a JavaScript
integrado, lo nico que se requiere es agregar los scripts en los documentos HTML bajo la sintaxis propia
tanto de JavaScript como de HTML.
Sintcticamente el ncleo de JavaScript se parece al de C, C++ y JAVA,
permitiendo utilizar estructuras de control como if, while y operadores como &&.
JavaScript es un lenguaje untyped, lo cual significa que las variables no
necesitan tener un tipo especfico de datos, es decir, las variables pueden contener cualquier tipo de dato.
La Jerarqua de los Objetos en JavaScript
La jerarqua que presentan los objetos del navegador, atendiendo a una relacin "contenedor contenido" que se da entre estos objetos. De forma esquemtica, esta jerarqua podemos representarla de
esta manera (al lado est la directiva HTML con que se incluyen en el documento objetos de este tipo,
cuando exista esta directiva):
* window
+ history
+ location
+ document <BODY> ... </BODY>
- anchor <A NAME="..."> ... </A>
- applet <APPLET> ... </APPLET>
- area <MAP> ... </MAP>
- form <FORM> ... </FORM>
+ button <INPUT TYPE="button">
+ checkbox <INPUT TYPE="checkbox">
+ fileUpload <INPUT TYPE="file">
+ hidden <INPUT TYPE="hidden">
+ password <INPUT TYPE="password">
+ radio
<INPUT TYPE="radio">
+ reset
<INPUT TYPE="reset">
+ select <SELECT> ... </SELECT>
- options <INPUT TYPE="option">
+ submit <INPUT TYPE="submit">
+ text
<INPUT TYPE="text">
+ textarea <TEXTAREA> ... </TEXTAREA>
- image <IMG SRC="...">
- link <A HREF="..."> ... </A>
- plugin <EMBED SRC="...">
+ frame
<FRAME>
* navigator
Segn esta jerarqua, podemos entender el objeto area (por poner un ejemplo) como un objeto
dentro del objeto document que a su vez est dentro del objeto window. La notacin "." se usa para
denotar a un objeto que est dentro de un objeto.
Por ejemplo, si queremos hacer referencia a una caja de texto, tendremos que escribir:

VENTANA.DOCUMENTO.FORMULARIO.CAJA_DE_TEXTO
donde ventana es el nombre del objeto window (su nombre por defecto es window), documento
es el nombre del objeto document (cuyo nombre por defecto es document), formulario es el nombre del
objeto forms (veremos que forms es un array) y caja_de_texto es el nombre del objeto textarea (cuyo
nombre por defecto es textarea).
En la mayora de los casos podemos ignorar la referencia a la ventana actual (window), pero ser
necesaria esta referencia cuando estemos utilizando mltiples ventanas, o cuando usemos frames. Cuando
estemos usando un nico frame, podemos pues ignorar explcitamente la referencia al objeto window, ya
que JS asumir que la referencia es de la ventana actual.
Tambin podemos utilizar la notacin de array para referirnos a algn objeto, por ejemplo,
cuando los objetos a usar no tienen nombre, como en este caso:

DOCUMENT.FORMS[0].ELEMENTS[1];
hace referencia al segundo elemento del primer formulario del documento; este elemento ser el
segundo que se haya creado en la pgina HTML.
Dnde y como incluir JavaScript
Existen distintos modos de incluir lenguaje JavaScript en una pgina.
La forma mas frecuente de hacerlo es utilizando la directiva <script> en un documento HTML
(se pueden incluir tantas directivas <script> como se quiera en un documento).
El formato es el siguiente:

<SCRIPT LANGUAGE="JAVASCRIPT">

El atributo lenguaje hace referencia a la versin de JavaScript que se va a utilizar en dicho script.
Otro atributo de la directiva script es src, que puede usarse para incluir un archivo externo que contiene
JavaScript y que quiere incluirse en el cdigo HTML.

<SCRIPT LANGUAGE=JAVASCRIPT SRC=ARCHIVE.JS></SCRIPT>

El archivo externo simplemente es un archivo del texto que contiene cdigo JavaScript, y cuyo
nombre acaba con la extensin js.
Puede incluirse tambin cdigo JavaScript como respuesta a algn evento:
<INPUT TYPE="SUBMIT" ONCLICK="ALERT('ACABAS DE HACER CLICK')";RETURN
FALSE; VALUE="CLICK">

Click

Nota: Los scripts pueden incluirse como comentarios para asegurar que su cdigo no es "visto" por
navegadores viejos que no reconocen JavaScript y as evitar errores.
<SCRIPT>
<!CDIGO DE JAVASCRIPT
//-->
</SCRIPT>

Gramtica
En la siguiente tabla se resume los elementos principales de la gramtica de JavaScript. Cada
uno de los elementos se ver en detalle a lo largo del manual.
Nota importante: JavaScript es sensible a maysculas y minsculas, todos los elementos de JavaScript
deben referenciarse cmo se definieron, no es lo mismo "Salto" que "salto".
Variables

Etiquetas que se refieren a un valor cambiante.

Operadores

Pueden usarse para calcular o comparar valores.


Ejemplo: pueden sumarse dos valores, pueden compararse dos valores...

Expresiones

Cualquier combinacin de variables, operadores, y declaraciones que evalan a algn


resultado.
Ejemplo: intTotal=100; intTotal > 100

Sentencias

Una sentencia puede incluir cualquier elemento de la gramtica de JavaScript. Las


sentencias de JavaScript pueden tomar la forma de condicional, bucle, o manipulaciones
del objeto. La forma correcta para separarlas es por punto y coma, esto slo es
obligatorio si las declaraciones mltiples residen en la misma lnea. Aunque es
recomendable que se acostumbre a terminar cada instruccin con un punto y coma, se
ahorrar problemas.

Objetos

Estructura "contenedora" de valores, procedimientos y funciones, cada valor refleja una


propiedad individual de ese objeto.

Funciones y
Mtodos

Una funcin de JavaScript es bastante similar a un" procedimiento" o" subprograma" en


otro lenguaje de programacin. Una funcin es un conjunto que realizan alguna accin.
Puede aceptar los valores entrantes (los parmetros), y puede devolver un valor saliente.
Un mtodo simplemente es una funcin contenida en un objeto.

Variables

Las variables almacenan y recuperan datos, tambin conocidos como "valores". Una variable
puede referirse a un valor que cambia o se cambia. Las variables son referenciadas por su nombre, y el
nombre que les es asignado debe ser conforme a ciertas reglas (debe empezar con una letra o ("_"); los
caracteres siguientes pueden ser nmeros (0-9), letras maysculas o letras minsculas).
Ejemplos de definiciones:

VAR_UNA_VARIABLE,P123ROBANDO,_123,MI_CARROOO;

Por supuesto, podemos inicializar una variable al declararla:

VAR UNA_VARIABLE=ESTA CADENITA DE TEXTO

Las variables en JavaScript pueden ser de alcance global o local. Una variable global es
accesible desde cualquier <script> de la pgina mientras que una variable local slo lo es desde la
funcin en la que fue declarada.
Normalmente, usted crea una nueva variable global asignndole simplemente un valor:
globalVariable=5;
Sin embargo, si usted est codificando dentro de una funcin y usted quiere crear una variable
local que slo tenga alcance dentro de esa funcin, debe declarar la nueva variable haciendo uso de var:
FUNCTION NEWFUNCTION{
VAR LOCALVARIABLE=1;
GLOBALVARIABLE=0;
.
}

Tipo de Datos
JavaScript reconoce seis tipos de valores diferentes: numricos, lgicos, objetos, cadenas, nulos
e indefinidos.
JavaScript tiene la peculiaridad de ser un lenguaje dbilmente tipado, esto es, una variable puede
cambiar de tipo durante su vida, por ejemplo uno puede declarar una variable que ahora sea un entero y
ms adelante una cadena.
MIVARIABLE=4
y despus:
MIVARIABLE=UNA_CADENA

A diferencia de otros lenguajes y como ya hemos visto, en JavaScript no es necesario declarar las
variables especificando el tipo de dato que contendrn, ser el propio interprete el que le asignar el tipo
apropiado. (Esto es as para seguir la filosofa de diseo de JavaScript que indica que se realizan
programas pequeos y que la idea es lograr que el programador realice los scripts de la manera ms
rpida posible).

Tipos de Datos:
Nmeros

Enteros o coma flotante.

Boleanos

True o False.

Cadenas

Los tipos de datos cadena deben ir delimitados por comillas simples o dobles.

Objetos

Obj = new Object();

Nulos

Null

Indefinidos Un valor indefinido es el que corresponde a una variable que ha sido creada pero no le ha
sido asignado un valor.

Sentencias de Control
if, control-statement
if es una sentencia de control que permite a JavaScript hacer decisiones, es decir, ejecutar
sentencias condicionalmente. Sintaxis:
IF (EXPRESSION)
STATEMENT
La expresin es evaluada y si el resultado es verdadero o se puede convertir a verdadero (por
ejemplo 1) la sentencia se ejecuta, si es falsa la sentencia no se ejecuta.
Una segunda forma de la sentencia de control if es la siguiente sintaxis:
IF (EXPRESSION)
STATEMENT1
ELSE
STATEMENT2

La expresin es evaluada y si el resultado es verdadero o se puede convertir a verdadero (por


ejemplo 1) la sentencia se ejecuta, si el resultado es falso la sentencia1 no se ejecuta y se ejecuta entonces
la sentencia2.

else if, control-statement


else if es una sentencia de control que se utiliza para evaluar una condicin y ejecutar una de dos piezas
de cdigo. Sintaxis:
IF (EXPRESSION)
STATEMENT1
ELSE IF (EXPRESSION)
STATEMENT2
ELSE
STATEMENT3

switch
switch es una mejor alternativa que if cuando se est evaluando a una misma variable para ejecutar
distintas acciones para cada caso posible, adems de ser ms optimo. Sintaxis:
SWITCH(EXPRESSION){
CASE A:
STATEMENTS
BREAK;
CASE B:
STATEMENTS
BREAK;
CASE C:
STATEMENTS
BREAK;
CASE D:
STATEMENTS
BREAK;
DEFAULT:
STATEMENTS
BREAK;
}
while, control statement
while permite evaluar acciones repetitivamente, se justifica su uso cuando no sabemos el nmero
de veces que deseamos repetir un bloque de cdigo. Sintaxis:
WHILE(EXPRESSION)
STATEMENT1

do while, control statement


La diferencia de do while con while, es que do while al menos ejecuta una vez el cdigo
contenido en la sentencia do ya que secuencialmente se ejecuta primero y despues se evalua y que
sintacticamente la sentencia while termina con punto y coma. Sintaxis:
DO{
STATEMENT1
}WHILE(EXPRESSION);

for, control statement


Al igual que while, la sentencia de control for permite repetir la ejecucin de un bloque de
cdigo, se justifica su uso cuando se conoce el nmero de veces que se tiene que repetir el cdigo.
Sintaxis:
FOR(INITIALIZE;TEST;INCREMENT)
STATEMENT

Operadores
Los operadores toman una o ms variables o valores (los operando) y devuelve un nuevo valor; por
ejemplo el ' +' operador puede agregar dos nmeros para producir un tercero. Lo operadores estn
clasificados en varias clases dependiendo de la relacin que ellos realizan:

Operadores Aritmticos

Operadores de Comparacin
Operadores Lgicos

Operadores Aritmticos
Los operadores aritmticos toman los valores numricos (literales o variables) como sus
operando y devuelve un solo valor numrico. Los operadores aritmticos normales son:
Operador

Nombre

Ejemplo Descripcin

Suma

5+6

Suma dos nmeros

Substraccin

7-9

Resta dos nmeros

Multiplicacin

6*3

Multiplica dos nmeros

Divisin

4/8

Divide dos nmeros

Mdulo: el resto despus


de la divisin

7%2

Devuelve el resto de dividir ambos nmeros,


en este ejemplo el resultado es 1

++

Incremento.

a++

Suma 1 al contenido de una variable.

--

Decremento.

a--

Resta 1 al contenido de una variable.

Invierte el signo de un
operando.

-a

Invierte el signo de un operando.

Operadores de Comparacin
Un operador de la comparacin compara sus operando y devuelve un valor lgico basado en si la
comparacin es verdad o no. Los operando pueden ser numricos o cadenas.
Operador

Descripcin

==

" Igual a" devuelve true si los operandos son iguales

===

Estrictamente "igual a" (JavaScript 1.3)

!=

" No igual a" devuelve true si los operandos no son iguales

!==

Estrictamente " No igual a" (JavaScript 1.3)

>

" Mayor que" devuelve true si el operador de la izquierda es mayor que el de la


derecha.

>=

" Mayor o igual que " devuelve true si el operador de la izquierda es mayor o igual
que el de la derecha.

<

" Menor que" devuelve true si el operador de la izquierda es menor que el de la


derecha.

<=

"Menor o igual que" devuelve true si el operador de la izquierda es menor o igual


que el de la derecha.

Nota:
En JavaScript 1.3 y JavaScript 1.1 o anteriores, los operadores de comparacin realizaban 'una
conversin de tipos' si era necesario. Es decir, si un operando era una cadena y el otro era un valor
numrico, JavaScript realizaba la conversin de la cadena a numrico antes de realizar la comparacin.
JavaScript 1.2 no realizaba 'conversiones de tipo', por eso si dos operadores eran de tipos
distintos no se realizaba la comparacin.
Finalmente, en las ltimas versiones de JavaScript se aaden los operadores de 'comparacin
estricta', los cuales realizarn la comparacin si los dos operandos son del mismo tipo.
Operadores Lgicos
Los operadores Lgicos se utilizan para combinar mltiples comparaciones en una expresin
condicional. Un operador lgico toma dos operandos cada uno de los cuales es un valor true o false y
devuelve un valor true o false.
Operador
&&

Descripcin
" Y " Devuelve true si ambos operadores son true.

||

" O " Devuelve true si uno de los operadores es true.

"No" Devuelve true si la negacin del operando es true.

OBJETOS DEL LENGUAJE


El Objeto String

Este objeto nos permite hacer diversas manipulaciones con las cadenas, para que trabajar con
ellas sea ms sencillo. Cuando asignamos una cadena a una variable, JS est creando un objeto de tipo
String que es el que nos permite hacer las manipulaciones.
Propiedades

length. Valor numrico que nos indica la longitud en caracteres de la cadena dada.
prototype Nos permite asignar nuevas propiedades al objeto String.

Mtodos

.charAt(indice)
.indexOf(caracter)
.lastIndexOf(cadena_buscada,indice)
.split(separador)
.substring(primer_Indice,segundo_Indice).
.concat(cadena1,cadena2)
.toLowerCase()
.toUpperCase()

Propiedad:
Length:
String.length(); Devuelve la longitud de cualquier cadena
Ejemplo:

Digite una frase:


Frase inicial

Obtener Longitud

Longitud:
13

CODIGO EN ARCHIVO DE JAVASCRIPT:


function longitud(cad3){
window.alert("La longitud de la cadena "+cad3+" es: " +cad3.length);
window.document.formulario1.campo2.value=cad3.length;
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Frase: <input type="text" name="campo1" value="Frase inicial" size="40">
Longitud: <input type="text" name="campo2" value="" size="10" disabled="true">
<input type="button" name="longitud_cad" value="Obtener Longitud"
OnClick="longitud(window.document.formulario1.campo1.value);>
</form>

Mtodos:
charAt():
String.charAt(indice): Devuelve el carcter situado en la posicin especificada por el ndice, si el ndice
indica una posicin inexistente no devuelve nada.

Ejemplo:

Digite una frase:


Frase inicial

Extraer

Digite la posicin del caracter, que desea extraer:


3

CODIGO EN ARCHIVO DE JAVASCRIPT:


function ver(cad,indice){
window.alert("El caracter "+indice+" es: "+cad.charAt(indice));
return; }
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Frase: <input type="text" name="campo1" value="Frase inicial" size="40">
Posicin: < input type="text" name="campo5" value="3" size="10">
<input type="button" name="extraer" value="Extraer"
OnClick="ver(document.formulario1.campo1.value,document.formulario1.campo5.value);> </form>
indexOf():
String.indexOf(caracter): Devuelve la posicin en donde encontr la cadena, si no la encontr devuelve
-1, el primer caracter corresponde a la posicin cero.
Ejemplo:
Buscar

Digite una frase:


Frase inicial

Digite la cadena a buscar:


a

CODIGO EN ARCHIVO DE JAVASCRIPT:


function busqueda(cad6,cadbuscar){
window.alert("La subcadena: "+cadbuscar+" esta en la posicion: "+cad6.indexOf(cadbuscar));
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Frase: <input type="text" name="campo1" value="Frase inicial" size="40">
Subcadena a buscar: <input type="text" name="campo3" value="a" size="10">
<input type="button" name="encontrar" value="Buscar"
OnClick="busqueda(document.formulario1.campo1.value,document.formulario1.campo3.value);">
</form>
lastIndexOf():
String.lastIndexOf(cadena_buscada,indice). Devuelve la posicin de la ltima ocurrencia de la "cadena
buscada" dentro de la cadena actual, a partir de la posicin dada por "ndice", y buscando hacia atrs. Este
ltimo argumento es opcional y, si se omite la bsqueda comienza por el ltimo carcter de la cadena,
devuelve -1 si cadena no encontrada.
Ejemplo:

Digite una frase:


Frase inicial

Digite la cadena a buscar:

Buscar

Digite la posicin desde la que se va a buscar:

CODIGO EN ARCHIVO DE JAVASCRIPT:


function busqueda1(cadena,subcadena,posicion){
if (posicion!=""){
window.alert("La subcadena: "+subcadena+" esta en la posicion:
"+cadena.lastIndexOf(subcadena,posicion));}
window.alert("La subcadena: "+subcadena+" esta en la posicion: "+cadena.lastIndexOf(subcadena));
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Frase: <input type="text" name="campo1" value="Frase inicial" size="40">
Subcadena a buscar: <input type="text" name="campo3" value="a" size="10">

Posicin desde la que se va a buscar: <input type="text" name="campo4" value="" size="5">


<input type="button" name="encontrar" value="Buscar"
OnClick="busqueda1(document.formulario1.campo1.value,document.formulario1.campo3.value,
document.formulario1.campo4.value);"">
</form>
subtsring():
String.substring(primer_Indice,segundo_Indice). Devuelve la subcadena que comienza en la
posicin 'primer_Indice' + 1' y que finaliza en la posicin 'segundo_Indice'. Si primer_Indice es
mayor que "segundo_Indice" empieza por 'segundo_Indice + 1' y termina en 'primer_Indice'.

Ejemplo:

Digite una frase:


Frase inicial

Primer ndice:
3

Obtener
Segundo ndice:
5

CODIGO EN ARCHIVO DE JAVASCRIPT:


function subcadena(cade,pindice,sindice) {
window.alert("Subcadena obtenida entre posicines: "+pindice+" y "+sindice+ " es: "
+cade.substring(pindice,sindice));
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Frase: <input type="text" name="campo1" value="Frase inicial" size="40">
Primer ndice:<input type="text" name="pindice" value="3" size="10">
Segundo ndice:<input type="text" name="sindice" value="5" size="10">
<input type="button" name="extraer" value="Obtener"
OnClick="subcadena(document.formulario1.campo1.value,document.formulario1.pindice.value,
document.formulario1.sindice.value);">
</form>
concat():
String.concat('hola'): Devuelve una cadena, cuyo resultado es la unin de dos.
Ejemplo:
CONCAT

Ingrese la primera cadena:

Cadena 1

Ingrese la segunda cadena:


Cadena 2

CODIGO EN ARCHIVO DE JAVASCRIPT:


function concatenar(cade,caden) {
window.alert("La primera cadena + La segunda cadena es igual a: "+cade.concat(caden));
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Cadena1: <input type="text" name="campo1" value="Frase inicial" size="20">
Cadena2:<input type="text" name="campo2" value="3" size="20">
<input type="button" name="unir" value="Concat"
OnClick="concatenar(document.formulario1.campo1.value,document.formulario1.campo2.value);">
</form>

split():
string.split(): Cuando se crea un arreglo con el constructor Array() o se define un arreglo literal se tiene
un propiedad especial llamada length la cual especifica cuantos elementos contiene el arreglo. La
propiedad length de un arreglo se actualiza automticamente para mantener su consistencia
cuando: se agregan nuevos elementos o se sobre escribe el arreglo.
Ejemplo:

Digite una frase:


Frase inicial

Obtener Arreglo

Digite un separador:

CODIGO EN ARCHIVO DE JAVASCRIPT:


function arreglo(cad5,separador){
var arreg = new Array();
arreg = cad5.split(separador);
total="";
for(i=0;i
total=total +(arreg[i]+"\n");
if (separador==" "){
window.alert("Subcadenas resultantes de separar por el espacio "+"\n"+ total);
return;}

window.alert("Subcadenas resultantes de separar por el "+separador+"\n"+ total);


return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Frase: <input type="text" name="campo1" value="Frase inicial" size="40">
Separador: <input type="text" name="campo2" value="" size="10">
<input type="button" name="arreglo1" value="Obtener Arreglo"
OnClick="arreglo(window.document.formulario1.campo1.value,
window.document.formulario1.campo2.value);> </form>

toLowerCase():
String.toLowerCase(); Cambia la cadena a minsculas.
Ejemplo:

Digite una frase:


MINUSCULAS

Minsculas

Resultado en minsculas:

CODIGO EN ARCHIVO DE JAVASCRIPT:


function minusculas(cad2){
document.formulario1.campo2.value=cad2.toLowerCase();
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Frase: <input type="text" name="campo1" value="Frase inicial" size="20">
Resultado: <input type="text" name="campo2" value="" size="20" disabled="true">
<input type="button" name="minuscula" value="Minsculas"
OnClick="minusculas(window.document.formulario1.campo1.value);"> </form>

toUpperCase():
String.toUpperCase(); Cambia la cadena a maysculas.

Digite una frase:

Maysculas

maysculas

Resultado en maysculas:

CODIGO EN ARCHIVO DE JAVASCRIPT:


function mayusculas(cad2){
document.formulario1.campo2.value=cad2.toUpperCase();
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Frase: <input type="text" name="campo1" value="Frase inicial" size="20">
Resultado: <input type="text" name="campo2" value="" size="20" disabled="true">
<input type="button" name="mayuscula" value="Maysculas"
OnClick="mayusculas(window.document.formulario1.campo1.value);"> </form>

El Objeto Array
Un arreglo es un tipo de dato que contiene o almacena piezas de datos a las cuales les
corresponden un nmero o ndice. Cada dato numerado es llamado elemento del arreglo y el nmero
asignado a un elemento es llamado ndice.
Ya que JavaScript es un lenguaje sin tipo, un elemento de un arreglo puede ser de cualquier tipo
de dato (entero, booleano, string, etc.), un mismo arreglo puede contener diferentes elementos los cuales
pueden ser de un tipo de dato diferente. Los elementos del arreglo pueden contener otros arreglos lo cual
permite crear estructuras que son arreglos de arreglos.
Los arreglos se crean con el constructor Array() y el operador new.
VAR A = NEW ARRAY()
Crea un arreglo vaco sin elementos
VAR A = NEW ARRAY(5,4,3,2,1,ARREGLOS,PRUEBA)

Invoca el constructor Array() que permite especificar explicitamente los valores para los
primeros n elementos de un arreglo.
VAR A = NEW ARRAY(10)
En JavaScript un arreglo puede contener cualquier nmero de elementos y cambiar el nmero
de elementos en cualquier momento.
Propiedades

length. especifica cuantos elementos contiene el arreglo.

Mtodos

.push(elemento)
.pop()
.shift()
.unshift(elemento)
.join(separador)
.reverse()
.sort()

Propiedades:
length()
array.length()Cuando se crea un arreglo con el constructor Array() o se define un arreglo literal se tiene
un propiedad especial llamada length la cual especifica cuantos elementos contiene el arreglo. La
propiedad length de un arreglo se actualiza automticamente para mantener su consistencia cuando
se agregan nuevos elementos o se sobrescribe el arreglo.

Ejemplo:
<SCRIPT language=JavaScript> <!-var a = new Array();
document.write('Longitud del arreglo a : ' + a.length + '<br>');
a = new Array(10);
document.write('Longitud del arreglo a(10) : ' + a.length + '<br>');
a = new Array(1,2,3);
document.write('Longitud del arreglo a(1,2,3) : ' + a.length + '<br>');
a = [4,5];
document.write('Longitud del arreglo a[4,5] : ' + a.length + '<br>');
a[5] = -1;
document.write('Longitud del arreglo a[5] = -1 : ' + a.length + '<br>');
for(var i = 0; i < a.length; i++){
document.write('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Elemento ' + i + ' : ' + a[i] + '<br>');
//--> </SCRIPT>
Salida:
Longitud del arreglo a : 0
Longitud del arreglo a(10) : 10
Longitud del arreglo a(1,2,3) : 3
Longitud del arreglo a[4,5] : 2
Longitud del arreglo a[5] = -1 : 6
Elemento 0 : 4
Elemento 1 : 5
Elemento 2 : undefined
Elemento 3 : undefined
Elemento 4 : undefined
Elemento 5 : -1
push()
array.push(): El mtodo push() de un arreglo, inserta uno o ms elementos al final del arreglo y regresa
el ltimo valor que inserto.

Ejemplo:

Arreglo existente a=[1,3,5,7,8,9 ]

Digite el elemento a insertar:


10

PUSH

CODIGO EN ARCHIVO DE JAVASCRIPT:


function insertar(elemento) {
var a=new Array(1,3,5,7,8,9);
a.push(elemento);
var total="[";
for(i=0;i
total=total +(a[i]+" ");
total=total+"]";
window.alert(total);
return; }
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Elemento a insertar: <input type="text" name="campo1" value="10" size="40">
<input type="button" name="insertar1" value="Push"
OnClick="insertar(window.document.formulario1.campo1.value);">
</form>

pop()
array.pop()El mtodo pop() de un arreglo, elimina el ltimo elemento de un arreglo, decrementa la
longitud del arreglo y regresa el valor que elimino.
Ejemplo:

Arreglo existente a=[1,3,5,7,8,9 ]

Eliminar ltimo elemento:


POP

CODIGO EN ARCHIVO DE JAVASCRIPT:


var a=new Array(1,3,5,7,8,9);
function insertar_primero(elemento) {
a.unshift(elemento);
var total="[";

for(i=0;i
total=total +(a[i]+" ");
total=total+"]";
window.alert(total);
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
<input type="button" name="eliminar1" value="Pop" OnClick="eliminar();">
</form>
shift()
array.shift(): El mtodo shift() de un arreglo, elimina elementos al inicio del arreglo y regresa el primer
elemento eliminado.
Ejemplo:

Arreglo existente a=[1,3,5,7,8,9 ]

Eliminar ltimo elemento:


SHIFT

CODIGO EN ARCHIVO DE JAVASCRIPT:


var a=new Array(1,3,5,7,8,9);
function eliminar_primero(){
a.shift();
var total="[";
for(i=0;i
total=total +(a[i]+" ");
total=total+"]";
window.alert(total);
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
<input type="button" name="eliminar2" value="Shift" OnClick="eliminar_primero();">
</form>
unshift()
array.unshift():El mtodo unshift() de un arreglo, agrega un elemento o ms al comienzo del arreglo.
Ejemplo:

Arreglo existente a=[1,3,5,7,8,9 ]

Digite el elemento a insertar:

10

UNSHIFT

CODIGO EN ARCHIVO DE JAVASCRIPT:


var a=new Array(1,3,5,7,8,9);
function insertar_primero(elemento) {
a.unshift(elemento);
var total="[";
for(i=0;i
total=total +(a[i]+" ");
total=total+"]";
window.alert(total);
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Elemento a insertar: <input type="text" name="campo1" value="10" size="40">
<input type="button" name="insertar2" value="unshift"
OnClick="insertar_primero(window.document.formulario1.campo1.value);">
</form>
join()
array.join(): El mtodo join() de un arreglo convierte todos los elementos de un arreglo a un string y los
concatena. Como parte de un argumento que acepta este mtodo, se puede especificar un string
que sirva de separador, siendo el default una (,).
Ejemplo:

Arreglo existente a=[12,5,95]

Digite el separador
:

JOIN

El mtodo join() funciona a la inversa del mtodo String.split() el cual


crea un arreglo.
CODIGO EN ARCHIVO DE JAVASCRIPT:
var b=new Array(12,5,95);
function obtener_cadena(separador) {
cadena=b.join(separador);
window.alert(cadena);
return;}
CODIGO EN DOCUMENTO DE HTML:

<form name="formulario1" action="ingreso.php" method="post">


Separador: <input type="text" name="separador1" value=":" size="5">
<input type="button" name="unir2" value="join"
OnClick="obtener_cadena(window.document.formulario1.separador1.value);">
</form>

reverse()
array.reverse(): El mtodo reverse() de un arreglo, ordena al revs los elementos de un arreglo.
Ejemplo:

Arreglo existente a=[12,5,95]

Obtener arreglo invertido:


REVERSE

CODIGO EN ARCHIVO DE JAVASCRIPT:


var b=new Array(12,5,95);
function invertir(){
s=b.reverse();
window.alert("El vector invertido es igual a : ["+s+"]");
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
<input type="button" name="invertir1" value="reverse" OnClick="invertir();"> </form>
sort()
array.sort(): El mtodo sort() de un arreglo, ordena los elementos de un arreglo.

Arreglo existente aNombres=['Maria


Elena','Gerardo','Jessica','Angel','Genoveva'];

Obtener arreglo ordenado:


SORT

CODIGO EN ARCHIVO DE JAVASCRIPT:

function ordenar() {
var aNombres = ['Maria Elena','Gerardo','Jessica','Angel','Genoveva'];
aNombres = aNombres.sort();
window.alert(aNombres); }

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario1" action="ingreso.php" method="post">
<input type="button" name="ordenar1" value="sort" OnClick="ordenar();"> </form>

El Objeto Date
Sobre este objeto recae todo el trabajo con fechas en Javascript, como obtener una fecha, el da la
hora y otras cosas.Para trabajar con fechas necesitamos instanciar un objeto de la clase Date y con l ya
podemos realizar las operaciones que necesitemos.
Un objeto de la clase Date se puede crear de dos maneras distintas. Por un lado podemos crear el
objeto con el da y hora actuales y por otro podemos crearlo con un da y hora distintos a los actuales.
Esto depende de los parmetros que pasemos al construir los objetos.
Para crear un objeto fecha con el da y hora actuales colocamos los parntesis vacos al llamar al
constructor de la clase Date.
MIFECHA= NEW DATE()

Para crear un objeto fecha con un da y hora distintos de los actuales tenemos que indicar entre
parntesis el momento con que inicializar el objeto. Hay varias maneras de expresar un da y hora vlidas,
por eso podemos construir una fecha guindonos por varios esquemas. Estos son dos de ellos, suficientes
para crear todo tipo de fechas y horas.
MIFECHA = NEW DATE(AO,MES,DA,HORA,MINUTOS,SEGUNDOS)
MIFECHA=NEWDATE(AO,MES,DA)

Los valores que debe recibir el constructor son siempre numricos. Un detalle, el mes comienza
por 0, es decir, enero es el mes 0. Si no indicamos la hora, el objeto fecha se crea con hora 00:00:00.
Los objetos de la clase Date no tienen propiedades pero si un montn de mtodos, vamos a
verlos ahora.
Mtodos

.getDate()
.getDay()
.getHours()
.getMinutes()
.getSeconds().
.getMonth()
.getYear()
.getFullYear()

Mtodos:
getDate
Date.getDate(); Devuelve el da del mes.
Ejemplo:

Qu da es hoy?
DIA DEL MES

CODIGO EN ARCHIVO DE JAVASCRIPT:


function diadelmes() {
var ahora=new Date();
document.formulario1.diames.value=ahora.getDate();
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Dia del mes: <input type="text" name="diames" value="" size="5">;
<input type="button" name="boton_getDate" value="Da del Mes" OnClick="diadelmes();">
</form>
getDay
Date.getDay(); Devuelve el da de la semana. Comienza desde el cero (Domingo), y termina en seis
(Sbado).
Ejemplo:

Qu da de la semana es hoy?
DIA DE LA SEMANA

CODIGO EN ARCHIVO DE JAVASCRIPT:


function diasemana(){
var ahora=new Date();
var dias=new Array();
dias[0]="Domingo";
dias[1]="Lunes";
dias[2]="Martes";
ias[3]="Mircoles";
dias[4]="Jueves";
dias[5]="Viernes";

dias[6]="Sbado";
document.formulario1.dia_semana.value=ahora.getDay()+" - "+dias[ahora.getDay()];}

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario1" action="ingreso.php" method="post">
Dia de la semana: <input type="text" name="dia_semana" value="" size="15">
<input type="button" name="boton_dsemana" value="Da de la Semana" OnClick="diasemana();">
</form>

getHours
Date.getHours(); Retorna la hora actual.
Ejemplo:

En qu hora estamos?
HORA

CODIGO EN ARCHIVO DE JAVASCRIPT:


function hora(){
var ahora=new Date();
document.formulario1.horita.value=ahora.getHours();}

CODIGO EN DOCUMENTO DE HTML


<form name="formulario1" action="ingreso.php" method="post">
Hora: <input type="text" name="horita" value="" size="5">
<input type="button" name="boton_hour" value="Hora" OnClick="hora();">
</form>

getMinutes
Date.getMinutes(); Devuelve los minutos.
Ejemplo:

<Cuntos minutos han transcurrido?


MINUTOS

CODIGO EN ARCHIVO DE JAVASCRIPT:


function minutos(){
var ahora=new Date();
document.formulario1.minutitos.value=ahora.getMinutes();}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Minutos: <input type="text" name="minutitos" value="" size="5">
<input type="button" name="boton_minutes" value="Minutos" OnClick="minutos();">
</form>

getSeconds
Date.getSeconds(); Devuelve los segundos.

Ejemplo:

Cuntos segundos han transcurrido?


SEGUNDOS

CODIGO EN ARCHIVO DE JAVASCRIPT:


function segundos(){
var ahora=new Date();
document.formulario1.segunditos.value=ahora.getSeconds();}

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario1" action="ingreso.php" method="post">
Segundos: <input type="text" name="segunditos" value="" size="5">
<input type="button" name="boton_seconds" value="Segundos" OnClick="segundos();">
</form>
getMonth
Date.getMonth(); Devuelve el mes (atencin al mes que empieza por 0).
Ejemplo:

En qu mes estamos?

MES
CODIGO EN ARCHIVO DE JAVASCRIPT:

function mes(){
var ahora=new Date();
var mes=new Array();
mes[0]="Enero";
mes[1]="Febrero";
mes[2]="Marzo";
mes[3]="Abril";
mes[4]="Mayo";
mes[5]="Junio";
mes[6]="Julio";
mes[7]="Agosto";
mes[8]="Septiembre";
mes[9]="Octubre";
mes[10]="Noviembre";
mes[11]="Diciembre";
document.formulario1.mesito.value=ahora.getMonth()+" - "+mes[ahora.getMonth()];}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Mes: <input type="text" name="mesito" value="" size="15">
<input type="button" name="boton_month" value="Mes" OnClick="mes();">
</form>

getYear
Date.getYear(); Retorna el ao, al que se le ha restado 1900. Por ejemplo, para el 1995 retorna 95, para el
2005 retorna 105. Este mtodo est obsoleto en Netscape a partir de la versin 1.3 de Javascript y ahora
se utiliza getFullYear().

Ejemplo:
En qu ao estamos?
AO

CODIGO EN ARCHIVO DE JAVASCRIPT:


function a_o(){
var ahora=new Date();
var actual=ahora.getYear()+1900;
document.formulario1.a_ito.value=ahora.getYear()+" Ao actual: "+ actual;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Ao: <input type="text" name="a_ito" value="" size="25">
<input type="button" name="boton_year" value="Ao" OnClick="a_o();">
</form>
getFullYear
Date.getYear(); Retorna el ao con todos los dgitos. Usar este mtodo para estar seguros de que
funcionar todo bien en fechas posteriores al ao 2000.

Ejemplo:

En qu ao estamos?
AO

CODIGO EN ARCHIVO DE JAVASCRIPT:


function a_ocompleto(){
var ahora=new Date();
document.formulario1.a_ofull.value=ahora.getFullYear();}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Ao: <input type="text" name="a_ofull" value="" size="5">
<input type="button" name="boton_yearfull" value="Ao Actual" OnClick="a_ocompleto();">
</form>
toString
Date.toString(); Pasa de formato fecha a string.
Ejemplo:

En qu fecha estamos?
FECHA COMPLETA

CODIGO EN ARCHIVO DE JAVASCRIPT:


function fecha(){
var ahora=new Date();
document.formulario1.cadena.value=ahora.toString();}
CODIGO EN DOCUMENTO DE HTML
<form name="formulario1" action="ingreso.php" method="post">
Fecha: <input type="text" name="cadena" value="" size="35">
<input type="button" name="boton_cadena" value="Fecha Cadena" OnClick="fecha();">
</form>

El Objeto Math
La clase Math proporciona los mecanismos para realizar operaciones matemticas en Javascript.
Algunas operaciones se resuelven rpidamente con los operadores aritmticos que ya conocemos, como la

multiplicacin o la suma, pero hay una serie de operaciones matemticas adicionales que se tienen que
realizar usando la clase Math como pueden ser calcular un seno o hacer una raiz cuadrada.
Propiedades

E. Nmero E o constante de Euler la base de los logaritmos neperianos.


LN10. Logaritmo neperiano de 10.
LOG2E. Logaritmo en base 2 de E.
LN10. Logaritmo neperiano de 10.
PI.
SQRT1_2. Raiz cuadrada de un medio.
SQRT2. Raiz cuadrada.

Mtodos:

.abs()
.acos
.asin()
.atan()
.cos()
.log()
.pow(numero,potencia)
.random()
.round()
.sin()
.sqrt()
.tan()

Propiedades:
PI()
math.PI()Conocido nmero para clculo con crculos.

Ejemplo:

Valor de PI:

OBTENER PI

CODIGO EN ARCHIVO DE JAVASCRIPT:


function valor_pi(){
document.formulario1.nume.value=Math.PI;}

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario1" action="ingreso.php" method="post">
PI<input type="text" name="nume" value="" size="20" >
<input type="button" name="boton_PI" value="Obtener PI" OnClick="valor_pi();">
</form>

Mtodos:
abs()
math.abs(): Devuelve el valor absoluto de un nmero. El valor despus de quitarle el signo.

Ejemplo:

Digite un nmero:

-1

VALOR ABSOLUTO
CODIGO EN ARCHIVO DE JAVASCRIPT:
function absoluto(x){
var resultado;
resultado=Math.abs(x);
window.alert("El valor absoluto de "+x+ " es: "+resultado);
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Nmero: <input type="text" name="numero" value="-1" size="5">
<input type="button" name="boton_abs" value="Valor Absoluto"
OnClick="absoluto(window.document.formulario1.numero.value);">
</form>

acos()
math.acos(): Devuelve el arcocoseno de un nmero en radianes.
Ejemplo:

Digite el ngulo en radianes:


OBTENER ACOS

CODIGO EN ARCHIVO DE JAVASCRIPT:


function arcocoseno(x1) {
var resultado1;
resultado2=parseFloat(x1);
resultado1=Math.acos(resultado2);
window.alert("El acos del ngulo en radianes es : "+resultado1);
return;}
CODIGO EN DOCUMENTO DE HTML:

0,017453

<form name="formulario1" action="ingreso.php" method="post">


Angulo: <input type="text" name="angulo" value="0,017453" size="10" >
<input type="button" name="boton_acos" value="Obtener acos"
OnClick="arcocoseno(window.document.formulario1.angulo.value);">
</form>
asin()
math.asin(): Devuelve el arcoseno de un nmero en radianes.
Ejemplo:

Digite el ngulo en radianes:

1,56858

OBTENER ASIN
CODIGO EN ARCHIVO DE JAVASCRIPT:
function arcoseno(x1){
var resultado1;
resultado2=parseFloat(x1);
resultado1=Math.asin(resultado2);
window.alert("El asin del ngulo en radianes es : "+resultado1);
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Angulo: <input type="text" name="angulo1" value="1,56858" size="10">
<input type="button" name="boton_asin" value="Obtener asin"
OnClick="arcoseno(window.document.formulario1.angulo1.value);">
</form>

atan()
math.atan(): Devuelve un arcotangente de un nmero en radianes.
Ejemplo:

Digite el ngulo en radianes:


OBTENER TAN

CODIGO EN ARCHIVO DE JAVASCRIPT:


function arcotangente(x1){
var resultado1;
resultado2=parseFloat(x1);
resultado1=Math.atan(resultado2);

1,56858

window.alert("El atan del ngulo en radianes es : "+resultado1);


return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Angulo: <input type="text" name="angulo2" value="1,56858" size="10" >
<input type="button" name="boton_atan" value="Obtener atan"
OnClick="arcotangente(window.document.formulario1.angulo2.value);">
</form>
cos()
math.cos(): Retorna el coseno de un nmero.
Ejemplo:

Digite el ngulo en radianes:

1,56858

OBTENER COS

CODIGO EN ARCHIVO DE JAVASCRIPT:


function coseno(x1) {
var resultado1;
resultado2=parseFloat(x1);
resultado1=Math.cos(resultado2);
window.alert("El cos del ngulo en radianes es : "+resultado1);
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Angulo: <input type="text" name="angulo3" value="1,56858" size="10" >
<input type="button" name="boton_cos" value="Obtener cos"
OnClick="coseno(window.document.formulario1.angulo3.value);">
</form>
log()
math.log() Devuelve el logaritmo neperiano de un nmero.
Ejemplo:

Digite un nmero:

1000

LOGARITMO

CODIGO EN ARCHIVO DE JAVASCRIPT:


function logaritmo(x2) {
var resultad;
resultad=Math.log(x2);
window.alert("El logaritmo de "+x2 + " es: "+resultad);
return; }

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario1" action="ingreso.php" method="post">
Nmero: <input type="text" name="numero1" value="1000" size="10" >
<input type="button" name="boton_log" value="Logaritmo"
OnClick="logaritmo(window.document.formulario1.numero1.value);">
</form>
pow()
math.pow(): Recibe dos nmeros como parmetros y devuelve el primer nmero elevado al segundo
nmero.

Ejemplo:

Digite un nmero:

Digite la potencia:
POTENCIA

CODIGO EN ARCHIVO DE JAVASCRIPT:


function elevado(num,num1) {
var resultado;
resultado=Math.pow(num,num1);
window.alert("El nmero "+num+" al " + num1+ " es: "+resultado);
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Nmero: <input type="text" name="numero2" value="2" size="5" >
Potencia: <input type="text" name="numero3" value="2" size="5" >
<input type="button" name="boton_pow" value="Potencia"
OnClick="elevado(document.formulario1.numero2.value,
document.formulario1.numero3.value);"> </form>
random()
math.random(): Devuelve un nmero aleatorio entre 0 y 1.
Ejemplo:

Obtener nmero aleatorio:


OBTENER RANDMICO

CODIGO EN ARCHIVO DE JAVASCRIPT:


function aleatorio() {
var total;

total=Math.random();
window.alert("El nmero aleatorio es: "+total);
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
<input type="button" name="boton_random" value="Obtener randmico" OnClick="aleatorio();">
</form>
round()
math.round(): Redondea al entero ms prximo.

Ejemplo:

Digite un nmero:
4,56858

REDONDEAR

CODIGO EN ARCHIVO DE JAVASCRIPT:


function redondear(num){
var tot,nume;
nume=parseFloat(num);
tot=Math.round(nume);
window.alert("El nmero: "+num+" redondeado es igual a: "+tot);
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Nmero:<input type="text" name="numero5" value="4,56858" size="10">
<input type="button" name="boton_redondear" value="Redondear"
OnClick="redondear(document.formulario1.numero5.value);">
</form>
sin()
math.sin(): Devuelve el seno de un nmero con un ngulo en radianes.
Ejemplo:

Digite el ngulo en radianes:


OBTENER SENO

CODIGO EN ARCHIVO DE JAVASCRIPT:

1,56858

function seno(x1) {
var resultado1;
resultado2=parseFloat(x1);
resultado1=Math.sin(resultado2);
window.alert("El seno del ngulo en radianes es : "+resultado1);
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Angulo: <input type="text" name="angulo4" value="1,56858" size="10">
<input type="button" name="boton_sin" value="Obtener seno"
OnClick="seno(document.formulario1.angulo4.value);">
</form>

sqrt()
math.sqrt(): Retorna la raiz cuadrada de un nmero.
Ejemplo:

Digite un nmero:

RAIZ CUADARADA

CODIGO EN ARCHIVO DE JAVASCRIPT:


function raiz(numerito) {
var raizobtenida;
raizobtenida=Math.sqrt(numerito);
window.alert("La raz cuadrada de "+numerito+" es: "+raizobtenida);
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Nmero: <input type="text" name="numero6" value="2" size="5">
<input type="button" name="boton_raiz" value="Raiz cuadrada"
OnClick="raiz(document.formulario1.numero6.value);">
</form>

tan()
math.tan(): Devuelve el seno de un nmero con un ngulo en radianes.

Ejemplo:

Digite el ngulo en radianes:

1,56858

OBTENER TAN

CODIGO EN ARCHIVO DE JAVASCRIPT:


function tangente(x1) {
var resultado1;
resultado2=parseFloat(x1);
resultado1=Math.tan(resultado2);
window.alert("La tangente del ngulo en radianes es : "+resultado1);
return;}

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario1" action="ingreso.php" method="post">
Angulo: <input type="text" name="angulo5" value="1,56858" size="10">
<input type="button" name="boton_tan" value="Obtener tan"
OnClick="tangente(document.formulario1.angulo5.value);">
</form>

Mtodos Globales
Adems de los mtodos proporcionados por los objetos antes mencionados, existen los llamados mtodos
globales que nos permiten realizar diversas aplicaciones importantes en JavaScript.
Mtodos:

eval()
isNaN()
parseFloat
parseInt()

eval
Funcin eval: Esta funcin es muy importante, lo que hace esta funcin es evaluar la cadena que le
enviamos, y realiza las operaciones que estn dentro de la misma; pero solo ejecuta las operaciones
bsicas como son: suma, resta, multiplicacin y divisin .
Ejemplo:

Cadena:

3+5

Resultado:

APLICAR FUNCION EVAL()

CODIGO EN ARCHIVO DE JAVASCRIPT:

function valoreval(x) {
var resultado;
resultado=eval(x);
document.formulario1.result.value=resultado;
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Cadena: <input type="text" name="nume_e" value="3 + 5" size="15">
Resultado: <input type="text" name="result" value="" size="15">
<input type="button" name="boton_E" value="Aplicar funcin (eval)"
OnClick="valoreval(document.formulario1.nume_e.value);">
</form>

isNaN
Funcin isNaN: Esta funcin devuelve un boleano dependiendo de si lo que recibe es un nmero o no.
Lo nico que puede recibir es un nmero o la expresin NaN. Si recibe un NaN devuelve true y si recibe
un nmero devuelve false. La funcin suele trabajar en combinacin con la funcin parseInt o parseFloat,
para saber si lo que devuelven estas dos funciones es un nmero o no.
Ejemplo:

Ingrese cadena o nmero:

hola mundo

APLICAR FUNCION ISNAN()


Resultado:

CODIGO EN ARCHIVO DE JAVASCRIPT:


function cadnume(x1) {
var resultado2;
resultado2=isNaN(x1);
document.formulario1.result2.value=resultado2;
return;}

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario1" action="ingreso.php" method="post">
Cadena: <input type="text" name="cadnum" value="hola mundo" size="10">
Resultado: <input type="text" name="result2" value="" size="10">
<input type="button" name="boton_cn" value="Aplicar funcin (isNaN)"
OnClick="cadnume(document.formulario1.cadnum.value);">
</form>
parseFloat
Funcin parseFloat

Esta funcin recibe un nmero real, escrito como una cadena de caracteres, en realidad puede recibir
otros tipos de variables, dado que las variables no tienen tipo en Javascript, pero se suele utilizar
pasndole un string para convertir la variable de texto en un nmero real.
A continuacin una serie de llamadas a la funcin parseFloat para ver lo que devuelve y entender la
funcin.

document.write (parseFloat("28")) Devuelve el numero 28


document.write (parseFloat("34.8")) Devuelve el numero 34.8
document.write (parseFloat("hola mundo")) Devuelve el numero NaN (No es nmero).

Ejemplo:

Cadena:

3.45636

Resultado:

APLICAR FUNCION PARSEFLOAT()

CODIGO EN ARCHIVO DE JAVASCRIPT:


function adecimal(cad) {
var resultado1;
resultado1=parseFloat(cad);
document.formulario1.result3.value=resultado1;
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Cadena: <input type="text" name="caden1" value="3.45636" size="10">
Resultado: <input type="text" name="result3" value="" size="10">
<input type="button" name="boton_cn" value="Aplicar funcin (isNaN)"
OnClick="cadnume(document.formulario1.cadnum.value);">
</form>
parseInt
Funcin parseInt: Esta funcin recibe un nmero, escrito como una cadena de caracteres, y un nmero
que indica una base.En realidad puede recibir otros tipos de variables, dado que las variables no tienen
tipo en Javascript, pero se suele utilizar pasndole un string para convertir la variable de texto en un
nmero.
Veamos una serie de llamadas a la funcin parseInt para ver lo que devuelve y entender un poco
ms la funcin.
document.write (parseInt("34")) Devuelve el numero 34
document.write (parseInt("101011",2)) Devuelve el numero 43

document.write (parseInt("34",8)) Devuelve el numero 28


document.write (parseInt("3F",16)) Devuelve el numero 63
Ejemplo:

Cadena:

101011

Base:

APLICAR FUNCION PARSEINT()


Resultado:
CODIGO EN ARCHIVO DE JAVASCRIPT:
function aentero(cad,ba) {
var resultado1;
resultado1=parseInt(cad,ba);
document.formulario1.result1.value=resultado1;
return;}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Cadena: <input type="text" name="cadena" value="101011" size="10">
Base: <input type="text" name="base" value="2" size="10">
Resultado: <input type="text" name="result1" value="" size="10">
<input type="button" name="boton_E" value="Aplicar funcin (parseInt)"
OnClick="aentero(document.formulario1.cadena.value,
document.formulario1.base.value);">
</form>

Mtodos Adicionales
Dentro de los mtodos adicionales tenemos:

Number.toString()
Esta funcin convierte un nmero, a una cadena de caracteres(string).
Ejemplo:
Numero:

3.45636

Resultado(String):

NUMBER.TOSTRING()

Boolean.toString()
Esta funcin convierte una variable lgica(boolean), a una cadena de caracteres(string).
Ejemplo:

Cadena:

true

Resultado(String):

BOOLEAN.TOSTRING()

CODIGO EN ARCHIVO DE JAVASCRIPT :


function numcade(num) {
var resultado1;
r=parseFloat(num);
if (r != NaN) {
resultado1=r.toString();
document.formulario1.result4.value=resultado1;
return; }
r=parseInt(num);
if (r != NaN) {
resultado1=r.toString();
document.formulario1.result4.value=resultado1;
return; }
document.formulario1.result4.value=r;
return; }
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Nmero: <input type="text" name="caden2" value="3.45636" size="10">
Resultado:<input type="text" name="result4" value="" size="10">
<input type="button" name="boton_ns" value="Number.toString()"
OnClick="numcade(document.formulario1.caden2.value);">
</form>
El Objeto Window
Se trata del objeto ms alto en la jerarqua del navegador.El objeto window hace referencia a
la ventana actual.
Propiedades

closed.Es un booleano que nos dice si la ventana est cerrada ( closed = true ) o no ( closed =
false ).
Status. String con el mensaje que tiene la barra de estado.
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 segn se definen en el documento HTML.
history. Se trata de un array que representa las URLS visitadas por la ventana (estn
almacenadas en su historial).
length. Variable que nos indica cuntos frames tiene la ventana actual.
name. Contiene el nombre de la ventana, o del frame actual.

opener. Es una referencia al objeto window que lo abri, si la ventana fue abierta usando el
mtodo open().

Mtodos

alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de dilogo


clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver el mtodo
setTimeout(), tambin del objeto window).
close(). Cierra el objeto window actual.
confirm(mensaje). Muestra un cuadro de dilogo 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.
moveBy(x,y). Mueve el objeto window actual el nmero de pixels especificados por (x,y). A
partir de NS 4.
moveTo(x,y). Mueve el objeto window actual a las coordenadas (x,y). A partir de NS 4.
open(URL,nombre,caracteristicas). Abre la URL que le pasemos como primer parmetro en
una ventana de nombre 'nombre'. Si esta ventana no existe, abrir una ventana nueva en la que
mostrar el contenido con las caractersticas especificadas. Las caractersticas que podemos
elegir para la ventana que queramos abrir son las siguientes:

o
o
o
o
o
o
o
o
o
o
o
o
o

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 localizacin o no.
directories = [yes|no|1|0]. Nos dice si la nueva ventana tendr botones de direccin 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 mens 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 tamao
(con el ratn) 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.
. 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.

prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de dilogo que contiene una caja


de texto en la cual podremos escribir una respuesta a lo que nos pregunte en 'mensaje'. El
parmetro 'respuesta_por_defecto' es opcional, y mostrar la respuesta por defecto indicada al
abrirse el cuadro de dilogo. El mtodo retorna una cadena de caracteres con la respuesta
introducida.
scroll(x,y). Desplaza el objeto window actual a las coordenadas especificadas por (x,y). A partir
de NS3, IE4.
setTimeout(expresion,tiempo). Evalua la expresin especificada despus de que hayan pasado
el nmero de milisegundos especificados en tiempo. Devuelve un valor que puede ser usado
como identificativo por clearTimeout(). A partir de NS4, IE4.

alert()
window.alert(): Muestra el mensaje especificado en un cuadro de dilogo.
Ejemplo:

Escriba un mensaje:

Mensaje

MENSAJE

CODIGO EN ARCHIVO DE JAVASCRIPT:


function ver(x) {
window.alert(x);
return; }
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Mensaje: <input type="text" name="campo1" value="Mensaje">
<input type="button" name="mensaje" value="mensaje"
OnClick="ver(window.document.formulario1.campo1.value);"></form>
open() y confirm()
open(URL,nombre,caracteristicas): Abre la URL que le pasemos como primer parmetro en una
ventana de nombre 'nombre'. Si esta ventana no existe, abrir una ventana nueva en la que mostrar el
contenido con las caractersticas especificadas..
window.confirm(): Muestra un cuadro de dilogo 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.

Ejemplo:

Haga click para abrir yahoo en una ventana nueva:


OPEN

CODIGO EN ARCHIVO DE JAVASCRIPT:


function confirmar() {
var respuesta=window.confirm("Esta seguro de querer cerrar la ventana actual??");
if (respuesta) {
window.open('http://www.yahoo.com','ventana1','height=300 width=800 scrollbars=yes'); }
return; }

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario1" action="ingreso.php" method="post">
Aplicar open y confirm: <input type="button" name="abrir" value="open" OnClick="confirmar();">
</form>

prompt
prompt(): Muestra un cuadro de dilogo que contiene una caja de texto en la cual podremos escribir una
respuesta a lo que nos pregunte en 'mensaje'.

Ejemplo:

Inserte una cadena de comandos para imprimir:


PROMPT

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario1" action="ingreso.php" method="post">
Aplicar prompt: <input type="button" name="prompt" value="prompt"
OnClick="window.prompt('Inserte secuencia de comandos para imprimir','');">
</form>

El Objeto Location
Este objeto contiene la URL actual as como algunos datos de inters respecto a esta URL. 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.
La sintaxis de una URL es:
PROTOCOLO://MAQUINA_HOST[:PUERTO]/CAMINO_AL_RECURSO

Propiedades

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


host. Cadena que contiene el nombre del servidor y el nmero del puerto, dentro de la URL.
hostname. Cadena que contiene el nombre de dominio del servidor (o la direccin IP), dentro de
la URL.
href. Cadena que contiene la URL completa.
pathname. Cadena que contiene el camino al recurso, dentro de la URL.
port. Cadena que contiene el nmero de puerto del servidor, dentro de la URL.
protocol. Cadena que contiene el protocolo utilizado (incluyendo los dos puntos), dentro de la
URL.
search. Cadena que contiene la informacin pasada en una llamada a un script, dentro de la
URL.

Mtodos

reload(). Vuelve a cargar la URL especificada en la propiedad href del objeto location.
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 atrs en dicha lista.
Propiedades

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


next. Cadena que contiene la URL completa de la siguiente entrada en el historial.
length. Entero que contiene el nmero de entradas del historial (i.e., cuntas direcciones han
sido visitadas).
previous. Cadena que contiene la URL completa de la anterior entrada en el historial.

Mtodos

back(). Vuelve a cargar la URL del documento anterior dentro del historial. Principio del
formulario.
Ejemplo:
Ir a pgina anterior: ANTERIOR
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" method="post" action="ingreso.php">
<input type="button" name="pagina_anterior" value="Ir a anterior" OnClick="history.back();">
</form>

forward(). Vuelve a cargar la URL del documento siguiente dentro del historial.
Debe haber estado en una url siguiente a esta para probar ejemplo.
Cargar url siguiente dentro del historial: IR A SIGUIENTE
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" method="post" action="ingreso.php">
<input type="button" name="pagina_anterior" value="Ir a siguiente"
OnClick="history.forward();">
</form>

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 posicin 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 pgina que se est visualizando. Esto
incluye el texto, imgenes, enlaces, formularios. Gracias a este objeto vamos a poder aadir
dinmicamente contenido a la pgina, o hacer cambios, segn nos convenga.
Propiedades

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


anchors. Se trata de un array con los enlaces internos existentes en el documento
applets. Es un array con los applets existentes en el documento
bgColor. Propiedad que almacena el color de fondo del documento
cookie. Es una cadena con los valores de las cookies del documento actual
domain. Guarda el nombre del servidor que ha servido el documento
fgColor. En esta propiedad tenemos el color del primer plano
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 mtodos, y
sern tratados en el siguiente captulo.
images. Array con todas las imgenes del documento
lastModified. Es una cadena con la fecha de la ltima modificacin del documento
linkColor. Propiedad que almacena el color de los enlaces
links. Es un array con los enlaces externos
location. Cadena con la URL del documento actual
title. Cadena con el ttulo del documento actual
vlinkColor. Propiedad en la que se guarda el color de los enlaces visitados

Mtodos

clear(). Limpia la ventana del documento


open(). Abre la escritura sobre un documento.
close(). Cierra la escritura sobre el documento actual
write(). Escribe texto en el documento.
writeln(). Escribe texto en el documento, y adems lo finaliza con un salto de lnea

Propiedades:
bgcolor
document.bgcolor() Propiedad que almacena el color de fondo del documento, si se modifica esta
propiedad el documento sufre estas alteraciones.
Ejemplo:
Escriba el color que tendr la pgina: (document.bgcolor)

black

APLICAR

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario1" action="ingreso.php" method="post">
Color: <input type="text" name="campo1" value="black" size="40">
<input type="button" name="colorfondo" value="Aplicar"
OnClick="document.bgColor=campo1.value;">
</form>
fgcolor
document.fgcolor(): En esta propiedad tenemos el color del primer plano, si se cambia este color, todo el
texto del documento adopta el mismo.
Ejemplo:
Escriba el color que tendr el texto dentro de la pagina:
(document.fgcolor)
w hite

APLICAR

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario1" action="ingreso.php" method="post">
Color: <input type="text" name="campo2" value="white" size="40">
<input type="button" name="colorletra" value="Aplicar" OnClick="document.fgColor=campo2.value">
</form>

linkColor
document.linkColor(): Propiedad que almacena el color de los enlaces .
Ejemplo:
Escriba el color que tendran los links dentro de la pgina:
(document.linkColor)
red

APLICAR

Ir a google

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario1" action="ingreso.php" method="post">
Color: <input type="text" name="campo3" value="red" size="40">
<input type="button" name="colorlink" value="Aplicar" OnClick="document.linkColor=campo3.value">
</form>
vlinkColor
document.vlinkColor(): Propiedad en la que se guarda el color de los enlaces visitados.

Ejemplo:

Escriba el color que tendran los links ya visitados:


(document.vlinkColor)
Observe el link superior de regresar:
red

APLICAR
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Color: <input type="text" name="campo4" value="red" size="40">
<input type="button" name="colorletra" value="Aplicar"
OnClick="document.vlinkColor=campo4.value">
</form>

location
document.location(): Contiene el url de la pgina, si este es modificado se cargara dentro de esta ventana
el url nuevo.
Ejemplo:
Ver location de documento actual: (document.location)
LOCATION
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Aplicar location: <input type="button" name="localizacion" value="location"
OnClick="window.alert('Localizacin actual: '+document.location)";>
</form>

write
document.write(): Escribe texto en el documento.
Ejemplo:
Obtener caractersticas del documento, aplicando write para
su observacin:
WRITE

CODIGO EN ARCHIVO DE JAVASCRIPT:


function escritura() {
document.write("Navigator alinkColor : " + document.alinkColor);
document.write("Navigator lastModified: " +document.lastModified );
document.write("Document bgColor: " + document.bgColor);
document.write("Document fgColor: " + document.fgColor);}
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Aplicar write: <input type="button" name="localizacion" value="write" OnClick="escritura();";>
</form>
writeln
document.writeln(): Escribe texto en el documento, y adems lo finaliza con un salto de lnea
Ejemplo:
Obtener caractersticas del documento, aplicando writeln
para su observacin:
APLICAR

CODIGO EN ARCHIVO DE JAVASCRIPT:


function escritura1() {
document.bgColor="black";
document.writeln("Navigator alinkColor: " + document.alinkColor);
<BR<DOCUMENT.WRITELN("Navigator lastModified: " +document.lastModified);
document.writeln("Document bgColor: " + document.bgColor);
document.writeln("Document fgColor: " + document.fgColor); }
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Aplicar writeln: <input type="button" name="localizacion" value="writeln" OnClick="escritura1();">
</form>
El Objeto Form

Vamos a ver ahora el objeto form por si solo, para destacar sus propiedades y mtodos.
Propiedades del objeto form
Tiene unas cuantas propiedades para ajustar sus atributos mediante Javascript.

action
Es la accin que queremos realizar cuand se submite un formulario. Se coloca generalmente una
direccin de correo o la URL a la que le mandaremos los datos. Corresponde con el atributo
ACTION del formulario.
elements array
La matriz de elementos contiene cada uno de los campos del formulario.
encoding
El tipo de codificacin del formulario
length
El nmero de campos del formulario.
method
El mtodo por el que mandamos la informacin. Corresponde con el atributo METHOD del
formulario.
name
El nombre del formulario, que corresponde con el atributo NAME del formulario.
target
La ventana o frame en la que est dirigido el formulario. Cuando se submita se actualizar la
ventana o frame indicado. Corresponde con el atributo target del formulario.

Ejemplos de trabajo con las propiedades


Con estas propiedades podemos cambiar dinmicamente con Javascript los valores de los
atributos del formulario para hacer con l lo que se desee dependiendo de las exigencias del momento.
Por ejemplo podramos cambiar la URL que recibira la informacin del formulario con la
instruccin.
DOCUMENT.MIFORMULARIO.ACTION=MIPGINA.ASP

O cambiar el target para submitir un formulario en una posible ventana secundaria llamada
mi_ventana.
DOCUMENT.MIFORMULARIO.TARGET=MIVENTANA

Mtodos del objeto form


Estos son los mtodos que podemos invocar con un formulario.
submit()
Para hacer que el formulario se submita, aunque no se haya pulsado el botn de submit.
reset()
Para reinicializar todos los campos del formulario, como si se hubiese pulsado el botn de reset.
(Javascript 1.1)

Ejemplo de trabajo con los mtodos

Vamos a ver un ejemplo muy sencillo sobre cmo validar un formulario para submitirlo en caso
de que est relleno. Para ello vamos a utilizar el mtodo submit() del formulario.
El mecanismo es el siguiente: en vez de colocar un botn de submit colocamos un botn normal
(<INPUT type="button">) y hacemos que al pulsar ese botn se llame a una funcin que es la
encargada de validar el formulario y, en caso de que est correcto, submitirlo.
CODIGO EN ARCHIVO DE JAVASCRIPT:
function validaSubmite(){
if (document.miFormulario.campo1.value == "")
alert("Debe rellenar el formulario")
else
document.miFormulario.submit() }
CODIGO EN DOCUMENTO DE HTML:
<form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain">
<input type="Text" name="campo1" value="" size="12">
<input type="button" value="Enviar" onclick="validaSubmite()">
</form>
Cmo se trabaja con formularios?
El objeto form depende en la jerarqua de objetos del objeto document. En un objeto form
podemos encontrar algunos mtodos y propiedades, pero lo ms destacado que podremos encontrar son
cada uno de los elementos del formulario. Es decir, de un formulario dependen todos los elementos que
hay dentro, como pueden ser campos de texto, cajas de seleccin, reas de texto, botones de radio, etc.
Para acceder a un formulario desde el objeto document podemos hacerlo de dos formas.
1.
2.

A partir de su nombre, asignado con el atributo NAME de HTML.


Mediante la matriz de formularios del objeto document, con el ndice del formulario al que
queremos acceder.

Para este formulario:


<FORM NAME=F1>
<INPUT TYPE=TEXT NAME=CAMPO1>
<INPUT TYPE=TEXT NAME=CAMPO2>
</FORM>

Podremos acceder con su nombre de esta manera.


document.f1
O con su ndice, si suponemos que es el primero de la pgina.
document.forms[0]

De similar manera accedemos a los elementos de un formulario, que dependen del objeto form.
1.

A partir del nombre del objeto asignado con el atributo NAME de HTML.

2.

Mediante la matriz de elementos del objeto form, con el ndice del elemento al que
queremos acceder.

Podramos acceder al campo 1 del anterior formulario de dos maneras. Con su nombre lo haramos
as.
document.f1.campo1
o a partir del array de elementos.
document.f1.elements[0]
(utilizamos el ndice 0 porque es el primer elemento y en Javascript los arrays empiezan por 0.)
Si deseamos acceder al segundo campo del formulario escribiramos una de estas dos cosas:
document.f1.campo2
document.f1.elements[1]
o tambin podemos acceder a un fomulario por el array de forms, indicando el ndice del
formulario al que acceder. De este modo, el acceso al campo2 sera el siguiente:
document.forms[0].campo2
document.forms[0].elements[1]
En estos casos hemos supuesto que este formulario es el primero que hay escrito en el cdigo
HTML, por eso accedemos a l con el ndice 0.

Text y password
Estos objetos representan los campos de texto dentro de un formulario. 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

name. Es una cadena que contiene el valor del parmetro NAME.


value. Es una cadena que contiene el valor del parmetro <BVALUE< b>.
maxlength. Nmero mximo de caracteres que puede contener el campo de text.
size. Especifica longitud del campo text.
readonly. No permite que se escriba nada en el campo de texto, solo es de lectura.
maxlength. Nmero mximo de caracteres que puede contener el campo de text.
disabled. Deshabilita el campo de texto.
type. Especifica que tipo de campo es si es texto type="text", y si es tipo password
type="password"

Mtodos

blur(). Pierde el foco del ratn sobre el objeto especificado.


focus(). Obtiene el foco del ratn sobre el objeto especificado.

Ejemplo:

onblur y onfocus (campo1 habilitado):


Disabled:

Haga click aqu y salga

Intente escribir algo aqu

Readonly:

Campo nicamente de lectura

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario1" action="ingreso.php" method="post">
focus y blur: <input type="text" name="campo1" value="Haga click aqu y salga" size="30" onfocus
="window.alert(document.formulario1[0].name+' a conseguido el
foco');"onblur="window.alert(document.formulario1[0].name+' a perdido el foco');">
disabled: <input type="text" name="campo2" disabled=true value="Intente escribir algo aqu" size="30">
<input type="text" name="campo2" readonly=true value="Campo nicamente de lectura" size="30">
</form>

TexArea
Este objeto representa un campo de texto con varias filas y columnas, y en el cual se pueden
escribr frases largos, especficamente se usa para recibir comentarios u observaciones dentro de un
formulario.
Propiedades

name. Es una cadena que contiene el valor del parmetro NAME.


value. Es una cadena que contiene el valor del parmetro <BVALUE< b>.
readonly. No permite que se escriba nada en el rea de texto, solo es de lectura.
disabled. Deshabilita el rea de texto.
type. Especifica que tipo de campo es type="textarea"
cols. Contiene el nmero de filas del rea de texto
rows. Contiene el nmero de columnas del rea de texto

Mtodos

blur(). Pierde el foco del ratn sobre el objeto especificado.


focus(). Obtiene el foco del ratn sobre el objeto especificado.

Ejemplo:
-Ingrese el nmero de filas que tendr el textarea:
-Ingrese el nmero de columnas que tendr el textarea:

Textarea:

30

APLICAR

CODIGO EN ARCHIVO DE JAVASCRIPT:


function cambiar(filas,columnas) {
if ((parseInt(filas)>=1) && (parseInt(filas)<=10))
document.formulario1.campo.rows=filas;
else {
window.alert("Valor aplicable a las filas no permitido: 1-10");
return; }
if ((parseInt(columnas)>=1) && (parseInt(columnas)<=70))
document.formulario1.campo.cols=columnas;
else
window.alert("Valor aplicable a las columnas no permitido: 1-70");
return; }
CODIGO EN DOCUMENTO DE HTML:
<form name="formulario1" action="ingreso.php" method="post">
Filas: <input type="text" name="campo1" value="5" size="5">
Columnas: <input type="text" name="campo2" value="5" size="5">
Textarea: <TEXTAREA name =campo rows = 5 cols = 30></TEXTAREA>
<input type="button" name="boton" value="Aplicar"
onClick="cambiar(document.formulario1.campo1.value,document.formulario1.campo2.value);">
</form>
Checkbox
Los "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

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


defaultChecked. Valor booleano que nos dice si el checkbox debe estar seleccionado por
defecto o no
name. Es una cadena que contiene el valor del parmetro NAME.
value. Es una cadena que contiene el valor del parmetro VALUE.
type. Especifica el tipo en este caso checkbox.
disabled. Permite deshabilitar cada uno de los checkbox.

Mtodos

click(). Realiza la accin de pulsado del botn


blur(). Pierde el foco del ratn sobre el objeto especificado.
focus(). Obtiene el foco del ratn sobre el objeto especificado.

Ejemplo:
Seale los checkbox que quiera, para obtener cuntos a sealado presione el botn.

Opcin 1
Opcin 2
Opcin 3
CONTAR
CODIGO EN ARCHIVO DE JAVASCRIPT:
function contar (x,y,z) {
entro=0;
if (x.checked) {
entro=entro+1; }
if (y.checked) {
entro=entro+1; }
if (z.checked) {
entro=entro+1; }
mensaje="Ud. eligio "+entro+" opciones";
window.alert (mensaje);
return; }

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario" action="ingreso.php" method="post">
Opcin 1: <input type=checkbox name=op1>
Opcin 2: <input type=checkbox name=op2>
Opcin 3: <input type=checkbox name=op3>
Contar: <INPUT type=button value="Contar" name="boton_cuenta"
onClick="contar(document.formulario.op1,document.formulario.op2,document.formulario.op3)">
</form>

Radio
Al contrario que con los checkbox, que nos permiten elegir varias posibilidades entre las dadas,
los objetos radio slo nos permiten elegir una de entre todas las que hay. Estn pensados para
posibilidades mutuamente excluyentes (no se puede ser a la vez mayor de 18 aos y menor de 18 aos, no
se puede estar a la vez soltero y casado, etc.).
Propiedades

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


defaultChecked. Valor booleano que nos dice si el radio debe estar seleccionado por defecto o
no
name. Es una cadena que contiene el valor del parmetro NAME.
value. Es una cadena que contiene el valor del parmetro VALUE.
type. Especifica el tipo en este caso radio.
disabled. Permite deshabilitar cada uno de los checkbox.

Hay que recordar que para agrupar elementos de tipo radio, todos ellos deben tener el mismo valor
en NAME.
Mtodos

click(). Realiza la accin de pulsado del botn


blur(). Pierde el foco del ratn sobre el objeto especificado.

focus(). Obtiene el foco del ratn sobre el objeto especificado.

Ejemplo:
Edad:
En que rango se encuentra ud:
Menores de edad.
Adultos
Tercera Edad.
ESCOJA

CODIGO EN ARCHIVO DE JAVASCRIPT:


function ver_escogido(x) {
entro=false;
totradios=x.length;
for (i=0;i
if (x[i].checked) {
dato=x[i].value;
entro=true; } }
if (entro) {
window.alert("ud. escojio la opcion "+dato); }
else {
window.alert("Escoja una opcion"); }
return; }

CODIGO EN DOCUMENTO DE HTML:

<form name="formulario" action="ingreso.php" method="post">


Menores de edad <input type=radio value='<18' name=op1>
Adultos: <input type=radio value='>=18 <60' name=op1>
Tercera Edad: <input type=radio value='>=65' name=op1>
Seleccin: <INPUT type=button value="Escoja" name="boton_escoje"
onClick="ver_escogido(document.formulario.op1)"> </form>

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

length. Valor numrico que nos indica cuntas opciones tiene la lista
name. Es una cadena que contiene el valor del parmetro NAME
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:
o defaultSelected. Valor booleano que nos indica si la opcin est seleccionada por
defecto.
o index. Valor numrico que nos da la posicin de la opcin dentro de la lista.
o length. Valor numrico que nos dice cuntas opciones tiene la lista.
o options. Cadena con todo el cdigo HTML de la lista.
o selected. Valor booleano que nos dice si la opcin est actualmente seleccionada o no.
o value. Es una cadena que contiene el valor del parmetro VALUE de la opcin concreta
de la lista.
o type. Especifica el tipo en este caso select.
o size. Especifica la longitud de la caja del select o de la lista desplegable.
o disabled. Deshabilita un select por completo
selectedIndex. Valor numrico que nos dice cul de todas las opciones disponibles est
actualmente seleccionada.

Mtodos

blur(). Pierde el foco del ratn sobre el objeto especificado.


focus(). Obtiene el foco del ratn sobre el objeto especificado.

Ejemplo:
Da:
Seleccione que da es hoy:

VER SELECCIN

CODIGO EN ARCHIVO DE JAVASCRIPT:


function dia_seleccionado(x) {
var ahora=new Date();
var dia=new Array('Domingo','Lunes','Martes','Mircoles','Jueves','Viernes','Sbado');
if (x.value=="0") {
alert ("Por favor elija una opcion"); }
else {
if (ahora.getDay()==x.value-1)
window.alert ("Ud. escojio la opcion "+x.value+" " +dia[x.value-1] + " da correcto");
else
window.alert ("Ud. escojio la opcion "+x.value+" " +dia[x.value-1] + " da incorrecto"); }
return; }

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario" action="ingreso.php" method="post">
Da:
<select name=opciones>
<option value=0 selected>Escoja</option>
<option value=1>Domingo</option>

<option value=2>Lunes</option>
<option value=3>Martes</option>
<option value=4>Mircoles</option>
<option value=5>Jueves</option>
<option value=6>Viernes</option>
<option value=7>Sbado</option>
</select>
Seleccin: <input type="button" value="Ver seleccin" name="que_dia"
onClick="dia_seleccionado(document.formulario.opciones);"> </form>

Button
Tenemos tres tipos de botones: un botn genrico, 'button', que no tiene accin asignada, y dos
botones especficos, 'submit' y 'reset'. Estos dos ltimos s que tienen una accin asignada al ser pulsados:
el primero enva el formulario y el segundo limpia los valores del formulario.
Propiedades

name. Es una cadena que contiene el valor del parmetro NAME.


value. Es una cadena que contiene el valor del parmetro VALUE.
type. Especifica el tipo de botn que se esta usando
disabled. Deshabilita el botn, no permitindonos realizar ninguna accin sobre l.

Mtodos

click(). Realiza la accin de pulsado del botn


blur(). Pierde el foco del ratn sobre el objeto especificado.
focus(). Obtiene el foco del ratn sobre el objeto especificado.

Reset
Este objeto es el encargado de limpiar todos los campos que se encuentran en un formulario
Propiedades

name. Es una cadena que contiene el valor del parmetro NAME.


value. Es una cadena que contiene el valor del parmetro VALUE.
type. Especifica el tipo de botn que se esta usando
disabled. Deshabilita el botn, no permitindonos realizar ninguna accin sobre l.

Mtodos

click(). Realiza la accin de pulsado del botn


blur(). Pierde el foco del ratn sobre el objeto especificado.
focus(). Obtiene el foco del ratn sobre el objeto especificado.

Ejemplo:
Escriba algo en el texto:
RESET
Se proceder a validar que existan datos ingresados en el cuadro de texto, para permitir la accin
del reset. No se especificar el nombre del cuadro de texto, ni tampoco el nombre del formulario
para realizar esta validacin; ya que se utilizar las propiedades de document y de form antes
expuestas.

CODIGO EN ARCHIVO DE JAVASCRIPT:


function limpiar() {
var cadena=window.document.forms[0].elements[0].value;
if (cadena!="") {
var dev=window.confirm("Desea borrar?");
if (dev==true)
window.document.forms[0].reset(); }
else
window.alert("No existen datos ingresados") } Final del formulario
CODIGO EN DOCUMENTO DE HTML:
function limpiar() {
var cadena=window.document.forms[0].elements[0].value;
if (cadena!="") {
var dev=window.confirm("Desea borrar?");
if (dev==true)
window.document.forms[0].reset(); }
else
window.alert("No existen datos ingresados") }
<form action="ingreso.php" method="post">
Cuadro de Texto: <input type="text" value="" size="33">
Reset: <input type="button" value="reset()" OnClick="limpiar()";> </form>

Submit
Este objeto es el encargado enviar todos los datos que se encuentran dentro del formulario.
Propiedades

name. Es una cadena que contiene el valor del parmetro NAME.


value. Es una cadena que contiene el valor del parmetro VALUE.
type. Especifica el tipo de botn que se esta usando
disabled. Deshabilita el botn, no permitindonos realizar ninguna accin sobre l.

Mtodos

click(). Realiza la accin de pulsado del botn


blur(). Pierde el foco del ratn sobre el objeto especificado.
focus(). Obtiene el foco del ratn sobre el objeto especificado.

Ejemplo:
Escriba algo en el texto:
Campo1:
ACEPTAR
Se proceder a validar que existan datos ingresados en el cuadro de texto, para que se pueda
ejecutar la accin del submit. En el proceso de validacin no se especificar el nombre del
formulario, ni el nombre del campo, se utilizarn las propiedades antes estudiadas tanto de
document como del formulario.
CODIGO EN ARCHIVO DE JAVASCRIPT:

function valida(formulario1) {
mensaje="";
var longitud=formulario1.elements.length-2;
for (i=0;i<=longitud;i++) {
dato=formulario1.elements[i].value;
funciones= formulario1.elements[i].name.split(":");
longitud1=funciones.length-1;
for (j=1;j<=longitud1;j++) {
switch(funciones[j]) {
case '0':{tenga_datos(dato,funciones[0]);break;} }
}
}
if (mensaje.length==0)
return true;
else {
window.alert(mensaje);
return false;
}
}
function tenga_datos(dato1,campo) {
if (dato1.length==0) {
mensaje=mensaje+ campo +" debe contener datos\n";
return false; }
return true; }

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario" OnSubmit="return valida(this)" action="ingreso.php" method="post">
Cuadro de Texto: <input type="text" name="campo1:0" value="" size="33">
Submit: <input type="submit" name="aceptar" value="Aceptar">
</form>

Eventos Adicionales
Muchos eventos han sido considerados en este manual, a continuacin se sealarn algunos de los
ms importantes que no fueron tomados en cuenta hasta aqu.

onload()
Con el evento onload podemos ejecutar acciones justo cuando se han terminado de cargar todos
los elementos de la pgina.
El evento onload de Javascript se activa cuando se termina de cargar la pgina. Se ha de colocar
en la etiqueta <body>, aunque en versiones modernas de Javascript, tambin lo aceptan otros
elementos como las imgenes.

Con el evento onload podemos ejecutar acciones justo cuando se han terminado de cargar todos
los elementos de la pgina. Es un evento bastante utilizado pues es muy habitual que se deseen
llevar a cabo acciones en ese preciso instante.

onunload() Se activa cuando el usuario ha abandona la pgina web. Por tanto, onunload sirve
para ejecutar una accin cuando el usuario se marcha de la pgina, ya sea porque pulsa un enlace
que le lleva fuera de la pgina o porque cierra la ventana del navegador.

onmouseover()se activa cuando el usuario hace pasar el puntero del ratn por encima del
elemento que tiene definido el manejador.
onmouseout()se activa cuando el usuario hace abandonar el puntero del ratn del elemento que
tiene definido el manejador.

Ejemplo del uso de onmouseover y onmouseout:


Pase el cursor encima de la imagen:

CODIGO EN ARCHIVO DE JAVASCRIPT:


function dar_bienvenida(){
window.alert("Bienvenido a Manual de JavaScript"+"\n"+"Seccin: Eventos Adicionales"); }
function cambia_imagen() {
document.images.foco.src="salir.jpg"; }
function cambia_imagen1() {
document.images.foco.src="lighton.jpg"; }

CODIGO EN DOCUMENTO DE HTML:


Onload y Onunload: <body onload="dar_bienvenida();">
Onmouseover y Onmouseout: <img src="LIGHTON.jpg" name="foco"
onmouseover="cambia_imagen();" onmouseout="cambia_imagen1();">

CSS y JavaScript
Como ya sabamos anteriormente las hojas de estilo (CSS) se usan especficamente para ahorrar
tiempo al diseador de la pgina, puesto que se enunciara una solo vez que color, tamao o tipo de letra
tendr cada texto en el documento, adems se lo puede utilizar en otros documentos. JavaScript me
permite moficar y definir estilos sin necesidad de un archivo.css auxiliar: sino desde java mismo.
Como primer paso requerimos, darle una identificain al objeto al cual se le van a aplicar los
estilos correspondientes, esta identificacin se hace utilizando la palabra id dentro de cada objeto; de la
siguiente manera:
<body id="fondo">

Una vez ya puesta una identificacin al objeto; nos dirigimos al archivo de JavaScript y
adjuntamos el siguiente cdigo:
FUNCTION CAMBIAR(){
DOCUMENT.GETELEMENTBYID(FONDO).STYLE.BACKGROUNDCOLOR=COLOR;}

GetElementById nos permitir identificar al objeto, a quien se le van a realizar los diferentes
cambios; despus de la palabra style debe ponerse todas las propiedades de las hojas de estilos, pero
teniendo en cuenta que la sintaxis de java para usar css es diferente a la ya conocida, ver correspondencia:
Obtener correspondencia de CSS a DOM

Ejemplo: Cambia de color de fondo a la parte dentro del documento que tiene una id
w hite

CAMBIA FONDO

Cambia de color letras:


w hite

CAMBIA LETRA

CODIGO EN ARCHIVO DE JAVASCRIPT:


function cambia_fondo(idE,color) {
document.getElementById(idE).style.backgroundColor=color; }
function cambia_letra(idE,color1) {
document.getElementById(idE).style.color=color1; }

CODIGO EN DOCUMENTO DE HTML:


<form name="formulario" method="post" action="ingreso.php">
<div id="caja2">
Fondo: <input type="text" name="campo1" value="white" size="40">
Aplicar css: <input type="button" name="colorfondo" value="Cambia fondo"
OnClick="cambia_fondo('caja2',campo1.value)">
</div>
<div id="letras">
Letras: <input type="text" name="campo2" value="white" size="40">
Aplicar css:<input type="button" name="colorletra" value="Cambia Letra"
OnClick="cambia_letra('letras',campo2.value)">
</div>
</form>