JavaScript es un lenguaje de secuencia de comandos. Esto significa que el código no se compila traduciéndolo a lenguaje máquina como en C++, Java u otros lenguajes, sino que se inserta entre el código html y el navegador lo interpreta y lo ejecuta.
Hay tres posibilidades de inserción:
<head>:<script>. Con esta etiqueta podemos escribir
directamente el código o llamar a un archivo externo con
extensión .js que lo
contenga.<script type="text/javascript">
</script> |
|
|---|---|
type="text/javascript" |
Aquí se indica al navegador que lo que viene a continuación está escrito en lenguaje JavaScript. Esta misma etiqueta sirve para otros lenguajes como VBScript, Jscript, TCL, etc. |
| Atributos opcionales | |
src="archivo" |
Indica el nombre de un archivo externo que
contiene el código JavaScript. Estos archivos llevan la
extensión .js. |
| Ejemplo | |
<html> |
|
En el ejemplo anterior definimos un script de JavaScript en el
encabezado del documento html. Este script define una función
llamada saludo que más adelante utilizaremos
ligada a un evento.
los símbolos <!–– y //––> se
utilizan para que los navegadores que no soportan JavaScript no
muestren el código en pantalla.
En JavaScript es muy importante escribir el código
correctamente, poniendo mucha atención en las mayúsculas
y minúsculas, comillas, paréntesis, etc.
Llamamos evento a una acción del ratón o del teclado. Aquí veremos las más comunes
| Prueba el siguiente ejemplo | |
|---|---|
| Ejemplo |
Código<button type="button"
name="ejemplo" onClick="alert(′Muy
bien, has pulsado el botón′)"><span
style="color: red;">Pulsa<br>aquí</span></button> |
| Otro ejemplo a partir del de más arriba | Resultado |
|---|---|
<html> |
Se inserta mediante la etiqueta <script>.
| Observa este ejemplo | |
|---|---|
| Ejemplo Son las horas |
CódigoSon las document.write(new Date().getHours()) |
En cualquiera de los dos casos anteriores se pueden utilizar funciones definidas
en la sección <head> del documento como
hemos visto más arriba.
El comando alert, que ya hemos visto en el ejemplo anterior, lanza una ventana de alerta con un mensaje.
Su estructura es alert("mensaje"). Cuando está
dentro de un evento, y por tanto entre comillas, se sustituyen las comillas
por apóstrofes, es decir, alert('mensaje').
Podemos escribir cualquier texto, pero para carácteres especiales usaremos los siguientes:
| Carácter | Significado |
|---|---|
| \n | Nueva línea |
| \t | Tabulador |
| \' | Comilla simple |
| \" | Comilla doble |
| \\ | Barra invertida |
| \999 | El número ASCII (según la codificación Latin-1) del carácter en hexadecimal |
| Ejemplo 1 | Resultado |
|---|---|
<html> |
Podemos también definir la función saludo() en
función de un parámetro. En el ejemplo anterior, los dos paréntesis
() indican que no hay parámetros. Observa el ejemplo siguiente
para ver como se utilizarían.
| Ejemplo 2 | Resultado |
|---|---|
<html> |
|
Nota: Observa que el valor de la variable mensaje se lo damos al llamar a la función con el evento onLoad y lo indicamos entre apóstrofes. |
|
Veamos otro ejemplo en el que se nos pregunta el nombre y devolvemos un saludo.
| Ejemplo 3 | Resultado |
|---|---|
<html> |
menu.htm.<head> del
documento una función hola() que pregunte el nombre
y salude al visitante.adios() que se despida del visitante.hola() cuando se carga
la página, y la función adios() cuando se cierra
(con el evento onUnload).index.htmlYa hemos conocido tres eventos en los ejemplos anteriores. A continuación tienes una tabla con los más comunes y cuando se utilizan. En los apartados siguientes iremos conociéndolos.
| Se aplica a... | Evento | Se activa cuando... |
|---|---|---|
<body> |
onLoad | se carga la página |
| onUnload | se cierra la página | |
| cualquier objeto |
onMouseOver | pasa el cursor por encima del objeto |
| onMouseOut | el cursor deja de estar encima del objeto | |
| onClick | hacemos click con el ratón en el objeto | |
| control de un formulario |
onFocus | el cursor está dentro del control de un formulario |
| onBlur | el cursor deja de estar dentro del control de un formulario | |
| onChange | cambia el conenido del control de un formulario | |
| onSubmit | hacemos click en el botón Enviar de un formulario |
menu.htm.Esta web está diseñada y
mantenida por ... y se actualizó por última vez el día
...La barra de estado de la ventana del navegador nos permite mostrar información de interés al visitante, por ejemplo una explicación del vínculo sobre el que pasamos el cursor. Esto lo conseguimos mediante el objeto window. El objeto window controla los elementos y acciones de la ventana del navegador. Más adelante iremos conociendo otros objetos.
La barra de estado se representa en JavaScript como window.status, de modo que el valor de esta variable es lo que se mostrará en ella.
Veamos esto con un ejemplo.
| Ejemplo 4 | Resultado: (pasa el cursor por encima del vínculo y observa la barra de estado) |
|---|---|
<a href="http://www.google.es" onMouseOver="window.status='Google, buscador en Internet.'; return true">Google</a> |
|
Nota: Es necesario añadir return true para el correcto funcionamiento del script. |
|
menu.htm.<head> una función llamada mensaje(texto) que muestre la variable texto en la barra de estado del navegador.onMouseOver) se muestre una breve descripción en la barra de estado utilizando la función mensaje(texto).onMouseOut) se muestre en la barra de estado vuestros nombres utilizando la función mensaje(texto).Todo lo que se refiere al documento cargado en el navegador se controla mediante
el objeto document. Volveremos a él en varias
ocasiones, pero de momento veamos el método write,
el más utlizado con el que podemos escribir texto o código html
en nuestro documento.
Veamos un ejemplo:
| Ejemplo 5 | Resultado |
|---|---|
<html> |
|
| Nota: Observa que hemos combinado código html y la variable con el nombre del visitante para que aparezca en negrita. | |
En JavaScript no nos tenemos que preocupar demasiado por el tipo de variables que utilicemos. Básicamente hay cuatro tipos:
| Tipo | Ejemplo | Observaciones |
|---|---|---|
| de cadena | Pepito López | Son cadenas de caracteres, tanto letras como números u otros símbolos |
| numérica | -18.322 | Números |
| booleana | verdadero / falso 1 / 0 |
Sus únicos valores son Verdadero o Falso, o bien 1 ó 0 respectivamente |
| Null | Cuando una variable no tiene ningún valor asignado |
Así como en otros lenguajes de programación hay que indicar el tipo de variable cuando ésta se define, en JavaScript no es necesario, de hecho podemos incluso cambiar el tipo de datos de una variable en cualquier momento.
Los nombres que pueden tener las variables han de cumplir unas normas:
Nombre y NoMbRe son dos variables diferentesOtro tipo de variables muy útil es la matriz o array. Se trata de un conjunto de datos del mismo tipo que tienen el mismo nombre y un índice para diferenciarlos. Se usan para guardar datos de la misma naturaleza (números de teléfono, nombres de personas, títulos de libros, etc.)
Para crear un array se utiliza el objeto Array() de la siguiente manera
matriz = new Array(elementos);donde elementos es el número de datos. Si no
indicamos nada entre los paréntesis podemos definir tantos elementos
como queramos.
Para definir o acceder a los datos indicaremos el número del elemento
entre corchetes, por ejemplo matriz[3].
| Ejemplo 6 | Resultado |
|---|---|
<html>
|
|
| Nota: Observa que el índice del primer elemento es cero. | |
El índice de un array también puede ser una cadena de texto
en vez de un número, aunque en estos casos suele ser más complicado
su manejo. Por ejemplo telefono["Pedro"]="855458854"
Un valor muy útil asociado a los arrays, sobretodo si no indicamos
el número de elementos, es su longitud, dada por length.
| Ejemplo 7 | Resultado |
|---|---|
<html>
|
Para borrar uno de los datos de un array le asignaremos el valor null.
Las operaciones matemáticas en JavaScript, como en cualquier lenguaje de programació son indispensables, tanto para hacer calculos propiamente dichos, como para otras funciones de JavaScript como por ejemplo los bucles.
A continuación tienes una tabla con los principales operadores matemáticos y un ejemplo de su uso:
| Operación | Símbolo | Ejemplo | Resultado | Observaciones |
|---|---|---|---|---|
| Multiplicación | * | 2*3 | 6 | |
| División | / | 3/2 | 1.5 | |
| Suma | + | 2+3 | 5 | |
| Resta | - | 2-3 | -1 | |
| Incremento | ++ | a=2; ++a | 3 | Sólo actua sobre variables, no sobre números |
| Decremento | -- | a=2; --a | 1 | Sólo actua sobre variables, no sobre números |
| Resto de una división | % | 3%2 | 1 |
En todos los lenguajes de programación existen comandos que permiten
ejecutar instrucciones de forma reiterada. En JavaScript, como en la mayoría
de lenguajes, estos comandos son for
y while.
Observa en el siguiente ejemplo el uso de for:
| Ejemplo 8 | Resultado |
|---|---|
<html>
document.write("<li>"+n+"²
="+n*n+"</li>"); //--> |
|
Nota: Observa
que dentro de los paréntesis del comando for
hay que indicar el valor inicial de la variable (n=0),
hasta cuando se repetirá el bucle (n<=9, mientras
n sea menor o igual a 9) y de qué manera cambia la variable (n++,
aumenta de 1 en 1). Observa también que en document.write
podemos combinar código html, las variables y operaciones matemáticas
para obtener el formato deseado. |
|
tabla.htm.
En JavaScript, como en muchos lenguajes, la sentencia para verificar si una
condición se cumple y realizar una acción u otra es if.
Su sintaxis es la siguiente:
if(condición)
{
qué pasa si se cumple
}
else {
qué pasa si no se cumple
}La condición que escribiremos entre paréntesis es una comparación de las de la tabla siguiente:
| Operador | Simbolo |
|---|---|
| es igual a | == |
| es distinto a | != |
| es mayor que | > |
| es menor que | < |
| es mayor o igual que | >= |
| es menor o igual que | <= |
Veamos un ejemplo.
| Ejemplo 8 | Resultado |
|---|---|
<html>
alert("¿Qué passa tío?"); |
Los operadores de comparación se pueden combinar con los operadores lógicos para utilizar varias comparaciones al mismo tiempo. Los operadores lógicos son:
| Operador | Simbolo |
|---|---|
| Y lógico | && |
| O lógico | || |
| NO lógico | ! |
Veamos un ejemplo.
| Ejemplo 9 | Resultado |
|---|---|
<html>
alert("¿No deberías estar estudiando?"); |
 Publicar en Internet |