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
}

  1. El intérprete ejecuta la expresión_inicial que inicia todos los valores necesarios para el control del bucle.
  2. 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.
  3. El intérprete ejecuta la expresión_incremental que actualiza las variables utilizads en el control del bucle.
  4. 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

  • El objeto Windows

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 ="tnr";

//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();">

Deja un comentario