Introducción a JavaScript

JavaScript es un lenguaje de scripting para las Web. JavaScript es usado en muchas Webs para agregar funcionalidad, validación de formularios, comunicación con servidores y mucho más.

En una serie de post aprenderemos a usar JavaScript de una forma rápida y clara.  ¡-). Para los que no tengan conocimientos básicos en HTML y CSS, en la sección de Manuales hay dos documentos que les ayudarán a tener claro los conceptos básicos de estos lenguajes de marcador y style.

Conociendo JavaScript:

JavaScript es un lenguaje de los denominados scripting, esto quiere decir que no se necesita compilar para poder ejecutarlo y que sólo necesitan de un intérprete para poder ejecutarse; en nuestro caso el intérprete de JavaScript es el propio navegador web. Sí, nuestro navegador!. Lo que ha influenciado tanto para que el desarrollo en JavaScript sea tan popular.

Sería una buena idea leer un poco sobre los conceptos de JavaScript en la Wikipedia, ya que no trataremos estos temas en profundidad.

Para qué nos sirve JavaScript?

JavaScript, se ha diseñado para añadir interactividad a las páginas HTML.
JavaScript, provee a los diseñadores de una herramienta de programación para HTML.
JavaScript, puede capturar eventos y reaccionar a los mismos, como hacer click, mover el mouse, etc.
JavaScript, puede leer y escribir un elemento HTML y cambiar su contenido.
JavaScript, se puede usar para validar datos de un formulario antes de que éste envíe los datos a un servidor.
JavaScript, se puede usar para detectar qué tipo de navegador es usado por el visitante.
JavaScript, se puede usar para crear cookies, para almacenar y recuperar información en la computadora del visitante.

Bloque JavaScript:

Para poder escribir código JavaScript y que lo pueda entender nuesto intérprete, éste debe estar contenido en un bloque o elemento HTML <script> así:

<script type="text/javascript">
 // Código JavaScript
 </script>

Por lo general este bloque se encuentra ubicado en la cabecera (dentro de <head></head>) de nuestro código HTML. En este bloque encontramos las barras “//“, las cuales se usan para comentar código (igual que en C++) además JavaScript también usa los comentaríos tipo ANSI C (/* Bloque de líneas comentado */).

Escribiendo código JavaScript:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Example 1</title>
 5 </head>
 6 <body>
 7     <h1>Mi primera p&aacute;gina Web</h1>
 8     <script type="text/javascript">
 9         document.write("<p>" + Date() + "</p>");
 10     </script>
 11 </body>
 12 </html>

En el código anterior vamos a mostrar la fecha y hora actual en una página Web. Donde nuesto JavaScript crea un elemento párrafo <p></p> que contiene dicha fecha y hora.

Explorando nuestro código:
document.write(), es un atributo del objeto document, en nuestro caso nuestra propia página. Aquí estamos diciendo escriba en nuestro documento HTML.
El signo “+“, es un concatenador en JavaScript, que nos sirve para unir strings a strings, strings a número, etc.
Date(), función built-in que representa la fecha y hora.

Crear o manipular elemento HTML como lo hicimos anteriormente con document.write(), no es la forma correcta de usar el DOM (Document Object Model), para esto podemos usar métodos de acceso.

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Example 1</title>
 5 </head>
 6 <body>
 7     <h1>Mi primera p&aacute;gina Web</h1>
 8     <p id="date"></p>
 9     <script type="text/javascript">
 10         document.getElementById("date").innerHTML=Date();
 11     </script>
 12 </body>
 13 </html>

Explorando nuestro código:
getElementById(): sirve para obtener la referencia a un elemento (objeto) del DOM, por medio de su atributo id.
innerHTML: propiedad JavaScript que sirve para escribir nuevo contenido dentro de un elemento HTML (Existe una alternativa a través del DOM para realizar esta misma acción).

Cómo y dónde se ejecuta JavaScript?

Como se dijo anteriormente JavaScript puede estar dentro del <body> y en la seción <head> de nuestra página HTML. En los ejemplos anteriores el código JavaScript lo situamos dentro del <body> ya que la funcionalidad que estábamos buscando era reemplazar el contenido de un elemento <p>. Debemos tener en cuenta que el código JavaScript se coloca en la parte inferior de la página para asegurarse de que no se ejecuta antes de que el elemento de <p> sea creado.

JavaScript se ejecuta cuando se carga la página HTML. Pero a veces esto no es lo que siempre queremos. Por ejemplo, a veces queremos ejecutar JavaScript cuando sucede un evento, como “cuando se hace clic en un botón”. Cuando este es el caso, podemos poner nuestro código en una función y sólo llamarla en el momento que se presione el botón.

JavaScript en el <head>:

Los eventos se utilizan normalmente en combinación con funciones (como llamar a una función cuando ocurre un evento). Por qué no realizamos un ejemplo donde mostremos la hora y fecha en el momento que el usuario haga clic en un botón!.

 1 <!DOCTYPE htlm>
 2 <html>
 3     <head>
 4         <script type="text/javascript">
 5             function displayDate(){
 6                 document.getElementById('date').innerHTML=Date();
 7             }
 8         </script>
 9     </head>
 10     <body>
 11         <h1>Mi primera p&aacute;gina Web</h1>
 12         <p id="date"></p>
 13         <button type="button" onclick="displayDate()">Mostrar Fecha y Hora</button>
 14     </body>
 15 </html>

Debemos tener en cuenta que puede existir código JavaScript cuantas veces necesitemos y puede estar tando en el <head> como en el <body>, pero es una práctica común encontrar todas las funciones JavaScript en el <head> o en un documento .js externo (como veremos más adelante). De esta manera todo está en un lugar y no interfiere con el contenido de la página.

Usando código JavaScript Externo:

Es una buena práctica situar o separar nuestro código JavaScript en uno o varios ficheros distintos al HTML. Esto es lo que conocemos como modularidad. La modularidad nos permite entre muchas cosas tener un esquema organizacional bien estructurado, además que nos evita repetir el mismo código en páginas HTML donde necesitemos las mismas funcionalidades JavaScript. Ya que podremos usar las mismas funciones que se encuentran en el fichero JavaScript para todas las páginas HTML.

La convención de un fichero JavaScript externo, es no tener elementos <script></script> y debe terminar en su nombre con la extensión .js. Editemos nuestro ejemplo anterior usando un fichero externo de JavaScript.

Creemos un fichero llamado sources.js, que contiene nuesto código JavaScript:

 1 /* Código JavaScript */
 2
 3 function displayDate(){
 4     document.getElementById('date').innerHTML=Date();
 5 }

Y nuestro HTML tendría algo como esto:

 1 <!DOCTYPE htlm>
 2 <html>
 3     <head>
 4         <script type="text/javascript" src="sources.js"></script>
 5     </head>
 6     <body>
 7         <h1>Mi primera p&aacute;gina Web</h1>
 8         <p id="date">Este es un p&aacute;rrafo.</p>
 9         <button type="button" onclick="displayDate()">Mostrar Fecha y Hora</button>
 10     </body>
 11 </html>

Note que el atributo src de la etiqueta <script> debe tener la ruta (path) al fichero JavaScript. Aquí está nuestro primer ejemplo JavaScript funcional:

By: Jolth

Anuncios

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