Metodología de Programación en Páginas Web Manual Teórico PDF

Metodología de
MANUAL
programación en
páginas web
© Edita: EDITORIAL CEP S.L. Edición: febrero 2015

C/ Dalia nº 20. Polígono El Lomo
Depósito Legal: M-4510-2015
28970 Humanes de Madrid (Madrid)
Cualquier forma de reproducción, distribución,
Tlf. 91 609 4176 comunicación pública o transformación de
esta obra sólo puede ser realizada con la
autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO
(Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o
escanear algún fragmento de esta obra.
Imprime: PUBLICEP
CARLOS OLLERO SÁNCHEZ
AUTOR
Ha realizado estudios de Ciencias Físicas e Informática, desarrollando
su labor profesional en diversas empresas de desarrollo informático y
consultoría.
Colaborador del Instituto Nacional de Tecnologías Educativas y de

Formación del Profesorado en proyectos de Formación Profesional
Desde hace once años es profesor técnico de Formación Profesional,

especialidad Sistemas y Aplicaciones Informáticas.
TEMA 1. METODOLOGÍA DE LA PROGRAMACIÓN .....................................11
- Lógica de programación ÍNDICE
- Ordinogramas
- Pseudocódigos
- Objetos
- Ejemplos de códigos en diferentes lenguajes
LO QUE HEMOS APRENDIDO ................................................................................................34
TEMA 2. LENGUAJE DE GUIÓN ...................................................................35

- Características del lenguaje
- Relación del lenguaje de guion y el lenguaje de marcas
- Sintaxis del lenguaje de guion
- Tipos de scripts: inmediatos, diferidos e híbridos
- Ejecución de un script
TEMA 3. ELEMENTOS BÁSICOS DEL LENGUAJE DE GUION .................. 61

- Variables e identificadores
- Tipos de datos
- Operadores y expresiones
- Estructuras de control
- Funciones
- Instrucciones de entrada / salida
TEMA 4 DESARROLLO DE SCRIPTS .........................................................95

- Herramientas de desarrollo, utilización
- Depuración de errores: errores de sintaxis y de ejecución
- Mensajes de error
LO QUE HEMOS APRENDIDO ............................................................................................... 112
TEMA 5. GESTIÓN DE OBJETOS DEL LENGUAJE DE GUION ................ 113

- Jerarquía de objetos
- Propiedades y métodos de los objetos del navegador
- Propiedades y métodos de los objetos del documento
- Propiedades y métodos de los objetos del formulario
- Propiedades y métodos de los objetos del lenguaje
LO QUE HEMOS APRENDIDO ..............................................................................................140

TEMA 6. LOS EVENTOS DEL LENGUAJE DE GUION ............................... 141
- Utilización de eventos
- Eventos en elementos de formulario
- Eventos de ratón. Eventos de teclado
- Eventos de enfoque
- Eventos de formulario
- Eventos de ventana
- Otros eventos
LO QUE HEMOS APRENDIDO ..............................................................................................154
TEMA 7. BÚSQUEDA Y ANÁLISIS DE SCRIPTS .................................... 155

– Búsqueda en sitios especializados
– Operadores booleanos
– Técnicas de búsqueda
– Técnicas de refinamiento de búsquedas
– Reutilización de scripts
LO QUE HEMOS APRENDIDO ...............................................................................................187
GLOSARIO...................................................................................................................... ........... 189
BIBLIOGRAFÍA .................................................................................................................. .......195

METODOLOGÍA DE
PROGRAMACIÓN EN
PÁGINAS WEB
OBJETIVOS
Identificar las estructuras de programación y los tipos

de datos que se utilizan en la elaboración de scripts, de
acuerdo a unas especificaciones recibidas
Distinguir las propiedades y métodos de los objetos

proporcionados por el lenguaje de guion, en función de las
especificaciones técnicas del lenguaje
Identificar scripts ya desarrollados que se adapten a las

funcionalidades especificadas e integrarlos en las páginas
web de acuerdo a unas especificaciones recibidas
TEMA 1. Metodología
de la programación
TEMA 2. Lenguaje de
guion
TEMA 3. Elementos
básicos del lenguaje de
guion
TEMA 4. Desarrollo de
scripts
TEMA 5. Gestión de
objetos del lenguaje de
guion
TEMA 6. Los eventos

del lenguaje de guion
TEMA 7. Búsqueda y
análisis de scripts
Carlos Ollero Sánchez
Metodología de la
programación 1
• Lógica de programación
1. LÓGICA DE PROGRAMACIÓN
• Ordinogramas
Entendemos por programación al proceso por el cual se escribe en un
lenguaje la solución a un problema resultando de ello lo que se conoce • Pseudocódigos
como software. Para poder llevar a cabo dichos programas se emplea • Objetos
la lógica de programación, que incluye estructuras de decisión, de
repetición o de asignación. • Ejemplos de códigos en
diferentes lenguajes
Antes de empezar con cualquier lenguaje de programación es
necesario conocer las estructuras de decisión, repetición y asignación, OBJETIVOS:
y cómo utilizarlas.
- Aprender los fundamentos de
la programación
El proceso de traducción de cualquier problema en un programa debe
seguir los siguientes pasos: - Aprender a plantear y
resolver problemas usan do
1. Análisis del problema. técnicas de programación
2. Diseño de él o los algoritmos. - Conocer el uso de
pseudocódigo
3. Codificación del programa.
- Conocer distintos tipos de
4. Compilación.
lenguajes de programación
5. Prueba/depuración de errores.
6. Documentación.
En nuestro caso, JavaScript es un lenguaje interpretado, por lo que la fase

4 no la tendremos (los lenguajes interpretados o de script se interpretan
línea a línea cuando se ejecutan). Es importante siempre hacer un análisis
en profundidad y correcto por lo que a menudo esta fase deberá hacerse
en contacto con el usuario o persona que nos encarga el programa, para
así definir exactamente qué es lo que quiere. Resultando de esta fase un
11
documento en el que se reflejan todas y cada una de las características
que deberá tener la aplicación. Este documento recibe el nombre de
Análisis Funcional.
Una vez que conocemos qué es lo que queremos hacer hay que traducirlo
en forma de algoritmos o seudocódigo, planteando cómo vamos a hacerlo.
Esta es la fase de diseño, que debe llevarse a cabo utilizando lo que
conoce como ordinogramas o diagramas de flujo. Se trata de una forma de
representar cómo evoluciona el programa y los datos que pueden entrar o
salir de él, especificando si están involucrados ficheros o bases de datos.
A continuación tendremos que empezar la codificación del programa, en

un lenguaje de programación concreto y utilizando su sintaxis.
Saltándonos la fase de compilación tendríamos que comenzar la fase de

prueba y corrección de errores. Esta fase debe ser todo lo exhaustiva que
podamos, planteando todas aquellas pruebas sobre el programa realizado
que se nos ocurran, haciendo hincapié en aquellos casos límite, en los que
normalmente se pone a prueba la robustez del software.
Por último pero muy importante, sobre todo si el proyecto tiene cierta
entidad, tendremos que realizar una fase de documentación en la que
contaremos, más o menos explícitamente qué hace nuestro programa y
cómo lo hace. No debe sorprendernos este punto ya que podemos decir
sin temor a exagerar que del orden del 80% del trabajo de desarrollo de
aplicaciones se lleva a cabo en tareas de mantenimiento de aplicaciones
ya hechas, por lo cual, el proceso de documentación es vital para evitar
perder tiempos innecesarios.
1.1 Descripción y utilización de operaciones lógicas

Son operadores heredados de la lógica matemática que en
programación son utilizados para tomar decisiones en función del valor
de los operandos. Tendremos tres operadores lógicos principales:
- AND: Retorna true si y solo si los dos operandos son ciertos. En

cualquier otro caso devuelve false. Con los operadores lógicos
puede construirse lo que se conoce como tabla de verdad, que
es una representación de su comportamiento teniendo en cuenta
todas las posibles combinaciones que pueden tomar los valores de
los operandos. En el caso del AND tendremos:
AND
Operando 1 Operando 2 Resultado
1 1 1
1 0 0
0 1 0
0 0 0
En la tabla se han utilizado valores binarios, donde el 1 equivale a true y el 0 a false.

De manera que solo se obtiene 1 (true) cuando los dos operandos son 1 (true).
12 Tema 1 / Metodología de la programación

- OR: Su interpretación es que devuelve true cuando alguno de los
dos operandos son true. Su tabla de verdad será:
Las operaciones lógicas
son utilizadas en campos
OR
diversos, constituyendo
Operando 1 Operando 2 Resultado la base de la electrónica
1 1 1 digital y por extensión
de cualquier ordenador
1 0 1
o dispositivo que
0 1 1
tenga en su interior
0 0 0 un microprocesador.
Estas estructuras
lógicas son utilizadas
- NOT: Se usa delante de un operador resultando lo contrario del en programación para
valor que tenía dicho operador. Si tenía true, cambia a false y
decidir entre dos o varias
viceversa. Su tabla de verdad es muy sencilla:
opciones.
NOT (!)
Operando 1 Resultado
1 0
0 1
Por completar vamos a añadir las tablas de verdad de algunos

operadores compuestos
- Tabla de verdad operador NAND (NOT AND)
NAND
1 1 0
1 0 1
0 1 1
0 0 1
- Tabla de verdad del operador NOR (NOT OR)
NOR
1 1 0
1 0 0
0 1 0
0 0 1
Metodología de programación en páginas web 13

- Tabla de verdad del operador XOR (OR eXclusivo): solo devuelve 1
cuando ambos operadores son distintos.
XOR
1 1 0
1 0 1
0 1 1
0 0 0
Usaremos estos operadores lógicos cuando utilicemos estructuras

de control con varios operandos. Incluso pueden combinarse en
la misma expresión de manera que tengamos, por ejemplo, dos
operandos evaluados con un AND y su resultado enfrentado a otro
mediante un OR u otro AND. Podemos tener cualquier combinación
posible, de manera que puede complicarse mucho.
1.2 Secuencias y partes de un programa

Las partes que no deben faltar a la hora de escribir un programa son
principalmente tres: una cabecera, una zona de definición de variables
y el cuerpo del programa.
La cabecera es donde debemos explicar resumidamente qué hace el

programa, podemos incluir el nombre del programador y cualquier
información que pueda ser relevante para un posterior mantenimiento.
La siguiente parte de un programa es la zona de definición de variables;

si bien en JavaScript y otros muchos lenguajes podemos declarar una
variable en cualquier zona, es muy recomendable agruparlas todas al

principio del programa, de esta manera sabemos dónde acudir y donde
buscar cuando necesitamos saber aquello que está definido y cómo lo
está. Si desperdigamos nuestras variables, definiéndolas allí donde va
surgiendo su necesidad solo lograremos que nuestro programa sea muy
difícil de seguir y de mantener, incluso para nosotros mismos.
Por último nos queda el cuerpo del programa, en esta parte es donde
irá el contenido propiamente dicho del programa.
JavaScript además es un programa en el que usan a menudo funciones,

es decir, trozos de código independientes que se llaman desde el
programa principal para realizar algo concreto y a menudo repetitivo.
Pues bien otra buena idea es agrupar estas funciones en una cuarta
parte (después de la cabecera) o bien, y esto es muy habitual,
agruparlas en ficheros externos que son invocados cuando se inicia el
programa (en nuestro caso cuando se carga la página web).
2. ORDINOGRAMAS
2.1 Descripción de un ordinograma

Un ordinograma es una representación a través de unos símbolos
del flujo interno del programa. Por eso se les conoce también con el
nombre de diagramas de flujo. En ellos se representa con detalle la
lógica de las operaciones y procesos que realiza el programa.
Debe guardar una serie de normas básicas:
- Debe existir un principio y un final claros y unívocos.
- El flujo va de arriba hacia abajo, pudiendo existir bifurcaciones

o disyuntivas en un mismo nivel pero que posibilite el posterior
avance del programa.
- Los símbolos utilizados deben ser estándar y representar los

procesos que se llevan a cabo en el programa.
- Los símbolos deben conectarse de manera que quede claro, con un

simple vistazo, el flujo general del código.
- Los cruces de líneas están prohibidos.
Un esquema básico para cualquier ordinograma puede ser:
- Inicio.
- Entrada de datos (si los hubiera).
- Procesamiento.
- Salida de resultados (a pantalla, a fichero, etc.).
- Fin.

2.2 Elementos de un ordinograma
Las formas son estándar y cada una de ellas define un tipo de
operación o de estructura de programación. Las vemos en la imagen
adjunta.
- Terminal: indica el principio o fin del algoritmo.
- Proceso: indica una operación, puede ser un cálculo matemático,

una asignación, etc.
- Entrada/Salida: recoge o escribe los datos de una fuente o a un

destino.
- Decisión: incluye una condición en el algoritmo, en función del valor

que tome irá por un lado o por otro (bifurcación).
- Conexión: conecta dos partes distintas del programa.
- Conexión externa: conecta dos programas distintos.
- Subprograma: también incluimos aquí las funciones, utilizaremos

este elemento cuando se quiera hacer una llamada a una función no
cuando se crea la misma.
- Comentario: también son útiles a la hora crear ordinogramas.
- Impresora: se envía un resultado a la impresora.
- Pantalla: se envía un resultado a la pantalla.
Como podemos comprobar, el uso de ordinogramas viene de antiguo y

algunos de sus elementos están en desuso sobre todo para el lenguaje
que nos va a ocupar en este manual. En cualquier caso, su uso puede
estar todavía justificado en ciertos proyectos.
2.3 Operaciones en un programa

En un programa pueden realizarse distintas operaciones para solucionar
el problema propuesto. En un ordinograma tenemos que ser capaces
de representar cualquier proceso que vaya a ser implementado. Estos
procesos pueden ser bucles, estructuras de decisión, asignación y
operaciones con variables. Vamos a detenernos brevemente en cada
una de ellas para definirlas.
- Los bucles son estructuras en las que se repite un trozo de código,

normalmente el que está insertado dentro de él. A menudo
necesitamos que unas líneas de nuestro programa se repitan
un número determinado de veces. El cómo se produce el bucle
determina el tipo, así tendremos bucles que se repiten un número
fijo de veces establecido de antemano. Otro tipo de bucle es aquel
en el que se repiten unas líneas de código mientras se cumple una
condición prefijada de antemano. Observar que en este segundo
bucle debemos cambiar la condición que hace que se ejecute,
porque si esta no cambia nunca tendremos lo que se conoce

como bucle infinito, de manera que el programa se ejecutará
indefinidamente.
Habitualmente los
Otra característica a tener es que el primer bucle se ejecutará primeros bucles
siempre, mientras que el segundo no tiene por qué, si no se cumple se conocen como
la condición al principio, éste no comenzará la ejecución. FOR, siendo esta la
palabra reservada en
muchos lenguajes para
definirlos. En el caso
de los segundos, hay
algo más de disparidad
pero es habitual que
dicha palabra reservada
sea WHILE. Veamos
un ejemplo de esta
operación.
- Estructuras de decisión: cuando necesitamos evaluar el valor de
una variable y en función de dicho valor hacer unas operaciones u
otras, tenemos una estructura de decisión. Esta puede ser binomial,
es decir con dos únicas opciones (sí-no, verdadero-falso) o múltiple
(por ejemplo rangos de edad, menor de 20, entre 20 y 40, mayor de
40).
En el caso de una estructura binomial tendremos la evaluación del

valor de una variable, en caso de que la evaluación sea positiva, se
ejecutarán una serie de líneas, en el caso en el que sea negativa
pueden ejecutarse otras líneas de código o ninguna.
Si lo que tenemos es una decisión múltiple, podremos añadir al final

un caso que recoja todos aquellos valores no contemplados en los
casos especificados.
Por lo general la estructura binomial suele estar representada por

la palabra IF, utilizándose ELSE para cuando no sea positiva la
evaluación, quedando una estructura del tipo:
IF (condición)
…...
ELSE
…...
Para el caso de estructuras múltiples, los lenguajes difieren, pero es

bastante común el uso de la palabra reservada SWITCH.
- Asignación y operaciones con variables: como una última operación

quedará cualquiera otra que involucre a una variable o varias. Esto
incluye operaciones aritméticas, asignación de valores nuevos o de
modificación. Se utiliza el símbolo de proceso, el rectángulo.

2.4 Implementación de elementos y operaciones en un
ordinograma
Para terminar con este tema vamos a realizar un ejemplo para ver cómo
implementar un problema concreto en forma de ordinograma.
El ejemplo es sencillo, vamos a averiguar y mostrar si dos números son

iguales o cuál de ellos es menor que el otro. Veamos a continuación
como representaríamos el problema:
Vemos que tiene un principio y un final, era una de las reglas de las
que ya hemos hablado. A continuación se recogen los datos, se leen
del teclado pasando seguidamente a la verificación por medio de una
El uso de pseudocódigo
estructura de decisión. Si esta estructura es simple solo podemos
es equivalente al uso de
averiguar si un número es menor o igual que el otro, por lo que se hace
ordinogramas, no siendo una primera comprobación para saber si son iguales. Aquí el programa
uno mejor que otro a se bifurca, siguiendo hacia el final en un caso o hacia otra estructura
priori, tan solo dependerá de decisión en la que determinamos ahora si uno es menor que el otro.
de las preferencias o Por último se informa del resultado y se termina.
del problema concreto
para utilizar uno u otro.
Además, lo habitual
es que puedan ser
intercambiables y que
3. PSEUDOCÓDIGOS
un mismo problema El pseudocódigo es otra de las maneras de traducir problemas para
pueda ser escrito como luego resolverlos con un lenguaje de programación. Podemos decir
pseudocódigo y como que el pseudocódigo es un lenguaje entre el natural que utilizamos
ordinograma. habitualmente y el mucho más estricto utilizado para programar. A

pesar de ser más libre que un lenguaje de programación conserva las
reglas básicas de la programación estructurada. Otra característica
importante y necesaria es que tiene que ser independiente del lenguaje
de programación que vaya a utilizarse posteriormente, no siendo la
elección de este un factor que condicione el uso del pseudocódigo.
Un ejemplo sencillo de pseudocódigo puede ser:
PROGRAMA PrimerEjemplo
/* Como primer ejemplo veamos como sumar dos números y

mostrar el resultado después */
VARIABLES
Entero num1,num2, suma
INICIO
Leer num1
Leer num2
suma=num1 + num2
MUESTRA suma
FIN
En las siguientes secciones veremos una descripción más detallada y

algunos ejemplos algo más complejos.
3.1 Descripción de pseudocódigo

Vamos a ver las características que se pueden destacar para el uso de
pseudocódigo:
- Permite que los programadores se centren en la lógica del problema,

dejando a un lado las restricciones relacionadas con la sintaxis de un
lenguaje de programación.
- El resultado es una codificación de problema fácilmente entendible

por cualquier persona ya que utiliza un lenguaje similar al hablado,
de hecho utilizaremos palabras en español.
- Hace más fácil la corrección y actualización del código.
- Evidentemente el código generado en pseudocódigo no es

ejecutable, constituirá la base sobre la que posteriormente se
desarrollará el código en un lenguaje de programación que una
vez compilado o interpretado podrá ser ejecutado (en realidad
si es un lenguaje interpretado o de script, cuando se está siendo
interpretado ya se está ejecutando).
Definamos qué partes son las deseables en cualquier algoritmo

resuelto usando pseudocódigo:

1. Cabecera: aquí nombraremos el programa y añadiremos
toda información necesaria que pueda ser útil (nombre del
programador, fecha, objetivo del programa, etc.)
2. Definición de las variables: hay que recordar que es muy

recomendable definir las variables en el inicio del programa,
agrupándolas
3. Instrucciones: es la parte principal y la más grande, es donde se

resuelve el problema.
Un programa en pseudocódigo deberá tener un inicio y un fin,

comprendiendo entre ellos el resto de las instrucciones. También
es recomendable poder insertar comentarios que expliquen el
desarrollo del código. En el ejemplo propuesto antes se ha optado
por incluir los comentarios entre /* – */ ya que es de uso bastante
común en numerosos lenguajes, entre ellos JavaScript.
A continuación vamos a ver qué estructuras y cómo podemos

nombrarlas cuando usamos pseudocódigo:
- Entrada: especifica la entrada de un dato, puede ser por teclado,

desde un fichero, base de datos, etc. Utilizaremos la palabra
LEER, podemos completarla con LEER_Fichero, LEER_BD o
LEER_Teclado, pero posiblemente no ganemos demasiado y sí
compliquemos el código.
- Salida: indicamos que un dato es enviado a alguna de las salidas

del ordenador. Podemos poner MOSTRAR, cuando se refiera a
sacar la información por pantalla o GUARDAR cuando queramos
almacenarla en fichero o base de datos.
- Asignación: es una operación básica y de uso común que no

tiene una palabra asignada, simplemente se utilizan las variables
implicadas. En este apartado incluimos cualquier tipo de
operación aritmética cuyo resultado se guarda, finalmente, en
una variable.
- Estructuras condicionales: en función de una condición el flujo

de código va en una dirección u otra.
Pueden ser simples:
SI
SI_NO
FIN_SI
O compuestas: en las que evaluamos varios posibles valores de

una variable
SI var1=”valor1”

…
O SI var1=”valor2”
O SI var1=”valor3”
EN OTRO CASO
FIN_SI_Multiple
- Estructuras repetitivas: son las equivalentes al FOR y al WHILE,

en pseudocódigo tendremos:
PARA variable=1 HASTA n
HACER
FIN_PARA
O bien si lo que queremos es un WHILE:
MIENTRAS variable=”valor_control”
HACER
..
FIN_MIENTRAS
Esta última estructura tiene una variante: la evaluación de la variable

se hace al final, con lo que nos aseguramos que al menos se ejecuta
una vez, mientras que evaluando al principio puede ocurrir que no
se cumpla dicha condición y ni siquiera entre una sola vez.
En el siguiente apartado utilizaremos lo aprendido hasta ahora para

implementar diversos ejemplos que nos sirvan para coger cierta
soltura a la hora de crear pseudocódigo.
3.2 Creación del pseudocódigo

Vamos ahora a ver cómo crear programas escritos en pseudocódigo.
Para ello utilizaremos algunos ejemplos que nos sirvan como guía para
poder hacer los nuestros propios.
En el primer ejemplo vemos como recoger un dato desde el teclado

y actuar en consecuencia. El ejemplo es sencillo preguntar por dos
números y por una operación y a continuación dar el resultado. El
programa quedaría de la siguiente manera:

PROGRAMA EjemploCalculo
/* Pide que se introduzcan dos números y la operación por

teclado, realizando a continuación la operación */
VARIABLES
Caracter operacion
Entero num1, num2
Entero resultado
INICIO
Leer num1
Leer num2
Leer operacion
SI operacion = “+”
resultado = num1 + num2
O SI operacion = “-”
resultado = num1 - num2
O SI operacion = “*”
resultado = num1 * num2
O SI operacion = “/”
resultado = num1 / num2
EN OTRO CASO
MUESTRA “Teclee una operación correcta: +, -, *, /”
FIN_SI_Multiple
MUESTRA resultado
FIN
El método es sencillo, basta con conocer las palabras indicadas para

traducir el problema en términos de pseudocódigo. En este caso vemos
cómo utilizar una estructura condicional múltiple. Al final la inmensa
mayoría de los problemas se hace fácil si somos capaces de encontrar
las variables apropiadas y necesarias y si sabemos traducir el problema
en palabras convertibles a nuestro pseudocódigo.
Para no equivocarnos en las variables debemos repasar qué es lo que

entra (datos de entrada, num1, num2 y operación) y qué es lo que sale
(datos de salida, resultado). Cada uno de los datos de entrada y de
salida será una variable, también debemos pensar de qué tipo será el
dato: entero, carácter, lógico, fecha, etc. Por supuesto que habrá otras
variables, pero serán variables auxiliares de las que nos serviremos para
pasar de los datos iniciales a los finales.

Para traducir el enunciado del problema debemos identificar frases
como “elegir de entre varios”, “acumular hasta que”, “repetir n veces” o
cualquier otra indicación que nos aporte una pista de cómo afrontar el
problema.
Veamos un ejemplo algo más complejo. El problema siguiente es

construir un programa que lea tantos números como el usuario
introduzca hasta que marque el número 0, entonces se mostrará la
suma de todos los introducidos y la media.
PROGRAMA Calculadora de suma y media
/* Programa para calcular la suma y la media de una serie de

números introducidos por el usuario */
VARIABLES
Entero num /* variable de entrada */
Entero cuenta /* variable auxiliar */
Entero suma, media /* variables de salida*/
INICIO
cuenta=0
suma = 0
Leer num
MIENTRAS num <> 0 /* mientras num sea distinto de 0 */
HACER
suma = suma + num
cuenta = cuenta + 1
FIN-MIENTRAS
media = suma / cuenta
MOSTRAR “La suma es = “ suma
MOSTRAR “La media es “ media
FIN
En este ejemplo tenemos una variable de entrada, num, una variable

auxiliar que necesitamos para las operaciones y dos de salida, suma
y media. La clave está en identificar la frase “hasta que el usuario
marque el número 0” y traducirla en una estructura MIENTRAS.
Debemos mantenernos alerta para identificar y traducir correctamente
del lenguaje natural a nuestro pseudocódigo. Esto solo se aprende
realizando ejercicios, aquí tenéis otro y en el cuaderno de ejercicios
veremos aún más.

4. OBJETOS
La programación orientada a objetos (POO) es el último tipo de
programación incorporado, aunque en ningún caso se debe pensar
que es un invento reciente, ya que puede hablarse de SmallTalk como
el lenguaje orientado a objetos canónico que data de los años 70
del pasado siglo, mientras que su incorporación masiva en el mundo
informático se produjo en los primeros años de la década de los 90 del
siglo XX. Su éxito se basa, entre otros factores, en que es una forma
de trabajar quizá más cercana a como expresamos y pensamos los
problemas los humanos.
A lo largo de la sección iremos desgranando y explicando el

funcionamiento de este tipo de programación y qué son y cómo
acceder a los objetos.
4.1 Descripción de objetos

Podemos definir los objetos como entidades que tienen un
determinado estado, se comportan de una manera concreta (método)
y tienen una identidad definida. Los objetos, además, son instancias
concretas de una clase, entendiéndose por clase como una entidad
general que contiene todas las características de los objetos y de las
que derivan estos. Es decir, las clases se asemejan a moldes de los que
posteriormente se crean los objetos, de manera que tendré una sola
clase pero muchos objetos derivados de ella.
Cuando hablamos de un objeto hablamos de un caso concreto de una

clase. Si tomamos el concepto baloncesto como una clase, un objeto
de esta clase sería cada uno de los jugadores. Todos los ellos tienen
características comunes (altura, peso, habilidad, etc.) que cuando nos
referimos uno determinado se concreta (instancia). Por lo tanto en los
lenguajes orientados a objetos es necesario declarar primero la clase
para después concretar en un objeto.
Toda clase y por extensión cada objeto tendrá una serie

de características que lo definen, estos son los métodos
(comportamientos) y las propiedades o atributos que detallaremos en
secciones siguientes.
Los objetos se basan en diseñar un código en el que se manejan

objetos independientes que interactúan entre sí de manera que gran
parte del trabajo de programación sea el de manejar estos objetos,
bien sea introduciendo datos sobre ellos o extrayéndolos. Una de sus
principales ventajas es la modularidad que se consigue, de manera
que el programador, casi, solo tiene que preocuparse de acceder a las
propiedades de dichos objetos.

4.2 Funciones de los objetos
Las funciones y características del paradigma de orientación a
objetos se pueden resumir en una lista consensuada que detallamos a
continuación:
- Abstracción: es una característica básica, ya que gracias a ella

podemos formular todo un problema en un lenguaje de clases
que posteriormente se concreten cuando se definan los objetos
derivados de ellas. Pero mientras el problema se trata de una
manera abstracta. En el ejemplo de la clase deporte, tenemos de
manera abstracta todos y cada uno de los deportes, si nuestra
aplicación es sobre baloncesto, no impide poder utilizar la misma
clase en otra aplicación que sea sobre otro deporte.
- Encapsulamiento: nos referimos a unificar todos los elementos que

puedan ser del mismo tipo o nivel. Reunimos todos los deportes
en un mismo nivel, dentro de una clase común.
- Modularidad: los problemas grandes, divididos por partes

son problemas pequeños más fáciles de atacar. Además debe
procurarse que los distintos módulos sean tan independientes
como se pueda.
- Principio de ocultación: cada objeto es una entidad aislada del

resto, con su funcionamiento interno y sus propiedades que salvo
que sea necesario acceder a ellas se mantienen ocultas, de manera
que no puedan ser cambiadas de forma incontrolada.
- Polimorfismo: podemos llamar de la misma manera a

procedimientos distintos de distintos objetos. De esta manera
podemos usar el mismo nombre para realizar opciones parecidas
en distintos objetos.
- Herencia: las clases entre pueden relacionarse entre sí, unas

pueden depender de otras, de manera que se establece una
relación de jerarquía. Las clases hijas heredan propiedades y
métodos de la superior. La herencia facilita el polimorfismo y
el encapsulamiento de manera que se puedan utilizar y ampliar
sus propiedades sin que tengamos que volver a implementarlo.
También existe la llamada herencia múltiple cuando un objeto
hereda de más de una clase.
4.3 Comportamientos de los objetos

El comportamiento de los objetos se produce mediante el uso de
métodos. El funcionamiento de un método es equivalente al concepto
de función, es decir, una porción de código aislada e independiente
nombrada de una manera única y que le define. Dentro de un objeto
tendremos distintos métodos cuando queramos que nuestro objeto
haga distintas operaciones.

Siguiendo con el ejemplo de los deportes, si queremos definir el objeto
baloncesto debemos hacer un análisis previo para evaluar qué acciones
podemos traducir como métodos: tirar a canasta, pasar el balón,
botar,… pueden ser definidos como métodos.
Supongamos que estamos programando un juego de baloncesto y

que utilizamos un lenguaje de programación orientado a objetos.
Evidentemente cada vez que el jugador tire a canasta, bote la pelota
o realice un pase sería una ardua tarea tener que repetir el código
que hace la acción en cuestión. Para ello es muy conveniente el uso
de objetos, que encapsulan cada una de las acciones y pueden ser
llamadas cada vez que se necesite.
La forma de acceder a un método, en una mayoría de lenguajes y en

concreto en JavaScript, es por medio del nombre seguido de unos
paréntesis precedidos por un punto y el nombre del objeto. Por ejemplo
jugador.botar() o jugador.tiro(), donde jugador puede ser un objeto
derivado de la clase baloncesto, del cual heredará sus propiedades,
aunque no quiere decir que se utilicen todas.
4.4 Atributos de los objetos

Los objetos además de realizar acciones tienen características que les
definen. A esto es a lo que se llama atributos o propiedades. Dentro
del ejemplo que venimos siguiendo podemos decir que características
como velocidad, precisión, altura, peso, etc. serían ejemplos claros de
atributos de un objeto jugador.
La forma de llamar a una propiedad (de nuevo en la mayoría de los

lenguajes y en concreto en JavaScript) será usando el nombre del
objeto y a continuación el nombre de la propiedad: jugador1.peso. De
manera que si quisiésemos mostrar en pantalla cualquier propiedad
podríamos escribir
print jugador1.peso;
De igual manera si lo que queremos es cargar un valor en una de las

propiedades bastará con:
jugador1.altura=”206”;
4.5 Creación de objetos

Veamos ahora como crear clases y como derivar de ellas objetos,
así como llamarlos y utilizarlos. Vamos a utilizar un lenguaje que
trataremos que lo más estándar posible, es decir que no será ningún
lenguaje de programación concreto pero que tratará de ser similar a
como se utilizan los lenguajes de orientación a objetos más comunes.
Para crear una clase suele ser suficiente con una declaración del tipo:

class jugador {
/* dentro de estos paréntesis incluiremos los métodos y

propiedades de la clase */
altura =””;
peso=””;
habilidad=””;
energía=””;
estadoAnimo=””;
/* Hasta aquí hemos definido algunas de las posibles

propiedades, se crean vacías porque cuando se concrete en un
objeto determinado será entonces cuando se carguen */
tiro(var1, var2 ...){
/* aquí iría el código para programar el tiro a

canasta
el método puede recibir variables como var1 o var2
y podrá devolver valores al núcleo del programa */
bote(){
...
/* si queremos ahora crear objetos concretos: */
jugador1 = new jugador();
/* y ahora le introducidos valores en sus propiedades */
jugador1.energia = “10”;
jugador1.altura=”198”;
/* por último podemos llamar a sus métodos */
jugador1.bote(8,30);
/* suponiendo que los dos parámetros que se le envían son la

distancia a la canasta y el ángulo con el que se lanza */
Este es un ejemplo básico de cómo crear clases, concretar en un

objeto, utilizar sus propiedades y llamar a los métodos de un objeto.
Como podemos ver, estructurando bien un problema podemos manejar
bastante bien los comportamientos y características de casi cualquier
problema.

5. EJEMPLOS DE CÓDIGOS EN DIFERENTES
LENGUAJES
Por último veamos ejemplos de código en diferentes tipos de lenguajes.
Una vez que se está familiarizado con las estructuras de programación
pasar de un lenguaje a otro es cuestión de aprender la sintaxis de cada
uno de ellos, que por lo general suelen ser bastante similares.
5.1 Códigos en lenguajes estructurales

Este tipo de lenguajes se basan en el uso de subrutinas o funciones
para conseguir de esta manera una mayor modularidad. Ejemplo de
estos son: ALGOL, Ada o Pascal, si hablamos de los primeros tiempos,
pero realmente casi todos los nuevos lenguajes pueden calificarse
como estructurales debido a que la programación estructural es algo
que incluso los lenguajes orientados a objetos permiten (aunque no
estén pensados para ello). Por lo tanto otros lenguajes que admiten
este tipo de programación son python, c, PERL, COBOL, FORTRAN,
etc.
Veremos un programa en PASCAL que nos muestra, mediante un bucle,

los números del 1 al 10. PASCAL es un lenguaje desarrollado por un
profesor suizo con el objetivo de facilitar a sus alumnos el proceso de
aprendizaje en programación. De hecho ha sido usado durante años
con este fin, haciendo hincapié en la programación estructurada. Con
los años no solo se utilizó para enseñar, si no que su uso se extendió a
muchos otros ámbitos.
PROGRAM muestra1-10;
USES CRT;
VAR num:INTEGER;
BEGIN
num:=0;
ClrScr;
WHILE num <= 10 DO
BEGIN
WRITELN (num);
num:=num+1;
END;
END.
Vemos ahora otro lenguaje en PASCAL Escribir un programa en Pascal

que genere la tabla de multiplicar de un número introducido por el
teclado.

PROGRAM tablaMultiplicar;
USES CRT;
VAR tabla, x, num:INTEGER;
BEGIN
ClrScr;
WRITE (‘¿De qué número quieres ver la tabla? ‘);
READLN (num); WRITELN (‘’);
REPEAT
WRITELN (tabla);
x:= x + 1;
tabla:= num * x;
UNTIL x=11;
END.
Observar la excelente estructuración a la que obliga PASCAL, muy

conveniente cuando se comienza a programar. Por lo demás se puede
apreciar el uso de distintos bucles, las variables deben definirse y
declararse y algo importante que se repite en JavaScript en que las
instrucciones acaban siempre con un punto y coma.
Por último veamos un programa escrito en uno de los lenguajes más

importantes de la historia que sigue ocupando un puesto predominante
en el panorama de la programación. Nos referimos a C, lenguaje
nacido en los primeros años 70 del siglo XX inicialmente encaminado
al desarrollo de sistemas operativos. Una de sus principales
características y por la que es muy apreciado es por su eficiente código
con el que además se puede acceder a muchas propiedades de bajo
nivel (muy cercanas al hardware). De él se han derivado sucedáneos
como C++ (orientado a objetos) y C# (también orientado a objetos pero
forma parte de la plataforma .NET de Microsoft).
A continuación vamos a ver un programa desarrollado en C que calcula

la media de dos números, la peculiaridad es que lo hace utilizando una
función:
#include <stdio.h>
#include <stdlib.h>
/* Calculamos la media de dos números utilizando una función

*/
int media(int num1, int num2)
return(num1 + num2)/2;

/* Programa principal */
void main()
int x, y;
int resp;
x = 4;
y = 10;
resultado = media(x,y);
printf(“La media de %d y %d es %d\n”, x, y, resultado);
exit(0);
Vemos la función en y el programa principal donde se hace una llamada

a esta, pasándole los dos valores (x e y), por último se imprimen en
pantalla estos dos valores y el resultado.
5.2 Códigos en lenguajes scripts

A continuación vamos a ver código escrito en PHP. Este es un lenguaje
interpretado del lado del servidor y de propósito general que se utiliza
(sobre todo) para propiciar la interacción entre páginas web y bases de
datos. Las últimas versiones incorporan características de orientación a
objetos pero es su gran parecido sintáctico con lenguajes estructurados
como C y PERL lo que le hace muy popular por que requiere un corto
período de adaptación.
<?php
$datosInci=”<br><br>Enviado por:<br><br>Correo electrónico:

“.$_POST[‘correo’].”<br> Nombre: “.$_POST[‘nombre’].”<br>
Lugar: “.$_POST[‘lugar’].”<br>Descripción: “.$_
POST[‘desc’].”<br>”;
$mensaje=$datosInci;echo(“mensaje: “.$mensaje.”<br>”);
$fecha=date(“d-m-Y ; h:i”);echo(“fecha: “.$fecha.”<br>”);
$headers=”MIME-Version: 1.0 “;
$headers.=”Content-type: text/html “;
$headers.=”From:carlosollero@libro.com “;echo(“headers:
“.$headers.”<br>”);
$correo=”carlosollero@gmail.com”;echo(“correo:
“.$correo.”<br>”);
mail($correo,$fecha,$mensaje,$headers);

echo (“<link rel=’stylesheet’ type=’text/css’
href=’incidencias.css’>”);
echo (“<body class=’laguna’><div class=’cuerpo’ style=’top:25

0px;left:250px;’>La incidencia ha sido recogida, se atenderá
lo antes posible</br></br><input type=button onClick=’window.
close()’ value=’cerrar’></div></body>”);
?>
El programa es muy sencillo pero sirve para ver someramente su

sintaxis. Comienza recibiendo datos de un formulario HTML ($_POST),
en este caso de una incidencia, para después confeccionar un mensaje
y enviarlo por correo electrónico. Podemos observar también como a
través de la instrucción echo se genera HTML de manera dinámica.
Vamos ahora a ver un programa escrito en JavaScript. El código de este

lenguaje suele estar incluido en páginas HTML o bien es llamado desde
ellas, pero aquí solo veremos fragmentos de código JavaScript
propiamente dicho.
<script language=’javascript’>
function calcula()
iva = document.ff.precio.value * 0.21
document.ff.iva.value = iva
document.ff.total.value = iva + parseInt(document.

ff.precio.value)
</script>
Este pequeño script calcula el IVA dado un valor a través de una caja
de texto de formulario. Se puede ver como JavaScript utiliza métodos
y propiedades de objetos, que derivan de uno principal: document. A
continuación tenemos ff que es el nombre dado al formulario y dentro
de él hace alusión a la caja de texto precio. Se puede observar cómo se
hace referencia a distintos objetos que forman parte unos de otros.
5.3 Códigos en lenguajes orientados a objetos

A continuación veremos un ejemplo de código en JAVA.
Como ejemplo vamos a crear una clase y luego un objeto basado en

ella, la clase se llamará Trabajador. Sus propiedades pueden ser el
nombre, apellido, edad, sueldo,… Estas propiedades son llamados
atributos declarándose como una variable:

public class Trabajador {
Actualmente uno de los /* Atributos */

lenguajes orientado a
/* Nombre */
objetos más utilizados es
JAVA private String nombre;
/* Apellido */
private String apellido;
/* Edad */
private int edad;
/* Sueldo */
private double sueldo;
/* donde definimos el tipo de dato, string para cadena de

caracteres, int y double para números */
/* Ahora definimos los métodos */
/* Añadimos el importe de las horas extras al sueldo

del empleado */
public boolean aumentoExtra (double horasExtras){
boolean extra=false;
if (edad>40){
sueldo+=horasExtras;
extra=true;
return extra;
Ya estaría definida la clase, ahora lo que haríamos sería crear un objeto

concreto de esta clase.
Para crear un constructor, escribiremos public nombre_clase

(parámetros).
/* Constructor de un objeto */
public Empleado(String nombre, String apellido, int edad,

double sueldo){
this.nombre=nombre;
this.apellido=apellido;
this.edad=edad;
this.salario=sueldo;

Aquí se pasan los valores al objeto por medio de variables cuando este
es invocado, es decir cuando hacemos:
public static void main(String[] args) {
Trabajador trabajador12=new Empleado (“Carlos”, “Ollero”,

100, 2000);
Este es un ejemplo sencillo de uso de clases y objetos en un lenguaje

concreto, JAVA. A partir de ahora, en este manual iremos introduciendo
el lenguaje de programación JavaScript, que es un lenguaje de
script orientado a la programación web y que utiliza algunas de las
características de la orientación a objetos.

LO QUE HEMOS APRENDIDO
- Hemos aprendido qué es la programación y sus fundamentos.
- Hemos aclarado que la programación sirve para plantear y resolver

problemas, primero por medio de pseudocódigo y después por
medio de lenguajes de programación, de los cuales hemos visto una
introducción conociendo los más significativos.

Lenguaje
de guión 2
• Características del
1. CARACTERÍSTICAS DEL LENGUAJE lenguaje
Dentro de los lenguajes de programación tenemos dos grandes tipos • Relación del lenguaje de
que se distinguen por el modo en el que son ejecutados los programas. guion y el lenguaje de
El primer tipo es aquel en el que el código tiene que haber sido marcas
compilado. Por compilación entendemos el proceso mediante el cual el
código en formato texto de un lenguaje de alto nivel es transformado • Sintaxis del lenguaje de
en código máquina que entiende el sistema operativo. El programa es guion
validado por completo antes de ser compilado, de esta manera si se • Tipos de scripts:
encuentra algún error de sintaxis se genera un error y se interrumpe el inmediatos, diferidos e
proceso. híbridos
Por otro lado un lenguaje de script es aquel en el que el código es • Ejecución de un script
ejecutado línea a línea por el intérprete del lenguaje sin necesidad de
que el código sea enlazado (linkado) ni compilado. De este modo si hay
algún error éste no se detecta hasta que no se ejecuta la línea que falla. OBJETIVOS:
Ejemplos de este tipo de lenguajes son principalmente aquellos que se
utilizan para Internet como JavaScript, PHP o Python. Pero no solo los - Aprender qué es y cómo se
utilizados para desarrollo web, sino que otros lenguajes como PL-SQL programa en un lenguaje de
(para atacar bases de datos Oracle) son también interpretados o de guion
script.
- Conocer la sintaxis básica
Muchos de los lenguajes más conocidos son de este tipo como por - Distinguir entre los distintos
ejemplo C, Pascal, Java (aunque este último con ciertos matices). tipos de scripts
- Aprender cómo pueden

El proceso que se sigue al ejecutar un programa de un lenguaje ejecutarse los programas de
interpretado es el siguiente: scripts
- Lee la primera instrucción (línea).
- Evalúa su corrección.
- Convierte la instrucción a código máquina.
35
- Lee la siguiente instrucción (línea).
- Continúa por el paso 2 hasta que termina con todas las líneas.
Los lenguajes interpretados tienen la ventaja de que al traducir línea

a línea son ejecutados más rápidamente y además permiten ver
resultados sin tener que validar todas las líneas. En contra, al producirse
los errores en tiempo de ejecución la depuración es más complicada.
Además el código máquina que generan es más largo.
Respecto a los programas compilados tienen la ventaja de que se

detecten los errores en el proceso de compilación y no en la ejecución,
con lo cual se evitan sorpresas. El código máquina está más optimizado
ya que toma todo el programa como una unidad, mejorándolo. Sus
desventajas son principalmente la posible lentitud del proceso de
compilación y sobre todo, para lo que nos interesa, es que no son
idóneos para Internet, ya que se necesitaría descargar el código
máquina, que es más pesado.
Otra cuestión que hay que tener en cuenta a la hora de elegir un

lenguaje de programación para su uso en desarrollo web es el tema
de dónde se ejecuta el programa. El proceso de acceso a una web es
a través del protocolo HTTP en el que se hace una petición al servidor
y este envía lo solicitado siendo el navegador del peticionario (cliente)
el que recoge esos datos y los transforma en la web solicitada. Es
decir, el navegador es un intérprete de HTML. Si lo que queremos es
ejecutar un programa, en buena lógica, tendría que ser descargado
e interpretado por el navegador, o en su defecto, algún accesorio de
este. Pues bien, este es el modo de actuar en relación al lenguaje más
utilizado para enriquecer nuestras páginas webs, JavaScript.
Utilizando este lenguaje vamos a poder dotar a nuestros sitios de

algo de lo que carece por completo HTML y que tan solo con CSS3
podemos acercarnos mínimamente. Nos referimos a los efectos
dinámicos y a la interacción entre página y usuario.
Cualquier fichero ejecutable para el Sistema Operativo Windows es un

programa compilado cuyo resultado final del proceso es la creación de
un archivo con extensión exe. Además cuando compilamos las fuentes
de un programa utilizamos un compilador específico para ese sistema
operativo, incluso para una versión concreta, dependiendo de si es de
32 o 64 bits, por lo que un programa compilado para, por ejemplo, un
Windows 7 de 64 bits no será válido para un Windows 7 de 32 bits y
mucho menos para un Linux.
Cuando hablamos de lenguajes compilados incluíamos en la lista a Java,

añadiendo una salvedad con la frase: con algunos matices. Pues bien
estos matices son que Java, realmente no es un lenguaje compilado,
pero tampoco lo es interpretado. Java se construyó intentando obtener
las ventajas de ambos tipos y minimizando los inconvenientes. Lo que
utiliza es lo que se conoce como máquina virtual Java que es lo que
está instalado en el ordenador que va a ejecutar el programa, mientras
que lo que entra en esta máquina es una precompilación apta para
ser aceptada por cualquier máquina virtual Java esté en el sistema
operativo que esté.
36 Tema 2 / Lenguaje de guión

1.1 Descripción del lenguaje orientado a eventos
JavaScript comparte
Un lenguaje orientado a eventos es aquel que responde cuando se cierta similitud con
produce una acción, ya sea producida por el usuario o bien por el C, C++ y Java en su
proceso normal de la página. Los eventos más característicos son sintaxis, pero ahí se
al hacer click, doble click, cuando se pasa el ratón sobre un objeto,
acaban los paralelismos
cuando se abandona el objeto, etc. Otro tipo de eventos vinculados a la
tanto en uso como en el
acción del usuario y al teclado son cuando se pulsa una tecla o cuando
se deja de presionar sobre una tecla. propósito del lenguaje.
En el momento de
redactar este manual está
Los eventos que tienen que ver con la evolución son principalmente vigente la versión 1.5 del
dos: cuando se carga la página y cuando se cierra. Es en esos lenguaje y el intérprete
momentos cuando se lanza el código. está implementado
en la totalidad de los
En el caso de JavaScript, estos eventos pueden venir desde HTML o navegadores web
bien se pueden invocar desde el propio lenguaje. disponibles.
1.2 Descripción del lenguaje interpretado

Como ya hemos hablado en la introducción del tema JavaScript es
un lenguaje de programación interpretado, lo cual quiere decir que
su código fuente es leído y procesado línea y línea. De JavaScript
podemos decir que es un lenguaje orientado a objetos, débilmente
tipado y que aporta dinamismo a las páginas web. Vamos a ampliar
un par de conceptos de la definición anterior:
- Orientado a objetos: JavaScript es un lenguaje orientado a

objetos, aunque realmente lo que sí podemos afirmar en el
uso habitual es que es un lenguaje que utiliza objetos y se vale
de ellos para manejar ciertas características del navegador o
acceder a funciones. En general no será un lenguaje en el que
se creen nuevos objetos por parte del programador si no que se
utilizan los ya definidos.
- Débilmente tipado: con esta expresión lo que se quiere decir es

que a diferencia de otros lenguajes en los que la definición de
los datos es muy estricta y definitiva (si definimos una variable
como de tipo numérico esa variable no cambiará de tipo), en
JavaScript la definiremos pero no es necesario declarar el
tipo. Si en un principio introducimos un valor numérico nada
nos impide que más adelante en el programa se le asigne una
cadena de texto.
- Otras características son que se ejecuta del lado del cliente, lo

cual quiere decir que es el navegador el que tiene incorporado
el intérprete del lenguaje para procesar el código cuando le
llega. Este código puede venir insertado y mezclado dentro del
HTML o también constituir ficheros externos enlazados en el
HTML (de igual modo que se hace con los ficheros externos de
CSS).

1.3 La interactividad del lenguaje de guion
JavaScript fue
desarrollado por El uso de un lenguaje de guion insertado en el código HTML es una
consecuencia lógica dada por las propias características del lenguaje de
Netscape para
marcas. Este lenguaje también es leído línea y línea por el navegador e
su navegador,
interpretado por este.
posteriormente
Microsoft desarrolló su JavaScript añade al lenguaje de marcas justamente lo que le falta,
propia versión conocida interactividad. Gracias a él podremos utilizar los formularios HTML
como Jscript. Para evitar y programar respuestas adecuadas ante posibles errores del usuario
especificaciones dispares y proporcionar respuestas adecuadas dependiendo de la situación.
presentaron a la ECMA Igualmente podremos dar funcionalidad a botones.
(European Computers Con html solo dos tipos de botones hacían “algo”: reset y submit. El
Manufacturers resto de los botones normales no tenían ninguna utilidad.
Association) con el
fin de que hubiese un Con JavaScript podremos crear menús interactivos, desplegables y
estándar. De aquí surgió móviles, añadiendo un dinamismo a las páginas de los sin él no era
ECMA-262 en el que se posible. Tan solo con las últimas evoluciones se han incorporado
algunos efectos y propiedades que sí añaden movilidad e interactividad
estandarizaba el lenguaje
a las páginas web. Nos referimos a los efectos dinámicos que incorpora
ECMAScript.
CSS3 y a las nuevas etiquetas de HTML5 referidas a formularios. Estas
dos nuevas incorporaciones vienen a cubrir parte de las funciones que
tiene como propias JavaScript, pero si bien son una ayuda estimable,
en muchos otros aspectos no llegan a la versatilidad y eficiencia del
lenguaje de programación.
2. RELACIÓN DEL LENGUAJE DE GUION Y EL

LENGUAJE DE MARCAS
2.1 Extensión de las capacidades del lenguaje de marcas

HTML, como es conocido, es un lenguaje de marcas o un lenguaje
de etiquetas. Lo que esto quiere decir es que podemos etiquetar el
contenido con distintas marcas indicando que es o como queremos
que se muestre. De aquí que si ponemos <b>hola<b>, el texto “hola” el
navegador a través del intérprete de HTML nos lo mostrará en negrita.
Este tipo de lenguajes solo admiten el marcado en cuestiones de formato
y estilo, pero no admiten lo que es característico de los lenguajes de
programación, estructuras de control, de decisión o de repetición.
Tampoco admiten el uso de variables ni estáticas ni dinámicas a las que
se les pueda cambiar el valor en tiempo de ejecución.
HTML fue creado dando lugar a la aparición de los navegadores.

Mosaic fue el primero que era capaz de “entender” este marcado y
traducirlo para mostrarlo en pantalla. La web, tal y como la conocemos
se inició en ese tiempo y por entonces lo único que ofrecía era
contenido estático, una especie de cartel o libro en el que se ofrecía
información a través de una red informática. Con el tiempo y el

exponencial desarrollo de la www, la necesidad de ofrecer más y
mejores contenidos que incluyesen gráficos y multimedia se tradujo en
el motor de la evolución de la tecnología tras los navegadores. El deseo
de convertir las viejas páginas en algo interactivo más allá del mensaje
del usuario a un correo electrónico condujo a la inserción de código
embebido en el propio HTML. Inicialmente fueron los programas
CGI (Common Gateway Interface) asociados a los formularios. Estos
programas se ejecutaban en el servidor y proporcionaban ciertas
capacidades de interactividad.
Fue a partir de 1995 cuando aparecieron las primeras versiones

de JavaScript desarrolladas en Netscape con el nombre de Mocha.
Posteriormente este nombre se cambió al actual incluyendo la palabra
Java lo cual contribuyó tanto a su promoción como a la confusión como
lenguaje heredero de Java.
JavaScript sí es un lenguaje de programación, que además se ejecuta

en el navegador cliente y suma a las capacidades para el formato la
posibilidad de convertir las estáticas páginas creadas solo con HTML en
páginas dinámicas en las que usuario puede participar activamente.
2.2 Adición de propiedades interactivas

¿Pero qué es lo que añade JavaScript? Lo primero tiene que ver con los
formularios, en los cuales puede validar el contenido de sus campos,
verificarlo y en caso de error comunicar al usuario donde y por qué hay
un error. De otra parte, JavaScript permite el uso de objetos y
manipular de estos sus propiedades. Si unimos HTML, hojas de estilo y
JavaScript tenemos un concepto conocido como DHTML o Dynamic
HTML, el cual aúna el uso de HTML, CSS y JavaScript. Este último es
capaz de manejar los elementos de los otros dos como si fuesen
objetos, pudiendo acceder a sus propiedades (por ejemplo, si queremos
cambiar la posición de una capa accederíamos a ella a través de su
nombre, su id o la clase a la que pertenece). Un ejemplo de código
típico para realizar esto podría ser:
<html>
<head>
<script>
function verPosicion()
{
alert(document.getElementById(“capa1”).style.
left );
alert(document.getElementById(“capa1”).style.
top);
}
</script>
</head>
<body>
<div id=”capa1” onclick=”verPosicion()”>Si pulsas sobre mi

te mostraré mi posición</div>
</body>
</html>

Vamos a analizar este ejemplo. Lo primero y obvio es que tenemos un
documento HTML. El código JavaScript se inserta dentro de él, por lo
que partimos de lo que ya conocemos. Lo siguiente que debemos ver
es cómo hacemos entrar en escena a JavaScript. En este caso y muy
habitualmente está vinculado a un evento, onclick. De esta manera
cuando el usuario pinche sobre la capa ocurrirá algo. Lo siguiente es
ver cómo se une el evento con la ejecución del código. Después de la
referencia al evento aparece verPosicion(), como llamada a una función
JavaScript. El nombre lo elegimos nosotros pero como puede parecer
evidente debe ser un nombre explicativo que nos permita rápidamente
deducir para que se usa. La utilización de funciones es la forma en la
que encapsularemos el código debido al carácter altamente asociado a
eventos del uso de JavaScript.
Entonces tenemos: un evento y una llamada a una función que se

realiza cuando se produce dicho evento. El código de dicha función
estará insertado en el de HTML entre dos etiquetas <script>. Estas
etiquetas podrán estar en el head y el body, pero sí deberá estar
definida la función antes de que sea utilizada. Debemos tener
presente que tanto HTML como JavaScript son interpretados de
manera secuencial, lo que quiere decir que se van cargando a medida
que el navegador lee línea a línea el código. Si yo intento utilizar una
función que aún no ha sido leída no podrá funcionar. Por esta razón
es recomendable y habitual definir las funciones de JavaScript en la
sección <head> ya que es la primera en ser leída y por lo tanto cargada.
Vamos ahora a analizar el contenido de la función. Lo primero es

observar que ponemos el nombre seguido de unos paréntesis. Estos,
aunque dentro no haya nada, son imprescindibles, más adelante
sabremos para que son. Lo siguiente que tampoco debe faltar son los
corchetes, que delimitan el contenido de la función.
verPosicion()
Dentro vemos dos líneas de código prácticamente iguales. Basta con

analizar una de ellas:
alert(document.getElementById(“capa1”).style.left );
Todas las líneas Javascript terminan con un punto y coma, esto es

fuente de errores a menudo hasta que nos acostumbramos a ponerlo
siempre. Lo siguiente destacable es como Javascript maneja los objetos
de la página y de aquí su potencia y versatilidad. Lo primero vemos
un objeto del que dependen muchos de los que vamos a utilizar:
document, el cual tiene un método, getElementById, que podemos
suponer por su nombre que lo que hace es “pescar” de dentro de todo
el documento aquel elemento del cual especificamos su id. Y ahora
continuamos en cascada, document—> Elemento —>propiedades de
estilo—>propiedad. Del elemento indicamos que vamos a manipular
sus propiedades de estilo. ¿Cuáles? Pues en concreto left. En este caso
tan solo la mostramos, utilizando alert, que es una caja de aviso que se
abre mostrando en este ejemplo el contenido de la propiedad indicada.

En este breve ejemplo hemos visto que es lo que añade Javascript a
nuestras páginas y cómo podemos atisbar las posibilidades de control
sobre los objetos de la página y su dinámica son enormes, esto poco a
poco lo iremos descubriendo en las sucesivas secciones y capítulos.
3. SINTAXIS DEL LENGUAJE DE GUION
3.1 Etiquetas identificativas dentro del lenguaje de marcas

Para incluir código Javascript en nuestras páginas HTML podremos
utilizar dos métodos: el primero ya le hemos visto y es utilizando la
etiqueta <script>, podemos incluirla en el head de la página o en el
body, con la precaución comentada en el epígrafe anterior sobre el
orden de lectura de las instrucciones.
Un ejemplo puede ser <script language=”JavaScript” type=”text/

javascript”>: los dos atributos habituales para esta marca son language
y type. Con el primero especificamos el tipo de lenguaje que se va a
utilizar entre las etiquetas script. En la siguiente imagen podemos ver
los valores que sugiere el IDE Aptana en su ayuda contextual
Además de diversas versiones de Javascript, ofrece la posibilidad de

seleccionar VBScript, que es una versión de Visual Basic para web y
PHP, lenguaje de lado del servidor muy utilizado por su fácil conexión
con la base de datos MySQL. Dentro de las versiones de Javascript
tenemos JScript que fue una implementación que hizo Microsoft para
sus navegadores. Podemos, además, elegir una versión de Javascript o
simplemente seleccionar JavaScript de forma genérica.
Respecto a type, sabemos que las opciones que se pueden elegir son
tipos MIME y entre ellas indicamos al navegador que lo que sigue tiene
sintaxis Javascript.
La otra forma de insertar código dentro de una página web es similar

a uno de los métodos de incluir hojas de estilo: enlazando una página.
Esto se hace utilizando la misma etiqueta script:
<script type=”text/javascript” src=”miJS.js”></script>

La diferencia está en utilizar el atributo src para indicar dónde y cómo
se llama el fichero que contiene el código Javascript.
Existe una tercera forma de incluir código Javascript dentro del HTML y
es directamente en ciertas etiquetas de la siguiente manera:
<div onclick=”alert(‘Esto es insertar código directamente’)”>
Este método no es recomendable ya que resta limpieza y claridad al

código.
3.2 Especificaciones y características de las instrucciones

Las instrucciones deben cumplir unas normas sin las cuales el código
no se ejecutará. A menudo serán difíciles de detectar por lo que es muy
conveniente tenerlas siempre presente e incorporarlas como parte del
lenguaje. Estas normas son:
- No tiene en cuenta los espacios en blanco y los saltos de línea por lo

tanto se puede y se debe indexar correctamente y colocar las líneas
de manera que se vean claramente. El término indexar en
programación se refiere a utilizar tabuladores para que las
instrucciones queden estructuradas por niveles. Por ejemplo
<script language=”JavaScript” type=”text/javascript”>
alert(“hola que tal”);
</script>
La etiqueta script marca el primer nivel, la instrucción alert el

segundo. Esto que puede parecer pesado es una garantía de
claridad dentro de nuestro código.
- Distingue entre mayúsculas y minúsculas: cada instrucción tiene

su capitalización correcta y única. No es lo mismo Alert que alert,
solo funcionará en el segundo caso. O en el caso que vimos
anteriormente de getElementById, solo será correcto si se escribe
así, con las mayúsculas correspondientes.
- Al final de cada sentencia debe aparecer un punto y coma (;).

Recalcar la palabra utilizada: “debe”. No es obligatorio pero
para conseguir un código correcto y evitar posibles problemas
es altamente recomendable adquirir la costumbre de cerrar las
sentencias así.
- El tipo de variables no se define. Lo cual quiere decir que aunque

de inicio una variable sea de texto, este tipo puede cambiarse en
cualquier momento.
- Podemos insertar comentarios de dos tipos. De varias líneas, para lo

cual abriremos el comentario con /* y lo cerraremos con */ o de una
sola línea, en cuyo caso pondremos //.
Ejemplos:

/* Esto es un comentario de varias líneas,
hasta que no aparezca el cierre todo será comentario */
// Este será un comentario de una sola línea.
3.3 Elementos del lenguaje de guion

Dentro de los elementos que conforman cualquier lenguaje de
programación tendremos variables, operaciones, comparaciones y
asignaciones.
A. Variables
Por variable entendemos el elemento en el cual podemos guardar un
valor (en la memoria del ordenador) con el objeto de poder recuperarlo
posteriormente y utilizarlo. Un ejemplo sencillo podría ser la suma de
dos números. Imaginemos que queremos hacer un programa para pedir
al usuario dos números y responder con su suma. Podría ser algo así:
1. Escriba un número.
2. Escriba otro número.
3. La suma de ambos es número1+número2.
Entre el paso 1 (o 2) en el que se pide el primer número y el paso 3

en el que se realiza la suma tendremos que guardar el valor que ha
introducido. Dichos valores se almacenarán cada uno en una variable.
Por lo tanto en una variable guardaremos valores, datos que

representan algo (una edad, el contenido de una caja de texto, una
fecha) de lo que podemos extraer la primera premisa que debemos
tener en cuenta a la hora de elegir el nombre para una variable:
Se debe evitar la utilización de nombres del tipo var1, Vcuatro, num3 y

procurar darle un nombre significativo. Es decir, si tiene que almacenar
el nombre del usuario podemos llamarla nombreUsuario, si va a
contener su edad, edadUsuario, etc. De esta manera conseguimos que
su uso no se convierta en un galimatías en el que debemos adivinar
como se llamaba cada una de las variables y para qué las habíamos
creado.
Para declarar una variable en Javascript basta con poner la siguiente

línea de código:
var miVariable;
Incluso podemos inicializarla con el valor que necesitemos:
var mivariable = “hola”;
Como ya hemos dicho, esta inicialización no es algo definitivo ya que

podemos cambiar el tipo de datos que se almacenan en cualquier

momento. La declaración con la palabra var es muy recomendable ya
que evita muchos problemas. Es muy desconcertante intentar retocar
un programa en el que de pronto surgen variables a lo largo del código
sin previo aviso. Es mucho mejor para el mantenimiento de los script
que las variables estén declaradas preferentemente al principio.
Otra recomendación respecto a la nomenclatura, es que podemos, sin

más, nombrar a las variables sin ningún patrón. Nada nos lo impide,
pero de nuevo volvemos a lo que es apropiado para evitar que nuestro
código se convierta en algo así como una larga melena enmarañada.
Por ello es bueno tener algún tipo de marco en el que encajar los
nombres que vamos dando. Uno muy utilizado, no solo para Javascript
si no en otros muchos lenguajes es que cuando debemos utilizar
dos palabras la primera esté en minúsculas y la segunda empiece en
mayúsculas.
Por otro lado solo podremos utilizar caracteres alfanuméricos y el

carácter subrayado (_). Los caracteres no alfanuméricos como +, #, el
espacio en blanco etc. no pueden utilizarse. Igualmente las variables
deben empezar o bien por un carácter alfabético o por el subrayado.
Nombres de variables correctos pueden ser:
miVariable1
_nombreGuardar
Direccion
Nombres de variables no válidos serían
1variable
nombre+
numero de telefono
Vamos ahora a hablar sobre un concepto importante en programación

conocido como el ámbito de las variables: el lugar en el que estarán
disponibles. Dicho de otro modo, dónde serán utilizables y desde que
partes de mis páginas podré acceder a su contenido.
Dentro de una página web podremos tener diversos trozos de scripts

que llaman a diversas funciones. Debemos entender cada función
como una caja cerrada y aislada del resto, por lo que las variables
declaradas dentro serán visibles solo para los procedimientos internos.
Si queremos tener variables que podamos utilizar en cualquier lugar
de nuestra página deberemos declararlas fuera de cualquier función.
Una consecuencia de esto es que no podemos tener dos variables con
el mismo nombre en el mismo ámbito. Sí podemos tener dos variables
que se llamen igual, por ejemplo en funciones independientes, pero a
todos los efectos para Javascript serán variables distintas. Además es
una práctica altamente desaconsejada.
De modo que podemos hablar de dos tipos de variables, las globales y

las locales.

- Variables globales. Son aquellas declaradas de manera que pueden
ser accedidas desde cualquier lugar del programa, incluidas sus
funciones y subprogramas.
<a href=”#seccion1”>Sección 1</a>
<a name=”seccion1”>
Si queremos una variable global podremos declararla, por ejemplo,

en el encabezado:
<html>
<head>
<SCRIPT>
var miVariableGlobal
</SCRIPT>
<head>
- Variables locales. Una variable local será aquella que tiene un

ámbito restringido. Por lo general será una función, pero también el
interior de un bucle, por ejemplo. Solo son accesibles desde el lugar
en el que se han declarado.
Para aclarar y practicar el concepto de ámbito, de variables locales y

globales vamos a realizar un ejercicio sencillo. Partiendo del código
siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<title>Variables en Javascript</title>
<script type=”text/javascript”>
var miVariableGlobal=”hola”;
function prueba() {
alert(miVariableGlobal);
var miVariableLocal=”variable de prueba”;
}
function prueba2() {
var miVariableLocal=”variable de prueba2”;
alert(“La variable que se muestra es:
“+miVariableLocal);

}
</script>
</head>
<body>
<form>
<input type=”button” value=”botón1”
onclick=”prueba()”>Si me pulsas podrás ver el valor de una
variable global declarada fuera de cualquier función</
input></br>
<input type=”button” value=”botón2”
onclick=”prueba2()”>Si me pulsas podrás ver el valor de una
variable local, hemos declarado dos variables con el mismo
nombre
una en la función prueba y otra en la función
prueba2, como son locales el valor que se mostrará será el de
la función prueba2.</input>
</form>
</body>
</html>
Tenemos dos botones que al ser pinchados producen un evento

onclick en el que se llama a sendas funciones. El primer botón llama
a la función prueba() que tan solo muestra el valor de una variable
(miVariableGlobal). Esta variable será local o global ¿dónde está
definida?
Respecto al segundo botón llama a la función prueba2(), que

también muestra el valor de una variable miVariableLocal que
podemos ver que está definida en ambas funciones con valores
distintos. Si lo ejecutamos tal y como está el código ¿qué valor
se muestra? Si ahora comentamos la línea en la que definimos
miVariableLocal dentro de la función prueba2().
Por último comentar que existen una serie de palabras conocidas

como reservadas que forman parte del propio lenguaje de
programación y que no pueden ser utilizadas como nombres de
variables. Vemos las correspondientes al lenguaje Javascript en la
siguiente lista extraída del estándar ECMA-262: break, else, new,
var, case, finally, return, void, catch, for, switch, while, continue,
function, this, with, default, if, throw, delete, in, try, do, instanceof,
typeof.
B. Operaciones
Para realizar operaciones con Javascript se utilizan lo que se conoce
como operadores matemáticos. Los operadores básicos son la suma,
+, resta, -, multiplicación, + y división, /. Deberemos tener cuidado de
utilizar con estos operadores variables cuyo contenido sea numérico.
Veamos algún ejemplo

var num1=2;
var num2=4;
var resultado;
resultado = num1 + num2;
alert (“El resultado de la suma es: “+” “ +resultado);
resultado = num2 – num2;
alert (“El resultado de la resta es: “+” “ +resultado);
resultado = num1 * num2;
alert (“El resultado de la multiplicación es: “+” “

+resultado);
resultado = num1 / num2;
alert (“El resultado de la división es: “+” “ +resultado);
Estos son los cuatros operadores correspondientes con las operaciones

básicas. Además, tenemos otro operador conocido como módulo y que
nos devuelve el resto de la división entera. Si dividimos 4 entre 2 el
resultado es 2 y su resto 0 (al ser exacta), por lo que el operador
módulo nos devolvería 0. Dicho operador se representa con %. Veamos
un ejemplo:
var num1=8;
var num2=4;
var resultado;
resultado = num1 % num2;
alert(“El módulo es: “ + “ “ + resultado);
C. Comparaciones
Algo básico en cualquier lenguaje de programación son las
operaciones de comparación las cuales permiten dilucidar si dos
condiciones cumplen una premisa o no, si un número es mayor
que otro, si dos variables de texto contienen la misma cadena de
caracteres, etc.
Los operadores Javascript para ello son:
- Igual que: ==.
- Idéntico: ===.
- Distinto: !=.
- No idéntico: !===.

- Mayor que: >.
- Mayor o igual que: >=.
- Menor que: <.
- Menor o igual que: <=.
El significado de cada uno es claro. El resultado de la comparación

siempre será un valor booleano, es decir, verdadero o falso (realmente
Javascript devuelve true o false). Conviene aclarar el comportamiento
del operador idéntico: devolverá true (Verdadero) solo si el contenido
de los dos operandos es igual y además el tipo de variable también lo
es. Vamos a aclarar esto con un ejemplo.
var num1=4;
var num2=”4”;
var resulIgual;
var resulIdentico;
resuligual = num1 == num2;
alert (“El resultado si comparamos con igual es: “ + “ “ +

resulIgual);
resulIdentico = num1 == num2;
alert (“El resultado si comparamos con idéntico es: “ + “ “ +

resulIdentico);
Si ejecutamos este trozo de código obtendremos de la primera

combinación un true y de la segunda un false (compruébalo). Esto se
debe a que si comparamos con igual, el propio Javascript convierte
los tipos de variable y compara, por lo que para él son iguales. En
cambio en el caso de usar idéntico no hace esta conversión y en ese
caso detecta que uno es un valor numérico (4) y en el otro es un tipo
de variable de texto (“4”).
Es importante resaltar que no es lo mismo utilizar el operador igual

que (==) que el operador asignación (=). Solo el primero sirve para
comparar, hay que tener esto muy presente para evitar errores.
También merece la pena remarcar que no es lo mismo menor que (o
mayor que) que menor o igual que (mayor o igual que), veamos un
ejemplo:

var num1=3;
var num2=4;
var resultado;
resultado = num1 < num2;
alert (“El resultado para menor es: “ + “ “+ resultado);
resultado = num1 <= num2;
alert (“El resultado para menor o igual es: “ + “ “+

resultado);
El primer alert devolverá un false ya que no incluye que sean iguales,

solo los estrictamente menores, mientras que en el segundo sí
devolverá un true, porque en este caso se incluyen los menores y
también los iguales.
D. Asignaciones
Por asignación entendemos la transferencia de un valor hacia una
variable. Debemos tener muy presente que no es lo mismo que
comparar dos valores, ya que el tratamiento de ambas operaciones es
distinto y lleva a menudo a errores difíciles de detectar.
Si queremos asignar un valor lo haremos con el signo =.
nombreUsuario = “Antonio”;
Con esta línea asignamos el valor “Antonio” a la variable

nombreUsuario.
Podemos combinar signos y así abreviar notación utilizando

conjuntamente los operadores aritméticos con el =. La sintaxis
podemos verla en los siguientes ejemplos:
var num1 = 2;
num1 += 4;
var num2 = 1;
num2 -= 2;
var num3 = 5;
num3 *= 3;
var num4 = 8;
num4 /= 4;
var num5 = 3;
num5 %= 2;

En el primer caso num1 quedará con el valor 6, es decir esta nueva
nomenclatura quiere decir que, en este caso, sumamos al valor de la
variable (en este caso num1) el valor indicado (4).
3.4 Objetos del lenguaje de guion

En Javascript podremos definir objetos o podremos utilizar los
existentes. Si definimos objetos propios podremos definir sus métodos
y sus atributos. La sintaxis para crear un objeto será:
var miObjeto = new Object();
A. Métodos
Como ya hemos indicado Javascript es un lenguaje orientado a objetos
que tendrá asociados lo que llamaremos métodos. Entendemos que
método es una rutina o subrutina que realiza una operación a través
de la cual se podrán manipular y cambiar los datos privados de este.
Además un método siempre irá unido a un objeto.
Por consiguiente que cada objeto tendrá sus métodos propios. En

general la sintaxis para acceder a un método, que será:
objeto.metodo();
Hemos visto un ejemplo en lo que llevamos de capítulo en el que

hemos utilizado sin nombrarlo un objeto y un método. Nos referimos al
siguiente:
document.getElementById(“capa1”).style.left
Aquí el objeto es document, que sin duda es de los más importantes

en Javascript (si no el que más) y el método que se aplica sobre él es
getElementById, donde le hemos pasado el parámetro capa1.
Otros ejemplos de su uso pueden ser document.title o document.

write().
B. Eventos
Por evento entendemos una acción que desencadena la ejecución
de una porción de código. Es lo que hace de Javascript el
complemento ideal para HTML, que es estático y por medio de
los eventos conseguimos cambiar aspectos de nuestra página web
en tiempo de ejecución, dotándola de propiedades dinámicas.
Ejemplos sencillos pueden ser hacer click sobre algún elemento o
pasar el ratón sobre un elemento de menú. Más adelante veremos
detalladamente el uso de los eventos. Ahora bastará con hacer una
relación de ellos y su definición clasificados por el dispositivo que lo
desencadena:

a. Eventos de ratón
- onClick: es el más básico. El evento se dispara cuando el usuario
pincha sobre algún elemento, no solo sobre un botón. Se puede
asociar a una imagen, una capa, un párrafo o cualquier otro
elemento HTML.
- onDblclick: igual que el anterior salvo que necesita de dos clicks

seguidos de forma continua para desencadenar la ejecución
del código. Estamos acostumbrados a usarlo en el escritorio de
Windows, por ejemplo, para abrir cualquier programa.
- onmousedown: se produce cuando el botón del ratón se pulsa

encima del elemento tratado.
- onmousemove: se activa cuando el ratón se mueve sobre el

elemento.
- onmouseout: se ejecuta el código cuando el ratón sale del

elemento.
- onmouseover: se produce cuando el cursor del ratón se sitúa sobre

el elemento.
- onmouseup: se produce cuando el botón del mouse se suelta al

estar sobre el elemento.
b. Eventos de documento
- onload: se ejecuta cuando la página se ha cargado.
- onunload: se aplica cuando un documento se cierra.
c. Eventos de formularios
Se aplican sobre los elementos de formulario.
- onchange: se produce cuando se modifica el valor del elemento.
- onsubmit: se ejecuta cuando se envía el contenido del formulario

hacia otra página.
- onreset: se produce cuando el formulario se reinicia.
- onselect: se aplica cuando el usuario selecciona un texto dentro de

un elemento.
- onblur: se produce cuando un elemento pierde el foco ya sea con el

ratón o con el teclado (tabulador).
- onfocus: se ejecuta cuando un elemento recibe el foco ya sea con el

ratón o con el tabulador.
d. Eventos de teclado
- onkeydown: se ejecuta cuando se pulsa una tecla y se mantiene
pulsada.

- onkeypress: se produce cuando se pulsa una tecla y después se
suelta.
- onkeyup: se activa cuando se suelta una tecla.
C. Atributos
Atributos o propiedades son aquellos datos que definen el estado de
un objeto. Si partimos de un objeto Javascript podremos modificarlo
cambiando sus atributos. Es, junto con los métodos, una de las
características de un objeto en un lenguaje orientado a objetos.
Para poder utilizar un atributo de un objeto Javascript bastará con

miObjeto.atributo. Si lo queremos modificar o crear bastará con
miObjeto.atributo = “hola”; ahora existe (si no existía) un atributo
llamado atributo que tiene el valor hola.
D. Funciones
Una función se diferencia de un método en que este está vinculado
siempre a un objeto, mientras una función tiene un carácter
independiente. Podemos definir una función para múltiples propósitos,
por ejemplo recoger el código que se deberá ejecutar cuando se
desencadene un evento, o bien puedo necesitar tener creada una
función genérica que pueda ser llamada desde otras funciones.
Para crear una función bastará con definirla:
function miFuncion()
Hay que destacar que los paréntesis siempre deben estar aunque no
contengan nada. Igualmente todo el código deberá estar entre las dos
llaves. Ejemplos de funciones pueden ser una que calcule la letra del
NIF o que averigüe si un número es par o impar.
Otro uso importante de las funciones será para definir métodos. Ya

hemos visto cómo crear objetos y atributos, y para crear un método
sería:
miObjeto.metodo() = function () { };
Dentro de las llaves se incluirá el código de la función. Su

funcionamiento es similar a cualquier otro lenguaje de programación.
De la misma manera en Javascript hay librerías de funciones que
podemos utilizar y que nos evita tener que programar ciertas
operaciones que se usan a menudo. Algunas de estas funciones son
por ejemplo parseInt() o isNaN(), entre otras. La primera nos sirve para
transformar cualquier cadena alfanumérica en un número entero y la
segunda evalúa si lo que ponemos entre los paréntesis es numérico o
no.

4. TIPOS DE SCRIPTS: INMEDIATOS,
DIFERIDOS E HÍBRIDOS
4.1 Script dentro del cuerpo del lenguaje de marcas

Vamos a clasificar los scripts en función del tiempo de ejecución.
Atendiendo a este factor podemos tener scripts inmediatos,
diferidos e híbridos. Veremos cada uno de ellos en las siguientes
subsecciones.
A. Ejecutables al abrir la página

Este tipo de scripts se corresponde con los inmediatos y aquellos
cargados por medio de onload.
Podemos definir entonces inmediatos como aquellos que se ejecutan

junto al código HTML, generalmente en el momento de cargar la
página, por lo que su código no estará contenido dentro de funciones.
Recordemos que cualquier función para ser ejecutada debe ser
llamada. Un ejemplo de esto es la creación de variables globales
necesarias para cualquier función de la página. Otro caso evidente es
todo aquello que involucre la formación y el formato de partes de la
página que necesiten ser creadas por Javascript nada más cargar el
sitio web.
B. Ejecutables por un evento

Estos scripts serían diferidos, ya que solo se ejecutarán en caso de
ser llamados desde un evento.
Diferidos serán todos aquellos que se cargan en memoria pero no

han sido ejecutados. Su ejecución se llevará a cabo cuando sean
invocados, ya sean a través de un evento o de una llamada desde
cualquier sitio. En ambos casos serán funciones.
Un tercer caso son los híbridos: estos son aquellos que están
a medio camino entre los dos tipos anteriores o que tengan
características de ambos. Un ejemplo puede ser cuando se utiliza el
evento onload, este se dispara justo después de que se cargan todos
los elementos de la página, por lo que por un lado es diferido, en
cuanto a que se controla el momento en el que se ejecuta el código
pero al mismo tiempo se ejecuta durante la misma acción que los
inmediatos.
4.2 Script dentro del encabezado del lenguaje de marcas

Los scripts pueden estar en cualquier parte de la página HTML, por
lo que también podrán estar en el encabezado (entre las etiquetas
<head></head> situaremos las de <script>). De hecho es habitual

que el grueso del código Javascript se sitúe aquí. Los motivos
son sobre todo de organización y de eficiencia, podemos detallar
alguno:
- Es aconsejable que el código no esté disperso por toda la página,

la revisión se complica sobremanera si tenemos que estar
buscando trozos de código por cualquier sitio.
- El encabezado es un buen lugar para situar la carga de las

variables globales, las funciones que van a utilizarse, el código que
necesitamos sea ejecutado al inicio, etc.
- Debemos recordar el carácter de ejecución y carga del lenguaje

línea a línea de manera secuencial, por lo que es imprescindible
que aquello necesario este cargado previamente. Por ello el
encabezado es un buen lugar, incluso dentro de él habrá que tener
cuidado con el orden en el que ponemos los trozos de código y las
funciones.
4.3 Script dentro del cuerpo del lenguaje de marcas

Acabamos de decir que es conveniente agrupar el código en el
encabezado, pero siempre puede haber algún caso en el que
necesitemos incluirlo en el body. Para ello bastará con abrir una
etiqueta <script> siendo muy recomendable que marquemos y
expliquemos bien porqué lo hacemos utilizando comentarios.
Otra forma de tener código en el cuerpo de la página es que vaya

incluido dentro de las propias etiquetas, con un ejemplo lo veremos
más claro. Para llamar a una función cuando se produce un evento
tenemos lo siguiente:
<input type=”button” onclick=”miFuncion()”>
Este es un ejemplo de botón que cuando es pulsado llama la función

mifunción. Otra forma de ejecutar código sin necesidad de llamar a una
función sería de la siguiente manera:
<input type=”button” onclick=”alert(‘Hola que tal’)”>
Aquí directamente se ejecuta la instrucción alert. Este método es

necesario conocerlo pero la calidad del código es mucho mejor si lo
evitamos.
5. EJECUCIÓN DE UN SCRIPT
En esta sección vamos a recordar las diversas formas de ejecutar
un script que podemos utilizar. En función del caso concreto será
más conveniente utilizar una u otra, teniendo siempre en cuenta
que comentar la funcionalidad del código siguiente siempre será
recomendable.

5.1 Ejecución al cargar la página
Si nos fijamos en las
Si queremos que algo se ejecute a la vez que se carga la página bastará comillas del ejemplo,
con incluirlo dentro de las etiquetas <head>. necesitamos dos parejas
de comillas, unas las que
engloban el contenido
<!DOCTYPE html>
del alert y otras que
<html> agrupan lo que debe
<head>
ejecutarse cuando se
hace click. Lo interesante
<meta charset=”utf-8” /> es ver que cuando ocurre
<title>Ejecución al inicio</title> la necesidad de varios
grupos de comillas
<script language=”Javascript” type=”text/javascript”>
unas dentro de otras lo
alert(“Este mensaje saldrá al iniciar la página”); que hay que hacer es
function cargaInicio()
alternar el tipo, si hemos
empezado con comillas
{ dobles, la siguiente será
alert(“Este mensaje saldrá cuando se haya simple, después doble de
cargado la página”); nuevo, etc. Las comillas
} simples y dobles para
Javascript son totalmente
</script>
equivalentes.
</head>
<body onload=”cargaInicio()”>
</body>
</html>
Como vemos no está dentro de ninguna función y se carga

secuencialmente cuando el navegador llega a la línea correspondiente
lo ejecuta. El otro modo de ejecutar al inicio es usando onload: en
este caso se ejecutará justo después de finalizar la carga completa. En
este caso sí usaremos una función a la llamará el evento cuando se
produzca.
5.2 Ejecución después de producirse un evento

El último ejemplo del epígrafe anterior es algo intermedio entre
aquellos scripts que se ejecutan al cargar la página y los que lo hacen
al producirse un evento. Un ejemplo típico de ejecución después de un
evento es el vinculado a un botón:

<!DOCTYPE html>
<html>
<head>
<title>Ejecución al inicio</title>
<script language=”Javascript” type=”text/javascript”>
function ejecutaClick()
alert(“Este mensaje saldrá después del evento

onclick”);
</script>
</head>
<body>
<form>
<input type=”button” onclick=”ejecutaClick()”

value=”Púlsame”>
</form>
</body>
</html>
Para otros eventos el sistema es similar: dentro de la etiqueta HTML se hace

referencia al evento y se dirige hacia la función que queramos ejecutar.
5.3 Ejecución del procedimiento dentro de la página

Cuando hablamos de ejecutar un script dentro de la página nos referimos
a que el código está contenido en alguna de las partes del HTML. En
cualquier caso deberá estar contenida en una función o formar parte de
la propia etiqueta, ya que en otro caso se ejecutaría al cargarse la página.
Como hemos comentado anteriormente es recomendable concentrar

el código en una misma zona para de esta manera facilitar su acceso
una vez que nosotros o cualquier otro programador tenga que corregir
o mantener algún punto del programa. El sitio más recomendable es la
cabecera, pero si necesitamos insertar código en el cuerpo, se puede
hacer siempre dentro una única etiqueta de script.
5.4 Tiempos de ejecución

Por tiempo de ejecución entendemos el momento en el que se ejecuta
el código. En base a esto tendemos distintos tipos:

- Aquellos que se ejecutan al cargarse la página. Están fuera de
cualquier función, se cargan secuencialmente según el navegador va
leyendo el código.
- Los que se ejecutan pasado un tiempo programado. Javascript

proporciona una función que permite ejecutar a su vez otra función
transcurrido un tiempo programado. Se puede utilizar para ejecutar
algo pasado un tiempo después de la carga de la página o después
de un evento, etc. Puede usarse combinada con otra función
que ejecuta periódicamente otra función. Tradicionalmente se
ha utilizado para incluir movimiento en la página antes de tener
disponibles los efectos con CSS3.
- Los que dependen de un evento. Cuando un evento se produce hay

una llamada a la función indicada que contiene el código deseado.
- Funciones de uso común. Son llamadas en el momento que alguna

sentencia las necesita, pudiendo incluso ejecutarse varias veces en
la misma sesión.
5.5 Errores de ejecución

Como todo lenguaje de programación surgirán errores de todo tipo que
habrá que ir solucionando a medida que se detecten. Como Javascript
es un lenguaje interpretado, no existe la posibilidad de detectar fallos
en tiempo de compilación, si no que los errores surgirán cuando se
ejecute el código. Es más, a menudo la página no mostrará ningún
signo sobre que error se ha producido, lo cual hace más complicado la
detección de los problemas. Para ello existen plugin para navegadores
que permiten depurar y detectar los errores producidos al ejecutarse
Javascript. Actualmente navegadores como Firefox y Chrome, los dos
ampliamente utilizados, traen ya sus propias herramientas de desarrollo
(así las llaman). En las siguientes imágenes podemos ver cómo acceder
a ellas y como nos mostrarían los errores de ejecución producidos.
Primero vemos cómo se accede a las Herramientas para desarrolladores

de Chrome y a la Consola de Javascript

Si abrimos dicha consola nos informa de los posibles problemas de
ejecución de Javascript:
En la parte de abajo de la pantalla se abre la consola, en rojo nos marca

los errores y en azul los avisos. Este ejemplo está tomado de la página
principal de Google y podemos apreciar errores. Casi cualquier página
en la que hagamos esto mismo encontraremos que hay errores, los
cuales no impiden que funcione bien.
En Firefox encontramos una utilidad similar en el menú Herramientas y

dentro de aquí Desarrollador Web y Consola del Navegador. Tanto uno
como otro permite la detección de errores así como la interacción con
el código de la página, sobre todo a nivel de CSS.

- Hemos aprendido qué es y cómo se programa en un lenguaje de
guion.
- Hemos visto como es la sintaxis básica de Javascript.
- Hemos repasado cuales son los distintos tipos de scripts que

podemos utilizar y cómo y cuándo se ejecutan.
- Este ha sido un primer tema introductorio a Javascript que nos da

pie para continuar profundizando en este lenguaje de programación.

Elementos básicos
del lenguaje 3
de guion
• Variables e
1. VARIABLES E IDENTIFICADORES identificadores
Identificador es el nombre con el que se referencia a una función, una • Tipos de datos
constante, un objeto o una variable. Existen unas reglas sobre cómo se
pueden elegir dichos nombres. Hablando de JavaScript las reglas serían • Operadores y expresiones
las siguientes: • Estructuras de control
- Lo primero es tener en cuenta que JavaScript distingue entre • Funciones
mayúsculas y minúsculas. No es lo mismo miVariable que
MiVariable, serían objetos distintos a todos los efectos. • Instrucciones de entrada
/ salida
- Los identificadores no podrán empezar por un número.
- Se podrán formar con letras (en mayúsculas o minúsculas) y OBJETIVOS:

números. Podremos utilizar además el carácter subrayado.
- Aprender cómo se declaran
- Nunca se deberán incluir caracteres distintos de los mencionados y usan las variables en
anteriormente, incluyendo los espacios en blanco. Una función cuyo JavaScript
nombre sea: mi función(), no será válida. ¿Por qué? Por dos razones,
la primera el espacio en blanco y en segundo lugar por el acento. - Conocer los tipos de datos
- Se permiten nombres con un máximo de 31 caracteres de longitud. - Conocer qué son y cómo
se usan los operadores en
- No están permitidos nombres coincidentes con palabras reservadas JavaScript
del lenguaje como ya comentamos en el tema anterior.
- Aprender el uso de las
estructuras de control del
lenguaje
1.1 Declaración de variables
- Manejar convenientemente
La declaración de variables debe contemplar las mismas reglas que las funciones en JavaScript
hemos visto en los párrafos anteriores. Su declaración se puede realizar
en cualquier parte del script, no necesariamente en el inicio. Para - Conocer cómo funcionan las
decidir cuál puede ser el mejor lugar para situarlas tendremos que instrucciones de entrada y
distinguir entre aquellas variables que queremos que sean locales y salida
61
las que queremos usar a lo largo de todos lo scripts contenidos en la
página.
Si queremos que la variable sea local y solo utilizarla en el ámbito en el

que se está definiendo podremos declararlas dentro de la función a la
que pertenezcan. Si por el contrario lo que queremos es que puedan
ser usadas en múltiples funciones tendremos que situarla fuera de
cualquier función.
En general y sea cual sea el ámbito en el que queremos ver la variable,

es recomendable siempre que sean declaradas al principio, ya sea de la
función o de los script. En otros lenguajes incluso se habilita una zona
específica al comienzo para declarar las variables. En JavaScript esto
no es necesario pero sí muy conveniente tener a todas las variables a la
vista para poder controlarlas y saber cuáles estamos utilizando.
Es conveniente elegir nombres significativos y representativos de

manera que no se convierta en un concurso de adivinación o de
buena memoria el uso de las variables y las llamadas a las funciones.
Si no declaramos una variable e intentamos utilizarla la consola de

JavaScript nos devolverá un error: miVar is not defined. Que quiere
decir que la variable miVar no está definida. Si por el contrario la
definimos sin asignarle ningún valor var miVar; la variable ya existe pero
aún no contiene nada, se dice que tiene el valor null. Si intentamos
mostrar el contenido obtendremos un mensaje del tipo: undefined.
Siendo este otro motivo importante para que cuando se declare una
variable se le asigne un valor, aunque sea 0 o un espacio en blanco para
las cadenas de texto.
Por último decir que podemos declarar más de una variable a la vez,
podemos utilizar la expresión: var variable1, variable2, etc...;
1.2 Operaciones con variables

Como hemos hablado ya, las variables son porciones de memoria que
se reservan para almacenar algún valor, ya sea numérico o alfabético.
Esto no serviría de mucho si no pudiésemos realizar operaciones
con ellas. Estas operaciones no solo son aritméticas, en el caso de
números y las cuales conocemos: suma, resta, división, multiplicación
y división entera, sino que, además, podemos realizar operaciones con
contenidos alfanuméricos:
- Asignación: se establece el valor de la variable al igualar con otra o

directamente, como en el ejemplo var miVar = “hola”;
– Concatenación: el contenido de una o varias variables se une

para formar el contenido de otra distinta. var miVar = “hola ” +
nombreUsuario;
En el ejemplo vemos como se concatenan contenidos en JavaScript.

El nexo de unión es el signo +. Hay que tener en cuenta que
62 Tema 3 / Elementos básicos del lenguaje de guion

aquellas cadenas de caracteres alfanuméricas van entrecomilladas
mientras que las variables no. El contenido de la variable miVar de la
línea de código anterior sería algo así como: hola Luis (suponiendo
que Luis es el contenido de la variable nombreUsuario).
También pueden concatenarse solo variables, sin necesidad de que

haya ninguna cadena de caracteres.
- Truncamiento: truncar es cortar por determinado sitio algo. En el

caso de una variable se traduce en, por ejemplo, quedarse con las
tres primeras posiciones o con las cinco últimas. En JavaScript se
realizan estas operaciones por medio de funciones que forman
parte del propio lenguaje. Contaremos con unas muy útiles
funciones de manejo de caracteres a las que podremos sacar mucho
partido.
- División: el contenido se reparte en trozos, pudiendo cada parte ser

asignada a variables distintas.
2. TIPOS DE DATOS
Tipo de dato es el tipo de contenido de una variable, es decir, lo que
guardamos en ella. Así podemos hablar de los tipos más generales
como son los numéricos, de texto o booleanos. Si hablamos de
lenguajes más exigentes incluso podemos hablar de distintos tipos
de datos numéricos según sean enteros, decimales o permitan el
almacenamiento de un valor mayor o menor. En concreto, JavaScript
es un lenguaje débilmente tipado, lo cual quiere decir que las variables
pueden fácilmente cambiar de tipo de dato y que incluso no es
necesario que cuando definamos una variable indiquemos su tipo.
Si escribimos var miVariable; estaremos declarando una variable de
manera totalmente válida, por hablar de forma llana, hemos reservado
un espacio de memoria que se llama de la manera indicada pero no
hemos definido qué es lo que vamos a guardar ahí. Será en el momento
en el que vinculemos algún valor con la variable cuando esta adquirirá
ese tipo.
Vamos a comentar en las secciones siguientes cada uno de los tipos

generales utilizados por JavaScript.
2.1 Datos booleanos

La palabra booleano viene de George Boole, el matemático británico
que en el siglo XIX sentó las bases de la aritmética binaria, un sistema
de numeración con dos dígitos (el que usamos habitualmente, el
decimal, tiene diez). Este tipo de aritmética es la utilizada por cualquier
computador, ya que cualquiera de ellos tan solo maneja dos estados: 0
y 1. De esta manera un avance que en principio parecía carente de toda

aplicación se ha convertido en uno de los pilares del desarrollo
tecnológico del siglo XX.
Coma flotante
es un sistema de Cuando decimos que un una variable es de tipo booleano queremos
representación de decir que solo contempla dos posibles valores, por lo general, true y
números reales útil para false. Variables típicas que pueden ser de este tipo son todas aquellas
operar con números muy en las que la respuesta es un simple sí o no.
pequeños o muy grandes.
También podemos utilizar este tipo de variables en variables que
Es el sistema que utiliza la
queramos utilizar para decidir, para seguir ejecutando una parte del
CPU de los computadores código u otra. A menudo necesitaremos que el valor de una variable
para realizar cálculos. Es cambie en función de unas condiciones. Por ejemplo, si se cumplen
muy similar a la notación estas condiciones valdrá true y si no se cumplen false. Posteriormente
científica, al utilizar este se utilizará para dirigir el programa en una dirección o en otra.
sistema en código binario
se utilizarán una cantidad
arbitraria de dígitos, por 2.2 Datos numéricos
lo que se asume cierto
error. Del total de los Todos los lenguajes de programación manejan datos numéricos.
dígitos (en este ejemplo Muchos de ellos tienen varios tipos numéricos, con JavaScript y su afán
16) se dividirán en: simplificador tendremos tan solo uno. En él podremos guardar desde
número enteros (positivos y negativos) hasta números decimales en
1º signo formato de coma flotante. Vamos a ver detenidamente los distintos
formatos.
2º- 8º exponente Los valores válidos que podemos utilizar son:
9º-16º parte 44
significativa (número).
124.28
Por ejemplo: 1 0000010 -2
00001110 = -8E2. En
concreto JavaScript +349.11
utiliza la representación -33.44
doble precisión de 64 bits
formato IEEE 754. En esa Además, en JavaScript podemos utilizar la notación exponencial,
representación tendremos también conocida como notación científica, para representar números
un bit para el signo, 11 en coma flotante
para el exponente y 52 92.213E+4
para el número, lo cual
se traduce que puede 1234E-2
representar valores entre -723.123E18
2,2250738585072014e-308
y Según esta notación el primer número sería equivalente a 922130, es
1,7976931348623158e +308. decir desplazamos a la derecha la coma decimal tantas posiciones como
indica el exponente (en este caso 4) completando con ceros cuando no
haya más números. Si el exponente es negativo como en el segundo
ejemplo, la posición de la coma se desplaza hacia la izquierda, en este
caso tendríamos 12.34.
Además también contempla lo que se conoce como NaN (Not a

Number), lo cual ayuda a identificar aquella variable cuyo contenido no
es numérico.

Dentro del tipo numérico podemos utilizar otros sistemas de
numéricos. Si antecedemos a cualquier número un cero estaremos
diciendo que está en el sistema octal (de ocho dígitos) o si ponemos
delante 0x lo que tendremos será un número en hexadecimal. Por
ejemplo 023 y 0x23 están en octal y hexadecimal respectivamente.
Atención y tener en cuenta esto antes de comenzar un número por la

cifra cero.
2.3 Datos de texto

Es el tipo de datos más utilizado junto con el numérico. Contiene
cadenas de caracteres ya sean alfabéticos, numéricos o de otro tipo
(por ejemplo los signos $, %, etc.). Su longitud va desde 0 bits a 16 bits
(2 bytes). A menudo se le conoce como tipo string.
Sus valores se asignan entrecomillados: var nombre=”Ramón”;

pudiendo ser utilizadas tanto las comillas dobles como las simples, pero
siempre igual la inicial y la final. Se pueden incluir caracteres especiales
empezando con la barra invertida \. JavaScript acepta las siguientes:
Secuencia Valor
\0 carácter NUL (\u0000)
\b backspace (\u0008)
\t tabulador horizontal (\u0009)
Nuev
\n
a de línea (\u000A)
\v tabulador vertical (\u000B)
\f form feed (\u000B)
\r retorno de carro (\u000D)
\" comilla doble (\u0022)
\' comilla simple (\u0027)
\\ barra invertida (\u005C)
\xXX Carácter Latin-1 expresado con dos dígitos hexadecimales XX
\uXXXX Carácter Unicode expresado con cuatro dígitos hexadecimales XXXX
2.4 Valores nulos

JavaScript utiliza el valor null cuando una variable no ha sido
inicializada. Este valor no quiere decir ni cero ni vacío, es un estado
nulo en el que la variable existe pero no contiene ningún valor ni la
variable tiene asignado todavía ningún tipo.
Si queremos que una cadena de caracteres (tipo texto) tenga una

cadena vacía bastará con inicializarla así:

var miTexto = “”;
Igualmente si queremos que una variable numérica contenga el valor

cero:
var miNumero = 0;
Ese valor null podrá utilizarse posteriormente con una función

predefinida que detecta si la variable tiene o no este estado:
isNull(variable); Evalúa la variable y devuelve true si es null y false en
caso contrario.
3. OPERADORES Y EXPRESIONES
En este apartado vamos a introducir a los operadores y las expresiones.
Los primeros son los que nos permiten manejar y transformar el valor
de una variable. Este proceso lo realizarán en forma de expresiones,
por lo que a estas las podemos definir como combinación de variables,
constantes y operadores que, por lo general, devolverán un valor.
3.1 Operadores de asignación

Son aquellos que nos permiten definir el valor de una variable. El
operador básico de este tipo es =. Por lo tanto cuando tenemos una
línea del tipo miVariable = 8, estamos asignando el valor 8 a la variable
miVariable.
Además de este operador básico JavaScript nos provee de otros algo

más elaborados y que nos facilitan ciertas tareas. Con ellos asignamos
pero también sumamos, restamos, multiplicamos o dividimos:
- Asignación y suma: +=, con él obtendremos la suma de los

operandos de ambos lados. Por ejemplo:
var miVariable = 1 // defino la variable como igual a 1.
miVariable += 4 // ahora al valor de miVariable le sumo 4 y guardo el

resultado en miVariable. Por lo que el valor final de miVariable será
5.
- Asignación y resta -= funciona igual que la anterior pero restando.

Ejemplo:
miVariable -= 4 // ahora al valor de miVariable le resto 4 y guardo el

4.
- Asignación y multiplicación: *=, igual pero multiplicando. Ejemplo:

miVariable *= 4 // ahora al valor de miVariable le multiplico 4
y guardo el resultado en miVariable. Por lo que el valor final de
miVariable será 32.
- Asignación y división: /=. Veamos un ejemplo:
miVariable /= 4 // ahora al valor de miVariable le divido 4 y guardo el

2.
- Asignación y módulo: %=. Ejemplo:
miVariable %= 4 // ahora al valor de miVariable le divido 4 y guardo

el resto en miVariable. Por lo que el valor final de miVariable será 0.
También tendremos otros operadores de asignación en los

que se combina la asignación básica (=) con operadores que
evalúan expresiones sobre bits. Estos son <<= >>= >>>= &= ^=
y !=. Volveremos sobre ellos en el epígrafe 3.4 para explicarlos
convenientemente.
3.2 Operadores de comparación

Los operadores de comparación evalúan dos valores y devuelven un
valor lógico, es decir true o false. Su uso es sobre todo en estructuras
de control, de manera que según se cumpla una condición o no se
lleven a cabo unas acciones u otras. Esto operadores son:
- Igual: ==, evalúa si dos operandos son iguales. No confundir con el

operador asignación (=).
- Distinto: !=, devuelve verdadero si los operandos son distintos.
- Mayor que: >, devuelve verdadero (true) si el operando a la

izquierda es mayor que el de la derecha.
- Menor que: <, devuelve verdadero (true) si el operando a la

izquierda es menor que el de la derecha.
- Mayor o igual que: >=, devuelve verdadero (true) si el operando a la

izquierda es mayor o igual que el de la derecha.
- Mayor o igual que: <=, devuelve verdadero (true) si el operando a la

izquierda es menor o igual que el de la derecha.
- Igual valor y tipo: ===, en este caso para que devuelva un true los
operandos deben tener el mismo valor y ser del mismo tipo.
- Distinto y/o tipo: !==, devuelve true si los operandos no son iguales
y/o no son del mismo tipo.
Los operadores pueden ser cadenas de texto o numéricos: en el primer

caso serán iguales siempre que los dos textos tengan exactamente la

misma secuencia de caracteres. También hay que tener en cuenta que
Null y Undefined son considerados iguales.
3.3 Operadores aritméticos

Son aquellos que nos permiten realizar las operaciones aritméticas y
que todos conocemos: suma (+), resta (-), multiplicación (*), división (/)
y módulo (%).
Además de estos tenemos otros dos que son muy útiles también:
Incremento: ++, con él aumentamos en una unidad al operando sobre

el que se aplica. Tendremos dos formas de uso con resultados distintos:
- miVariable++. En este caso, si por ejemplo tenemos var1 =

mivariable++ y suponiendo que var1 sea igual a 2, el resultado es
que var1 permanece con el valor 2 y miVariable valdría 3.
- ++miVariable. Ahora y la variable del ejemplo anterior, var1

= ++miVariable, var1 se incrementa en 1 y valdría 3 igual que
miVariable que también valdría 3.
De manera que tenemos que en el primer caso se el incremento se

produce después de la asignación, lo que provoca que la variable de la
izquierda permanezca inalterada, mientras que en el segundo caso el
incremento es anterior a la asignación lo que hace que ambas variables
incrementen su valor.
3.4 Operadores sobre bits

Su funcionamiento radica
en tomar bit a bit los Estos operadores actúan sobre números binarios, sustituyendo en este
operandos sobre los que sistema de numeración a las operaciones aritméticas comunes. . No son
actúan operadores que se utilicen habitualmente en JavaScript, por lo que solo
los mencionaremos:
- AND (&): hace una AND booleano.
- OR (|): realiza un OR booleano.
- XOR (^): realiza un XOR booleano.
- NOT (~): equivale a un NOT booleano (negación).
- << (desplazamiento izquierda): desplaza los bits a la izquierda

las posiciones que indique el operando que está a la derecha,
completando con ceros por la derecha y descartando los bits de
mayor peso (los de la izquierda). Veamos una ejemplo: si tenemos
el número binario 00001010 equivalente al 10 decimal y hacemos
sobre él la operación 00001010 << 2, el resultado será desplazar
sus dígitos dos a la izquierda, descartando los dos que están más a
la izquierda, luego: 00101000, que equivale a 40.
- >> (desplazamiento derecha): Igual que a la izquierda, mueve los bits

a la derecha.

3.5 Operadores lógicos
Usaremos estos
Son operadores heredados de la lógica. En programación son
operadores lógicos
utilizados para tomar decisiones en función del valor de los operandos.
cuando utilicemos
Tendremos tres operadores lógicos que ya vimos en el tema 1, pero aun
así es conveniente repasarlos: estructuras de control
con varios operandos.
- AND: en JavaScript se representa con el símbolo &&. Retorna true Incluso pueden
si y solo si los dos operandos son ciertos. En cualquier otro caso combinarse en la misma
devuelve false. Recordamos su tabla de verdad: expresión de manera
que tengamos, por
AND (&&)
ejemplo dos operandos
Operando 1 Operando 2 Resultado evaluados con un AND y
1 1 1 su resultado enfrentado
1 0 0
a otro mediante un OR
u otro AND. Podemos
0 1 0
tener cualquier
0 0 0 combinación posible,
de manera que puede
- OR: en JavaScript se representa con el símbolo ||. Su interpretación complicarse mucho por
es que devuelve true cuando alguno de los dos operandos es true. lo que es conveniente ser
Su tabla de verdad conocida será: muy ordenado y tener
claro qué es aquellos que
OR (||)
queremos
1 1 1
1 0 1
0 1 1
0 0 0
- NOT: su símbolo en JavaScript es !. Se usa delante de un operador

resultando lo contrario del valor que tenía dicho operador. Si tenía
true, cambia a false y viceversa.
NOT (!)
1 0
0 1
3.6 Operadores de cadenas de caracteres

Del operador suma debemos añadir que no solo se puede utilizar como
operador aritmético, sino como operador de cadena de caracteres. Si
“sumamos” dos cadenas de texto cualesquiera JavaScript las concatena.
Es decir, si tenemos lo siguiente: miVariable = “Hola” + “que tal”; el
contenido de miVariable es “Hola que tal”. Igualmente podemos enlazar

el contenido de una variable con una cadena de texto o el contenido de
varias variables, como podemos ver en los ejemplos:
var1 = “Hola”;
miVariable = var1 + “ que tal”;
Resultando en miVariable “Hola que tal”.
var1 = “Hola”;
var2 = “ que tal”;
miVariable = var1 + var2;
Con lo que obtendríamos el mismo resultado: “Hola que tal”.
Igualmente podemos utilizar el operador += para unir cadenas de

caracteres, teniendo el mismo funcionamiento que con números.
3.7 Operadores especiales

A continuación vamos a ver una serie de operados llamados especiales
y que no encajan en ninguna de las clasificaciones anteriores.
- ?...: es un operador utilizado como atajo de la estructura de control

if. Su sintaxis es la siguiente:
condición ? expresion1 : expresion2
Si la condición es true el operador devuelve el valor de expresion1,

si no lo es devuelve expresion2. Vemos un ejemplo:
miVariable ? “Hola” : “Adios”;
Si miVariable es verdadera, devuelve “Hola”, si es falsa devuelve

“Adios”.
- ,: el operador coma sirve para añadir una expresión en un lugar en el

que se requiere una sola. Se suele usar en el bucle for para que haya
dos parámetros que recorren el bucle.
- delete: borra un objeto, una propiedad o un elemento de un array.
- new: crea una instancia de un objeto definido. Ejemplo: miObjeto =

new objetoTipo ().
- this: hace referencia al objeto que actualmente se está manejando.

Ejemplo: this.propiedad.
- typeof: devuelve una cadena de caracteres indicando el tipo de una

variable u objeto. Ejemplo:
var miVariable1 = “cadena de texto”;
typeof (miVariable1) devolverá string.

Otros valores que puede devolver son object, number, boolean o
function.
- void: especifica que una expresión pueda ser evaluada sin retornar
un valor. Su sintaxis es void (expresión).
3.8 Expresiones de cadena

Expresiones de cadena son aquellas que contienen cadenas de texto,
string, que involucran operadores de cadena. Hay que tener en cuenta
que para utilizar cadenas de texto tenemos siempre que incluirlas entre
comillas.
Veamos algunos ejemplos de expresiones de cadena:
- Declaración de variable: var miVariable = “Hola que tal”;
- Concatenación de variables:
var miVariable1 = “”; / se declara como una variable de texto pero

con una cadena vacía.
var miVariable2 = “Editorial CEP”;
var miVariable3 = “Certificados de Profesionalidad”;
miVariable1 = miVariable2 + “. “ + miVariable3
El resultado de la concatenación será “Editorial CEP. Certificados de

Profesionalidad”.
Además podemos utilizar los caracteres especiales que ya hemos visto

en secciones precedentes, veamos algunos ejemplos:
// Podemos utilizar el carácter especial para salto de línea
var miVariable1 = “Esta es la primera línea \n y esta es la segunda”;
// o también podemos necesitar incluir comillas dentro del mismo

texto
var miVariable1 = “Dijo textualmente que \” Yo de aquí no me muevo

\” “;
// o incluso una barra invertida
var miVariable1 = “Así podemos incluir una barra invertida en un

texto: \\”;
// También podemos poner un tabulador
var miVariable1 = “Nombre: \t Ana López López”;
De esta manera podemos incluir caracteres especiales en nuestras

expresiones de cadena.

Debemos tener en cuenta, como veremos más adelante, que JavaScript
nos ofrece muchas funciones de tratamiento de cadenas, por ejemplo,
para cortar cadenas, para sustituir caracteres, etc.
3.9 Expresiones aritméticas

Entendemos por expresiones aritméticas aquellas que involucran una
operación matemática. Lo más importante a tener en cuenta tiene que
ver con la precedencia, aunque al final de este epígrafe veremos un
resumen sobre este tema en el que estarán incluidas las operaciones
aritméticas, es conveniente ver cómo funciona para ellas.
Una definición de precedencia puede ser el orden en el que se

evalúa una cadena de operaciones (en el caso que nos ocupa ahora
aritméticas y en general cualquier operador de los que hemos visto).
Habrá que tener mucho cuidado cuando formemos las operaciones
ya que una mala colocación puede suponer que no se realice como
nosotros deseamos. Un consejo útil es la utilización de paréntesis que
nos agrupen las operaciones. Como veremos en la siguiente lista es lo
primero que se evalúa:
1º () [] Primero se evalúan el contenido de paréntesis, corchetes. Si

quiero que varias operaciones se evalúen agrupadas, habrá que
utilizar paréntesis.
2º - A continuación se evalúan los negativos.
3º * / % Después las operaciones de multiplicación, división y módulo.
4º +- Por último las sumas y las restas.
Para aclarar veamos un ejemplo: no es lo mismo 2*3+7 que 2*(3+7), el

primero nos da 13 (primero se hace la multiplicación y posteriormente
la suma), en el segundo caso obtenemos 20 (primero el paréntesis y
después la multiplicación).
3.10 Expresiones lógicas

Las expresiones lógicas son aquellas en las que se utilizan operadores
lógicos, lo cual no quiere decir que solo se utilicen estos, ya que lo que
haremos será la evaluación lógica de varios operandos, pudiendo ser
estos de tipo aritmético, de comparación, etc.
Veamos ahora algunos ejemplos de expresiones lógicas:
- Primero las más elementales como son aquellas que solo utilizan un
operador
miVariable = varLogica1 && varLogica2;
En este caso se evalúan dos variables guardándose el resultado (true

o false) en miVariable.
- Podemos tener una combinación de varios operadores lógicos:

miVariable = (varLogica1 || varLogica2) && !(varLogica3 ||
varLogica4).
Observar que el segundo operando después del AND está negado

(!);
- Nos podemos encontrar con expresiones que mezclen distintos

tipos de operadores:
((var1 + var2)/var3) >= 10) || ((var1/var3)>20)
Este tipo de operaciones utilizan comparaciones para luego realizar

las operaciones lógicas, se suelen utilizar como condiciones en
estructuras de control como if.
3.11 Expresiones de objeto

Los objetos en JavaScript pueden ser creados, con la siguiente sintaxis:
var objetoPrueba = new Object ();
O podemos utilizar los que nos ofrece el lenguaje. En cualquier caso

las expresiones que los involucran siempre comienzan por su nombre,
seguido de una propiedad
objetoPrueba.propiedad
Si queremos recuperar su valor bastará con utilizar lo que hemos

puesto antes, si queremos modificarlo podemos hacerlo así,
objetoPrueba.propiedad = “rojo”;
Si en cambio lo que queremos es acceder a uno de sus métodos
objetoPrueba.metodo()
Como vemos la diferencia es el uso de los paréntesis en el caos de los

métodos, esto es debido a que las propiedades tienen valores que se
pueden modificar o recuperar, pero a los métodos podemos enviarles
parámetros.
Profundizaremos en el uso y tratamiento de los objetos en secciones

posteriores, en las que hablaremos de los objetos nativos (propios del
lenguaje) y de los del programador (los que creamos nosotros).
Por último comentar un tema muy importante como es la precedencia

entre operadores. Cuando tenemos que utilizar varios juntos hay unas
reglas que definen el orden en el que se ejecutan.
La primera regla es que el orden de ejecución va de izquierda a

derecha. Esta es la regla más evidente pero hay que tener en cuenta
otras, obtenidas alguna de ellas de las matemáticas. Por ello la siguiente
lista muestra el orden de ejecución de distintos operadores, que se
evaluarán en primer lugar en el mismo orden que aparecen en la lista:

1º () [] . Primero se evalúan el contenido de paréntesis, corchetes y
el operador punto de los objetos.
2º ! - ++ — A continuación seguirán la negación, el negativo y los

incrementos o decrementos.
3º * / % Ahora se realizarán las operaciones de multiplicación,

división y módulo.
4º +- A continuación las sumas y las restas.
5º << >> >>> En quinto lugar los cambios a nivel de bit.
6º < <= > >= Después los operadores condicionales de menor,

menor que, mayor y mayor que.
7º == != Ahora los operadores condicionales de igualdad y

desigualdad
8º & ^ | En octavo lugar los operadores lógicos a nivel de bit.
9º && || A continuación los operadores lógicos boleanos, AND y

OR.
10º = += -= *= /= %= <<= >>= >>>= &= ^= != Por último los de

asignación.
Lo normal no es encontrase más de dos, tres o quizá cuatro

operadores en la misma expresión pero es conveniente tener
presente la anterior lista.
4. ESTRUCTURAS DE CONTROL
4.1 Sentencia IF
Es la más sencilla pero es probablemente la más empleada. La palabra
if en inglés significa si, un si condicional, el mismo que empleamos para
decir: si me tocase la lotería o si aprueba este curso. En el uso habitual
del lenguaje lo utilizamos para discriminar entre dos posibles opciones:
si se cumple una premisa (condición) tomaremos un camino y si no se
cumple iremos por otro lado. Exactamente eso es para lo que sirve en
un contexto de programación. Veamos ahora cual es la sintaxis correcta
utilizada en JavaScript.
If (condición)
Hacer si se cumple la condición;

Hay que tener en cuenta que la condición debe ir entre paréntesis
y que después de ella no es necesario el punto y coma (si lo es en el
resto de la sentencias). A continuación van unas llaves que incluirán
la sentencia o sentencias a ejecutarse en el caso de que se cumpla la
condición. Si esta no se cumple el programa seguirá adelante sin entrar
siquiera.
Todo lenguaje de programación necesita de herramientas para poder

desarrollar su función. Estas herramientas son en primer lugar las
variables en las que guardamos valores y con las que operamos y
en segundo lugar tenemos toda una serie de estructuras que nos
permitirán decidir qué se hace y en qué circunstancias.
La condición puede ser de tipo lógico, comparativa o una combinación

de ambas. Veamos ejemplos:
- Condición lógica:
var miVariable = true;
if (miVariable)
document.write(“La variable lógica es verdadera”);
En este caso usamos una variable lógica cuyo contenido puede ser
true o false. Otro tipo de condición lógica es la negación:
var miVariable = false;
if (!miVariable)
document.write(“En este caso se cumple la condición cuando

lo contrario de la variable sea verdadero”);
- Condición comparativa:
var miVariable = 10;
if (miVariable >= 8)
document.write(“La variable es mayor o igual que 8”);
La variable de control puede ser numérica o alfanumérica y los

operadores, los de comparación: ==, <, <=, >, >=, etc.

Es muy importante recordar que para comparar se utilizan dos
signos iguales, si solo ponemos uno lo que estamos haciendo es
asignar un valor y siempre se cumplirá la condición.
- Condición lógica y comparativa:
var miVariable1 = 10;
var miVariable2 = “hola”;
if ((miVariable1 < 20) && (miVariable2 == “hola”))
document.write(“En este ejemplo tenemos dos comparaciones

y una condición lógica”);
Hasta ahora solo hemos visto que if hace “algo” cuando se cumple la
condición pero ¿y en el caso de que no se cumpla? Cuando se da esta
circunstancia y queremos ejecutar algunas líneas de código deberemos
utilizar la palabra reservada else. Es una palabra inglesa que podemos
traducir por “de otro modo” o “en otro caso”, es decir que si no se
cumple la condición de la sentencia if indicamos por donde debe
continuar el programa. Vemos la sintaxis en un ejemplo:
var miVariable2 = “hola”;
if ((miVariable1 < 20) && (miVariable2 == “hola”))
document.write(“En este ejemplo tenemos dos comparaciones

y una condición lógica”);
else
document.write(“Si el programa entrar por aquí quiere

decir que no se ha cumplido la condición”);
La regla general es que else pertenece al if más cercano, habrá que ser
cuidadoso con la colocación de las llaves para no cometer errores.
Otro caso que debemos considerar es cuando no se cumple la

condición pero ahora lo que necesitamos es otro if, a esta estructura
se le conoce como else-if y hay diversas formas de implementarla
dependiendo del lenguaje. En JavaScript la sintaxis es la siguiente:

if (miVariable1 == 100) {
document.write(“Se ha cumplido la condición”);
else if (miVariable1 == 20) {
else if (miVariable1 == 30) {
else {
document.write(“Si no se ha cumplido ninguna de las

condiciones anteriores entrará aquí”);
Este código sería equivalente utilizando lo que se conoce como if

anidados, tendríamos algo así:
if (miVariable1 == 100)
else
else {
else {
document.write(“Si no se ha cumplido ninguna

de las condiciones anteriores entrará aquí”);

Puede comprobarse que queda más claro el código utilizando else if.
4.2 Sentencia WHILE

La palabra while en inglés significa mientras. Por lo tanto el bucle
que podemos generar en JavaScript (y en cualquiera lenguaje) se
puede leer como “mientras se cumpla la condición ejecuta las
líneas siguientes”. La condición será de los mismos tipos que vimos
para el if. Su sintaxis es la siguiente:
while (condición)
Sentencias a ejecutar;
While es la primera estructura de un tipo común que se conoce

como bucle. Por definición un bucle es un conjunto de sentencias
que se ejecutan repetidamente. Como veremos a medida que
vayamos describiendo cada una de dichas estructuras, las habrá
que se ejecutan bajo una condición (como el caso de while) y las
que se ejecutan un número prefijado de veces. Un aspecto a tener
en cuenta de este bucle es que las sentencias contenidas en su
interior pueden ejecutarse o no en función del cumplimiento de la
condición.
Una variación de este mismo bucle es do … while. Veamos su

sintaxis:
do
while (condición)
En esta variación las sentencias también se ejecutan según se

cumpla la condición, con la salvedad de que nos aseguramos de
que esto ocurra al menos una vez debido a que la evaluación se
produce al final.
En cualquiera de las dos formas es muy importante que la

condición que decide la ejecución de una nueva iteración cambie
en algún momento, ya que si no lo hace habremos creado un bucle
infinito que no dejará de ejecutarse y que incluso podrá llegar a
bloquear el navegador.
Veamos un ejemplo de código en el que se genera un bucle infinito:

var miVariable1 = true
while (miVariable1)
document.write (“Ojo no usar este código”);
document.write (“Esta es una forma sencilla de crear un

bucle infinito”);
document.write (“Como en ningún momento se cambia el valor

de la variable de la condición, el while se ejecutará siempre
hasta que cerremos el navegador”);
Bastaría con incluir una línea en el que el valor de miVariable1 cambiase

para evitar este problema.
4.3 Sentencia FOR

Esta estructura también es un bucle pero se diferencia de las anteriores
en que no hay una condición que permite ejecutar las sentencias. En
cambio lo hará un número fijo de veces. Su sintaxis es la siguiente:
for (inicio; condición; incremento)
En inicio tendremos el valor inicial de la variable que hará de índice, en

condición se indica el valor en el que se parará el bucle y en incremento
la cantidad en la que aumenta (o disminuye) la variable índice. Veamos
un ejemplo:
var i = 0;
for (i=1; i<=10; i++)
document.write (“El número es: ” + i;
En este breve ejemplo la variable i empezará en un valor 1 y se irá

incrementando en cada iteración hasta llegar a 10. La última ejecución
del bucle devolverá un valor de i=10. Debemos darnos cuenta de
que en ningún momento aumentamos manualmente el valor de j, por
defecto y de uno en uno (eso es lo que indica i++) irá cambiando de
valor hasta 10.
Si queremos que la variable se incremente más:

var i;
Un símil muy gráfico for (i=1; i<=10; i+=2)
es el de una estantería,
{
que sería el array, y en la
que cada balda sería una document.write (“Este contador va de 2 en dos”);
variable, de manera que
}
podemos referirnos a
cada balda por la posición
O incluso podemos contar al revés:
que ocupa (primera,
segunda, etc.). var i;
for (i=1; i<=10; i—2)
document.write (“Este contador va hacia atrás”);
Una variante es for/in, su sintaxis es
for (variable in objeto)
donde objeto hace referencia o cualquier objeto formado por una

estructura que implique varios valores. Tradicionalmente un objeto
de este tipo son los arrays, aunque los veremos en profundidad más
adelante, baste con adelantar que son variables que contienen a su vez
más variables.
En relación al for/in lo que hacemos es recorrer toda la estructura,

desde la primera posición hasta la última, sin necesidad de tener que
indicar expresamente el número de veces que se ejecuta el for. Veamos
un ejemplo
// definimos un array de cinco posiciones
var estanteria = new Array (5);
// cargamos cada posición del array con un valor.
// fijaros en que la primera posición del array se nombra

como 0.
estanteria[0]=”uno”;
estanteria[1]=”dos”;
estanteria[2]=”tres”;
estanteria[3]=”cuatro”;
estanteria[4]=”cinco”;
var miVariable=1;

// el for se ejecutará cinco veces, desde la primera posición
a la última del array
for (miVariable in estanteria)
document.write(“el valor de la posición “ + miVariable +

“del array es: “ + estanteria[miVariable]);
4.4 Sentencia BREAK

La sentencia break sirve para detener la ejecución de un bucle. Su
sintaxis podemos verla utilizando uno de los ejemplos que hemos visto
ya:
var i;
for (i=1; i<=10; i+=1)
document.write (“Este contador va de 2 en dos”);
if (i==8)
{
Cuando el programa llega
break;
hasta ella abandona el
} bucle en el mismo punto
en el que está.
}
El bucle se ejecutará normalmente hasta que i sea igual a 8, en ese

momento se saldrá y no se ejecutará más veces.
4.5 Sentencia CONTINUE

La sentencia continue es similar a break salvo que en este caso no se
sale por completo del bucle, si no que esté donde esté situada la orden
manda la ejecución al principio del bucle sin ejecutar las líneas que
queden por debajo. Veamos un ejemplo:
var i;
var j=0;
for (i=1; i<=10; i+=1)
document.write (“Iteración número ” + i + “/br>);
if (i==8)

continue;
j=j+1;
document.write(“La variable j vale: “ + j + “/br”);
document.write(“La variable i vale : “ + i + “/br”);
4.6 Sentencia SWITCH

La sentencia switch se utiliza cuando nos encontramos ante distintas
posibles opciones. Si una variable puede llegarnos con varios valores
(más de dos, porque si fuese así utilizaríamos if) y necesitamos actuar
en función del valor que tenga entonces utilizaremos switch.
Su sintaxis es la siguiente:
var miVariable = “0”;
switch (miVariable)
case valor1:
Sentencias a ejecutar si miVariable=valor1;
break;
case valor2:
break;
case valor3:
break;
default:
Sentencias a ejecutar cuando miVariable tiene cualquier

otro valor distinto de los anteriores.
break;
Con el uso de break nos aseguramos que una vez que ha entrado en
una opción y ejecutado las instrucciones, abandona el switch.
Vemos ahora un ejemplo concreto:

estadoCivil =””; /* inicializamos como cadena vacía;
switch (estadoCivil)
case “soltero”:
document.write (“Su estado civil actualmente es: “ +

estadoCivil);
break;
case “casado”:

estadoCivil);
break;
case “divorciado”:

estadoCivil);
break;
case “viudo”:

estadoCivil);
break;
default:
document.write (“Estado civil incorrecto o no

contemplado”);
break;
5. FUNCIONES
5.1 Definición de funciones

Una definición formal puede ser: porción de código que se llama
desde el programa principal al que se le puede enviar algunos valores
(parámetros) y que una vez procesado devuelve un valor conocido
como resultado.
La sintaxis para definir un función será:
function nombreFuncion(parámetros)
Cuerpo de la función;

Como nombre de la función podemos emplear cualquier identificador
válido en JavaScript. Las mismas reglas para la definición de variables
Un ejemplo de función
son válidas para las funciones. No utilizar caracteres no alfanuméricos
podría ser el cálculo de
y no utilizar espacios en blanco son las dos reglas básicas que debemos
la letra del NIF. La letra recordar. Los parámetros no son obligatorios, puede definirse una
añadida al DNI se calcula función sin ellos. Podremos pasar parámetros de dos tipos:
haciendo una división
entera entre este número - Por valor: en este caso lo que se envía es una copia del dato. Este
y 23 (dividimos y nos dato no se ve modificado por la función.
quedamos con la parte - Por referencia: se aplica en el caso de tratar con objetos, se pasa
entera del resultado). una referencia (no el mismo objeto). En este caso puede ser
Esta operación nos dará modificado por la función.
un número entre 0 y
22, a estos números se
Las funciones son ampliamente utilizadas por todos los lenguajes de
les asigna por medio
programación. Son útiles sobre todo para encapsular aplicaciones
de una tabla la letra
que necesitamos utilizar a menudo, de manera que no sea necesario
correspondiente. Pues
repetir su codificación cada vez que requiramos su uso.
bien si necesito que el
usuario introduzca su
NIF y quiero verificar
que es correcto tendría
que utilizar un programa
5.2 Sentencia RETURN
que hiciese lo anterior.
Una vez que se han procesado las instrucciones si queremos que
Si tengo, además, que devuelva un valor utilizaremos la sentencia return. Veamos un ejemplo:
realizar esta verificación
en varios lugares de mi function miFuncion(parametro1)
web es más cómodo
{
agruparlo como una
función a la que se puede var variable1;
llamar varias veces y
var variable2=2;
desde cualquier sitio.
variable1 = variable2 + parametro1;
Dicha función recibirá return variable1;
como parámetro el
número de DNI y
devolverá un resultado, la }
letra correcta.
Esta función recibe un parámetro sumándole a la variable2, el resultado
lo guarda en la variable1 que es lo que devuelve al programa principal
por medio de return.
5.3 Propiedades de las funciones

- Las funciones pueden anidarse. Es decir, puedo tener una función
o varias, incluidas dentro de otra. Podemos necesitar dentro de una
función una función más.
- JavaScript no chequea el número de parámetros que se envían ni

los que son necesarios. Si no se envía uno, la función lo tomará

con el valor undefined. Los parámetros son optativos, tendremos
funciones en los que se utilizarán y otras en las que no.
- Hay que tener muy presente el ámbito de actuación y validez de

las variables. Aquellas que definamos dentro de una función solo
se podrán utilizar en ella. Si queremos que una variable pueda
ser utilizada en una o varias funciones, así como en el resto del
programa, habrá que declararla fuera de cualquier función.
- Permiten una mayor compartimentación de la dinámica del

programa aislando problemas, manteniéndolos encapsulados,
acudiendo a ellos tantas veces como sea necesario sin necesidad de
reescribir el código.
5.4 Funciones predefinidas del lenguaje de guion

JavaScript tiene una serie de funciones incorporadas y listas para
ser usadas. Son funciones muy utilizadas que de esta manera nos
evitan tener que programarlas por nosotros mismos:
- eval: convierte la cadena pasada en código JavaScript

ejecutable.
<script type=“text/javascript”>
var cadena = prompt(“Dígame que operación quiere hacer”);
var resulOper = eval(cadena);
alert (“El resultado es: “ + resulOper);
</script>
- isFinite: si el número que le pasamos como argumento es finito

devuelve verdadero, en caso contrario devuelve falso. Como
devuelve verdadero/falso, podemos utilizarlo en if.
if (isFinite(varNumero))
alert (“El valor pasado como argumento es finito”);
</script>
- isNaN: comprueba si el valor pasado es de tipo numérico, en

cuyo caso devuelve falso y verdadero su no es un número (is
Not a Number).

var numero1 = prompt(“Introduce un valor numérico: “);
if (isNaN(numero1)){
alert(“El valor dado no es un número.”);
else{
alert(“Muy bien, el valor dado es un número”);
</script>
- parseInt: transforma la cadena se le suministra en un número

entero, puede incluso pasársele la base en un segundo
argumento. Si no puede convertirlo devolverá un valor NAN.
var numeroDecimal = prompt(“Escribe un número decimal: “);
var numeroEntero = parseInt(numeroDecimal);
alert(“El valor de pasar por parseInt es: “ + numeroEntero);
</script>
- parseFloat: convierte la cadena que se le pasa a un número de tipo

coma flotante.
var numero = prompt(“Introduce un valor: “);
var numeroParseFloat = parseFloat(numeroParseFloat);
alert(“El valor después de pasar por parseFloat es: ” +

numeroParsefloat);
</script>
- escape: recibe una cadena de caracteres y devuelve la traducción a

código UNICODE. Veamos un ejemplo:
var cadena = prompt(“Escribe una cadena”);
var cadenaASCII = escape(cadena);
alert(“en ASCII: “ + cadenaASCII);
</script>

- Number: transforma el objeto que se le pasa en un número.
- String: convierte el objeto pasado a una cadena de caracteres.
var fecha = new Date();
alert (“El valor de la variable fecha sin pasar por string()

es: “ +fecha)
var fechaString = String(fecha);
alert(“El valor pasado por string() es: “+ fechaString);
Si recogemos este código y lo ejecutamos no vamos a apreciar ninguna

diferencia entre los dos alert, pero en realidad sí que la hay: en el
primer caso la variable es de tipo fecha, en el segundo es de tipo
carácter. Aunque tengan el mismo contenido serán tratadas de forma
distinta por las funciones y el resto de las variables.
5.5 Creación de funciones

La razón para crear funciones es la necesidad de repetir más o
menos a menudo una acción. De esta manera se crea una sola vez y
se llama las veces necesarias. Ahorra código y evita la proliferación
de errores. Asimismo también posibilita la transparencia a la hora
de leer o modificar en posibles evoluciones el código original. El
uso de funciones es parte de lo que se conoce como programación
estructurada.
Una función puede situarse en cualquier parte de la página web

siempre que esté, evidentemente, dentro de un bloque JavaScript.
Lo recomendable, por conseguir un código más elegante, es situar
las funciones al inicio, incluso dentro del <head> ya que de esta
manera se cargarán en memoria y estarán accesibles para el resto del
programa. También pueden estar en ficheros externos que tendrán que
ser llamados como ya hemos visto anteriormente. De hecho existen
librerías de funciones que nos facilitan mucho la tarea a la hora de
programar, convirtiéndose prácticamente en un nuevo lenguaje de
programación, hablamos de jquery, mootools, incluso para utilizar
Google Maps.
5.6 Particularidades de las funciones en el lenguaje de

guion
Las funciones podrán ser invocadas, llamadas, bien directamente o
como métodos. Directamente quiere decir que en cualquier línea
del código bastará con poner el nombre de la función para hacer la
llamada, incluso podremos asignar su valor de retorno a una variable
utilizarlo en operaciones:

var recogeValor = 0;
/* hacemos ahora la llamada a una función y volcamos el valor

en la variable */
recogeValor = nombreFuncion();
document.write (“El valor que devuelve la función es: “ +

recogeValor);
Este es un ejemplo de llamada a una función y posterior utilización

de su resultado. Hay que tener en cuenta que no todas las funciones
tienen por qué devolver un valor, igual que dentro de las funciones
podemos utilizar variables globales que pueden ser manejadas desde
cualquier parte del programa.
Otra forma de llamar a una función es mediante la invocación de un

método. Un método es una función de JavaScript establecida como
una propiedad de un objeto. En esta definición hay muchos conceptos
nuevos que realmente no nos adentraremos en ellos hasta temas
posteriores. En cualquier caso sí podemos dar una idea práctica de lo
que estamos hablando revisando un ejemplo utilizado ya profusamente.
Me refiero a document.write(). Nos hemos acostumbrado a utilizarlo,
sabiendo que lo que conseguimos con dicha instrucción es que aquello
que incluyamos entre los paréntesis se escriba en la pantalla. Vamos a
fijarnos en su estructura. Vemos que hay un paréntesis, como si fuese
una función, pues bien eso es exactamente lo que es con la salvedad
de que dicha función está asociada a document, que a su vez es un
objeto. De esta manera tenemos una función asociada a un objeto a la
que solo podremos llamarla como un método.
En general llamar a una función utilizando este sistema será:
nombreObjeto.nombreFunción();
Veremos más adelante que JavaScript tiene objetos muy importantes

de los que dependen múltiples métodos y que incluso podremos crear
nuestros propios objetos añadiéndoles los métodos o funciones que
necesitemos.
6. INSTRUCCIONES DE ENTRADA / SALIDA

Hasta ahora hemos usado sin explicar características del lenguaje
JavaScript que nos permiten recoger datos y mostrar resultados.
6.1 Descripción y funcionamiento de las instrucciones de

entrada y salida
En cualquier lenguaje de programación es básico que el usuario pueda
interactuar con el programa, tanto en un sentido como en otro. A esto

se le conoce como flujo de información entrada/salida y es utilizado en
cualquier programa que podamos imaginarnos.
Como decimos, prácticamente cualquier programa recogerá unos

datos (entrada) y tras su procesamiento emitirá unos resultados
(salida). Esta entrada/salida de datos puede realizarse por distintos
medios. Los más comunes son: leer de una base de datos, leer de un
fichero o bien recoger datos suministrados por el usuario a través del
teclado. Respecto a la primera opción, JavaScript, a priori, no está
preparado para conectar con bases de datos. La segunda opción si
es posible pero tampoco JavaScript (al menos la versión nativa) es un
lenguaje especialmente preparado para manejar ficheros ágilmente.
Respecto a la tercera opción es bastante común su uso, permitiendo
preguntar al usuario por unos datos que el mismo suministra
y posteriormente son tratados. Respecto a la salida tenemos
básicamente los mismos medios, siendo de nuevo la notificación en
pantalla lo más habitual.
Veremos además que JavaScript puede reescribir por completo

una página web, contando con un mecanismo para interactuar
directamente con la pantalla, es decir con el propio código HTML.
A. Lectura de teclado de datos

En cuanto a las peticiones de información al usuario, estas deben ser
claras e inequívocas, siendo también tarea del programador el validar
los datos que el usuario nos da. Si le estamos pidiendo que introduzca
su edad tendremos que, al menos, verificar que ha introducido un
número, incluso podemos asegurarnos que está comprendida entre 0
y 110, estando seguros de que incluimos la práctica totalidad de los
casos.
B. Almacenamiento en variables
Una vez que el usuario ha consignado aquello que se le pide, hay
que guardar el valor de alguna manera, y esto es utilizando variables.
Hay que tener en cuenta el hecho de que en JavaScript no se asigna
obligatoriamente un tipo de datos a sus variables, por lo que es muy
recomendable, después de validar, asignar cada valor en una variable
correctamente tipada.
Tendremos cuidado de darle un nombre apropiado y además asignarle

el tipo correcto. A priori esto nos puede parecer que no sirve para
nada ya que parecerá que todo funciona. Los problemas vendrán
cuando intentemos hacer ciertas operaciones con datos que no se
correspondan con lo que queremos hacer (por ejemplo, convertir en
entero algo que es una cadena de caracteres).
C. Impresión en pantalla del resultado

Veremos también que tendremos dos formas de mostrar los resultados
por pantalla: una es modificando el propio código HTML de la

página (como hemos dicho antes) y la otra por medio de una ventana
emergente.
En el primer caso la modificación del HTML repercute

drásticamente en la página, ya que lo que hacemos es enviar
una petición a través de la cual nuestro navegador reescribirá de
nuevo la página. Esto se debe al carácter de protocolo HTTP cuyo
funcionamiento se basa en el envío de peticiones y en el envío
de respuestas. La sentencia JavaScript que utilizaremos para esto
será document.write, que veremos específicamente un poco más
adelante.
Respecto a la otra forma de imprimir en pantalla el resultado será

utilizando la expresión alert, que hemos manejado anteriormente para
presentar resultados.
6.2 Sentencia PROMPT

Esta sentencia lo que hace es suministrar al usuario una caja de texto a
través de la cual él puede responder a las preguntas del programa.
Veamos un ejemplo:
<script language=”text/javascript”>
var recogeDato;
recogeDato= prompt(“¿Quién fue el autor de El ingenioso

Hidalgo Don Quijote de la Mancha?”);
</script>
Este ejemplo simple pregunta al usuario mostrando la siguiente caja de

texto:
El usuario contesta y su respuesta queda almacenada en la variable

recogeDato para su posterior tratamiento.
6.3 Sentencia DOCUMENT.WRITE

La mejor forma de ver cómo funciona es viendo un ejemplo. Si
ejecutamos el siguiente código:

<!DOCTYPE html>
<html>
<head>
<title>Funcionamiento document.write</title>
function llamaFuncion()
document.write(“Esto es lo que se escribe al

ejecutarse document.write”);
</script>
</head>
<body>
Vamos a ver cómo se comporta una página web utilizando

document.write
<form>
<input type=”button” value=”Pínchame”

onclick=”llamaFuncion()”>
</form>
</body>
</html>
En el que vemos que hay una llamada a una función vinculada a un

evento click. La función lo único que hace es ejecutar un document.
write. Antes de pulsar la página tiene este aspecto:
Cuando pinchamos en el botón la página cambia y tendrá este aspecto:

Como puede verse el formato cambia totalmente, adoptando la página
aquello que se ha introducido a través del document.write. La potencia
de este comando reside en que dentro de ella se puede introducir
cualquier tipo de código HTML, PHP, etc. reescribiendo la página con
los nuevos contenidos. Su utilización tenía como objetivo conseguir
cierto grado de interactividad con la página HTML, que no deja de ser
algo estático, siendo necesario para que su modificación la renovación
de la petición al servidor, pues bien esto, de una forma una tanto
pedestre es lo que se consigue con document.write. Su uso puede
convertirse en algo muy complejo y difícil de manejar descartándose
actualmente por técnicas mucho más evolucionadas como AJAX
(Asynchronous JavaScript And XML).
AJAX: Es una técnica desarrollada en principio por Microsoft cuyo

objetivo es conseguir aplicaciones web interactivas. Esta técnica
establece una comunicación asíncrona, lo cual quiere decir que una
vez cargada la página web y ante la necesidad de nuevos datos, se
comunica con el servidor para recoger estos enviándolos a la página
en un segundo plano de manera que no se altera el contenido de la
web. Esto se lleva a cabo utilizando el objeto XMLHttpRequest. En
temas avanzados de JavaScript podremos entrar a conocer su uso.

- Hemos aprendido como se declaran y usan las variables en
JavaScript.
- Hemos visto la importancia de los tipos de datos.
- Hemos visto cuales son los operadores que usa JavaScript.
- Aprendimos como se utilizan y la importancia capital de las

estructuras de control.
- Por último hemos manejado funciones e instrucciones de entrada y

salida.

Desarrollo de
scripts 4
• Herramientas de
1. HERRAMIENTAS DE DESARROLLO, desarrollo, utilización
UTILIZACIÓN • Depuración de errores:
errores de sintaxis y de
Cualquier lenguaje de programación necesita un entorno desde el ejecución
cual crear los programas. En el caso del desarrollo web necesitamos
un editor en que resulte cómodo escribir HTML, CSS y JavaScript, • Mensajes de error
ya que los tres lenguajes van de la mano y en general los tendremos
mezclados dentro de la misma página web.
OBJETIVOS:
Los requisitos deseables para estos editores son los siguientes:
- Conocer y aprender a
1. Que utilicen una gama de colores para diferenciar etiquetas, manejar programas para
selectores y propiedades. desarrollar scripts
2. Que cuando esté escribiendo el código sugiera posibilidades. De - Ser capaz de solucionar
esta manera evitamos tener que recordar al pie de la letra la sintaxis errores de sintaxis y
y sobre todo evitamos errores en el código. A esto se le conoce ejecución
como ayuda contextual.
- Familiarizarnos con los
3. Como último deseo podemos exigir que nos pueda ser útil además mensajes de error del
para desarrollar páginas más avanzadas, por ejemplo con CSS, lenguaje JavaScript
JavaScript, PHP, etc. Esta tercera exigencia se retroalimenta de las
- Desarrollar funciones para
dos anteriores, ya que podemos pedir, que cada lenguaje adopte
controlar los errores
un color y además que nos sugiera el código tanto si estamos
escribiendo HTML, como JavaScript e incluso PHP o Java. De
esta manera no tenemos que estar cambiando de editor según
trabajemos con uno u otro.
95
1.1 Crear scripts con herramientas de texto
Hagamos un repaso de herramientas partiendo de las más sencillas a
las más complejas.
Las más sencillos y elementales son el bloc de notas y los editores

de texto plano, en cuanto que no tiene formato.
Por encima de estos editores existen otros un poco más avanzados

entre los que destacamos notepad++, editor de código “libre” que
reemplaza al bloc de notas y compatible con varios lenguajes. Se
ejecuta en el entorno MS Windows y su uso se rige por la licencia
GPL. Equivalentemente en Linux tendremos gedit, scite o incluso
emacs.
Como se puede observar se juega con el doble significado de la

palabra free en inglés: gratis y libre. Pues bien notepad++ es ambas
cosas y además es un editor sencillo que cumple el primer requisito:
Vemos que asigna un color distinto en función del tipo de código. También por
medio de un sistema de plugins podemos hacer que nos sugiera la sintaxis.
Es un programa completo y muy sencillo, que cuenta con la ventaja

de que puede adaptarse a diversos lenguajes.
Otro tipo de editores HTML son aquellos que se nombran como

tales. En esta categoría podemos encuadrar soluciones de pago tipo
dreamweaver o alternativas gratuitas como BlueGriffon, bluefish
o Sublime Text2, disponibles para Windows, linux y MacOS X. Son
parecidos entre sí, sugieren el código según se escribe y utilizan
colores para diferenciar. Asimismo, permiten la estructuración del
código, algo muy útil.
Hasta ahora tan solo hemos hablado de utilizar estos programas

de una única forma, a través de su editor de código. Los primeros
tienen además otro modo de utilización que puede parecernos a
priori la solución más rápida y que menos esfuerzo nos exigirá.
Este modo de codificar HTML (o cualquier otro lenguaje) es
utilizando herramientas WYSIWYG es decir What You See Is
96 Tema 4 / Desarrollo de scripts

What You Get (en español, “lo que ves es lo que obtienes”). Esta
forma de crear páginas web es útil si solo utilizamos HTML, pero
cuando entra en juego JavaScript solo podemos teclear el código
directamente por lo que necesitaremos un programa que sea
cómodo de utilizar a la hora de escribir el código y ahí entran
de lleno las tres características deseables de las que hablamos
anteriormente.
Por último, dentro del software para elaborar webs, podemos

referirnos a lo que se conoce como IDE (Integrated development
enviroment, o en español entorno de desarrollo integrado). Es un
conjunto de programas que forma un entorno gráfico a través del
cual se facilita la tarea de programación. Este entorno puede ser
utilizado para un solo lenguaje o adaptarse para varios. Como ya
hemos dicho la programación de páginas web involucra una serie
de lenguajes, unos de programación y otros no, que tendrán que
ser utilizados simultáneamente para obtener páginas de calidad.
Será habitual encontrar páginas con HTML, CSS (hojas de estilo),
JavaScript e incluso PHP. Estos dos últimos sí son lenguajes
de programación y en cualquier caso desarrollando a un nivel
profesional es habitual que los programadores utilicen alguno de
estos IDE.
Dentro de esta categoría encontramos Eclipse. Este software es

de código abierto y multiplataforma, es decir, puede descargarse y
utilizarse libremente y funciona tanto en entorno Windows como
Linux o Apple.
Pensado inicialmente para Java y desarrollado originalmente por

IBM es utilizado ampliamente en el mundo de la programación con
diferentes lenguajes gracias a su sistema de plugins. Mediante estos
plugins podemos extender la funcionalidad del programa y generar
código en múltiples lenguajes. En concreto y en el ámbito que nos
interesa existe una adaptación de Eclipse pensada para el desarrollo
web llamada Aptana Studio. Este IDE nos ofrece un entorno
integrado y eficiente que cumple los tres requisitos que nos pusimos
anteriormente.
En el resto del manual utilizaremos Aptana y en ocasiones otros

editores más sencillos según sea uno u otro más conveniente.
1.2 Crear scripts con aplicaciones web

Existen páginas web que nos facilitan la edición de código on-
line. Este código no solo es JavaScript, sino que también permite
la edición de HTML y CSS. Su uso puede estar justificado por que
nos permite ver el efecto de las modificaciones sobre el código de
manera inmediata.
Un ejemplo básico es js.do. En este caso vemos la pantalla dividida

en dos, siendo la parte izquierda donde podemos insertar nuestro
código JavaScript, y dispone de un botón de ejecución que hace que
veamos el resultado en la parte derecha.

Otra web del mismo estilo es BDS, que tiene la misma estructura,
pudiendo añadir paneles para HTML, CSS y JavaScript. Un último
ejemplo es liveweave, similar a los anteriores, que permite editar
cualquier lenguaje.
Algunos de estos editores permiten, creando un usuario o

accediendo a una versión de pago, guardar proyectos, compartirlos
y mostrarlos a la comunidad, lo que transciende al trabajo solitario
del programador poniendo en contacto y permitiendo el uso
colaborativo del software. Un ejemplo de este tipo de webs es
codepen, que permite la edición online de HTML, CSS y JavaScript.
Por último hablar de Codio, que permite su uso limitado en versión

de prueba y que hay que contratar para su uso completo. Su
singularidad con respecto a los anteriores es que permite gestionar
de principio a fin un proyecto. Forma parte de lo que se conoce
como IDE basado en navegador (Browser-based IDE). Es una
solución interesante si queremos gestionar por completo nuestros
proyectos web en la nube.
Podemos ver el editor, tiene un aspecto totalmente equiparable al de un IDE instalado en

nuestro PC.

1.3 Recursos en web para la creación de scripts
A menudo Internet es un recurso más a la hora de buscar información.
Sin duda se ha convertido en el recurso más utilizado para hacerlo. De
la red obtenemos ayuda a través de foros o pistas sobre hacer aquello
que se nos plantea. Se ha convertido en la ayuda permanente cuando
dudamos como hacer algo. Además, también podemos utilizarlo como
repositorio, como almacén de scripts ya confeccionados y en muchos
casos probados. Estos scripts podemos adaptarlos a nuestro desarrollo,
en algunos casos con muy pocos retoques y en otros con profundas
revisiones, lo cual implica un conocimiento suficiente de JavaScript.
Vamos a repasar una serie de páginas de la que podemos extraer

scripts. Unas veces serán gratuitos y en otras ocasiones de pago.
A priori los que son de pago deben ser más fiables, pero no es
desdeñable la eficacia del trabajo colaborativo en el que se suma el
trabajo de múltiples usuarios programadores mejorando el producto
inicial.
Un primer ejemplo puede ser La web del programador (www.

lawebdelprogramador.com). Es un sitio en el que programadores
aficionados y profesionales pueden compartir conocimiento y
experiencias. No solo se restringe a JavaScript, ni siquiera a la
programación web. Podemos encontrar foros de consulta, descargar
código fuente, programas completos, manuales e incluso tiene una
zona de contacto donde buscar personas que puedan realizar un
trabajo o bien dónde encontrar nuestros propios trabajos.
Podemos apreciar en la parte superior los distintos apartados, y entre

ellos y dentro de Documentación y Recursos tenemos Código Fuente.
De aquí podemos descargarnos distintos scripts, pero como ya hemos
comentado, no solo de JavaScritp, si no de muchos otros lenguajes de
programación.

Otro ejemplo más es la web Hotscripts (www.hotscripts.com). En este
caso, si queremos alguno de los miles de scripts que hay tendremos
que pagar por muchos de ellos; otros en cambio son gratuitos y
descargables directamente.
Como podemos ver anuncia que tienen cerca de 50.000 recursos

en más de 1000 categorías. Entre ellas JavaScript ocupa un lugar
destacado con casi 4000 entre scripts, manuales, frameworks, etc.
Por último, otro del mismo estilo, esta vez en español, Hscripts (http://
es.hscripts.com/). Este sito está centrado en desarrollo web por lo que
no nos distraerán otros lenguajes.
Tiene secciones de HTML, CSS, JavaScript, etc. También dispone de

tutoriales, imágenes y todo ello gratuito.

2. DEPURACIÓN DE ERRORES: ERRORES DE
SINTAXIS Y DE EJECUCIÓN
En este apartado vamos a centrarnos en la manera de abordar la
corrección de errores cuando escribimos nuestro código. El cometer
errores es algo típico y habitual cuando estamos programando. La simple
omisión de un punto y coma o el escribir una función de JavaScript
con una mayúscula de más o de menos nos creará un problema que
deberemos ser capaces de detectar y corregir. Los errores en JavaScript
pueden ser difíciles de detectar, ya que sólo se manifiestan cuando
la página está en ejecución, mostrando frecuentemente tan solo
una página en blanco en la que no se informa de nada. Los lenguajes
compilados suelen llevar incorporados un debugger o depurador que
sirve para ejecutar el programa, digamos, en un modo de prueba. De esta
manera comprobamos si hay algún error y si el código hace aquello para
lo que ha sido escrito. Contiene herramientas que posibilitan la ejecución
línea a línea pudiendo ver qué ocurre en cada momento y detectar donde
se produce el error. En JavaScript habrá que recurrir a herramientas
externas que suplan a las que traen incorporadas cualquier compilador.
Estos añadidos por lo general podremos incorporarlos como plugin a los
navegadores, incluso en algunos de ellos ya los traen por defecto.
Para empezar vamos a hacer una clasificación de estos posibles errores

en el siguiente apartado.
2.1 Definición de los tipos de errores

Los tipos de errores que podemos encontrarnos en un lenguaje de script
pueden resumirse en:
- Errores de sintaxis: serán aquellos errores cometidos al escribir

el código. Se dan en aquellos casos en los que no hemos escrito
correctamente una instrucción. Por ejemplo: var = miVariable1
En la anterior línea de código no hay, aparentemente, nada complicado

ni nada erróneo. Sin embargo si se intenta ejecutar nos devuelve un
error. El punto y coma del final es imprescindible y un detalle tan a
priori insignificante nos puede llevar un buen rato encontrarlo.
- Errores de ejecución: dentro de esta categoría estarían aquellos errores

motivados por el uso de código fuente no estándar que provoque fallos
en aquellos navegadores que no reconocen dichas instrucciones. En
general serán todos aquellos errores que se producen cuando la página
esté ejecutándose.
- Errores lógicos: este tipo de errores también se producen durante la

ejecución, pero tienen su origen en la programación del código. Nos
referimos a errores que produzcan bucles infinitos, variables que no
son cargadas correctamente o bien aquello que se carga no es utilizable
posteriormente, provocando el mal funcionamiento del resto del
programa.

2.2 Escritura del programa fuente
A la hora de escribir el código fuente deberemos seguir una serie de
recomendaciones que minimizarán los errores y el tiempo que emplearemos
en corregirlos, así como la revisión y mantenimiento del programa:
1. Escribir comentarios: es imprescindible que se escriban comentarios que

expliquen qué se está haciendo. Lo que nos parece evidente y claro hoy
no lo es tanto dentro de un mes o un año.
2. Establecer un criterio para nombrar a las variables. Uno comúnmente

aceptado puede ser concatenar las palabras que describan la función
de la variable poniendo en mayúsculas cada inicio de palabra, salvo la
primera. Por ejemplo: nombreUsuario.
3. Con respecto a los nombres de las variables también es importante que

estos sean significativos. No es recomendable que sean del tipo variable1
o v3. En el momento en que se escriben sabemos perfectamente para
que son pero ¿y dentro de un tiempo? Sin duda nos preguntaremos ¿qué
era esto de v1?
4. Ser ordenado con el código, es decir, tabulando las líneas correctamente

cada una. Lo mejor es ver un ejemplo:
if (nombreUsuario == “Antonio”)
alert (“Hola Antonio”);
else
alert (“Tu nombre no es el de un usuario válido”);
Este sencillo trozo de código con un if y un else será mucho más claro y más
fácil de leer si en vez de poner todas las líneas al mismo nivel tabulamos:
De esta manera todo aquello que esté dentro del if se ve claramente

diferenciado de lo que está en el else.
if (nombreUsuario == “Antonio”)
alert (“Hola Antonio”);
else
alert (“Tu nombre no es el de un usuario válido”);

Repetimos, es un ejemplo sencillo, pero si vemos decenas de líneas
todas al mismo nivel sin orden alguno se convierte en un código difícil
de seguir y con el que es fácil equivocarse.
2.3 Compilación del programa fuente

En el caso de los
JavaScript es un lenguaje interpretado, lo cual quiere decir que no lenguajes de scripts
se compila. El proceso de compilación es aquel mediante el cual o interpretados su
se transforma el código fuente en lenguaje máquina entendible
ejecución se hace línea
directamente por la máquina. El resultado de este proceso es la
a línea en tiempo de
generación de un fichero ejecutable (en Windows son los conocidos
.exe). ejecución y no se crea
ningún fichero.
El siguiente esquema muestra claramente el trabajo que realiza un
compilador y los diferentes pasos por lo que atraviesa el código fuente
hasta que se transforma en un fichero ejecutable.
Si nos fijamos en el proceso que sigue vemos que pasa por diferentes
pasos. Por ejemplo, el analizador lexicográfico, el analizador sintáctico/
semántico, etc. Lo que nos aseguran estos pasos es que el código
está bien formado y es correcto, porque en caso contrario devolvería
un error parando el proceso. Es de estas herramientas de lo que
carecen los lenguajes interpretados como JavaScript, no siendo hasta
el momento de su puesta en funcionamiento cuando surgen los
errores sintácticos o semánticos no vistos anteriormente. Por ello se
hacen necesarias herramientas externas para poder solucionar estos
problemas.

2.4 Corrección de errores de sintaxis
Los errores de sintaxis aparecerán a menudo a pesar de que
conozcamos el lenguaje. Cuando se produce un error a menudo la
página que se muestra está en blanco. En la ejecución de un archivo
HTML en el que hay un error de sintaxis obtenemos el siguiente
resultado al intentar visualizarlo en Chrome v35.
La página está en blanco y solo obtenemos cierta información al

activar la consola de JavaScript. Debemos fijarnos en que se indica que
hay un error en la línea 14 (a la derecha) y el tipo de error Uncaught
ReferenceError: aler is not defined. El error es muy básico tan solo “he
olvidado” poner la t al final de la palabra aler. Pero ¿cómo obtenemos
esto? Veamos
Estamos saliéndonos del tema concreto de resolución de errores de

JavaScript, pero el motivo merece la pena, ya que el conocimiento
de cómo funcionan estas herramientas es vital y como vemos el
desarrollo web no se circunscribe únicamente al uso de un lenguaje si
no al conocimiento de una serie de técnicas que trabajan juntas.
Desplegando el menú de Chrome, accedemos al menú Herramientas

y de aquí a Herramientas para desarrolladores. La pantalla se divide
en dos, quedando la parte de abajo para estas herramientas, como la
Consola (que es lo que está abierto y que nos informa del error). Si
pinchamos sobre Elements vemos el código fuente estructurado y a la
derecha los estilos que se están utilizando:

Pero veamos esta misma herramienta empleada en una web más
compleja, por ejemplo la web de la editorial de estos manuales:

Destaquemos lo primero que tenemos acceso a todo el código.
Además, cuando marcamos una zona en el código, hay que fijarse en
la línea destacada y en que se señala, a su vez, en la propia web,
indicando que estamos en div.row, es decir en una capa (div) cuya
clase es row.
Vamos a fijarnos ahora en la siguiente imagen:
¿Qué diferencia hay con respecto a la inmediatamente anterior? La

diferencia es el fondo: la anterior el fondo simula un tableado gris que
Podemos ver y modificar en esta nueva imagen no está. Ahora la línea que está marcada es la
online el propio código que dice <div id=”DNN6”> y a la derecha se nos muestran sus estilos.
CSS para probar cambios
que evidentemente no Dentro de estos está background, apareciendo tachado, hemos
se quedan permanentes desmarcado el cuadro de selección que tiene a su izquierda,
hasta que no se produciendo instantáneamente el efecto de eliminar ese fichero como
modifique el fichero y se fondo.
suba al servidor Hemos visto las Herramientas para desarrolladores de Chrome, vamos
ahora a ver las que proporciona Firefox.
Para llegar a ellas seguiremos los siguientes pasos: desplegando el

menú vemos el icono de Herramientas para desarrolladores y de aquí
se despliegan todas las opciones disponibles.
Tenemos una consola, igual que en Chrome. El botón Inspector nos

proporciona algo muy parecido a lo visto anteriormente. Lo más
novedoso es el botón Depurador.
La palabra depurador invoca un concepto derivado de los lenguajes

compilados donde existe una herramienta de depuración del código,
pero estas herramientas son utilizadas para depurar errores de
ejecución.

Podemos verlas todas si hacemos click en Mostrar herramientas
2.5 Corrección de errores de ejecución

Partimos de una página en la que hay un menú vertical, de manera que
cuando se pulsa sobre alguna de las entradas se despliega dejando a la
vista el submenú. Está construido utilizando capas, CSS y por medio de
JavaScript se oculta o se visualiza la capa correspondiente. El evento
click provoca la ejecución de una función JavaScript que recoge el
número de la capa y visualiza el submenú correspondiente.

La herramienta me permite marcar un punto de la función (punto verde
al lado del número de línea que para marcarlo basta con pichar junto a
la línea) y averiguar el valor de las variables en ese momento.
Vemos el punto verde a la izquierda de la línea marcada y vemos a la

derecha que dentro de la función activar_capa, aparece la variable n, la
que buscamos, con el valor que toma en ese momento, en este caso 1
porque hemos pulsado sobre el primer ítem del menú. En la siguiente
imagen hemos pinchado sobre otra entrada del menú y vemos que el
valor de n ha cambiado.

Por medio de esta herramienta podemos monitorizar el valor de
las variables, sabiendo el valor con el llegan y con cual salen ya que
podemos marcar uno o varios puntos, obteniendo una información muy
valiosa para resolver este tipo de errores.
Hasta las últimas versiones de los navegadores estas herramientas

había que incluirlas por medio de plugin. Actualmente la mayoría de
los navegadores ya las traen siendo estas más o menos completas.
De todas maneras existen plugin que pueden ser acoplados
y utilizados. Uno de los más utilizados y comunes es Firebug,
instalable en Firefox. Al instalarlo aparece un menú (el que comienza
con la entrada Disable y un icono justo al lado del de página de
inicio). De forma general nos proporciona utilidades similares a las
que hemos visto hasta ahora.
3. MENSAJES DE ERROR
Cuando ocurre un error en JavaScript el navegador lanzará un error que
podrá ser consultado en la consola. Estos errores pueden ser tratados
y manejados de manera que podamos actuar en consecuencia. Muchos
lenguajes de programación, y JavaScript no es una excepción, tienen
algún tipo de sistema para controlar esos mensajes de error evitando
que se muestre al usuario un mensaje alarmante o una pantalla en
blanco. En la siguiente sección veremos cómo podemos hacer esto con
JavaScript

3.1 Funciones para controlar los errores
Las palabras reservadas son try y catch. Actúan juntas y entre ellas se
puede declarar cualquier tipo de código para ser ejecutado. Con try
y catch impedimos que el error se trate de manera predeterminada
consiguiendo incluso que el código siga ejecutándose obviando el
error.
El sistema que utiliza JavaScript consiste en agrupar una serie de

sentencias de las que pensamos que pueda producirse un error o que
en caso de que se produzca queramos controlarlo. Veamos cuál es su
sintaxis:
try {
//en este bloque de sentencias iría algo que puede producir

un error
catch(errorJS){
//cuando se produce el error ejecutamos este trozo de código
Aquello que está contenido en try se ejecuta siempre y solo en el

caso de que haya un error se ejecuta el bloque contenido en catch.
El sentido del parámetro que se pasa a catch, en el ejemplo errorJS, es

que en esa variable se guarda información sobre el error producido de
manera que por ejemplo podemos hacer lo siguiente:
try {
//sentencias que producen un error
}catch(errorJS){
alert(“Se ha producido el siguiente error: “ + errorJS)
La otra posibilidad es que nosotros mismos queramos lanzar un error

(en términos informáticos se conoce como lanzar una excepción).
Podremos hacerlo utilizando throw. Veamos un ejemplo en el que
evaluamos el valor de una variable y en función de este generamos un
mensaje de error o seguimos adelante:

var mayorQueCien=0;
mayorQueCien=prompt (“Introduzca un número mayor que 100”);
try
if (mayorQueCien < 100) throw “El valor que ha introducido

en menor que 100”;
if (isNaN(mayorQueCien)) throw “Solo se admiten números”;
catch(miError)
alert (miError);

- Hemos conocido como manejar programas para desarrollar scripts.
- Hemos conocido recursos en Internet útiles e imprescindibles.
- También hemos visto cómo solucionar errores por medio de las

herramientas que nos proporcionan los navegadores.
- Nos hemos familiarizado con los mensajes de error y hemos visto

cómo desarrollar funciones para controlarlos.

Gestión de objetos
del lenguaje 5
de guion
• Jerarquía de objetos
1. JERARQUÍA DE OBJETOS
• Propiedades y métodos
La jerarquía de objetos de JavaScript conocida como DOM (Document de los objetos del
Object Model) es la estructura en la que basa el lenguaje su acceso navegador
a los objetos que forman parte del navegador. Dicho de otra manera
es una interfaz a través de la cual se accede a las propiedades de los • Propiedades y métodos
navegadores, por lo que podemos decir que es una interfaz (API) que de los objetos del
nos permite interactuar dinámicamente con el contenido, estilo y documento
estructura de un documento. También es un estándar de la W3C, que • Propiedades y métodos
define como acceder a documentos HTML, XML, etc. Indirectamente ya de los objetos del
hemos utilizado el DOM: cuando escribimos document.write estamos formulario
accediendo al objeto document para realizar una acción: write. Lo
primero será entonces conocer de qué objetos estamos hablando y que • Propiedades y métodos
jerarquía se establece entre ellos. El objeto principal del que dependen de los objetos del
la mayoría es Window, directamente dependientes de él son frame, lenguaje
document, location y history. Dentro de document, a su vez tendremos
más objetos. Lo mejor es verlo en un gráfico (ver figura 1).
OBJETIVOS:
Siguiendo estas relaciones podremos hacer referencia (por ejemplo) a una
caja de texto de un formulario de la siguiente manera: window.document. - Conocer la estructura y
form.text. La sintaxis no es del todo exacta (ya concretaremos). Además, jerarquía de los objetos del
por regla general, se prescinde del objeto window ya que de él se derivan DOM
todos los demás. Fuera de jerarquía quedará el objeto navigator del que
- Conocer las propiedades y
dependen a su vez plugin y mimetype. Poco a poco a lo largo del tema
métodos de los objetos del
iremos concretando como se usa cada una de ellos.
navegador
Se utilizó por primera vez en el navegador Netscape 2.0. A esta
- Aprender las propiedades y
especificación se le conoce como DOM nivel 0. En 1998 la W3C, para
evitar las diferencias entre navegadores, emitió la especificación nivel
documento
1 en la que se contemplaba ya la manipulación de todos los elementos
HTML. En el 2000 se emitió el DOM nivel 2 en el que se incluía la - Conocer las propiedades y
manipulación de eventos del navegador y la interacción con las hojas métodos de los objetos del
de estilo. En 2004 se emite el DOM de nivel 3 en el que se contempla formulario
113
- Conocer las propiedades y
lenguaje
Figura 1
la definición de tipos de documento (DTD) y la validación de

documentos.
Por lo tanto, de esta definición más genérica y formal podemos

deducir que de lo que hemos empezado hablando en este apartado
y lo que será el objetivo de este manual es el DOM HMTL, a través
de cual y por medio de JavaScript tendremos acceso a todas las
propiedades de dichos documentos. De una manera más extensa
podíamos ampliar el material de este manual al uso del DOM en XML
pero como una primera aproximación al tema y teniendo en cuenta el
carácter introductorio del manual no entraremos en ello.
En la última especificación el DOM se divide en tres partes:
- Núcleo del DOM: es el estándar para cualquier documento. En él se

especifican las pautas para definir objetos, propiedades y métodos
para acceder a cualquier documento.
- XML DOM: es el estándar para documentos XML. Determina como

acceder a este tipo de documentos.
- HTML DOM: es el modelo estándar para HTML e igualmente define

como acceder a estos documentos.
114 Tema 5 / Gestión de objetos del lenguaje de guion

1.1 Descripción de objetos de la jerarquía
En una primera aproximación vemos que los objetos inmediatamente
dependientes de window son los ya mencionados:
- document, del que cuelgan todos aquellos objetos que tienen que
ver con la página web.
- frame, se refiere al marco, accedemos a él por su nombre.
- location, referida a la URL de la página actual.
- history, podremos acceder al historial de navegación.
Dentro de document vemos que tenemos los siguientes objetos (no

entramos a describirlos pormenorizadamente porque lo haremos en un
apartado posterior):
- layer.
- link.
- image.
- area.
- anchor.
- applet.
- plugin.
- form.
El único que tiene objetos dentro de él es este último. Repasando

todos aquellos que pueden formar parte de un formulario podemos
encontrar:
- textarea.
- text.
- fileUpload.
- password.
- hidden.
- submit.
- reset.
- radio.
- checkbox.
- button.
- select, que contiene un objeto más: option.

Dentro de cada objeto tendremos propiedades y métodos. Recordamos
que las propiedades son aquellas características que definen al objeto
(color, título). Un método, hablando sin entrar en demasiados detalles
teóricos, es una función propia del objeto a la que podemos enviar
parámetros (o no) y de la que recibiremos un resultado.
1.2 Propiedades compartidas de los objetos

Debemos tener en cuenta que los objetos que vamos a tratar
son objetos HTML, por lo que las propiedades a las que vamos a
tener acceso son las propias de los elementos HTML con los que
ya estamos familiarizados, y en concreto con las de formularios
(text, button, etc.). Debemos considerar la imagen anteriormente
expuesta como la de un árbol en la que cada etiqueta es un nodo.
Igualmente debemos tener en mente sus conexiones porque
a través de ellas podremos enlazar con las propiedades de los
objetos.
Propiedades comunes serán el color de fondo, el color de la letra y

en general todas las propiedades CSS de los elementos.
1.3 Navegar por la jerarquía de los objetos

Para navegar por los objetos del DOM deberemos hacerlo
siempre de forma ordenada, esto es, haciendo referencia al nodo
superior: document.write. El objeto que es prescindible escribir
explícitamente es window. Aun así disponemos de un método muy
potente y directo para acceder a cualquiera de las propiedades,
utilizando getElementById. Veamos cómo utilizar esta función:
supongamos que queremos acceder a las propiedades CSS de una
capa (div) de nuestra página web. Como podemos suponer por el
nombre de la función necesitamos que el elemento HTML tenga
definido un id
<div id=”miCapa”>
Podemos acceder a las propiedades de estilo de esta capa:
</div>
Para acceder a esto podemos incluir en siguiente código JavaScript:
var capa1 = document.getElementById(“miCapa”);
capa1.style.backgroundColor = “red”;
Declaramos una variable y “volcamos” en ella el objeto cuyo id es

miCapa. Ahora podemos acceder a las propiedades. Después de
style puede ir cualquier etiqueta CSS. Una sintaxis alternativa sería
prescindir de la variable y utilizar directamente
document.getElementeById(“miCapa”).style.backgroundColor=”red”;

El resultado sería el mismo, una capa con el fondo coloreado de rojo.
Habrá que tener cuidado
ya que las etiquetas
CSS pueden variar
ligeramente entre su uso
directo en código CSS o
en este modo.
Otras funciones para acceder a los elementos de la página son:
- getElementsByTagName: devuelve aquellos elementos que tenga un

determinado nombre de etiqueta. Ejemplos de etiqueta son body, li,
div, etc.
var miVariable = document.getElementsByTagName(“div”);
Esta línea seleccionaría todos los elementos div de la página. Como

puede recuperar varios, la variable en la que se almacene sería un
array cuyo contenido sería cada una de las etiquetas recuperadas.
- getElementsByName: en este caso se recuperan aquellos

elementos con el atributo name correspondiente, por lo demás su
funcionamiento es igual que el anterior.
Pero para entender completamente como funciona y que ventajas nos

proporciona el DOM debemos dar un paso más en la explicación. La
verdadera utilidad y potencia de Javascript en las páginas web es la
posibilidad de modificar dinámicamente el contenido de las mismas.
Por medio del DOM no solo podemos cambiar el estilo, podremos
también añadir o quitar elementos. Lo que nos proporciona el DOM es
una estructura jerárquica transformando cualquier página XHTML en
un árbol a través del cual nos podremos mover. De manera que si
tenemos la siguiente página web sencilla:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//

EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;

charset=iso-8859-1” />
<title>Ejemplo XHTML</title>
</head>
<body>
<p>Vamos a comprobar qué estructura “ve” el navegador

usando DOM</p>
</body>
</html>

El navegador interpreta esto y nos devuelve la siguiente estructura:
Otros tipos de nodos
que no se utilizan
habitualmente son
DocumentType,
CDataSection,
DocumentFragment,
Entity, EntityReference,
ProcessingInstruction y
Notation. Su uso será más
propio en documentos
XML.
De esta manera podremos movernos por este árbol para acceder y

modificar la página web. En toda página habrá un nodo raíz que será
Documento y de él salen nodos hijos de tipo Elemento que a su vez
pueden tener otros nodos hijo que a su vez pueden ser nodos padre.
De manera que podemos hablar de cinco tipos de nodos como los más
utilizados en documentos XHTML:
- Document: es el nodo raíz.
- Element: serán de este tipo cada una de las etiquetas del

documento. De él pueden derivar otros nodos y puede tener
atributos.
- Attr: representa los atributos de los elementos, habrá uno por cada
atributo.
- Text: contiene el texto de una etiqueta XHTML.
- Comment: contiene el comentario de una etiqueta XHTML.
También podremos crear y eliminar nuevos nodos. Para crear uno

nuevo bastará con utilizar alguna de las siguientes funciones:
- createElement (nombre).
- createTextNode (texto).
Se pueden crear nodos hijos:
- nodoPadre.appendChild(nodoHijo).
Para crear un nodo hijo no basta con declararlo, sino que hay que
seguir unos pasos para completar el proceso:
1. Creamos un nodo Element con el nombre del elemento nuevo.
2. Creamos un nodo Text con el contenido del elemento.

3. Se añade mediante appenChild el nodo Text como nodo hijo del
nodo Element.
4. Por último añadiremos el nodo Element como hijo de algún otro

elemento o de la página (document).
2. PROPIEDADES Y MÉTODOS DE LOS OBJETOS

DEL NAVEGADOR
En este apartado vamos a ver aquellas propiedades y métodos propios
de los objetos del navegador, es decir del objeto navigator y window.
2.1 El objeto superior Window

El objeto window representa a la ventana del navegador. Si tenemos
un navegador que maneje pestañas cada una de ellas será un objeto
window distinto. Podremos dimensionar, crear o borrar ventanas.
Tiene numerosos métodos y propiedades que iremos conociendo a lo
largo del epígrafe.
Propiedades:
- closed: devuelve un valor booleano indicando si la ventana está

cerrado o no.
- defaultStatus: establece o devuelve el estatus de la ventana.
- document: hace referencia al documento, es uno de los objetos

más importantes que veremos en detalle más adelante.
- frames: devuelve un array con todos los marcos (frames)

existentes en la ventana actual.
- history: devuelve el histórico de páginas mostradas en la ventana.

También se verá con detalle más adelante.
- innerHeight: nos da el alto interior de la ventana.
- innerWidth: devuelve el ancho interior de la ventana.
- length: devuelve el número de marcos, incluidos los iframes de la

ventana.
- location: devuelve el objeto location, el cual nos da información

sobre la dirección de la página en la que estamos.
- name: establece o devuelve el nombre de la ventana.
- navigator: nos devuelve el objeto navigator, más adelante en este

mismo epígrafe lo veremos más detalladamente.
- opener: cuando una ventana se abre esta propiedad nos devuelve

la referencia de la ventan original.

- outerHeight: devuelve la altura exterior de la ventana, incluyendo
barras de tareas y de deslizamiento (scrollbars).
- outerWidth: devuelve el ancho exterior de la ventana, incluyendo

barras de tareas y de deslizamiento (scrollbars).
- pageXOffset: nos devuelve o establecemos la coordenada x del

scroll.
- pageYOffset: nos devuelve o establecemos la coordenada y del

scroll.
- parent: devuelve la ventana padre de la actual.
- screen: devuelve el objeto pantalla.
- screenX: devuelve la coordenada x de la posición relativa de la

ventana respecto a la pantalla.
- screenY: devuelve la coordenada y de la posición relativa de la

ventana respecto a la pantalla.
- self: devuelve la pantalla actual.
- status: devuelve o establece el texto de la barra de estatus de la

ventana.
- top: devuelve si la ventana en la que estamos es la ventana tope

(la que contiene a todas las demás) o no.
Métodos:
- alert(mensaje): muestra una ventana de alerta con el mensaje que

pongamos y un botón Ok.
- atob(cadena): decodifica una cadena de caracteres de base-64 a

ascii.
- blur(): quita el foco de la ventana actual.
- btoa(cadena): codifica un string a base 64.
- clearInterval(identificador): limpia el timer (contador) creado con

setInterval().
- clearTimeout(identificador): limpia el timer establecido con un

setTimeout().
- close(): cierra la ventana actual.
- confirm(mensaje): muestra un cuadro de dialogo con un mensaje,

un Ok y un botón Cancelar.
- createPopup(): crea una ventana emergente.
- focus(): pone el foco en la ventana actual.
- moveBy(x,y): mueve una ventana tantos pixel como se indique

desde su posición actual.

- moveTo(x,y): mueve una ventana a una posición específica.
- open(): abre una nueva ventana del navegador.
- print(): imprime por la impresora el contenido de la actual ventana.
- prompt(mensaje, valor por defecto): muestra un cuadro de dialogo

que pide al usuario una respuesta.
- resizeBy(x,y): redimensiona la ventana según los pixel

especificados.
- resizeTo(x,y): establece unas dimensiones concretas a la ventana.
- scrollBy(x,y): se realiza un movimiento vertical y/o horizontal según

el número de pixel que se indiquen.
- scrollTo(x,y): establece una altura y una anchura determinadas a la

ventana.
- setInterval(función,milisegundos): es un método muy útil para

hacer animaciones con javascripts, llama a una función o evalúa
una expresión cada cierto intervalo especificado en milisegundos.
- setTimeout(función,milisegundos): llama a una función o

evalúa una expresión después de un número especificado de
milisegundos.
- stop(): para la carga de la ventana actual.
El uso de cualquier método es similar a lo que ya hemos visto, con la

salvedad de que al ser métodos del objeto window no es necesario
escribir, por ejemplo:
window.alert(“Hola que tal”);
Se sobreentiende que existe un objeto superior window el cual no

hace falta escribir explícitamente. Una cookie es una
pequeña cantidad de
texto almacenada por un
2.2 El objeto navigator sitio web en el navegador
del cliente, de manera
El objeto navigator es el que contiene toda la información sobre el que ese sitio web pueda
navegador. Sus propiedades y métodos son los siguientes: utilizarla para orientar o
Propiedades: mejorar la navegación por
su sitio cuando el usuario
- appCodeName: nos devuelve el nombre en código del navegador. vuelve. Como almacena
información en nuestro
- appName: devuelve el nombre del navegador.
equipo se pueden
- appVersion: no dice la versión del navegador. considerar una fuente
de instalación de código
- cookieEnabled: nos dice si la cookies están activas o no. malicioso, por lo que se
- language: devuelve el lenguaje del navegador. recomienda que solo se
acepten de aquellos sitios
- onLine: determina si el navegador está online. que puedan ser fiables.

- platform: nos informa del sistema operativo desde el que se está
ejecutando el navegador.
- product: devuelve el nombre de la máquina del navegador.
- userAgent: nos dice la información que el navegador envía al

servidor a través de la cabecera en cada comunicación. Contendrá
información sobre el nombre, la versión y el sistema operativo del
navegador.
Métodos:
- javaEnabled(): nos informa de si el navegador admite applet Java o

no (no confundir Java con Javascript).
2.3 URL actual (location)

El objeto location contiene información sobre la dirección actual
(URL). Forma parte del objeto window y se accede a través de la
propiedad window.location
Propiedades:
- hash: establece o devuelve la parte de la URL correspondiente a

un ancla interna de la página. Ejemplo: http://www.mipagina.com/
index.html#seccion3
- host: nos devuelve o establecemos el nombre del host y el puerto

de la URL. Por ejemplo de URL del ejemplo anterior el host es
www.mipagina.com.
- hostname: devuelve o estable el hostaname de una URL.
- href: establece o devuelve la URL completa.
- origin: devuelve el protocolo, el nombre del host y el número del

puerto de una URL.
- pathname: permite establecer o recuperar la ruta de la URL. Es

decir la ruta de la carpeta en la que está alojada la página en el
servidor.
- port: permite consultar el número de puerto en el que se realiza la

transferencia de la página, el habitual para conexiones http es el
80, para https 443.
- protocol: devuelve el protocolo de una URL (http, https, ftp).
- search: devuelve la cadena de caracteres de una búsqueda

dentro de la URL. Dentro de la URL generada por Google cuando
hacemos una consulta es todo aquello que está a la derecha del
signo de interrogación.
Métodos:
- assign(url): carga una nueva página.

- reload(): carga de nuevo una página.
- replace(url): reemplaza la página actual por una nueva.
2.4 URL visitada por el usuario

Utilizando las propiedades y métodos vistos en el apartado anterior
podemos controlar la página en la que está el usuario. También
podremos utilizar el objeto history, que nos sirve para controlar las
páginas visitadas desde el navegador. Sus propiedades y métodos
son:
Propiedades:
- length: devuelve el número de URLs contenidas en la lista de

history.
Métodos:
- back(): nos lleva a la página anterior de la lista.
- forward(): pasa a la página siguiente de la lista.
- go(): guarda una URL específica en la lista.
2.5 Contenido del documento actual (document)

El objeto document está operativo en cuanto se carga la página. A
partir de ese momento se pueden utilizar los métodos y propiedades
del documento. Este objeto es el nodo raíz de la página HTML.
Además document es hijo del objeto window como pudimos ver en el
gráfico.
En la práctica vamos a poder acceder a todos los elementos HTML

y a todas sus propiedades. En el DOM de HTML todo, cualquier
componente de la página es un nodo, de manera que el propio
documento lo es. Todos los elementos HTML son nodos, igual que
sus atributos y el texto contenido en ellos. Con esto lo que queremos
decir es que tenemos la posibilidad con este sistema de manipular
cualquier elemento o propiedad de la página, lo cual nos abre un
mundo de posibilidades enorme para modificar dinámicamente
nuestra página web.
A. Título, color del fondo, y formularios

A modo de ejemplo podemos ver cómo acceder a estos tres
elementos: el título de la página, el color de fondo y a cualquier
formulario.
Obtener información sobre el título e incluso modificarlo es sencillo

ya que hay un método que lo permite. Podemos utilizar document.
title para recuperar el valor del título o para cambiarlo. Veamos un
ejemplo:

<html>
<head>
<title>Manual de JavaScript</title>
</head>
<body>
<script>
alert (“El título de la página es: “ + document.

title);
</script>
</body>
</html>
La ejecución de este código nos muestra el título de nuestra página, en

este caso “Manual de JavaScript”.
Otra característica que podemos manipular es el color de fondo, pero

¿cómo lo haremos? El color de fondo es una propiedad que debemos
manipular utilizado CSS, por lo tanto la mejor manera es “capturando”
el elemento en cuestión por medio del potente getElementById.
Veamos un caso concreto en el que queremos modificar el color del
fondo del body:
<body id=”cuerpo”>
<div id=”miCapa”>
Podemos acceder a las propiedades de estilo de esta

capa
</div>
<script language=”javascript” type=”text/javascript”>
document.getElementById(“cuerpo”).style.
backgroundColor=”grey”;
</script>
</body>
Un tercer elemento en el que nos queremos detener son los

formularios. Estos elementos contienen a su vez otros elementos y eso
los hace especiales. El objeto document.forms devuelve un array con
todos los formularios de la página.

<body>
<form name=”formulario1”></form>
<form name=”formulario2”></form>
<script>
document.write(document.forms[0].name);
document.write(document.forms[1].name);
</script></p>
</body>
En este ejemplo accedemos a la propiedad name de cada uno de los

dos formularios. Como vemos accedemos a ellos como a los ítem de un
array donde la posición 0 la ocupa el primer formulario y la posición 1
el segundo.
También podríamos acceder a las propiedades de los formularios por

medio de su nombre:
document.forms[“formulario1”]...
Como resumen hay que destacar que la elección de estos tres objetos
nos muestra tres tipos distintos de elementos: el primero (title) es una
propiedad directa del objeto document, el segundo caso que hemos
visto ha sido como cambiar el color de fondo y hemos visto que se
accede seleccionando el elemento HTML y modificando su CSS a
través de la propiedad style. Por último hemos visto que dentro del
objeto document hay un nuevo objeto con sus métodos y propiedades
propios. De manera que debemos saber que podemos acceder de
diversas formas a las propiedades que queremos cambiar y que
deberemos conocer cómo hacerlo para cada caso.

DEL DOCUMENTO
Vamos ahora a enumerar todos las propiedades y métodos del objeto
document, probablemente el más utilizado y el más común.
3.1 Propiedades del objeto document

Sus propiedades son:
- document.anchors: devuelve la colección de todas las anclas (<a>)

del documento.
- document.baseURI: devuelve la URI absoluta del documento.
- document.body: devuelve el elemento body del documento.

- document.cookie: devuelve los datos de las cookies asociadas al
documento.
- document.doctype: devuelve el tipo de documento asociado

(HTML, XML).
- document.documentElement: devuelve el elemento HTML del

documento.
- document.documentURI: devuelve o establece la dirección

completa del documento.
- document.domain: Devuelve el nombre de dominio del servidor que

ha cargado el documento.
- document.forms: devuelve la colección de formularios del

documento.
- document.head: devuelve el elemento head del documento.
- document.images: devuelve la colección de imágenes del

documento.
- document.implementation: devuelve la implementación del DOM

que utiliza el documento.
- document.inputEncoding: devuelve el tipo de codificación de

caracteres que se utiliza.
- document.lastModified: devuelve la hora y la fecha de la última

modificación.
- document.links: devuelve una colección de los links de la página.
- document.readyState: devuelve el estado de carga del documento.
- document.referrer: devuelve la URL del documento que ha cargado

el cargado el documento actual.
- document.scripts: devuelve la colección de scripts del documento.
- document.title: establece o devuelve el título del documento.
- document.URL: devuelve la URL completa del documento.
3.2 Ejemplos de propiedades de document

En esta sección vamos a reunir una serie de ejemplos sobre las
propiedades de document que si bien no podrá haber un caso para
cada una de ellas sí nos sirva como referencia y apoyo para poder
utilizar el resto.
Ejemplo 1:
El primer ejemplo es con document.anchors:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
<head>

charset=utf-8” />
<script>
function cuentaEnlaces()
alert(“El número de Enlaces es: “ + document.anchors.

length);
</script>
</head>
<body>
<a name=”uno”>Modulo 1</a><br>
<a name=”dos”>Modulo 2</a><br>
<button onclick=”cuentaEnlaces()”>Pulsa para saber cuantos

enlaces tiene el documento</button>
</body>
</html>
Vemos que captura el número de enlaces para después poder

mostrarlo.
Ejemplo 2:
<head>

charset=utf-8” />
<title>HTML</title>
<meta name=”author” content=”carlos” />
<script>
function muestraCookies()

{
alert (“Esta es la información sobre las cookies: “ +

document.cookie);
</script>
</head>
<body>
<button onclick=”muestraCookies()”>Pulsa para ver la

información sobre las cookies de la página</button>
</body>
</html>
Este ejemplo nos mostraría las cookies activas en la página.

Evidentemente en una página tan básica no hay cookies por lo que el
código tal y como está creado no devolvería ningún valor.
Ejemplo3:
<head>

charset=utf-8” />
<title>HTML</title>
<meta name=”author” content=”carlos” />
<script>
function muestraDatos()
alert (“Esta es el título de la página: “ + document.

title + “ esta su URL: “ + document.URL + “ y su última
modificación ha sido: “ + document.lastModified);
</script>
</head>
<body>
<button onclick=”muestraDatos()”>Pulsa para ver algunos

datos</button>
</body>
</html>

El resultado de esta página se puede ver en la siguiente imagen:
3.3 Métodos de document

El objeto document tiene una serie de métodos que vamos a ver a
continuación:
- document.addEventListener(): cada vez que se produce un evento

llama a una función.
- document.close(): cierra un elemento previamente abierto con un

método open.
- document.createAttribute(): crea un nuevo nodo (elemento HTML).
- document.createComment(): crea un nodo de comentario con el

texto especificado.
- document.createDocumentFragment(): crea un nodo vacío nuevo o

lo modifica
- document.createElement() : crea un elemento nuevo (un nodo).
- document.createTextNode(): crea un nodo de texto nuevo.
- document.getElementById(): ya le hemos usado y explicado, recoge

el elemento cuyo id se indica.
- document.getElementsByName(): igual que el anterior pero por

nombre.
- document.getElementsByTagName(): igual que el anterior pero por

el nombre de la etiqueta.
- document.importNode(): importa un nodo de otro documento,

normalmente de un iframe contenido en nuestra página.
- document.normalize(): borra los nodos de texto vacíos y une los

nodos adyacentes.
- document.open(): abre un documento HTML por medio de un

document.write.
- document.removeEventListener(): borra el manejador de evento

creado con un método addEventListener().
- document.renameNode(): renombra el nodo especificado.

- document.write(): permite escribir HTML, JavaScript o cualquier
texto.
- document.writeln(): igual que write pero añade una línea al final.
A continuación vamos a ver algunos ejemplos de uso de los métodos

que hemos visto:
Ejemplo1:
document.addEventListener(“click”, function(){
document.alert(“Has hecho click sobre algún elemento”);
});
En este caso tenemos addeventListener su uso es sencillo y basta con

incluir esto en una sección de código o en un función. Con el trozo
de código que vemos cada vez que se pulse sobre un elemento se
disparará y saldrá una ventana de alert con el mensaje que se ve.
Ejemplo 2:
<head>

charset=utf-8” />
<style type=”text/css”>
.clasePrueba{
color:blue;
</style>
<script>
function cambiaTitulo()
var titulo=document.getElementsByTagName(“H1”)[0];
var atributo=document.createAttribute(“class”);
atributo.value=”clasePrueba”;
titulo.setAttributeNode(atributo);
</script>
</head>
<body>

<h1>Vamos a cambiar este título</h1>
<button onclick=”cambiaTitulo()”>Poner azul el botón</button>
</body>
</html>
Este es un ejemplo de uso de createAtribute, aunque aparecen otros

métodos. Es un ejemplo completo operativo que lo que hace es recoger
un elemento (h1) al que asocia una clase. Cuando el usuario pulsa el
botón llama a la función que desencadena todo.
Ejemplo 3:
<head>

charset=utf-8” />
</head>
<body>
<ul><li>html</li><li>css</li></ul>
<button onclick=”cambiaLi()”>Pulsa para cambiar</button>
<script type=”text/Javascript”>
function cambiaLi()
var cambia=document.createDocumentFragment();
cambia.appendChild(document.getElementsByTagName(“li”)[0]);
cambia.childNodes[0].childNodes[0].nodeValue=”Javascript”;
document.getElementsByTagName(“ul”)[0].appendChild(cambia);
</script>
</body>
</html>
Este es un ejemplo de createDocumentFragment. Vemos como captura

el elemento y modifica una de sus características.

3.4 Flujo de escritura del documento
Se define el flujo de escritura del documento como el proceso
durante el cual el navegador escribe (carga) la página. El navegador
va leyendo e interpretando el código para posteriormente
escribirlo. Para que esto pueda ocurrir el flujo del documento debe
estar abierto, y permanecerá abierto hasta que la carga total de
la página se lleva a cabo. Cuando se ha cerrado el flujo (página
cargada) ya no se puede modificar el contenido de la página web.
En JavaScript el método document.write() abre un flujo nuevo.

De ahí que cuando lo ejecutamos se modifica por completo el
contenido de la página. Si ejecutamos un script mientras se carga
la página podremos ejecutar document.write(). Es cuando lo
ejecutamos como respuesta a un evento cuando ocurre lo que se
ha señalado anteriormente.
Este es uno de los problemas importantes a los que se enfrenta

un programador web: las páginas por definición (y una vez
que se cargan) son estáticas, por lo que es un problema cargar
contenido nuevo, por ejemplo como respuesta a un evento o a
una selección de un elemento de formulario como puede ser una
caja de selección. En principio solo puede hacerse si volvemos
a abrir el flujo de escritura y se reescribe la página, pero solo en
principio porque hay una tecnología que nos permite interactuar
añadiendo o modificando contenidos y se le conoce como AJAX
(Asynchronous JavaScript And XML). Esta tecnología se ejecuta en
el cliente pero permite mantener una comunicación asíncrona (que
no está sincronizado en el sentido de que no se conecta con el
servidor a la vez que las peticiones del navegador) con el servidor
de manera que puede pedir datos y escribirlos en la página cuando
ya está cargada. Esto se puede realizar con JavaScript usando el
objeto XMLHttpRequest que es el que se encarga del acceso a los
datos.
Un ejemplo simple de como funciona el flujo de escritura se puede

hacer con el código que se muestra más abajo incrustado en una
página HTML simple:
<script>
function writePagina()
document.write(“Esto sustituye a todo lo que hubiese

en la página”);
</script>
<button onclick=”writePagina()”>pulsa para ejecutar un

write</button>

3.5 Métodos open() y close() de document
Los métodos open() y close() del objeto document nos van a ser útiles
para controlar el flujo del documento. El ejemplo de la sección puede
ser reescrito usando estos dos métodos:
<script type=”text/Javascript”>
function writePagina(){
document.open()
window.document.write(“Esto sustituye a todo lo que

hubiese en la página”)
document.close()
</script>
De esta manera queda más explícito el flujo de escritura del

documento, se abre primero y al final se cierra.
Vamos a ver otro ejemplo:
Ejemplo 4:
<head>

charset=utf-8” />
</head>
<body>
<button onclick=”abre()”>pulsa para abrir una página</button>
<script>
function abre()
var pagina=document.open(“text/html”,”replace”);
var nuevo=”<html><body>Esta página es nueva y la creamos

así</body></html>”;
pagina.write(nuevo);
pagina.close();
</script>
</body>
</html>

En este otro ejemplo vemos que con un open vamos a reemplazar la
página existente y que después le pasamos con el write el contenido de
la nueva. El valor replace es opcional. Este ejemplo es más completo y
muestra cuales son las posibilidades si combinamos estos tres métodos
del objeto document: open, close y write.

DEL FORMULARIO
Los formularios son elementos HTML muy utilizados que nos van a servir
para recoger información del usuario. Desde JavaScript podemos acceder
a ellos utilizando un objeto, sus métodos y propiedades. Este objeto form
depende de document y a su vez de él van a depender otros métodos
que representarán los distintos elementos. En las siguientes secciones
vamos a profundizar en sus propiedades y en sus métodos.
4.1 Propiedades principales del objeto form (Name,

action,method, target)
Las propiedades principales son:
- acceptCharset: establece o devuelve el conjunto de caracteres usado

en el formulario.
- action: marca cual será la página destino cuando se envíe el formulario.
- autocomplete: se pone activa la opción de autocompletar.
- encoding: equivalente a enctype.
- enctype: devuelve el valor del atributo enctype.
- length: devuelve el número de elementos del formulario.
- method: determina si el formulario se envía con un método post o get.
- name: establece el nombre del formulario.
- noValidate: indica si el formulario debe validarse o no cuando se envía.
- target: establece el valor del atributo, las posibilidades son las mismas
que en html, _blank, _self, _parent, etc.
4.2 Métodos del objeto form (submit, reset, get, post)

Los métodos son tan solo dos:
- reset(): resetea todos los valores del formulario y lo deja en blanco.

- submit(): envía el formulario con los datos que se han recogido a la
página destino.
Los datos de un formulario se pueden enviar por medio de un método

post o get. Vamos a ver que significa esto:
- GET: usando GET tan solo podemos enviar hasta 500 bytes a
la página de destino y además no permite el envío de archivos
adjuntos. Otra característica importante es que los datos que se
transmiten aparecen formando parte de la URL de destino. Si nos
fijamos en la dirección que se forma cuando buscamos algo en
Google podremos ver un claro ejemplo de formulario enviado a
través de un método GET.
Los datos rellenados en el formulario, en este caso las palabras de

nuestra búsqueda, aparecen formando parte de la URL.
- POST: cuando utilizamos es método post los datos enviados no se

ven en la URL por lo que para formularios con datos personales o
sensibles es una buena idea su uso. Por regla general utilizaremos
post cuando queremos enviar una cantidad grande de información o
bien su destino es modificar o incorporarse a una base de datos.

DEL LENGUAJE
5.1 Document (escribir texto, color fuente, color fondo,

obtener elementos del documento actual HTML, título de
la página)
Del objeto document destacamos:
- write: sirve para escribir texto. Recordar que hay que tener en
cuenta que cuando lo ejecutamos se inicia de nuevo el flujo, lo que
conlleva que la página se escribe de nuevo.

- Color de la fuente: para cambiar el color de la fuente lo mejor es
acceder dinámicamente a las propiedades CSS. Veamos un ejemplo:
<div id=”capa1”>Quiero cambiar el color de fuente en esta

capa</div>
<form>
<input type=”button” onclick=”cambiaColor()” value=”pulsa

para cambiar el color de la letra”>
</form>
<script language=”javascript” type=”text/javascript”>
function cambiaColor()
document.getElementById(“capa1”).style.color=”blue”;
</script>
Con este ejemplo vemos como captamos el elemento div por su id y a

continuación seguimos bajando por la estructura del DOM hasta llegar
al color del texto.
- Color de fondo: el cambio de color de fondo se hace exactamente

igual, tan solo cambiando el elemento CSS. Lo mismo se puede
hacer con el resto de etiquetas CSS.
document.getElementById(“capa1”).style.backGroundColor=”blue”;ç
- Para cambiar el título de la página bastará con acceder a la

propiedad:
document.title=”Mi título”;
5.2 Window (open)

Otro método muy habitual es el necesario para abrir una página nueva,
podemos hacerlo con window.open(). Vamos a ver que parámetros se
pueden utilizar:
- URL: se indica la dirección que se quiere abrir. Si no se especifica

ninguna se abre una en blanco.
- name: también es opcional. Especifica el nombre de la ventana

nueva. Admite los siguientes valores:
- _blank (nueva ventana, es la opción por defecto).
- _parent (se abre en el marco padre).
- _self (reemplaza la página actual)

- _top (reemplaza a cualquier conjunto de frames).
- name (se refiere el nombre de la ventana)
- specs: es opcional, se declaran una serie de ítems separados por

comas. Los siguientes valores son válidos:
- channelmode=yes, no,1 o 0. Muestra la pantalla en modo teatro,

por defecto toma el valor no. Solo funciona en Internet Explorer
(por ahora).
- fullscreen=yes, no, 1 o 0. Muestra la pantalla en modo completo,

el valor por defecto es no.
- height=pixels. Determina el alto de la ventana, el valor mínimo es

100.
- left=pixels. Determina el ancho de la ventana.
- location=yes, no, 1 o 0. Muestra o no el campo de dirección.

Solo para Opera.
- menubar=yes, no, 1 o 0. Muestra o no la barra de menú.
- resizable=yes, no, 1 o 0. Permite que se cambie el tamaño de la

ventana o no.
- scrollbars=yes, no, 1 o 0. Muestra o no las barras de

desplazamiento.
- status=yes, no, 1 o 0. Muestra o no la barra de estado.
- titlebar=yes, no, 1 o 0. Muestra o no la barra del título.
- toolbar=yes, no, 1 o 0. Muestra o no la barra de herramientas.
- top=pixels. Indica la posición superior de la ventana.
- width=pixels. Indica la posición inferior de la ventana. El valor

mínimo son 100 pixels.
- Replace: es opcional, la nueva URL reemplaza a la anterior en la lista

de histórico. Puede utilizar los siguientes valores
- true – se reemplaza el valor.
- false – se crea uno nuevo.
5.3 History (go)

Es la lista de páginas visitadas. Tendrá una propiedad y tres métodos.
Propiedad:
- length: devuelve el número de entradas en el histórico.
Métodos:

- back(): carga la URL anterior de la lista.
- forward(): carga la URL posterior de la lista.
- go(): carga una URL específica.
5.4 Location (servidor)

Contiene la información relativa a la URL. Tiene las siguientes
propiedades que repasamos brevemente:
- hash: establece o devuelve la parte de la URL correspondiente a

un ancla interna de la página. Ejemplo: http://www.mipagina.com/
index.html#seccion3
- host: nos devuelve o establecemos el nombre del host y el puerto

de la URL. Por ejemplo de URL del ejemplo anterior el host es www.
mipagina.com.
- hostname: devuelve o estable el hostaname de una URL.
- href: establece o devuelve la URL completa.
- origin: devuelve el protocolo, el nombre del host y el número del

puerto de una URL.
- pathname: permite establecer o recuperar la ruta de la URL. Es decir

la ruta de la carpeta en la que está alojada la página en el servidor.
- port: permite consultar el número de puerto en el que se realiza la

transferencia de la página, el habitual para conexiones http es el 80,
para https 443.
- protocol: devuelve el protocolo de una URL (http, https, ftp).
- search: devuelve la cadena de caracteres de una búsqueda dentro

de la URL. Dentro de la URL generada por google cuando hacemos
una consulta es todo aquello que está a la derecha del signo de
interrogación: https://www.google.es/search?q=javascript
Y los métodos:
- assign(url): carga una nueva página.
- reload(): carga de nuevo una página.
- replace(url): reemplaza la página actual por una nueva.
5.5 Navigator (nombre, versión y detalles del navegador)

El objeto navigator es el que contiene toda la información sobre el
navegador. Sus propiedades y métodos son los siguientes:
Propiedades:

- appCodeName: nos devuelve el nombre en código del navegador.
- appName: devuelve el nombre del navegador.
- appVersion: no dice la versión del navegador.
- cookieEnabled: nos dice si la cookies están activas o no.
- language: devuelve el lenguaje del navegador.
- onLine: determina si el navegador está online.
- platform: nos informa del sistema operativo desde el que se está

ejecutando el navegador.
- product: devuelve el nombre de la máquina del navegador.
- userAgent: nos dice la información que el navegador envía al

servidor a través de la cabecera en cada comunicación. Contendrá
información sobre el nombre, la versión y el sistema operativo del
navegador.
Métodos:
- javaEnabled(): nos informa de si el navegador admite applet Java o

no (no confundir Java con Javascript).

- Hemos aprendido cual es la estructura y jerarquía de los objetos del
DOM de Javascript.
- Hemos repasado las propiedades y métodos de los objetos del

navegador.
- También hemos aprendido a utilizar las propiedades y métodos de

los objetos del documento y del formulario.
- Por último hemos aprendido a usar las propiedades y métodos de

los objetos del lenguaje.

Los eventos del

lenguaje de guion 6
• Utilización de eventos
1. UTILIZACIÓN DE EVENTOS
• Eventos en elementos de
Dado el carácter estático inherente a las páginas HTML formulario
los eventos serán el medio por el que los usuarios podrán
interaccionar con la web. Por medio de un click o de pasar el • Eventos de ratón. Eventos
puntero del ratón sobre una zona, por mencionar alguno, el de teclado
usuario recibirá una respuesta. • Eventos de enfoque
• Eventos de formulario
1.1 Definición de eventos • Eventos de ventana
Por evento entendemos todo aquello que puede ser detectado y • Otros eventos
que pueda producir una reacción. Lo que podemos hacer con el
ratón es pulsar sobre algún elemento, pulsar dos veces o desplazar
el ratón sobre una zona. También podemos convertir en eventos OBJETIVOS:
los distintos comportamientos que se producen en los formularios:
- Conocer y utilizar los eventos
hablamos de entrar en un elemento o abandonarlo, desplegar una
disponibles
lista, pasar el foco o retirarlo. De todos ellos hablaremos en este
tema desde el punto de vista de su utilización y aprovechamiento - Conocer su jerarquía
por JavaScript.
- Manejar los eventos de todo
Podemos establecer una clasificación de eventos de la siguiente tipo: de teclado, de ratón, de
manera: formulario, etc.
- Eventos de usuario:
- Eventos del ratón.
- Eventos del teclado.
- Eventos del navegador:
- Manipulación de las ventanas del navegador, comunicación con

el servidor, etc.
141
- Eventos generados desde código:
Un evento suele - A consecuencia de cambios en el contenido, aspecto o
desencadenar una estructura.
llamada a una función,
de manera que aquellas - Especificación DOM.
acciones que queremos Iremos desgranando los distintos tipos de eventos en función de cómo
que se produzcan queden se producen o en qué elemento.
recogidas dentro de
una porción de código
identificable y localizable
1.2 Acciones asociadas a los eventos
fácilmente.
Una vez que se ha desencadenado el evento necesitaremos tratarlo.
Para ello tendremos un manejador, esto es un fragmento de código,
que habitualmente toma la forma de función y que se ejecuta para dar
respuesta a la ocurrencia del evento.
1.3 Jerarquía de los eventos desde el objeto Window

Los eventos están asociados a un objeto, es decir, el evento se
produce porque sobre un objeto se produce alguna acción, por lo
tanto están íntimamente ligados a la jerarquía. Muchos de ellos están
vinculados al objeto document, como onload que se produce cuando
la página se carga. La mayoría de los eventos pueden asociarse
a múltiples elementos, todos ellos HTML y que en consecuencia
dependen del objeto document. Por otro lado están los eventos
vinculados a formularios como onsubmit.
Si hacemos un repaso vemos que habrá eventos vinculados a window,

document, forms y navigator. De todas maneras habrá eventos
que funcionarán en cualquier objeto de la jerarquía, por lo que es
importante saber dónde podemos utilizar cada uno de ellos.
2. EVENTOS EN ELEMENTOS DE FORMULARIO

Son aquellos que se producen durante el uso de campos de
formulario como cajas de texto, listas desplegables, etc. Se producen
cuando un elemento recibe el foco, lo pierde o se cambia el
contenido.
2.1 Onselect (al seleccionar un elemento de un formulario)

Se produce cuando se selecciona texto en un campo. El evento se
dispara en el momento de la selección. Ejemplo:
142 Tema 6 / Los eventos del lenguaje de guion

<form>
Nombre: <input type=”text” onselect =”miFuncion()”>
</form>
<script>
alert(“Ha seleccionado todo el texto, si pulsa el

botón derecho podrá copiar/cortar”)
</script>
2.2 Onchange (al cambiar el estado de un elemento del

formulario)
Se produce cuando se cambia algo en un elemento de formulario, el
cambio no se produce efectivamente hasta que el elemento pierde el
foco. Ejemplo:
<form>
Nombre: <input type=”text” onchange =”miFuncion()”>
</form>
<script>
alert(“Ha modificado el contenido de la caja de

texto. Verifique que es correcto.”)
</script>
3. EVENTOS DE RATÓN. EVENTOS DE TECLADO
3.1 Eventos de ratón

En esta sección
A. Onmousedown (al pulsar sobre un elemento de la página) agrupamos el núcleo más
numeroso de eventos,
Se produce cuando se pulsa un botón del ratón, y antes de soltarlo de los que tienen que ver el
nuevo. Se puede utilizar en cualquier elemento. Ejemplo: ratón y con el teclado

<div onmousedown =”miFuncion()”>Pulsa sobre esta capa</div>
<script>
alert(“El evento se dispara antes de levantar el dedo

del botón pulsado”)
</script>
B. Onmousemove (al mover el ratón por la página)

Se produce cuando se mueve el puntero del ratón por un elemento de
la página. Se dispara en el mismo instante en el que el ratón entra en el
elemento y empieza a desplazarse por él.
<head>

charset=utf-8” />
<title>HTML</title>
div{
position:absolute;
left:10%;
top: 20%;
width: 500px;
height: 500px:;
</style>
</head>
<body>
<div onmousemove =”miFuncion(event)” id=”miCapa”>Pasa el

ratón por encima y podrá ver la posición en la que está</div>
<form>
<input type=”label” value=”“ id=”miLabel”>

</form>
<script>
function miFuncion(event)
var coordX=event.clientX;
var coordY=event.clientY;
document.getElementById(“miLabel”).value=”Las
coordenas del puntero son: “ + coordX +” , “ + coordY;
</script>
</body>
</html>
Este es un ejemplo algo más completo que además utiliza algo nuevo
que no hemos visto hasta ahora, el objeto event. Este objeto nos El objeto event solo
permite recibir propiedades del evento, el elemento en el que ocurre,
está disponible durante
el estado de las teclas, la posición del ratón y el estado de los botones
el tiempo que dura el
del ratón. Sus propiedades nos pueden ser útiles por lo que las
detallamos a continuación: evento, por lo que se
puede utilizar con el
- altKey: devuelve si se ha pulsado o no la tecla ALT. manejador del propio
evento y solo ahí, en
- button: nos indica que botón del ratón se ha pulsado.
cualquier otra zona de
- clientX: nos devuelve la coordenada X del puntero del ratón. código no funcionará.
- clientY: nos devuelve la coordenada Y del puntero del ratón.
- ctrlKey: devuelve si se ha pulsado o no la tecla CTRL.
- keyIdentifier: identifica la letra que se ha pulsado.
- keyLocation: devuelve la posicón de la tecla en el teclado.
- relatedTarget: devuelve el elemento relacionado con el elemento

sobre el que se ejecuta el evento.
- screenX: devuelve la posición X del cursor relativa a la página.
- screenY: devuelve la posición X del cursor relativa a la página.
- shiftKey: devuelve si se ha pulsado la tecla SHIFT (mayúsculas) o

no.
C. Onmouseout (al salir del área ocupada por un elemento de la

página)
Se produce cuando el puntero abandona un elemento. Ejemplo:

<form>
<div onmouseout =”miFuncion()”>
Cuando salga el puntero de esta capa se disparará el

evento.
</div>
</form>
<script>
alert(“El puntero ha salido de la capa.”)
</script>
D. Onmouseover (al entrar el puntero del ratón en el área ocupada

por un elemento de la página)
Se produce cuando el puntero entra en un elemento.
<form>
<div onmouseout =”miFuncion()”>
Cuando entre el puntero de esta capa se disparará el

evento.
</div>
</form>
<script>
alert(“El puntero ha entrado de la capa.”)
</script>
E. Onmouseup (al soltar el usuario el botón del ratón que

anteriormente había pulsado)
Se dispara cuando el usuario suelta el botón del ratón, estará vinculado
a un elemento. Ejemplo:

<form>
El objeto keydown se
<div onmouseup =”miFuncion()”> activa en elementos de
Cuando levante el botón del mouse (si lo ha pulsado y formulario y el body
levantada dentro de la capa).
</div>
</form>
<script>
alert(“El botón del ratón se ha soltado.”)
</script>
3.2 Eventos de teclado

Son aquellos que tienen que ver con la pulsación de teclas.
A. Onkeydown (al pulsar una tecla el usuario)

Se produce cuando se pulsa una tecla. . Ejemplo:
<form>
Número de Teléfono<input type=”text” onkeydown

=”miFuncion()”>
</form>
<script>
alert(“Recuerda que debes rellenar con un número de

teléfono válido.”)
</script>
B. Onkeypress (al dejar pulsada una tecla un tiempo determinado)

Se produce cuando dejamos pulsada una tecla durante unos instantes.
Ejemplo:

<form>
Número de Teléfono<input type=”text” onkeypress

=”miFuncion()”>
</form>
<script>
alert(“Tienes pulsada un tecla.”)
</script>
C. Onkeyup (al liberar la tecla apretada)

Cuando liberamos la tecla apretada también se desencadena un
evento. Veamos un ejemplo:
<form>
Número de Teléfono<input type=”text” onkeyup

=”miFuncion()”>
</form>
<script>
alert(“Has soltado la tecla.”)
</script>
4. EVENTOS DE ENFOQUE
Los eventos de enfoque son aquellos que se producen cuando
pasamos el foco, es decir seleccionamos un elemento, normalmente de
formulario.
4.1 Onblur (cuando un elemento pierde el foco de la

aplicación)
Se produce cuando un elemento pierde el foco. Esto puede ocurrir
cuando pinchamos sobre él o pulsamos el tabulador y pasamos a otro
elemento. Ejemplo:

<form name=”formulario1”>
Número de Teléfono<input type=”text” onblur

=”miFuncion()” name=”telf” value=”Número de Teléfono”>
</form>
<script>
alert(“Acabas de abandonar el elemento ” + document.

formulario1.telf.value);
</script>
4.2 Onfocus (cuando un elemento de la página o la

ventana ganan el foco de la aplicación)
Se produce cuando un elemento, generalmente un elemento de
formulario, se selecciona recogiendo el foco sobre él. Ejemplo:
Número de Teléfono<input type=”text”

onfocus=”miFuncion()” name=”telf” value=”Número de Teléfono”>
</form>
<script>
alert(“Acabas de poner el foco en el elemento ” +

document.formulario1.telf.value)
</script>
5. EVENTOS DE FORMULARIO
Aunque ya hemos visto eventos que se aplican de forma natural en
elementos, vamos a repasar algunos que son específicos de estos.
5.1 Onreset (al hacer clic en el botón de reset de un

formulario)
Es un evento que solo tiene sentido en un formulario. Se dispara
cuando se pulsa el botón reset con el que vaciamos todos elementos o
los devolvemos a su estado inicial. Ejemplo:

<input type=”reset” value=”borrar contenido”

onreset=”miFuncion”>
</form>
<script>
alert(“Le recuerdo que al pulsar el botón reset se

reiniciarán todos los campos.”)
</script>
5.2 Onsubmit (al pulsar el botón de enviar el formulario)

La otra acción inherente a los formularios consiste en enviar el
formulario para su tratamiento en otra página. Podemos aprovechar
ese momento para tratar un evento. Ejemplo:
<head>

charset=utf-8” />
<title>HTML</title>
</head>
<body>
<form name=”formulario1” onsubmit=”alert(‘Sus datos han sido

enviados. Gracias.’);”>
Nombre: <input type=”text” name=”nombre”></br>
Apellidos: <input type=”text” name=”apellidos”></br>
Correo-e:<input type=”text” name=”correoe”> </br>
<input type=”submit” value=”enviar datos” >
</form>
</body>
</html>

Notar que en este ejemplo, en vez de llamar a una función cuando se
produce el evento se ejecuta un trozo de código directamente. Esto
siempre es posible pero no es recomendable si el código a ejecutar es
mucho. También hay que darse cuenta de que cuando tenemos que
poner comillas dentro de otras comillas hay que alternarlas, si por fuera
las primeras son comillas dobles, las interiores serán comillas simples.
6. EVENTOS DE VENTANA
Son aquellos que tienen que ver con el tratamiento de la ventana del
navegador.
6.1 Onmove (al mover la ventana del navegador)

Se produce cuando se mueve la ventana del navegador. Está asociado a
los elementos body y frame Ejemplo:
< body onmove=”alert(‘la ventana se está moviendo’)”>
...
</body>
6.2 Onresize (al redimensionar la ventana del navegador)

Se produce cuando se redimeiona la ventan del navegador. Ejemplo:
< body onresize=”alert(‘la ventana está cambiando de

tamaño’)”>
...
</body>
7. OTROS EVENTOS
Dentro de esta categoría de otros eventos se incluyen aquellos que
no encajan en ninguna de las clasificaciones anteriores, ya sea por su
ámbito de aplicación o por sus características.
7.1 Onunload (al abandonar una página)

Este evento se ejecuta cuando se abandona una página. Está asociado
al elemento body o frame. Ejemplo:

<body onunload=”alert(‘Va a abandonar la página’);”
</body>
7.2 Onload (al terminar de cargarse la página o imágenes)

Se ejecuta al cargar una página, una imagen, los estilos, etc. Es aplicable
a las etiquetas html body, frame, img, link, script, style. Ejemplo:
<body onload=”alert(‘La página se ha cargado’);”
</body>
7.3 Onclick (al hacer clic en al botón del ratón sobre un

Onclick es aplicable a elemento de la página)
prácticamente cualquier
etiqueta HTML. Este evento es posiblemente el más utilizado y el más típico dentro del
mundo de la web. Nada hay más natural ni más cotidiano que hacer
click sobre cualquier elemento y zona de la página. Su uso puede darse
en formularios, al pinchar sobre un botón o puede darse en elementos
varios como capas, títulos o incluso el propio body.
Ejemplo:
<div name=”miCapa” onclick=”miFuncion()”>
Picha sobre esta capa y verás.
</div>
function mifuncion()
alert (“Acabas de hacer click sobre la capa”);
</script>
7.4 Ondragdrop (al soltar algo que se ha arrastrado sobre

la página)
Este evento se produce cuando sueltas algo que arrastrabas con el
ratón. Ejemplo:

<body ondragdrop=”alert(‘Has arrastrado y soltado algo en la
página’);”
</body>
7.5 Onerror (al no poderse cargar un documento o una

imagen)
Se produce cuando no puede cargarse la página o el objeto. Se aplica
sobre las etiquetas object, body and frameset. Ejemplo:
<body onerror=”alert(‘Ha ocurrido un error al cargar la

página. Inténtelo de nuevo’);”
</body>
7.6 Onabort (al detenerse la carga de una imagen, de la

página o irse de la página)
Se produce cuando se interrumpe la carga de una página, de una
imagen o de un objeto.
<body onabort=”alert(‘La carga de la página se ha detenido.

Si desea volver a cargarla pulse F5’);”
</body>

- Con esto terminamos este tema dedicado a los eventos, es un
tema importante ya que gran parte de nuestro trabajo como
programadores consistirá en tratar y responder a las acciones de los
usuarios por medio de estos.
- Hemos conocido todos los eventos y cómo podemos utilizarlos.

Búsqueda y análisis
de scripts 7
• Búsqueda en sitios
INTRODUCCIÓN especializados
Vivimos en un mundo en el que es difícil que alguien no hay hecho • Operadores booleanos
antes aquello que necesitamos, y con el auge de Internet, además,
podemos tener al alcance de nuestras manos una cantidad ingente • Técnicas de búsqueda
de recursos y materiales que nos faciliten el trabajo. Esto no • Técnicas de refinamiento
quiere decir que será suficiente con localizar un script y añadirlo de búsquedas
a nuestra página, nada más lejos de la realidad. El proceso incluirá
un trabajo de búsqueda, de selección y luego en el 90% de los • Reutilización de scripts
casos de adaptación a nuestras necesidades concretas y a nuestras
circunstancias. Por lo tanto lo primero que hay que saber para
reciclar código que encontremos en la red es programar en el OBJETIVOS:
lenguaje en el que esté hecho.
- Poder identificar y elegir
Otro aspecto importante es saber dónde buscar: existen multitud páginas y sitios web que
de páginas, de entre las cuales habrá que elegir aquellas que nos nos ayuden en el proceso de
aportan mejores soluciones. Todos tendremos nuestras favoritas aprendizaje y posteriormente
y muchos programadores web coincidirán en unas pocas de ellas. de desarrollo
Debemos conocer lo que nos ofrece la red para poder sacar el
- Aprender a realizar
máximo partido.
búsquedas ajustadas y
Por último en este tema vamos a aprender a realizar búsquedas en precisas
Internet, no solo de scripts, sino de cualquier otro tema, para ello
- Conocer algunas páginas
debemos tener unos conocimientos sobre búsquedas, booleanos y
web a las que acudir para
sintaxis.
encontrar y contrastar
ejemplos utilizables luego en
nuestros scripts
155
1. BÚSQUEDA EN SITIOS ESPECIALIZADOS
1.1 Páginas oficiales

¿Qué entendemos por páginas oficiales? Pues bien aquellas que
pertenecen a empresas, organizaciones de todo tipo, privadas y
públicas, que se pueden considerar los creadores de un producto o
aquellos que establecen los estándares sobre el tema.
Dentro del tema en el que nos movemos en este manual podemos

considerar como página oficial básica y de referencia en todo aquello
que tenga que ver con programación web la de la W3C (www.w3c.
com), ya sea la versión internacional o la española. En esta página se
detallan las últimas versiones estandarizadas de HTML, CSS y otras
tecnologías que tienen que ver con la web.
Vamos a tratar de indicar dónde y cómo buscar información sobre

scripts. Estos deben ser fiables, y por lo tanto debemos priorizar
aquellos sitios oficiales sobre cualquier blog o foro. Por supuesto
esto no quiere decir que aquellas páginas que sean oficiales haya que
descartarlas siempre y categóricamente, si no que habrá que tener
cierto criterio a la hora de fiarnos de ellas.
Como ya hemos visto anteriormente W3C son las siglas de WWW

Consortium, que es el organismo internacional que se encarga
de revisar y decidir qué es estándar y que no, de manera que los
desarrolladores de los navegadores puedan adoptarlo. Aun así,
cada navegador puede incorporar desarrollos únicos que a la larga
pueden ser adoptados como estándar o no (por ejemplo, la función
JavaScript para la comunicación asíncrona, Ajax). Son estos desarrollos
156 Tema 7 / Búsqueda y análisis de scripts

individuales de cada programa los que hacen que haya que tener
especial cuidado a la hora de utilizar determinadas funciones que
pueden funcionar en un navegador pero no lo hará en otros, de aquí
también la necesidad de probar siempre por lo menos en los tres o
cuatro navegadores más usados (IE, Firefox, Chrome, Safari, Opera,
etc.).
En el caso concreto de JavaScript ya hemos comentado que el

organismo que se encarga de su definición y estandarización
es ECMA International (European Computers Manufacturers
Association), en concreto la última versión estándar se conoce como
ECMA-262 versión 5.1.
De su página web puede descargarse un manual en formato PDF.
Este documento es muy completo pero es demasiado críptico, por lo que se hace
difícil de seguir sobre todo para principiantes.
Otras páginas oficiales a las que podemos recurrir son las propias
de los navegadores. Al fin y al cabo son estos los que implementan

los estándares de la ECMA sobre un programa concreto. Podremos
visitar las páginas para desarrolladores de cada uno de ellos.
Mozilla, o lo que es lo mismo, Firefox, ofrece una web para

desarrolladores de la cual podremos extraer información general
sobre el desarrollo web y en concreto sobre JavaScript (ECMA) en
Mozilla.
En cuanto a Chrome, sabemos que pertenece a Google, por lo que

sus páginas para desarrolladores ofrecen tanto información sobre
cómo desarrollar para su navegador como para el desarrollo de
aplicaciones basadas en sus aplicaciones.

Respecto a Internet Explorer encontramos una página que ofrece
una Guía e Internet Explorer 10 para desarrolladores (Windows).
Nos ofrece información actualizada para esta versión de su
navegador.
Todas estas páginas podemos considerarlas como oficiales, sino

del propio JavaScript, si al menos de los distintos navegadores.
Evidentemente no solo vamos a encontrar información en las páginas
oficiales, también y muy a menudo tendremos que recurrir a otro tipo
de páginas, eso es lo que veremos en las secciones siguientes.
1.2 Tutoriales
Dentro de la cantidad ingente de páginas que nos ofrece la web
siempre habrá unas cuantas de referencia que por su calidad y claridad
se conviertan en las páginas de referencia a las que acudiremos en caso
de duda.
Como es de suponer hay infinidad de sitios a los que acudir. Aquí

nos centraremos en unos pocos, alguno de ellos en inglés para hacer
hincapié en que es bueno no descartar páginas en este idioma, ya que a
menudo tendremos que utilizarlas.
La primera página es un clásico en el mundo del desarrollo web. Se

trata de www.w3schools.com. Es esta una página en la que podremos
encontrar información y formación sobre cualquier lenguaje de
desarrollo web, como se puede apreciar en la imagen:

Tenemos desde HTML hasta PHP pasando por CSS, JavaScript, etc.
Además es importante observar que para cada uno de los temas hay
una sección de Tutorial y otra de Referencia. Esta última hace un repaso
de todas las palabras reservadas de lenguaje, incluyendo numerosos
ejemplos interactivos, que pueden ser visualizados y modificados. En el
apartado de Tutorial tendremos un curso que podemos seguir o recurrir
a aspectos puntuales que necesitemos en un momento dado. Es una
web muy completa que abarca muchos de los temas necesarios para
programar páginas web. Como ejemplo veamos la página principal del
tutorial dedicado a JavaScript.
Aparece un recuadro nombrado como Example donde aparece un

botón que nos mostrará la fecha del día actual. Debajo tenemos otro
botón Try it Youself, que si lo pulsamos nos lleva a una página en
la que nos muestra el código necesario para reproducir el ejemplo
permitiéndonos modificarlo y probarlo (botón Submit Code).

Otra página con tutorial, esta vez en español, es www.desarrolloweb.
com. Esta página, tiene contenidos sobre HTML, CSS, JavaScript,
desarrollo para Android, etc. Además no solo hay tutoriales, sino que
se publican regularmente artículos de actualidad sobre numerosos
temas. Permite la suscripción de manera que se pueden recibir las
actualizaciones de los contenidos y diversas ofertas de cursos. Si bien a veces hay contenidos
un tanto desactualizados,
Otra página a la que podemos recurrir para obtener información
la página desarrolloweb.
es www.librosweb.es. Esta es una página dedicada en exclusiva
com es una fuente que nos
a la publicación de tutoriales y libros sobre diversos temas de
programación web. Se ponen a disposición del usuario, generalmente proporciona rápidamente
con licencia Creative Commons, estando permitido el uso con información y ejemplos.
reconocimiento del autor.
Estos son tres ejemplos de páginas que pueden ser utilizadas como
soporte en cualquier desarrollo. Evidentemente dada la extensión
de la web, no son las únicas y ni siquiera podríamos decir que las
mejores. Sí podemos decir que son tres de las utilizadas, que son
completas y fiables. En cada momento podremos acudir a una u otra
para resolver una duda puntual o bien acudiremos a otra página. En
concreto unas de las páginas más comunes para solucionar dudas
o problemas son las páginas de Foros, de las cuales hablamos a
continuación.

1.3 Foros
Podemos definir foro como una página en la cual se pueden plantear
dudas o cuestiones sobre un tema y otros visitantes o usuarios
registrados responden intentando solucionar o aclarar las dudas. En
estas páginas siempre podremos hojear las preguntas que han hecho
usuarios anteriores y cuales han sido las respuestas que ha recibido.
Su uso en Internet está muy extendido y no solo abarcan temas sobre

programación, si no que podemos encontrar foros sobre viajes, los más
diversos productos, bricolaje y cualquier otro tema sobre el que nos
surja alguna cuestión.
Páginas de foros dedicadas al desarrollo web y a JavaScript en

concreto, podemos citar de las que hemos visto en la sección anterior a
librosweb.es.
Páginas de foros especializadas son www.forosdelweb.com, una de las

más grandes, recopilando preguntas y respuestas de numeroso temas
relacionados con la programación web.
El número de visitantes y entradas de este foro es realmente grande,

podemos ver sus propias estadísticas:
Otro ejemplo de foro es el que tiene la página www.

lawebdelprogramador.com. Esta es una web mantenida por una
comunidad de programadores que no solo se dedica a la programación

web, sino que tiene referencias a casi cualquier lenguaje imaginable.
La web no solo proporciona un foro, también pone a disposición del
visitante manuales, cursos, incluso trabajos freelance. Para descargarse
ciertos contenidos requiere registro que es gratuito y rápido de realizar.
El foro dedicado a JavaScript es uno de los más animados en

lawebdelprogramador.com
Existen multitud de otros foros en los que consultar nuestras dudas,

esto dos ejemplos junto con el común de la sección anterior forman
un buen conjunto por el que empezar a buscar para solucionar
nuestras dudas.
1.4 Bibliotecas
Por bibliotecas debemos entender un conjunto de script, de JavaScript
en nuestro caso, agrupados que pueden ser llamados desde nuestros
programas y que solucionan problemas complejos o repetitivos
evitándonos la tarea de programarlos por nosotros mismos. En general
estos script suelen estar en forma de función.
Ejemplos de bibliotecas hay muchos, una lista extensa de ellas puede

ser: Ajax Framework, Backbone.js, Bindows, Dojo toolkit, Enyo.js, Ext JS,
Glow (biblioteca), Google Web Toolkit, Jquery, JQuery Tools, JQuery UI,
JsHttpRequest, Log4js, Midori (biblioteca), MochiKit, Mootools, Node.js,
OpenLayers, Prototype, Qooxdoo, Script.aculo.us, Three.js, WaveMaker,
Yahoo! UI Library.
Cada una de ellas tendrá sus puntos fuertes sobre las otras. Algunas son
más específicas, como Google Web Toolkit, pensada para desarrollar
aplicaciones relacionadas con Google, o Ajax Framework, orientada a
las transacciones Ajax. Su uso es similar entre todas, por lo tanto vamos

a explicar de forma más detallada una de ellas. Posiblemente la más
utilizada hoy en día, con una amplia presencia en el mercado laboral
es, además, bien mantenida con una amplia documentación y con
perspectivas de evolución. Nos referimos a Jquery.
Jquery fue creada por John Resig y nos permite simplificar la creación
de animaciones, las interacciones Ajax, los accesos al árbol DOM, etc.
Esta biblioteca es software libre y de código abierto distribuyéndose
bajo una licencia MIT y la Licencia Pública General de GNU v2.
La forma de empezar a usarla es descargar el fichero que contiene

los script que la forman. También puede utilizarse online si en vez de
referenciar a un fichero lo hacemos mediante a un enlace. En cualquier
caso el sitio web al que hay que acudir es jquery.com
A la derecha dentro de un botón de color marrón vemos el enlace

para descargar el fichero. La última versión en este momento es
la 2.1.1, manteniéndose para descargas la 1.11 por cuestiones de
compatibilidad con navegadores antiguos.
Este es uno de los aspectos a tener en cuenta. Debemos tener muy

presente la versión de JQuery que estamos utilizando ya que de una a
otra puede haber pequeños cambios como funciones que cambien o
que dejen de mantenerse.
Como ya hemos indicado el uso de bibliotecas nos exime de programar

funciones tediosas o repetitivas, pero otra de sus ventajas es la
de no preocuparnos de la dichosa compatibilidad con los distintos
navegadores. Los programadores de JQuery han hecho ese trabajo por
nosotros, por lo que no tendremos que ocuparnos de ello, tan solo de
seguir las instrucciones para utilizar sus funciones.
Vamos a ver ya como implementar un programa utilizando Jquery. Lo

primero, como ya se ha dicho es descargar el fichero con la versión que
vamos a utilizar. En nuestro caso, el fichero es el correspondiente a la
versión 2.1.1

Nos ofrecen dos posibilidades: la primera compressed y la segunda
uncompressed. La primera ocupa 247 KB y la segunda 84 KB, y la
diferencia entre uno y otro es que uno está en un formato reducido en
el que se han eliminado al máximo los espacios y explicaciones y en el
segundo caso las funciones son legibles al mantener un formato más
tradicional. Veamos en las imágenes a qué nos referimos:
Este es un fragmento del fichero comprimido
Este es un fichero con el formato tradicional

Ni que decir tiene que el fichero que se descarga tiene el formato de un
archivo de texto y que puede ser editado, lo cual quiere decir que podemos
añadir nuestras propias funciones a dicho fichero, personalizando así
nuestro JQuery. Si lo queremos es estudiar las funciones incluidas en la
biblioteca obviamente deberemos acceder a la versión no comprimida.
El siguiente paso sería incluirlo en nuestra página. Para ello añadimos en la

sección de cabecera una etiqueta script de la siguiente manera:
<head>
<script src=”jquery-2.1.1.js” type=”text/javascript”></

script>
</head>
Si lo que queremos es enlazarla, bastará con poner la URL completa

indicando donde se encuentra el fichero. El utilizar un enlace puede
ser cómodo, en cuanto a que no nos tenemos que preocupar de su
actualización pero a la vez la carga del fichero desde la red ralentizará el
tiempo de acceso a la página.
Con el paso anterior ya tenemos a nuestra disposición el conjunto de las

funciones que nos proporciona JQuery.
Vamos ahora a ver cómo utilizarlo. Esto se hará utilizando la siguiente

sintaxis general:
$(objeto).evento(función);
Veamos un ejemplo: si queremos que al hacer click sobre cualquier capa se

ejecute una función:
$(div).click(ejecuta());
Accedemos a JQuery. En el momento en el que utilizamos $(), con $(div) nos

referimos a todas las capas y con click (ejecuta()) hacemos que se ejecute la
función cuando se hace click. Esta línea de código ya es JQuery, que como
se puede observar guarda un parecido enorme con la sintaxis JavaScript. Es
normal porque no olvidemos que JQuery son librerías JavaScript a las cuales
se accede de una manera específica pero que no deja de ser todo el mismo
lenguaje.
Un consejo que debe convertirse en algo imperativo al usar JQuery es incluir

cualquier acceso dentro de una sentencia:
$(document).ready(function()
… resto de código JQuery ...
Lo que hace este trozo de código es asegurarnos que no vamos a

ejecutar ninguna sentencia antes de que se hayan cargado todos
los elementos de la página. El “evento” ready se produce cuando la

página está lista, y será a partir de ese momento cuando podremos,
sin peligro de que se produzca un error si no encuentra algún objeto,
utilizar JQuery sin problemas. Repetimos que es muy importante que se
utilice esto para prevenir problemas que luego pueden ser difíciles de
detectar.
La explicación exhaustiva del uso de JQuery se sale del objetivo de

este manual básico de JavaScript, pero sí podemos presentar un script
para que el lector pueda hacerse una idea de cómo y qué obtenemos
utilizando esta biblioteca.
Script JQuery: manipular las clases de un elemento. Veamos el código

completo.
<html>
<head>
<title>Primer ejemplo JQuery – manipular clases</title>
<script src=”jquery-2.1.1.js” type=”text/javascript”></

script>
.clase1{
background-color: green;
.clase2{
background-color: red;
</style>
<script>
$(document).ready(function(){
$(“div.cambia”).mouseover(function(event){
$(“#capaCambiar”).addClass(“clase1”);
});
$(“div.cambia”).mouseout(function(event){
$(“#capaCambiar”).removeClass(“clase2”);
});
});
</script>
</head>

<body>
<div id=”capaCambiar”>
Esta es la capa de la que vamos a cambiar la clase asociada

para así manipular los estilos CSS dinámicamente.
</div>
<br>
<br>
<br>
<br>
<div class=”cambia”>Pasa el ratón por esta capa para cambiar

los estilos de la capa anterior</div>
</body>
</html>
Vamos a explicar el código: lo primero observar la definición en el

encabezado del fichero JQuery que vamos a utilizar; lo segundo en
lo que debemos fijarnos es en el uso de $(document).ready … Como
ya indicamos es necesario usarlo para evitar problemas. Ya tenemos
todo preparado, ahora vamos a definir qué queremos que haga. El
objetivo es que cuando se pase el ratón sobre una capa concreta
(evento) se cambie la clase que se está aplicando sobre otra capa
concreta.
La capa que se va a cambiar está identificada con un id

(capaCambiar) y en la que se va a disparar el evento se le asigna una
clase (cambia). Realmente hubiese sido mejor utilizar en ambos caos
el id para diferenciar mejor las capas pero hemos optado por recurrir
a dos formas distintas de identificación para que el lector vea varias
formas de hacerlo.
Lo siguiente que debemos comentar es como vincular los

eventos. Se puede observar que esto se hace con $(“div.cambia”).
mouseover(function(event) … Hacemos referencia al objeto
implicado (la capa cuya clase es cambia, recordar que sabemos que
es una clase porque le antecede un punto al nombre, .cambia). A
continuación el evento onmouseover, los eventos son los mismos
que hemos visto en secciones anteriores. Por último la acción que
debe realizar cuando se dispara el evento: $(“#capaCambiar”).
addClass(“clase1”); Tomamos el objeto cuyo id sea capaCambiar y le
“añadimos” la clase clase1.
Con este ejemplo vemos la potencia de JQuery y su facilidad de uso.

Nos proporciona una interfaz con la que acceder a las propiedades
de los objetos de nuestra página o del DOM de una manera sencilla
y eficaz.

2. OPERADORES BOOLEANOS
Hoy en día la búsqueda de información a través de la red se
realiza prácticamente al 100% por medio de los conocidos como
Buscadores. Los más conocidos son Yahoo, Bing, y sobre todo
Google. Un buscador es un software encargado de localizar
documentos a través de Internet, llevando a cabo una clasificación
automática en función de ciertos parámetros de manera que
actualmente si queremos que nuestra página tenga cierta relevancia,
deberá aparecer en los primeros puestos en aquellas búsquedas
que nos conciernen. Los parámetros de búsqueda exactos
no son de dominio público, pero sí podemos dar una serie de
recomendaciones:
- Un buscador solo “ve” texto, por lo tanto el de nuestra página

debe ser de calidad y debemos esmerarnos en detallar todo
aquello que tenemos en forma de texto. Nada importan las
imágenes, vídeos y multimedia en general.
- Una de las cosas que más premian los buscadores es la

actualización de los contenidos. Una web sin renovación es una
web muerta.
- Debemos utilizar las etiquetas meta para describir el contenido

de nuestra web y aquí debemos ser precisos y honestos. De nada
sirve poner que nuestra web va sobre fútbol con la intención de
atraer más tráfico si no es así.
- Es importante tener enlaces a páginas relevantes y aún más que

otras páginas, relacionadas con el tema de nuestra web, nos
enlacen.
- Debemos tener un mapa de nuestro sitio web para los robots

de los buscadores puedan utilizar como guía dentro de nuestra
página. Hay programas que nos generan automáticamente el
mapa, pero podemos hacerlo nosotros mismos a mano (si la web
no es muy compleja), bastará con incluir en una página HTML o
XML simple un listado estructurado de nuestra web.
Estas indicaciones son las más básicas y no las únicas, es todo

un campo de conocimiento dentro de las tecnologías web, con
profesionales dedicados a lo que se conoce como posicionamiento
web.
Una vez hecha esta pequeña introducción a los buscadores, nos

vamos a centrar en cómo debemos hacer las búsquedas para
encontrar aquello que necesitamos en cada momento. A la hora
de realizar cualquier consulta tendremos palabras o frases, que
se convierten en el objeto de nuestra búsqueda. Si ponemos esas
palabras directamente en el navegador nos son devueltas las
páginas relacionadas por orden de relevancia. Para hacer búsquedas
sencillas es suficiente con situar la palabra en la caja de texto y darle
a buscar. Sin embargo, si lo que queremos es elaborar búsquedas

más complejas podemos realizarlas utilizando una sintaxis
específica.
Para hacer este tipo de búsquedas más refinadas utilizaremos lo que se

conocen como Operadores Booleanos. Estos provienen del Álgebra de
Boole, matemático británico que inventó el álgebra de base dos, sistema
numérico que emplea cualquier dispositivo electrónico actualmente.
Estos operadores ya los hemos visto en la sección donde se explicaba
el uso de AND, OR y NOT. Aun así, es conveniente recordarlos y situar
su uso en el contexto de las búsquedas en Internet como haremos a
continuación.
2.1 Funcionamiento de los operadores booleanos

Para resumir el
funcionamiento de estos Lo primero es repasar las características de dichos operadores:
operadores podemos - AND: seleccionará aquellas páginas que tengan ambos términos.
recurrir a lo que se Por ejemplo: vuelo AND barato. Solo nos mostrará aquellas webs
llama tabla de verdad, en las que aparezcan la palabra vuelo y la expresión barato. Es
en la que se detalla la opción por defecto en la mayoría de buscadores, no hay que
el comportamiento especificar el AND para que lo haga.
del operador usando
numeración binaria, - OR: seleccionará las páginas en las que aparezca cualquiera de
los términos que se buscan. Reutilizando el ejemplo anterior
donde un 1 es verdad y
si cambiamos el operador AND por OR: vuelo OR barato, nos
un 0 falso.
devolverá páginas que tengan la palabra vuelo o la expresión
barato.
- NOT: rechazará las páginas que tengan este operador delante.

Ejemplo: vuelo AND NOT caro. Devuelve las páginas que
contengan la palabra vuelo y NO contengan la palabra caro.
- Tenemos los operadores AND y NOT negados: NAND y NOR, lo

cuales devuelven lo contrario que los no negados.
- Por último tenemos el operador conocido como OR exclusivo,

XOR. Este operador devolverá aquellas páginas en las que
aparezca cualquiera de los términos de búsquedas pero solo en
una de ellas no en las dos.
Podemos utilizar más de una operador, combinándolos agrupados

utilizando paréntesis. Por ejemplo: (vuelo AND barato) NOT “low
cost”. O este otro: (vuelo OR billete) AND (barato OR “low cost”).
En el primer caso recuperaremos aquellas páginas en las que

aparezcan las palabras vuelo y barato pero que no contengan la
expresión “low cost”. En el segundo ejemplo buscaremos las páginas
que contengan las palabras vuelo o billete (cualquiera de las dos)
y que además contengan barato o la expresión low cost. Debemos
notar que cuando queremos buscar una expresión utilizamos las
comillas, ya que con ellas indicamos al buscador que esas dos
palabras van unidas formando una unidad.

Tabla de verdad operador AND:
Si no utilizásemos
AND comillas buscaríamos las
palabras como si tuviesen
un AND entre ellas.
1 1 1
1 0 0
0 1 0
0 0 0
Tabla de verdad operador NAND:
NAND
1 1 0
1 0 1
0 1 1
0 0 1
Tabla de verdad operador OR:
OR
1 1 1
1 0 1
0 1 1
0 0 0
Tabla de verdad del operador NOR:
NOR
1 1 0
1 0 0
0 1 0
0 0 1

Tabla de verdad operador NOT:
NOT (!)
1 0
0 1
Tabla de verdad del operador XOR:
XOR
1 1 0
1 0 1
0 1 1
0 0 0
2.2 Utilización en distintos buscadores

El uso de estos
operadores en distintos Vamos a lanzar los segundos ejemplos del ejercicio anterior en
buscadores debe diferentes buscadores y vamos a analizar someramente lo que ocurre.
ser equivalente. Es Empezamos con el buscador más utilizado, Google:
evidente que las posibles
diferencias que arrojen
unos y otros sean
producidas por la calidad
o el enfoque que cada
uno de ellos tenga.
En este caso tenemos que las primeras posiciones las copa Radio
Televisión Española y a continuación dos periódicos, encuentra
325.000.000 resultados en 0,39 segundos.
Veamos ahora con Yahoo:

En este caso cuando estamos buscando noticias de última hora en
línea nos devuelve en las primeras posiciones enlaces al BOE y lo que
resulta más chocante a Universidades. El algoritmo es el mismo pero el
buscador no evalúa de igual manera dicho algoritmo. De manera similar
vemos cómo se comporta en el buscador de Microsoft, Bing:
Para obtener resultados en estos dos últimos sobre noticias on-

line o en línea tendríamos que usar tan solo estas palabras y aun
así habría resultados no demasiado ajustados. Como vemos, entre
buscadores hay diferencias sustanciales debido a que cada uno
implementa técnicas de búsqueda propias, por lo que hay que
tener cierto cuidado a la hora de realizar las búsquedas en uno u
otro. Otro motivo para esta diferencia es que también distintos
navegadores pueden emplear sintaxis distintas. Para completar el

tema vamos a incluir a continuación un extracto de las ayudas de
Google y Yahoo.
Google recomienda que cuando se utilicen búsquedas con un

operador no se añadan espacios entre el operador y la consulta, de
manera que lo correcto sería www.cep.com.
Veamos esos operadores:
- Para buscar una palabra o una frase exactas, como ya hemos

indicado, se utilizan comillas para enmarcar la expresión
deseada.
- Para excluir una palabra utilizaremos el guion delante de ella.

Por ejemplo: noticias online -radio, recuperará las páginas en
las que aparezcan las palabras noticias y online pero que no
contengan la palabra radio.
- A veces lo que necesitaremos es realizar una búsqueda dentro

de un dominio, entonces utilizaremos site:nombre del dominio.
Por ejemplo mundial site:marca.es o bien mundial site:.es.
- Si lo que queremos es buscar páginas que nos dirijan a una URL,

link:sitio web, como por ejemplo link:google.es, para obtener
páginas que dirijan a google.es.
- Ahora buscamos páginas similares a una URL, lo haremos con el

operador related: Veamos un ejemplo: related:www.cep.es.
- Si queremos incluir un comodín utilizaremos *. Este símbolo

sustituye a cualquier término. Si vemos un ejemplo para buscar
una frase de la que no estamos seguros en alguno de sus
términos: “amanece que *”.
- Para buscar intervalos de números usaremos el operador .. Por

ejemplo: años 1900..1950.
- Si queremos obtener información sobre un sitio, info: Por

ejemplo site:google.com.
- O bien recuperar la versión almacenada en caché. Ejemplo:

cache:www.cep.es.
En Yahoo:
- Buscar frases exactas, utiliza las comillas igual que Google.
- Si queremos que siempre una o varias palabras aparezcan

utilizaremos el signo + delante de cada una. Por ejemplo: playa
+chiringuito. Forzamos a que la palabra chiringuito aparezca
siempre.
- Para conseguir el efecto contrario, es decir excluir palabras,

usaremos el signo – delante de la palabra que se quiere obviar.
Ejemplo: playa -nudista.

3. TÉCNICAS DE BÚSQUEDA
Para llevar a cabo una búsqueda es conveniente tener claro ciertos
conceptos sobre qué son y cómo se utilizan las expresiones.
Además es importante seguir una serie de pasos para definir
las búsquedas, y por último conocer qué son y cómo podemos
elaborar las especificaciones necesarias para encontrar aquello
que necesitamos. Todo esto lo iremos viendo en las siguientes
subsecciones.
3.1 Expresiones
Un aspecto importante a la hora de elaborar las expresiones
de búsqueda es como utilizamos el lenguaje y como lo utilizan
aquellos que han hecho aquellas páginas que buscamos. Por ello y
para estandarizar su clasificación cada documento es descrito por
un conjunto de términos que lo representan. A esta descripción se
le conoce como indización.
Indización es el proceso de describir o representar el contenido

temático de un recurso de información. Al buscar un documento se
obtiene un índice de términos que será utilizado como herramienta
de acceso al contenido de dicho documento.
Una vez realizado el proceso de indización obtendremos

información valiosa sobre distintos aspectos el documento. De la
forma del documento obtenemos el autor, título, página web, tema
y palabras clave que lo definen (metadatos). Del propio contenido
extraemos el texto, que puede describirse en lenguaje natural o en
lenguaje controlado.
En el lenguaje natural se procesan palabras clave, de manera que la

descripción del documento se hace utilizando palabras presentes
en el propio texto. Responde a preguntas formuladas en lenguaje
corriente. Se utiliza con los motores de búsqueda (como Google).
Podemos encontrarnos problemas de homonimia, es decir de

palabras que se escriben igual pero cuyo significado es muy
distinto. Por ejemplo: banco puede representar tanto un banco en
el que sentarse como una entidad financiera o incluso un banco de
peces, de trabajo … La forma de eludir este problema es concretar
más en nuestra búsqueda, añadiendo términos que hagan
inequívoca nuestra consulta.
Respecto al lenguaje controlado tiene toda una estructura

definida para clasificar cada materia de una manera eficiente. Es
el sistema utilizado en bibliotecas tradicionales y bases de datos
especializadas aunque accedamos a la relación de sus fondos a
través de internet.

3.2 Definiciones de búsquedas
A. Primer paso: Definir el tema

Para que la búsqueda sea satisfactoria debe, en primer lugar, acotarse
sobre qué se está buscando, el tema. Para ello una buena técnica
puede ser hacerse una serie de preguntas básicas:
- ¿Qué voy a buscar?
- ¿Qué sé del tema?
- ¿Qué nivel de profundidad necesito?
- La información que busco es genérica o especializada.
- ¿Qué palabras o frases puedo emplear para especificar el tema?
B. Segundo Paso: Seleccionar modificadores o filtros

- Definir el período a cubrir.
- Definir el área geográfica.
- Definir el idioma.
- Subtemas y categorías dentro del tema principal.
C. Tercer paso: representar el tema en una palabra o una frase en

lenguaje natural
- ¿Qué palabras clave podría utilizar?
- ¿Qué sinónimos y términos relacionados existen?
- ¿Puede haber otros términos que lo representen con mayor

exactitud?
D. Cuarto paso: traducir los términos de búsqueda

- Al inglés, a menudo encontraremos mucha mayor información.
3.3 Especificaciones
Respecto a las especificaciones para realizar una búsqueda de calidad
debemos ser conscientes de que para elegir una fuente de información
hay que tener en cuenta:
- El conocimiento del tema objeto de búsqueda.
- Tipo de búsqueda que se quiere efectuar.
- Tipo de material que se desea consultar.

- Finalidad de la consulta.
Siguiendo estos puntos y lo visto en las dos secciones anteriores

podemos definir las especificaciones necesarias para realizar la
búsqueda. Para ello y como ejemplo vamos a resolver un caso práctico:
Buscamos ayuda para realizar en JavaScript un programa para

determinar la letra adicional al DNI.
1. Con respecto a las expresiones: deberemos pensar qué palabras,

en lenguaje natural, definen aquello que buscamos. Suponemos
que el creador de la página o artículo que tiene el contenido que
buscamos la ha etiquetado con aquellas palabras que permiten
que sea encontrado con facilidad. Recordar que los metadatos son
parte de los datos que recaban los motores de búsqueda, por lo que
podemos suponer que expresiones como JavaScript, letra DNI o
algoritmo pueden ser claves.
2. Para definir la búsqueda debemos los pasos indicados y responder a

las preguntas, siempre que éstas sean pertinentes en nuestro caso
concreto.
- Primer paso: Definir el tema.
- ¿Qué voy a buscar? Un programa o función JavaScript para

calcular la letra del DNI.
- ¿Qué sé del tema? Quizá sepa algo sobre el algoritmo que

hay que utilizar o quizá no sepa nada, con lo cual debería
primera averiguar qué hace ese algoritmo antes de buscar su
implementación en JavaScript.
- ¿Qué nivel de profundidad necesito? Dependerá de la

respuesta anterior.
- La información que busco es genérica o especializada.

En general y aunque a nosotros no los parezca, cuando
buscamos algo sobre JavaScript será una búsqueda
especializada.
- ¿Qué palabras o frases puedo emplear para especificar

el tema? Ya hemos enumerado antes una lista: letra DNI,
JavaScript, algoritmo. Podemos añadir función, programa,
cálculo.
- Segundo Paso: Seleccionar modificadores o filtros.
- Definir el período a cubrir. Esto no tiene demasiada

importancia, nos da igual de cuando sea la página.
- Definir el área geográfica. Si podemos acotar

geográficamente, lógicamente sería en España.
- Definir el idioma.
- Subtemas y categorías dentro del tema principal. Es este caso

no es necesario.

- Tercer paso: representar el tema en una palabra o una frase en
lenguaje natural.
- ¿Qué palabras clave podría utilizar? Letra DNI, JavaScript,

función, programa, algoritmo, cálculo.
- ¿Qué sinónimos y términos relacionados existen? Debemos

utilizar en un contexto correcto las palabras función o
programa para que no busque páginas relacionadas con otros
temas.
- ¿Puede haber otros términos que lo representen con mayor

exactitud? En principio no.
- Cuarto paso: traducir los términos de búsqueda.
- Al inglés, a menudo encontraremos mucha mayor información

sobre algo en este idioma. En nuestro caso no tiene mucho
sentido traducirlo al ser algo que estará al 100% en español.
Veamos distintos resultados utilizando distintas combinaciones de

términos de búsqueda:
En este primer caso hemos hecho una frase con varios de los
términos de búsqueda. Este sería un ejemplo de lenguaje natural
empleado para realizar una búsqueda. Realmente no es tan “natural”
ya que es el resultado de un análisis previo que nos ha llevado hasta
dicha frase.
Obtenemos 32.900 resultados, siendo los primeros aparentemente

válidos ya que responden a aquello que buscamos.

En el siguiente ejemplo utilizamos las palabras “calculo letra dni” sin
especificar función, algoritmo o JavaScript. Evidentemente el resultado
no nos devuelve aquello que buscamos, sino que son páginas en las
que se explica cómo calcularlo pero no implementado en un lenguaje
de programación concreto como JavaScript.
Además, al ser menos precisos obtenemos un número mayor de

páginas. Por lo tanto debemos aprender a ser precisos para obtener
respuestas correctas y ajustadas a lo que buscamos.
Como ejercicio se pide intentar hacer dos o tres combinaciones más

utilizando todas las palabras clave. Anotar los resultados obtenidos y
verificar si es lo que estamos buscando.
4. TÉCNICAS DE REFINAMIENTO DE
BÚSQUEDAS
Para poder realizar búsquedas más ajustadas y recuperar aquella
información que realmente nos interesa necesitamos utilizar los
operadores que introdujimos en secciones anteriores. Entonces vimos
qué eran y algún ejemplo sencillo. En este epígrafe vamos a revisar y
profundizar en su uso cuando en las búsquedas intervienen muchos
términos o la relación entre ellos es compleja.
Al conjunto de órdenes, operadores y estructuras que, organizados

según unas normas, permiten buscar registros almacenados que
contengan alguno o todos los términos buscados podemos llamarlo

expresión (a esta también se le conoce como ecuación). El papel que
juegan los operadores en todo esto es el de expresar las relaciones que
tienen entre sí los términos.
Esta ecuación podemos escribirla nosotros directamente o bien

podemos utilizar el formulario de búsqueda avanzada que suelen tener
los buscadores. En el caso de Google nos encontramos lo siguiente:
En general y como recomendación es importante poder traducir el

lenguaje natural a un formato que el buscador pueda interpretar de
una manera más eficiente.
Si repasamos los distintos campos podemos ver que el primero todas

estas palabras equivale a separar cada término por un AND (todas). El
segundo palabra o frase exacta corresponde con entrecomillar el término
de búsqueda. El tercer campo cualquiera de estas palabras, se corresponde
con separarlas con OR. En los siguientes eliminamos de la búsqueda las
palabras indicadas o restringimos la búsqueda a un rango de números.
Por lo tanto, la primera parte del formulario de búsqueda avanzada nos
permite utilizar los operadores de una manera transparente, sin necesidad
de escribirlos y simplemente rellenando las cajas de texto.
El resto de los campos nos permiten definir el idioma, las fechas del
documento, la región, el tipo de archivo o incluso el tipo de licencia de
publicación entre otras características.
Otros buscadores también tienen una página de búsqueda avanzada, por

ejemplo Yahoo, que tiene opciones similares a las ofrecidas por Google:

4.1 Utilización de separadores
Para realizar una búsqueda de varios términos a la vez utilizaremos el
símbolo |. Por ejemplo “desarrollo web” y “cocina”. En la imagen con el
resultado de la búsqueda vemos como nos ha recuperado webs donde
aparecen los dos términos, cada uno por separado, como si de dos
búsquedas independientes se tratase, incluso las va alternando:

Otro ejemplo de separadores de términos son los paréntesis. Con ellos
delimitamos y acotamos distintos apartados dentro de una misma
búsqueda compleja en la que intervengan varios OR, AND, negaciones,
etc. Por ejemplo, queremos buscar páginas sobre desarrollo web con
JavaScript, HTML y CSS, que contenga ejemplos sobre efectos dinámicos
o validación de formularios. Traducido como una expresión de búsqueda
con paréntesis podría ser: (“desarrollo web” AND JavaScript AND HTML
AND CSS) AND (“efectos dinámicos” OR “validación de formularios”).
4.2 Utilización de elementos de unión

Como elementos de unión vamos a hablar de operadores avanzados
para usar principalmente en Google. Los llamamos de unión porque no
nos van permitir unir búsquedas de términos con búsquedas por tipo
de archivo, dentro de un sitio web o incluso en determinadas zonas
de la página. En general la sintaxis será operador:término buscado.
Hagamos un repaso de estos operadores:
- Intext: Busca una palabra o expresión exacta en el contenido de la

página.
- Allintext: Busca varias palabras en el contenido de la página.
- Site: Realiza la búsqueda dentro de un sitio web. Por ejemplo:

“certificados profesionales” site:www.editorialcep.com, realizará una
búsqueda de la expresión certificados profesionales solo en la web
de la editorial CEP.
- Intitle: Busca un término en el título de la página.
- Allintitle: Busca varias palabras en el título de la página.

- Inurl: Busca una palabra o expresión en la URL (dirección web)
de la página. Otras que ya hemos
- Allinurl: Busca varias palabras en la URL de la página. tratado anteriormente
y que pueden también
- Inanchor: Busca una palabras o expresión en la descripción de encuadrarse en esta
los enlaces de la página. categoría son cache,
- Allinachor: Busca varias palabras en la descripción de los related y link.
enlaces.
- Daterange: Devuelve páginas que estén en Internet desde hace

un tiempo definido, con la particularidad de que la fecha debe
ser suministrada en días julianos, con lo cual tendremos que
convertirla primero.
- Define: busca la definición o significado de una palabra. Por

ejemplo buscamos el significado de la palabra algoritmo:
define:algoritmo y obtenemos:
Podemos observar como el propio Google nos suministra una definición

del término ese primer resultado no es una página web. Los resultados
encontrados en la web empiezan a continuación copados por Wikipedia.
5. REUTILIZACIÓN DE SCRIPTS
La mayoría de los problemas que un programador tiene que resolver
durante su trabajo ya han sido resueltos anteriormente por alguien. Por lo
tanto, es una buena idea reciclar código ya sea propio o ajeno. La forma en
la que nos enfrentamos a la hora de abordar un nuevo script ha cambiado
sustancialmente con Internet. El problema puede ser conocido, con lo cual

simplemente nos pondremos a ello. Pero el problema puede presentar
dificultades de precisión de sintaxis o simplemente de complejidad de
planteamiento. Para estos casos tenemos a nuestra disposición la gran
fuente de recursos que es la red. Eso sí, tendremos que aprender a distinguir
entre aquello de calidad que de verdad nos ayuda y aquello que solo nos
entorpecerá.
Evidentemente el uso de scripts de la red no nos exime de tener que

conocer muy bien el lenguaje de programación, ya que en contadísimas
ocasiones no tendremos que retocar el código. Retocar requiere el mismo
o mayor grado de conocimiento de JavaScript que si lo hacemos desde
cero. El retocar un script ya hecho, y hecho por otra persona, requiere una
lectura atenta y ser capaz de interpretar, adaptar e incluso ampliar lo que
hemos encontrado. En esta sección veremos cómo y dónde obtener scripts
gratuitos y unas pautas esenciales para generalizar o adaptar dichos scripts.
5.1 Scripts gratuitos

La primera cuestión que debemos responder es ¿dónde busco?
Podemos acudir a nuestro buscador de Internet aplicando las
búsquedas avanzadas que hemos visto, pero aunque esto sea lo
primero que nos lancemos a hacer, es bueno tener una serie de sitios
de referencia a los que acudir. Aquí vamos a limitarnos a mostrar unos
pocos que cumplen esta función.
La primera web que vamos a repasar es www.lawebdelprogramador.

com. Ya hemos comentado algo sobre ella, pero además de tutoriales
también tiene una sección de código fuente. Encontraremos de muchos
lenguajes de programación, pero los relacionados con el desarrollo web
son de los más activos.

Vemos que disponemos en este momento de 228 scripts de lo más
variado y disponibles para su descarga. En cualquier caso siempre
deberemos verificar el tipo de licencia que el autor aplica sobre ellos
para asegurarnos del uso que podemos darle.
La siguiente página en la que se pueden encontrar scripts gratuitos

es www.javascriptkit.com. Está en inglés pero es cómoda de usar y se
encuentran con facilidad los contenidos. Tiene una sección con código
gratuito que además nos dicen que podemos usar de forma personal
o comercial (ver en la imagen la parte derecha y traducirla). Lo que no
permiten es que incluyamos sus scripts en CD o los redistribuyamos en
otros formatos.
Podemos encontrar muchos otros ejemplos de sitios web como estos,

teniendo en cuenta el grado de actualización y luego cerciorarnos de
que realmente podemos acceder a los scripts. A menudo requerirán
que nos registremos para así tener acceso ilimitado, incluso para tener
la posibilidad de subir y compartir nuestros propios scripts.
5.2 Generalización de códigos

Cualquier script que encontremos tendrá que pasar posteriormente por
un proceso de adaptación e incorporación a nuestra propia página. El
hecho de que sean funciones facilitará la tarea para añadirlo a nuestro
código. El uso de funciones es un elemento clave a la hora de escribir
código reutilizable y generalizable. Nosotros mismos deberemos
planificar nuestros scripts de manera que los aplicativos, es decir, las
funcionalidades, estén repartidas en secciones de código de manera
que si necesitamos en otra página realizar la misma función no sea
necesario reescribir, sino tan solo reutilizar.
Supongamos que queremos que en nuestras páginas cuando el

visitante pase el ratón por determinada zona, por ejemplo el pie de
página, se haga visible una capa en la que aparezca la información
concerniente al programador, política de uso, etc. Para ello
necesitaremos cambiar en tiempo de ejecución las características CSS
de una capa, en concreto deberemos cambiar su atributo visibility.
Además, el pie de página es algo que aparecerá en todas y cada una de
las páginas, y por lo tanto necesitamos un script fácilmente implantable

en todas las páginas. La mejor idea es una función JavaScript que
responde al mismo evento y que actúe sobre las características de una
capa u otro elemento que, eso sí, deberá llamarse de la misma manera
o bien deberá pertenecer a la misma clase.
Consiste entonces en crear un código fácilmente modificable e

implantarlo en otra página. Si queremos de verdad optimizar la
modularidad deberíamos tener un archivo externo con todos los estilos
aplicables a la página, evitándonos tener que repetirlo en cada página.

- Hemos visto como buscar scripts e sitios especializados, ya sean
páginas oficiales o comerciales.
- También nos hemos provisto de una buena lista de páginas a las que
acudir en caso de duda, ya sean en forma de tutoriales, foros, etc.
- Hemos hecho una pequeña introducción a las bibliotecas JavaScript

así como a las habilidades técnicas necesarias para realizar consultas
por medio de operadores booleanos o de otros tipos.
- Por último hemos visto donde poder encontrar scripts gratuitos

que nos puedan orientar y donde poder compartir nuestros propios
scripts.

- AJAX (Asynchronous Javascript And XML): es una técnica cuyo
objetivo es conseguir aplicaciones web interactivas. Establece una
comunicación asíncrona, esto es que una vez cargada la página web
y ante la necesidad de nuevos datos, se comunica con el servidor
GLOSARIO
para recoger estos enviándolos a la página en un segundo plano de
manera que no se altera el contenido de la web. Esto se lleva a cabo
utilizando el objeto XMLHttpRequest.
- API (Application programming interface): se denomina así a los

métodos y propiedades que nos proporciona una aplicación para
interactuar con ella.
- Aptana: es una adaptación del IDE Eclipse pensada para desarrollo

web.
- Atributos o propiedades: son aquellos datos que definen el estado

de un objeto.
- Ayuda contextual: es aquella ayuda que cambia en función de la

situación, nos sugiere las posibles palabras reservadas de lenguaje
impidiendo así que se escriban mal.
- Bing: es el buscador de la empresa Microsoft, disponible desde

2009 es el buscador por defecto de su famoso navegador.
- Bucle: es una estructura en la que se repite una porción de código,

normalmente el que está insertado dentro de él. Tendremos bucles
que se repiten un número fijo de veces establecido de antemano o
aquellos que se repiten mientras se cumpla una condición fijada al
inicio.
- Código fuente: es el texto del programa escrito en un lenguaje

de programación, para que sea ejecutado debe compilarse para
generar un fichero ejecutable o bien ejecutado línea a línea,
interpretado.
- Coma flotante: es un sistema de representación de números reales

útil para operar con números muy pequeños o muy grandes. Es
el sistema que utilizan las CPU de los computadores para realizar
cálculos. Es muy similar a la notación científica, al utilizar este
sistema en código binario se utilizarán una cantidad arbitraria de
dígitos, por lo que se asume cierto error.
- Compilación: es el proceso mediante el cual el código en formato

texto de un lenguaje de alto nivel es transformado en código
máquina que entiende el sistema operativo.
- Control de errores: es un sistema para manejar los mensajes de

error producidos por un lenguaje de programación, evitando así que
se muestren directamente al usuario mensajes poco comprensibles
o incluso alarmantes.
- Datos booleanos: son aquellos sobre los que se aplica el álgebra

de Boole de dos dígitos. En informática estos dos valores pueden
ser 0 y 1 si hablamos de electrónica y trae o false si hablamos de
programación.
Glosario 189
- Datos de texto: son aquellos destinados a almacenar cadenas de
caracteres.
- Datos numéricos: son aquellos que representan a un número ya sea

entero, decimal o con distintas precisiones.
- DHTML o Dynamic HTML: es el uso conjunto de HTML, CSS y

JavaScript con el fin de crear páginas web dinámicas e interactivas.
- DOM (Document Object Model): es la jerarquía de objetos de

JavaScript. Es una interfaz a través de la cual se accede a las
propiedades de los navegadores por lo que podemos decir que es
una interfaz (API) que nos permite interactuar dinámicamente con
el contenido, estilo y estructura de un documento.
- DTD (Definición de tipos de documento): es la descripción de la

estructura y la sintaxis de un documento XML.
- ECMA (European Computers Manufacturers Association): es

el organimo que se encarga, entre otras cosas, de estandarizar
JavaScript.
- Error de ejecución: se produce cuando el programa está en

funcionamiento. Suelen interrumpir el uso por parte del visitante de
la página, por lo que es muy importante evitarlos.
- Error de sintaxis: es aquél que se comete al escribir el código, se

da en aquellos casos en los que no se ha escrito correctamente una
instrucción.
- Error en tiempo de ejecución: es un error que se produce cuando el

programa está ejecutándose de manera que interrumpe o impide el
buen funcionamiento del software.
- Error lógico: tienen su origen en la programación del código.

Pueden ser bucles infinitos, variables que no pueden ser cargadas o
que no existen, etc.
- Estructuras de control: son aquellas que nos permiten transformar

las variables en función de decisiones, comparaciones, repeticiones,
etc.
- Evento: es una acción desencadenada por un suceso, en informática

los eventos están relacionados con acciones del ratón y del teclado
principalmente.
- Evento: es una acción desencadenada por un suceso, en informática

los eventos están relacionados con acciones del ratón y del teclado
principalmente.
- Eventos del navegador: son aquellos producidos por alguna acción

del navegador, como abrir una ventana.
- Eventos del ratón: son aquellos que se desencadenan después de

una acción llevada a cabo por el ratón.
- Eventos del teclado: son aquellos que se desencadenan después de

una acción llevada a cabo por el teclado.
190 Glosario
- Función: es una porción de código que se llama desde el programa
principal al que se le pueden enviar algunos valores (parámetros) y
que una vez procesado devuelve un valor conocido como resultado
de la función.
- GET: es un método de envío de datos desde un formulario HTML,

usando GET tan solo podemos enviar hasta 500 bytes a la página
de destino y además no permite el envío de archivos adjuntos.
Otra característica importante es que los datos que se transmiten
aparecen formando parte de la URL de destino.
- Google Web Toolkit: librería centrada en facilitar el uso de AJAX,

está optimizado para ser usado en diversos navegadores.
- Google: buscador de contenido en Internet con sede en California, es

el más utilizado a nivel mundial.
- IDE (Integrated development enviroment, o en español entorno de

desarrollo integrado): Es un conjunto de programas que forma un
entorno gráfico a través del cual se facilita la tarea de programación.
Este entorno puede ser utilizado para un solo lenguaje o adaptarse
para varios.
- Indización: es el proceso de describir o representar el contenido

temático de un recurso de información. Al buscar un documento se
obtiene un índice de términos que será utilizado como herramienta
de acceso al contenido de dicho documento.
- Interfaz: en informática es la forma de intercambiar datos entre dos

programas o dos sistemas en general. A
- JavaScript: es un lenguaje de programación interpretado, orientado

a objetos, débilmente tipado y que aporta dinamismo a las páginas
web desde el lado del cliente. Es una adaptación del estándar
ECMAScript.
- Jerarquía: es un orden establecido de precedencia entre distintos

objetos. Aplicado al DOM es una estructura que determina que
objetos dependen de cuáles y como se relacionan entre ellos.
- JQuery: librería de JavaScript ampliamente utilizada, simplifica

muchos de los procesos necesarios a la hora de programar.
- Lenguaje débilmente tipado: quiere decir que las variables pueden

fácilmente cambiar de tipo de dato y que incluso no es necesario
que cuando definamos una variable indiquemos su tipo.
- Lenguaje máquina: es el lenguaje (de programación) que entiende

directamente el microprocesador que hace de CPU en la
computadora. Suele ser un paso intermedio entre el código binario y
un lenguaje de programación.
- Lenguajes compilados: son lenguajes que necesitan un proceso

de compilación para generar programas ejecutables. Ese programa
ejecutable será válido solo en el sistema operativo en el que ha sido
compilado.
Glosario 191
- Lenguajes de scripts: son lenguajes que la computadora evalúa línea
a línea sin ningún procesamiento previo. Son independientes del
sistema operativo ya que no generan programas ejecutables. Suelen
ser más veloces al ejecutarse.
- Lenguajes estructurados: se basan en el uso de subrutinas o

funciones para conseguir de esta manera una mayor modularidad y
por lo tanto evitar repetir código consiguiendo mayor claridad en los
programas.
- Método: es una rutina o subrutina que realiza una operación a

través de la cual se podrán manipular y cambiar los datos privados
de este. Siempre irá unido a un objeto.
- Mimetype (Multipurpose Internet Mail Extensions, extensiones

multipropósito de correo de Internet): son una serie de
convenciones destinadas al intercambio de archivos en Internet.
- Onabort: Se produce cuando se interrumpe la carga de una página,

de una imagen o de un objeto.
- Onblur: Se produce cuando un elemento pierde el foco.
- Onclick: se produce cuando se pincha con el ratón sobre un

elemento.
- Onchange: se produce cuando se cambia algo en un elemento de

formulario, el cambio no se produce efectivamente hasta que el
elemento pierde el foco.
- Ondragdrop: Este evento se produce cuando sueltas algo que

arrastrabas con el ratón.
- Onerror: Se produce cuando no puede cargarse la página o el

objeto.
- Onfocus: Se produce cuando un elemento, generalmente un

elemento de formulario, se selecciona recogiendo el foco sobre él.
- Onkeydown: se produce cuando se pulsa una tecla.
- Onkeypress: Se produce cuando dejas pulsada una tecla durante

unos instantes.
- Onkeyup: Cuando liberamos la tecla apretada también se

desencadena un evento.
- Onload: Se ejecuta al cargar una página, una imagen, los estilos, etc.
- Onmousedown: se produce cuando se pulsa un botón del ratón, se

produce antes de soltarlo de nuevo.
- Onmousemove: se produce cuando se mueve el puntero del ratón

por un elemento de la página.
- Onmouseout: se produce cuando el puntero abandona un

elemento.
192 Glosario
- Onmouseover. Se produce cuando el puntero entra en un elemento.
- Onmouseup: se dispara cuando el usuario suelta el botón del ratón.
- Onmove: Se produce cuando se mueve la ventana del navegador.
- Onreset: al hacer clic en el botón de reset de un formulario.
- Onresize: al redimensionar la ventana del navegador.
- Onselect: se produce cuando se selecciona texto en un campo. El

evento se dispara en el momento de la selección.
- Onsubmit: al pulsar el botón de enviar el formulario.
- Onunload: Este evento se ejecuta cuando se abandona una página.
- Operadores lógicos: son operaciones matemáticas basadas en

la aritmética binaria, es decir de dos dígitos, son la base de las
estructuras de control usadas en la programación.
- Operadores: son los que nos permiten manejar y transformar el

valor de una variable, como por ejemplo los operadores aritméticos.
- Ordinograma: es una representación por medio de símbolos del

flujo interno del programa. Se les conoce también con el nombre de
diagramas de flujo. En ellos se representa con detalle la lógica de las
operaciones y procesos que realiza el programa.
- Plugin: es sinónimo de complemento y sirve para aportar una nueva

funcionalidad a un programa por medio de un pequeño añadido que
se integra dentro del software original.
- POST: es un método de envío de datos desde un formulario HTML,

cuando utilizamos es método post los datos enviados no se ven en
la URL por lo que para formularios con datos personales o sensibles
es una buena idea su uso. Por regla general utilizaremos post
cuando queremos enviar una cantidad grande de información o bien
su destino es modificar o incorporarse a una base de datos.
- Programación Orientada a Objetos (POO): se basa en la

definición de unas entidades llamadas objetos, estos objetos
son independientes teniendo propiedades y capacidades, de
manera que puedan interactuar entre ellos. La idea es que esos
objetos representen otros objetos de la vida real, emulando su
comportamiento.
- Programación: es el proceso por el cual se escribe en un lenguaje la

solución a un problema resultando de ello lo que se conoce como
software.
- Pseudocódigo: es un lenguaje entre el natural, que utilizamos

habitualmente y el mucho más estricto utilizado para programar. A
pesar de ser más libre que un lenguaje de programación conserva
las reglas básicas de la programación estructurada. Servirá para
reproducir el problema que queremos solucionar.
Glosario 193
- Tabla de verdad: es una representación del comportamiento
de un operador lógico teniendo en cuenta todas las posibles
combinaciones que pueden tomar los valores de los operandos.
- Tabla de verdad: es una representación en la que se detalla el

comportamiento de un operador booleano usando numeración
binaria, donde un 1 es verdad y un 0 falso.
- Tutorial: manual sobre un tema que pretende que el alumno sea

autónomo para aprender por sí mismo por medio de dicho material.
Puede ser en formato físico, papel, o bien online.
- Variable: en programación una variable es una porción de memoria

que reserva el programa para almacenar un dato, en algunos
lenguajes en función del tipo de dato que se almacenará se reserva
una cantidad variable de memoria.
- Variable: es un elemento en el cual podemos guardar un valor

(en la memoria del ordenador) con el objeto de poder recuperarlo
posteriormente y utilizarlo en la ejecución del programa.
- Variables globales: son aquellas declaradas de manera que pueden

ser accedidas desde cualquier lugar del programa, incluidas sus
funciones y subprogramas.
- Variables locales: son aquellas que tienen un ámbito restringido, por

lo general una función. Solo son accesibles desde el lugar en el que
se han declarado.
- W3C (World Wide Web Consortium): es un consorcio internacional

que se encarga de definir los estándares que tienen que ver con
páginas web, HTML, CSS, etc.
- WYSIWYG (What You See Is What You Get): lo que ves es lo que
obtienes.
- XML (eXtensible Markup Language, lenguaje de marcas extensible):

es un lenguaje creado por la W3C con el objetivo de que sea un
estándar en el manejo e intercambio de datos.
- Yahoo: buscador de contenido en Internet, posiblemente es el

segundo en número de búsquedas a nivel mundial.
194 Glosario
- David Flanagan O´Reilly. JavaScript. The Definite Guide. 6Th
Edition.
BIBLIOGRAFÍA
- Client- Side JavaScript Reference. Netscape Communications
Corporation.
- ECMAScript Language Specification. Standard Ecma-262. 5.1

Edition / June 2011.
WEBGRAFÍA
- www.desarrolloweb.com.
- www.librosweb.es
Bibliografía 195

Metodología de Programación en Páginas Web Manual Teórico PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Metodología de Programación en Páginas Web Manual Teórico PDF

Caricato da

Copyright:

Formati disponibili

Metodología de

Colaborador del Instituto Nacional de Tecnologías Educativas y de

Desde hace once años es profesor técnico de Formación Profesional,

LO QUE HEMOS APRENDIDO ................................................................................................34

TEMA 2. LENGUAJE DE GUIÓN ...................................................................35

LO QUE HEMOS APRENDIDO ................................................................................................59

TEMA 3. ELEMENTOS BÁSICOS DEL LENGUAJE DE GUION .................. 61

LO QUE HEMOS APRENDIDO ................................................................................................93

TEMA 4 DESARROLLO DE SCRIPTS .........................................................95

LO QUE HEMOS APRENDIDO ............................................................................................... 112

TEMA 5. GESTIÓN DE OBJETOS DEL LENGUAJE DE GUION ................ 113

LO QUE HEMOS APRENDIDO ..............................................................................................140

LO QUE HEMOS APRENDIDO ..............................................................................................154

TEMA 7. BÚSQUEDA Y ANÁLISIS DE SCRIPTS .................................... 155

LO QUE HEMOS APRENDIDO ...............................................................................................187

GLOSARIO...................................................................................................................... ........... 189

BIBLIOGRAFÍA .................................................................................................................. .......195

Identificar las estructuras de programación y los tipos

Distinguir las propiedades y métodos de los objetos

Identificar scripts ya desarrollados que se adapten a las

TEMA 6. Los eventos

En nuestro caso, JavaScript es un lenguaje interpretado, por lo que la fase

A continuación tendremos que empezar la codificación del programa, en

Saltándonos la fase de compilación tendríamos que comenzar la fase de

1.1 Descripción y utilización de operaciones lógicas

- AND: Retorna true si y solo si los dos operandos son ciertos. En

Operando 1 Operando 2 Resultado

En la tabla se han utilizado valores binarios, donde el 1 equivale a true y el 0 a false.

12 Tema 1 / Metodología de la programación

Por completar vamos a añadir las tablas de verdad de algunos

- Tabla de verdad operador NAND (NOT AND)

Operando 1 Operando 2 Resultado

- Tabla de verdad del operador NOR (NOT OR)

Operando 1 Operando 2 Resultado

Metodología de programación en páginas web 13

Operando 1 Operando 2 Resultado

Usaremos estos operadores lógicos cuando utilicemos estructuras

1.2 Secuencias y partes de un programa

La cabecera es donde debemos explicar resumidamente qué hace el

La siguiente parte de un programa es la zona de definición de variables;

14 Tema 1 / Metodología de la programación

JavaScript además es un programa en el que usan a menudo funciones,

2.1 Descripción de un ordinograma

Debe guardar una serie de normas básicas:

- Debe existir un principio y un final claros y unívocos.

- El flujo va de arriba hacia abajo, pudiendo existir bifurcaciones

- Los símbolos utilizados deben ser estándar y representar los

- Los símbolos deben conectarse de manera que quede claro, con un

- Los cruces de líneas están prohibidos.

Un esquema básico para cualquier ordinograma puede ser:

- Entrada de datos (si los hubiera).

- Salida de resultados (a pantalla, a fichero, etc.).

Metodología de programación en páginas web 15

- Terminal: indica el principio o fin del algoritmo.

- Proceso: indica una operación, puede ser un cálculo matemático,

- Entrada/Salida: recoge o escribe los datos de una fuente o a un

- Decisión: incluye una condición en el algoritmo, en función del valor

- Conexión: conecta dos partes distintas del programa.

- Conexión externa: conecta dos programas distintos.

- Subprograma: también incluimos aquí las funciones, utilizaremos

- Comentario: también son útiles a la hora crear ordinogramas.

- Impresora: se envía un resultado a la impresora.

- Pantalla: se envía un resultado a la pantalla.