miércoles, 30 de septiembre de 2009

Aprendiendo JavaScript a lo bestia

JavaScript es un lenguaje de programación interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C.

Gracias Wikipedia, ahora andate.

Lo que va a ir acá y en sucesivos post con el mismo título, serán funciones, sentencias y pedacitos de código javascript que me han sido utiles en el pasado, así cuando me tenga que enfrentar con un problema similar, evito buscar en google otra vez lo mismo.

Para empezar con nuestra primera leccion (?), tenemos 3 maneras de meter codigo javascript en una pagina: en la cabeza, en el cuerpo o afuera.

1) En la cabeza (HEAD)
Los scripts que metamos aqui solo seran ejecutados cuando sean llamados por algun evento o alguna otra funcion (que esten dentro de esta misma pagina).
Entre los tags <head> y </head> colocamos lo siguiente:

<script type="text/javascript">
function mensaje() {
alert("holaaaaaaaaaaaaaa");
}
</script>

Si queremos que esa funcion se ejecute cuando clickeamos un boton en un pagina, hacemos lo siguiente:

<input type="button" value="boton loco" onclick="mensaje();"/>

El html final quedaria asi (prueba.html):

<html>
<head>
<title>prueba</title>
<script type="text/javascript">
function mensaje() {
alert("holaaaaaaaaaaaaaa");
}
</script>
</head>
<body>
Clickea en este boton y te sorprenderas (?)
<input type="button" value="boton loco" onclick="mensaje();"/>
</body>
</html>



2) En el cuerpo (BODY)
Los script que metamos aca (entre los tags y , que es donde esta el contenido de la página) se ejecutan cuando carga la página y el navegador pasa por esa línea. La verdad que no lo recomiendo, pero alguna vez lo usé y quizás a alguno le sirve.
Ejemplo:

<html>
<head></head>
<body>
<script type="text/javascript">
document.write("Esta linea se escribio mediante javascript. Uy que piola que soy (?)");
</script>
</body>
</html>



3) Afuera de la página
Esta solución es la mejorcita porque separa el html del javascript, pero que se yo (?). Es muy util cuando una o varias funciones son usadas por más de una página (por ejemplo, para validar una entrada de datos).
Entonces las funciones javascript se ponen en un archivo de texto plano directamente, sin los tags <script>

Y en la parte HEAD de la página se hace una referencia al archivo conteniendo las funciones.

<script type="text/javascript" src="funciones.js"></script>


Asi que finalmente tendremos los archivos asi:

funciones.js

function mensaje() {
alert("holaaaaaaaaaaaaaa");
}

function otroMensaje (texto) {
alert(texto);
}


prueba2.html

<html>
<head>
<title>prueba2</title>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
Clickea en este boton y te sorprenderas (?)
<input type="button" value="boton loco" onclick="mensaje();"/><br/>
Clickea en este boton y te sorprenderas aun mas (?)
<input type="button" value="otro boton loco" onclick="otroMensaje('hola2');"/>
</body>
</html>


Hasta acá llega nuestra primera lección. Pruebenlo en sus casas y después me cuentan (?)

2 comentarios:

Pol dijo...

La imagen habla por si sola(?)

http://img15.imageshack.us/img15/3572/dibujovg.jpg

Gracias loco!

Mel dijo...

Praaaaaaa... :O

(P)