Javascript

Lenguaje de programación javascript para páginas web dinamicas e interactivas.

¿Que es javascript?

Una pagina web dinamica es aquella en la que podemos agregar efectos y transiciones, que al usuario le pareceran interesantes, como por ejemplo incorporar efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.

Aplicaciones de javascript

javascrip esta presente en cualquier pagina web, ya sea desde efectos simples hasta complejas animaciones:

algunas aplicaciones más comunes son:

Calculadoras, conversores de unidades y monedas online
rollovers (imagen cambia cuando pasa el mouse)
menus desplegables
apertura de ventanas secundarias

Paginas web con javascript

Efectos en elementos HTML

INteraccion con el usuario

Transiciones

Efectos geniales con javascript

Estructura basica javascript

Los scripts en HTML deben ser insertados entre las etiquetas:

 <script></script>

con esta etiqueta indicamos el inicio y el final de nuetro codigo javascript dentro de nuestra página web

Ejemplo 1

nuestro primer 'Script'

<script>
   alert('Mi primer JavaScript');
</script>

En esta ejemplo se usa la función 'alert' de JavaScript, que nos sirve para poder mostrarle al usuario un mensaje de alerta o de aviso.

Ejemplo 1

JavaScript en el <body>

javascript nos permite interactuar con el contenido de nuestra pagina web, es decir, nosotros podemos agregar mas contenido de forma dinamica:

<!doctype html>
<html>
<body>
.
.
<script>
   document.write("<h1>Este es el t&iacute;tulo</h1>");
   document.write("<p>Esto es un parrafo</p>");
</script>
.
.
</body>
</html>

En este ejemplo javascript escribe texto en el <body> mientras la pagina se carga

Funciones y eventos

Las sentencias de JavaScript en los ejemplos anteriores se ejecutan cuando se carga la pagina.

En los siguientes ejemplos trataremos de ejecutar nuestras funciones javascript en un evento: "como cuando el usuario hace click en un boton"

javascript en el <head> o <body>

Con javascript podemos poner un sin fin de funciones o comandos dentro de nuestro documento HTML.

Nuestros scripts pueden estar en el <body> o en la seccion <head> del html, y/o en los dos

Funcion javascript en el <head>

Funciones Javascript en el <body>

Comandos basicos JavaScript

Escribiendo en un documento HTML

document.write("<h1>Este es un encabezado</h1>");
document.write("<p>Este es un p&aacute;rrafo</p>");

Nota:

Sólo se puede utilizar "document.write " en la salida HTML. Si lo usa después que el documento se haya cargado, todo el documento se sobrescribirá.

Reacción a los eventos

 <button type="button" onclick="alert('Bienvenido!')">Clic aqui</button>

Nota: La función alert() no se utiliza mucho en Javascript, pero a menudo es muy útil para probar el

código. El evento onclick() es solo uno de los muchos eventos de HTML

Cambiando contenido HTML

Usar Javascript para manipular el contenido de los elementos HTML es una funcionalidad muy poderosa.

x=document.getElementById("demo");   //Encuentra el elemento
x.innerHTML="Hello JavaScript";      //Cambia el elemento

NOTA:

Es frecuente encontrar document.getElementById ("algún id"). Esto se define en el DOM HTML.. El DOM (Document Object Model) es el estándar W3C oficial para acceder a los elementos HTML.

Cambiando Estilos HTML

JavaScript se puede utilizar para cambiar el estilo de los elementos HTML

x=document.getElementById("demo");   //Encuentra el elementox.style.color="#ff0000";             //Cambia el estilo

Ejemplos guiados

Mi primera aplicación con javascript

Mi segunda aplicación con JavaScript

Ejercicios

Ejercicio 1:

Escriba un script que muestre una ventana en el navegador que diga: “Bienvenido a la página”.

Ejercicio 2:

Escriba un script en el cual haga funcionar un boton parecido al ejemplo guiado No 2. EL boton debe decir "Presióname"

Tras presionar el boton se debe mostrar en el navegador el mensaje "Gracias por presionar el boton"

Ejercicio 2

Ejemplo 3: Encender una lampara

En este ejemplo se muestra como cambiar el origen de una imagen html (propiedad src) para simular el encendido y apagado de una lámpara.