Una Web+Libre: JavaScript y HTML

En esta ocasión compartiré con ustedes un articulo introductorio sobre el uso de JavaScript en archivos externos al código HTML, el ejemplo es muy sencillo, solo pretende ilustrar el uso del mismo.

-----------------------------------------------------

Código JavaScript

function saludo()

{

alert("bienvenido a mi pagina");

}

----------------------------------------------------

Código HTML

<!DOCTYPE html>

<html>

<head>

<title>Mi página</title>

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

</head>

<body>

contenido de la página

<script language="javascript">

saludo();

</script>

</body>

</html>

------------------------------------------------------------

Explicación del código

------------------------------------------------------------

El código javascript es muy sencillo, solo contiene una función llamada saludo.

El código HTML tiene dos scripts: uno en el head para importar el código javascript y el otro antes de cerrar el body para llamar a la función saludo.
La función saludo muestra un alert (mensaje de alerta)con el texto que hallamos definido, en este caso "bienvenido a mi pagina"

De igual forma el archivo js podría contener mas funciones listas para ser invocadas desde diferentes porciones o eventos del HTML.

Podemos agregar mas funciones a nuestro archivo "funciones.js" y llamarlas desde otros elementos como un boton por ejemplo:
Esto creará un boton para llevarme a la pagina de google.com

--------------------------javaScript----------------------

function confirmation()
{
    var answer = confirm("¿en serio desea irse de esta página?")
    if (answer){
        alert("Adios!")
        window.location = "http://www.google.com/";
    }
    else{
        alert("Gracias por quedarse aquí!")
    }
}

-----------------------------HTML-------------------------

<input type="button" onclick="confirmation()" value="irme a Google">

----------------------------------------------------------

Otro ejemplo:
Esto creará un boton que abrirá un dialogo para combiar su texto

--------------------------javaScript----------------------

function cambiar()
{
name= prompt("digite su nombre aqui");
document.forma.boton1.value=name;
}

-----------------------------HTML-------------------------

<input type="button" id="btn" onclick="cambiar()" name="boton1" value="colocar su nombre aqui">
</input>

----------------------------------------------------------

Ver este ejemplo online.
Archivos de este tutorial: html-javascript.zip

Obtener mas información: introduccion_javascript.pdf.
o aquí

martes, 26 de junio de 2012

JavaScript y HTML

No hay comentarios:

Publicar un comentario

Seguidores