Manual de introducción al JavaScript
Introducción
Netscape introdujo al JavaScript con el
nombre de LiveScript en su versión beta del Netscape Navigator 2.0. Cuando hizo el
definitivo 2.0 cambió el nombre a JavaScript.
JavaScript es un lenguaje diseñado para
crear aplicaciones dinámicas "on-line". Estas aplicaciones unen objetos y
recursos en el cliente y en el servidor.
Características de JavaScript
Simple
Como es un lenguaje simple, el
desarrollador web puede crear páginas dinámicas sin necesidad de convertirse en un
programador experto
Dinámico
Una página web se convierte en dinámica
cuando responde a eventos generados por el usuario u otro objeto. Con documentos HTML
tradicionales, las aplicaciones del extremo del servidor tenían la responsabilidad de
manejar los eventos pero JavaScript transfiere esa responsabilidad al extremo del
cliente, lo que hace el diseño de las páginas web más flexible, dinámico y con una
respuesta más rápida.
JavaScript está basado en objetos
No es un lenguaje orientado a objetos
como Java o C++ pero interacciona con los objetos. Un lenguaje de programación tiene
clases, herencia y tipos de variables, cosas de las que JavaScript carece.
Sin embargo, interacciona con los objetos
a los que expone al entorno. JavaScript puede acceder a objetos en el navegador. Esta
capacidad de interactuar con diferentes objetos le da una flexibilidad mucho mayor que
muchos programas complejos.
Utilidades de JavaScript
- Lleva al cliente bastante parte de
laacción del servidor con lo que éste se descarga.
- Permite validar los campos de formularios
antes de enviarlos al servidor.
- Posibilita que los documentos HTML
respondan a eventos locales.
- Posibilita al programador comunicar
información hacia y desde applets y plugins.
- Con JavaScript del lado del servidor, cada
usuario puede tener un perfil único y personalizado que le permita configurar páginas
web a medida.
- Permite accedes a bases de datos vía SQL
u ODBC.
Inclusión de JavaScript en HTML
<SCRIPT
LANGUAJE="JavaScript">
....código
</SCRIPT>
Mi Primer Script
<HTML>
<HEAD>
<SCRIPT LANGUAJE="JavaScript">
document.write("Hola Mundo!")
</SCRIPT>
</HEAD>
<BODY>
Este es mi primer script.
</BODY>
</HTML>
Manejo de eventos
Los eventos convierten una página
estática en una página dinámica interactiva. Los eventos se producen por acciones
del usuario, como pulsar un botón del mouse, o enviar un formulario o salir de una
página.
Variables
En JavaScript no se asigna en la
declaración el tipo de variable sino que el intérprete se encarga de esta tarea.
var miVariable;
miVariable = 2;
Alcance de las Variables
JavaScript permite dos alcances distintos
para las variables:
Variables Locales
Sólo se aplican dentro de una función
Variables Globales
Se declaran fuera de una función
Operadores Aritméticos
El propósito de lo operadores
aritméticos es calcular un valor numérico sencillo a parte de los valores numéricos de
literales o variables.
JavaScript soporta los operadores
matemáticos estándar de Suma(+), Resta(-), Multiplicación(*) y División(/).
También tiene los de Módulo(%),
Incremento(++), Decremento(--) y Negación(-).
Operadores Lógicos
Necesitan que los operandos sean
booleanos (verdadero o falso) y devuelven un valor lógico.
AND Lógico (&&)
OR Lógico (||)
NOT Lógico (!)
Operadores de comparación
Estos operadores se aplican a
comparaciones entre valores numéricos o de caracteres y no sobre boolenos.
Igual (= =)
Distinto (!=)
Mayor (>)
Menor (<)
Mayor o igual (> =)
Menor o igual (< =)
Operadores Strings
El operador de strings (+) concatena dos
valores de strings y devuelve otro que es la unión de los dos primeros;
"Java" + "Script"
devuelve
"JavaScript"
Orden de precedencia
En expresiones complejas, con más de un
operador, la precedencia de los operadores determina el orden de cálculo.
Tabla de Prcedencia de menor a mayor
de los operadores de JavaScript
| Descripción |
Operadores |
| Asignación |
= += -= *=
/= %= <<= >>= >>>= &= |= |
| Condicional |
?: |
| OR Lógico |
|| |
| AND Lógico |
&& |
| OR |
| |
| XOR |
^ |
| AND |
& |
| Igualdad |
== |= |
| Relacional |
< <=
> >= |
| Desplazamiento |
<<
>> >>> |
| Suma/Resta |
+ - |
| Multiplicación/Div |
* / % |
| Negación/Incremento |
! - ++ -- |
| Llamada, Miembro |
() [] |
Sentencias de control y funciones
Para hacer una página dinámica e
interactiva, el diseñador de páginas Web necesita sentencias que controles el flujo de
información.
IF ELSE
if (condición) {
sentencias 1 }
[ else {
sentencias 2 } ]
Ejemplo:
if (numero==1) {
numero++;
numero+=2; }
else
numero--;
Bucles
JavaScript soporta 2 estructuras de
bucles; la sentencia for y la while. Para el control de esas estructuras se
tienen las sentencias break y continue.
FOR
La sentencia FOR de JavaScript es la
misma que en Java y C.
Repite un bucle hasta que una condición sea cierta o hasta que salga del bucle con una
sentencia break.
for ([expresión_inicial
;] [condición;] [expresión_incremental]) {sentencias
}
- El intérprete ejecuta la
expresión_inicial que inicia todos los valores necesarios para el control del bucle.
- Después, el intérprete comprueba la
condición. Si es cierta, pasa el control al siguiente paso y si no, va a la siguiente
sentencia tras el bucle.
- El intérprete ejecuta la
expresión_incremental que actualiza las variables utilizads en el control del bucle.
- Se ejecutan las sentencias y -a menos que
se encuentre una sentencia break o continue- el control se devuelve al paso 2.
Ejemplo
<HTML>
<HEAD>
<SCRIPT LANGUAJE="JavaScript">
for (i=1; i<=10; i++) {
sq=i*i
document.write("número: " + i + "cuadrado: " + sq
+ "br");
i++;
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
La sentencia Break
Esta sentencia termina un bucle for o while y devuelve el control a la
sentencia que sigue al bucle terminado. El siguiente ejemplo ilustra cómo se usa:
i=0
while (i < 10) {
if (i==3)
break
i++
}
La sentencia continue
Como la sentencia break, esta
sentencia termina la iteración actual de un bucle for o while, pero
no sale del bucle. Que pase o no a la siguiente iteración depende del tipo de bucle:
En un bucle while el control
pasa a la condición.
En un bucle for el control pasa a la expresión_incremental.
Ejemplo:
i=0
while (i < 10) {
if (i==3)
continue
i++
}
La sentencia function
Una función es un grupo de sentencias
JavaScript que realizan una tarea determinada. Se le puede llamar desde cualquier punto
del documento y juega un importante papel en la escritura de gestores de eventos:
function Nombre (lista de
argumentos) }
sentencias
}
Ejemplo:
<HTML>
<HEAD>
<SCRIPT LANGUAJE="JavaScript">
function Mostrar(MostrarLinea + "<BR>")
document.write(MostrarLinea + "<BR>")
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAJE="JavaScript">
MostrarLinea("Hola Mundo")
</SCRIPT>
</BODY>
</HTML>
Comentarios
JavaScript permite dos tipos de
comentarios:
//este es un comentario
if (a==2) //comentarios desde aca
Introducción a los Objetos
JavaScript es un lenguaje basado en
objetos y no un lenguaje orientado a objetos (OOP). Los diseñadores de JavaScript no
intentaron crear otro OOP, sino que intentaron crear un lenguaje Script que proporcionara
una herramienta para integrar objetos creados con un lenguaje OOP en documentos HTML.
Los objetos y sus propiedades
Sistema de notación utilizado para
representar un objeto y sus propiedades:
ObjectName.PropertyName
Ejemplo
miperro.raza="callejero"
miperro.edad=5
miperro.peso=25
Definir métodos
Una función asociada a un objeto se
denomina método.
Objeto.Método=nombre_de_función
Objetos predefinidos
Es uno de los onjetos más importantes.
Define la ventana sobre la que estamos trabajando y tiene como descendientes los objetos
referentes a la barra de tareas, el documento o la secuencia de direcciones de la última
sesión.
Propiedades:
open
[Variable=][windows.]open("URL","Nombre",""Propiedades");
El método open sirve para crear y
abrir una ventana.
El parámetro URL, contiene la dirección de la ventana que estamos abriendo
El nombre será el que queramos que se utilize como parámetro de un TARGET y las Propiedades
son una lista separada por comas de algunos de los siguientes elementos:
- toolbar[=yes|no]
- location[=yes|no]
- directories[=yes|no]
- status[=yes|no]
- menubar[yes|no]
- scrollbars[=yes|no]
- resizable[=yes|no]
- width=pixels
- height=pixels
Close
Variable.close()
Cierra la ventana Variable
alert
Variable.alert("Mensaje");
Muestra una ventana de diálogo en la
ventana Variable con el mensaje especificado.
status
Define la cadena de caracteres que
saldrá en la barra de estado en un momento dado
defaultStatus
Define la cadena de caracteres que
saldrá por defecto en la barra de estado.
El objeto document
Es un objeto derivado de windows que
identifica a un documento HTML
write
document.write("Cadena");
Escribe el script
lastModified
Contiene la fecha y la hora en que se
modificó el documento por última vez.
El objeto history
Este objeto se deriva de document y
contiene todas las direcciones que se han visitado en la sesión actual. Tiene tres
métodos:
- document.history.back(): Volver a la
página anterior.
- document.history.forward(): Ir a la
página siguiente.
- document.history.go(donde): Ir a donde se
indique, siendo donde un número tal que go(I)=forward() y go(-I)=back
El objeto form
Este objeto derivado de document se
refiere a un formulario.
submit
Nombre.submit() // Envía el
formulario llamado Nombre.
text
Contiene el texto contenido en un campo
de edición de un formulario.
El objeto Date
Este objeto sirve para trabajar con
fechas y horas:
Métodos del objeto Date
| Método |
Valor devuelto |
| get Date ( ) |
Día del mes |
| get Day ( ) |
Día de la semana |
| get Hours ( ) |
Hora del día |
| get Minutes ( ) |
Minutos de la hora |
| get Month ( ) |
Mes |
| get Seconds ( ) |
Segundos del minuto |
| get Time ( ) |
Milisegundos desde 1/1/70 |
| get TimezoneOffret ( ) |
Derivación desde la hora local y el GTM |
| get Year ( ) |
Año |
Además de ser capaz de dar información,
los método del objeto Date, la tabla siguiente muestra como cambiar la información de
las fechas:
| Método |
Valores válidos |
| setDate (dia) |
1 - 31 |
| setHours (hora) |
0 - 23 |
| setMinutes (minuto) |
0 - 59 |
| setMonth (mes) |
0 - 11 |
| setSeconds (segundo) |
0 - 59 |
| setTime (valor) |
> = 0 |
| setYear (año) |
> = 1970 |
El objeto navigator
A través de este objeto podremos
averiguar varias características del navegador que usamos:
navigator.appName: Nombre
del navegador
navigator.appVer: Número principal de versión
navigator.languaje: Idioma del mismo
navigator.platform: Plataforma donde esta ejecutandose
El objeto screen
Con este objeto podremos averiguar la
configurar de la pantalla:
screen.height: Altura
screen.width: Anchura
screen.pixelDepth: Número de bits por pixel
Eventos
Un evento es algo que sucede. Para que
una rutina nuestra se ejecute sólo cuando suceda algo deberemos llamarla desde un
controlador de eventos. Estos controladores se asocian a un elemento HTML y se incluyen
así:
<A HREF="http://www.lavariable.com/"
onMouseOver="MiFuncion()">
Lista de eventos
| Evento |
Descripción |
Elementos que lo admiten |
| onLoad |
Terminar de cargarse una página |
<body><frameset><layer> |
| onUnLoad |
Salir de una página |
<body><frameset><layer> |
| onMouseOver |
Pasar el mouse por encima |
<a
href><area><layer> |
| onMouseOut |
Que el mouse deje de estar
encima |
<a
href><area><layer> |
| onSubmit |
Enviar un formulario |
<form> |
| onClick |
Pulsar un elemento |
<input type="button,
checkbox, link, radio"> |
| onBlur |
Perder el cursor |
<input
type="text"> |
| onChange |
Cambiar el contenido o perder el
cursor |
<input
type="text">
<textarea> |
| onFocus |
Conseguir el cursor |
<input
type="text">
<textarea>
<layer> |
| onSelect |
Seleccionar texto |
<input
type="text">
<textarea> |
Sumario
JavaScript es más que un simple languaje script y menos
que un completo lenguaje de programación orientado a objetos. Muy importante a la hora de
realizar tareas del lado del cliente debido a su compatibilidad con todos los navegadores
Ejemplos
1) Este script abre una ventana, después que la
página fué cerrada:
<!-- DOS PASOS PARA INSTALAR EL SCRIPT:
1. Copiar este código dentro del HEAD de tu documento HTML
2. Sumar en el eventoe onLoad dentro del tag BODY -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Comienzo
closetime = 0; // Cerrar
la ventana después de __ segundos?
function Start(URL, WIDTH, HEIGHT) {
windowprops = "left=50,top=50,width=" + WIDTH + ",height=" + HEIGHT;
preview = window.open(URL, "preview", windowprops);
if (closetime) setTimeout("preview.close();", closetime*1000);
}
function doPopup() {
url = "http://miVentana.htm";
width = 267; // ancho de la ventana en pixels
height = 103; // alto de la ventana en pixels
delay = 2; // time in seconds before popup opens
timer = setTimeout("Start(url, width, height)", delay*1000);
}
// Fin -->
</script>
<BODY OnLoad="doPopup();">
<p><center>
<a href="http://www.lavariable.com">El
Sitio de los programadores </a></font>
</center><p>
2) En este ejemplo, vamos a comprobar los datos de
tres formularios:
- Nombre Completo
- Dirección de Email
- Una Puntuación sobre el Sitio
<SCRIPT
LANGUAGE="JavaScript">
// Espacios en Blanco
var espacio ="\t\n\r";
//Chequear cuando la entrada esté vacía
function EstaVacio(s)
{ return ((s = = null) || (s.lenght = = 0 )) }
function HayEspacio(s)
{
var i;
if (EstaVacio(s)) return true;
// buscar a traves de lo caracteres hasta
encontrar un no espacio en blanco.
for (i = 0; i < s.length; i++)
{
var c = s.charAt(i);
if (espacio.indexOf(c) = = -1) return false;
}
return true;
}
function Entrada(val, str) {
var strInput = new String(val.value);
if (HayEspacio(strInput)) {
alert(str);
return false;
} else
return true;
}
function Ranking() {
if (parseInt(document.forms[0].nRanking.value) >= 1 &&
parseInt(document.forms[0].nRanking.value) <=10
return true;
else
return false;
}
function ValidarDatos() {
var EnviarDatos = false;
// Chequear si el campo nombre no está
vacío
EnviarDatos = Entrar(document.forms[0].txtNombre, "Ingresá tu nombre
completo.");
//Chequear que el ranking sea entre 1 y 10
EnviarDatos = Ranking();
Return EnviarDatos;
}
</SCRIPT>
Finalmente sólo nos falta crear el formulario.
<form
name="Formulario" method="get"
action="EntradaDeFormulario.asp" onsubmit="return ValidarDatos();">
|
