Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana que nos muestre el ya famoso mensaje "hola a todos". Así podremos ver los elementos principales del lenguaje. El siguiente código es una página Web completa que muestra un mensaje.
<html>
<head>
<title>El primer script</title>
<script type="text/javascript">
alert(" \"Hola a todos!\" ");
/* alert significa visualiza en una ventana emergente
el mensaje escrito entre comillas */
//Esto es un comentario en Javascript que ocupa una linea
//alert("Esta frase se ve en otra ventana emergente si quitas el comentario");
alert("Hola a todos! \n Esta frase se ve en una linea distinta");
// \n es una secuencia de escape
</script>
</head>
<body>
<p> El script se ha introducido en el cabecero aunque tambien se puede
incluir en el body del documento, como puedes comprobar </p>
</body>
</html>
Ahora vamos a ver qué significa el elemento extraño que tiene la página anterior:
<SCRIPT type="text/JavaScript"> </SCRIPT>
Dentro de estos elementos será donde se puedan poner funciones en JavaScript. Puedes poner cuantos quieras a lo largo del documento y en el lugar que más te guste. Yo he elegido la cabecera para hacer más legible la parte HTML de la página. Si un navegador no acepta JavaScript no leerá lo que hay entre medias de estos elementos. Así que si programamos algo que sólo funcione con la versión 1.1 pondríamos type= "text/JavaScript1.1" para que los navegadores antiguos pasen olímpicamente del código y no se hagan un lío.
El segundo ejercicio de Javascript hace lo mismo que el primero, sólo que ahora el código Javascript se ha introducido en un archivo externo. Para ello, la etiqueta <script> contiene el atributo src donde se indica el camino y nombre del archivo Javascript que utiliza.
Ej2JS.html
<html>
<head>
<title>El segundo script</title>
<script type="text/javascript" src="js/js2.js">
</script>
<!--Crea una carpeta js y un archivo llamado js2.js. Corta el contenido del script anterior y pegalo dentro del archivo-->
</head>
<body>
<p>Esta página contiene un script pero su código se ha escrito
en un archivo externo</p> </body>
</html>
El archivo javascript puedes escribirlo con el mismo editor en el que escribes documentos html, en nuestro caso, con Notepad++. Eso si, para guardarlo, debes usar la extensión js. A continuación, se muestra el contenido del archivo js2.js.
js2.js
alert(" \"Hola a todos!\" ");
/* alert significa visualiza en una ventana emergente
el mensaje escrito entre comillas */
//Esto es un comentario en Javascript que ocupa una linea
//alert("Esta frase se ve en otra ventana emergente si quitas el comentario");
alert("Hola a todos! \n Esta frase se ve en una linea distinta");
// \n significa salto de línea
El siguiente ejercicio muestra cómo se puede hacer desaparecer un párrafo de texto y aparecer otro. Una forma de conseguirlo es con la función getElementbyId() del DOM (Document Object Model) que permite acceder directamente al nodo requerido y modificar la propiedad class del mismo. Para ello, se marca el párrafo requerido con un atributo id="valor " que lo identifica y sirve de argumento a la función anterior. De esta manera, se accede a los dos párrafos concretos, uno para ocultarlo y otro para hacerlo visible. Normalmente, la ejecución del script se activaría con una pulsación de ratón o similar (evento onclick) sobre el elemento párrafo visible inicialmente.Volveremos sobre los eventos más adelante.
Ej7JS.html
<html >
<head>
<title>El séptimo script</title>
<style type="text/css">
.oculto { display: none; }
.visible { display: inline; }
<!--Ver propiedad display en css-->
</style>
<script type="text/javascript">
function muestra() {
var elemento = document.getElementById("texto_adicional");
elemento.className = "visible";
var elemento = document.getElementById("texto_inicial");
elemento.className = "oculto";
}
</script>
</head>
<body>
<p id="texto_inicial" onclick="muestra();">
Este es el primer párrafo del documento. Cuando acabes de leerlo, haz click encima con el ratón y aparecerá más texto para que sigas leyendo.
</p>
<p id="texto_adicional" class="oculto">Aquí empieza el segundo párrafo de texto. Inicialmente, está oculto y sólo se hace visible cuando se pincha con el botón izquierdo encima del párrafo anterior, ocultándose este último.
</p>
</body>
</html>