Herramientas para desarrolladores : Cursos, manuales y guías de referencia : Cursos : Curso de JavaScript :
Capítulo 2: Fundamentos de JavaScript
- Introducción de código JavaScript en las páginas
- Comentarios en JavaScript
- Inclusión de ficheros externos con código JavaScript
- Escritura de cadenas de texto en la página
- Cuadros de diálogo
1. Introducción de código JavaScript en las páginas
Para introducir código JavaScript en una página HTML, debe incluirse el siguiente código (normalmente, entre las etiquetas <head> y </head> de la página, aunque tabién puede ir en el cuerpo de la misma):
<SCRIPT LANGUAGE="JavaScript" TYPE="text/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.
2. Comentarios en JavaScript
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 ejemplo, el código de una función, o las sentencias incluidas dentro de un bucle). Por otra parte, JavaScript hace diferencia entre mayúsculas y minúsculas para los nombres de variables y funciones.
3. Inclusión de ficheros externos con código JavaScript
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" TYPE="text/javascript" SRC="fichero.js"></SCRIPT>
Este código es ignorado automáticamente por los navegadores que no soportan JavaScript. Por otra parte, esta forma de enlazar con ficheros externos con código JavaScript no está soportada por las versión 2 del Netscape Navigator (aunque teniendo en cuenta la antiguedad de este navegador, este hecho no es de gran relevancia, salvo que exista una necesidad expresa de soportar el Navigator 2).
4. Escritura de cadenas de texto en la página
Las cadenas de texto en JavaScript pueden ir entre comillas dobles o simples indistintamente. Lo único que hay que tener en cuenta es utilizar el mismo tipo de comillas en la apertura y cierre de la cadena de texto. Por ejemplo, para escribir la palabra Texto en una página, podemos utilizar indistintamente
document.write("Texto")
o bien
document.write('Texto')
Cuando una cadena de texto que va entre comillas dobles contiene el propio caracter de comillas dobles, éste deberá ir precedido de \, que en JavaScript se utiliza como caracter de escape (igual que en otros muchos lenguajes). Por ejemplo, para escribir la cadena Caracter ", tendríamos que usar:
document.write("Caracter \"")
La posibilidad de utilizar comillas simples o dobles para definir candenas de texto es muy útil cuando se usa JavaScript para escribir código HTML. En el lenguaje HTML, los valores de los atributos deben ir entre comillas dobles. La cadena de texto JavaScript podrá ir entre comillas simples, y contener las comillas dobles, sin necesidad de preceder las comillas dobles del caracter de escape. Por ejemplo:
document.write('<IMG SRC="imagen.gif">')
Para escribir la cadena Texto más un retorno de carro podemos usar
document.writeln("Texto")
o bien
document.write("Texto\n")
El \n que aparece al final de la cadena del segundo ejemplo es un código especial que indica retorno de carro. Este código sirve para generar el caracter no imprimible de retorno de carro. Otros caracteres no imprimibles que pueden utilizarse son:
| 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.
5. Cuadros de diálogo
La manera más sencilla consiste en utilizar el método alert() del objeto window:
alert("Texto")
Por ejemplo:
alert("¡Bienvenido!\n\tEsta Web está dedicada a JavaScript.")
Este tipo de ventanas de diálogo muestra un botón de aceptar, normalmente con el nombre 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>
La página de este ejemplo puedes verla siguiendo este enlace:
Ejemplo 2.2: página que pide el nombre
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\npagina?")
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 en este ejemplo se explica en el Capítulo 3: Trabajando con datos e información. He aquí el resultado:
Ejemplo 2.3: página que pide confirmación
