Introducción a JavaScript

Existen diversos lenguajes Script (lenguajes interpretados) que se utilizan para programación en la web: uno de ellos es JavaScript. Como su nombre lo indica su base de sintaxis es el famoso lenguaje “Java”.

Este lenguaje de programación es utilizado en Internet debido a que se crean pequeñas rutinas destinadas a realizar acciones en el ámbito de una página web. Como se lo denomina comúnmente, este código se ejecuta “del lado del cliente”, debido a que el navegador es el que interpreta este lenguaje, por lo cual todo sucede en el ordenador del cliente.

JavaScript es un recurso muy potente para lograr mejorar las páginas web así como lograr un óptimo funcionamiento de sus proyectos web.

Lo importante de JavaScript es la posibilidad de funcionar en ambos sistemas operativos, tanto Windows como Linux.

Las diferencias entre JavaScript y Java son muchas e importantes, pero sólo nos limitaremos a enunciar las ventajas de JavaScript.

Es un código “interpretado” por el cliente Es un lenguaje abierto Es un código orientado a objetos Es un código integrado a HTML Reutilización de código de programación

Existe un concepto básico para programar en JavaScript al igual que en otros lenguajes de programación, que es sumamente importante: el OBJETO.

Un objeto es una entidad que agrupa características propias y se le pueden realizar ciertos cambios a dichas características a través de sus métodos.

Por lo cual un objeto tiene asociados atributos y métodos.

Ejemplo:

La pantalla (screen) es un objeto, sus atributos son sus dimensiones, su posición, etc. “screen.widht” es el ancho del objeto pantalla.

Asignarle un nuevo valor a este atributo es tan sencillo como hacer “screen.widht = 800”.

Estos atributos se pueden modificar mediante métodos como: open y close: Abre y cierra respectivamente ventanas del navegador. alert: despliega un mensaje de alerta. confirm: despliega un mensaje de confirmación con un botón de Aceptar y uno de

Cancelar. prompt: despliega un mensaje de diálogo para ingresar un valor. blur y focus: remueve o asigna da el foco a una ventana. scroll: desplaza una pantalla hasta una coordenada específica. setTimeout: evalúa una expresión después de un determinado tiempo.

Eventos

Existen diferentes eventos que se producen ante ciertas acciones del ratón o de algunas teclas que son presionadas por el usuario.

Todos los objetos no poseen los mismos atributos ni responden a los mismos eventos. Es importante consultar que métodos posee cada objeto. Más adelante hay tabla en donde se detallan los objetos más utilizados con todas sus referencias. La respuesta a estos eventos es posible programarlas mediante JavaScript.

Los diferentes eventos son: OnMouseOver – se lanza cuando el mouse pasa sobre un objeto - OnMouseOut – se lanza cuando el mouse se aleja de un determinado objeto - OnBlur – ocurre cuando un elemento pierde el foco - OnChange – se invoca cuando se modifica un objeto - OnFocus – sucede cuando un elemento recibe el foco mediante el ratón o el teclado - OnClick – ocurre cuando se hace click sobre un objeto con el ratón - OnLoad – se invoca cuando se carga la página web - OnMouseDown – se lanza al presionar el botón - OnSubmit – ocurre al enviar un formulario - OnReset – sucede al limpiar un formulario - Por ejemplo:

Si el ratón pasa sobre algún hipervínculo (se disparará en dicho caso un evento) desplegaremos un mensaje de alerta.

<A HREF="noplace" OnMouseOver="alert('Anímese!')">

PRESIONE AQUI PARA ENCONTRAR SU PREMIO!

</A>

Lo que se encuentra dentro de los paréntesis del alert es lo que el cliente observará dentro de un cuadro de diálogo cuando pase con el ratón sobre el link.

JavaScript trata a cada elemento HTML como si fuese un objeto, por ende una etiqueta <image> será tratada como un objeto en el ámbito de JavaScript para su programación, con sus atributos, métodos y eventos asociados.

Variable

Una variable es un elemento que tiene la capacidad de almacenar un valor asignado.

El valor a guardar puede ser de cualquier tipo: una fecha, una palabra, un valor de verdad, etc. En un script pueden existir diversas variables, por lo cual es necesario definir las variable para su posterior identificación. En realidad se trata de darle un nombre descriptivo y asignarle, de ser necesario, un valor inicial.

Para ello existe la palabra reservada* var, ejemplo: var fecha_actual

Tanto en los scripts como en cualquier otro lenguaje de programación, existen palabras reservadas que el sistema interpreta como instrucciones, por lo cual no pueden ser utilizadas como nombre de variables.

Una particularidad de JavaScript es la capacidad de poder declarar variables en el momento de utilizarlas, por lo cual la programación es mucho menos detallista.

Ejemplo: var fecha_actual = ‘26/06/2002’

Existe en programación el concepto de variable local y variable global, que en JavaScript también se aplica.

Operadores

Como su nombre lo indica, los operadores permiten realizar diferentes operaciones (aritméticas, lógicas, de comparación) entre cualquier valor, almacenado en una variable o no, dentro de nuestro bloque de código JavaScript.

La siguiente tabla contiene una lista de operadores aritméticos que son utilizados en JavaScript:

Operador Descripción Nro. de operandos Ejemplo+ Suma 2 A + B- Resta 2 A + B* Multiplicación 2 A * B/ División 2 A / B% Resto de div. entera 2 A % B++ Incremento en 1 1 A++, ++A-- Decremento en 1 1 A--, --A

La siguiente tabla contiene una lista de operadores lógicos que son utilizados en JavaScript:

Operador Descripción Nro. de operandos Ejemplo&& “y” lógico 2 (condición) AND

(condición)|| “o” lógico 2 (condición) OR (condición)! Negación lógica 1 NOT (condición)

La siguiente tabla contiene una lista de operadores de comparación lógicos que son utilizados en JavaScript:

Operador Descripción Nro. de operandos Ejemplo== Igualdad 2 A == B!= Desigualdad 2 A ¡= B> “es mayor que” 2 A > B>= “es mayor o igual que” 2 A >= B< “es menor que” 2 A < B<= “es menor o igual que” 2 A <= B

Referencia

Esta tabla es una referencia de los objetos, sus atributos y sus eventos:

Objeto Propiedades Métodos Eventos

Button form name type value

blur click focus

onBlur onClick onFocus

Botón utilizado en el

formulario

Checkbox checked defaultChecked form name type value

blur click focus

onBlur onClick onFocus

Es un elemento del

formulario

document alinkColor Area bgColor cookie fgColor Form forms Image images lastModified linkColor Link links referrer title URL vlinkColor

close open write writeln

none Toda la pagina web

Form action Button Checkbox elements Hidden length method name Password Radio Reset Select Submit

reset submit

onReset onSubmit

Es el formulario,

cuando se crea un formulario en realidad se

genera un objeto form

target Text Textarea

Frame frames name length parent self window

blur clearTimeout focus setTimeout

onBlur onFocus

Image border height hspace lowsrc name prototype src width

none onAbort onError onLoad

Link and Area

hash host hostname href pathname port protocol search target

none onClick onMouseOut onMouseOver

Password defaultValue form name type value

blur focus select

onBlur onFocus

Select form length name options selectedIndex text type

blur focus

onBlur onChange onFocus

Es un elemento del

formulario

String length prototype

blink bold fixed fontcolor fontsize indexOf

none Es una cadena de caracteres

italics link small split strike

Submit form name type value

blur click focus

onBlur onClick onFocus

Es un elemento del formulario

Text defaultValue form name type value

blur focus select

onBlur onChange onFocus onSelect

Es un elemento del formulario

Textarea defaultValue form name type value

blur focus select

onBlur onChange onFocus onSelect

Es un elemento del formulario

window closed defaultStatus document Frame frames history length location name opener parent self status top window

alert blur clearTimeOut close confirm focus open prompt setTimeOut

onBlur onError onFocus onLoad onUnload

Es el objeto que engloba a la ventana del

navegador.

Sintaxis

Como cualquier lenguaje de programación, el JavaScript posee una sintaxis propia.

Inicio de JavaScripts

Mediante el siguiente par de “etiquetas” HTML se indica el inicio y el fin de un bloque de código JavaScript dentro de una página web:

<script language="JavaScript" type="text/javascript">

Estructuras de control

IF – ELSE

Esta es una estructura de decisión que permite, según la evaluación de la condición obtener uno u otro resultado.

Por ejemplo, si la variable contiene un valor nulo y es evaluada de la siguiente manera:

if (variable == null){

alert(‘Atención: valor nulo’);}

Aparecerá en pantalla un cuadro de diálogo diciendo “Atención: valor nulo”, ya que la variable cumplía con dicha condición.

Los bloques de instrucciones se encierran entre llaves:

if (condición)

{ }

else

{ }

Comentarios

Un comentario es un texto dentro del código que no es interpretado por el navegador y cuya utilidad radica en facilitar la lectura al programador. El programador, a medida que desarrolla el script, va dejando frases o palabras sueltas, llamadas comentarios, que le ayudan a él o a cualquier otro a leer más fácilmente el script a la hora de modificarlo o depurarlo.Ya se vió anteriormente algún comentario JavaScript, pero ahora vamos a mostrarlos de nuevo. Existen dos tipos de comentarios en este lenguaje. Uno de ellos, la doble barra, sirve para comentar una línea de código. El otro comentario lo podemos utilizar para comentar varias líneas a la vez y se indica con los signos /* para empezar el comentario y */ para terminarlo. Veamos unos ejemplos:

<SCRIPT>//Este es un comentario de una línea/*Este comentario se puede extenderpor varias líneas.

Todas las que sean necesarias!*/</SCRIPT>

Ejemplos

Ahora desarrollaremos un par de ejemplos útiles en JavaScript.

Detectar la resolución del monitor

Al diseñar una página web se decide una resolución de pantalla para la cual su visualización será óptima, por ejemplo 800x600 pixeles. Sin embargo, es un buen detalle que si el usuario posee una resolución diferente, siga viendo la página de manera adecuada y no demasiado grande ni demasiado pequeña.

Para lograr este excelente detalle estético es posible escribir un bloque de código JavaScript que varíe la imagen que será mostrada dependiendo de la resolución de pantalla detectada en el ordenador del usuario. Para ello se toma del objeto screen (pantalla) su ancho; esto se hace a través del atributo widht de dicho objeto. Finalmente comparamos dicho valor con uno preestablecido y decidimos que imagen mostrar dependiendo el caso:

<script language="JavaScript" type="text/javascript">var scrwidth = screen.width;if (scrwidth <= 800)

{ document.write("<IMG ALT=’’ BORDER=’0’ SRC=’img800.jpg’>"); }else

{ document.write("<IMG ALT=’’ BORDER=’0’ SRC=’img1024.jpg’>"); }</script>

Bloquear el botón derecho del ratón

En muchas ocasiones deseamos o bien que el código fuente de una página no pueda ser fácilmente visto o bien que no sea tan simple para los usuarios que visiten nuestra página grabar las imágenes de la misma a su disco rígido. Para ello, con una pequeña sección de código JavaScript logramos atrapar el evento que se genera al presionar el botón derecho del ratón, evitando que aparezca el menú contextual habitual, siendo éste reemplazado por un mensaje nuestro:

<html><head><script language="JavaScript" type="text/javascript">

function mouse(){

if (event.button == 2) alert(‘Copyright 2002’);}

</script></head>

<body OnMouseDown='mouse()'>

...

...

...

</body></html>

Se destaca en el código fuente (en amarillo) la sección que asocia al evento OnMouseDown con la función JavaScript que hemos escrito.