Parte 2: Primeros pasos con Javascript

2.1 El lenguaje Javascript

Vamos a conocer cómo incluir scripts, mezclando el propio código Javascript con el HTML. Luego veremos cómo se debe colocar código para que nuestra web sea compatible con todos los navegadores, incluso aquellos que no soportan Javascript.

2.1.1 Javascript se escribe en el documento HTML

La programación de Javascript se realiza dentro del propio documento HTML. Es decir, el código Javascript se mezcla con el propio código HTML para generar la página. Debemos aprender a mezclar los dos lenguajes de programación, para que puedan convivir sin problemas, se han de incluir los delimitadores <SCRIPT> y </SCRIPT>.

2.1.2 La colocación de los scripts sí que importa

En una misma página podemos introducir varios scripts, cada uno que podría introducirse dentro de unas etiquetas <SCRIPT> distintas.

También se puede escribir Javascript dentro de determinados atributos de la página, como el atributo onclick. Estos atributos están relacionados con las acciones del usuario y se llaman manejadores de eventos.

2.2 Maneras de ejecutar scripts Javascript

Existen dos maneras de ejecutar scripts: al cargar la página o como respuesta a acciones del usuario.

2.2.1 Ejecución directa

Se incluyen las instrucciones dentro de la etiqueta <SCRIPT>. Cuando el navegador lee la página y encuentra un script va interpretando las líneas de código y las va ejecutando una después de otra.

2.2.2 Respuesta a un evento

Los eventos son acciones que realiza el usuario. Los programas como Javascript están preparados para atrapar determinadas acciones realizadas, y realizar acciones como respuesta. Existen muchos tipos de eventos distintos, por ejemplo la pulsación de un botón, el movimiento del ratón o la selección de texto de la página.

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

2.3 Ocultar scripts Javascript en navegadores antiguos

Para evitar que el texto de los scripts se escriba en la página cuando los navegadores no los entienden se tienen que ocultar los con comentarios HTML (<!-comentario HTML -->).

2.3.1 Ocultar el código Javascript con comentarios HTML

<SCRIPT>
<!--
Código Javascript
//-->
</SCRIPT>

El inicio del comentario HTML es idéntico a cómo lo conocemos en el HTML, pero el cierre del comentario empieza por doble barra inclinada.

2.3.2 Mostrar un mensaje para navegadores antiguos con <NOSCRIPT>

Podemos sugerir a los visitantes que actualicen su navegador a una versión compatible con el lenguaje. Para ello utilizamos la etiqueta <NOSCRIPT> y entre esta etiqueta y su correspondiente de cierre podemos colocar el texto alternativo al script.

<SCRIPT>
código javascript
</SCRIPT>
<NOSCRIPT>
Este navegador no comprende los scripts que se están ejecutando, debes actualizar tu versión de navegador a una más reciente.
<br><br>
<a href=http://netscape.com>Netscape</a>.<br>
<a href=http://microsoft.com>Microsoft</a>.
</NOSCRIPT>

2.4 Más sobre colocar scripts

2.4.1 Indicar el lenguaje que estamos utilizando

El atributo en cuestión es language y lo más habitual es indicar simplemente el lenguaje con el que se han programado los scripts.

2.4.2 Incluir ficheros externos de Javascript

Otra manera de incluir scripts en páginas web es incluir archivos externos con extensión .js

<SCRIPT language=javascript src="archivo_externo.js">
//estoy incluyendo el fichero "archivo_externo.js"
</SCRIPT>

El archivo que incluimos (en este caso archivo_externo.js) debe contener tan solo sentencias Javascript. No debemos incluir código HTML de ningún tipo, ni tan siquiera las etiquetas </SCRIPT> y </SCRIPT>.

2.5.- Sintaxis Javascript

Sintaxis del lenguaje Javascript.

2.5.1 Comentarios en el código

Un comentario es una parte de código que no es interpretada por el navegador. Existen dos tipos: la doble barra, sirve para comentar una línea de código. El otro comentario lo podemos utilizar para comentar varias líneas y se indica con los signos /* para empezar el comentario y */ para terminarlo.

<SCRIPT>
//Este es un comentario de una línea
/*Este comentario se puede extender
por varias líneas.
Las que quieras*/
</SCRIPT>

2.5.2 Mayúsculas y minúsculas

En Javascript se han de respetar las mayúsculas y las minúsculas. Para que la funcion alert() la reconozca Javascript se tiene que escribir toda en minúsculas. Lons nombres se escriben en minúscula a no ser que se utilice un nombre con más de una palabra. Por ejemplo documen.bgColor se escribe con la "C" de color en mayúscula, por ser la primera letra de la segunda palabra.

2.5.3 Separación de instrucciones

Javascript tiene dos maneras de separar instrucciones: a través del punto y coma (;) y a través de un salto de línea.

Por esta razón Las sentencias Javascript no necesitan acabar en punto y coma a no ser que coloquemos dos instrucciones en la misma línea.

PROGRAMACIÓN EN JAVASCRIPT I Parte 1: Introducción a Javascript

PROGRAMACIÓN EN JAVASCRIPT 

PARTE I

1.1 Introducción a Javascript

Qué es Javascript y las posibilidades que nos ofrece.

1.1.1 Qué es Javascript

Javascript es un lenguaje de programación utilizado para definir interactividades con el usuario.

Tenemos dos vertientes:

 - Por un lado los efectos especiales para crear contenidos dinámicos y elementos que tengan movimiento, cambien de color o cualquier otro dinamismo. 

 - Por el otro lado responder a las acciones del usuario, páginas interactivas con programas como calculadoras, agenda, o tablas de cálculo, etc.

1.2 Algo de historia sobre Javascript

Conforme fue creciendo el Web el HTML se había quedado corto ya que sólo sirve para presentar el texto en página y poco más, por lo que surgió el Java, un lenguaje que había creado una manera de incrustar programas en páginas web. La programación de Applets fue un gran avance y Netscape (asociado con Java), por aquel entonces el navegador más popular, había roto la primera barrera del HTML al hacer posible la programación dentro de las páginas web.

1.3 Diferencias entre Java y Javascript

Java y Javascript son dos productos distintos.

Actualmente son productos totalmente distintos y no guardan entre si más relación que la sintaxis idéntica y poco más. Algunas diferencias son:

• Compilador. Para programar en Java necesitamos un Kit de desarrollo y un compilador.Orientado a objetos.

• Orientado a objetos. Java es un lenguaje de programación orientado

• Propósito. java es mucho más potente que Javascript, se pueden hacer aplicaciones de lo más variado, con Javascript sólo pòdemos escribir programas para que se ejecuten en páginas web.

• Estructuras fuertes. Java es un lenguaje de programación fuertemente tipado, podemos meter en una variable la información que deseemos, independientemente del tipo de ésta.

• Otras características. Java es mucho más complejo, potente y seguro, y tiene más funcionalidades que Javascript.

1.4 Antes de empezar

1.4.1 Usos de Javascript

Actualmente se ha vuelto una de las insignias de lo que se denomina la Web 2.0 y la experiencia enriquecida del usuario. Facebook, Twitter o Youtube usan javascript a raudales. Un ejemplo es cuando en la red social apretamos un enlace para comentar algo, se muestra en la página un pequeño formulario que aparece como por arte de magia y luego se envía sin salirse de la propia página. Otro caso sería cuando votamos por un vídeo de Youtube o cuando se cuentan los caracteres que llevamos escritos en los minipost de Twitter.

Javascript hace que una página web se convierta en un verdadero programa interactivo de gestión de cualquier recurso. Ejemplo claros son Google Docs, Office Online o Google Calendar.

1.4.2 Qué se necesita para trabajar en Js

Un editor de textos y un navegador compatible con Javascript.
Existen editores avanzados que tienen ayudas como colorear los códigos de nuestros scripts, etc. Entre otros están el Notepad++, UltraEdit y jEdit.

1.4.3 Conocimientos previos

Lo cierto es que no hace falta tener mucha base de conocimientos, no obstante, sería bueno tener un dominio avanzado de HTML y un conocimiento medio sobre CSS.

1.5 Versiones de navegadores y de Js

Con el tiempo también el HTML ha avanzado y se han creado nuevas características como las capas, que permiten maquetar los documentos.

1.6 Efectos rápidos con Js

1.6.1 Abrir una ventana secundaria

Podemos ver cómo abrir una ventana secundaria sin barras de menús que muestre el buscador Google:

<script> 

window.open("http://www.google.com","","width=550,height=420,menubar=no")

</script>

1.6.2 Mensaje de Bienvenida

Podemos mostrar una caja de texto emergente al terminarse de cargar la portada de nuestro sitio web:

<script> 

window.alert("Bienvenido a mi sitio web. Gracias...") 

</script>

1.6.3 Fecha actual

Script para mostrar la fecha de hoy:

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

1.6.4 Botón de volver

Un botón para volver hacia la página anterior del historial (si es que la hubiera):

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

En este caso la instrucción Javascript se encuentra dentro de un atributo de HTML, onclick, que indica que esa instrucción se tiene que ejecutar como respuesta a la pulsación del botón.

Programación en JavaScript

Este manual de programación es una adaptación de un curso de iniciación a la Programación en JavaScript impartido por la ETC (Escuela-Taller de Castro Urdiales, Cantabria). 

A continuación se tratará de adaptar los contenidos en una serie de capítulos sintetizados para adquirir los conocimientos básicos sobre programación en JavaScript. 

Espero que este manual recoja lo suficientemente claras las secciones del mismo y sea de ayuda para posteriores formaciones. 

A programar!