Fundamentos de JavaScript

Índice de contenidos
Introducción............................................................................................................................................................... 4
La evolución de la Web ................................................................................................................................... 4
Estándares Web ............................................................................................................................................... 5
HTML5 y CSS3 .................................................................................................................................................. 5
JavaScript .......................................................................................................................................................... 5
Introducción a JavaScript ......................................................................................................................................... 6
La etiqueta (script) ........................................................................................................................................... 6
Contenido alternativo ..................................................................................................................................... 7
Variables ........................................................................................................................................................... 8
Tipos de datos................................................................................................................................................ 11
Operadores .................................................................................................................................................... 16
Cuadros de diálogo ....................................................................................................................................... 22
Fundamentos de la programación ....................................................................................................................... 23
Estructuras de decisión................................................................................................................................. 24
Expresiones lógicas ....................................................................................................................................... 27
Estructuras de repetición ............................................................................................................................. 28
Definir funciones ........................................................................................................................................... 29
Llamar funciones ........................................................................................................................................... 34
Ámbito de las variables................................................................................................................................. 35
Objetos y arrays en JavaScritp ............................................................................................................................... 36
Introducción ................................................................................................................................................... 36
La jerarquía de objetos ................................................................................................................................. 36
Propiedades y eventos.................................................................................................................................. 38
Métodos ......................................................................................................................................................... 43
Arrays .............................................................................................................................................................. 52
Los objetos location e history................................................................................................................................ 57
¿Qué es una URL? .......................................................................................................................................... 57
El objeto location ........................................................................................................................................... 59
Actualizando la dirección.............................................................................................................................. 60
El objeto history ............................................................................................................................................. 61
El objeto document................................................................................................................................................. 62
Introducción ................................................................................................................................................... 62
La propiedad title .......................................................................................................................................... 63
El método write.............................................................................................................................................. 64
El conjunto de images ................................................................................................................................... 65
El objeto form .......................................................................................................................................................... 65
Formularios HTML ......................................................................................................................................... 65
El conjunto forms .......................................................................................................................................... 73
La propiedad elements ................................................................................................................................. 76
Validar la información ................................................................................................................................... 76
¿Cuándo realizar la validación? .................................................................................................................... 77
Tipos de validación ........................................................................................................................................ 78
Modelos de objetos del documento (dom) ......................................................................................................... 82
El árbol del documento................................................................................................................................. 82
Tipos de nodos y de relaciones ................................................................................................................... 83
Obtener elementos ....................................................................................................................................... 83
Obtener y establecer atributos .................................................................................................................... 84
Manipulación del dom............................................................................................................................................ 85
Recorrer el árbol del documento ................................................................................................................ 85
Modificar el valor de los nodos.................................................................................................................... 86
Crear, eliminar y reemplazar nodos............................................................................................................ 87
El método innerHTML ................................................................................................................................... 88
Modificar el formato dinámicamente ......................................................................................................... 89
Página 2 de 100
Buenas prácticas ..................................................................................................................................................... 89
Separar estructura y comportamiento ....................................................................................................... 89
Añadir los manejadores de evento ............................................................................................................. 91
Detectar características de los navegadores ............................................................................................. 92
Ejemplo: Una galería fotográfica ................................................................................................................. 92
Ejemplo: La estructura de la página ............................................................................................................ 95
Ejemplo: El código JavaScript........................................................................................................................ 97

Página 3 de 100
Introducción

La evolución de la Web

La Web es ahora denominada así por las evoluciones que ha venido sufriendo en el transcurso del tiempo.

La Web 1.0
Empezó en los años 60's junto al Internet, de la forma más básica que existe, con navegadores de solo
texto, como ELISA, era bastante rápido pero muy simple. Después en los 90 surgió HTML (Hyper TextMarkup
Language) como lenguaje hipertexto e hizo que las páginas Web sean más agradables a la vista y puedan
contener componentes como imágenes, formatos y colores. Los primeros navegadores visuales fueron
Netscape e Internet Explorer.

Esta Web es de solo lectura, ya que el usuario no puede interactuar con el contenido de la página (ningún
comentario, respuesta, etc). Estando la información totalmente limitada a lo que el Webmaster pueda publicar.

La Web 2.0
Es un concepto que se originó en una sesión de brainstorming (o lluvia de ideas) entre Dale Dougherty de
O’Really y Craig Cline de MediaLive International, quienes estaban preparando una conferencia y decidieron
hablar del renacimiento de la Web después de la crisis de los punto com en 2001, en la que fracasaron
páginas Web de muchas empresas.

A partir de estas ideas, en una conferencia en octubre de 2004, caracterizan a la Web 2.0 como una nueva
actitud o evolución de la Internet, que se resumía en tres principios básicos: la web como plataforma, la
inteligencia colectiva y la arquitectura de la participación.

Dicho de otro modo, este término propuesto por Tim O'Reilly se refiere a una segunda generación en la
historia del desarrollo de tecnología Web, basada en comunidades de usuarios y en una amplia gama de
herramientas, como las redes sociales, blogs, wikis y otros, que fomentan la colaboración y el intercambio de
información. La Web2.0 es también llamada Web social por el enfoque colaborativo y de construcción social
de esta herramienta, donde el usuario es el ente más importante de información.

La Web 3.0
Es considerada también como una extensión de Web Semántica definida por el premio Nobel Sir Timothy “Tim”
John Berners – Lee. Y trata de poder enriquecer la comunicación mediante metadatos semánticos (ontologías)
que aportan un valor añadido a la información, la diferencian y la hacen más inteligente. Por lo que los
contenidos ahora ya no son tratados por su sintáctica sino por su semántica.

La Web 4.0
Es un término que se va acuñando recientemente y trata de movernos hacia una Web Ubicua donde el objetivo
primordial será el de unir las inteligencias, para que tanto las personas como las cosas se comuniquen entre sí
para generar la toma de decisiones.

Página 4 de 100
Estándares Web

Los estándares web son especificaciones y protocolos que describen el comportamiento de la World Wide Web
y compatibilizan entre sí las diferentes tecnologías en las que se basa. Estos estándares se caracterizan por
ser abiertos, es decir, no estar cubiertos por patentes o licencias de uso, y otorgan una interoperabilidad entre
los sitios web y las diferentes herramientas para interactuar con ellos, como navegadores web, software de
desarrollo de páginas, lectores especializados, entre otros. Se presentan en forma de especificaciones técnicas
dirigidas a los desarrolladores de tecnologías web, con la finalidad de que estos las implementen.

HTML5 y CSS3

Para la creación de páginas web se usa el lenguaje llamado Hypertext Markup Language o HTML. Un lenguaje
de marcas que permite codificar un documento.

Junto con el texto, se incorporan etiquetas o marcas que contienen información adicional acerca de la
estructura del texto (listas, párrafos, tablas, etc) o su presentación.

Dicho de otro modo, un archivo de texto puede incluir marcas (directivas o etiquetas) que lo transformen en
un documento HTML.

La sintaxis de HTML, de las que nos ocuparemos en este curso, está establecida por el W3C (World Wide Web
Consortium). La principal actividad de este organismo es desarrollar protocolos y directrices que aseguren el
crecimiento de la Web a largo plazo. Los estándares del W3C definen las partes claves que hacen que la World
Wide Web (WWW) funcione.

Por tanto, es el W3C quien determina como es una directiva HTML, cuál es su uso adecuado, que atributos
tiene, que valores pueden tomar esos atributos, etc.

Para más información sobre el W3C consultar la su web [Link]

Ante cualquier duda relacionada con el uso de HTML, la fuente de información de referencia es el W3C.

CSS es un lenguaje de estilo que define la presentación de los documentos HTML. Por ejemplo, CSS abarca
cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo, posicionamiento
avanzado y muchos otros temas.

Es posible usar HTML, para añadir formato visual a los sitios web. Sin embargo, CSS ofrece más opciones y es
más preciso y sofisticado; además HTML, no está orientado a este tipo de uso estando desaconsejado.

Hoy en día, CSS está soportado por todos los navegadores.

JavaScript

JavaScript es un lenguaje de programación que utilizamos para crear Webs dinámicas.

Debemos entender como dinamismo los efectos de movimiento y la gestión de eventos.

Página 5 de 100
Las principales características de JavaScript son:

1.
Es un lenguaje interpretado por el navegador (recordemos que se trata de un lenguaje cliente), lo que quiere
decir que no existe un proceso de compilación como el de otros lenguajes.

2.
No tiene nada que ver con Java a pesar de su nombre, fue bautizado así estrictamente por razones
comerciales. Como muchos otros lenguajes de programación, sí que comparte parte de su sintaxis.

3.
Se ejecuta en sandbox, por lo que no se tiene acceso a recursos externos al navegador como el explorador
de archivos, periféricos, etc.

4.
Es estándar, rápido y versátil.

5.
Al ejecutarse en el navegador es compatible con todo tipo de dispositivos.

6.
Es un lenguaje orientado a objetos, pero no tiene ni clases ni herencia. Tiene un objeto “object” a partir del
cual se obtienen los demás objetos por clonación. Podemos entender la definición de objetos en JavaScript como
una especie de plantilla que podemos clonar con diferentes estados.

Introducción a JavaScript

La etiqueta (script)

La etiqueta <script> permite la inserción de códigos script, como puede ser JavaScript en un documento web
del lado del cliente. El código se puede insertar directamente entre las etiquetas o haciendo referencia a un
documento externo el cual contiene el código script a ejecutar. En este último caso la etiqueta de script no ha
de tener contenido.

Los “navegadores” o visualizadores realizan la carga del documento web de forma secuencial, cuando el
navegador se encuentra con una etiqueta de script y esta contiene el atributo src, puede provocar que si
el script es muy lento en su ejecución o cuando se carga el script y este hace referencia a un elemento del
documento web, que no ha sido cargado todavía, pueda producirse un error de ejecución en el documento.

Para evitar estas situaciones se ha de plantear donde situar los códigos de script, aunque inicialmente se
plantea que estos se carguen en el encabezado, realmente se pueden cargar en cualquier parte del documento
web. Por lo tanto, es conveniente situar los script después de los elementos del documento web a los cuales
hagan referencia. Una técnica muy utilizada era situar los scripts al final del documento web, antes de la
etiqueta de cierre de este.

Página 6 de 100
Contenido alternativo

noscript

Aporta contenidos alternativos al elemento script. las aplicaciones de usuario que no soporten scripts deben
mostrar en su lugar el contenido de este elemento.

Sus etiquetas son...

<noscript> y </noscript> (ambas obligatorias).

Está definido como...

elemento en bloque.

Crea una caja...

en bloque.

Puede (y debe) contener...

uno o más elementos en bloque. Con un doctype transicional puede contener cero o más elementos en
bloque.

atributo descripción
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.
style Permite especificar información de estilo. Por defecto, estilos CSS.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.
dir Indica la dirección de texto y tablas.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup.

<script type="text/javascript">
Aquí un script que genera un listado
</script>

<noscript>
<p> Aquí un enlace a un <a href="/datos/[Link]">listado</a> alternativo </p>
</noscript>

Página 7 de 100
Variables

Al tratarse de tipado dinámico, no las declaramos especificando su tipo, sino que las declaramos:

Asignándole un valor

x = 42

Con la palabra reservada “var"

var x

Bien ambos

var x = 42

En varias lineas

var lastname="Doe", age=30, job="carpenter";

NOTA: Existe una diferencia entre declarar la variable con la palabra reservada “var” o sin ella. Esta diferencia
es relativa a la visibilidad de las variables cuando trabajamos con funciones, por lo que de momento la
podemos usar u omitir ya que no tiene ninguna implicación.

El tipado dinámico nos permite utilizar una misma variable para almacenar distintos tipos de datos:

var x=23
[Link](x)
x="Miau"
[Link](x)

Como vemos en los siguientes ejemplos, el hecho de que no sea necesario especificar el tipo, no implica que
no existan diferentes tipos. Tenemos:

Enteros

x=4

Decimales

Página 8 de 100
 x=44.2

Cadenas de texto

x= “Hola mundo” o x=’Hola Mundo’

Booleanos

x= true o x=false

Ejemplos:

El identificador de una variable debe estar formado únicamente por letras números y los símbolos: $ y _.
Además, el primer carácter nunca podrá ser un número.

Por convenio, utilizamos camelCase para variables y mayúsculas para constantes. Es importante resaltar que,
a diferencia de otros lenguajes como Java, no existe una palabra reservada para declarar constantes, por lo
que se tratará de variables con las que el programador se comprometa a no cambiarles el valor.

Responde a la siguiente pregunta:

Página 9 de 100
¿Son correctos estos scripts?

Solución:

Explicación: El primer script muestra una correcta aplicación del tipado dinámico. El segundo, presenta un
identificador no admitido puesto que comienza por un número. El tercero intenta leer una variable
(tuNumero) no declarada (Recordar que JavaScript diferencia entre minúsculas y mayúsculas). El último script
se puede interpretar como correcto puesto que funciona, o como incorrecto puesto que estamos utilizando
mal la convención de nombrado de las constantes.

Página 10 de 100
Tipos de datos

En JavaScript se distinguen cuatro tipos de variables: de tipo numérica, texto (string), booleanas y arreglos. A
continuación describiremos cada uno de ellas:

Numéricas
Se pueden almacenar números en variables, ya sea números enteros (“interger” como el número 30 ó números
decimales como 2.456 (también llamados números flotantes o de coma flotante "number"). No es necesario
declarar el tipo de las variables en JavaScript, a diferencia de otros lenguajes de programación. Cuando le
otorgamos a una variable un valor numérico, no incluye comillas:

let myAge= 17;

Cadenas de caracteres (Strings)

Las strings (cadenas) son piezas de texto. Cuando otorgamos a una variable un valor de cadena, debemos
encerrarlo entre comillas simples o dobles; de lo contrario, JavaScript intenta interpretarlo como otro nombre
de variable.

let SaludoDeTarde = 'Buenas Tardes';

Booleanos
Los booleanos son valores de verdadero o falso (true o false). Estos, generalmente se utilizan para probar una
condición, después de lo cual se ejecuta el código según corresponda. Así, por ejemplo, un caso simple sería:

let iAmAlive = true;

Arreglos
Un arreglo es un objeto único que contiene múltiples valores encerrados entre corchetes y separados por
comas. Por ejemplo:

let myNameArray = ['Pepe', 'Pablo', 'Luis'];

let myAgeArray = ['20', '27', '35'];

Una vez que se definen estos arreglos, podemos acceder a cada valor por su ubicación dentro del arreglo. Por
ejemplo:

let myNameArray = ['Pepe', 'Pablo', 'Luis'];

let myAgeArray = ['20', '27', '35'];
[Link](myNameArray[0]); // debería devolver 'Pepe'
[Link](myAgeArray[2]); // debe devolver 35

El resultado de salida será el siguiente:

Página 11 de 100
Los corchetes especifican un valor de índice correspondiente a la posición del valor que deseamos devolver.
Con este ejemplo hemos notado que los arreglos en JavaScript tienen índice cero: el primer elemento está en
el índice 0 y nos muestra “Pepe” como resultado.

Responde la siguiente pregunta.

¿Qué cuatro variables se distinguen en JavaScript?
En JavaScript se distinguen cuatro tipos de variables: de tipo numérica, texto (string), booleanas y arreglos.

Muchos lenguajes de programación tienen el concepto de una constante como un valor, que una vez declarado
no se puede modificar.
Hay muchas razones positivas para hacer esto, desde la seguridad (si un script de un tercero cambia dichos
valores, podría causar problemas) hasta la depuración y la comprensión del código (es más difícil cambiar
accidentalmente valores que no se deben cambiar y estropear códigos claros).

Palabra clave 'const'

En los primeros días de JavaScript, las constantes no existían. En JavaScript moderno, tenemos la palabra clave
const, que nos permite almacenar valores que nunca se podrán cambiar:

const daysInWeek = 7;
const hoursInDay = 24;

const funciona exactamente de la misma manera que let, excepto que a const no le podemos dar un nuevo
valor. En el siguiente ejemplo, la segunda línea de seguro nos arrojará un error:

const daysInWeek = 7;
daysInWeek = 8;

Como hemos expuesto en apartados anteriores, en las versiones antiguas de JavaScript solo teníamos una
forma de declarar variables. Se hacía con la palabra clave "var" seguida del nombre de variable a declarar (o
variables separadas por comas).

En las nuevas versiones, se ha agregado la palabra clave let para declarar variables. Su uso es similar a var,
pero las variables declaradas solo son válidas dentro del bloque de código donde se encuentra el comando
let. El alcance de la variable var solo tiene alcance de función y variables globales.

Por ejemplo
{
var i = 9;
}

Página 12 de 100
 [Link](i); // 9

{
let j = 9; // j variable
solo es válida dentro de llaves
}
[Link](j);
// Uncaught ReferenceError: j is not defined

El resultado sería

Si en un bloque existen comandos let y const, las variables declaradas por estos comandos formarán un ámbito
cerrado desde el principio. Cualquier uso de estas variables antes de la declaración dará como resultado un
error. En resumen, en el bloque de código, antes de usar el comando let para declarar una variable, la variable
no está disponible. Esto se llama gramaticalmente "Zona muerta temporal”

Por ejemplo:
//var
var a = 99; // variable global a f
(); // f es una función, aunque se define después de la llamada, la
declaración de la función se elevará a la parte superior del alcance.
[Link] (a); // a => 99, esta es la a de la variable global
function f() {
[Link]
(a); // La variable actual a es la siguiente variable a después de
promocionar la declaración, el valor predeterminado no está definido
var a = 10;
[Link](a); // a => 10
}
// Resultado de salida:
undefined
10
99
//let [Link] (aicoder); // Error: Error de referencia no capturado ...
let aicoder = '[Link]';

En donde el resultado de salida nos dará los valores y el error:

Let también nos permite trabajar de forma eficiente con los bucles (for loop), ya que es ideal para el
alcance de nivel dentro de estos. El cuerpo del bucle for en javascript es especial, pues cada ejecución es un
nuevo alcance de bloque independiente. Después de que la variable declarada con let se pase al alcance del
cuerpo del bucle for, no cambiará y no se verá afectada por el mundo exterior.

Página 13 de 100
Los siguientes ejemplos demuestran lo antes expuesto:

Ejemplo 1
for (let i = 0; i < 10; i++) {
setTimeout(function() {
[Link] (i);
}, 0);
}

El resultado de salida será el siguiente:

Ejemplo 2
var array = [];
for (var i = 0; i < 10; i++) {
array[i] = function () {
[Link](i);
};
}
array[6]();

El resultado de salida será el siguiente:

Página 14 de 100
En el código anterior, la variable i es declarada por el comando var y es válida en el ámbito global, por lo
que solo hay una variable i globalmente. Cada vez que el bucle, el valor de la variable i cambiará, y el archivo
[Link] (i) dentro de la función asignada a la matriz array en el bucle, donde i apunta a la i global. Es decir,
el i en todos los miembros de la matriz array apunta al mismo i, lo que resulta en la salida de la última ronda
del valor i, que es 10.

Esto implica el mecanismo de JavaScript buscando variables.

var array = [];

for (let i = 0; i < 10; i++) {
array[i] = function () {
[Link](i);
};
}
array[6]();

El resultado de salida será el siguiente:

En el código anterior, la variable i se declara por let y la corriente i solo es válida en el ciclo actual, por
lo que cada ciclo de i es en realidad una nueva variable, por lo que la salida final es 6. Puede preguntar si la
variable i de cada ronda se vuelve a declarar, ¿cómo sabe el valor de la ronda anterior y calcula el valor de
la ronda actual?

Esto se debe a que el motor de JavaScript recuerda internamente el valor de la ronda anterior. Cuando se
inicializa la variable i de esta ronda, se calcula sobre la base de la ronda anterior.

Por último, Las variables definidas por let no permiten declaraciones repetidas. Por ejemplo:

let a = 0;
let a = '123';
// Uncaught SyntaxError: Identifier 'a' has already been declared

El resultado de salida será el siguiente

Página 15 de 100
Operadores

Por sí solas las variables no hacen gran cosa, necesitamos operadores. Estos permiten manipular el valor de
las variables, realizar operaciones matemáticas con sus valores y comparar valores.

Existen varios tipos:

Asignación

Lógicos

Matemáticos

Relacionales

Página 16 de 100
Operador de asignación

Es el operador más utilizado y el más sencillo. Se utiliza para guardar un valor en una variable.

Está compuesto de dos partes:

Izquierda del igual Derecha del igual

Nombre de la variable Expresión (variables, valores, condiciones lógicas…)

Caso especial: Incremento (++) y decremento (--). Estos operadores pueden ser considerados a la vez
matemáticos y de asignación. Son operadores unarios, por lo que una misma variable es leída y modificada.

Pueden ir:

• Delante de la variable (su valor se incrementa antes de ejecutar la sentencia donde aparece).

• Después de la variable (su valor se incrementa después de ejecutar la sentencia donde aparece).

Responde a la siguiente pregunta:

¿Cuánto valen numero1 y numero2 en cada caso?

Solución: En el primer recuadro: numero3=7, numero1=6.

En el segundo numero3=8, numero1=6

Página 17 de 100
Operadores lógicos

Realizan una operación lógica. Devuelven un valor de tipo booleano.

Negación “Y” Lógico “O” Lógico

(!) (&&) (||)

Operadores matemáticos

Realizan operaciones matemáticas elementales

Suma (+)

Resta (-)

Multiplicación (*)

División (/)

Resto de la división entera (%)

Puedo combinarlos con el operador de asignación (+=, -=, *=, etc…).

Página 18 de 100
NOTA: El operador (+) se comporta como operador suma si el primer operando es numérico, y se comportará
como concatenación si se trata de una cadena de caracteres.

Operadores relacionales

Devuelven un valor booleano.

Mayor que (>)

Menor que (<)

Mayor o igual (>=)

Menor o igual (<=)

Igual que (==)

Distinto de (!=)

NOTA: El operador igual (==) es origen de un gran número de errores de programación. Nunca se debe

Página 19 de 100
confundir con el operador asignación (=).

Los operadores relacionales también pueden usarse para comparar cadenas de texto (alfabéticamente)

Sigue las indicaciones y responde a la pregunta:

Utilizando el archivo html5_min.html, crea un script en el que se declare un array con 10 posiciones. Pediremos
un numero al usuario entre 0 y 9 y mostraremos un alert con el resultado.

Nota: La función prompt es similar al alert, pero nos servirá para, además de mostrar un mensaje, recoger un
valor del usuario. Su utilización es la siguiente:

nombre=prompt(“Introduce tu nombre”); /*Mostrará una ventana emergente que además de

mostrar el mensaje, incluye una caja de texto para que el usuario introduzca el valor*/

Si nunca programaste en JavaScript, verás que no funciona. ¿Qué crees que está pasando?
Pista: Tiene que ver con los tipos de datos
Solución: Ya comprendimos que los tipos de datos existen aunque no se especifiquen en la declaración de
variables. Cuando hacemos a=prompt(“”), el sistema no puede saber que tipo de dato quiere introducir el
usuario, por lo que lo asume siempre como una cadena de caracteres:

posicion=prompt(“Introduce una posición entre 0 y 9”); //Si el usuario introduce 3, el valor de

posición será: “3”

alert(arr[posición]); // No estamos accediendo a la posición 3.

Página 20 de 100
Os presentamos las funciones parseInt y parseFloat. Estas reciben como parámetro un texto y devuelven el
valor numérico equivalente.

a=”3”;
anum=parseInt(a);
alert(anum+2); //Muestra 5

Repara, con esta información el ejercicio anterior para que cumpla su cometido correctamente.
Solución: posicion=parseInt(prompt(“Introduce una posición entre 0 y 9”))

Página 21 de 100
Cuadros de diálogo

Existen 3 tipos:

ALERT
Es el tipo más simple. Lo único que muestra es un mensaje con un botón de aceptar cuya única función es
cerrar el cuadro de diálogo y continuar con el contenido de la página. El código es extremadamente sencillo:

<script>
alert("Esto es un mensaje, no hace nada mas");
</script>

CONFIRM
Este tipo de cuadro de diálogo empieza a ser algo más útil que su compañero anterior. En este caso nos
mostrará lo mismo, pero con dos botones: aceptar y cancelar. Podemos programarlo para que realice una
acción diferente según el botón que decida pulsar.

Un ejemplo de cuadro de este tipo muy fácil de entender es el siguiente:

<script>
var confirmacion = confirm("Pulsa el botón que quieras");
if(confirmacion){
alert("Has pulsado aceptar");
} else {
alert("Has pulsado cancelar");
}
</script>

PROMPT
Este último tipo también tiene botón para aceptar y cancelar, pero además incluye un cuadro de texto en el
que el usuario puede introducir información. Un código base para entenderlo sería algo así:

<script>
var textoEscrito = prompt("Escribe un texto", "Texto");
if(textoEscrito != null){
alert("Has escrito " + textoEscrito);
} else {
alert("No has escrito nada");
}
</script>

Página 22 de 100
Fundamentos de la programación

Página 23 de 100
Estructuras de decisión

Estructura condicional

Permite tomar decisiones en función del valor de una variable. Las sentencias se ejecutan si se cumple la
condición:

Las llaves no son obligatorias si hay una única sentencia

Ejemplo
¿Se muestra el mensaje?

Respuesta: No, estamos usando el operador de asignación, no el de comparación

Al igual que en Java, cuando tenemos más de una opción, podemos utilizar el else y el else if

Página 24 de 100
Completa las condiciones de los if para que los mensajes alert se muestren de forma correcta:

Página 25 de 100
Solución:

Estructura switch

En ocasiones concatenamos demasiados else if para evaluar posibles valores de una variable. En ese caso
podemos utilizar la estructura switch.

Página 26 de 100
Bucle while

Repite una serie de sentencias mientras se repita una condición. Es importante tener en cuenta que los
operandos de la condición se modifiquen en alguna de las sentencias ligadas al bucle, puesto que en caso
contrario tendríamos un bucle infinito.

Este bucle tiene dos versiones, una en la que la condición es evaluada al principio y otra en la que la
condición es evaluada al final. En esta segunda versión (llamada do..while), siempre se ejecutan las sentencias
por lo menos una vez.

Expresiones lógicas

Los operadores lógicos se utilizan normalmente con valores booleanos (lógicos); cuando lo son, devuelven un
valor booleano. Sin embargo, los operadores && y || en realidad devuelven el valor de uno de los operandos
especificados, por lo que si estos operadores se utilizan con valores no booleanos, pueden devolver un valor
no booleano. Los operadores lógicos se describen en la siguiente tabla.

Operador Uso Descripción

AND expr1 Devuelve expr1 si se puede convertir a false; de lo contrario, devuelve expr2. Por lo
Lógico && tanto, cuando se usa con valores booleanos, && devuelve true si ambos operandos son
(&&) expr2 true; de lo contrario, devuelve false.
OR expr1 Devuelve expr1 si se puede convertir a true; de lo contrario, devuelve expr2. Por lo tanto,
lógico || cuando se usa con valores booleanos, || devuelve true si alguno de los operandos es
(||) expr2 true; si ambos son falsos, devuelve false.
NOT
Devuelve false si su único operando se puede convertir a true; de lo contrario, devuelve
lógico !expr
true.
(!)

Página 27 de 100
Estructuras de repetición

Bucle for

Permite repetir una o varias sentencias un número determinado de veces:

Inicialización
Valores iniciales de la variable que controla la repetición.

Condición
Que debe cumplirse para que las sentencias se ejecuten.

Actualización
Se ejecutan después de cada repetición. Normalmente actualiza la variable que controla la repetición.

Al necesitar un índice actualizable, su uso principal es el de recorrer arrays secuencialmente:

Tres consideraciones acerca de recorrer arrays en JavaScript:

1.
La propiedad “length” nos permite saber el número de elementos de un array. De esta forma, la condición
de parada del bucle anterior podría ser: i<dí[Link].

Esto es importante puesto que los arrays cuentan con el método push(obj) y splice(índice, numElems) para
añadir y eliminar elementos dinámicamente.

2.
No existe una estructura especial para crear arrays bidimensionales, pero habíamos dicho que, gracias a
la inferencia de tipos, podemos mezclar cualquier tipo de elemento en un mismo array y un array es un tipo
de elemento, por lo que…

Página 28 de 100
3.
Existe una versión resumida de este bucle que podemos utilizar cuando queramos recorrer de uno en uno
los elementos de un array:

Definir funciones

Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta y se
pueden reutilizar de manera sencilla. Facilitan mucho la organización, y por consiguiente el mantenimiento y
depuración de los programas.

Las funciones se declaran mediante la palabra reservada function y se invocan mediante su nombre y sus
parámetros entre paréntesis (el paréntesis se pondrá incluso si no tiene parámetros).

Al igual que en Java, las funciones pueden tener argumentos y retorno.

Argumentos
• Permiten especificar las entradas de la función.

• Ejemplo (suma): Los sumandos.

Página 29 de 100
Retorno
• Especifica el valor que devuelve la función.

• Ejemplo (suma): El resultado de la suma.

Al principio del tema, decíamos que la palabra reservada var no era relevante hasta el momento en el que se
explicasen las funciones. Esto es debido al ámbito de las mismas.

Página 30 de 100
Se definen dos ámbitos:

Ámbito local
La variable está definida en el ámbito de una función y sólo puede usarse en la misma.

Ámbito global
La variable está definida a nivel de programa y puede usarse en cualquier parte del mismo (incluidas
funciones).

• Dentro de una función, podemos definir una variable global si omitimos la palabra var.

NOTA: Una recomendación general para trabajar con JavaScript es agrupar toda la funcionalidad en
diferentes funciones en un archivo externo y utilizar los scripts dentro del propio documento HTML
solamente para hacer llamadas a dichas funciones.

Responde a la siguiente pregunta:

¿Cuál es la salida de los siguientes scripts?

Página 31 de 100
Solución:

En la primera se muestra:

• gana la de fueraEn el primer alert aún no se ha invocado a la función.

• gana la de dentroEn el alert interior de la función tiene preferencia la variable mensaje definida dentro
de la función. ¡Ojo! Al definirse con ámbito local, se trata de variables diferentes.

• gana la de fueraEl último alert vuelve a mostrar el valor de la variable global

En la segunda se muestra:

• gana la de fueraEn el primer alert aún no se ha invocado a la función.

• gana la de dentroDentro de la función modificamos el valor de la variable global, puesto que nos estamos
refiriendo a la misma.

• gana la de dentroAl tratarse de la misma variable, cuando la volvemos a mostrar en el exterior, el valor ya
está modificado.

Una función es un bloque de instrucciones de programa con nombre y que ejecutan una tarea muy concreta,
pudiendo devolver tras su ejecución un valor. Las funciones se pueden ejecutar llamándolas directamente
desde cualquier parte del script o mediante eventos de una página HTML.
Javascript posee una serie de funciones predefinidas o funciones globales (son métodos del objeto global
Function) y el programador puede crear las suyas propias.

Debemos recordar que todas las funciones son objetos Function. La forma básica de crear una función es
mediante la palabra clave function seguida del nombre que deseemos darle y unos paréntesis que pueden
contener nombres de variables que simbolizan los valores con los que deba trabajar la función; los parámetros.
Por último se escriben las instrucciones encerradas entre llaves “{ }”.
Los paréntesis deben escribirse aunque no haya parámetros.

Para los nombres de funciones seguimos las mismas reglas que para las variables: caracteres, dígitos y guion
bajo, debiendo comenzar por un carácter o el guión bajo.
También es recomendable dar a las funciones un nombre representativo de la operación que realize. Por
supuesto no debemos darle un nombre que ya exista en JavaScript.
A continuación, encerrada entre llaves escribimos las sentencias u órdenes en JavaScript. Opcionalmente
la función puede finalizar con la palabra clave return seguida de un valor, este valor será el que devuelva la
función al programa que la llame.

function sumar(suma1, suma2)

{
return suma1 + suma2;
}

Mediante este ejemplo creamos la función llamada sumar, que utiliza dos argumentos y lo que hace es sumar
estos argumentos. Por último devuelve el resultado de la operación, mediante la palabra clave return seguida
del valor que debe devolver.

Ahora en el siguiente código de programa usamos la función recién

definida:

Página 32 de 100
 var operacion;
var anterior = 4;
operacion = sumar(anterior, 5);
alert(operacion);

En este código llamamos a la función con los valores 4 y 5 como argumentos y almacenamos el resultado
en la variable operación. Observemos que uno de los argumentos se lo enviamos a la función dentro de una
variable y el otro como un número. El parámetro suma1 toma el valor de anterior y el parámetro suma2 toma
el valor 5. Hasta aquí el comportamiento de las funciones JavaScript es similar a cualquier otro lenguaje, pero
en JavaScript las funciones también son objetos.

Las variables usadas dentro de la función son locales a esa función, no se ven desde fuera.

function saludar(nombre)
{
nombre = "Hola "+nombre;
[Link] (nombre);
}
var nombre = "Juan";
saludar (nombre);
[Link](nombre);

El resultado de salida será el siguiente:

Página 33 de 100
Llamar funciones

Antes de llamar a la función la variable nombre contenía el valor Juan, dentro de la función la cambia el
contenido por Hola Juan y después sigue teniedo el valor original Juan.

En JavaScript los argumentos se pasan (envían) a la función por valor. Realmente lo que le enviamos entre
paréntesis es el valor de la variable, su contenido. La variable nombre de dentro de la función no es la misma
que la que definimos fuera. Solo hay una excepción. Los argumentos de tipo objeto se pasan por referencia,
es decir se envía el objeto, no una copia del mismo o su valor. Por tanto las modificaciones hechas dentro de
la función se mantienen al acabar.

Por ejemplo:
function ordenar(lista, fruta)
{
[Link](fruta);
return fruta;
}
var frutas = new Array("manzana","naranja","pera");
cesta = ordenar(frutas,"uvas");
[Link](frutas);
[Link](cesta);

El resultado de salida será el siguiente:

Antes de llamar a la función la lista de frutas (un objeto array) contenia "manzana", "naranja", "pera". La
función le añade un nuevo elemento "uvas". Esto ocurre porque frutas es un objeto denominado Array. Si
una función no recibe uno de los parámetros le asigna el valor undefined o bien el que le indiquemos en la
definición como valor por defecto. Esto es sumamente útil y se puede aprovechar como una manera de usar
parámetros opcionales.

A continuación exponemos otro ejemplo:

function saludar(nombre, saludo = "Hola")

{
return saludo +", "+nombre;
}
[Link]( saludar("Buenos días", "Juan"));
[Link]( saludar("Juan" ) );

El resultado de salida será el siguiente:

Página 34 de 100
Ámbito de las variables

El alcance de una variable es desde donde esta puede ser directamente accesible.

En JavaScript, hay dos tipos de ámbitos:

Ámbito global
Ámbito fuera de las funciones y se puede llamar desde cualquier función o parte del programa.

Ámbito local
Dentro de la función que se está ejecutando.

Ejemplo
<script type = "text/javascript">
var variableGlobal = "Esta es una variable global";
function cursoJavascript () {
var variableLocal = "Esta es una variable local";
[Link](variableGlobal);
[Link](variableLocal);
}

cursoJavascript();
< /script>

Resultado
Esta es una variable global
Esta es una variable local

Página 35 de 100
Objetos y arrays en JavaScritp

Introducción

JavaScript está diseñado bajo un paradigma simple basado en objetos.

Un objeto es una colección de propiedades y una propiedad es una asociación entre un nombre (o
clave) y un valor.

El valor de una propiedad puede ser una función, en cuyo caso la propiedad es conocida como un
método.

La jerarquía de objetos

Visión general sobre objeto

Los objetos en JavaScript se pueden comparar con objetos de la vida real. En JavaScript, un objeto es una
entidad independiente con propiedades y tipos. Se puede comparar con una taza, por ejemplo. Una taza es
un objeto con propiedades: posee color, forma, diseño, peso y material. Del mismo modo, los objetos de
JavaScript pueden tener propiedades que definan sus características.
Creación de un objeto

Un objeto en JavaScript también se puede definir como un tipo de dato, así como números o cadena de
caracteres. Como tipo de dato los objetos pueden ser contenidos en una variable. Existen varias formas para
construir un objeto de JavaScript, de las cuales podemos mencionar las siguientes:

Como Objeto literal, usando pares de llaves {...}

const objectLiteral = {};
[Link](typeof objectLiteral); //-> Object
let Person = {
name: "Juan"
};
[Link]([Link]);

El resultado de salida será el siguiente:

Como constructor de objeto el cual utiliza la palabra reservada new

const objectConstructor = new Object();
[Link](typeof objectConstructor); //-> Object

Página 36 de 100
 let Person = new Object();
[Link] = "Juan";
[Link]([Link]);

El resultado de salida será el siguiente:

Utilizando el método de Objeto() [Link]()

const objectCreate = [Link](null);
[Link](typeof objectCreate); //-> Object
let Person = [Link](null);
[Link] = "John";
[Link](typeof Person);
[Link]([Link]);

El resultado de salida será el siguiente:

Utilizando una función en combinación de la palabra reservada new

function myObject() {};
const objectFunction = new myObject();
[Link](typeof myObject); //-> Function
[Link](typeof objectFunction); //-> Object
function Person(name) {
[Link] = name;
};
let john = new Person("Juan");
[Link](typeof Person);
[Link](typeof john);
[Link]([Link]);

El resultado de salida será el siguiente:

Página 37 de 100
Propiedades y eventos

Propiedades y métodos en los objetos

Las propiedades están asociadas entre un nombre (llave "key") y el valor dentro del objeto. Estos valores
pueden ser representados por cualquier tipo de datos. Las propiedades comúnmente hacen referencias a
características de algún objeto. En cambio, los métodos son funciones que pueden transformar los valores
en las propiedades del objeto.
Acceso a propiedades del objeto

Existen dos maneras de acceder a las propiedades de un objeto y son las siguientes:

Con anotación de puntos

const Person = {
firstName: 'Rodrigo ',
lastName: 'Gil',
sayName: function() {
[Link]([Link] + [Link]);
}
}
[Link]([Link]);

El resultado de salida será el siguiente:

Con anotación de corchetes

const Person = {
firstName: 'Rodrigo ',
lastName: 'Gil',
sayName: function() {
[Link]([Link] + [Link]);
}
}
[Link](Person['firstName']);

El resultado de salida será el siguiente:

Página 38 de 100
También podemos llamar métodos dentro de los objetos.

const Person = {
firstName: 'Steve ',
lastName: 'McNiller',
sayName: function() {
[Link]([Link] + [Link]);
}
}
[Link]();
Person['sayName']();

El resultado de salida será el siguiente:

Añadir o modificar propiedades de objeto

Para añadir propiedades al objeto o modificarlo, utilizamos el operador de asignación y cualquiera de los dos
tipos de anotación. Por ejemplo:

const Person = {
nombre: 'Rodrigo', apellido: 'Gil', sayNombre: function() {
[Link]([Link] + [Link]);
}
}
[Link] = 28;
[Link](Person); //-> {firstName: "Steve", lastName: "McNiller", sayName: ƒ,
age: 28}
Person['sex'] = 'Hombre'; [Link](Person); //-> {firstName: "Steve", lastName:
"McNiller", sayName: ƒ, age: 28, sex: "Male"
}

El resultado de salida será el siguiente:

Página 39 de 100
De la misma manera podemos añadir métodos:

const Person = {
nombre: 'Rodrigo',
apellido:'Gil',
sayName: function() {
[Link]([Link] + [Link]);
}
}
[Link] = 28;
Person['sex'] = 'Male';
[Link] = function() {
[Link]('Mi edad es ' + [Link])
};
[Link]();

El resultado de salida será el siguiente:

Remover propiedades del objeto

Para remover una propiedad dentro del objeto podemos utilizar la palabra reservada delete junto a la
propiedad que deseamos remover. Al remover la propiedad tendremos de vuelta el valor “True” indicando que
la propiedad ha sido removida con éxito.

const Person = {
nombre: 'Rodrigo',
apellido: 'Gil',
sayNombre: function() {
[Link]([Link] + [Link]);
}
}
[Link] = 28;
const confirmObjDel = delete [Link];

[Link](confirmObjDel); //-> true

[Link](Person);

Página 40 de 100
El resultado de salida será el siguiente:

Iteraciones a través de propiedades de objeto

Por medio de for...in

const Person = {
nombre: 'Rodrigo',
apellido: 'Gil',
edad: 28,
sayNombre: function() {
[Link]([Link] + [Link]);
}
}
for(let key in Person) {
[Link](Person[key]);
}

El resultado de salida será el siguiente:

Un evento no es más que una señal que se activa cuando algo sucede en una página web o documento. Todos
los nodos del DOM y ciertos atributos HTML pueden generar señales. Veamos una lista de los eventos más
utilizados:

Eventos de ratón
• click y dblclick – Cuando se hace clic o doble clic en uno de los elementos.

• contextmenu – Cuando se usa el botón derecho del ratón.

• mouseover y mouseout – Cuando el puntero se sitúa un elemento o sale de el.

• mousedown y mouseup – Cuando con el ratón hacemos clic y soltamos.

• mousemove – Cuando se mueve el ratón.

Página 41 de 100
 • mousewheel – Cuando se usa la rueda del ratón.

Eventos de HTML (formularios)

• load y unLoad – Cuando el navegador termina de procesar la página o cuando abandonamos esta para
irnos a otra.

• change – Cuando un elemento de formulario (select, text, textarea) pierde el foco del cursor y su valor ha
sido cambiado.

• submit – Cuando se envía el formulario.

• focus y blur – Cuando se activa o se hace uso de un elemento o cuando se pierde el enfoque de este (por
el usuario)

• select – cuando se selecciona el valor de un elemento de formulario (text, textarea)

• reset – Cuando se pulsa el botón reset de [Link] eventos: error, resize, scroll

Eventos de Teclado
• keydown, keyup y keypress – Cuando se presiona, se suelta o se mantiene presionada una tecla del
teclado.

Eventos del Documento

• DomContentLoaded – Cuando el código HTML es cargado y procesado.

Página 42 de 100
Métodos

Utilizando el método de Object() [Link]()

[Link] devuelve un array cuyos elementos son strings correspondientes a las propiedades enumerables
que se encuentran directamente en el objeto.

const Person = {
firstName: 'Steve ',
lastName: 'McNiller',
age: 28,
sayName: function() {
[Link]([Link] + [Link]);
}
}
const PersonArray = [Link](Person);
[Link](PersonArray); //-> ["firstName", "lastName", "age", "sayName"]

El resultado de salida será el siguiente:

Descriptor de propiedad del objeto

Cualquier objeto en JavaScript tiene un conjunto de propiedades y cada una de estas propiedades tiene un
descriptor. Este, último define el comportamiento de propiedad y propiedades propias. Esos métodos incluyen:

El [Link]

Este método define una nueva propiedad sobre un objeto, o modifica una ya existente, y devuelve el objeto
modificado. Un ejemplo sería:

let user = {};

[Link](user, "nombre", {
value: "Pedro",
configurable:
true,
writable:
true,
enumerable: true
});

El resultado de salida será el siguiente:

Página 43 de 100
Por defecto cuando definimos una propiedad dentro del objeto utilizando [Link], y no le
asignamos un valor utilizando value, el objeto creado nos mostrara el valor undefined

let user = {};

[Link](user, "Nombre", {
configurable: true,
writable: true,
enumerable: true
});
[Link]([Link]);

El [Link]

Este método nos permite definir varias propiedades a la vez.

let user = {};

[Link](user,
{
Nombre: {
value: "Pedro",
writable: true
},
getNombre: {
value: function() {
[Link]([Link]);
}
},
});
[Link]();

El resultado de salida será el siguiente:

A continuación queremos definir propiedades que nunca cambien y que sean constantes. Para ello tenemos

Página 44 de 100
este ejemplo:

let user = {};

[Link](user, "Nombre", {
value: "Paco",
writable: false,
configurable: false
});
[Link] = "Pedro";
[Link]([Link]);

Si queremos ocultar propiedades dentro de un objeto:

let user = {
Nombre: "Manuel",
Apellido: "Herrero"
};
[Link](user, "socialSegNum", {
value: "76-98-98", enumerable: false
});
for(let prop
in user) {
[Link](prop);
}

El resultado de salida será el siguiente:

El [Link] y el [Link]

El método [Link] devuelve un array con todas las propiedades (numerables o no)
encontradas en un objeto dado. y El método [Link]() devuelve un array de las propiedades de un objeto,
en el mismo orden como se obtienen en un loop normal.

const log = [Link];

let user =
{
Nombre: "Manuel",
Apellido: "Mendo"
};
[Link](user,
"socialSegNum", {
value: "76-98-98",
enumerable: false

Página 45 de 100
 });
log([Link](user)); //-> ["firstName", "lastName",
"socialSecNum"]
log([Link](user)); //-> ["firstName", "lastName"]

El resultado de salida será el siguiente:

El [Link]

[Link] devuelve un array con los valores correspondientes a las propiedades enumerables de un objeto.
Las propiedades son devueltas en el mismo orden a como lo haría un bucle for...in (la única diferencia es que
un bucle for…in también enumera las propiedades en la cadena de prototipo de un objeto).

const log = [Link];

let user =
{
Nombre: "Manuel",
Apellido: "Herrero"
};
[Link](user,
"socialSegNum", {
value: "76-98-98",
enumerable: false
});
log([Link](user));

El resultado de salida será el siguiente:

Página 46 de 100
El [Link]

Este método nos devuelve los descriptores de una propiedad específica que se encuentra dentro del objeto.

const log = [Link];

let user =
{
Nombre: "Manuel",
Apellido: "Mendo"
};
log([Link](user, "Nombre"));

El resultado de salida será el siguiente:

El [Link]

Este método es similar a [Link], con la diferencia diferencia es este nos devuelve
todas las propiedades que se encuentran dentro del objeto.

const log = [Link];

let user = {
Nombre: "Manuel",
Apelllido: "Mendo"
};
log([Link](user));

El resultado de salida será el siguiente:

Página 47 de 100
Getter and Setter

Son métodos que nos permiten acceder a datos de los objetos, para leerlos o asignar nuevos valores. El setter
lo que hace es asignar un valor y el getter se encarga de recibir un valor.

Por ejemplo:
let obj = {
get propNombre() {
// Getter
set propNombre(value) {
// Setter
}
}
const log = [Link];
let user = {
Nombre: "Juan",
Apellido: "Mendo"
};
[Link](user, "NombreCompleto", {
get: function() {
return [Link] + " " + [Link];
},
set: function(value) {
let parts = [Link](' ');
if([Link] == 2) {
[Link] = parts[0];
[Link] = parts[1]; }
else {
throw 'Invalid name format'
}
}
});
log([Link]);
[Link] = "Luis Herrero";
log([Link]);
log([Link]);
log([Link]);

El resultado de salida será el siguiente:

Página 48 de 100
Controles de estado del objeto

En ocasiones los objetos pueden estar en estado de lectura, escritura o desprotegidos, JavaScript nos provee
tres métodos para establecer y evitar cambios o usos. Estos métodos son: el [Link],
[Link] y el [Link]. A continuación se detalla cada uno de ellos:

El [Link]

Este método previene que nuevas propiedades sean agregadas a un objeto.

Por ejemplo:
const log = [Link];
let user =
{
Nombre: "Maria",
Apellido: "Rivas"
};
[Link](user);

[Link](user,
"edad", {
value: 22
});
[Link] = "veinte";

log([Link]);

El resultado de salida será el siguiente:

Página 49 de 100
[Link]

Este método determina si un objeto es extendible (si puede tener propiedades nuevas agregadas a éste) y
devuelve un valor booleano que nos notifica si el objeto puede ser extensible o no.

const log = [Link];

let user = {
nombre: "Maria",
apellido: "Rivas"
};

log([Link](user));
[Link](user);
log([Link](user));

El resultado de salida será el siguiente:

El [Link]

El método sella un objeto, previniendo que puedan añadirse nuevas propiedades al mismo, y marcando todas
las propiedades existentes como no-configurables. Los valores de las propiedades presentes permanecen
pudiendo cambiarse en tanto en cuanto dichas propiedades sean de escritura.

const log = [Link];

let user = {
nombre: "Pedro",
apellido: "Herrero"
};

[Link](user);
delete [Link];
log([Link]); //-> Pedro
[Link] = "Peter Jackson";
log([Link]); //-> undefined
[Link] = "Tomas";
log([Link]);

El resultado de salida será el siguiente:

Página 50 de 100
[Link]

Este método nos devuelve un valor booleano que nos notifica sí el objeto esta sellado. Devuelve true si el
objeto está sellado, de lo contrario devuelve false. Un objeto está sellado si no es extensible y si todas sus
propiedades no se pueden configurar y por lo tanto no removibles (pero no necesariamente no modificables).

const log = [Link];

let user = {
nombre: "Peter",
apellido: "Jackson"
};
[Link](user);
log([Link](user)); //-> true

El resultado de salida será el siguiente:

[Link] y [Link]

El método [Link] método es similar a [Link], la diferencia es que congela un objeto, es decir:
impide que se le agreguen nuevas propiedades; impide que se puedan eliminar las propiedades ya existentes;
impide que dichas propiedades, o su capacidad de enumeración, configuración, o escritura, puedan ser
modificadas. En cambio [Link] se utiliza para devolvernos un valor booleano para notificar si nuestro
objeto está congelado o no.

Por ejemplo:
const log = [Link];
let user = {
nombre: "Pedro",
apellido: "Mendo"
};
[Link](user);
[Link] = "Pedro Mendo";
log([Link](user)); //-> true
log([Link]);
[Link] = "Tomas";
log([Link]); //-> Pedro

El resultado de salida será el siguiente:

Página 51 de 100
Arrays

Los objetos te permiten almacenar colecciones de datos a través de nombres. Eso está bien.

Pero a menudo necesitamos una colección ordenada, donde tenemos un 1ro, un 2do, un 3er elemento y así
sucesivamente. Por ejemplo, necesitamos almacenar una lista de algo: usuarios, bienes, elementos HTML, etc.

No es conveniente usar objetos aquí, porque no proveen métodos para manejar el orden de los elementos. No
podemos insertar una nueva propiedad “entre” los existentes. Los objetos no están hechos para eso.

Existe una estructura llamada Array (llamada en español arreglo o matriz/vector) para almacenar colecciones
ordenadas.

Declaración

Hay dos sintaxis para crear un array vacío:

let arr = new Array();

let arr = [];

Casi siempre se usa la segunda. Podemos suministrar elementos iniciales entre los corchetes:

let fruits = ["Apple", "Orange", "Plum"];

Los elementos del array están numerados comenzando desde cero.

Página 52 de 100
Podemos obtener un elemento por su número entre corchetes:

let fruits = ["Apple", "Orange", "Plum"];

alert( fruits[0] ); // Apple

alert( fruits[1] ); // Orange
alert( fruits[2] ); // Plum

Podemos reemplazar un elemento:

fruits[2] = 'Pear'; // ahora ["Apple", "Orange", "Pear"]

…o agregar uno nuevo al array:

fruits[3] = 'Lemon'; // ahora ["Apple", "Orange", "Pear", "Lemon"]

También podemos usar alert para mostrar el array completo.

let fruits = ["Apple", "Orange", "Plum"];

alert( fruits ); // Apple,Orange,Plum

Un array puede almacenar elementos de cualquier tipo.

// mezcla de valores
let arr = [ 'Apple', { name: 'John' }, true, function() { alert('hello'); } ];

// obtener el objeto del índice 1 y mostrar su nombre

alert( arr[1].name ); // John

// obtener la función del índice 3 y ejecutarla

arr[3](); // hello

Colección de variables que identificamos con un nombre común

Tiene como características:

1.
Cada variable puede tener el mismo tipo o un tipo diferente.

2.
Podemos acceder a cada elemento del array individualmente, con un índice que va entre 0 y el número de
elementos del array menos 1.

3.

Página 53 de 100
Podemos mezclar elementos de distinto tipo en un mismo array.

4.
Cómo en otros lenguajes, los arrays pueden ser asociativos. De esta forma, en vez de índices podemos
asociar un identificador diferente a cada posición:

Para encontrar un valor en una lista de tipo array, se puede hacer con un bucle for o un método de recorrido
del array. Pero existen métodos que facilitan la tareas, tales como:

• every(): verifica una condición para todos los elementos del array

• some(): verifica si algún elemento cumple una condición dada

• includes(): comprueba si un elemento está en el array

• find(): dice cuál es el primer elemento que cumple una condición dada

Son métodos usados para buscar si un valor determinado se encuentra en un array o si hay un valor que
cumpla con una condición dada.
Los dos primeros métodos usan una función de llamada (callback function en inglés). Este tipo de funciones
puede recibir hasta tres argumentos, por orden: valor del elemento testeado, índice del mismo y el array

Página 54 de 100
completo.

Y también, como es habitual con estas funciones, el método puede usar un segundo que será la variable this en
el cuerpo de la función. Es útil si se necesita otra variable para la comprobación. Así every() determina si todos
los elementos de un array cumplen una condición, condición que se da mediante una función de llamada. El
resultado devuelto es true si todos lo cumplen (o el array está vacío) o false si al menos un elemento no cumple
con la condición.

Por ejemplo
var datos =[4,6,8,10,12];
var espar = function(x){ return x%2==0};
var testPar = [Link](espar);
[Link]("¿Datos son pares? "+testPar);

En este ejemplo el resultado muestra que todos son pares y se

cumple con true.

El método some() comprueba si al menos uno de los elementos cumple con la condición pasada por la función
callback. Basta con que la función devuelva true para un elemento para que el resultado sea true.

var datos=[ 1,1,1,1,0,1];

var hayCeros;
hayCeros = [Link](function(v){return v==0});
[Link]("¿Algún cero? "+hayCeros)

El resultado de salida será el siguiente:

En este sencillo ejemplo se comprueba si al menos un elemento es 0. Solo comprueba, no indica cual es el
elemento que cumple la condición Estos métodos podrían también usar para averiguar si un array contiene o
no un valor determinado, pero el método includes() facilita esta tarea. Se trata de un método que recorre el
array y devuelve true si encuentra algún elemento que sea igual al valor que se le pasa como argumento. Si lo
encuentra devuelve true, pero no indica nada más.

Página 55 de 100
Podemos usar un segundo argumento para indicar que busca desde un índice hasta el final, en cambio si no
se indica nada, busca desde el principio. Por ejemplo:

var colores = ["rojo","verde", azul", "negro"];

var miColor;
miColor = [Link]("amarillo");
[Link]("Color amarillo en la lista: "+miColor);

El resultado de salida será el siguiente:

Por último dentro de este apartado de comprobación valores está el método find(), este método nos dirá el
valor del primer elemento que cumple con una condición dada. Para eso usa el mecanismo de la función de
llamada para comprobar cada elemento del array. Si la función de llamada devuelve true para un elemento
del array, el método devuelve el valor correspondiente, en caso contrario devuelve undefined. Solo devuelve el
primer valor que encuentra y no sigue buscando.

Por ejemplo:

var datos = [34, 56, 12, 90, 20, 35, 40];

var valor = [Link](function(v) { return v % 10 == 0 });
[Link]("primer multiplo de 10 es el "+valor); //90

El resultado de salida será el siguiente:

Con una pequeña modificación podríamos saber también el índice. Es un ejemplo de uso del argumento
opcional que se usa como objeto this dentro de la función. Como lo muestra este ejemplo:

var datos=[34,56,12,90,20,35,40];
var multiplo10, indice={idx:0}
var valor = [Link](function(v, i){
[Link] = i;
return v % 10 == 0}, indice);
[Link]("Primer multiplo de 10 es el " + valor + ", posición " + [Link]);

El resultado de salida será el siguiente:

Página 56 de 100
Los objetos location e history

¿Qué es una URL?

Junto con el Hipertexto y HTTP, las URL son uno de los conceptos claves de la Web. Es el mecanismo usado por
los navegadores para obtener cualquier recurso publicadon en la web.

URL significa Uniform Resource Locator (Localizador de Recursos Uniforme). Una URL no es más que una
direccion que es dada a un recurso único en la Web. En teoria, cada URL valida apunta a un único recurso.
Dichos recursos pueden ser páginas HTML, documentos CSS, imagenes, etc. En la practica, hay algunas
excepciones, siendo la más común una URL apuntando a un recurso que ya no existe o que ha sido movido.
Como el recurso representado por la URL y la URL en si son manejadas por el servidor Web, depende del dueño
del servidor web manejar ese recurso y su URL asociada adecuadamente.

Página 57 de 100
Dentro de los muchos objetos predefinidos que tiene JavaScript, el objeto window representa a una ventana
del navegador. Eso es que por cada ventana que tengamos abierta, se creará un objeto window.

Este objeto, tiene métodos que permiten reordenar ventanas, abrirlas y cerrarlas, pero lo que realmente nos
interesa del mismo son otros objetos que alberga como propiedades y nos darán información sobre todo lo
que sucede en la navegación.

Entre ellos podemos ver al objeto document que a pesar de que ya ha sido utilizado, se tratará en profundidad
más adelante.

Los objetos que trataremos en este punto son location y history. Son los objetos que nos presentan
información y servicios sobre las URLs, tanto de la actual como de anteriores.

Página 58 de 100
El objeto location

El objeto location contiene información sobre la URL actual. Lo más interesante del objeto location es que, si
le asignamos un valor a su propiedad href conseguiremos que el navegador cargue la nueva página indicada
en el valor que hemos asignado.

El resto de las propiedades funcionan igual y nos permitirán precisar sobre distintos aspectos de la URL, como
el protocolo utilizado (protocol), el puerto (port), etc. Se pueden consultar en [Link]
obj_location.asp

Por otro lado, incluye tres funciones:

assign(url)
Carga la url.

reload()
Recarga el documento actual.

replace(url)
Carga la url y reemplaza a la actual en el historial.

Página 59 de 100
Actualizando la dirección

Lo primero que debes saber es la función que implementa JavaScript para refrescar la página, se trata de la
siguiente: [Link](). Este método se encarga de recargar la URL actual, se trata de la misma acción que
realizan los navegadores al pulsar el botón de refrescar.

Para emplear esta función en tu sitio web, debes especificar un evento que la desencadene asociado a un
elemento de la página. Pongamos un ejemplo. Imagina que tu página tiene un botón que sirve para recargar la
página, cuyo código HTML es el siguiente:

<button id="refresh">Recargar</button>

Recarga automática con JavaScript

Es posible emplear la función anterior para programar una recarga automática de la página. Para ello,
deberemos emplearla junto con la función setInterval(). Para ello, insertaremos la función [Link]()
como primer parámetro de la función setInterval(), mientras que como segundo parámetro introduciremos los
milisegundos que deben pasar hasta que se recargue la página.

Por ejemplo, empleando el siguiente código JavaScript podemos conseguir que la página se recargue
automáticamente cada minuto:

setInterval("[Link]()",60000);

Actualizar la página con un botón mediante JavaScript

También puedes emplear un input de tipo button para añadirle el evento onclick junto con la función
[Link](). Por ejemplo, podrías implementar un botón que recargue la página haciendo uso de la
siguiente línea de código:

<input type="button" value="Recargar" onclick="[Link]()">

Refrescar la página con un enlace mediante JavaScript

Por último, es posible crear un enlace para recargar la página y definir la función de recarga de página en su
ruta. En el código que se expone a continuación te muestro como:

<a href="javascript:[Link]()">Recargar</a>

Cargar la página empleando [Link]

Por último, existe otro método para refrescar una página web empleando JavaScript. Se trata de la propiedad
[Link], la cual devuelve la URL actual de una página. Por ejemplo, esta propiedad se puede
utilizar para mostrar la URL de la página actual mediante una alerta. En el ejemplo siguiente, te muestro el
código HTML y JavaScript necesario para crear un botón que muestre la URL de la página:

<!--HTML-->
<input type="button" value="Mostrar URL" onclick="mostrar()">

Página 60 de 100
 <!--JS-->
<script>
function mostrar () {
let url = [Link];
[Link](url);
}
</script>

Pues bien, modificando la función anterior es posible tanto hacer que el botón recargue la página actual o que
redirija al usuario a otra página. Para ello, debes reasignar el valor de [Link]. De esta manera,
definirás de nuevo el valor de la URL actual; si le asignas el mismo valor que hasta ahora, la página se recargará,
pero también le puedes asignar otro valor y llevar al usuario a otra página.

El objeto history

Como sabemos, todos los navegadores incluyen un historial de la navegación que guarda los sitios por lo que
navegamos en cada sesión, de esa forma podemos utilizar los botones de “atrás” y “adelante” para movernos
por ellos.

El objeto history permite movernos por las URL almacenadas en esa lista. No nos ofrece más información
(ni siquiera los nombres) de esas URLs ya que se considera información restringida. Por esa razón, la utilidad
que tiene este objeto es la de permitirnos crear nuestros propios botones de “atrás” y “adelante”.
Tenemos tan solo una propiedad (length) que nos indica el número de URLs que hay en la lista, y tres funciones:

back()
Accede a la URL anterior.

forward()
Accede a la URL siguiente.

go(i)
Accede a una URL de la lista mediante el índice relativo i.

Página 61 de 100
El objeto document

Introducción

El objeto document representa al propio documento HTML. Nos proporciona la capacidad de poder
modificar la página web a nuestro antojo. Para ello se definen una serie de funciones tanto para la
localización de etiquetas HTML existentes, como para la creación o eliminación de las mismas.

De momento, conocemos de este objeto la función write, la cual venimos utilizando desde el principio del curso
para insertar una cadena de texto (o HTML) en la parte del código donde esté el script. Si lo que pretendemos
es escribir en otras partes del documento, deberemos comprender el concepto de DOM.

Página 62 de 100
La propiedad title

Enunciamos las principales propiedades del objeto document del DOM.

activeElement

Devuelve el objeto de la página que tiene el foco en ese momento, normalmente un campo de un formulario.

doctype

Proporciona el objeto definido por la etiqueta de html.

head

Obtiene el objeto que representa la cabecera de la página.

body

Devuelve el objeto que representa el cuerpo de la página.

title

Se trata del título del documento que aparece en la etiqueta

referrer

Indica la url del documento que llamó al actual a través de un enlace. Se obtendrá una cadena vacía la página
actual no ha sido cargada mediante un enlace.

cookie

Devuelve en forma de cadena los valores de todas las cookies almacenadas y asociadas al documento,
separadas por punto y coma. Es posible modificar las cookies si realizamos una asignación sobre la propiedad.

URL

Indica la URL de la página actual. Es el mismo valor que se obtiene con [Link]

Página 63 de 100
El método write

El método [Link] de Javascript permite escribir en una página texto, el resultado de una funcion o
las dos cosas. El resultado aparecerá en el lugar exacto de la página donde se inserte el código. El método
[Link] es semejante salvo que inserta un saldo de línea al final (si trabajamos con etiquetas <pre>).

Sobra decir que este código debe ir encerrado entre dos etiquetas <script> para que el navegador lo interprete
como tal (si lo colocamos en el propio archivo HTML). El texto encerrado entre comillas será escrito
literalmente. Si no se usan comillas se asumirá que es una variable.

La mayoría de las veces se utiliza Javascript para escribir texto cuando está acompañado de una variable que
cambiará su valor dependiendo de lo que se exprese con ella.

Ejemplos
<script>
// Ejemplo 1
[Link]("Bienvenido a mi sitio web. Gracias...");
// Ejemplo 2
[Link]('<a href=\"[Link] a una página</a>');
// Ejemplo 3
[Link](new Date());
// Ejemplo 4
[Link]('Ancho de pantalla: '+ [Link] +' pixeles');
// Ejemplo 5
[Link]('Ultima modificacion: '+ [Link]);
// Ejemplo 6
[Link]('Usando el navegador: '+ [Link]);
</script>
// Ejemplo 7
[Link] = [Link]('<img src=\"[Link]\" alt=\"miImagen\" />');

Página 64 de 100
El conjunto de images

La colección de imágenes devuelve una colección de todos los <img> elementos en el documento.

Sintaxis
[Link]

Propiedades
• length: Devuelve el número de <img> elementos de la colección.

Métodos
• [ index ]: Devuelve el <img> elemento de la colección con el índice especificado (starts at 0) .

• item( index ): Devuelve el

<img>

elemento de la colección con el índice especificado (starts at 0) .

• namedItem( id ): Devuelve el <img> elemento de la colección con el id especificado.

El objeto form

Formularios HTML

Es habitual que una página web nos solicite algún tipo de información personal.

De hecho, ya estamos acostumbrados a introducir datos mediante texto, listas desplegables, casillas de
verificación… a través de formularios.

Página 65 de 100
Estos datos que facilitamos son enviados a un CGI (Common Gateway Interface, o Interfaz de entrada común)
que se encarga de procesarlos y devolver una respuesta si es necesaria.

Este CGI es una importante tecnología de la World Wide Web que permite a un cliente (explorador web)
solicitar datos de un programa ejecutado en un servidor web. Este programa puede ser, por ejemplo, una
base de datos en la que se almacenará la información introducida a través del formulario.

En otras palabras, CGI es un mecanismo de comunicación entre el servidor web y una aplicación externa.

Para crear un formulario en HTML se utiliza la etiqueta <FORM> </FORM> con unos atributos que deben
aparecer obligatoriamente:

action
Determina cómo se transmite la información al servidor:

• GET. Envía los datos directamente en la URL con la estructura dato1=valor1&dato2=valor2... lo que supone
un problema de seguridad en determinados casos, puesto que, si la información incluye una contraseña
o cualquier otro dato sensible, sería fácilmente interceptable.

Asimismo, si borramos datos de una web con este método cualquiera podría hacerlo con la URL
adecuada. Por último, y debido a que algunos servidores limitan la longitud de la URL que pueden recibir,
este modo tampoco sería útil para cadenas de texto largas.

• POST. El envío mediante este método es “invisible” para el usuario, por lo que los datos no pueden ser
fácilmente modificables como sí ocurre con GET.

En el caso de archivos el envío debe ser siempre en POST, puesto que no puede hacerse dentro de una

Página 66 de 100
 URL.

method
Determina la forma en que se recibe la respuesta.

Por ejemplo, en TEXT/PLAIN será como texto.

enctype
Por lo tanto, para crear un formulario utilizaremos una sintaxis como esta:

<FORM action="[Link] method="POST" enctype="TEXT/PLAIN">

Un formulario consta de varios campos en los que se introduce la información. Estos se crean con la directiva
<INPUT> que tiene, a su vez, los siguientes atributos:

type=tipo

Determina el tipo de campo a representar y su comportamiento. Existen varios que detallaremos más
adelante.

name=nombre

Se refiere al nombre real del campo que se muestra en la página y un dato únicamente útil para el CGI.

value=valor

Se utiliza para determinar valores en un campo.

size=n

Establece el tamaño del campo representado en un tamaño de "n" caracteres.

maxsize=x

Impide que un campo supere un tamaño "x" de caracteres.

Página 67 de 100
Casilla de texto normal (TEXT)

Se establece en la propiedad type y permite introducir los datos en el formulario por medio de texto simple.

<INPUT type="text" name="nombre" size="20" maxlength="25">

Casilla de texto de múltiples líneas (TEXTAREA)

Permite introducir un texto de mayor dimensión cambiando el tamaño del área de entrada. Este se define
con los atributos "rows" (número de filas) y "cols" (caracteres de ancho).

<TEXTAREA name="comentarios" cols="30" rows="3"></TEXTAREA>

Casilla de texto para contraseñas (PASSWORD)

Se trata de una entrada de tipo texto en la que se enmascaran los datos, normalmente mostrando
asteriscos en lugar de letras para evitar que otra persona pueda leer los valores introducidos.

<INPUT type="password" name="contraseña" size="20" maxlength="8">

Página 68 de 100
Casillas de selección

Permite crear casillas de selección, también llamadas de verificación, que solo tendrán dos posibles valores:
marcado o no marcado.

Se establece en la propiedad type y puede ir acompañado del atributo checked si se quiere que esté marcado
inicialmente.

<INPUT type="checkbox" name="información" checked> Sí, deseo recibir información.

Botón de radio o botón de opción (radio)

Permite mostrar una serie de opciones de las cuales solo puede seleccionarse una mediante un botón de
tipo radio u opción.

Es una variable asociada a varios elementos, cada uno con un valor distinto y, generalmente, separados con
un salto de línea <br>. Esta adoptará uno u otro dependiendo de la opción seleccionada y, si no hay ninguna,
devolverá una cadena vacía.

Se establece también en la propiedad type y, al igual que en las casillas de selección, puede ir acompañado de
checked para tener marcada una opción predeterminada.

<INPUT type="radio" name="nivel_estudios" value="primarios" checked> Nivel Bajo

<br>
<INPUT type="radio" name="nivel_estudios" value="medios"> Nivel Medio <br>
<INPUT type="radio" name="nivel_estudios" value="altos"> Nivel Alto

Observa cómo todos los controles tienen el mismo nombre (atributo "name") pero distinto valor (atributo
"value"). De esta forma, cuando se elija una opción, la variable asignada al atributo "name" adoptará el valor
asignado en el atributo "value".

Introducción de texto por menús

La directiva <SELECT> permite construir una lista de selección recogida en una ventana que puede tener
barras de desplazamiento (scroll) y una lista desplegable similar a un menú. Los atributos de esta directiva
son:

multiple

Página 69 de 100
 Indica que se va a poder hacer una selección de múltiples valores.

size
Indica el número de opciones que se pueden ver a la vez dentro del cuadro de texto.

value
Será el nombre de la variable que almacenará el valor seleccionado.

Para indicar los diferentes valores a seleccionar, dentro de la directiva <SELECT> se especificará <OPTION>
</OPTION> tantas veces como opciones queramos indicar. Así tendríamos:

<SELECT name="nombre">
<OPTION> Opción 1 </OPTION>
<OPTION> Opción 2 </OPTION>
<OPTION> Opción 3 </OPTION>
</SELECT>

A continuación, tenemos un par de ejemplos:

Ejemplo 1

Página 70 de 100
<SELECT name="actividad">
<OPTION> Hacer deporte </OPTION>
<OPTION> Lectura </OPTION>
<OPTION> Ir al cine </OPTION>
<OPTION> Música </OPTION>
</SELECT>

Ejemplo 2

Página 71 de 100
 <SELECT name="actividad" size="4" multiple>
<OPTION> Hacer deporte </OPTION>
<OPTION> Lectura </OPTION>
<OPTION> Ir al cine </OPTION>
<OPTION> Música </OPTION>
<OPTION> Bailar </OPTION>
<OPTION> Viajar </OPTION>
<OPTION> Descansar </OPTION>
</SELECT>

Observa cómo en el ejemplo 1 debemos pinchar sobre la flecha para que se despliegue una lista con las
opciones, de las cuales solo podremos seleccionar una.

Sin embargo, en el ejemplo 2, aparece un cuadro con una barra de desplazamiento en el que, además,
podremos seleccionar más de una opción.

Botones de "Envío" y "Borrado"

Finalmente, una vez introducidos los datos en el formulario, el último paso es el envío o borrado. Para ello se
dispone de dos botones:

Enviar
El botón de envío se define en la directiva type con la propiedad SUBMIT.

Página 72 de 100
 Botones
Para el borrado se utiliza la propiedad RESET.

<INPUT TYPE="submit" value="Enviar">

<INPUT TYPE="reset" value="Borrar">

El conjunto forms

El objeto form representa a un formulario o bien, si omitimos el id del formulario deseado, a un array con
todos los formularios del documento.

form pertenece al objeto document y, por tanto, también a window. Por lo tanto, en principio la sintaxis básica
para referirnos a un formulario sería:

[Link].nombre_del_formulario

En la que tranquilamente pueden prescindirse de window y forms, ya que el navegador toma al formulario
como un objeto en sí mismo. De la misma forma, también puede prescindirse de document, pero esta omisión
solo se hará si queremos referirnos a un formulario en particular (por ejemplo, a un formulario llamado
"datos"). Pero al momento de referirnos a "todos los formularios de una página", solo se podrá prescindir del
objeto window.

Página 73 de 100
Los atributos de los que dispone son los mismos que la etiqueta HTML: action, method y target. Estos son
legibles y modificables.

La gran utilidad que tiene el uso de este objeto reside en la utilización de dos métodos que nos permitirán
enviar o limpiar el formulario sin necesidad de que el usuario pulse en controles de tipo submit y reset. De esta
forma podemos enviar un formulario haciendo uso de cualquier evento que consideremos.

JavaScript incluye muchos otros objetos predefinidos. En este curso nos centramos en objetos que representan
al documento HTML y nos ayudan a manejarlo y modificarlo, pero hay muchos otros que también son de
interés.

Objeto Math
Es la habitual clase de utilidad que existe en muchos lenguajes de programación. Nos ofrece funciones para
realizar cálculos matemáticos.

• round(): redondeo

• max(), min(): valores máximo y mínimo

• sin(): función seno()

• PI: constante pi=3,141592653589793

Objeto Array
Cada vez que definamos un array, estamos utilizando este objeto. De hecho, además de la forma
tradicional de definir un array, podemos utilizar la instancia del objeto: var arr= new Array(). El resultado es
exactamente el mismo.

Cualquier array tiene funciones de utilidad como:

Página 74 de 100
 • sort(): ordena los elementos

• concat(): concatena dos arrays

Objeto String
De la misma manera que ocurre con los arrays, cada vez que creamos una cadena de texto, el objeto String
nos ofrece diferentes funciones.

Cualquier string tiene funciones de utilidad como:

• length(): Devuelve la longitud de la cadena

• replace(): Reemplaza un texto por otro

• ToUpperCase (): Pasa una cadena a mayúsculas

• ToLowerCase (): Pasa una cadena a minúsculas

Objeto Date
Permite la manipulación de fechas y horas.

• getDate(): Devuelve la fecha

• getFullYear(): Devuelve el año.

• getMonth(): Devuelve el mes entre 0 y 11.

• getDay(): Devuelve el día.

• getHours(): Devuelve la hora

• getMinutes(): Devuelve el minuto

• getSeconds(): Devuelve los segundos

Página 75 de 100
La propiedad elements

JavaScript dispone de numerosas propiedades y funciones que facilitan la programación de aplicaciones que
manejan formularios. En primer lugar, cuando se carga una página web, el navegador crea automáticamente
un array llamado forms y que contiene la referencia a todos los formularios de la página.

Para acceder al array forms, se utiliza el objeto document, por lo que [Link] es el array que
contiene todos los formularios de la página. Como se trata de un array, el acceso a cada formulario se realiza
con la misma sintaxis de los arrays. La siguiente instrucción accede al primer formulario de la página:

[Link][0];

Además del array de formularios, el navegador crea automáticamente un array llamado elements por cada
uno de los formularios de la página. Cada array elements contiene la referencia a todos los elementos
(cuadros de texto, botones, listas desplegables, etc.) de ese formulario. Utilizando la sintaxis de los arrays, la
siguiente instrucción obtiene el primer elemento del primer formulario de la página:

[Link][0].elements[0];

La sintaxis de los arrays no siempre es tan concisa. El siguiente ejemplo muestra cómo obtener directamente
el último elemento del primer formulario de la página:

[Link][0].elements[[Link][0].[Link]-1];

Validar la información

Normalmente, la validación de un formulario consiste en llamar a una función de validación cuando el usuario
pulsa sobre el botón de envío del formulario. En esta función, se comprueban si los valores que ha introducido
el usuario cumplen las restricciones impuestas por la aplicación.

Página 76 de 100
¿Cuándo realizar la validación?

Aunque existen tantas posibles comprobaciones como elementos de formulario diferentes, algunas
comprobaciones son muy habituales: que se rellene un campo obligatorio, que se seleccione el valor de una
lista desplegable, que la dirección de email indicada sea correcta, que la fecha introducida sea lógica, que se
haya introducido un número donde así se requiere, etc.

A continuación, se muestra el código JavaScript básico necesario

para incorporar la validación a un formulario:
<form action="" method="" id="" name="" onsubmit="return validacion()">
...
</form>

Y el esquema de la función validacion() es el siguiente:

function validacion() {
if (condicion que debe cumplir el primer campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
else if (condicion que debe cumplir el segundo campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
...
else if (condicion que debe cumplir el último campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}

// Si el script ha llegado a este punto, todas las condiciones

// se han cumplido, por lo que se devuelve el valor true
return true;
}

Página 77 de 100
Tipos de validación

A continuación, se muestran algunas de las validaciones más habituales de los campos de formulario.

Validar un campo de texto obligatorio

Se trata de forzar al usuario a introducir un valor en un cuadro de texto o textarea en los que sea obligatorio.
La condición en JavaScript se puede indicar como:

valor = [Link]("campo").value;
if( valor == null || [Link] == 0 || /^\s+$/.test(valor) ) {
return false;
}

Para que se de por completado un campo de texto obligatorio, se comprueba que el valor introducido sea
válido, que el número de caracteres introducido sea mayor que cero y que no se hayan introducido sólo
espacios en blanco.

La palabra reservada null es un valor especial que se utiliza para indicar "ningún valor". Si el valor de una
variable es null, la variable no contiene ningún valor de tipo objeto, array, numérico, cadena de texto o
booleano.

La segunda parte de la condición obliga a que el texto introducido tenga una longitud superior a cero
caracteres, esto es, que no sea un texto vacío.

Por último, la tercera parte de la condición (/^\s+$/.test(valor)) obliga a que el valor introducido por el
usuario no sólo esté formado por espacios en blanco. Esta comprobación se basa en el uso de "expresiones
regulares", un recurso habitual en cualquier lenguaje de programación pero que por su gran complejidad no se
van a estudiar. Por lo tanto, sólo es necesario copiar literalmente esta condición, poniendo especial cuidado en
no modificar ningún carácter de la expresión.

Validar un campo de texto con valores numéricos

Se trata de obligar al usuario a introducir un valor numérico en un cuadro de texto. La condición JavaScript
consiste en:

valor = [Link]("campo").value;
if( isNaN(valor) ) {
return false;
}

Si el contenido de la variable valor no es un número válido, no se cumple la condición. La ventaja de utilizar

la función interna isNaN() es que simplifica las comprobaciones, ya que JavaScript se encarga de tener en
cuenta los decimales, signos, etc.

A continuación se muestran algunos resultados de la función isNaN():

isNaN(3); // false
isNaN("3"); // false
isNaN(3.3545); // false
isNaN(32323.345); // false
isNaN(+23.2); // false
isNaN("-23.2"); // false
isNaN("23a"); // true
isNaN("23.43.54"); // true

Validar que se ha seleccionado una opción de una lista

Página 78 de 100
Se trata de obligar al usuario a seleccionar un elemento de una lista desplegable. El siguiente código JavaScript
permite conseguirlo:

indice = [Link]("opciones").selectedIndex;
if( indice == null || indice == 0 ) {
return false;
}

<select id="opciones" name="opciones">

<option value="">- Selecciona un valor -</option>
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
</select>

A partir de la propiedad selectedIndex, se comprueba si el índice de la opción seleccionada es válido y

además es distinto de cero. La primera opción de la lista (- Selecciona un valor –) no es válida, por lo
que no se permite el valor 0 para esta propiedad selectedIndex.

Validar una dirección de email

Se trata de obligar al usuario a introducir una dirección de email con un formato válido. Por tanto, lo que se
comprueba es que la dirección parezca válida, ya que no se comprueba si se trata de una cuenta de correo
electrónico real y operativa. La condición JavaScript consiste en:

valor = [Link]("campo").value;
if( !(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor)) ) {
return false;
}

La comprobación se realiza nuevamente mediante las expresiones regulares, ya que las direcciones de correo
electrónico válidas pueden ser muy diferentes. Por otra parte, como el estándar que define el formato de las
direcciones de correo electrónico es muy complejo, la expresión regular anterior es una simplificación. Aunque
esta regla valida la mayoría de direcciones de correo electrónico utilizadas por los usuarios, no soporta todos
los diferentes formatos válidos de email.

Validar una fecha

Las fechas suelen ser los campos de formulario más complicados de validar por la multitud de formas
diferentes en las que se pueden introducir. El siguiente código asume que de alguna forma se ha obtenido el
año, el mes y el día introducidos por el usuario:

var ano = [Link]("ano").value;

var mes = [Link]("mes").value;
var dia = [Link]("dia").value;

valor = new Date(ano, mes, dia);

if( !isNaN(valor) ) {
return false;
}

La función Date(ano, mes, dia) es una función interna de JavaScript que permite construir fechas a partir
del año, el mes y el día de la fecha. Es muy importante tener en cuenta que el número de mes se indica de 0 a
11, siendo 0 el mes de Enero y 11 el mes de Diciembre. Los días del mes siguen una numeración diferente, ya
que el mínimo permitido es 1 y el máximo 31.

La validación consiste en intentar construir una fecha con los datos proporcionados por el usuario. Si los
datos del usuario no son correctos, la fecha no se puede construir correctamente y por tanto la validación del

Página 79 de 100
formulario no será correcta.

Validar un número de DNI

Se trata de comprobar que el número proporcionado por el usuario se corresponde con un número válido
de Documento Nacional de Identidad o DNI. Aunque para cada país o región los requisitos del documento de
identidad de las personas pueden variar, a continuación se muestra un ejemplo genérico fácilmente adaptable.
La validación no sólo debe comprobar que el número esté formado por ocho cifras y una letra, sino que
también es necesario comprobar que la letra indicada es correcta para el número introducido:

valor = [Link]("campo").value;
var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N',
'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];

if( !(/^\d{8}[A-Z]$/.test(valor)) ) {
return false;
}

if([Link](8) != letras[([Link](0, 8))%23]) {

return false;
}

La primera comprobación asegura que el formato del número introducido es el correcto, es decir, que está
formado por 8 números seguidos y una letra. Si la letra está al principio de los números, la comprobación
sería /^[A-Z]\d{8}$/. Si en vez de ocho números y una letra, se requieren diez números y dos letras, la
comprobación sería /^\d{10}[A-Z]{2}$/ y así sucesivamente.

La segunda comprobación aplica el algoritmo de cálculo de la letra del DNI y la compara con la letra
proporcionada por el usuario. El algoritmo de cada documento de identificación es diferente, por lo que esta
parte de la validación se debe adaptar convenientemente.

Validar un número de teléfono

Los números de teléfono pueden ser indicados de formas muy diferentes: con prefijo nacional, con prefijo
internacional, agrupado por pares, separando los números con guiones, etc.

El siguiente script considera que un número de teléfono está formado por nueve dígitos consecutivos y sin
espacios ni guiones entre las cifras:

valor = [Link]("campo").value;
if( !(/^\d{9}$/.test(valor)) ) {
return false;
}

Una vez más, la condición de JavaScript se basa en el uso de expresiones regulares, que comprueban si el
valor indicado es una sucesión de nueve números consecutivos. A continuación se muestran otras expresiones
regulares que se pueden utilizar para otros formatos de número de teléfono:

Número Expresión regular Formato

900900900 /^\d{9}$/ 9 cifras seguidas
900-900-900 /^\d{3}-\d{3}-\d{3}$/ 9 cifras agrupadas de 3 en 3 y separadas por guiones
900 900900 /^\d{3}\s\d{6}$/ 9 cifras, las 3 primeras separadas por un espacio
900 90 09 /^\d{3}\s\d{2}\s\ 9 cifras, las 3 primeras separadas por un espacio, las siguientes
00 d{2}\s\d{2}$/ agrupadas de 2 en 2
(900) 9 cifras, las 3 primeras encerradas por paréntesis y un espacio de
/^\(\d{3}\)\s\d{6}$/
900900 separación respecto del resto
+34 /^\+\d{2,3}\s\d{9}$/ Prefijo internacional (+ seguido de 2 o 3 cifras), espacio en blanco y

Página 80 de 100
 Número Expresión regular Formato
900900900 9 cifras consecutivas

Validar que un checkbox ha sido seleccionado

Si un elemento de tipo checkbox se debe seleccionar de forma obligatoria, JavaScript permite comprobarlo de
forma muy sencilla:

elemento = [Link]("campo");
if( ![Link] ) {
return false;
}

Si se trata de comprobar que todos los checkbox del formulario han sido seleccionados, es más fácil utilizar un
bucle:

formulario = [Link]("formulario");
for(var i=0; i<[Link]; i++) {
var elemento = [Link][i];
if([Link] == "checkbox") {
if(![Link]) {
return false;
}
}
}

Validar que un radiobutton ha sido seleccionado

Aunque se trata de un caso similar al de los checkbox, la validación de los radiobutton presenta una diferencia
importante: en general, la comprobación que se realiza es que el usuario haya seleccionado algún radiobutton
de los que forman un determinado grupo. Mediante JavaScript, es sencillo determinar si se ha seleccionado
algún radiobutton de un grupo:

opciones = [Link]("opciones");

var seleccionado = false;

for(var i=0; i<[Link]; i++) {
if(opciones[i].checked) {
seleccionado = true;
break;
}
}

if(!seleccionado) {
return false;
}

Página 81 de 100
Modelos de objetos del documento (dom)

El árbol del documento

Habitualmente utilizamos JavaScript para acceder al contenido de la página Web. Desde JavaScript puedo
acceder a una estructura de datos que representa (en forma de árbol) todo el contenido de una página Web.
Esa estructura se denomina DOM (Document Object Model)

Navegando por ella, es posible tanto leer los datos existentes, como modificarlos y como añadir contenido a la
página Web.

Página 82 de 100
Tipos de nodos y de relaciones

Cada nodo del DOM es un objeto JavaScript. El DOM usa varios tipos de objetos en función del nodo que
almacenamos.

Existen 12 tipos de nodos, pero la mayor parte de las páginas HTML manejan unos pocos nodos:

document
Raíz del que derivan el resto. Además, se instancia un objeto document mediante el cual puedo acceder al
contenido del documento.

Element
Etiqueta HTML. Puede contener atributos y otros nodos.

Attr
Atributos de las etiquetas.

Text
Texto encerrado por una etiqueta HTML.

Comment
Comentarios.

Obtener elementos

Para acceder a elementos HTML usaremos los siguientes métodos del Objeto Document():

getElementById()
Nos permite acceder a elementos HTML a los que hemos asignado un identificador con el atributo HTML id (no
deben haber más de uno con el mismo).

getElementsByName()
Para acceder a elementos HTML que tienen un atributo HTML name (pueden ser varios, como en la imagen de
ejemplo).

getElementsByTagName()
Permite acceder a todos los elementos de una determinada etiqueta HTML.

Página 83 de 100
Obtener y establecer atributos

Acceso a través de JavaScript

Leer los valores de estos atributos en JavaScript también es muy sencillo. Puede usar getAttribute() con su
nombre HTML completo para leerlos, pero el estándar define una forma más simple: un DOMStringMap puede
leer a través de una propiedad dataset.

Para obtener un atributo data a través del dataset del objeto, obtenga la propiedad por la parte del nombre
del atributo despues de data- (tenga en cuenta que los guiones son convertidos en camelCase).

var article = [Link]('electriccars');

[Link] // "3"
[Link] // "12314"
[Link] // "cars"

Cada propiedad es una cadena y se puede leer y escribir. En el caso anterior,

establecer [Link] = 5 cambiaría ese atributo a "5".

Página 84 de 100
Manipulación del dom

Recorrer el árbol del documento

El DOM nos permite hacer cualquier cosa con sus elementos y contenidos, pero lo primero que tenemos que
hacer es llegar al objeto correspondiente del DOM.

Todas las operaciones en el DOM comienzan con el objeto document. Este es el principal “punto de entrada” al
DOM. Desde ahí podremos acceder a cualquier nodo.

Esta imagen representa los enlaces que nos permiten viajar a través de los nodos del DOM:

Página 85 de 100
Modificar el valor de los nodos

Método setAttribute()

Con él podemos declarar un nuevo atibuto a un elemento y darle un valor. Si el atributo ya existe solo se
cambiará el valor.

<a id="link">Google</a>

<script type="text/javascript">

[Link]("link").setAttribute("href", "[Link]

</script>

En este ejemplo, al elemento <a> le hemos añadido el atributo «href» con el valor «[Link]

Página 86 de 100
Crear, eliminar y reemplazar nodos

La creación de un nodo implica 3 pasos:

Creación de la etiqueta (objeto de tipo Element)

Función [Link](etiqueta)

Añado el contenido de la etiqueta

2 opciones:

• Propiedad innerHTML

• Creo un objeto de texto (tipo TextNode) y se lo añado a la etiqueta como hijo con la función appendChild

Añadimos la etiqueta al sitio donde quiero colocarla con la función

appendChild

Eliminar un nodo

Utilizamos la función removeChild(). La función pertenece al padre del nodo que vamos a borrar, al que
podemos llamar desde la propiedad parentNode.

Página 87 de 100
Para poder acceder a un atributo de un nodo que tenemos guardado en una variable, tan solo debemos
utilizar el punto(.) y el nombre del atributo.

Para poder acceder a las propiedades CSS, debemos acceder primero al objeto style y luego a la
propiedad deseada:

Es importante destacar que las propiedades CSS pueden ser modificadas, pero no leídas. En el momento
que modifiquemos una propiedad desde JavaScript, ya estará disponible también para su lectura.

Otra fuente común de errores son las propiedades CSS compuestas por dos o más palabras. Por convenio
CSS utiliza palabra1-palabra2, mientras que JavaScript utiliza camelCase. Por eso todas las propiedades CSS
compuestas de varias palabras han de adaptarse al formato de JavaScript:

CSS JAVASCRIPT
font-weight se transforma en fontWeight
line-height se transforma en lineHeight
border-top-style se transforma en borderTopStyle
list-style-image se transforma en listStyleImage

El método innerHTML

La propiedad [Link] devuelve o establece la sintaxis HTML describiendo los descendientes del
elemento.

Al establecerse se reemplaza la sintaxis HTML del elemento por la nueva.

Nota: Si un nodo tiene un texto secundario que incluye los caracteres (&), (<), o (>), innerHTML devuelve
estos caracteres como &amp; , &lt; y &gt; respectivamente. Use [Link] para conseguir una copia
correcta del contenido de estos nodos de texto.
Su sintaxis sería:

const content = [Link];

[Link] = htmlString;

Página 88 de 100
Modificar el formato dinámicamente

El Document Object Model, o DOM, es una representación de un sitio web almacena en la memoria de un
ordenador. JavaScript se utiliza para añadir, modificar y borrar elementos de la DOM, tales como enlaces,
imágenes o texto. Un tipo de elemento que se puede añadir a la DOM a través de JavaScript es un elemento de
script que puede insertar código adicional JavaScript en la página, incluso después de que la página ya se ha
cargado.

Buenas prácticas

Separar estructura y comportamiento

CSS (Hojas de estilo en cascada) es un lenguaje de composición estándar para la Web que controla la tipografía,
los colores y el tamaño y la ubicación de los elementos y las imágenes. Los documentos XHTML, deben tener
hojas de estilo externas que definan los estilos que se utilizan dentro del documento. El código JavaScript
también debe encontrarse en un documento externo, uno que contenga únicamente código JavaScript.

Cuando se efectúe un reparto semejante, los sitios contendrán tres tipos de archivos de texto:

XHTML

Alberga el contenido y la estructura de la página.

CSS

Controla la apariencia y la presentación de la página.

JavaScript

Controla el comportamiento de la página.

Al hacerlo así, es más fácil hacer cambios en el sitio (incluso cambios en los efectos que abarcan todo el sitio).

Etiquetas div y span

Si utiliza el estilo clásico de HTML, según el cual todo se coloca en tablas y se juega con GIFs espaciadores hasta
que todo queda más o menos donde se pretendía.

XHTML contiene dos etiquetas que empiezan a despertar la atención que se merecen: <div> y <span>. Se
utilizan para dividir el contenido en fragmentos semánticos, es decir, fragmentos que tienen un significado
parecido. Las cosas dentro de una sola celda de tabla o dentro de un párrafo pueden o no tener nada en
común, pero el contenido dentro de cada <div> y <span> si deben tenerlo.

Etiqueta <div>
Una etiqueta <div> es un elemento a nivel de bloque, es decir, hay una interrupción física entre él y los
elementos que tiene por encima y por debajo.

Página 89 de 100
Etiqueta <span>
Una etiqueta <span> no está a nivel de bloque; más bien, está incrustada, por lo que puede aplicarla, por
ejemplo, a una frase dentro de un párrafo.

Clases e id's

Dentro del documento XHTML, tiene que marcar el contenido dividiéndolo en estos fragmentos significativos. A
partir de aquí, todavía tendrá que identificar estas piezas de contenido donde quiera cambiar su presentación
o comportamiento. Para ello, utilizará principalmente dos atributos: class e id. Tanto CSS como JavaScript
pueden utilizar estos dos atributos; una hoja de estilo CSS los utiliza como parte de las reglas que definen la
apariencia de una página, y el archivo Javascript los puede utilizar en el código que afecta al comportamiento
de los elementos en la página.

Página 90 de 100
Añadir los manejadores de evento

Para poder reaccionar a estos eventos, necesitamos incluir lo que llamaremos un manejador del evento
(handler), que será una función que se ejecuta en caso de que el evento sea activado.

Por lo que los manejadores de eventos son los que nos permitirán ejecutar código JavaScript en caso de que el
usuario realice una acción determinada.

Tenemos muchas formas de incluir un manejador a un evento:

Eventos usando atributos HTML

Un manejador puede ser creado haciendo uso de un atributo HTML al que llamaremos on. Por lo que para
asignar un manejador al evento click a través de un botón de formulario u otro tipo de elemento HTML5
podemos hacer lo siguiente:

<input value="Haz clic aquí" onclick="alert('Has hecho clic!')" type="button" />

Al hacer clic en el botón se activa el manejador del evento click (onclick), el cual ejecuta la función o método
asignado (en este caso el método alert()).

Siempre que incluyamos código HTML entrecomillado con comillas dobles (onclick=””), dentro del contenido de
este debemos hacer uso de comillas simples para que trabaje correctamente.

Eventos con propiedades del DOM

Podemos asignar un manejador a un evento haciendo uso de una propiedad del DOM. Por lo que el manejador
del evento será la propiedad del DOM y el atributo HTML es la forma que tenemos de inicializarlo.

Accediendo a elementos usando: this

El valor this dentro de un manejador de eventos contiene el valor del elemento.

<button id="btn" onclick="alert([Link])">Haz clic</button>

Por lo que en el ejemplo el valor de [Link] será “Haz click”.

El método addEventListener()
Hasta ahora hemos visto cómo se crean eventos y cómo podemos manejarlos. Uno de los problemas que
nos encontraremos al trabajar con eventos es la necesidad de incluir diferentes manejadores de eventos a un
mismo evento con una misma propiedad.

Página 91 de 100
Detectar características de los navegadores

Más allá que jQuery elimine la mayoría de las peculiaridades de JavaScript entre cada navegador, existen
ocasiones en que se necesita ejecutar código en un navegador específico.

Para este tipo de situaciones, jQuery ofrece el objeto $.support y $.browser (este último en desuso).
Una completa documentación sobre estos objetos puede encontrarla en [Link]/[Link] y
[Link]/[Link]

El objetivo de $.support es determinar qué características soporta el navegador web.

El objeto $.browser permite detectar el tipo de navegador y su versión. Dicho objeto está en desuso (aunque
en el corto plazo no está planificada su eliminación del núcleo de la biblioteca) y se recomienda utilizar al objeto
$.support para estos propósitos.

Ejemplo: Una galería fotográfica

El código

Vamos a introducir el archivo que generará todo esto en nuestro HTML. Si contamos con un directorio para los
archivos JS quedaría tal que así:

<script type='text/javascript' src='js/[Link]'></script>

Cuando se cargue el script, creará un objeto de galería que cuenta con una función para la creación de
una galería basada en un array de argumentos que contienen información como la dimensión, el tiempo de
visibilidad de las imágenes, el efecto y, obviamente, los nombres de las imágenes. A excepción de los nombres
de las imágenes, toda la información es opcional.

<script type='text/javascript'>

var args =
{"width":300,"Height":300,"duration":5000,"transition":2000,"effect":"fade","id":"d
ivGallery",

"images":[["img/[Link]","Prueba1 at Prueba1"],["img/
[Link]","Prueba2"],"img/[Link]",

["img/[Link]","Foto"],["img/[Link]", "Foto1 and Foto2"],"img/

[Link]"]}

[Link](args);

</script>

Se puede usar tanto la key como el nombre a la hora de utilizar un efecto.

Página 92 de 100
Imágenes y dimensión de imágenes

El argumento images hace referencia a una lista de imágenes alojadas en el servidor. Si queremos añadir
un título a una imagen en cuestión, en lugar de ser un nombre del fichero, puede ser un conjunto de dos
elementos formado por el nombre del fichero y el título: ..., ["img / [Link]", "Foto1y el Foto2 "]," img
/ [Link] ", ...; los argumentos width y height controlan la dimensión de la galería; lo ideal es tener las
imágenes con la dimensión exacta, por lo tanto, el programa se ajustará a las imágenes con los valores
requeridos, sin tener que redimensionar y expandir ni estrechar imágenes. El algoritmo utilizado para ello es
el siguiente:

var normImg = function (wOrigin,hOrigin,wSlide,hSlide) {

if ((wOrigin == wSlide) && (hOrigin >= hSlide) || (hOrigin == hSlide) &&
(wOrigin >= wSlide)) {
return [wSlide,hSlide]; // clipping case only
} else { // reduce and clipping case
if (wSlide/wOrigin > hSlide/hOrigin) {return [wOrigin, hSlide *
wOrigin/wSlide];}
else {return [wSlide * hOrigin/hSlide, hOrigin];}
}
}

Duración y efectos en la transición de imágenes

El argumento duration indica el tiempo de visualización; que incluye el tiempo de transición (en milisegundos)
de la imagen con el efecto. Partiendo de la base de 25 frames por segundo, la función hará que el efecto se
active cada 40 milisegundos. Si queremos activar un efecto fade:

...

var timesNumber = 0;
var frameSecond = 25;
...
timesNumber = [Link]*frameSecond/1000; // effect timing
...
hTimer = setInterval(fader,1000/frameSecond)
...
var fader = function() {
countTimes--;
[Link] = 1-countTimes/timesNumber;
[Link](img,0,0,dimImg[0],dimImg[1],0,0,[Link],[Link]);
if (countTimes == 0) {clearInterval(hTimer)}
}

Los efectos son:

no

Sin efecto. El tiempo de transición se ignora

fade

Una nueva imagen aparece poco a poco en la imagen anterior

Página 93 de 100
page

Simula un pasado de página

tl-wipe

Una nueva imagen se desplaza desde el área superior izquierda

tr-wipe

Una nueva imagen se desplaza desde el área superior derecha

c-wipe

La nueva imagen aparece en un círculo que va aumentando hasta posicionarse sobre la imagen anterior

l-wipe

La nueva imagen entra por la izquierda

r-wipe

La nueva imagen entra por la derecha

Página 94 de 100
Ejemplo: La estructura de la página

Página 95 de 100
Cabecera o header

La cabecera es la parte superior de la página web. Aquí suele incluirse la información básica de la empresa o
marca y es consistente en todo el sitio, es decir, se repite en cada página de la web por la que navegas.

Los elementos que se incluyen en la cabecera son:

Logo de la empresa

El menú de navegación

Un cuadro de búsqueda

Una pequeña descripción de la web

Si hablamos en lenguaje HTML, verás que todo el contenido de la cabecera aparece entre las siguientes
etiquetas:

<header>Contenido de la cabecera</header>

Cuerpo o body

Esta es la parte de la web que alberga el contenido principal de tu página. Esta parte sí es diferente en cada
página de tu sitio. Es decir, no será el mismo contenido el que incluyes en tu página de contacto que en la
página principal.

En HTML puedes identificar rápidamente este contenido, ya que se encuentra dentro de las siguientes
etiquetas:

<body>Contenido del cuerpo</body>

Pie de página o footer

El pie de página o footer es la parte inferior de una página web. Al igual que la cabecera, se repite y es
consistente en cada página. En el footer podemos encontrar los siguientes elementos:

Menú simplificado

Información de contacto

Botones de redes sociales

Logo de la empresa

Enlace a la política de privacidad

Tal y como vimos en las partes anteriores, en HTML el pie de página se encuentra entre estas etiquetas:

Página 96 de 100
 <footer>El contenido del pie de página</footer>

<html>

<head>

<title>Esto es el t&iacute;tulo de la p&aacute;gina.</title>

</head>

<body>

Hola mundo!<br>

<strong>Esto es negrita.</strong><br>

<em>Y esto it&aacute;lica.</em><br>

</body>

</html>

Ejemplo: El código JavaScript

A continuación, se muestra un primer script sencillo pero completo:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>El primer script</title>

<script type="text/javascript">
alert("Hola Mundo!");
</script>
</head>

<body>
<p>Esta página contiene el primer script</p>
</body>
</html>

Página 97 de 100
En este ejemplo, el script se incluye como un bloque de código dentro de una página XHTML. Por tanto, en
primer lugar se debe crear una página XHTML correcta que incluya la declaración del DOCTYPE, las secciones
<head> y <body>, la etiqueta <title>, etc.

Aunque el código del script se puede incluir en cualquier parte de la página, se recomienda incluirlo en la
cabecera del documento, es decir, dentro de la etiqueta <head>.

A continuación, el código JavaScript se debe incluir entre las etiquetas <script>...</script>. Además, para
que la página sea válida, es necesario definir el atributo type de la etiqueta <script>. Técnicamente, el
atributo type se corresponde con "el tipo MIME", que es un estándar para identificar los diferentes tipos de
contenidos. El "tipo MIME" correcto para JavaScript es text/javascript.

Una vez definida la zona en la que se incluirá el script, se escriben todas las sentencias que forman la
aplicación. Este primer ejemplo es tan sencillo que solamente incluye una sentencia: alert("Hola
Mundo!");.

La instrucción alert() es una de las utilidades que incluye JavaScript y permite mostrar un mensaje en
la pantalla del usuario. Si se visualiza la página web de este primer script en cualquier navegador,
automáticamente se mostrará una ventana con el mensaje "Hola Mundo!".

Mensaje mostrado con "alert()" en Internet Explorer

Página 98 de 100
Mensaje mostrado con "alert()" en Firefox

Mensaje mostrado con "alert()" en Opera

Página 99 de 100
Como se puede observar en las imágenes anteriores, el funcionamiento de la utilidad alert() en los distintos
navegadores es idéntico. Sin embargo, existen grandes diferencias visuales en la forma en la que se presentan
los mensajes.

Página 100 de 100