Manual

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

function ver(cad,indice){
window.alert("El caracter "+indice+" es: "+cad.charAt(indice));
return; }
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

function busqueda(cad6,cadbuscar){
window.alert("La subcadena: "+cadbuscar+" esta en la posicion: "+cad6.indexOf(cadbuscar));
return;}
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:

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;}
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

function subcadena(cade,pindice,sindice) {
window.alert("Subcadena obtenida entre posicines: "+pindice+" y "+sindice+ " es: "
+cade.substring(pindice,sindice));
return;}
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

function concatenar(cade,caden) {
window.alert("La primera cadena + La segunda cadena es igual a: "+cade.concat(caden));
return;}
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:

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;}
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:

function minusculas(cad2){
document.formulario1.campo2.value=cad2.toLowerCase();
return;}
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:

function mayusculas(cad2){
document.formulario1.campo2.value=cad2.toUpperCase();
return;}
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('
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 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

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; }
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:
Eliminar ltimo elemento:

POP

function insertar_primero(elemento) {
a.unshift(elemento);
var total="[";
for(i=0;i
total=total+"]";
return;}
<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:
Eliminar ltimo elemento:

SHIFT

function eliminar_primero(){
a.shift();
var total="[";
for(i=0;i
total=total+"]";
return;}
<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:
Digite el elemento a insertar:
10
UNSHIFT

function insertar_primero(elemento) {
a.unshift(elemento);
var total="[";
for(i=0;i
total=total+"]";
return;}
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.
var b=new Array(12,5,95);
function obtener_cadena(separador) {
cadena=b.join(separador);
window.alert(cadena);
return;}

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

var b=new Array(12,5,95);
function invertir(){
s=b.reverse();
window.alert("El vector invertido es igual a : ["+s+"]");
return;}
<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
function ordenar() {
var aNombres = ['Maria Elena','Gerardo','Jessica','Angel','Genoveva'];
aNombres = aNombres.sort();
window.alert(aNombres); }

<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

function diadelmes() {
var ahora=new Date();
document.formulario1.diames.value=ahora.getDate();
return;}
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

function diasemana(){
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()];}

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

function hora(){
document.formulario1.horita.value=ahora.getHours();}
CODIGO EN DOCUMENTO DE HTML

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

function minutos(){
document.formulario1.minutitos.value=ahora.getMinutes();}
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

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

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
function mes(){
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()];}
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

function a_o(){
var actual=ahora.getYear()+1900;
document.formulario1.a_ito.value=ahora.getYear()+" Ao actual: "+ actual;}
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

function a_ocompleto(){
document.formulario1.a_ofull.value=ahora.getFullYear();}
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

function fecha(){
document.formulario1.cadena.value=ahora.toString();}
CODIGO EN DOCUMENTO DE HTML
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

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

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
function absoluto(x){
var resultado;
resultado=Math.abs(x);
window.alert("El valor absoluto de "+x+ " es: "+resultado);
return;}
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

function arcocoseno(x1) {
var resultado1;
resultado2=parseFloat(x1);
resultado1=Math.acos(resultado2);
window.alert("El acos del ngulo en radianes es : "+resultado1);
return;}
0,017453

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:
1,56858
OBTENER ASIN
function arcoseno(x1){
var resultado1;
resultado1=Math.asin(resultado2);
window.alert("El asin del ngulo en radianes es : "+resultado1);
return;}
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:

OBTENER TAN

function arcotangente(x1){
var resultado1;
resultado1=Math.atan(resultado2);
1,56858
window.alert("El atan del ngulo en radianes es : "+resultado1);

return;}
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:
1,56858
OBTENER COS

function coseno(x1) {
var resultado1;
resultado1=Math.cos(resultado2);
window.alert("El cos del ngulo en radianes es : "+resultado1);
return;}
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

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

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

function elevado(num,num1) {
var resultado;
resultado=Math.pow(num,num1);
window.alert("El nmero "+num+" al " + num1+ " es: "+resultado);
return;}
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

function aleatorio() {
var total;
total=Math.random();
window.alert("El nmero aleatorio es: "+total);
return;}
<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

function redondear(num){
var tot,nume;
nume=parseFloat(num);
tot=Math.round(nume);
window.alert("El nmero: "+num+" redondeado es igual a: "+tot);
return;}
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:

OBTENER SENO
1,56858
function seno(x1) {
var resultado1;
resultado1=Math.sin(resultado2);
window.alert("El seno del ngulo en radianes es : "+resultado1);
return;}
<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

function raiz(numerito) {
var raizobtenida;
raizobtenida=Math.sqrt(numerito);
window.alert("La raz cuadrada de "+numerito+" es: "+raizobtenida);
return;}
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:
1,56858
OBTENER TAN

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

<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()
function valoreval(x) {
var resultado;
resultado=eval(x);
document.formulario1.result.value=resultado;
return;}
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:

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

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()

function adecimal(cad) {
var resultado1;
resultado1=parseFloat(cad);
return;}
Cadena: <input type="text" name="caden1" value="3.45636" 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:
function aentero(cad,ba) {
var resultado1;
resultado1=parseInt(cad,ba);
return;}
Cadena: <input type="text" name="cadena" value="101011" size="10">
Base: <input type="text" name="base" value="2" 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();
return; }
r=parseInt(num);
if (r != NaN) {
resultado1=r.toString();
return; }
document.formulario1.result4.value=r;
return; }
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

function ver(x) {
window.alert(x);
return; }
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

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; }

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

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
<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
<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

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

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

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
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
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

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);}
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

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); }
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.
function validaSubmite(){
if (document.miFormulario.campo1.value == "")
alert("Debe rellenar el formulario")
else
document.miFormulario.submit() }
<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

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

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

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

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; }
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
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

Ejemplo:
Seale los checkbox que quiera, para obtener cuntos a sealado presione el botn.
Opcin 1
Opcin 2
Opcin 3
CONTAR
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; }

<form name="formulario" action="ingreso.php" method="post">
Opcin 1: <input type=checkbox name=op1>
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
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

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

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; }

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

Ejemplo:
Da:
Seleccione que da es hoy:
VER SELECCIN

function dia_seleccionado(x) {
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; }

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

type. Especifica el tipo de botn que se esta usando
disabled. Deshabilita el botn, no permitindonos realizar ninguna accin sobre l.
Mtodos

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

Mtodos

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.

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
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

Mtodos

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.
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; }

<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:

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"; }

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

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

<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>

Manual

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual

Uploaded by

Copyright:

Available Formats

Manual de JavaScript.

Objetos del Lenguaje:

Objetos del Navegador:

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

Etiquetas que se refieren a un valor cambiante.

Pueden usarse para calcular o comparar valores.

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

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

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

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

Por supuesto, podemos inicializar una variable al declararla:

VAR UNA_VARIABLE=ESTA CADENITA DE TEXTO

Enteros o coma flotante.

Obj = new Object();

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

else if, control-statement

do while, control statement

for, control statement

Suma dos nmeros

Resta dos nmeros

Multiplica dos nmeros

Divide dos nmeros

Mdulo: el resto despus

Devuelve el resto de dividir ambos nmeros,

Suma 1 al contenido de una variable.

Resta 1 al contenido de una variable.

Invierte el signo de un operando.

" 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

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

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

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

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

OBJETOS DEL LENGUAJE

Digite una frase:

CODIGO EN ARCHIVO DE JAVASCRIPT:

Digite una frase:

Digite la posicin del caracter, que desea extraer:

CODIGO EN ARCHIVO DE JAVASCRIPT:

Digite una frase:

Digite la cadena a buscar:

CODIGO EN ARCHIVO DE JAVASCRIPT:

Digite una frase:

Digite la cadena a buscar:

Digite la posicin desde la que se va a buscar:

CODIGO EN ARCHIVO DE JAVASCRIPT:

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

Digite una frase:

CODIGO EN ARCHIVO DE JAVASCRIPT:

Ingrese la primera cadena:

Ingrese la segunda cadena:

CODIGO EN ARCHIVO DE JAVASCRIPT:

Digite una frase:

CODIGO EN ARCHIVO DE JAVASCRIPT:

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

Digite una frase:

CODIGO EN ARCHIVO DE JAVASCRIPT:

Digite una frase:

CODIGO EN ARCHIVO DE JAVASCRIPT:

length. especifica cuantos elementos contiene el arreglo.