fundamentos de javascript - Blogs de TI-M

Índice de capítulos
CAPÍTULO 1: INTRODUCCIÓN A JAVASCRIPT .................................................................. 3
1.
2.
3.
¿QUÉ ES JAVASCRIPT? .................................................................................................... 3
EL PROBLEMA DE LAS VERSIONES ........................................................................................ 3
¿CÓMO INTRODUCIR JAVASCRIPT EN EL CÓDIGO HTML? ........................................................... 4
CAPÍTULO 2: FUNDAMENTOS DE JAVASCRIPT ................................................................. 4
1.
2.
3.
4.
5.
6.
INTRODUCCIÓN DE CÓDIGO JAVASCRIPT EN LAS PÁGINAS ........................................................... 4
COMENTARIOS EN JAVASCRIPT........................................................................................... 5
INCLUSIÓN DE FICHEROS EXTERNOS CON CÓDIGO JAVASCRIPT ..................................................... 5
ESCRITURA DE CADENAS DE TEXTO EN LA PÁGINA ..................................................................... 6
CUADROS DE DIÁLOGO .................................................................................................... 7
COMENTARIOS EN EL CÓDIGO ............................................................................................ 8
CAPÍTULO 3: TRABAJANDO CON DATOS E INFORMACIÓN .............................................. 8
1.
2.
3.
TIPOS DE DATOS ........................................................................................................... 8
DECLARACIÓN DE VARIABLES ............................................................................................. 9
OPERADORES ARITMÉTICOS ............................................................................................. 10
I.
II.
4.
5.
6.
7.
8.
Binarios ................................................................................................................ 10
Unarios................................................................................................................. 10
OPERADORES LÓGICOS ................................................................................................... 10
OPERADORES DE COMPARACIÓN ........................................................................................ 10
OPERADORES CONDICIONALES .......................................................................................... 10
COMPARACIONES: SENTENCIA IF ... ELSE .............................................................................. 11
LOOP ........................................................................................................................ 12
I. while Loop ............................................................................................................ 12
II. do...while Loop...................................................................................................... 12
III.
Ciclo For, For ... in.............................................................................................. 12
IV.
Instrucción try ... catch ....................................................................................... 13
V. La sentencia throw ................................................................................................ 14
CAPÍTULO 4: FUNCIONES Y OBJETOS............................................................................. 14
1.
2.
3.
4.
5.
6.
7.
DEFINICIÓN DE UNA FUNCIÓN ........................................................................................... 14
FUNCIONES RECURSIVAS ................................................................................................. 15
CREACIÓN DE OBJETOS ................................................................................................... 15
EL MÉTODO ROUND() REDONDEA UN NÚMERO AL ENTERO MÁS CERCANO ........................................ 17
EL MÉTODO MAX() DEVUELVE EL VALOR MÁS ALTO ................................................................... 18
INFORMACIÓN DEL NAVEGADOR ......................................................................................... 18
ARRAYS ..................................................................................................................... 18
Capítulo 1: Introducción a JavaScript
El presente tutorial no pretende ser una descripción extensa de los fundamentos de la programación de scripts de
cliente con JavaScript. Intentaremos en estas páginas introducir los conceptos básicos que permitan utilizar los scripts
de los ejemplos de código, interpretarlos adecuadamente y realizar las modificaciones necesarias para adaptarlos a sus
necesidades.
1.
2.
3.
¿Qué es JavaScript?
El problema de las versiones
¿Cómo introducir un script en el codigo HTML?
1. ¿Qué es JavaScript?
JavaScript es un lenguaje de scripts desarrollado por Netscape para incrementar las funcionalidades del lenguaje
HTML. Sus características más importantes son:
JavaScript es un lenguaje interpretado, es decir, no requiere compilación. El navegador del usuario se encarga de
interpretar las sentencias JavaScript contenidas en una página HTML y ejecutarlas adecuadamente.
JavaScript es un lenguaje orientado a eventos. Cuando un usuario pincha sobre un enlace o mueve el puntero
sobre una imagen se produce un evento. Mediante JavaScript se pueden desarrollar scripts que ejecuten acciones
en respuesta a estos eventos
JavaScript es un lenguaje orientado a objetos. El modelo de objetos de JavaScript está reducido y simplificado,
pero incluye los elementos necesarios para que los scripts puedan acceder a la información de una página y
puedan actuar sobre la interfaz del navegador.
2. El problema de las versiones
JavaScript fue desarrollado por Netscape, y la primera versión, la 1.0, fue introducida por primera vez en su navegador
Netscape Navigator 2. JavaScript 1.1 representó una mejora en las características del lenguaje, y se incluyó en el
Navigator 3.
Microsoft intentó dar soporte a la primera versión de JavaScript en el Internet Explorer 3 (con el nombre de JScript). Sin
embargo, Jscript resultó poco fiable y estaba plagado de bugs.
El organismo de estandarización ECMA impulsó la creación de un estándar para normalizar la sintaxis del lenguaje
JavaScript. El esfuerzo se concretó en el estándar ECMA-262, que Microsoft introdujo en el Internet Explorer 4. El ECMA262 se basó en la versión 1.2 de JavaScript, introducida con el Navigator 4, por lo que compartía la mayoría de las
características de éste, aunque sin ser totalmente compatible.
Las últimas versiones del Navigator (a partir de la 4.06) implementaron una nueva versión de JavaScript, la 1.3,
totalmente compatible con la especificación ECMA-262. Desde entonces, la batalla de los navegadores ha dado un
vuelco radical. La mayoría de los navegadores modernos (versiones 6 y 7 del IE, Opera y Netscape, y los nuevos
navegadores Mozilla y Firefox) soportan la versión 1.5 de JavaScript, la última publicada.
<noscript> Uso y definición
La etiqueta <noscript> se utiliza para proporcionar un contenido alternativo para los usuarios con navegadores no
compatibles con javascript o un navegador con bloqueo de javascript.
El elemento noscript puede contener todos los elementos que se pueden encontrar dentro del elemento body de una
página HTML normal.
El contenido dentro del elemento noscript sólo se mostrará si los scripts no son compatibles, o se desactivan en el
navegador del usuario.
<html>
<head>
<title>Ejemplo noscript</title>
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Tu navegador no soporta Javascript! </noscript>
</head>
<body>
<font>Ejemplo</font>
</body>
</html>
3. ¿Cómo introducir JavaScript en el código HTML?
Básicamente existen dos formas de introducir un script de JavaScript en una página HTML:
Embebido en el código HTML, entre las etiquetas o tags <script> y </script>.
El siguiente código muestra un ejemplo de código JavaScript embebido en el HTML de una página. Como se observa, el
código JavaScript figura entre las marcas de comentario HTML <!-- y -->, para que los navegadores antiguos (que no
soportan las etiquetas script) no muestren el código fuente en la página. Además, delante de la marca de cierre de
comentario HTML se insertan los caracteres //, que en JavaScript significan ignorar el resto de la línea, para que el
intérprete JavaScript no dé error por la línea --> de comentario HTML.
<HTML>
<HEAD>
<TITLE>Introducción a JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-function saludo() {
window.alert('¡Bienvenido a JavaScript!')
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="saludo()">
</BODY>
</HTML>
Como archivo .js que se carga con la página HTML. Para ello, debe indicarse en las tags anteriores el nombre y ubicación del
archivo .js que contiene el script JavaScript, como en este ejemplo:
<HTML>
<HEAD>
<TITLE>Tutorial de JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="codigo.js"></SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Capítulo 2: Fundamentos de JavaScript
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 caracteres /* (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:
\n
\t
\r
\f
\b
Carácter Significado
Nueva línea
Tabulador
Retorno de carro
Alimentación de formulario
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\tEstas en el curso de 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.
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")
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 después 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>Bienvendo, " + nombre + "</H2>")
//-->
</SCRIPT>
<P>Aquí va el resto de la página...</P>
</BODY>
</HTML>
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?")
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 ven tana (el
navegador mostrará un cuadro de diálogo de confirmación). Si se pulsa Aceptar, se muestra el resto de la página
6. Comentarios en el código
<html>
<head>
<title>Ejemplo</title>
<script type=”text/javascript”>
// Comentario de una línea
/*
Comentario
de
varias
líneas
*/
</script>
</head>
<body>
</body>
</html>
Capítulo 3: Trabajando con datos e información
1. Tipos de datos
Los scripts que utilicemos en nuestras páginas HTML manejarán datos y valores para producir resultados. En todo
lenguaje de programación existen unos tipos estándar que definen el rango de valores que puede tomar cada dato. Así,
un dato del tipo numérico tomará valores numéricos, y no podrá ser una cadena de texto.
En JavaScript un dato puede ser de uno de los siguientes tipos:
Tipo
Número
Cadena
Booleano
Objeto
Función
NULL
Ejemplo
Cualquier número, como 12, 22.5 o 2e8
"Hola" u 'Hola'
Verdadero (true) o falso (false)
Palabra clave para indicar ningún valor
Los números enteros pueden encontrarse en diferentes bases:
Decimal (base 10): cualquier entero que no empiece por 0 estará representado en base 10.
Octal (base 8): si el entero se escribe empezando con el dígito 0, estará en base 8.
Hexadecimal (base 16): para indicar número en hexadecimal, hay que anteponerlo con 0x o 0X (por ejemplo 0x1A).
En JavaScript, la cadena vacía "" es diferente de null.
2. Declaración de variables
Los datos que se manejan en nuestro programa se almacenan en variables. El concepto de variable debe verse como un
contenedor de información.
var nombre_variable
nombre_variable = "valor"
La primera línea es la declaración de la variable. La siguiente línea le asigna un valor.
Por ejemplo, si queremos guardar el resultado de una suma, podemos definir una variable de nombre resultado y
asignarle el valor de la suma.
var resultado
resultado = 10 + 10
La variable resultado contiene ahora el valor 20.
Para referirnos a ella, utilizamos su nombre. Como se observa, en JavaScript no es necesario indicar de qué tipo es una
variable en el memento de su definición. El tipo del dato queda definido en el momento en que se asigna un valor a la
variable.
Por otra parte, podemos realizar la asignación del valor de la variable en el momento de su declaración, del siguiente
modo:
var resultado = 10 + 10
Aunque en JavaScript no es estrictamente necesario declarar una variable antes de utilizarla, la declaración mediante el
uso de la palabra reservada var es siempre recomendable, por claridad.
El nombre de una variable puede empezar por una letra o por el carácter _. Después ya pueden ponerse números. Los
nombres de variables son sensibles a mayúsculas y minúsculas.
Ejemplo:
<HTML>
<HEAD><TITLE>Ejemplo 3.1: uso de una variable</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-var name = prompt("Introduce tu nombre:","Nombre")
//-->
</SCRIPT></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-document.write('<IMG SRC="welcome.gif">')
document.write("<H1>Hola " + name + ". ¡Bienvenido a mi página!</H1>")
//-->
</SCRIPT></BODY></HTML>
3. Operadores aritméticos
En todo lenguaje de programación existen un conjunto de operadores que permiten realizar operaciones con los datos.
Nos referimos a operaciones aritméticas, comparaciones, operaciones lógicas y otras operaciones (por ejemplo,
concatenación de cadenas, búsqueda de patrones, etc.).
En JavaScript existen los siguientes operadores aritméticos:
I.
Operador
=
+=
-=
*=
/=
%=
Descripción
Asigna el valor del operando de la izquierda al operando de la derecha
Suma el operando de la izquierda al de la derecha y asigna el resultado al operando de la derecha
Resta al operando de la izquierda el de la derecha y asigna el valor al operando de la derecha
Multiplica el operando de la derecha por el de la izquierda y asigna el valor al operando de la derecha
Divide el operando de la izquierda por el de la derecha y asigna el valor al operando de la derecha
Divide el operando de la izquierda por el de la derecha y asigna el valor del resto de la división al
operando de la derecha
II.
Operador
++x
x++
-x
Binarios
Unarios
Descripción
Incrementa x en una unidad y devuelve el valor
Ddevuelve el valor de x y lo deja incrementado en una unidad
Devuelve x negado
4. Operadores lógicos
Los operadores lógicos son los operadores del álgebra de Bull o booleanos.
Operador
&&
||
!
Descripción
Y lógico (devuelve verdadero si los dos operandos son verdaderos, y falso en caso contrario)
O lógico (devuelve verdadero si uno de los dos operandos o ambos son verdaderos, y falso en caso
contrario)
No lógico (devuelve verdadero si el operando es falso, y falso si es verdadero)
5. Operadores de comparación
Los operadores de comparación devuelven siempre verdadero (true) o falso (false). Este tipo de operadores se utilizan
con gran frecuencia en todos los lenguajes de programación, para realizar una acción u otra en función de que cierta
condición sea verdadera o falsa.
Operador
==
!=
>
<
>=
<=
6.
Descripción
Devuelve verdadero
Devuelve verdadero
Devuelve verdadero
Devuelve verdadero
Devuelve verdadero
Devuelve verdadero
si
si
si
si
si
si
los dos operadores son iguales
los dos operadores son distintos
el primer operando es mayor que el segundo
el primer operando es menor que el segundo
el primer operando es mayor o igual que el segundo
el primer operando es menor o igual que el segundo
Operadores condicionales
El operador ? es un operador especial en JavaScript (heredado de C++). Veamos un ejemplo:
(condicion) ? valor1 : valor2
Si la condición es verdadera, la expresión toma el valor 1 y si es falsa el valor 2. Por ejemplo:
(dia=="Domingo") ? "Festivo" : "Laborable"
Ejemplo:
<HTML>
<HEAD><TITLE>Ejemplo operadores</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-var pregunta = "¿Cuánto vale 10 + 10?"
var respuesta_correcta = 20
var correcto = "<p>¡CORRECTO!</p>"
var incorrecto = "<p>INCORRECTO</p>"
//realiza la pregunta
var respuesta_dada = prompt(pregunta, "0")
//comprueba la respuesta
var salida = (respuesta_dada == respuesta_correcta) ? correcto : incorrecto
//-->
</SCRIPT></HEAD>
<BODY><SCRIPT LANGUAGE="JavaScript">
<!-//escribe la salida
document.write(salida)
//-->
</SCRIPT>
</BODY>
</HTML>
7. Comparaciones: sentencia if ... else
Las comparaciones se realizan utilizando la sentencia if ... else. Su sintaxis es la siguiente:
if (condicion)
sentencia unica
if (condicion) {
varias sentencias
}
if (condicion) {
varias sentencias
} else {
varias sentencias2
}
Las sentencias if ... else pueden anidarse. En el siguiente script podemos ver un ejemplo de sentencia if ... else.
<HTML>
<HEAD><TITLE>Ejemplo sentencia if ... else</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-//definicion de variables
var pregunta = "¿Cuánto vale 10 + 10?"
var respuesta_correcta = 20
var correcto = "<p>¡Correcto!</p>"
var incorrecto = "<p>¡Incorrecto!</p>"
//realiza la pregunta
var respuesta_dada = prompt(pregunta, "0");
//comprueba la respuesta
if (respuesta_dada != respuesta_correcta) {
//respuesta incorrecta, segunda oportunidad
if ( confirm("¡No! Pulsa OK para reintentarlo."))
respuesta_dada = prompt(pregunta, "0")
}
//comprueba la respuesta
var salida = (respuesta_dada == respuesta_correcta) ? correcto : incorrecto
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-//escribe la salida
document.write(salida)
//-->
</SCRIPT>
</BODY>
</HTML>
8. Loop
I.
while Loop
El ciclo while repite un bloque de código cuando una condición especificada es verdadera.
<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("El número es " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>
II.
do...while Loop
El ciclo do ... while es una variante del ciclo while. Este ciclo ejecutará el bloque de código una vez, y luego se repite el ciclo
mientras la condición especificada es verdadera
<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("El número es " + i);
document.write("<br />");
i++;
}
while (i<=5);
</script>
</body>
</html>
III.
Ciclo For, For ... in
El ciclo for se utiliza cuando se sabe de antemano cuántas veces se debería ejecutar el script
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++)
{
document.write("El número es " + i);
document.write("<br />");
}
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
</script>
</body>
</html>
IV.
Instrucción try ... catch
La instrucción try ... catch te permite probar un bloque de código y en caso de error mostrar un mensaje personalizado. El
bloque try contiene el código que se ejecuta, y el bloque catch contiene el código que se ejecutará si se produce un error.
<html>
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
{
adddlert("Bienvenido al curso de fundamentos de javascript!");
}
catch(err)
{
txt="Ocurrió un error inesperado.\n\n";
txt+="Descripción del error: " + err.description + "\n\n";
txt+="Clic OK para continuar.\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="Ver mensaje" onclick="message()" />
</body>
</html>
V.
La sentencia throw
La sentencia throw le permite crear una excepción. Si utiliza esta declaración junto con la sentencia try ... catch, puedes
controlar el flujo del programa y generar mensajes de error.
<html>
<body>
<script type="text/javascript">
var x=prompt("Introduce un número entre 0 y 10:","");
try
{
if(x>10)
{
throw "Err1";
}
else if(x<0)
{
throw "Err2";
}
else if(isNaN(x))
{
throw "Err3";
}
}
catch(er)
{
if(er=="Err1")
{
alert("Error! El valor de X es mayor a 10");
}
if(er=="Err2")
{
alert("Error! El valor de X es menor que 0");
}
if(er=="Err3")
{
alert("Error! El valor de X no es númerico");
}
}
</script>
</body>
</html>
Capítulo 4: Funciones y objetos
1. Definición de una función
function nombre_funcion(argumentos) {
bloque de comandos
} El nombre de la función es sensible a mayúsculas y minúsculas. Puede incluir el caracter "_" y empezar con una letra.
Ejemplo:
function ImprimeNombre(nombre) {
document.write("<HR>Tu nombre es <B><I>")
document.write(nombre)
document.write("</B></I><HR>")
}
La variable nombre sólo existe dentro de la función y lo mismo pasa para cualquier variable declarada dentro de la
función.
Las funciones pueden devolver un valor. Para ello:
function cubo(numero) {
var cubo = numero * numero * numero
return cubo
}
También podría haber sido
return numero * numero * numero
La función eval () evalúa y / o ejecuta una cadena de código JavaScript.
En primer lugar, eval () determina si el argumento es una cadena válida, después eval () analiza la cadena en búsqueda
de código JavaScript. Si encuentra cualquier código JavaScript lo ejecutará. Por ejemplo, eval("10*10") devolverá el
valor 100.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Preguntador</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-//DEFINICION DE LA FUNCION HazPregunta()
function HazPregunta(pregunta) {
//VARIABLES LOCALES
var solucion = eval(pregunta)
var salida = "Que da " + pregunta + "?"
var correcto='<IMG SRC="correcto.gif">'
var incorrecto='<IMG SRC="incorrecto.gif">'
//REALIZA LA PREGUNTA
var respuesta = prompt(salida,"0")
//COMPRUEBA EL RESULTADO
return (respuesta == solucion) ? correcto : incorrecto
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-//EJECTUA LA FUNCION HazPregunta
var resultado = HazPregunta("10 + 10")
document.write(resultado)
//-->
</SCRIPT>
</BODY>
</HTML>
2. Funciones recursivas
Son las que se llaman a sí mismas esta función puede crear problemas de memoria.
3. Creación de objetos
Un objeto es un tipo especial de dato que contiene una colección de propiedades y métodos.
Para crear objetos, primero es necesario definir sus propiedades (clase):
function empleado(nombre, edad, puesto) {
this.nombre = nombre
this.edad = edad
this.puesto = puesto
}
En JavaScript, el objeto this se refiere al objeto en el que se utiliza. Una vez definida la clase, podemos crear variables
(instanciar objetos) de esa clase de la siguiente manera:
empleado_1 = new empleado("Pedro", 26, "Programador")
Pueden añadirse propiedades a los objetos aunque estas no haya sido declaradas en la definición de la clase. Por
ejemplo:
empleado_1.jefe = "Luis"
Estas propiedades nuevas sólo afectaran a ese objeto y no al resto.
Los objetos pueden anidarse de forma que un objeto sea un a propiedad de otro objeto. Por ejemplo:
function empleado(nombre, edad, puesto, oficina)
this.nombre = nombre
this.edad = edad
this.puesto = puesto
this.oficina = oficina
}
function oficina(ciudad, pais) {
this.ciudad = ciudad
this.pais = pais
}
oficinaPedro = new oficina("Madrid","España")
empleado_1 = new empleado("Pedro", 26, "Programador", oficinaPedro)
Dentro de la definición de la clase o tipo de objeto, pueden incluirse funciones. Estas funciones reciben el nombre de
métodos. Un método se define de la siguiente manera:
function empleado(nombre, edad, puesto, oficina)
this.nombre = nombre
this.edad = edad
this.puesto = puesto
this.oficina = oficina
this.mostrarPerfil = mostrarPerfil
}
function oficina(ciudad, pais) {
this.ciudad = ciudad
this.pais = pais
}
function mostrarPerfil() {
document.write("Nombre: " + this.nombre + "<BR>")
document.write("Edad: " + this.edad + "<BR>")
document.write("Puesto: " + this.puesto + "<BR>")
}
oficinaPedro = new oficina("Madrid","España")
empleado_1 = new empleado("Pedro", 26, "Programador", oficinaPedro)
Así pueden mostrarse las propiedades del objeto empleado invocando el método asociado:
empleado_1.mostrarPerfil;
Ejemplo final:
<HTML>
<HEAD>
<TITLE>Empleados</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-//DEFINE EL METODO muostrarPerfil
function mostrarPerfil() {
document.write("<H1>Perfil del empleado " + this.nombre + "</H1><HR><PRE>")
document.writeln("Edad: " + this.edad)
document.writeln("Puesto: " + this.puesto)
document.write("</PRE>")
}
//DEFINE EL OBJECTO EMPLEADO
function empleado() {
this.nonmbre = prompt("Introduzca el nombre del empleado: ", "Nombre")
this.edad = prompt("Introduzca la edad de " + this.nombre, "00")
this.mostrarPerfil = mostrarPerfil
}
nuevoEmpleado = new empleado()
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-nuevoEmpleado.mostrarPerfil()
//-->
</SCRIPT>
</BODY>
</HTML>
4. El método round() redondea un número al entero más cercano
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<script type="text/javascript">
document.write(Math.round(0.60) + "<br />");
document.write(Math.round(0.50) + "<br />");
document.write(Math.round(0.49) + "<br />");
document.write(Math.round(-4.40) + "<br />");
document.write(Math.round(-4.60));
</script>
</body>
</html>
5. El método max() devuelve el valor más alto
Sintaxis Math.max(x,y,z,...,n)
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<script type=”text/javascript">
document.write(Math.max(5,10) + "<br />");
document.write(Math.max(0,150,30,20,38) + "<br />");
document.write(Math.max(-5,10) + "<br />");
document.write(Math.max(-5,-10) + "<br />");
document.write(Math.max(1.5,2.5));
</script>
</body>
</html>
6. Información del navegador
<html>
<body>
<script type="text/javascript">
document.write("Browser CodeName: " + navigator.appCodeName);
document.write("<br /><br />");
document.write("Browser Name: " + navigator.appName);
document.write("<br /><br />");
document.write("Browser Version: " + navigator.appVersion);
document.write("<br /><br />");
document.write("Cookies Enabled: " + navigator.cookieEnabled);
document.write("<br /><br />");
document.write("Platform: " + navigator.platform);
document.write("<br /><br />");
document.write("User-agent header: " + navigator.userAgent);
</script>
</body>
</html>
7. Arrays
En JavaScript las propiedades de un objeto y los arrays están relacionados de la siguiente manera:
var empleado_1 = new Array();
empleado_1[0] = "Pedro";
empleado_1[1] = “26”;
empleado_1[2] = "Programador";
var empleado_1 = new Array("Pedro",”26”, "Programador");
o
var empleado_1 = ["Pedro",”26”, "Programador"];
Y también se produce la siguiente equivalencia:
Vamos a ver un ejemplo para la creación de un menú de usuario:
<HTML>
<HEAD>
<TITLE>Menu de usuario</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-//DEFINE METODO PARA VER LA INFORMACION
function verInfo() {
document.write("<H1>Perfil del empleado: " + this.nombre + "</H1><HR><PRE>")
document.writeln("Numero de empleado: " + this.numero)
document.writeln("Edad: " + this.edad)
document.writeln("Puesto: " + this.puesto)
document.write("</PRE>")
}
//DEFINE METODO PARA OBTENER LA INFORMACION
function obtenerInfo() {
var menu = "1. Salir/n2. Nombre/n3. Edad/n4. Puesto"
var eleccion = prompt(menu, "0")
if (eleccion != null) {
if ((eleccion < 0) || (eleccion > 4)) {
alert ("Eleccion incorrecta.")
this.obtenerInfo()
} else {
if (eleccion != "0") {
this[eleccion - 1] = prompt("Introduzca informacion","")
this.obtenerInfo()
}
}
}
//DEFINE OBJETO
function empleado() {
this.nombre = ""
this.edad = 0
this.puesto = 0
this.verInfo = verInfo
this.obtenerInfo = obtenerInfo
}
empleadoNuevo = new empleado()
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-empleadoNuevo.obtenerInfo()
empleadoNuevo.verInfo()
//-->
</SCRIPT>
</BODY>
</HTML>
Referencias
-
http://www.quirksmode.org/dom/w3c_cssom.html
http://www.w3schools.com/js/default.asp