Introduccion 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.

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.

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”.

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.

ü OnFocus – sucede cuando un elemento recibe el foco mediante el ratón o el teclado -

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

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.

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.

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:

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

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

Referencia

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 target Text Textarea	reset submit	onReset onSubmit	Es el formulario, cuando se crea un formulario en realidad se genera un objeto form
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 italics link small split strike	none	Es una cadena de caracteres
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:

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:

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

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

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:

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:

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.

Curso de Frontpage 1997, 2000, 2002, XP. Curso de creación y diseño de páginas web con Frontpage

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

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)

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

Introducción a JavaScript