Manual UD5. JavaScript y DOM

[AFO018510] IFCT095PO PYTHON Y DJANGO
[MOD016701] IFCT095PO PYTHON Y DJANGO

[UDI097986] JAVASCRIPT Y DOM.
Introducción
INTRODUCCIÓN
Se puede decir que una página web es un documento. Dicho documento puede exhibirse en la
ventana de un navegador o como código fuente HTML. Pero, en ambos casos, es el mismo
documento. El modelo de objeto de documento (DOM) aporta otras formas de presentar, almacenar
y alterar este mismo documento. El DOM es una representación totalmente orientada al objeto de la
página web y puede ser alterado con un lenguaje de script como puede ser JavaScript.
m
. co
ad
lid
bi
ea
pl
m
se
pu
m
ca
campusempleabilidad.com
1 / 46
Objetivos
OBJETIVOS
Conocer qué es DOM.
Utilizar Javascript y DOM.
m
. co
ad
lid
bi
ea
pl
m
se
pu
m
ca
2 / 46
Mapa Conceptual
MAPA CONCEPTUAL [[[Elemento Multimedia]]]
m
. co
ad
lid
bi
ea
pl
m
se
pu
m
ca
3 / 46
Javascript y dom
¿Qué es el DOM?
El modelo de objeto de documento (DOM) se define como una interfaz de programación para los
documentos HTML y XML. Ayudan a una representación estructurada del documento y determina
de qué manera los programas pueden acceder, al fin de alterar, tanto su estructura, estilo y datos
contenidos. El DOM da una representación del documento como un si de grupo de nodos y
m
objetos estructurados que disponen de una serie de propiedades y métodos. Principalmente,
co
conecta las páginas web a scripts o lenguajes de programación.
.
El W3C DOM estándar forma la base del funcionamiento del DOM en muchos navegadores
ad
modernos.
lid
Por ejemplo, el DOM de W3C especifica que el método getElementsByTagName en el código de
bi
abajo debe devolver una lista de todos los elementos del documento:
ea
pl
m
se
Todas las propiedades, métodos y eventos que están disponibles para la manipulación y la
pu
generación de páginas web está organizado dentro de los diferentes objetos. Un ejemplo: el
objeto document representa al documento mismo, el objeto table hace funcionar la interfaz
m
especial HTMLTableElement del DOM para acceder a tablas HTML, y así progresivamente. Esta
ca
documentación determina una relación objeto-por-objeto del DOM que funciona con los navegadores
que están basados en Gecko.
DOM y JavaScript
El ejemplo anterior, como casi todos los ejemplos de esta referencia, es JavaScript. Es decir, es
escrito en JavaScript pero utiliza el DOM para acceder al documento y a sus elementos. El DOM no
es un lenguaje de programación pero sin este, el lenguaje JavaScript no dispone de ningún
modelo o noción de las páginas web, de la página XML ni de los elementos con los que normalmente
4 / 46
están relacionados.
En el comienzo, JavaScript y el DOM estaban herméticamente enlazados, pero después se
desarrollaron como entidades separadas. El contenido de la página es guardado en DOM y el
acceso y la modificación se hace vía JavaScript. Podría visualizarse aproximadamente así:
API (web o página XML) = DOM + JS(lenguaje de script)
El DOM fue creado para ser independiente de cualquier lenguaje de programación. Hace que la
m
presentación estructural del documento esté disponible desde un simple y consistente API.
co
¿Cómo se accede al DOM?
.
ad
No se debe de hacer nada especial para empezar a usar el DOM. Los distintos navegadores tienen
directrices DOM diferentes, y estas directrices tienen diferentes grados de conformidad al actual
lid
estándar DOM, pero todos los navegadores web utilizaban el modelo de objeto de documento para
bi
que las páginas web sean accesibles al script.
ea
Introducción a Javascript
pl
Internet proporciona un medio para el desarrollo empresarial, basado en lo que se conoce como
m
comercio electrónico o e-comerce (electronic commerce en inglés) que consiste en la compra y

se
venta de productos y/o servicios a través de medios electrónicos, pasando de ver la WWW (World
Wide Web) como una especie de escaparate donde empresas y particulares anuncian lo que ofrecen
pu
accediendo así a millones de personas consumidoras.

m
Incluso existen empresas dedicadas exclusivamente a la compra/venta, las cuales no tienen ni

ca
situación física.
5 / 46
m
. co
ad
lid
bi
ea
pl
m
se
pu
m
ca
6 / 46
m
. co
ad
lid
bi
ea
pl
m
se
Desde que se puso de moda la utilización de Internet en casa de manera frecuente y debido a la
pu
comodidad que esto ofrece el cliente, cada vez es más fácil realizar trámites de esta manera,
dando gran importancia a Internet.

m
Por tanto, y como respuesta a ello, la tecnología informática asociada a las páginas web se ha visto
ca
aumentada, aumentando no solo su contenido sino también sus formas de añadir interactividad y de
crear aplicaciones.
Pero estas aplicaciones van más allá, ya que no solo las encontraremos en Internet sino que cada día
son más utilizadas en las denominadas intranets empresariales que utilizan una red de
ordenadores privados para compartir dentro de una organización parte de sus sistemas de
información y sistemas de operaciones.
7 / 46
m
. co
ad
lid
bi
ea
En este curso utilizaremos tecnologías que nos permitirán desarrollar este tipo de aplicaciones.
pl
Entorno Cliente/Servidor
m
Las páginas webs existen en un entorno cliente/servidor donde:

se
pu
El cliente se encarga de solicitar y mostrar al usuario las páginas webs.
El servidor, que las ofrece a los usuarios.

m
ca
8 / 46
m
. co
ad
Esquema de modelo Cliente/Servidor
lid
La programación del lado del cliente es aquella ejecutada por la aplicación cliente, es decir,
bi
principalmente por el navegador.
ea
Una aplicación puede tener esta estructura, con objetivo de conseguir páginas interactivas,
pl
superando así las limitaciones de HTML.

m
se
pu
m
ca
Ejemplo de código JavaScript
Para ellos se utiliza lo que denominamos “Lenguajes de Guiones o de Script” como, por
ejemplo, JavaScript cuyo principal objetivo es realizar diversas tareas como combinar componentes,
9 / 46
interactuar con el sistema operativo o con el usuario.
Se dice que JavaScript es un lenguaje de guiones, ya que escribiremos el código directamente en el
fichero HTML, soliendo ser pequeños fragmentos de código junto al resto del código de la página
web.
Algunos ejemplos de cosas que podemos hacer como JavaScript será:
Presentar un texto móvil en la barra de estado del navegador.
m
Obtener fecha y hora del ordenador del usuario.
co
Obtener información del navegador.
.
Modificar dinámicamente el tamaño de una imagen en una página web.
ad
Validar entradas compradas por internet.
Etc.
lid
bi
Programación del lado del servidor
ea
Como ya hemos comentado, existe también lo que se llama programación del lado del servidor, en el
pl
cual nos encontraremos distintas tecnologías que nos permiten ejecutar aplicaciones en la parte
m
servidora, es decir, en aquellos computadores donde están publicadas las páginas web.
se
A estos servidores se les denomina servidores web o servidores HTTP.

pu
m
ca
10 / 46
Varios servidores web
Y a las aplicaciones desarrolladas en la parte servidora se les conoce como aplicaciones web.
Este tipo de aplicaciones pueden ser de diversa naturaleza como, por ejemplo:
Aplicaciones para acceder a bases de datos.
Aplicaciones para acceder al sistema de ficheros.
Aplicaciones que proporcionan diversas páginas web dependiendo del usuario que las solicite.
m
Etc.
. co
ad
lid
bi
ea
pl
m
se
pu
Ejemplo de programación del lado del servidor

m
Para programar en estas aplicaciones necesitaremos conocer algunas tecnologías como, por
ejemplo:
ca
Microsoft ASP (Active Server Pages).
ASP .NET.
PHP.
ColdFusion.
JSP.
Por tanto, llegará el momento en el que debamos decidirnos por una de estas tecnologías, pero hay
11 / 46
que tener cuidado ya que de esto dependerá la base de datos utilizada, el servidor web y
muchos otros factores. No todas las combinaciones son posibles.
Para este tema podremos utilizar varias herramientas, pero, sobre todo, recomendaremos dos.
Una más fácil de usar como Notepad++ en el cual podremos probar código simple y hacer los
primeros ejercicios y algún IDE (Entorno de Desarrollo) como, por ejemplo, NetBeans o Eclipse
para realizar proyectos más grandes y de mayor complejidad.
m
Ambas son aplicaciones libres y gratuitas.
co
Para descargar Notepad++:
.
ad
http://notepad-plus-plus.org/download
lid
bi
Para descargar NetBeans
ea
https://netbeans.apache.org/download/index.html " target="_blank">

pl
Y aquí su manual:
m
http://irdal.ird.fr/IMG/pdf/Manual_iniciacion_NetBeans_5.pdf
se
Hay que destacar que la programación web por parte del cliente puede resultar un poco más
pu
simple, por lo que podemos utilizar el Notepad++, pero por ende, al programar en el lado del
m
servidor (PHP, ASP .NET, etc.) es recomendable usar el IDE o el entorno de programación.
ca
Hay que decir que este curso no es un curso de programación ni de diseño de páginas web, por lo
que vamos a dar algunas recomendaciones para poder seguir el curso con fluidez.
Deberá conocer HTML para entender el código básico de las páginas web.
http://www.manualweb.net/html/
Deberás tener conocimientos de programación, aunque el curso recuerde los conceptos
12 / 46
fundamentales.
Deberá tener conocimientos de bases de datos. Conceptos como tabla, relación, consulta,
SQL, deberán ser conocidos.
http://programacion.net/articulo/tutorial_basico_de_mysql_189
En este primer ejemplo, vamos a hacer una simple aplicación, la cual mostrará un mensaje de
alerta en la pantalla y en la que el usuario al hacer clic se le descubrirá un mensaje.
m
<HTML>
co
<HEAD>
.
ad
<TITLE>Ejemplo con eventos</TITLE>
</HEAD> lid
bi
<BODY BGCOLOR=#FFFFFF><FORM NAME="Form1">
ea
<INPUT TYPE="button" NAME ="Button1" VALUE="Haz click aquí"

pl
onClick="alert ('¡Bienvenido a este curso!')">

m
se
</FORM>
pu
</BODY>
m
</HTML>
ca
Abra NotePad++.
Inserte este código en NotePad++.
Guarda el archivo con extensión .html ( Ej.: prueba1.html).
Clic en ejecutar, y seleccione el navegador que utilice.
13 / 46
m
. co
ad
Como podremos ver, se ejecutará el código directamente en el navegador seleccionado, y veremos
lid
un botón que, al hacer clic, nos mostrará un mensaje de bienvenida.
bi
ea
pl
m
se
pu
m
Como ya sabemos, la estructura de un HTML es del tipo:

ca
14 / 46
m
co
Pues bien, nosotros podremos introducir el código de JavaScript o en la cabecera (HEAD) o en el
.
ad
cuerpo (BODY) dependiendo de la función que le vayamos a dar.
lid
Este código de JavaScript se encierra siempre entre <SCRIPT> y </SCRIPT> y tiene la estructura:
bi
ea
pl
m
se
pu
m
ca
Donde podremos observar varias cosas:
El código se puede escribir en varios lenguajes, por tanto, hay que indicar al SCRIPT en qué
tipo de lenguaje lo vamos a escribir. Esto se hace mediante
15 / 46
type= “text/javascript”, antiguamente se utilizaba language = “JavaScript”, pero hoy en día ha
quedado en desuso.
Por otra parte, debemos ocultar el código a los navegadores que no sepan interpretarlo (en la
actualidad, todos los navegadores interpretan JavaScript), y para ello se utilizan los
comentarios (comentario de inicio “” ).
Para indicar un comentario de una sola línea, JavaScript utiliza “// “.
m
Veamos qué pasaría si el navegador no reconociera el código JavaScript:
. co
Como no reconoce la etiqueta <SCRIPT> simplemente la ignora.
ad
Encuentra el símbolo de inicio de comentario HTML (“”.

lid
Como no se reconoce la etiqueta </SCRIPT>, pasa a la línea siguiente.
bi
ea
Ahora veamos qué pasaría con un navegador que sí lo reconociera:

pl
Reconoce la etiqueta <SCRIPT>, así que empieza a interpretar el código siguiente, excepto los
m
comentarios de HTML (<!--).

se
Interpreta el código siguiente hasta que llega a la línea que muestra un comentario de
JavaScript (//), ignorando dicha línea.

pu
Reconoce la etiqueta </SCRIPT>, de forma que sabe que lo siguiente ya no es JavaScript.

m
Una cosa a tener en cuenta es que JavaScript, a diferencia de HTML, distingue entre minúsculas y
ca
mayúsculas. Ten cuidado con ello.
Aunque en la actualidad, todos los navegadores están preparados para ejecutar JavaScript,
podríamos crear código alternativo para aquellos navegadores que no lo estuviesen.
¿Cómo?, muy fácil:
Incluye la etiqueta <NOSCRIPT> tras la etiqueta </SCRIPT> de fin de guion.
Incluye el código HTML que desees para esta sección de la página.
16 / 46
Finaliza con </NOSCRIPT>.
m
. co
ad
lid
bi
Cuando un navegador interpreta la etiqueta <SCRIPT> simplemente se salta la etiqueta
ea
<NOSCRIPT>.
pl
Contenido alternativo
m
Ahora vamos a repasar algunos conceptos relacionados con la programación que nos serán útiles a
se
la hora de programar en JavaScript.

pu
Un concepto muy importante es el concepto de variable.

m
Una variable es una ubicación temporal de memoria donde el programador guarda cierto valor
ca
que le interesa retener durante la ejecución del script o guion.
Observemos durante un minuto el siguiente código:
17 / 46
m
. co
ad
lid
bi
Seguramente habremos visto ya, algunas curiosidades a la hora de escribir código en JavaScript,
ea
pero quizás las más destacadas en este ejemplo sean:

pl
m
Para poder utilizar las variables, estas deben estar declaradas (es decir, tendremos que
darles un nombre y opcionalmente podremos inicializarlas o no):

se
Para declarar la variable se utilizar la palabra reservada “var” seguida del nombre de
pu
la variable.
m
Para inicializar la variable lo haríamos así var Mivariable = “Esta es mi variable”.

ca
Al inicializar una variable a un campo de texto es necesario poner las comillas dobles (“”)
o las comillas simples (‘’). Da igual cuales utilicemos pero si empezamos con unas, debemos
terminar con ellas.
18 / 46
m
co
Principales elementos de la gramática de JavaScript:
.
ad
lid
bi
ea
pl
m
se
pu
m
ca
Variables
Ahora veremos el conjunto de valores que puede tener una variable y el conjunto de operaciones en
las que puede formar parte.
A esto se le llama tipo de dato.
19 / 46
Observemos este fragmento de código:
var Variable2 = 255
Variable2 = "Ahora soy de texto"
Como podemos observar al principio Variable2 tiene un tipo de dato “entero”, mientras que en la
segunda línea vemos como almacenamos en ella un tipo de dato “cadena de texto”. Esto quiere decir
que en una misma variable podremos almacenar diferentes tipos de datos, pero tenemos que
m
tener cuidado ya que JavaScript suele hacer conversiones automáticas, y en algunas ocasiones, nos
co
puede ocasionar problemas.
.
ad
Pero ¿qué tipo de datos puede almacenar una variable?
En JavaScript podrá almacenar:

lid
bi
Números: sin distinción entre 240 y 240.5, es decir, entre entero y real.
String: series de caracteres encerrados entre (‘) o (“).

ea
Boolean: un valor lógico (true o false).

pl
Null: sin valor.

m
Operadores
se
pu
En JavaScript se puede utilizar un gran número de operadores divididos según su carácter:
Operadores matemáticos
m
ca
Suma (+)
Diferencia (-)
Multiplicación (*)
División ( / )
Módulo (%)
Incremento (++)
Decremento (--)
Negación (-)
20 / 46
Operadores de comparación
Igual que (==)
Distinto a (!=)
Menor que (<)
Mayor que (>)
Mayor o Igual que (>=)
Menor o Igual que (<=)
m
co
Operadores de asignación:
.
ad
Asignación ( =)
Se asigna a la suma o concatenación (+=)
Se asigna a la resta (-=) lid

bi
Se asigna a la multiplicación (*=)
ea
Se asigna a la división (/=)
Se asigna al módulo (%=)

pl
m
Operadores con cadenas:

se
Concatenación (+)
pu
Etc.
m
Vamos a resaltar un caso especial que suele llevar a errores como es el del operador + ya que en
ca
algunas ocasiones servirá para sumar y en otras para concatenar.
Si tenemos 2 números y usamos +, lógicamente los sumará.
Si tenemos 2 cadenas y usamos +, lógicamente no los sumará sino que los concatenará.
Si tenemos un número y una cadena, JavaScript convertirá automáticamente el número a
cadena y los concatenará. EJ. 250 + “Ejemplo”, dará como resultado “250Ejemplo”, siendo esta
una cadena de texto. Hay que tener especial cuidado con este caso.
21 / 46
Ahora veremos que también hay que tener cuidado con el orden de preferencia de los operadores.
Imaginemos esta operación, 3 + 5 * 2.
¿Qué valor obtendremos? ¿16 o 13?, pues bien, viendo la siguiente tabla, veremos que el operador *
se ejecuta antes que el operador +, por lo que el resultado será 13.
Consejo: Utilizar paréntesis para no dar lugar a equivocación.
m
. co
ad
lid
bi
ea
pl
m
se
Cuadros de diálogo
pu
Utilizando los cuadros de diálogo que incorpora el lenguaje JavaScript, podremos interaccionar
m
con el usuario, de tal forma que este proporcione información para continuar la ejecución del script,
o en algunas ocasiones simplemente para informar de alguna circunstancia o advertencia.

ca
En JavaScript existen 3 cuadros de diálogo predefinidos:
1. alert (mensaje): sirve para enviar un mensaje de información a la persona usuaria.
Es el más sencillo de todos y solo incluye un botón “Aceptar” con el que interaccionará el usuario.
Veamos este fragmento de código:
22 / 46
m
. co
ad
Esto producirá en el navegador la salida siguiente: lid
bi
ea
pl
m
se
pu
m
ca
2. confirm(mensaje): sirve para que el usuario confirme la realización de alguna tarea. A
diferencia del cuadro anterior, ahora aparecen dos botones (Aceptar y Cancelar). Tu puedes saber
qué botón se ha pulsado y actuar en consecuencia.
Veamos este fragmento de código:
23 / 46
m
. co
ad
Y veremos la siguiente salida en el navegador: lid
bi
ea
pl
m
se
pu
m
ca
Observar en la línea 6, dependiendo del valor que la persona usuaria elija (“aceptar” o “cancelar”),
podremos almacenar dicho valor en una variable “resultado” para más tarde, utilizarla o, por
ejemplo, imprimirla.
3. prompt (mensaje [, valor por defecto]): sirve para recabar información de la persona usuaria.
Es el cuadro de diálogo más complejo.
El valor por defecto lo utilizaremos si el usuario no escribe nada y pulsa en aceptar.
24 / 46
m
. co
ad
Al ejecutarlo, observará un cuadro de diálogo como este:
lid
bi
ea
pl
m
se
pu
m
ca
Entonces, habrá tres tipos de situaciones:
La persona usuaria introduce su nombre, por lo que en la variable resultado, se almacenará
como un campo de texto.
La persona usuaria no introduce nada y pulsa aceptar, entonces la variable resultado tendrá el
valor por defecto (“anónimo” en este caso).
La persona usuaria pulsa cancelar, entonces la variable resultado almacenará el valor lógico
25 / 46
(“False”).
Práctica
En esta práctica preparará el entorno en el que va a programar en JavaScript.
Utilice Notepad++ y asegúrese de que tiene instalado cualquiera de los navegadores mencionados
anteriormente.
m
Abra Notepad++ y escriba el siguiente código:
. co
ad
lid
bi
ea
pl
m
se
Guarde el fichero como practica2.html y ejecútelo en su navegador.

pu
¿Cuál ha sido el error cometido?

m
Crea un nuevo documento HTML en el que incluirás código JavaScript para realizar las
ca
siguientes tareas:
La persona usuaria debe introducir su nombre y apellidos, en este orden
Una vez hecho esto, debes mostrar un cuadro de diálogo en el que se muestre el
siguiente mensaje:
¿Eres tú Apellidos, Nombre?
Donde tanto Apellidos como Nombre serán los datos introducidos previamente por la persona
usuaria. Observa cómo aparece una coma entre los apellidos y el nombre.
26 / 46
Debe permitir que la persona usuaria pueda aceptar o cancelar el cuadro de mensaje.
Guarde este nuevo fichero con el nombre Practica2final.html y comprueba el resultado en su
navegador.
A partir de este punto, vamos a ir viendo los conceptos básicos de programación que podemos
aplicar.
m
Un código en JavaScript se ejecuta normalmente de izquierda a derecha y de arriba debajo de
co
forma secuencial.
.
ad
Pero podemos modificar este flujo secuencial mediante estructuras de control.
Existen 2 categorías de estructuras de control:

lid
bi
Estructuras de decisión (IF, ELSE, etc.).
ea
Estructuras de repetición (FOR, WHILE).

pl
Procederemos a estudiar cada uno de estos tipos más detenidamente.

m
La estructura de decisión clásica es:

se
pu
m
ca
Donde la cláusula else es opcional.
Debemos entender esta estructura del siguiente tipo:
Si condición es verdadera, se ejecutará acciones1, en otro caso, se ejecutará acciones2.
Veamos este código:
27 / 46
m
. co
ad
lid
bi
ea
pl
m
se
pu
m
ca
Hay que destacar que podemos hacer estructuras más complejas de este tipo, sin más que
introducir más if/else dentro de otros if/else.
Las condiciones también suelen llamarse expresiones lógicas porque solo pueden dar como
resultado los valores verdadero o falso.
28 / 46
Tú puedes utilizar los operadores de comparación siguientes para crear expresiones de este tipo:
== (igual a)
!= (distinto a)
< (menor que)
> (mayor que)
<= (menor o igual que)
>= (mayor o igual que).
m
co
Además de estos operadores, también pueden utilizar los operadores lógicos AND, OR y NOT.
.
ad
En JavaScript el operador AND se representa con los símbolos &&, OR con || y NOT con !
lid
Así, una expresión del tipo exp1 AND exp2 se evalúa a verdadero solo en el caso de que tanto exp1
como exp2 se evalúen a verdadero. En cualquier otro caso, la expresión se evaluará a falso.
bi
Sin embargo, exp1 OR exp2 se evalúa a verdadero en el caso de que bien exp1 o bien exp2 se
ea
evalúen a verdadero (observe que es suficiente con que lo haga una de las dos o las dos al mismo
pl
tiempo). En el caso de que ninguna se evalúe a verdadero, la expresión total se evaluará a falso.
m
Finalmente, NOT exp1 se evalúa a verdadero si exp1 se evalúa a falso y se evalúa a falso si exp1 se
se
evalúa a verdadero. Es decir, realiza la negación de exp1.

pu
m
ca
Otro tipo de estructuras que pueden modificar el flujo de ejecución son las estructuras de repetición
o también conocidas como bucles. Estas estructuras sirven para repetir un conjunto de
instrucciones.
29 / 46
En este sentido, puede querer repetir un número determinado de veces el conjunto de instrucciones
o, sin conocer dicho número, desear repetirlas mientras se cumpla cierta condición.
Esto quiere decir que existen dos tipos de estructuras de repetición: aquellas en que el número de
repeticiones es conocido y aquellas en las que no lo es.
Utilizando la estructura for, especificas el número de veces que quiere que se repita un conjunto
de instrucciones. Por lo tanto, ese número debe ser conocido.
m
La sintaxis correcta de esta estructura de repetición es:
. co
ad
lid
bi
Debemos entender esta estructura como:
ea
La “expresión” suele consistir en dar un valor inicial a una variable.

pl
Este valor se va comparando en cada una de las repeticiones según la “condición” establecida.
m
“Operación” permite acercar el valor inicial al valor final, es decir, en el cual ya no se realizarán más
se
repeticiones.
pu
En cada vuelta del bucle se ejecutará 1 vez lo que diga “acciones”.

m
Veamos este código:

ca
30 / 46
m
. co
ad
Y el resultado en pantalla será:
lid
bi
ea
pl
m
se
pu
m
Es decir, i vale 1 al principio, como 1 es < que 10, se ejecuta lo que hay dentro de las { }.
ca
Imprime lo que vale i (vale 1), imprime un salto de línea y cuando ha terminado de imprimir todo el
cuerpo del bucle, hace i++, es decir, ahora i = 2, y vuelve al principio…
Así hasta que i=10, que al comprobar si 10<10, esta condición es igual a FALSE y se sale del bucle.
31 / 46
Por ejemplo, piensa en este escenario: le pides a la persona usuaria que introduzca un número e
imprime los números que van desde el 1 hasta dicho número.
Observa cómo, de antemano, no sabes cuántas veces se va a repetir el bucle.
Utilizando la estructura while, podrás repetir un conjunto de instrucciones mientras se
cumpla cierta condición. La sintaxis correcta de esta estructura es:
m
. co
ad
lid
Que lo que hará será ejecutar las acciones hasta que la condición sea Falsa.
bi
Veamos el siguiente código:
ea
pl
m
se
pu
m
ca
Observamos en la línea 8 que le pedimos a la persona usuaria mediante un prompt un número de
veces a ejecutar el bucle while.
32 / 46
Esta se almacena en la variable respuesta, y luego podremos ejecutar el bucle while tantas veces
como diga respuesta.
Notar que al estar programando la función, no sabíamos el valor exacto de respuesta, por lo que
no podíamos utilizar un for.
m
. co
ad
En ocasiones, desearás salir de un bucle aunque la condición de prueba no se haya cumplido.
lid
En estos casos se puede utilizar la sentencia break si desea salir completamente del bucle o
continue si lo que quiere es no ejecutar el resto de sentencias del cuerpo del bucle, sino pasar a la
bi
siguiente repetición. Al igual que ocurría con las estructuras de decisión, puede anidar bucles en el
ea
interior de otros bucles. En estos casos, para cada repetición del bucle exterior, se ejecuta
pl
completamente el bucle interior.

m
Tenga en cuenta que la incorporación de bucles en el interior de otros bucles puede hacer que la
se
ejecución del código consuma mucho tiempo.

pu
m
ca
Una función no es más que un conjunto de instrucciones que realiza una tarea bien
definida.
La ventaja principal es la reutilización, ya que al descomponer el programa en funciones, podremos
utilizar estas funciones en más de un sitio y, por lo tanto, no tener que volver a escribir el mismo
código.
Pero para poder utilizar una función, lo primero es definirla.
33 / 46
La estructura de una función es del tipo:
Es decir, debemos comenzar con la palabra function, seguida del nombre que le queramos poner y
m
entre paréntesis una lista de parámetros.
co
Entre las { }, están las acciones (tareas) a realizar.
.
ad
Realicemos una función muy simple la cual valida si un número introducido está entre 1 y 20.
lid
Si es afirmativo devolverá verdadero, en otro caso, devolverá falso.
bi
Abramos Notepad++ y escribamos esto:
ea
pl
m
se
pu
m
ca
34 / 46
Y observemos varios detalles:
La lista de parámetros ahora es un valor, llamado número.
La función devolverá un valor, que la utilizará a través de la instrucción return.
Una función puede llamar a otra función para realizar su cometido (en este ejemplo no es su
caso).
Pero si guardamos el archivo y lo ejecutamos, vemos que no sucede nada.
m
co
Esto es, porque después de definirla, necesitamos llamarla.
.
Como se ha comentado, la definición de una función sirve para especificar qué es lo que hace una
ad
función, pero, la definición por sí sola no sirve de nada si no la llamamos.
lid
Para llamar a una función debemos indicar el nombre de la función e introducirle los que llamamos
bi
argumentos que son la lista de parámetros con los que definíamos la función.
ea
Es decir:
pl
Definición = nombre (lista de argumentos).

m
Llamada = nombre (argumentos)

se
Estos argumentos por tanto deben concordar con la lista de argumentos de la función que vamos a
pu
utilizar.
m
Por ejemplo, en el código anterior serviría algo como validar(5).

ca
Si la función devuelve algún valor, nosotros podremos asignarlo a una variable o utilizarlo en alguna
expresión lógica.
Veamos este ejemplo, en el que utilizamos el código anterior como condición lógica.
35 / 46
m
. co
ad
lid
bi
ea
Como vemos, ahora, tenemos 2 script, uno para la definición de la función y otro que nos sirve para
pl
llamar a la función (Nota: también podríamos haberlo hecho todo sobre el mismo script).
m
Veamos el siguiente código en el que una función, llamada cuadrado, llama en su interior a la
se
función validar, y un script que pide un número a la persona usuaria y muestra el resultado del
pu
cuadrado (validado) en la página web.

m
ca
36 / 46
m
. co
ad
lid
bi
ea
pl
m
se
pu
m
ca
En la definición de una función se puede utilizar cualquier sentencia de JavaScript, incluida la
declaración de variables.
37 / 46
En estos casos, se dice que la variable es local ya que solo puede ser conocida en el interior de
la función.
A diferencia de las variables locales, las variables declaradas fuera de las funciones son
globales. Esto quiere decir que pueden ser conocidas y, por lo tanto, utilizadas, tanto dentro como
fuera de las funciones.
Pero ¿qué sucede si declara una variable global y una variable local con el mismo nombre?
m
. co
ad
lid
bi
ea
pl
m
se
pu
Observa cómo esta situación la tenemos en este sencillo script.

m
Así, se ha declarado una variable de nombre cuenta tanto en el interior de la función como a nivel
ca
del script. Es decir, una es local y la otra es global.
Dentro de la función siempre tiene preferencia la variable local respecto a la global. Por lo
tanto, en el código asociado a la función SumaN, cuando se utiliza el identificador cuenta, se está
refiriendo a la variable local que ha declarado en su interior.
Además, observa cómo el parámetro x actúa como una variable local más de la función. Por ello,
podemos comparar el valor de i con el de x. En definitiva, el script lo único que hace es obtener el
resultado de 1 + 2 + 3 + 4 + 5 = 15.
38 / 46
Observa la figura siguiente: la caja exterior representa el script, mientras que las cajas interiores
son funciones definidas en el script.
Las funciones conocen todo lo que está fuera de ellas y lo que está en su interior, mientras que fuera
de las funciones solo se pueden utilizar las variables declaradas a nivel de script.
m
. co
ad
lid
bi
ea
pl
m
se
pu
m
ca
Actividad práctica
Esta práctica se divide en dos partes: en la primera trabajarás con estructuras de control y en la
segunda crearás y utilizarás funciones.
ESTRUCTURAS DE REPETICIÓN
Inserta código JavaScript en un fichero HTML de forma que se imprima en el documento la
39 / 46
secuencia de números 12345. Para ello utiliza primero un bucle for y después un bucle while
equivalente.
Recuerda que puedes utilizar la línea document.write (...) para imprimir en la página web.
Guarda el fichero con el nombre Prac03a.html y comprueba el resultado en su navegador web.
ESTRUCTURAS DE DECISIÓN
m
Inserta código JavaScript en un nuevo fichero HTML de forma que se realiza la siguiente tarea:
co
La persona usuaria introduce su nombre y más tarde su password.
.
ad
Si los datos son correctos, entonces aparece un cuadro de diálogo con el mensaje correspondiente.
lid
Si el nombre de usuario es correcto, pero no así el password, entonces aparecerá el mensaje "Su
contraseña es incorrecta.". Esta es la combinación correcta:

bi
ea
pl
m
Si el nombre es incorrecto, entonces no deberá permitir introducir la contraseña y mostrará el

se
mensaje .Lo siento, usted no es una persona autorizada.

pu
Guarda el fichero con el nombre Prac03b.html y comprueba el resultado.

m
TRABAJAR CON FUNCIONES

ca
Crea un nuevo fichero e inserta el código JavaScript necesario para definir una función que, dado
un número del 1 al 7, devuelva una cadena de texto indicando el día de la semana
correspondiente. Por ejemplo, si es 1, entonces devuelve .Lunes.; si es 2, entonces devuelve
.Martes., etc.
Sitúa el código de la función en la cabecera del fichero html.
Después deberás escribir código JavaScript de forma que se le pida a la persona usuaria que
introduzca un número del 1 al 7 y se utilice dicho número para llamar a la función y que se muestre
40 / 46
el día correspondiente en letras.
Ten en cuenta que la función solo realizará el cálculo necesario, no mostrará el mensaje
correspondiente.
Este código estará situado en el cuerpo del fichero html.
Guarda el nuevo fichero como Prac03c.html y comprueba el resultado en su navegador web.
Solución de la práctica
m
co
ESTRUCTURAS DE REPETICIÓN
.
ad
lid
bi
ea
pl
m
se
pu
m
ca
ESTRUCTURAS DE DECISIÓN
41 / 46
m
. co
ad
TRABAJAR CON FUNCIONES
lid
bi
ea
pl
m
se
pu
m
ca
Indica si el siguiente enunciado es verdadero o falso: "el modelo de objeto de
42 / 46
documento (DOM) se define como una interfaz de programación para los

documentos HTML y XML."
Verdadero
Falso
m
. co
ad
lid
bi
ea
pl
m
se
pu
m
ca
43 / 46
Recuerda
[[[Elemento Multimedia]]]
m
. co
ad
lid
bi
ea
pl
m
se
pu
m
ca
44 / 46
Autoevaluación
Indica si el siguiente enunciado es verdadero o falso: el modelo de objeto de

documento (DOM) es una interfaz de programación para los documentos HTML
y XML.
Verdadero
m
Falso
. co
ad
El DOM:
La manipulación se hace vía JavaScript.

lid
bi
ea
Da una representación del documento como un grupo de nodos y objetos

estructurados que tienen propiedades y métodos.
pl
m
Modelo de objeto del documento para cada documento.

se
pu
Una página web es un documento. Este documento puede exhibirse en:

m
La ventana de un navegador o también como código fuente HTML.

ca
La base del funcionamiento del DOM.
Pero, en los dos casos, es el mismo documento.
Indica si el siguiente enunciado es verdadero o falso: el W3C DOM estándar

forma la base del funcionamiento del DOM en muchos navegadores modernos.
45 / 46
Verdadero
Falso
El DOM...
m
Es un lenguaje de programación.
co
No es un lenguaje de programación pero sin él, el lenguaje JavaScript no tiene ningún
.
ad
modelo o noción de las páginas web.
lid
Es un lenguaje de programación, al igual que SQL.
bi
ea
pl
m
se
pu
m
ca
46 / 46

Manual UD5. JavaScript y DOM

Cargado por

Copyright:

Formatos disponibles

Manual UD5. JavaScript y DOM

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual UD5. JavaScript y DOM

Cargado por

Copyright:

Formatos disponibles

[AFO018510] IFCT095PO PYTHON Y DJANGO

[MOD016701] IFCT095PO PYTHON Y DJANGO

Conocer qué es DOM.

Utilizar Javascript y DOM.

MAPA CONCEPTUAL [[[Elemento Multimedia]]]

contenidos. El DOM da una representación del documento como un si de grupo de nodos y

que están basados en Gecko.

es un lenguaje de programación pero sin este, el lenguaje JavaScript no dispone de ningún

En el comienzo, JavaScript y el DOM estaban herméticamente enlazados, pero después se

desarrollaron como entidades separadas. El contenido de la página es guardado en DOM y el

acceso y la modificación se hace vía JavaScript. Podría visualizarse aproximadamente así:

API (web o página XML) = DOM + JS(lenguaje de script)

comercio electrónico o e-comerce (electronic commerce en inglés) que consiste en la compra y

accediendo así a millones de personas consumidoras.

Incluso existen empresas dedicadas exclusivamente a la compra/venta, las cuales no tienen ni

dando gran importancia a Internet.

información y sistemas de operaciones.

Las páginas webs existen en un entorno cliente/servidor donde:

El cliente se encarga de solicitar y mostrar al usuario las páginas webs.

El servidor, que las ofrece a los usuarios.

superando así las limitaciones de HTML.

Ejemplo de código JavaScript

interactuar con el sistema operativo o con el usuario.

Se dice que JavaScript es un lenguaje de guiones, ya que escribiremos el código directamente en el

Algunos ejemplos de cosas que podemos hacer como JavaScript será:

Presentar un texto móvil en la barra de estado del navegador.

A estos servidores se les denomina servidores web o servidores HTTP.

Varios servidores web

Aplicaciones para acceder a bases de datos.

Aplicaciones para acceder al sistema de ficheros.

Ejemplo de programación del lado del servidor

Microsoft ASP (Active Server Pages).

muchos otros factores. No todas las combinaciones son posibles.

para realizar proyectos más grandes y de mayor complejidad.

https://netbeans.apache.org/download/index.html " target="_blank">

Deberás tener conocimientos de programación, aunque el curso recuerde los conceptos

SQL, deberán ser conocidos.

alerta en la pantalla y en la que el usuario al hacer clic se le descubrirá un mensaje.

<INPUT TYPE="button" NAME ="Button1" VALUE="Haz click aquí"

onClick="alert ('¡Bienvenido a este curso!')">

Inserte este código en NotePad++.

Guarda el archivo con extensión .html ( Ej.: prueba1.html).

Clic en ejecutar, y seleccione el navegador que utilice.

Como ya sabemos, la estructura de un HTML es del tipo:

Donde podremos observar varias cosas:

tipo de lenguaje lo vamos a escribir. Esto se hace mediante

type= “text/javascript”, antiguamente se utilizaba language = “JavaScript”, pero hoy en día ha

comentarios (comentario de inicio “” ).

Para indicar un comentario de una sola línea, JavaScript utiliza “// “.

hasta encontrar el símbolo “// -->”.

Ahora veamos qué pasaría con un navegador que sí lo reconociera:

comentarios de HTML (<!--).

JavaScript (//), ignorando dicha línea.

Reconoce la etiqueta </SCRIPT>, de forma que sabe que lo siguiente ya no es JavaScript.

mayúsculas. Ten cuidado con ello.

podríamos crear código alternativo para aquellos navegadores que no lo estuviesen.

¿Cómo?, muy fácil:

Incluye la etiqueta <NOSCRIPT> tras la etiqueta </SCRIPT> de fin de guion.

Incluye el código HTML que desees para esta sección de la página.

Finaliza con </NOSCRIPT>.