JavaScript

Primero vamos a dejar en claro que JavaScript no tiene prácticamente nada que ver con Java.

JavaScript es un lenguaje de programación interpretado, en otras palabras, es un lenguaje que no requiere compilación. Por lo general se utiliza en páginas Web. Su sintaxis es muy parecida a la de Java y C. Es muy sencillo, y está pensado para hacer las cosas con rapidez, incluso a veces con ligereza.

Este lenguaje nos permite interactuar con el navegador de manera dinámica y eficaz, proporcionando así más vida a nuestras páginas. El navegador del cliente es el encargado de interpretar las instrucciones JavaScript y ejecutarlas, por lo que el mayor recurso con el que cuenta este lenguaje, es el propio navegador.

Si somos programadores Web, y sólo tenemos la base de HTML, entonces lo más adecuado es continuar nuestro aprendizaje en JavaScript. Así podrá mejorar sus páginas y a la vez la potencia de sus proyectos.

JavaScript tiene muchas posibilidades: permite la programación de pequeños scripts, programación de aplicaciones más grandes, orientadas a objetos, con funciones y estructuras de datos complejas.

Entre las acciones típicas de JavaScript tenemos dos grandes géneros. Por un lado los efectos especiales sobre páginas Web, y por el otro, la capacidad de ejecutar instrucciones como respuesta a las acciones del usuario.

Los requerimientos para programar con JavaScript son un editor de textos y un navegador compatible con JavaScript.

Ejercicios rápidos

  • Abrir una ventana secundaria Veamos cómo abrir una ventana secundaria sin barras de menús y que nos muestre el buscador Google. El código sería el siguiente:

<script>
window.open(“http://www.google.com&#8221;,””,”width=550,height=420,menubar=no”)
</script>

  • Crear un mensaje de bienvenida Mostraremos una caja de texto emergente al finalizar la carga de la página home de nuestro sitio web, la cual le dará la bienvenida al visitante. El código sería el siguiente:

<script>
window.alert(“Bienvenido a mi sitio web. Gracias…”)
</script>

  • Mostrar la fecha actual A veces es muy interesante mostrar la fecha en nuestro sitio web. Así daremos la impresión de tener un sitio actualizado. El código sería el siguiente:

<script>
document.write(new Date())
</script>

  • Botón para volver Crearemos un botón para retroceder, parecido al botón con el que cuenta nuestro navegador en la barra de herramientas. Para ello, mezclaremos HTML y JavaScript. El código sería el siguiente:

<input type=button value=Atrás onclick=”history.go(-1)”>

Como diferencia con los ejemplos anteriores, destacamos que en este último caso la instrucción JavaScript se encuentra dentro de un atributo HTML (onClick), el cual indica que esta instrucción se ejecuta como respuesta a la pulsación del botón.

Sin duda hemos comprobado la gran facilidad con la que se realizan acciones muy prácticas. Así funciona JavaScript.

JavaScript se escribe en el documento HTML

No nos olvidemos que la programación de JavaScript se realiza dentro del propio código HTML. En otras palabras, vamos a tener dos tipos de programación en el mismo documento. Para que no tengamos problemas al mezclarlos, debemos usar los delimitadores de ambos códigos. Estos delimitadores son <script> y </script>. Cualquier código JavaScript que introduzcamos a la página debe ir entre estos tags.

También podemos escribir JavaScript dentro de determinados atributos de la página, como en el atributo onClick. Estos atributos están relacionados con las acciones del usuario y se llaman “manejadores de eventos”.

Ejecución directa de Scripts

Es el método más común y básico para ejecutar scripts. En este caso se incluyen las instrucciones dentro de la etiqueta <script>, tal como ya lo habíamos mencionado. Cuando el navegador lee la página y encuentra un script comienza a interpretar las líneas de código y las va ejecutando una después de otra. Esta manera se llama ejecución directa, ya que cuando se lee la página, se ejecutan directamente los scripts.

Respuesta a un evento

Esta es la otra manera de ejecutar un script. Para adentrarnos en ella, debemos estudiar primero los eventos. Los eventos son acciones que realiza el usuario. Los programas como JavaScript están preparados para atrapar determinadas acciones realizadas sobre la página y realizar acciones como respuesta. Así podemos generar páginas interactivas ya que controlamos los movimientos del usuario y respondemos a ellos. Existen diversos tipos de eventos, como la pulsación de un botón, el movimiento del mouse o la selección de texto de la página.

Las acciones que queramos realizar como respuesta a un evento se han de indicar dentro del mismo código HTML, pero en este caso se indican en los atributos que se colocan dentro de la etiqueta que queremos que responda a las acciones del usuario.

Declarar qué lenguaje estamos utilizando

La etiqueta <script> tiene un atributo que sirve para indicar el lenguaje que estamos utilizando para generar los scripts. Por ejemplo, podemos indicar que estamos programando con JavaScript 1.2 o VBScript. El atributo en cuestión es language, y lo más habitual es indicar solamente el nombre del lenguaje y no su versión. El lenguaje por defecto es JavaScript, por lo que si no utilizamos este atributo el navegador asumirá que estamos trabajando con este lenguaje. Ejemplo:

<script language=javascript>

Ficheros externos de JavaScript

Otra manera de incluir scripts en nuestras páginas es incluir archivos externos en el cual podemos colocar muchas o todas las funcione que deseamos usar en nuestro proyecto. Los archivos suelen tener extensión .js y se importan de la siguiente manera:

<script language=javascript src=”archivoJavaScript.js”> </script>

Comentarios

Un comentario es una parte de código que no es interpretada por el navegador, y cuya utilidad radica en facilitar la lectura del código. El programador, a medida que desarrolla el script, va dejando frases o palabras sueltas llamadas comentarios que son muy útiles a la hora de modificar o depurarlo.

Mayúsculas y minúsculas

En JavaScript se han de respetar las mayúsculas y minúsculas. Si nos equivocamos al utilizarlas el navegador responderá con un mensaje de error de sintaxis. Por convención, los nombres se escriben con minúscula, salvo que se utilice un nombre con más de una palabra, pues en ese caso se escribirán con mayúsculas las iniciales de las palabras siguientes a la primera. También se puede utilizar mayúscula para el nombre de una clase.

Separación de instrucciones

Las distintas instrucciones que contienen nuestros scripts se han de separar para que el navegador no nos arroje errores de sintaxis. JavaScript tiene dos maneras de separar instrucciones. La primera es a través del caracter punto y coma (;), y la segunda es a través de un salto de línea.

Variables

Una variable es un espacio en memoria donde se almacena un dato. Un espacio donde podemos guardar cualquier tipo de dato. Por ejemplo, si nuestro programa realiza sumas, será muy normal que guardemos en variables los distintos sumandos que participan en la operación y el resultado de la suma. El código sería algo así:

sumando1 = 15
sumando2 = 6
suma = sumando1 + sumando2

Los nombres de las variables han de construirse con caracteres alfanuméricos y el caracter subrayado (_). Aparte de esta, hay una serie de reglas adicionales para construir nombres para variables. No podemos utilizar caracteres “raros”. Nombres válidos para una variable podrían ser:

Edad
paisDeNacimiento
_nombre

Declaración de variables

Declarar variables consiste en definir y, de paso, informar al sistema de que vamos a utilizar una variable. Es una costumbre habitual en los lenguajes de programación el definir las variables que se van a usar en los programas, y para ello se siguen unas reglas estrictas. Sin embargo, JavaScript se salta muchas reglas por ser un lenguaje un tanto libre a la hora de programar, y lo notamos en el hecho de que no nos exige declarar las variables.

De todos modos es aconsejable declarar las variables, y para ello JavaScript cuenta con la palabra var. Como es lógico, se utiliza esa palabra para definir la variable antes de utilizarla.

var resultado1
var resultado2

También se puede asignar un valor a la variable cuando se está declarando.

var resultado1 = 10
var resultado2 = 20

También se permite declarar varias variables en la misma línea. Para ello necesitamos separarlas por comas.

var resultado1, var resultado2

Ámbito de las variables

El ámbito de las variables es el nombre que recibe el lugar en donde ellas están disponibles.

Lo común es que cuando declaramos una variable, esta se encuentre disponible en el lugar en el cual la hemos declarado. Por lo que las variables que declaremos en una página, estarán accesibles dentro de ella. Lo lógico es entonces el no poder invocarlas desde otras páginas. Esta declaración de variables es conocida como “variables globales”, aunque no son las únicas que existen.

  • Variables globales Estas variables están declaradas en un ámbito lo más amplio posible, lo que en JavaScript es una página Web. Para realizar la declaración, simplemente utilizamos la expresión var.

<script>
var variableResultado
</script>

Las variables globales son accesibles desde cualquier lugar de la página, en otras palabras, desde el script donde se declaró y desde todos los demás scripts de la página, incluidos los manejadores de eventos (onclick, etc).

  • Variables locales También podemos declarar este tipo de variables que tienen un ámbito mucho más reducido que las variables globales. Cuando declaremos variables locales, sólo podremos acceder a ellas dentro del lugar en donde las hemos creado, es decir, si la declaramos en una función X, solamente desde la función X podremos invocarla. Estas variables pueden ser locales a una función, pero también lo pueden ser a otros ámbitos, como un bucle. Por lo general es un ámbito local cualquier lugar acotado por llaves.

<script>
function nombreFuncion(){
var variableLocal
}
</script>

En el script anterior se muestra cómo declarar una variable local dentro de una función. Está claramente definida la acotación a través de las llaves en los extremos del código.

No hay ningún problema en declarar una variable local con el mismo nombre de una variable global, ya que en este caso la variable global quedará disponible en toda la página con excepción del bloque en el que está declarada la variable local.

Diferencias entre utilizar VAR y no utilizarlo

Como ya mencionamos, en Javascript no estamos obligados a declarar nuestras variables, pero si lo hacemos tendremos efectos diferentes que en caso de que no lo hagamos. Si utilizamos la declaración de la variable estamos poniéndola en un ámbito local, en caso de no hacerlo, la ponemos en un ámbito global.

Qué datos se pueden almacenar en las variables

Muchos tipos de datos se pueden almacenar en las variables. Cada uno de los tipos de datos tiene características y usos distintos. A continuación mostramos los tipos de datos que soporta JavaScript:

  • Numérico Este tipo de datos guarda números tales como 7, 23, 299, 1000, 123234, 0.676, 6.12, 3.34e12, etc. No importa la precisión del dato numérico, este siempre pertenecerá a este tipo de datos.
  • Texto Este tipo de datos guarda cadenas de caractéres. Cuando escribimos un texto en JavaScript debemos hacerlo dentro de comillas, ya sean simples o dobles.
  • Booleano Este tipo de datos guarda un valor único. Este valor se entiende como la variante entre dos valores posibles: true y false. Dependiendo del valor de la variable se ejecutan o no una serie de instrucciones.

Es importante señalar que en las variables podemos guardar además elementos más complicados tales como un objeto, una función o un valor vacío o nulo. Pero esto lo analizaremos más adelante.

La verdad es que las variables en JavaScript no precisan que se les especifique un tipo de datos en particular al momento de declararla. Podemos introducir en ellas cualquier tipo de datos; incluso podemos ir cambiando el tipo de datos de una variable a través del tiempo. Veamos un ejemplo:

var pais = “Brasil”
pais = 54

Esta despreocupación al momento de asignar tipos de datos a nuestras variables pudiera considerarse como una ventaja, más a la larga pudiera llegar a ser una fuente de errores, ya que dependiendo del tipo de datos de una variable, estas se comportarán de un modo u otro, y si no tenemos experiencia, podríamos estar sumando un número con un texto.

Operadores en JavaScript

Sea cual sea el lenguaje que utilicemos para programar, siempre tendremos que utilizar en más de alguna oportunidad los operadores. Estos sirven para hacer cálculos y operaciones que permiten la variación en el comportamiento de nuestras aplicaciones. Existen diversos tipos de operadores, algunos simples y otros más complejos.

Antes de analizar los tipos de operadores existentes en JavaScript, vamos a ver algunos ejemplos de operadores para que tengamos una idea clara de lo que realmente son.

Operador suma: 3 + 17 = 20

Una respuesta a “JavaScript

  1. Pingback: JavaScript « Eje Informático·

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s