Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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.
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.
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.
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
Operadores
Expresiones
Sentencias
Objetos
Funciones y
Mtodos
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;
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
Boleanos
True o False.
Cadenas
Los tipos de datos cadena deben ir delimitados por comillas simples o dobles.
Objetos
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
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
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
Substraccin
7-9
Multiplicacin
6*3
Divisin
4/8
7%2
++
Incremento.
a++
--
Decremento.
a--
Invierte el signo de un
operando.
-a
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
==
===
!=
!==
>
>=
" Mayor o igual que " devuelve true si el operador de la izquierda es mayor 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.
||
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:
Obtener Longitud
Longitud:
13
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:
Extraer
Buscar
Ejemplo:
Primer ndice:
3
Obtener
Segundo ndice:
5
Cadena 1
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:
Obtener Arreglo
Digite un separador:
toLowerCase():
String.toLowerCase(); Cambia la cadena a minsculas.
Ejemplo:
Minsculas
Resultado en minsculas:
toUpperCase():
String.toUpperCase(); Cambia la cadena a maysculas.
Maysculas
maysculas
Resultado en maysculas:
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
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 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:
PUSH
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:
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:
10
UNSHIFT
Digite el separador
:
JOIN
reverse()
array.reverse(): El mtodo reverse() de un arreglo, ordena al revs los elementos de un arreglo.
Ejemplo:
function ordenar() {
var aNombres = ['Maria Elena','Gerardo','Jessica','Angel','Genoveva'];
aNombres = aNombres.sort();
window.alert(aNombres); }
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
Qu da de la semana es hoy?
DIA DE LA SEMANA
dias[6]="Sbado";
document.formulario1.dia_semana.value=ahora.getDay()+" - "+dias[ahora.getDay()];}
getHours
Date.getHours(); Retorna la hora actual.
Ejemplo:
En qu hora estamos?
HORA
getMinutes
Date.getMinutes(); Devuelve los minutos.
Ejemplo:
getSeconds
Date.getSeconds(); Devuelve los segundos.
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
Ejemplo:
En qu ao estamos?
AO
En qu fecha estamos?
FECHA COMPLETA
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
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
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:
0,017453
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:
1,56858
1,56858
OBTENER COS
Digite un nmero:
1000
LOGARITMO
Ejemplo:
Digite un nmero:
Digite la potencia:
POTENCIA
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
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
tan()
math.tan(): Devuelve el seno de un nmero con un ngulo en radianes.
Ejemplo:
1,56858
OBTENER TAN
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:
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:
hola mundo
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.
Ejemplo:
Cadena:
3.45636
Resultado:
Cadena:
101011
Base:
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()
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
o
o
o
o
o
o
o
o
o
o
o
o
o
alert()
window.alert(): Muestra el mensaje especificado en un cuadro de dilogo.
Ejemplo:
Escriba un mensaje:
Mensaje
MENSAJE
Ejemplo:
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:
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
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
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
Mtodos
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
APLICAR
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
Ejemplo:
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
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.
O cambiar el target para submitir un formulario en una posible ventana secundaria llamada
mi_ventana.
DOCUMENT.MIFORMULARIO.TARGET=MIVENTANA
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.
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
Mtodos
Ejemplo:
Readonly:
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
Mtodos
Ejemplo:
-Ingrese el nmero de filas que tendr el textarea:
-Ingrese el nmero de columnas que tendr el textarea:
Textarea:
30
APLICAR
Mtodos
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; }
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
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
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
<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
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.
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.
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; }
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.
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 LETRA