Capítulo 2: Fundamentos de JavaScript
Para introducir código JavaScript en una página HTML:
<SCRIPT
LANGUAGE="JavaScript">
<!--
Programa
JavaScript
//-->
</SCRIPT>
Las líneas 2 y 4 se introducen para evitar que se generen errores
en navegadores que no soporten JavaScript y para que estos
navegadores no muestren el código del script en la
página.
Los comentarios se utilizan en todos los lenguajes de
programación para añadir explicaciones al código. Cuando el
intérprete de comandos (o compilador, según el caso) encuentra estas
líneas, las ignora. En JavaScript se utiliza el formato de
comentarios propio de C/C++. Así, si es para comentar una línea:
// comentario de una línea
Si el comentario ocupa varias líneas, se usan los carácteres
/* (inicio de comentario) y */ (fin de comentario):
/* comentario de varias
líneas */
Los bloques de código que integran una unidad son encerrados
entre los caracteres { y }. Por otra parte, JavaScript es sensible a
mayúsculas y minúsculas.
Los scripts que queramos utilizar en una página suelen
escribirse en la misma página, normalmente entre las etiquetas
<head> y </head>. Determinados scripts
pueden aparecer entre las etiquetas <body> y </body> (por ejemplo, gestores de
eventos, o scripts que escriben código on-line), pero
lo normal es que la mayoría de las funciones estén en la cabecera de
la página.
Otra posibilidad es la inclusión del código JavaScript en
ficheros externos, de extensión .js. Estos ficheros
son enlazados desde la página HTML donde se utilizan con este código
(que deberá ir también entre <head> y </head>):
<SCRIPT LANGUAGE="JavaScript"
SRC="fichero.js"></SCRIPT>
Este código es ignorado automáticamente por los navegadores que
no soportan JavaScript.
Para escribir la cadena Texto en
la página HTML:
document.write("Texto")
Para escribir la cadena Texto en
la página HTML más un retorno de carro:
document.writeln("Texto")
Caracteres especiales a utilizar en cadenas de texto:
| Caracter |
Significado |
| \n |
Nueva línea |
| \t |
Tabulador |
| \r |
Retorno de carro |
| \f |
Alimentación de formulario |
| \b |
Retroceso de un
espacio |
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo
2.1: escritura de cadenas de
texto</TITLE>
</HEAD>
<BODY>
<SCRIPT
LANGUAGE="JavaScript">
<!--
document.write('<IMG
SRC="imagen.gif">')
document.write("<BR><H1>Bienvenido
a
JavaScript</H1>")
//-->
</SCRIPT>
</BODY>
</HTML>
Como el nombre de la imagen lleva comillas dobles, el texto
pasado al método write lleva comillas simples.
La manera más sencilla consiste en utilizar el método alert() del objeto window:
alert("Texto")
Por ejemplo:
alert("¡Bienvenido!\n\n\tEsta Web está dedicada a
JavaScript.")
Este tipo de ventanas de diálogo muestra un botón
Aceptar que el usuario deberá pulsar para
continuar. Para ver el resultado del ejemplo anterior, pulsa sobre
el siguiente botón:
Existen otros tipos de ventanas de diálogo que interactúan con el
usuario. El método prompt() del
objeto window muestra una caja de
texto en la que el usuario puede introducir contenidos. También
muestra dos botones, Aceptar y
Cancelar. Ejemplo:
prompt("Su color favorito es: ","Azul")
Para verlo en acción pulsa sobre este botón:
El segundo parámetro es el valor predeterminado para la caja de
texto, que el usuario podrá modificar. Este cuadro de diálogo
permite capturar datos introducidos por el usuario y realizar una
acción en base a ellos. Por ejemplo, podemos pedirle al usuario que
introduzca su nombre, y despues mostrarlo:
<HTML>
<HEAD>
<TITLE>Ejemplo
2.2: página que pide el
nombre</TITLE>
</HEAD>
<BODY>
<SCRIPT
LANGUAGE="JavaScript">
<!--
var nombre =
prompt("Introduzca su
nombre:","")
document.write("<H2>Bienvendio, " + nombre +
"</H2>")
//-->
</SCRIPT>
<P>Aquí va
el resto de la
página...</P>
</BODY>
</HTML>
Si analizamos el ejemplo anterior, vemos que se ha definido una
variable cuyo identificador es nombre. El concepto de variable y cómo se
definen se explica más detalladamente en el Capítulo 3: Trabajando con datos e información.
Finalmente, para pedir al usuario confirmación en la realización
de una acción podemos usar el método confirm() del objeto window. Este método mostrará un cuadro de
diálogo con el mensaje de texto que le pasemos como parámetro, y dos
botones, Aceptar y Cancelar:
confirm("¿Desea volver al inicio de la
página?")
Este método devuelve verdadero (true) si se pulsa
Aceptar y falso (false) si se pulsa
Cancelar. Podemos ver un ejemplo de este cuadro de
diálogo:
Veamos ahora un ejemplo completo que utiliza este cuadro de
diálogo:
<HTML>
<HEAD>
<TITLE>Ejemplo
2.3: página que pide
confirmación</TITLE>
</HEAD>
<BODY>
<H1>Página
sobre sellos</H1>
<SCRIPT
LANGUAGE="JavaScript">
<!--
var entrar = confirm("¿De
verdad desea entrar en esta pagina?")
if ( !entrar )
self.close()
//-->
</SCRIPT>
<P>Aquí va el
resto de la página...</P>
</BODY>
</HTML>
Este ejemplo pide confirmación para cargar el resto de la página.
Si se elige la opción Cancelar, se cierra la
ventana (el navegador mostrará un cuadro de diálogo de
confirmación). Si se pulsa Aceptar, se muestra el
resto de la página. La sentencia if ( ... ) que aparece se explica
en el Capítulo 3: Trabajando con datos e información.
| 