Palpalá - Jujuy - Argentina
Fiesta Nacional de los Estudiantes 2011.
Todo un proyecto...!!!
Complejo Educativo José Hernández (2013) y sus Carroceros.
Colegio Mayor Jujuy (2013) - El ave Fenix
Nuestro Sistema de Iluminación
que marcó toda una Historia en los Desfiles de Carrozas
En el Año del Bicentenario del Éxodo Jujeño.
Vieron que Argentina no termina en salta...!!!
La ciudad donde los Cerros...
Fueron Pintados por Duendes Traviesos...!!!
Tocando el Cielo, Fe y Esperanza.
Gracias Virgen de Punta Corral...!!!

TUTORIAL DE JAVASCRIPT:

Esto es un compilado de apuntes, ejercicios y algunos tip's para aplicar JavaScirpt a tus páginas web. Espero se de ayuda para quien lo necesite

Tutorial de JavaScript - Introducción:

No voy a explayarme demasiado dando detalles de la programación en JavaScript ni su historia ni nada por el estilo, vamos directamente a ver cómo aplicar JavaScript a nuestra web, y luego algunas buenas prácticas, las cuales las iré subiendo de a poco, solo ténganme paciencia.

Bueno... Cordiales Saludos y aquí vamos...


TUTORIAL DE JAVASCRIPT

Antes de comenzar vamos a ver algunas declaraciones importantes para incluir código JavaScript en nuestras páginas Web.

Para que una página xhtml sea válida se deben incluir las siguientes cabeceras, y un metadato indicando la codificación de caracteres utilizada por la página web, en este ejemplo utf-8, por lo que el archivos de código debe ser grabada en dicho formato, aquí un ejemplo de cómo quedaría la estructura de la página.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> new document </title>
        <meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
        <meta name="Author" content="" />
        <meta name="Keywords" content="" />
        <meta name="Description" content="" />
        <!-- Posible contenido de funciones JavaScript //-->
    </head>
    <body>
        <!-- Aquí va el contenido de la página //-->
        <!-- y por qué no, posible código JavaScript //-->
    </body>
</html>

DÓNDE INCLUIR CÓDIGO JAVASCRIPT?

A mi parecer, sólo en 4 lugares fundamentales, veamos...

  • En la Cabecera de la página: entre de las etiquetas <head>...</head> Generalmente funciones o declaraciones que serán utilizadas por la página en un determinado instante o cuando se dispare algún evento.
  • Dentro del cuerpo de la página: entre <body>...</body>

En ambos casos el código JavaScript debe ir entre etiquetas <script>...</script> indicando que el tipo de texto incluido es código JavaScript, así: type="text/javascript".

<script type="text/javascript">
<!--						
    alert("Mensaje de JavaScript");	// función JavaScript
//-->					
</script>
  • En un archivo externo al documento: En este caso se crea un script dentro de la página que enlaza con el archivo JavaScript mediante el atributo "src". El script debe ir dentro de las etiquetas <head>...</head>. Veamos un ejemplo para enlazar al archivo "funciones.js"
    <head>
        <title> new document </title>
        ...
        <script type="text/javascript" src="funciones.js"></script>
    </head>
  • En las etiquetas html del documento: generalmente cuando es necesario que la página responda a algún evento disparado por el usuario (escribir en un cuadro de texto, cuando hace clic en un lugar determinado, cuando selecciona un objeto, etc.). Aquí un ejemplo:
    <p onclick="alert('Mensaje de Prueba')">Ver el mensaje.</p>
    

COMENTARIOS:

Los comentarios en el código JavaScript pueden ser en línea (utilizando doble barra //) o bien en varias líneas (utilizando /*...*/), observa el siguiente ejemplo:

// este es un comentario de una sola línea

/* 
    Éste en cambio
    está escrito
    en varias líneas
*/

Dónde probar los Script de esta Página

Los códigos de prueba que no requieran uso de funciones las pondremos en el cuerpo de la página o se entre <body>...</body>, pero siempre utilizando las etiquetas de script.

Cuando necesitemos funciones, las escribiremos en la cabecera de la página o sea entre <head>...</head> y las llamadas a dichas funciones las pondremos en el cuerpo de la página o sea entre <body>...</body>.

Aquí un ejemplo para que quede más claro.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> new document </title>
        <meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
        <meta name="Author" content="" />
        <meta name="Keywords" content="" />
        <meta name="Description" content="" />
        <script type="text/javascript">
        <!--
            /*------ Aquí incluiré todas las FUNCIONES JavaScript ------*/
        //-->
        </script>
    </head>

    <body>
        <script type="text/javascript">
        <!--
            /*--- Aquí las LLAMADAS A FUNCIONES que se encuentren en el head ---*/
            /*-- Y Aquí también CÓDIGOS DE PRUEBA que no requieran funciones ---*/
        //-->
        </script>
    </body>
</html>

Cómo ver los resultados de nuestro código

Lo importante cuando probamos lo que hacemos, es ver los resultados, y aquí lo haremos de dos formas, una es utilizando una función, que devuelve el resultado como una cadena de texto en un cuadro de diálogo, pega el siguiente código en el cuerpo de una página y ve lo que hace...

<script type="text/javascript">
    <!--
        var saludo = "Hola Pascual...!!!";
        alert(saludo);
    //-->
</script>

La otra es escribiendo en el documento, accediendo por medio de sus nodos (no importa si no lo entiendes por ahora) es algo así, copia y pega el siguiente código en el cuerpo de una página y mira lo que hará...

<script type="text/javascript">
    <!--
        var saludo = "Hola Pascual...!!!";
        document.write(saludo);
    //-->
</script>

Bien, y con ésto ya estamos listos para comenzar a probar algunos script, pero antes un poquitín de teoría básica o conceptos fundamentales para que no cometas demasiados errores.


Seguimos...