Redes Sociales


11 oct 2011

Tutorial básico JavaScript


¿Qué es JavaScript?
JavaScript es un lenguaje de programación interpretado, se define como orientado a objetos y nos permite hacer mejoras en la interfaz de usuario y en páginas web.
Es un lenguaje con una sintaxis muy similar a C y no tiene nada que ver con el lenguaje Java aunque adopta algunos nombres y convenciones de este.



Vamos a hacer un ejemplo y vamos a ir comentando las partes.

Primero de todo tenemos que saber que los javascripts pueden ir de tres maneras: los podemos poner dentro del body de un documento HTML, en la cabecera del documento HTML o en un documento aparte con extensión ".js" donde pondremos nombres a las funciones de javascript y luego llamaremos desde el HTML. Nosotros usaremos la tercera forma posible ya que es la más valida.

Tenemos un HTML como el siguiente:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>
  <title> Prueba JavaScript</title>
  <script type="text/javascript" src="javascript.js"> </script>
 </head>
 <body>
<p> <button onclick="saludo()"> Saludo </button> </p>
 </body>
</html>


Todo lo que está señalizado en negrita se refiere a JavaScript y es lo que vamos a explicar a continuación.

La primera linea en negrita se inserta en el <head> y lo que hace es decir de que tipo es el archivo, en este caso "text/javascript" y donde está el archivo donde recogerá las funciones al cual hemos llamado "javascript.js".
En definitiva, esta linea sirve para especificar donde está el archivo javascript.

En la segunda linea usamos la sintaxis de javascript para decir que queremos crear un botón "buttom" que cuando lo pulsemos "onclick" haga algo, y ahora es cuando se llama a la función que está en el documento ".js" que veremos después, a la función la llamaremos saludo y los paréntesis que van a continuación están porque hay veces que se mandan variables a las funciones, pero como en este caso no vamos a hacerlo lo dejamos en blanco tal que quede una cosa así "saludo()", justo después tenemos que poner el texto que aparecerá en el botón, > Saludo <, cerramos la etiqueta button y nos vamos al documento ".js".

En el documento JavaScript pondremos lo siguiente:


function saludo()
{
alert("Hola Mundo!");
}


Usamos "function" para declarar la función, seguidamente ponemos el mismo nombre que hemos usado en el documento HTML para la función, "saludo()", abrimos unas llaves y dentro de ellas introduciremos la función.
Hay mil cosas por hacer con este lenguaje y cada una tiene su nombre, hay que saber que en la programación orientada a objetos siempre se usa la siguiente sintaxis: objeto.acción

En JavaScript si pones simplemente la acción, como en este caso, de objeto cogerá por defecto window que se refiere a la ventana (window.alert), si por ejemplo usásemos otra acción como "document.write" nos permitiría escribir en el documento, pero primero hemos tenido que especificar el objeto document, si no sería erróneo.

Usamos alert para que cree una ventana de alerta en la que nos dirá el texto que lleva dentro: "Hola Mundo!".

Recordad que este documento debe ser guardado con el nombre de "javascript.js" que es como lo hemos llamado en el HTML, si ponéis otro nombre deberíais de cambiarlo o si no, no lo encontrará y por lo tanto no podrá ejecutar la función.

0 comentarios:

Publicar un comentario

Related Posts Plugin for WordPress, Blogger...