jueves, 23 de abril de 2009

JavaScript: primer script



Como lo prometido es deuda, os voy a enseñar como se hace que el culo tan bonito de la señorita esa te diga, umm asi asi.

Para ello vamos por pasos, lo primero es poner la imagen, por que sin imagen, no le vamos a ver su bonito trasero. Y esto como se hace, muy sencillo, con html, html como ya os explique es el codigo basico de una web, con lo que se hace, se usan muchos mas codigos para una web, pero html es el basico, y es imprescindible.

Poner una imagen en html es simple, html funciona por etiquetas, y cada etiqueta tiene el siguiente formato <etiqueta> Lo que quieras poner </etiqueta>
como veis muy bonito, abres la etiqueta, escribes lo que te de la gana, y cierras la etiqueta. La etiquetas de las imagenes es
<img>
y no necesita ser cerrada, ahora vereis por que:

<img src="">


Esta claro que img proviene de imagen, y src de source, vamos fuente lugar donde tienes la imagen y su nombre: src="http://www.tias.com/culitobonito.jpg"
Es un ejemplo que nadie use la direccion que es inventada, que os veo.

Bueno ya tenemos la imagen, asi que ya podemos empezar con el javascript:


<script type="text/javascript">
function hola()
{alert("Umm, asi asi");
}
</script>


Esto señores es una función, que como lo se, por que mira pone function :p, en realidad estamos creando una funcion, la funcion hola, como si la hubieramos querido llamar benito.
Empezamos:
<script type="text/javascript">
esto es la etiqueta del script, igual que la de imagen, aqui le decimos, he ten cuidado que esto es javascript no la cagues que te conozco, y para decirle hemos terminado ya con el javascript seguimos con html </script>

La funcion simplemente la creamos asi function

function nombredelafuncion(){
Aqui va el codigo
}

y cada vez que pongamos nombredelafuncion() automaticamente nos ejecutara el codigo que va entre llaves {}

alert("lo que sea"); esto hace que nos salte un cuadradito diciendo lo que sea, como el umm asi asi, la función alert, esta ya viene hecha de casa, hace eso, una ventanita de alerta con lo que tu quieras que ponga.

Ya tenemos nuestra funcion, esta la pones encima de todo del codigo, mas que nada por orden, y por que tiene que ir antes de la imagen, para que cuando la usemos, el ordenador sepa de que le estamos hablando, por que si no se lo explicamos antes, pasa como con vosotros, que me pegais.

Ahora simplemente vamos a aplicar esa funcion a nuestra imagen



<img onclick="javascript:hola()" src="http://www.tias.com/culito.jpg">


Simplemente, dentro de la etiqueta de la imagen, debemos añadir el evento onclick, y ahora tu me diras, muy bonito eso de evento y onclick, pero para que sirve, un evento se refiere a cuando el usuario haga algo, cuando tu pinchas en esta ventana, es un evento, cuando das para atras es un evento, cuando la pagina termina de cargar es otro, cuando pasas el raton por encima de algo, es otro, tu vida esta llena de eventos y ni te enteras :p . El evento onclick sirve para esto, cuando este hombre pulse aqui, haz esto, asi de simple, lo que vamos a decirle es, cuando este hombre pulse en esta foto ejecuta esta funcion onclic="javascript:hola()" veis, javascript, para que sepa que es javascript, dos puntos, y nuestra querida funcion.

Con esto ya esta todo echo, ahora simplemente es cuestion de guardar en un html o ponerlo en una web y tachannnnnnnnnnn, ya tenemos hecho nuestro primer script, aplaudios a vosotros mismos y sentios orgullosos de vuestra creacion y poder infinito.

Por cierto, blogger tiene un pequeño defecto, y es que el javascript no rula aqui, por lo menos en los posts, en los widgets o cuadraditos que te salen a la derecha si, asi que no intenteis ponerlo por el momento en blogger, otro dia os explico como solucionar esto de blogger para que podais usar vuestros codigos en javascript aqui. A pasarlo bien.

1 comentario:

  1. Lo probaremos en la web a ver que tal funciona, ya comentaremos resultados ^^

    Esto de la informatica.... <.<

    ResponderEliminar