TUTORIAL DE JAVASCRIPT |
|
Autor: Javier M. Criado | |
Nivel del tutorial: Medio | |
Conocimientos previos: Medios (supongo conocimientos básicos de programación en C y/o Java) |
INDICE | |||||||||
1. Introducción | |||||||||
2. Sintaxis | |||||||||
2.1. Sintaxis básica | |||||||||
|
|||||||||
2.2. Funciones | |||||||||
|
|||||||||
2.3. Estructuras de control | |||||||||
3. Objetos y Eventos | |||||||||
3.1. El modelo de Objetos de JavaScript | |||||||||
3.2. Los Objetos en JavaScript | |||||||||
|
|||||||||
3.3. Los Eventos en JavaScript | |||||||||
Apéndice. Abreviaturas usadas en el tutorial |
1. INTRODUCCIÓN |
Características del lenguaje:
-
Es un lenguaje basado1 en objetos;maneja objetos (ej, window, document, array, ...) pero NO permite la definición de clases base propias (si ajenas) ni el uso de la herencia.
-
JavaScript es un lenguaje interpretado.(es decir, no se genera un todo compilado que luego se ejecuta sino que se analiza linea a linea en el propio navegador del cliente).
-
Se ejecuta íntegramente en la parte cliente (por lo que no satura las lineas de comunicaciones como las apliaciones cliente-servidor ni sobrecarga -más de lo por sí ya cargado- el tráfico de internet).
De estas características se derivan una serie de ventajas e inconvenientes:
-
Es un lenguaje sencillo de aprender y manejar.
No tiene un gran nº de funciones ni de objetos en su entorno; en su contra tiene el defecto de que es complicado (por no decir imposible, ya que la potencia de un lenguaje diseñado para ejecutarse íntegramente en cliente no puede ser muy alta -imagínate que pudiera leer/escribir en tu disco duro, disketts,... ) realizar aplicaciones con un cierto nivel de complejidad.
-
Es un lenguaje rápido de ejecución.
Si tú lees un libro de Java, probablemente leerás:"Java se ejecuta más rápido que JavaScript, pues tiene parte compilada garcias a los bytecodes bla, bla, bla..." y efectivamente es así siempre y cuando la consola Java esté cargada- cosa que no ocurre casi nunca, por lo que a efectos prácticos se puede decir que es más rápido JavaScript que Java2 ).
- Puedes copiar y pegar.
El conocido como mejor (y para algunos el único bueno) invento de Bill Gates & company es "universal" en JavaScript; con poca experiencia que tengas programando en este lenguaje sabes que tiene que ir incrustado (a modo html) en la página que se baja el cliente a su ordenador; por lo que con un simple ver/codigo fuente en tu Internet Explorer/Netscape Navigator y un típico (yo creo que hasta mi abuela lo conoce) <<Ctrl+c; Ctrl+v>> ya tienes ese efecto que al otro le "ha costado" (lo pongo entre comillas porque ese otro probablemente tambien lo haya copiado) tanto realizar.
Evidentemente, este lenguaje tiene más ventajas e inconvenientes sobre los que discutir; no obstante estos son los que yo considero más importantes.
NOTAS de la Introducción:
1 Lo que es distinto a Orientado a Objetos.
2 Si no te lo crees, carga una página con Java y otra con el mismo código en JavaScript a ver que pasa.
-
En cualquier parte del documento entre las etiquetas <script> y </script> (no incluyo sus atributos por cuestiones personales).
Ej:
<html>
<head><title>JavierMCriado.com</title>
<script language="JavaScript">
<!--
alert(" Hola!!! desde JavaScript ");//-->
</script>
</head>
<body>
Hi!! <br>Esto es una página de prueba!!
</body>
</html>
-
Dentro de una etiqueta HTML para responder a un evento.
Ej:<html>
<head><title>JavierMCriado.com</title>
<script language="JavaScript">
<!--
function f1(){
alert(" Hola!!! desde JavaScript ");
}//-->
</script>
</head>
<body>
Hi!! <br>Esto es una página de prueba!!
<A HREF="#" onMouseOver="f1()">JARRRR</A>
</body>
</html>
No es obligatorio poner ";" al final de la sentencia,
aunque yo, como buen seguidor de C que soy, recomiendo su uso.
OJO! Esto no quiere decir que no separes dos sentencias que
van juntas; ej: var txt="hola";alert(txt);
2.1.1. Tokens
Se agrupan en 5 categorías:
-
Identificadores.
Deben empezar por letra ó guión bajo.
Pueden contener combinaciones de letras(excepto la ñ) dígitos y guiones bajos. - Palabras reservadas.
Hay 56 (abstract, boolean, ..., if, int, ...) - Literales
ENTEROS
(byte, int, long)Decimal: Cualquier nº Ej: 8, -8 Octal: Cualquier nº que comience por 0. Ej: 08 Hexadecimal: Cualquier nº que comience por 0X. Ej: 0X08 COMA FLOTANTE
(float, double)Forma normal (estándar): 34.05 Forma científica ( E ó e = exponente(*10) ): 34.2E2 (3420)
34.2E-2 (0,342)Ojo! En JavaScript, el separador decimal por defecto es el punto. BOOLEANOS
(boolean)true=1=.V. false=0=.F. En JavaScript, C/C++, Java, etc... todo lo que sea !=0 es verdadero.
Las ctes true y false se escriben en minúsculas.DE CADENA
(string)Una cadena en JavaScript está formada por cero (cadena vacía:"") ó más caracteres encerrados bien entre comillas dobles ("Hi"), bien entre comillas simples ('hola'). Se pueden (y aveces se deben) mezclar ambos tipos de formato; Ej: <A href=" javascript:f1('hola') ">...</A> CARACTERES ESPECIALES Al igual que en C, se usan para codificar elementos que no están en el teclado; EJavaScript:
\b = Equivale a reproducir un pitido.
\t = Equivale a pulsar el tabulador.
\n = Equivale a realizar un salto de línea.
Etc...
- Operadores
La mayoría son los mismos que usan C ó Java, por lo que te remito a sus libro de referencia en el caso de que no los conozcas.
De todas formas hay algunos que creo importante destacar:Operadores de cadena--> se pueden comparar1 (==,!=,<,>,<=,>=) y concatenar (+) cadenas.
typeOf(variable)--> devuelve una cadena con el nombre de uno de los 5 tipos de
datos que inicialmente soporta JavaScript (más undefined) que corresponde al tipo de la
variable pasada como argumento de la función.
- Separadores
JavaScript ignora los espacios en blanco.
Respecto a los comentarios, tambien son igual que en C, es decir:
// para una línea
/* ....... */ para más de una línea
2.1.2. Variables
Declaración de variables
En JavaScript no es obligatorio declarar las variables
antes de usarlas, aunque es buena práctica hacerlo.
Lo que sí que es obligatorio es darles un valor antes
de referenciarlas; en cto. se les da un valor, la var toma
auto. el tipo de datos en el que se catalogue el valor.
Sintaxis:
[var] ID [=valor]
EJavaScript:
var
i; i=0;
var
nombre="Hola", i=0;
NOTA: En teoría tambien se puede usar la notación
de C, aunque no es muy usual.
Ej:
double x=8.7;
Tipos de datos
JavaScript es un lenguaje débilmente tipado: no
se requiere que se definan los tipos de los datos y no se
impide que se asignen distintos tipos de datos a una var
durante la ejecución del programa.
En JavaScript hay 5 tipos de datos base: (= 5 tipos de clases concretas)
-
number --> A esta clase pertenecen tanto los nºs enteros como los de coma flotante.
- boolean
- string
- function -->A esta clase pertenecen las funciones propias del lenguaje (ej. parseInt()), los métodos de cualquier objeto perteneciente al documento (ej. write()) y las funciones definidas por el usuario.
- object -->A esta clase pertenecen todos los obJavaScript. del navegador más el valor null.
Existe un tipo más aparte de los 5 básicos:
El tipo undefined -->aparece cuando intentamos usar vars.
sin valor asignado previamente.
Ámbito de las variables
Las variables serán locales ó globales al archivo
html en el que se definan dependiendo de el lugar en el que
se declaran; si se declaran:
a) En cualquier lugar del documento (ya sea cabecera ó cuerpo) -->ámbito globál
b)
Dentro de una función --> Local si llevan var
delante
Global
si no llevan var delante
2.1.3.Constantes
En JavaScript NO existen las constantes definidas por el usuario.
2.1.4.Expresiones
Conjunto de sentencias que son evaluadas a uno de los 5+1 tipos de datos que soporta JavaScript.
2.2.Funciones |
2.2.1. Funciones definidas por el usuario.
Declaración:
Tu puedes declarar la función en cualquier lugar
del archivo .html; lo que pasa es que TEÓRICAMENTE
(ya que hoy en día no te va a dar error en la práctica)
se recomienda declararlas en la cabecera (seción
head), ya que se puede dar el error de que se llame a una
función no declarada previamente si se hace en el
cuerpo; ej:
<html> --> |
Sintaxis:
function nombrefunción ( [parámetro(s)] )
{
[sentencia(s);]
[return
valor;]
}
Ej JavaScript:
function saludo(){ document.write("Hola!!");} function suma_ent (a,b){ var
x=parseInt(a);//con esto me aseguro
de que sumo nºs(el pasante se puede equivocar y enviarme
"7" y "8", }//suma function suma (a,b){ return a+b; }//suma |
Parámetros:
Los parámetros (u argumentos) son variables locales
a la función que pueden adoptar cualquier tipo de
datos (ed, toman el tipo a partir del valor recibido como
si se pusiese var parametro=valor).
Se pueden pasar parámetros de distintos tipos a una
función.
Para pasar un array como argumento:
function ff(x){ ... }
a=new Array;
a[0]=8; a[1]=9;
ff(a);
Llamada:
Para invocar a una función en JavaScript basta
con escribir el nombre de la función seguida de los
valores que se le quieran dar a los argumentos, si hay,
entre paréntesis.
EJavaScript:
suma("Hola
","q tal!");
suma(4,5);
saludo();
document.write( "La
suma de 7 y 8 es:"+suma(7,8) );
Retorno:
No se hay que especificarlo obligatoriamente; y como
en JavaScript "las funciones" no tienen obligatoriedad
de devolver un valor, se pueden comportar como procedimientos
en el caso de que no escribamos la sentencia return.
Si se quiere usar basta con utilizar la palabra return seguida
del valor devuelto.
Y por cierto, sí, las funciones devuelven uno y sólo
un valor.
Ej. return suma
Ambito de los argumentos:
Las variables(enteras, de cadena, etc..) se pasan SInternet
ExplorerMPRE por valor (aunque sean globales).
Los objetos (Arrays, forms, etc...) se pasan SInternet ExplorerMPRE
por referencia.
Nota especial: "El array arguments"
JavaScript usa un array relacionado con los argumentos
que se le pasan a una función: el array arguments.
Gracias a él podremos definir funciones con un
nº variable de args:
Se pueden pasar más argumentos que los definidos en la declaración de una función: los valores extras NO se pierden--> se almacenan en el array arguments[posicion] , en la posición relativa dad en la sentencia de llamada a la función: (ej:) function f1(){. . . .} f1 ("Hola", 17, true); -->f1.arguments[0]=
"hola" El array arguments es del tipo "agrupo a todos", pues cada elemento conserva su tipo--> ed, no es un array de un tipo de datos concreto (no es un array de string, ni de number, ni de ...) Un ejemplo de como manejar esto lo podemos ver si
redefino la función arriba declarada: var
nargs=f1.arguments.length; case
"number": suma= f1.arguments[i] + 10; case
"string": suma= f1.arguments[i] + "Jarrr"; }//switch }//for }//f1 |
2.2.2 Funciones propias del lenguaje
He aquí las que yo considero más importantes:
-
parseInt( cadena, [base] )
Convierte la cadena pasada como arg. en un entero, en la base indicada (10 x dfto.); la cadena se analiza hasta que encuentra un car distinto de 0..9,+,-
La función devuelve un nº entero ó NaN. - parseFloat( cadena )
Convierte la cadena pasada como arg. en un nº real; la cadena se analiza hasta que encuentra un car distinto de 0..9,punto(.),e,E,+,-
La función devuelve un nº entero ó NaN.
EJavaScript:Cadena
parseIntparseFloat"12.8"1212.8"07.9E+4H"7 (coge hasta el punto)79000"+937.12"937937.12"H17"NaNNaN
Para hacer la conversión inversa (nº a cadena), teóricamente basta con asignarlos (ver. JavaScript1.1) ya que se hace la conversión implícita.
EJ:
1 n=7;cad="jar";
2 cad=n; //cad vale "7"
Yo, no obstante recomiendo la concatenación para no tener problemas:
3 cad+=""; //hacer esto siempre antes de operar con la cadena-nº
//además si haces esto te ahorras una sentencia
//n=7;
//cad=n; -->cad vale 7
//cad+=""; -->cad vale "7"
- isNaN( valor )
- eval ( expresión )
Ejecuta la expresión pasada como arg.
Impor y muy utilizada en Java.
EJavaScript:
eval("4*2")-->8
eval("4>2")-->true
eval( isNaN(12) )-->false - escape( carácter )
devuelve el cod. ASCII (fto "%xx") correspondiente al car. pasado como par.
Ej:
escape('!')-->"%21"
escape('5')-->"%53" - unescape (cadena)
devuelve el car. del cod. ASCII (fto "%xx") pasado como par.
Ej:
unescape("%21")-->"!"
unescape( escape('5') )-->"5"
//Escribe los 255 elementos del código ASCII
for(var i=0; i<255; i++)
document.write("<B>"+ i + "</B>"+ '\t' + unescape("%"+i)+"<BR>");
//Nota: cuando ejecutes este trozo de código en tu navegador, puede que muchos de estos caracteres no se verán de forma correcta en tu monitor.
Donde valor es una cadena ó nº.
Devuelve true si NO es un nº, false en caso contrario (es nº).
Ej:
isNaN("18")-->false
isNaN("H10")-->true
isNaN("1-8")-->true
isNaN("7.8E+3")-->true
NOTAS de Sintaxis:
1 OJO con if (3="3")
Hasta JavaScript 1.1 esto daba cierto; en JavaScript 1.2 y posteriores,
comparar esto os dará error debido a que los considera como
tipos de datos distintos.
2 A ver si nos entendemos, no te va a salir un cartel "error
fatal!!", simplemente, no hará nada (al menos en Internet
Explorer, ya que Netscape, dependiendo de laversión dará
más ó menos guerra).
2.3. Estructuras de Control |
Las voy a explicar bastante rápido, pues me imagino que esto ya os lo conoceis de memoria.
2.3.1.Sentencias Condicionales
Son iguales q en C ( if(a==b) .... else ....)
Lo único encomiable de reseñar en este apdo. es que
al existir cadenas, en una sentencia switch se pueden comparar cadenas.
2.3.2.Bucles
for*
for..in
Sintaxis: Descripción Ej. //Saca por pantalla el nombre de cada propiedad del objeto document actual, un =, y su valor |
while, do..while, break y continue*
2.3.4. La sentencia with
Sintaxis:
with ( objeto ){
[sentencia];
}
Descripción
Esta sentencia se
usa para evitar la escritura repetida del nombre de un objeto cuando
se hace eferencia a él (a sus métodos/propiedades).
Ej.
with(document){
write("Jarrrrr"); //Hago
ref al método write del objeto document
alinkColor=black;
//Hago ref a la propiedad alinkColor del objeto document
}//with
NOTAS de Estructuras de control:
*(= que en C)
3. OBJETOS Y EVENTOS |
|
3.1. El modelo de Objetos de JavaScript |
Recuerda que JavaScript es un leng basado en objetos, pero no es un LOO. (no se permiten la definición de clases abstractas ni herencia)
Para acceder a las propiedades de un objeto se pueden usar cualquiera de las 2 sigui. notaciones:
- objeto.propiedad Ej document.alinkColor //La que usa el 98% de la gente
- objeto[propiedad] Ej document[alinkColor]
Para acceder a los métodos: objeto.método ( argumentos ) -->document.write(. . .)
JavaScript tambien nos permite construir nuestros propios tipos de objetos (clases concretas):
Ej:
1)Declaro la clase concreta:
function Tpersona(nombre, ape, edad){
this.nombre=nombre;
this.apellidos=ape;
this.edad=edad;
this.visualizar=fvis; //Se ponen los nombres de las funciones asignadas a los
métodos, No sus parámetros
return this;
}//Tpersona
2)Implemento el /los métodos de la clase:
function fvis( n ){
if
(n==1)
document.write(
this.nombre + this.apellidos);
else
document.write(
this.edad);
}
3) Creo el/los objetos necesario/s de la clase concreta:
p1=new Tpersona("Juan","Perez","25");
NOTA's:
Todos
los métodos y propiedades son públicos. (aquí
no hay private ni protected).
Para
crearse un array de objetos:
ap=new
Array();
for (i=0;i<n;i++)
ap[i]=new
Tpersona(. . .);
Los
objetos de JavaScript son verdaderos obJavaScript en el sentido
de que tienen miembros y d que pueden responder a eventos. Pero
la jerarquía NO está basada en la herencia, sino en
<<contenedores1>> .
EJ:
Para referenciar
una caja de txt dentro de la estructura JavaScript -en la que ventana
es el contenedor padre-, debemos incluir en la ref los elems de
la jerarquía que la contienen, del siguiente modo:
nomventana.nomdocumento.nomformulario.nomcaja_de_texto
NOTAS de El modelo de Objetos de JavaScript:
1 Los obJavaScript de más alto nivel contienen a los
un nivel inferior, de forma que para llegar al objeto de nivelk
3 hay que pasar x los niveles 1 y 2( pero para llegar al nivel 1
sólo hace falta el 1 ).
3.2. Los Objetos en JavaScript |
JavaScript tiene distintos objetos propios ya construídos con los que podemos trabajar; estos se dividen en 2 grupos:
a)Los objetos del navegador
b)Los objetos del lenguaje
3.2.1. Los objetos del Navegador
a)Navigator
b)Window
b.1) History
b.2) Location
b.3) Frame
Los siguientes objetos pertenecen a un Frame, si la ventana tiene
marcos(frames), ó al objeto contenedor madre Ventana, en
caso contrario.
Location | |||||||||||||||||||||||||||||||||||||||
Document
|
Podemos dividirlos en 2 grupos:
- Los que tratan directamente con el navegador: (window, history, location, navigator)
- Los que tienen una correlación directa con las etiquetas html (el resto).
En la siguiente tabla muestro los objetos del "navegador" y sus correspondientes etiquetas html:
Objeto |
Etiqueta |
frame |
<FRAME> |
document |
<BODY> |
form |
<FORM> |
link |
<A HREF=". . ."> |
anchor |
<A NAME=". . ."> |
applet |
<APPLET> |
image |
<IMG> |
plugin |
<EMBED> |
area |
<MAP> |
select |
<SELECT> |
textarea |
<TEXTAREA> |
El resto |
<INPUT TYPE=". . ."> |
A partir de estos datos, podemos decir que cuando yo pongo document.write("HOLA") equivale a escribir "HOLA" en el cuerpo del documento a partir de la posición del cursor en ese momento.
Ej:
<html> //--> |
Notas:
Si el documento finalizó su carga1 antes de
el document.write(), automáticamente se invoca al método
document.open() de forma que se abre un nuevo documento en
blanco a partir del cual se empieza a escribir.
<html> //--> |
En la mayoría de los casos, se puede ignorar la referencia a la ventana actual -incluso al documento actual - (window.document.write("Jarrr") por document.write("jarrr") ), pero es necesaria cuando estemos trabajando con varias ventanas ó frames.
Además de la notación de punto, podemos usar
la notación array :
document.forms[0].elements[0]
donde forms[0] representa al 1er formulario del doc.
y elements[0] al 1er elemento(u objeto text, input button,
etc...) del formulario anteriormente indicado.
NOTAS de el punto 3.2.1:
1 Si escribes despues del html, el documento todavía no ha
finalizado de cargar, por lo que en realidad estas escribiendo (malamente,
por cierto) al final del mismo.
3.2.2 Los objetos del lenguaje
Son:
- Array
- String
- Boolean
- Number
- Function
- Math
- Date
Como puedes ver, son los 5 tipos de datos más Array (salvo para arrays bidimensionales, prácticamente igual que en C), Math y Date.
Un ejemplo de manejo de arrays complejos lo tienes aquí
En esa misma sección encontarás ejemplos de manejo de fechas, formatos varios, etc...
3.3 Los eventos en JavaScript |
Los eventos son elementos muy importantes en este lenguaje; xq?? Pues porque a menudo nos interesa sacar información sólo cuando el usuario haya pinchado en una imagen, ó cuando haya pulsado una tecla en particular, ó cuando haya pasado por encima de un botón, ó . . .
Los eventos se pueden capturar de varias formas, aunque yo os recomiendo
que asocieis un onClick, un onMouseOver, un ... ( manejadores
del evento correspondiente ) al objeto del que querais capturar
el evento.
Por ej, si yo quiero que al pasar el ratón sobre una imagen
me ponga en la barra de estado su nombre, pondría:
Y si además de eso, quisiera que al hacer click
salga un alert diciendo "Gasol es muy bueno para su estatura":
onMouseOver="window.status='Jarrrr!';
"
onClick="alert('Gasol
es muy bueno para su estatura');">
Recuerda que en lugar del alert puedes invocar a una función que hayas escrito en la cabecera del doc, y ¡¡q maneje ella el evento.!!
ABREVIATURAS |
No creo que te encuentres con muchas abreviaturas en el texto, pero x si acaso se me ha escapdo alguna...:
JS |
es una abreviatura de JavaScript | |
Internet Explorer |
de Internet Explorer | |
Netscape Navigator |
de Netscape Navigator | |
aunq |
aunque | |
q |
qué | |
p |
para | |
ed |
Es decir | |
xq |
Porque | |
[ ] |
Indican que su interior es opcional escribirlo-usarlo | |
NaN |
Not a Number | |
arg |
argumento | |
cdo |
cuando | |
obj |
objeto | |
LOO |
Lenguaje Orientado a Objetos | |
sigui |
Siguiente | |
doc |
Documento |