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í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á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.
JavaScript
By raycore
