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 blur onBlur Botón
name click onClick utilizado en el
type focus onFocus formulario
value
Checkbox checked blur onBlur Es un
defaultChecked click onClick elemento del
form focus onFocus formulario
name
type
value
document alinkColor close none Toda la pagina
Area open web
bgColor write
cookie writeln
fgColor
Form
forms
Image
images
lastModified
linkColor
Link
links
referrer
title
URL
vlinkColor
Form action reset onReset Es el
Button submit onSubmit formulario,
Checkbox cuando se crea
elements un formulario
Hidden en realidad se
length genera un
method objeto form
name
Password
Radio
Reset
Select
Submit
 target
Text
Textarea
Frame frames blur onBlur
name clearTimeout onFocus
length focus
parent setTimeout
self
window
Image border none onAbort
height onError
hspace onLoad
lowsrc
name
prototype
src
width
Link and hash none onClick
Area host onMouseOut
hostname onMouseOver
href
pathname
port
protocol
search
target
Password defaultValue blur onBlur
form focus onFocus
name select
type
value
Select form blur onBlur Es un
length focus onChange elemento del
name onFocus formulario
options
selectedIndex
text
type
String length blink none Es una cadena
prototype bold de caracteres
fixed
fontcolor
fontsize
indexOf
 italics
link
small
split
strike
Submit form blur onBlur Es un
name click onClick elemento del
type focus onFocus formulario
value
Text defaultValue blur onBlur Es un
form focus onChange elemento del
name select onFocus formulario
type onSelect
value
Textarea defaultValue blur onBlur Es un
form focus onChange elemento del
name select onFocus formulario
type onSelect
value
window closed alert onBlur Es el objeto
defaultStatus blur onError que engloba a
document clearTimeOut onFocus la ventana del
Frame close onLoad navegador.
frames confirm onUnload
history focus
length open
location prompt
name setTimeOut
opener
parent
self
status
top
window
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 extender
por 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.