JavaScript

17
TEMA 24. JAVASCRIPT
José M. Castillo Castillo

JAVASCRIPT
1
INDICE DE CONTENIDO TEMA 24. JAVASCRIPT
1. INTRODUCCIÓN A JAVASCRIPT
1.1.Historia
1.2.Desarrollos posteriores
1.3.Posibilidades y limitaciones
2. HERRAMIENTAS
2.1.Navegador FireFox
2.2.Navegador Chrome
2.3.Bloc de Notas de Windows
3. GRAMÁTICA
3.1.Palabras reservadas
3.2.Sintaxis
3.3.Comentarios
3.4.Declaraciones
3.5.Variables
3.6.Constantes
4. PROGRAMACIÓN
4.1.Como incluir JavaScript en documentos XHTML
4.2.Definir JavaScript en un archivo exterior
4.3.Programación básica. Variables
4.4.Tipos de variables
4.5.Operadores
4.6.Funciones y propiedades
4.7.Programación avanzada. Funciones
5. TIPOS DE DATOS
5.1.Conversor de Tipos
5.2.Conversión de string (cadena de texto) a número.
6. LITERALES
6.1.Literales Array
6.2.Literales Booleanos
6.3.Literales Enteros
6.4.Literales de punto flotante
6.5.Literales de tipo Objeto
6.6.Literales String
7. ESTRUCTURAS DE CONTROLES DE FLUJO
7.1.Estructura de control de flujo If …else
7.2.Ejercicios para realizar prácticas de programación con JavaScript
7.3.Estructura de control de flujo switch
8. BUCLES
8.1.Bucle For
8.2.Bucle do…while
9. EJEMPLOS PRÁCTICOS.

JAVASCRIPT
2
1. INTRODUCCIÓN A JAVASCRIPT
JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web
dinámicas. Una página web dinámica es aquella que incorpora efectos como texto que aparece y
desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de
aviso al usuario.
A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje de
programación Java.
Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario
compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se
pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.
1.1. Historia de JavaScript
JavaScript fue desarrollado originalmente por Brendan Eich de Netscape con el nombre de Mocha, el
cual fue renombrado posteriormente a LiveScript, para finalmente quedar como JavaScript.
El cambio de nombre coincidió aproximadamente con el momento en que Netscape agregó
compatibilidad con la tecnología Java en su navegador web Netscape Navigator en la versión 2.002
en diciembre de 1995.
La denominación produjo confusión, dando la impresión de que el lenguaje es una prolongación de
Java, y se ha caracterizado por muchos como una estrategia de mercadotecnia de Netscape para
obtener prestigio e innovar en el ámbito de los nuevos lenguajes de programación web.
«JAVASCRIPT» es una marca registrada de Oracle Corporation. Es usada con licencia por los
productos creados por Netscape Communications y entidades actuales como la Fundación Mozilla.
Microsoft dio como nombre a su dialecto de JavaScript «JScript», para evitar problemas relacionados
con la marca. JScript fue adoptado en la versión 3.0 de Internet Explorer, liberado en agosto de 1996,
e incluyó compatibilidad con el con las funciones de fecha, una diferencia de los que se basaban en
ese momento. Los dialectos pueden parecer tan similares que los términos «JavaScript» y «JScript» a
menudo se utilizan indistintamente, pero la especificación de JScript es incompatible con la de ECMA
en muchos aspectos.

JAVASCRIPT
3
Para evitar estas incompatibilidades, el World Wide Web Consortium diseñó el estándar Document
Object Model (DOM, o Modelo de Objetos del Documento en español), que incorporan Konqueror,
las versiones 6 de Internet Explorer y Netscape Navigator, Opera la versión 7, Mozilla Application
Suite y Mozilla Firefox desde su primera versión.
En 1997 los autores propusieron JavaScript para que fuera adoptado como estándar de la European
Computer Manufacturers ‘Association ECMA, que a pesar de su nombre no es europeo sino
internacional, con sede en Ginebra. En junio de 1997 fue adoptado como un estándar ECMA, con el
nombre de ECMAScript. Poco después también como un estándar ISO.
JavaScript en el lado servidor
Netscape introdujo una implementación de script del lado del servidor con Netscape Enterprise
Server, lanzada en diciembre de 1994 (poco después del lanzamiento de JavaScript para navegadores
web). A partir de mediados de la década de los 2000, ha habido una proliferación de
implementaciones de JavaScript para el lado servidor. Node.js es uno de los notables ejemplos de
JavaScript en el lado del servidor, siendo usado en proyectos importantes.
1.2. Desarrollos posteriores
JavaScript se ha convertido en uno de los lenguajes de programación más populares en Internet. Al
principio, sin embargo, muchos desarrolladores renegaban del lenguaje porque el público al que va
dirigido lo formaban publicadores de artículos y demás aficionados, entre otras razones.
La llegada de Ajax devolvió JavaScript a la fama y atrajo la atención de muchos otros programadores.
Como resultado de esto hubo una proliferación de un conjunto de frameworks y librerías de ámbito
general, mejorando las prácticas de programación con JavaScript, y aumentado el uso de JavaScript
fuera de los navegadores web, como se ha visto con la proliferación de entornos JavaScript del lado
del servidor. En enero de 2009, el proyecto CommonJS fue inaugurado con el objetivo de especificar
una librería para uso de tareas comunes principalmente para el desarrollo fuera del navegador web.
En junio de 2015 se cerró y publicó el estándar ECMAScript 6 con un soporte irregular entre
navegadores y que dota a JavaScript de características avanzadas que se echaban de menos y que
son de uso habitual en otros lenguajes como, por ejemplo, módulos para organización del código,
verdaderas clases para programación orientada a objetos, expresiones de flecha, iteradores,
generadores o promesas para programación asíncrona.
La versión 7 de ECMAScript se conoce como ECMAScript 2016, y es la última versión disponible,
publicada en junio de 2016. Se trata de la primera versión para la que se usa un nuevo procedimiento
de publicación anual y un proceso de desarrollo abierto.
1.3. Posibilidades y limitaciones
Desde su aparición, JavaScript siempre fue utilizado de forma masiva por la mayoría de sitios de
Internet. La aparición de Flash disminuyó su popularidad, ya que Flash permitía realizar algunas
acciones imposibles de llevar a cabo mediante JavaScript.
Sin embargo, la aparición de las aplicaciones AJAX programadas con JavaScript le ha devuelto una
popularidad sin igual dentro de los lenguajes de programación web.
En cuanto a las limitaciones, JavaScript fue diseñado de forma que se ejecutara en un entorno muy
limitado, de esta forma, los scripts de JavaScript no pueden comunicarse con recursos que no
pertenezcan al mismo dominio desde el que se descargó el script.

JAVASCRIPT
4
2. HERRAMIENTAS
En esta unidad se irán utilizando diferentes herramientas, en principio todas ellas de libre uso.
Una de las primera herramientas que se van a utilizar, es el navegador Firefox en su última versión a
fecha 11/01/2017, ya que incorpora utilidades para programadores que inicialmente a los usuarios
noveles les resultara fáciles de encontrar.
2.1. Navegador Firefox
El navegador Firefox, incorpora dos herramientas para programadores, la primera es la consola web,
para abrir la consola se ha de seleccionar la opción “Consola Web”, desde el menú “Desarrollador
Web”. Al seleccionar la opción se ha de presentar la consola que ha de tener un aspecto similar al
siguiente.
La consola nos va a permitir ejecutar órdenes sencillas de JavaScript, para probar su funcionamiento,
pero en el caso de querer ejecutar funciones más complejas de JavaScript, nos resultara insuficiente.
Para solucionar este inconveniente se puede utilizar otra herramienta denominada Borrador, que
viene a ser un pequeño editor de textos que nos permite teclear más código para su ejecución, para
acceder al “Borrador”, se ha de seleccionar la opción “Borrador”, desde el menú “Desarrollador
Web” o tecleando las teclas rápida Mayús + F4. Al ejecutar la opción se ha de presentar una ventana
similar a la que se muestra en la imagen siguiente.

JAVASCRIPT
5
Como se puede observar se abre una nueva ventana y es un editor que puedes usar para escribir y
ejecutar JavaScript en el navegador. Puedes también guardar los scripts en el disco y cargarlos desde
el disco.
Si eliges “Mostrar”, el bloque de código tecleado en el borrador, es ejecutado en el navegador y el
resultado es insertado de nuevo dentro del bloque como un comentario.
De momento, empezaremos con estas herramientas comentadas, aunque se deja a libre elección del
usuario, el utilizar el editor de textos que más le interese.
Para realizar los ejercicios, vamos a utilizar el navegador Mozilla Firefox, una vez ejecutado el
programa, se ha de pulsar en el botón correspondiente al menú y seleccionar la opción
“Desarrollador”, al pulsar sobre esta opción se presenta un menú de opciones, en el cual se ha de
seleccionar la opción “Borrador”.
Al realizar esta acción se ha de presentar en pantalla la siguiente ventana.
Una vez situados en la ventana Borrador, se ha de teclear el código que se muestra en la imagen
siguiente. la primera parte de código que se ha de teclear es lo que se denomina una función, la cual
está compuesta por la palabra reservada “function”, seguida del nombre que se quiere asignar a la
función, a continuación se abren paréntesis y si la función ha de recibir algún parámetro, se teclean
los nombres de los parámetros separados por comas, en esta ocasión el nombre del parámetro que
se quiere recibir es una cadena de texto, y se ha denominado sNombre, se antepone la letra “s” en
esta ocasión para indicar que el tipo de dato que se recibe es una cadena de texto, esta es una buena
costumbre de programación, pero no es obligatorio seguirla. Seguidamente se abren llaves y se
teclea el código que queremos contenga la función, en este caso se especifica la orden “return”, la
cual hace que la función devuelva un resultado, que es un mensaje seguido del valor del parámetro
que se haya especificado en la llamada a la función.
Una vez finalizada la función, y fuera de la misma se especifica la orden de llamada a la misma, para
realizar esta acción se ha de teclear el nombre de la función, pasando entre los parámetros la cadena
de texto que se quiere enviar a la función.

JAVASCRIPT
6
Tecleado el código, para ejecutar la función se puede pulsar el botón “Mostrar”, en la ventana
“Borrador”, el cual al pulsarlo ha de mostrar el siguiente resultado.
2.2. Navegador Chrome
Otra opción posible es la de trabajar inicialmente con el navegador Chrome, el cual también tiene
herramientas para desarrolladores que pueden ser utilizadas como la consola.
Para acceder a la consola se ha de pulsar en el botón de menú de Chrome, seleccionar la opción
“Más Herramientas”, y a continuación pulsar sobre la opción “Herramientas para desarrolladores”.
Es posible pulsar la combinación de teclas Ctrl + Mayúsculas + I, la cual es el acceso rápido para la
consola.
Una vez ejecutado el comando anterior, se ha de presentar la consola en el navegador Google
Chrome, mostrando el siguiente aspecto.

JAVASCRIPT
7
2.3. Bloc de Notas de Windows
Otra de las formas de poder practicar creando archivos html y javascript es mediante el editor de
texto Bloc de notas de Windows. Se puede utilizar perfectamente para escribir o importar códigos
html y JavaScript y se guarda con la extensión *.html o *.js. Hay que tener en cuenta que el
navegador primeramente lee el archivo html y este llamará a un archivo *.js.

JAVASCRIPT
8
3. GRAMÁTICA
Como cualquier otro lenguaje de programación, se han de conocer en primer lugar, la forma en la
que se han de escribir las sentencias u órdenes que se quieren ejecutar, ya que estas han de cumplir
una estructura a la hora de teclearlas, también es necesario conocer los tipos de datos que se
pueden gestionar con el lenguaje, numéricos, alfabéticos, etc.
La sintaxis del lenguaje JavaScript está influenciada por otros lenguajes de programación, como
pueden ser C, Java, Perl, Python, Etc. Por esta razón los programadores acostumbrados a estos
lenguajes tendrán más fácil su aprendizaje.
Las ordenes o instrucciones que tiene el lenguaje para ser ejecutadas, los programadores
normalmente las denominamos “SENTENCIAS”, estas sentencias cuando son escritas en javascript
para diferenciarlas unas de otras han de estar separadas por un punto y coma, resumiendo cualquier
orden que se exprese en el editor de código ha de finalizar en punto y coma (;)
El lenguaje de javascript, al igual que en otros lenguajes, se utilizan palabras reservadas, también
denominadas palabras clave o keywords, estas solo se pueden utilizar para expresar las sentencias,
pero el programador no puede utilizarlas como le convenga, ya que el intérprete del lenguaje las
considera reservadas por el propio lenguaje.
Como es lógico se pueden utilizar para escribir nuestros programas, espacios en blanco, tabulaciones,
saltos de líneas, etc. De esta forma se podrá dar una estructura visual al programa escrito y facilitar
su lectura y modificación.
3.1. Palabras reservadas
Son las palabras (en inglés) que se utilizan para construir las sentencias de JavaScript y que por tanto
no pueden ser utilizadas libremente. Las palabras actualmente reservadas por JavaScript son 25:
break case catch continue default
delete do else finally for
function if in instanceof new
return switch this throw try
typeof var void while with
3.2. Sintaxis
La sintaxis de un lenguaje de programación se define como el conjunto de reglas que deben seguirse
al escribir el código fuente de los programas para considerarse como correctos para ese lenguaje de
programación.
La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación como Java y C. Las
normas básicas que definen la sintaxis de JavaScript son las siguientes:
• No se tienen en cuenta los espacios en blanco y las nuevas líneas
• Se distinguen las mayúsculas y minúsculas
• No se define el tipo de las variables
• No es necesario terminar cada sentencia con el carácter de punto y coma (;)
• Se pueden incluir comentarios

JAVASCRIPT
9
3.3. Comentarios
La mayoría de lenguajes de programación, incluyen la opción de poder insertar comentarios en el
código mientras se está realizando un programa, de esta forma se pueden insertar anotaciones en el
texto, que permiten aclarar la legibilidad del código y ayudar al programador a diferenciar los
diferentes algoritmos en su programa.
Cuando se quiera insertar comentarios en el código, JavaScript permite utilizar comentarios de una
sola línea y comentarios de varias líneas.
Para insertar un comentario de una sola línea se ha de utilizar la estructura “//” antes del
comentario, de esta forma se especifica que es un comentario de una sola línea.
Para insertar un comentario de varias líneas se ha de utilizar la estructura “/*” para comenzar el
comentario y terminar con la estructura “*/”, todo lo que quede encerrado dentro del principio y fin
de estas etiquetas se considera un comentario que no será procesado ni ejecutado por el intérprete
de JavaScript.
1. // Esta linea es un comentario de una sola linea
2.
3. /* Este es un ejemplo
4. de un comentario compuesto
5. por varias lineas de texto */
3.4. Declaraciones
Los programadores denominados declaración a la creación de una variable o una constante para su
utilización en el programa. En JavaScript existen tres variantes para poder realizar una declaración de
variable, para realizar esta acción se puede utilizar las sentencias: var , let y const .
3.5. Variables
Pero qué es eso de una ¡VARIABLE!, puede ser que nos estemos preguntando. Una definición formal
de una variable puede ser la siguiente:
En programación, una variable está formada por un espacio en el sistema de almacenaje (memoria
principal de un ordenador) y un nombre simbólico (un identificador) que está asociado a dicho
espacio. Ese espacio contiene una cantidad o información conocida o desconocida, es decir un valor.
Una definición más informal, es que podemos imaginar una variable como una caja o contenedor,
donde se puede almacenar un contenido (valor), y que ese contenido se puede cambiar en cualquier
momento de la ejecución del programa, es decir puede variar el contenido de caja, de ahí la
definición de variable.
El muchos lenguajes de programación hay que especificar el “tipo” a la variable, que no es más que
indicar que es lo que va a almacenar la variable, si va a ser solo numérica o va a ser alfanumérica, la
declaración de tipo, permite realizar una mejor reserva del espacio de memoria que se quiere
utilizar.

JAVASCRIPT
10
Para poder identificar a las variables, estas se han de crear por el programador, especificando un
nombre para cada una de ellas, este nombre que se asigna se suele llamar “identificador”, pues bien
este identificador ha de cumplir una serie de reglas, no se puede escribir cualquier nombre para una
variable.
Un identificador en JavaScript tiene que empezar con una letra, un guión bajo ( _ ) o un símbolo de
dólar ($). Los caracteres siguientes del identificador pueden ser números. Ya que JavaScript
diferencia entre mayúsculas y minúsculas, las letras incluyen tanto desde la “A” hasta la “Z”
(mayúsculas) como de la “a” hasta la “z”.
Es conveniente asignar un identificador a las variables que exprese lo que va a contener, es decir si se
quiere almacenar por ejemplo, el nombre y apellidos de una persona, puede resultar incómodo
llamar a la variable “XJ43”, ya que no da ninguna pista de su contenido, pero si la identificamos como
“NombreCompleto”, nos dará más pistas sobre su contenido.
Muchos programadores también tienen la costumbre o manía, según se mire, de anteponer una letra
que indica el tipo de dato que va a contener la variable, por ejemplo una variable que va contener un
texto, por ejemplo una dirección, se puede denominar la variable “sDireccion”, la “s” indicaría string
o lo que es lo mismo cadena de texto.
Creando (“Declarando”) Variables
A la acción de crear una variable se le denomina “Declaración”, para declarar una variable en el
programa que se está escribiendo, se puede realizar de las siguientes formas:
1. Con la palabra reservada var que permite realizar una declaración de variable tanto global
como local. ¡Ya estamos con términos raros!, que no cunda el pánico, a continuación
explicaremos el concepto de ámbito global y ámbito local.
2. Otra forma de declarar una variable es asignarle directamente su valor, por ejemplo edad =
47, el problema de este tipo de declaración es que crea una variable global, que no puede ser
modificada en un ámbito local, por lo que esta forma de declaración se aconseja no utilizarla.
3. La tercera forma de declaración es con la palabra clave let, que permite declarar una variable
local, en lo que se denomina un bloque de ámbito.
1. // Declaración de variables Ejemplos
2.
3. var Edad = 47;
4.
5. Nombre = "Jose M. Castillo – redinfor.mipropia.com";
6.
7. let direccionWeb = "www.redinfor.mipropia.com";
Si una variable es declarada con “let” o “var”, y no se le asigna un valor inicial, la variable toma el
valor predefinido “undefined”.

JAVASCRIPT
11
Si se intenta acceder al contenido de una variable no declarada anteriormente se produce el error
“ReferenceError”, que indica que no existe referencia sobre la variable. El siguiente ejemplo muestra
el resultado de este error.
El término “undefined” se puede interpretar en si mismo, como un valor, y se puede utilizar para
realizar una acción dependiendo de que la variable tenga valor o sea indefinida, el siguiente ejemplo
muestra como se puede utilizar “undefined” para visualizar un mensaje u otro dependiendo del valor
de la variable. En este ejemplo, en vez de pulsar en la ventana “Borrador” de Firefox, el botón
“Mostrar”, se ha pulsado el botón “Ejecutar”, y como se puede observar los mensajes que se
visualizan se ven en la consola de desarrollador de Mozilla Firefox.
Si una variable no ha sido definido su valor, sabemos que contiene “undefined”, el valor undefined se
puede interpretar de diferentes formas dependiendo de cómo se utilice.
La variable que contenga “undefined” se puede comportar como un “false” (Falso), cuando se utiliza
en un contexto booleano (Verdadero o Falso), por ejemplo cuando se pregunta por algo que no ha
sido definido.

JAVASCRIPT
12
El valor undefined se convierte en un valor NaN (Not a Number – No es numérico), cuando se utiliza
la variable en un contexto en el que se utilice una expresión numérica.
Ámbito de las variables
“Ámbito”, es la palabra que tanto ha aparecido anteriormente.
Cuando se escribe un programa en JavaScript al igual que en muchos otros lenguajes, las ordenes
que se quieren ejecutar se suelen estructurar en bloques, a los cuales se les suele denominar
funciones, de esta forma el programador estructura el programa en módulos que puede reutilizar y
no tener que volver a escribir. Supongamos un programa en el cual se pide varias veces el código de
una cuenta bancaria, si se programase de forma secuencial, cada vez que se pide la cuenta se tendría
que comprobar el código de control y tendríamos que especificar las sentencias para realizar dicha
comprobación, si pidiéramos tres veces la cuenta bancaria tendríamos que volver a escribir el código
de comprobación tres veces, utilizando una función, solo sería necesario realizar una llamada a la
función cada vez que se quiera utilizar sin tener que volver a escribir todo el código de
comprobación.
El siguiente ejemplo muestra un programa que utiliza una función para realizar varias sumas y
devolver su resultado, de esta forma se puede comprobar visualmente como sería un programa
estructurado por módulos de función.
1. // Declaración de la funcion a utilizar para
2. // realizar las sumas que se soliciten.
3.
4. function Sumar(numeroA,numeroB) {
5. let Resultado = 0;
6. Resultado = numeroA+numeroB;
7. return Resultado;
8. }
9.
10. // Realizar las llamadas a la función
11. var X = 10;
12. var Y = 20;
13. var R = 0;
14.
15. R = Sumar(X,Y);
16. console.log("El resultado es : "+R);

JAVASCRIPT
13
17. X = 20;
18. Y = 30;
19. R = Sumar(X,Y);
20. console.log("El resultado es : "+R);
21.
22. // Gracias por visitar www.myelectronic.hostfree.pw, tu web de electrónica.
Bien, el ámbito no es más que el lugar donde se realiza en un programa la declaración de la variable,
y donde esa variable puede ser utilizada en el programa.
Cuando se realiza una declaración de una variable en el programa principal, es decir no está incluida
en ninguna de las funciones que puedan estar creadas en el programa. Se está indicando que la
variable creada es una variable global, porque podrá ser accedida por cualquier otro código dentro
del documento actual, resumiendo la variable se ha declarado a nivel global y todo el programa
puede acceder a ella.
Si la variable se declara dentro de una función, se denomina como una variable local, y solo se podrá
acceder o consultar la misma en el código que compone la función, no siendo accesible desde otra
función o programa general. Es decir, solo se puede utilizar dentro de la función donde se ha creado.
En JavaScript hasta la nueva versión ECMAScript 6, no existe el ámbito de sentencias de bloque, por
ejemplo, al declarar una variable dentro de una función, esta variable es una variable local respecto a
todo el programa, pero se puede considerar que es una variable global respecto a la función donde
está declarada ya que es accesible dentro de la función por todas las instrucciones que conforman la
función.
En la nueva versión de JavaScript, se puede utilizar ya el ámbito de sentencias de bloque, esto no
significa más que, algunas instrucciones pueden estar compuestas por varias líneas de código y otras
sentencias, normalmente estas sentencias irán agrupadas en bloque, el cual viene determinado por
los símbolos { }, si para declarar una variable se utiliza la instrucción let, y esta declaración se realiza
en el interior de un bloque, la variable se está definiendo con ámbito de sentencias de bloque, y
aunque el bloque de sentencias contenga otras instrucciones no podrán acceder a la nueva variable
definida.

JAVASCRIPT
14
El siguiente ejemplo expresa una sentencia condicional, en la que se ejecuta una serie de
instrucciones, observe la variable soylocalabloque, y donde está situada, de esta forma podrá
obtener una visión de cuál es su ámbito.
1. if(true) {
2. var soylocalafuncion = 10;
3. let soylocalabloque = 20;
4. }
5.
6. console.log(soylocalafuncion);
7. console.log(soylocalabloque);
8.
9. /*
10. Exception: ReferenceError: soylocalabloque is not defined
11. @Scratchpad/2:8:1
12. */
La siguiente imagen muestra el resultado del código anterior.

JAVASCRIPT
15
Este otro ejemplo muestra el mismo funcionamiento que el anterior, observe cuales son variables
locales y globales.
1. // Declaracion de variables del programa
2. var soyunavariableglobal = 10;
3. var soyotravariableglobal = 20;
4. var soyotravariableglobalmas = "Sumar";
5.
6. // Declaracion de funcion
7. function Operacion(soylocalamifuncionA, soylocalamifuncionB,soylocalamifuncionC) {
8. var soyunavariablelocalamifuncion = 0;
9. if(soylocalamifuncionC=="Sumar") {
10. var Resultado = soylocalamifuncionA+soylocalamifuncionB;
11. } else {
12. let soylocalabloque = 10;
13. console.log("Variable dentro del bloque = "+soylocalabloque);
14. }
15.
16. console.log(Resultado);
17. console.log(soylocalabloque);
18.
19. }
20.
21. // llamadas a la funcion
22. var ResultadoGlobal =
Operacion(soyunavariableglobal,soyotravariableglobal,soyotravariableglobalmas);
23. soyotravariableglobalmas = "Restar";
24. var ResultadoGlobalDos =
Operacion(soyunavariableglobal,soyotravariableglobal,soyotravariableglobalmas);
25.
26. // Resultado del programa
27. /*
28. Exception: ReferenceError: soylocalabloque is not defined
29. Operacion@Scratchpad/1:17:3
30. @Scratchpad/1:22:23
31. */
3.6. Constantes
A diferencia de las variables, se puede crear una constante, la definición viene a ser la misma que la
de una variable con la diferencia de que como su nombre indica, estas no cambian de valor son
constantes en su valor durante la ejecución del programa.
Una constante no puede cambiar de valor durante la ejecución del programa por asignación de un
valor a la misma, ni volver a declararse mientras se ejecuta el script.
Las reglas de ámbito para las constantes son las mismas que las de las variables let en un ámbito de
bloque. Si la palabra clave const es omitida, el identificador se asume que representa una variable.

JAVASCRIPT
16
No puedes declarar una constante con el mismo nombre que una función o una variable en el mismo
ámbito. Por ejemplo:
Las reglas para crear un nombre de constante son las mismas que para la definición de una variable.
Para definir una constante se ha de utilizar la palabra reservada const, el siguiente ejemplo muestra
el uso de una constante en un script.

JAVASCRIPT
17
4. PROGRAMACIÓN
En programación es muy frecuente que un determinado procedimiento de cálculo definido por un
grupo de sentencias tenga que repetirse varias veces, ya sea en un mismo programa o en otros
programas, lo cual implica que se tenga que escribir tantos grupos de aquellas sentencias como veces
aparezca dicho proceso.
La herramienta más potente con que se cuenta para facilitar, reducir y dividir el trabajo en
programación, es escribir aquellos grupos de sentencias una sola y única vez bajo la forma de una
FUNCION.
Una función es un conjunto de instrucciones que resuelven una parte del problema y que puede ser
utilizado (llamado) desde diferentes partes de un programa.
Consta de un nombre y parámetros. Con el nombre llamamos a la función, es decir, hacemos
referencia a la misma. Los parámetros son valores que se envían y son indispensables para la
resolución del mismo. La función realizará alguna operación con los parámetros que le enviamos.
function <nombre de función>(argumento1, argumento2, ..., argumento n)
{
<código de la función>
}
Ejemplo: Mostrar un mensaje que se repita 3 veces en la página con el siguiente texto:
'Cuidado'
'Ingrese su documento correctamente'
'Cuidado'
'Cuidado'
La solución sin emplear funciones es:
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Cuidado<br>");
document.write("Ingrese su documento correctamente<br>");
</script>
</body>
</html>

JAVASCRIPT
18
Empleando una función:
<html>
<head>
</head>
<body>
function mostrarMensaje()
{
}
mostrarMensaje();
mostrarMensaje();
mostrarMensaje();
</script>
</body>
</html>
4.1. Cómo incluir JavaScript en documentos XHTML
La integración de JavaScript y XHTML es muy flexible, ya que existen al menos tres formas para incluir
código JavaScript en las páginas web.
Para incluir JavaScript en el mismo documento XHTML el código JavaScript se encierra entre
etiquetas <script> y se incluye en cualquier parte del documento. Aunque es correcto incluir
cualquier bloque de código en cualquier zona de la página, se recomienda definir el código JavaScript
dentro de la cabecera del documento (dentro de la etiqueta <head>):
Ejemplo de código JavaScript en el propio documento:
<html>
<head>
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript"> alert("Un mensaje de prueba");
</script> </head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Para que la página XHTML resultante sea válida, es necesario añadir el atributo type a la etiqueta
<script>. Los valores que se incluyen en el atributo type están estandarizados y para el caso de
JavaScript, el valor correcto es text/javascript.
El principal inconveniente de Incluir JavaScript en el mismo documento XHTML
es que si se quiere hacer una modificación en el bloque de código, es necesario modificar todas las
páginas que incluyen ese mismo bloque de código JavaScript.

JAVASCRIPT
19
4.2. Definir JavaScript en un archivo externo
Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript que los
documentos XHTML enlazan mediante la etiqueta <script>. Se pueden crear todos los archivos
JavaScript que sean necesarios y cada documento XHTML puede enlazar tantos archivos JavaScript
como necesite. Ejemplo:
Ejemplo.html
<html>
<head><title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript" src="codigo.js"></script> </head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
codigo.js
alert (“Un mensaje de prueba”);
Además del atributo type, este método requiere definir el atributo src, que es el que indica la URL
correspondiente al archivo JavaScript que se quiere enlazar.
Cada etiqueta <script> solamente puede enlazar un único archivo, pero en una misma página se
pueden incluir tantas etiquetas <script> como sean necesarias.
Los archivos de tipo JavaScript son documentos normales de texto con la extensión *.js, que se
pueden crear con cualquier editor de texto.
La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica el código XHTML de
la página, que se puede reutilizar el mismo código JavaScript en todas las páginas del sitio web y que
cualquier modificación realizada en el archivo JavaScript se ve reflejada inmediatamente en todas las
páginas XHTML que lo enlazan.
Etiqueta noscript
Algunos navegadores no disponen de soporte completo de JavaScript, otros navegadores permiten
bloquearlo parcialmente e incluso algunos usuarios bloquean completamente el uso de JavaScript
porque creen que así navegan de forma más segura.
En estos casos, es habitual que si la página web requiere JavaScript para su correcto funcionamiento,
se incluya un mensaje de aviso al usuario indicándole que debería activar JavaScript para disfrutar
completamente de la página.

JAVASCRIPT
20
El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al usuario cuando su
navegador no puede ejecutar JavaScript. El siguiente código muestra un ejemplo del uso de la
etiqueta <noscript>:
<head> ... </head>
<body> <noscript> <p>Bienvenido a Mi Sitio</p> <p>La página que estás viendo requiere para su
funcionamiento el uso de JavaScript. Si lo has deshabilitado intencionadamente, por favor vuelve a
activarlo.</p> </noscript> </body>
4.3. Programación básica. Variables
Una variable es un elemento que se emplea para almacenar y hacer referencia a otro valor. Gracias a
las variables es posible crear "programas genéricos", es decir, programas que funcionan siempre
igual independientemente de los valores concretos utilizados.
numero_1 = 3
numero_2 = 1
resultado = numero_1 + numero_2
Los elementos numero_1 y numero_2 son variables que almacenan los valores que utiliza el
programa. El resultado se calcula siempre en función del valor almacenado por las variables, por lo
que este programa funciona correctamente para cualquier par de números indicado. Si se modifica el
valor de las variables numero_1 y numero_2, el programa sigue funcionando correctamente.
Las variables en JavaScript se crean mediante la palabra reservada var
var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2;
La palabra reservada var solamente se debe indicar al definir por primera vez la variable, lo que se
denomina declarar una variable. Cuando se utilizan las variables en el resto de instrucciones del
script, solamente es necesario indicar su nombre.
El nombre de una variable también se conoce como identificador y debe cumplir las siguientes
normas:
 Sólo puede estar formado por letras, números y los símbolos $ (dólar) y _ (guión bajo) y el
primer carácter no puede ser un número.

JAVASCRIPT
21
4.4. Tipos de variables
Aunque todas las variables de JavaScript se crean de la misma forma (mediante la palabra reservada
var), la forma en la que se les asigna un valor depende del tipo de valor que se quiere almacenar
(números, textos, etc.)
Numéricas
Se utilizan para almacenar valores numéricos enteros (llamados integer en inglés) o decimales
(llamados float en inglés). En este caso, el valor se asigna indicando directamente el número entero o
decimal. Los números decimales utilizan el carácter . (punto) en vez de , (coma) para separar la parte
entera y la parte decimal:
var iva = 16; // variable tipo entero
var total = 234.65; // variable tipo decimal
Cadenas de texto
Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para asignar el valor a la variable,
se encierra el valor entre comillas dobles o simples, para delimitar su comienzo y su final:
var mensaje = "Bienvenido a nuestro sitio web";
var nombreProducto = 'Producto ABC';
var letraSeleccionada = 'c';
Arrays
Un array es una colección de variables, que pueden ser todas del mismo tipo o cada una de un tipo
diferente. Su utilidad se comprende mejor con un ejemplo sencillo: si una aplicación necesita
manejar los días de la semana, se podrían crear siete variables de tipo texto:
var dia1 = "Lunes";
var dia2 = "Martes";
...
var dia7 = "Domingo";
Aunque el código anterior no es incorrecto, sí que es poco eficiente y complica en exceso la
programación. Si en vez de los días de la semana se tuviera que guardar el nombre de los meses del
año, el nombre de todos los países del mundo o las mediciones diarias de temperatura de los últimos
100 años, se tendrían que crear decenas o cientos de variables.
En este tipo de casos, se pueden agrupar todas las variables relacionadas en una colección de
variables o array. El ejemplo anterior se puede rehacer de la siguiente forma:
var dias = ["Lunes", "Martes", "Miércoles", "Jueves",
"Viernes", "Sábado", "Domingo"];

JAVASCRIPT
22
Ahora, una única variable llamada dias almacena todos los valores relacionados entre sí, en este caso
los días de la semana. Para definir un array, se utilizan los caracteres [ ] para delimitar su comienzo y
su final y se utiliza el carácter, (coma) para separar sus elementos:
Una vez definido un array, es muy sencillo acceder a cada uno de sus elementos. Cada elemento se
accede indicando su posición dentro del array. La única complicación, que es responsable de muchos
errores cuando se empieza a programar, es que las posiciones de los elementos empiezan a contarse
en el 0 y no en el 1.
Como se ha comentado, las posiciones se empiezan a contar en el 0, por lo que el primer elemento
ocupa la posición 0 y se accede a el mediante dias[0].
El valor dias[5] hace referencia al elemento que ocupa la sexta posición dentro del array dias. Como
las posiciones empiezan a contarse en 0, la posición 5 hace referencia al sexto elemento, en este
caso, el valor sábado.
4.5. Operadores
Los operadores permiten manipular el valor de las variables, realizar operaciones matemáticas con
sus valores y comparar diferentes variables. De esta forma, los operadores permiten a los programas
realizar cálculos complejos y tomar decisiones lógicas en función de comparaciones y otros tipos de
condiciones.
Asignación
El operador de asignación es el más utilizado y el más sencillo. Este operador se utiliza para guardar
un valor específico en una variable. El símbolo utilizado es = (no confundir con el operador == que se
verá más adelante):
var numero1 = 3;
Incremento y decremento
Estos dos operadores solamente son válidos para las variables numéricas y se utilizan para
incrementar o decrementar en una unidad el valor de una variable.
Ejemplos:
var numero = 5;
++numero;
alert(numero); // numero = 6
De forma equivalente, el operador decremento (indicado como un prefijo -- en el nombre de la
variable) se utiliza para decrementar el valor de la variable:
var numero = 5;
--numero;

JAVASCRIPT
23
Los operadores de incremento y decremento no solamente se pueden indicar como prefijo del
nombre de la variable, sino que también es posible utilizarlos como sufijo. En este caso, su
comportamiento es similar pero muy diferente. En el siguiente ejemplo:
var numero = 5;
numero++;
El resultado de ejecutar el script anterior es el mismo que cuando se utiliza el operador ++numero,
por lo que puede parecer que es equivalente indicar el operador ++ delante o detrás del identificador
de la variable.
Sin embargo, el siguiente ejemplo muestra sus diferencias:
var numero1 = 5;
var numero2 = 2;
numero3 = numero1++ + numero2;
// numero3 = 7, numero1 = 6
var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
// numero3 = 8, numero1 = 6
Si el operador ++ se indica como prefijo del identificador de la variable, su valor se incrementa antes
de realizar cualquier otra operación. Si el operador ++ se indica como sufijo del identificador de la
variable, su valor se incrementa después de ejecutar la sentencia en la que aparece.
Operadores Lógicos
Los operadores lógicos son imprescindibles para realizar aplicaciones complejas, ya que se utilizan
para tomar decisiones sobre las instrucciones que debería ejecutar el programa en función de ciertas
condiciones.
El resultado de cualquier operación que utilice operadores lógicos siempre es un valor lógico o
booleano.
Negación
Uno de los operadores lógicos más utilizados es el de la negación. Se utiliza para obtener el valor
contrario al valor de la variable:
var visible = true;
alert(!visible);
// Muestra "false" y no "true“
La negación lógica se obtiene prefijando el símbolo ! al identificador de la variable.
Si la variable original es de tipo booleano, es muy sencillo obtener su negación. Sin embargo, ¿qué
sucede cuando la variable es un número o una cadena de texto? Para obtener la negación en este
tipo de variables, se realiza en primer lugar su conversión a un valor booleano:
Si la variable contiene un número, se transforma en false si vale 0 y en true para cualquier otro
número (positivo o negativo, decimal o entero).

JAVASCRIPT
24
Si la variable contiene una cadena de texto, se transforma en false si la cadena es vacía ("") y en true
en cualquier otro caso.
var cantidad = 0;
vacio = !cantidad;
// vacio = true
cantidad = 2;
vacio = !cantidad;
// vacio = false
var mensaje = "";
mensajeVacio = !mensaje;
// mensajeVacio = true
mensaje = "Bienvenido";
mensajeVacio = !mensaje;
// mensajeVacio = false
Operación lógica AND
La operación lógica AND obtiene su resultado combinando dos valores booleanos. El operador se
indica mediante el símbolo && y su resultado solamente es true si los dos operandos son true:
var valor1 = true;
var valor2 = false;
resultado = valor1 && valor2;
// resultado = false
valor1 = true;
valor2 = true;
resultado = valor1 && valor2;
// resultado = true

JAVASCRIPT
25
Operación lógica OR
La operación lógica OR también combina dos valores booleanos. El operador se indica mediante el
símbolo || y su resultado es true si alguno de los dos operandos es true:
var valor1 = true;
var valor2 = false;
resultado = valor1 || valor2;
// resultado = true
valor1 = false;
valor2 = false;
resultado = valor1 || valor2;
// resultado = false
Operadores Matemáticos
JavaScript permite realizar manipulaciones matemáticas sobre el valor de las variables numéricas.
Los operadores definidos son: suma (+), resta (-), multiplicación (*) y división (/). Ejemplo:
var numero1 = 10;
var numero2 = 5;
resultado = numero1 / numero2; // resultado = 2
resultado = 3 + numero1; // resultado = 13
resultado = numero2 – 4; // resultado = 1
resultado = numero1 * numero 2; // resultado = 50
Los operadores matemáticos también se pueden combinar con el operador de asignación para
abreviar su notación:
var numero1 = 5;
numero1 += 3; // numero1 = numero1 + 3 = 8
numero1 -= 1; // numero1 = numero1 - 1 = 4
numero1 *= 2; // numero1 = numero1 * 2 = 10
numero1 /= 5; // numero1 = numero1 / 5 = 1

JAVASCRIPT
26
Relacionales
Los operadores relacionales definidos por JavaScript son idénticos a los que definen las matemáticas:
mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=), igual que (==) y distinto de (!=).
Los operadores que relacionan variables son imprescindibles para realizar cualquier aplicación
compleja. El resultado de todos estos operadores siempre es un valor booleano:
var numero1 = 3;
var numero2 = 5;
resultado = numero1 > numero2; // resultado = false
resultado = numero1 < numero2; // resultado = true
numero1 = 5;
numero2 = 5;
resultado = numero1 >= numero2; // resultado = true
resultado = numero1 <= numero2; // resultado = true
resultado = numero1 == numero2; // resultado = true
resultado = numero1 != numero2; // resultado = false
Se debe tener especial cuidado con el operador de igualdad (==), ya que es el origen de la mayoría de
errores de programación.
El operador == se utiliza para comparar el valor de dos variables, por lo que es muy diferente del
operador =, que se utiliza para asignar un valor a una variable:
// El operador "=" asigna valores
var numero1 = 5;
resultado = numero1 = 3; // numero1 = 3 y resultado = 3
// El operador "==" compara variables
var numero1 = 5;
resultado = numero1 == 3; // numero1 = 5 y resultado = false
4.6. Funciones y propiedades básicas de JavaScript
JavaScript incorpora una serie de herramientas y utilidades (llamadas funciones y propiedades) para
el manejo de las variables. De esta forma, muchas de las operaciones básicas con las variables, se
pueden realizar directamente con las utilidades que ofrece JavaScript.
Funciones útiles para cadenas de texto
 length, calcula la longitud de una cadena de texto (el número de caracteres que la forman).
 toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes
caracteres en mayúsculas:
var mensaje1 = "Hola";
var mensaje2 = mensaje1.toUpperCase();
// mensaje2 = "HOLA"
 toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientes
caracteres en minúsculas.

JAVASCRIPT
27
4.7. Programación avanzada. Funciones
Cuando se desarrolla una aplicación compleja, es muy habitual utilizar una y otra vez las mismas
instrucciones.
Cuando una serie de instrucciones se repiten una y otra vez, se complica demasiado el código fuente
de la aplicación.
Las funciones son la solución a todos estos problemas, tanto en JavaScript como en el resto de
lenguajes de programación.
Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta y que
se pueden reutilizar fácilmente.
Las funciones en JavaScript se definen mediante la palabra reservada function, seguida del nombre
de la función. Su definición formal es la siguiente:
function nombre_funcion() {
...
}
Argumentos y valores de retorno
Las funciones más sencillas no necesitan ninguna información para producir sus resultados. Sin
embargo, la mayoría de funciones de las aplicaciones reales deben acceder al valor de algunas
variables para producir sus resultados.
Las variables que necesitan las funciones se llaman argumentos. Antes de que pueda utilizarlos, la
función debe indicar cuántos argumentos necesita y cuál es el nombre de cada argumento. Además,
al invocar la función, se deben incluir los valores que se le van a pasar a la función. Los argumentos se
indican dentro de los paréntesis que van detrás del nombre de la función y se separan con una coma
(,).
Las funciones no solamente pueden recibir variables y datos, sino que también pueden devolver los
valores que han calculado. Para devolver valores dentro de una función, se utiliza la palabra
reservada return.
Ámbito de las variables
function creaMensaje() {
var mensaje = “Mensaje de prueba”;
}
creaMensaje();
alert(mensaje);
El ejemplo anterior define en primer lugar una función llamada creaMensaje que crea una variable
llamada mensaje. A continuación, se ejecuta la función mediante la llamada creaMensaje(); y
seguidamente, se muestra mediante la función alert() el valor de una variable llamada mensaje.

JAVASCRIPT
28
Sin embargo, al ejecutar el código anterior no se muestra ningún mensaje por pantalla. La razón es
que la variable mensaje se ha definido dentro de la función creaMensaje() y por tanto, es una
variable local que solamente está definida dentro de la función.
var mensaje = “Mensaje de prueba”;
}
creaMensaje();
alert(mensaje);
Para mostrar el mensaje en el código anterior, la función alert() debe llamarse desde dentro de la
función creaMensaje():
var mensaje = “Mensaje de prueba”; alert(mensaje);
}
creaMensaje();
function suma_y_muestra() {
resultado = numero1 + numero2;
alert("El resultado es " + resultado);
}
var resultado;
var numero1 = 3;
var numero2 = 5;
suma_y_muestra();
numero1 = 10;
numero2 = 7;
suma_y_muestra();
numero1 = 5;
numero2 = 8;
suma_y_muestra(); ...
Lo único que le falta al ejemplo anterior para funcionar correctamente es poder indicar a la función
los números que debe sumar. Cuando se necesitan pasar datos a una función, se utilizan los
"argumentos“.
Argumentos y valores de retorno
Las variables que necesitan las funciones se llaman argumentos. Antes de que pueda utilizarlos, la
función debe indicar cuántos argumentos necesita y cuál es el nombre de cada argumento. Además,
al invocar la función, se deben incluir los valores que se le van a pasar a la función.
Los argumentos se indican dentro de los paréntesis que van detrás del nombre de la función y se
separan con una coma (,).
// Definición de la función
function calculaPrecioTotal(precio) {
var impuestos = 1.16;
var gastosEnvio = 10;
var precioTotal = ( precio * impuestos ) + gastosEnvio;
}

JAVASCRIPT
29
// Llamada a la función
calculaPrecioTotal(23.34);
// El valor devuelto por la función, se guarda en una variable
var precioTotal = calculaPrecioTotal(23.34);
La función anterior toma como argumento una variable llamada precio y le suma los impuestos y los
gastos de envío para obtener el precio total. Al llamar a la función, se pasa directamente el valor del
precio básico mediante el número 23.34.
<html>
<head>
<title>Titulo de la página</title>
<script language="JavaScript">

</script>
</head>
<body>
Bienvenido a mi sitio Web. Son las
<script>
tiempo ()
</script>
horas
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejercicio 8 - Funciones básicas</title>
var numero = prompt("Introduce un número entero");
var resultado = parImpar(numero);
alert("El número "+numero+" es "+resultado);
function parImpar(numero) {
if(numero % 2 == 0) {
return "par";
}
else {
return "impar";
}
} </script>
</head> <body> </body> </html>

JAVASCRIPT
30
5. TIPOS DE DATOS
La última versión de JavaScript que se utiliza a fecha de hoy, tiene definidos siete tipos de datos.
¡Que son los tipos de datos!, básicamente los tipos de datos de un lenguaje, son los diferentes
formatos numéricos, alfanuméricos, booleanos, cadenas de texto, etc. Que puede manejar el
lenguaje, para ello define una serie de palabras clave que sirven para identificar el tipo de dato y
especificar de esta forma cuando se almacene el tipo de dato, en que sitio y de qué forma se realiza
dicho proceso.
Existen seis tipos de datos denominados primitivos, los tipos de datos primitivos son aquellos que el
lenguaje gestiona directamente, mientras que existe un tipo de dato más denominado objeto, los
cuales son construidos por el usuario, utilizando los datos primitivos y formando un nuevo tipo
compuesto, el cual el lenguaje no gestiona directamente, sino que lo hace el programador.
Los seis tipos de datos primitivos son:
1. Boolean: Un tipo de dato booleano es un dato lógico el cual solo puede contener los valores
true (verdadero) o false (falso).
2. null: Un valor null representa una referencia que apunta casi siempre de forma intencionada,
a un objeto inválido o a una dirección de referencia inexistente.
3. undefined: Un valor primitivo, asignado automáticamente a las variables definidas, pero no
inicializadas.
4. Number: En JavaScript Number, es un tipo de dato numérico, el cual se corresponde con un
valor de doble precisión de 64 bits. En otros lenguajes existen tipos diferenciados como
enteros, flotantes, dobles, etc. En javascript solo se especifica este tipo y dependiendo del
valor el lenguaje lo trata automáticamente.
5. String: En cualquier lenguaje de programación el tipo string, se denomina cadena de texto y
su valor es una secuencia de caracteres usados para representar un texto.
6. Symbol: Es un tipo de datos cuyos valores son únicos e inmutables. Dichos valores pueden
ser utilizados como identificadores (claves) de las propiedades de los objetos.
El otro tipo de dato es el tipo Object, el tipo object se refiere a una estructura de datos que contiene
datos e instrucciones para trabajar con los datos.
5.1. Conversión de tipos
El lenguaje JavaScript es un lenguaje de tipo dinámico, es decir no hace falta indicar el tipo de dato
de una variable cuando se crea su declaración, y los datos se convierten automáticamente de un tipo
a otro dependiendo de las necesidades del código que se está ejecutando.
El siguiente ejemplo muestra como el lenguaje realiza automáticamente la conversión de tipos entre
número y cadena de texto, al utilizar los datos en una instrucción, independientemente de haber
declarado inicialmente las variables según un tipo.
1. // Declaración de variable
2. var antiguedadWeb = 12;
3. // conversión automática
4. antiguedadWeb = "es bastante joven";

JAVASCRIPT
31
En conversiones en las cuales intervenga cadenas de texto con valores numéricos y el operador de
suma +, javascript realiza la conversión de los tipos numéricos a cadenas de texto. En conversiones
en las cuales intervengan otros operadores que no sea la suma, javascript no realiza la conversión a
cadena de texto y mantiene el valor numérico.
1. // Declaración de variables
2.
3. var numeroA = 100;
4. var numeroB = 120;
5. var mensaje1 = "Hola Mundo Soy ";
6. var mensaje2 = " Adios Mundo Soy ";
7.
8. var resultadoA = mensaje1 + numeroA;
9. var resultadoB = mensaje1 + numeroB + mensaje2;
10.
11. console.log(resultadoA);
12. console.log(resultadoB);
5.2. Conversión de string (cadena de texto) a números
Función parseInt()
La función parseInt(), permite realizar la conversión de un string a número, con esta función se
realiza la conversión a un tipo de dato entero. La sintaxis de la función es la siguiente.
parseInt( string , base )
Los parámetros especificados son los siguientes:
string : El valor a convertir, que ha de ser una cadena de texto (string).
base (radix) : También se denomina radix, es la base matemática de conversión que se quiere aplicar.
Normalmente para especificar la base de numeración decimal, se ha de especificar el valor 10.

JAVASCRIPT
32
La función devuelve como resultado un valor numérico de tipo entero, si no se puede realizar la
conversión de la cadena de texto a número se devuelve como resultado NaN.
El siguiente ejemplo muestra el uso de la función:
2. var A = "100";
3. var B = "Hola";
4. var C = "200 Unidades";
5.
6. var D = 0;
7. var E = 0;
8. var F = 0;
9.
10. D = parseInt(A,10);
11. E = parseInt(B,10);
12. F = parseInt(C,10);
13.
14. console.log("D Contiene : " + D );
15. console.log("E Contiene : " + E );
16. console.log("F Contiene : " + F );
Función parseFloat()
La función parseFloat(), permite realizar la conversión de un string a número con decimales, con esta
función se realiza la conversión a un tipo de dato flotante o decimal. La sintaxis de la función es la
siguiente.
parseFloat( string )
Los parámetros especificados son los siguientes:
string: El valor a convertir, que ha de ser una cadena de texto (string).

JAVASCRIPT
33
La función devuelve como resultado un valor numérico de tipo flotante, si no se puede realizar la
conversión de la cadena de texto a número se devuelve como resultado NaN.
El siguiente ejemplo muestra el uso de la función:
2. var A = "100.342";
3. var B = "FF2";
4. var C = "3.14";
5.
6. var D = 0;
7. var E = 0;
8. var F = 0;
9.
10. D = parseFloat(A);
11. E = parseFloat(B);
12. F = parseFloat(C);
13.
14. console.log("D Contiene : " + D );
15. console.log("E Contiene : " + E );
16. console.log("F Contiene : " + F );

JAVASCRIPT
34
6. LITERALES
Los “literales” se utilizan para representar valores en JavaScript. Son valores fijos, no variables, que
como su nombre indica son literalmente proporcionados por el programador en el código. El término
“literal” uno de sus significados es “Que reproduce exactamente lo que se ha dicho o se ha escrito “,
en el código se utiliza para expresar los valores que se desea que tengan las variables, objetos, etc.
Supongamos el siguiente ejemplo de código en el cual se realiza la definición de variables
inicializando las mismas con un valor.
1. var saludo = “Hola Mundo”;
2.
3. var edad = 47;
Pues los dos valores expresados “Hola Mundo” y 47, es lo que denominamos literales.
Los diferentes tipos de literales que se pueden encontrar son:
6.1. Literales Array
Un literal de tipo array es una lista entre corchetes “* +” de cero o más expresiones, las cuales cada
una de ellas representan un valor del array (la traducción de array, puede ser tabla, conjunto,
formación, tabla, matriz, vector, etc.).
Cuando se crea un array utilizando un literal de tipo array, el array se inicializa con los valores
especificados en la lista y la longitud del array viene determinada por el número de elementos de la
lista.
El siguiente ejemplo muestra la creación de un array denominado personas el cual se inicializa a
cuatro valores con un literal de tipo array.
1. var nombresPersonas = ["Mar","José","Lucía"];
No se tienen porque especificar todos los valores del array, para realizar esta acción se ponen las
comas que delimitan el elemento, pero no el valor del mismo, esa posición del array será inicializada
con un valor undefined.
1. // Ejemplo de inicialización de array con literales
2.
3. var animales = ["Perro", ,"Gato"];
Se ha de tener en cuenta que los índices que se utilizan para acceder a los elementos de un array,
comienzan en el valor 0. Supongamos el siguiente ejemplo.
1. // Creación de array con elementos separados con comas adicionales.
2.
3. var nombresPersonas = [ , "Mar" , , "Lucía" ];
El ejemplo anterior crea un array de cuatro elementos 0, 1, 2 y 3, los elementos 0 y 2 tendrán un
valor “undefined”.

JAVASCRIPT
35
6.2. Literales Booleanos
Los literales booleanos tienen dos valores posibles true y false, no se han de confundir con los valores
true y false del objeto Booleano.
6.3. Literales Enteros
Los enteros se pueden expresar en binario (“en base 2”), en octal (“en base 8”), en decimal (“en base
10”), y en hexadecimal (“en base 16”).
 Los literales enteros en decimal son una secuencia de dígitos del 0 al 9, que no han de
comenzar por el digito 0, ya que expresaría un cambio de base.
 El literal 0 al principio del literal indica que el literal está en base octal y solo se pueden
utilizar los dígitos del 0 al 7.
 Si el literal se inicia con 0x, se está indicando que el literal está en base hexadecimal y puede
incluir los dígitos del 0 al 9 y los caracteres de la “a” a la “f”, o de la “A” a la “F”.
Los siguientes ejemplos muestra el uso de literales enteros en distintas bases.
1. // Ejemplos de literales enteros en distintas bases
2.
3. var edad_Persona1 = 30:
4. var edad_Persona2 = 036;
5. var edad_Persona3 = 0x1E;
6.4. Literales de punto flotante
Los literales de punto flotante expresan valores numéricos que contienen decimales. y puede estar
compuesto por las siguientes partes:
 Un entero en decimal que puede estar precedido por el símbolo “+” o “-“.
 Un símbolo “.” Que expresa el valor decimal y se utiliza el punto decimal.
 Puede estar compuesto por una fracción
 Puede tener un exponente. En caso de especificarse se ha de anteponer el carácter “e” o “E”
al número entero que representa el exponente.
Algunos ejemplos de literales en punto flotante pueden ser los siguientes:
1. // Ejemplos de literales en punto flotante
2.
3. var dato_1 = 3.1415;
4. var dato_2 = -3.1E12;
5. var dato_3 = .1e12;
6.5. Literales de tipo Objeto
Un literal de tipo objeto es una lista compuesta de 0 o más parejas de valores. Cada elemento de la
lista este compuesto por una propiedad y un valor. Los elementos de la lista se han de encerrar entre
llaves “, -”.
Los valores constan de una “propiedad” y un valor para dicha propiedad. La propiedad se expresa
como un literal de tipo texto, y han de cumplir con los nombres validos que se pueden utilizar en
JavaScript. El valor para la propiedad puede ser de cualquier tipo, incluso puede ser otro literal de
tipo objeto.

JAVASCRIPT
36
Si el nombre de la propiedad no cumple con los nombres válidos, la propiedad no podrá ser accedida
utilizando la notación “.” Para acceder a las propiedades de objeto, pero si se puede acceder a la
misma utilizando la notación de índices para arrays.
El siguiente ejemplo muestra el uso de literales de tipo objeto en JavaScript.
1. // Definición del objeto en javascript
2.
3. var Coche = {
4. ruedas : 4,
5. color: "rojo",
6. "max velocidad" : 120,
7. combustible : "Diesel"
8. }
9.
10. console.log( Coche.ruedas );
11. console.log( Coche.color );
12. console.log( Coche[2] );
13. console.log( Coche.combustible );
6.6. Literales String
Un literal de tipo string se corresponde con cero o más caracteres encerrados dentro de unas
comillas dobles “” o comillas simples ‘’. En caso de realizar la delimitación de los caracteres con un
tipo concreto de comillas, no se pueden mezclar las comillas simples y dobles.
JavaScript permite utilizar cualquiera de las funciones del objeto String, aplicándolas sobre un literal,
ya que JavaScript crea temporalmente con el literal un objeto de tipo cadena. Se recomienda utilizar
literales string en vez de objetos string, a no ser que sea necesario crear un objeto.
Dentro de los literales string se pueden especificar un conjunto de caracteres especiales,
normalmente denominados caracteres de escape, siendo estos los siguientes.
 b (Retroceso)
 f (Avance de página)
 n (Nueva línea)
 r (Retorno de línea)
 t (Tabulador)
 v (Tabulador Vertical)
 ’ (Apóstrofe o comillas sencillas)
 ” (Comillas Dobles)
 (Carácter BackSlash)
 XXX (Caracteres con codificación latin-1, siendo XXX el código en octal del carácter, entre 0 y
377)
 xXX (Caracteres con codificación latin-1, siendo XX dos dígitos hexadecimales entre 00 y FF)
 uXXXX (Caracteres Unicode, siendo XXXX cuatro dígitos hexadecimales)
Los siguientes datos son ejemplos de literales de string.
1. // Ejemplos de literales string
2. var nombrePersona = "José M. Castillo";
3. var direccionWeb = 'http://www.redinfor.mipropia.com';
4. var mensaje = "Hola "Mundo", Que tal!";

JAVASCRIPT
37
7. ESTRUCTURAS DE CONTROL DE FLUJO
Las estructuras de control de flujo, son instrucciones del tipo "si se cumple esta condición, hazlo; si
no se cumple, haz esto otro". También existen instrucciones del tipo "repite esto mientras se cumpla
esta condición".
Si se utilizan estructuras de control de flujo, los programas dejan de ser una sucesión lineal de
instrucciones para convertirse en programas inteligentes que pueden tomar decisiones en función
del valor de las variables
7.1. Control de Flujo - If (si condicional)
El lenguaje JavaScript al igual que muchos otros lenguajes, soporta la utilización de sentencias u
órdenes para el control de flujo del programa, el control de flujo permite realizar la estructura del
programa y dar orden a las acciones a realizar, así como también la toma de decisiones.
En JavaScript cualquier expresión también se puede considerar una sentencia.
Sentencia de bloque “{ }”
La sentencia de bloque es el tipo de sentencia más básico y se utiliza para realizar agrupaciones de
sentencias, es decir nos permite delimitar un conjunto de acciones englobando las mismas dentro de
un bloque compacto. Para delimitar el bloque de sentencias se han de utilizar las llaves “, -”, al
principio y al final de bloque.
El siguiente ejemplo muestra el agrupamiento de varias sentencias en un bloque.
1. // Ejemplo de sentencia de bloque.
2.
3. {
4.
5. var paginaWeb = "www.redinfor.mipropia.com";
6. var descripcion = "ejercicios y practicas de programacion";
7. var edad = 8;
8.
9. }
10.
11. // Ejemplo de sentencia de bloque utilizando orden de control de flujo
12.
13. var precio = 0;
14. if ( precio == 0 ) {
15. console.log("ejercicios y practicas gratis");
16. console.log("en tu sitio web www.redinfor.mipropia.com");
17. }
Se ha de tener en cuenta que en versiones anteriores a ECMAScript 6, las variables que se hayan
definido dentro de un bloque de sentencia, pertenecen a la función donde esté definido el bloque de
sentencia, mientras que a partir de la versión de JavaScript especificada, las variables definidas
dentro de un bloque de sentencia, pertenecen a dicho bloque y no a la función completa. Siempre y
cuando no se definan de otra forma las variables creadas serán de ámbito de bloque.

JAVASCRIPT
38
Observe el siguiente ejemplo.
1. // Ejercicios y Prácticas de Programación JavaScript
2. // Ejemplo de ámbito de bloque
3.
4. // Declaración de variable
5.
6. var numero = 10;
7. var numerodos = 20;
8. {
9. var numero = 20;
10. let numerodos = 40;
11. }
12.
13. console.log(numero);
14. console.log(numerodos);
El resultado del ejemplo anterior, muestra un valor 20 para número y un valor 20 para númerodos,
como se puede apreciar la variable “númerodos”, no cambia su valor a 40, ya que está definida
dentro de una sentencia de bloque y por tanto el ámbito de la misma es solo el bloque en el cual está
definida. Mientras que la variable número, aunque se ha vuelto a definir dentro del bloque, al utilizar
“var” en lugar de “let”, pertenece a la función completa y por tanto cambia su valor.
Sentencias condicionales
Una sentencia condicional es un conjunto de sentencias que se ejecutan en base a que una condición
se cumpla o sea verdadera.
Una de las sentencias condicionales de control de flujo, es la sentencia “if”, a la cual también se le
puede denominar “Si Condicional” en castellano. La otra sentencia condicional que utiliza JavaScript
es “switch”.
Estructura If – Si Condicional
La estructura más utilizada en JavaScript y en la mayoría de lenguajes de programación es la
estructura if. Se emplea para tomar decisiones en función de una condición. Su definición formal es:
if(condicion) { ...
}
Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones que se
encuentran dentro de {...}. Si la condición no se cumple (es decir, si su valor es false) no se ejecuta
ninguna instrucción contenida en {...} y el programa continúa ejecutando el resto de instrucciones del
script.
Ejemplo:
var mostrarMensaje = true;
if(mostrarMensaje) {
alert("Hola Mundo");
}

JAVASCRIPT
39
En el ejemplo anterior, el mensaje sí que se muestra al usuario ya que la variable mostrarMensaje
tiene un valor de true y por tanto, el programa entra dentro del bloque de instrucciones del if.
Estructura if...else
En ocasiones, las decisiones que se deben realizar no son del tipo "si se cumple la condición, hazlo; si
no se cumple, no hagas nada". Normalmente las condiciones suelen ser del tipo "si se cumple esta
condición, hazlo; si no se cumple, haz esto otro".
Para este segundo tipo de decisiones, existe una variante de la estructura if llamada if...else. Su
definición formal es la siguiente:
if(condicion) {
... }
else { ...
}
Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones que se
encuentran dentro del if(). Si la condición no se cumple (es decir, si su valor es false) se ejecutan
todas las instrucciones contenidas en else { }.
Ejemplo:
var edad = 18;
if(edad >= 18) {
alert("Eres mayor de edad");
}
else {
alert("Todavía eres menor de edad");
}
El siguiente ejemplo compara variables de tipo cadena de texto:
var nombre = "";
if(nombre == "") {
alert("Aún no nos has dicho tu nombre");
}
else {
alert("Hemos guardado tu nombre");
}

JAVASCRIPT
40
La estructura if...else se puede encadenar para realizar varias comprobaciones seguidas:
if(edad < 12) {
alert("Todavía eres muy pequeño");
}
else if(edad < 19) {
alert("Eres un adolescente");
} else if(edad < 35) {
alert("Aun sigues siendo joven");
}
else {
alert("Piensa en cuidarte un poco más");
}
Ejercicio
El cálculo de la letra del Documento Nacional de Identidad (DNI) es un proceso matemático sencillo
que se basa en obtener el resto de la división entera del número de DNI y el número 23. A partir del
resto de la división, se obtiene la letra seleccionándola dentro de un array de letras.
El array de letras es:
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'];
Por tanto si el resto de la división es 0, la letra del DNI es la T y si el resto es 3 la letra es la A. Con
estos datos, elaborar un pequeño script que:
Almacene en una variable el número de DNI indicado por el usuario y en otra variable la letra del DNI
que se ha indicado. (Pista: si se quiere pedir directamente al usuario que indique su número y su
letra, se puede utilizar la función prompt())
En primer lugar (y en una sola instrucción) se debe comprobar si el número es menor que 0 o mayor
que 99999999. Si ese es el caso, se muestra un mensaje al usuario indicando que el número
proporcionado no es válido y el programa no muestra más mensajes.
Si el número es válido, se calcula la letra que le corresponde según el método explicado
anteriormente.
Una vez calculada la letra, se debe comparar con la letra indicada por el usuario. Si no coinciden, se
muestra un mensaje al usuario diciéndole que la letra que ha indicado no es correcta. En otro caso,
se muestra un mensaje indicando que el número y la letra de DNI son correctos.
Convierte en mayúscula
letra = letra.toUpperCase();
Convierte valor entero
var letraCalculada =
letras[numero % 23];

JAVASCRIPT
41
Solución ejercicio:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio - Calculo de la letra del DNI</title>
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'];
var numero = prompt("Introduce tu número de DNI (sin la letra)");
var letra = prompt("Introduce la letra de tu DNI (en mayúsculas)");
letra = letra.toUpperCase();
if(numero < 0 || numero > 99999999) {
alert("El número proporcionado no es válido");
}
else {
var letraCalculada = letras[numero % 23];
if(letraCalculada != letra) {
alert("La letra o el número proporcionados no son correctos");
}
else {
alert("El número de DNI y su letra son correctos");
}
}
</script> </head> <body>
<p>Esta página calcula la letra del DNI</p> </body> </html>
La sentencia if se utiliza para comprobar si la evaluación de una condición es verdadera o falsa y en
base a dicha evaluación se ejecutan una serie de sentencias.
Esta sentencia tiene diferentes variantes en su sintaxis. Siendo las siguientes:
1. // acción simple cuando se cumple la condición
2. if ( condición ) acción;
3.
4. // acción simple cuando se cumple la condición y acción simple
5. // cuando la condición no se cumple
6. if ( condición ) acción; else acción;
7.
8. // varias acciones cuando se cumple la condición
9. if ( condición ) {
10. acción;
11. acción;
12. ...
13. }
14.
15. // varias acciones cuando se cumple la condición y varias
16. // acciones cuando no se cumple la condición
18. acción;
19. acción;
20. ...
21. } else {

JAVASCRIPT
42
22. acción;
23. acción;
24. ...
25. }
26.
27. // acción simple cuando se cumple la condición y varias
28. // acciones cuando no se cumple la condición
29. if ( condición ) acción;
30. else {
31. acción;
32. acción;
33. ...
34. }
35.
36. // varias acciones cuando se cumple la condición y
37. // acción simple cuando no se cumple la condición
39. acción;
40. acción;
41. ...
42. } else acción;
El funcionamiento de la sentencia es el mismo para todas las variantes de sintaxis, en resumen, se
realiza la evaluación de la condición, la expresión de condición se evalúa con un resultado “true” o
“false”, verdadero o falso, si el resultado es verdadero se ejecutan las sentencias del bloque
pertenecientes al “if”, si el resultado es falso se ejecutan las sentencias pertenecientes al bloque
“else”, que se puede traducir por sino o en caso contrario.
La condición que se especifica puede ser simple o compuesta y los operadores de comparación que
se pueden utilizar son los siguientes.
Operador Significado
> Mayor que
< Menor que
>= Mayor o igual que
<= Menor o igual que
== Igualdad
!= Desigualdad
=== Estrictamente Igual
!== Estrictamente Desigual

JAVASCRIPT
43
Para especificar condiciones compuestas se pueden utilizar los operadores lógicos siguientes:
Operador Uso Significado
&& Condición && condición
Operador lógico Y, devuelve “true” si ambas
expresiones son verdaderas, “false” en
cualquier otro caso.
|| Condición || Condición
Operador lógico O, devuelve “true” si
cualquier expresión es verdadero, “false” si
todas las expresiones son falsas.
! !expresión
Operador No, devuelve “false” si el operando
no puede ser convertido a “true”, en caso
contrario devuelve “false”
Utilizando los operadores anteriores se pueden realizar condiciones compuestas de tipo Y o de tipo
O, e incluso mezclar ambos operadores en la misma condición. Observe el siguiente ejemplo:
1. // Ejemplos de Si Condicional con condiciones compuestas y simples
2.
3. // Definición de variables
4. var vehiculo = "Coche";
5. var edad = 47;
6. var web = "www.redinfor.mipropia.com";
7.
8. // Evaluación de condiciones
9. if ( vehiculo=="Coche" || vehiculo =="Moto" ) {
10. console.log("El vehiculo elegido utiliza energia no renovable.");
11. }
12.
13. if ( edad>=18 && edad<=50 ) {
14. console.log("Todavia no tiene que renovar su permiso.")
15. }
16.
17. if ( web == "www.redinfor.mipropia.com" ) {
18. console.log("Gracias por su visita, espero que vuelva.");
19. }
El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación.

JAVASCRIPT
44
7.2. Ejercicios para realizar prácticas de programación con JavaScript.
Ejercicio 1 - Si Condicional
Realizar un ejercicio en el cual se definan las variables necesarias para solicitar una “edad”, un
“nombre” y “país”.
Una vez definidas las variables se ha de visualizar un mensaje en la consola que diga “Mayor de
Edad” o “Menor de Edad”, dependiendo de que la edad introducida sea mayor o menor de
18 años.
Visualizar un mensaje que diga “Hola” y visualice también el nombre introducido en la variable,
siempre y cuando la variable sea distinta de nada.
Realizar un ejercicio en el cual se definan las siguientes variables “precio_kilometro”, “vehiculo”,
“kms_recorridos”, “litros_consumidos”.
A continuación, defina y realice los cálculos para obtener el total a pagar, teniendo en cuenta las
siguientes consideraciones.
Si el vehículo es “coche”, el precio kilometro ha de ser 0.10, si es “moto” ha de ser 0.20 y si es
“autobús” 0.5. si los litros consumidos están entre 0 y 100 se ha de añadir 1 al total, si es mayor la
cantidad de litros consumidos se ha de añadir 2 al total.
Intenta realizar un ejercicio en el cual se definan las variables que consideres necesarias y utilizar el sí
condicional para obtener un resultado. Este ejercicio es de libre elección.

JAVASCRIPT
45
7.3. Control de flujo – switch
La sentencia switch al igual que la anterior sentencia “si condicional” permite realizar ciertas
acciones dependiendo del valor y evaluación de una variable. Es decir, realiza la comprobación del
valor de una variable y según su valor ejecuta unas órdenes u otras.
La sintaxis que se ha de utilizar para la sentencia switch, es la siguiente:
1. switch ( variable_a_evaluar ) {
2. case Valor :
3. acción/es a realizar …;
4. break;
5. case Valor :
6. acción/es a realizar …;
7. break;
8. default:
9. acción/es a realizar;
10. break;
11. }
Para comprender su funcionamiento mejor, vamos a plantear un caso en el cual se solicita el “estado
civil” de una persona, las opciones posibles serán “casado”, “separado”, “soltero” y “viudo”, a las
distintas opciones le asignaremos un valor a cada una desde 1 a 4, y la sentencia switch ha de evaluar
el valor y según cual sea visualizar un mensaje u otro. El ejercicio planteado podría ser el siguiente.
1. var estadocivil = 1;
2. switch ( estadocivil ) {
3. case 1:
4. document.write(“El usuario/a está casado/a”);
5. break;
6. case 2:
7. document.write(“El usuario/a está separado/a”);
8. break;
9. case 3:
10. document.write(“El usuario/a está soltero/a”);
11. break;
12. case 4:
13. document.write(“El usuario/a está viudo/a”);
14. break;
15. default:
16. document.write(“El usuario/a no ha tecleado una opción válida”);
17. break;
18. }
La sentencia “break”, que incluye cada grupo de instrucciones, hace que el programa solo ejecute las
acciones que corresponden al valor evaluado, si se omite el programa continuara ejecutando las
sentencias de los diferentes casos expresados en la sentencia switch.

JAVASCRIPT
46
Aprovechando esta circunstancia, se puede utilizar “break” o no para examinar “rangos” de valores,
supongamos que se quiere realizar un programa en el cual se solicita un valor de 1 a 10 y
dependiendo de si el valor introducido es de 1 a 4, el descuento de un artículo será del 2%, si es de 5
a 8 será del 3% y si es de 9 a 10 será del 4%. Teniendo en cuenta los parámetros anteriores puede
quedar así su programación.
1. var tipo = 7;
2.
3. switch( tipo ) {
4. case 1:
5. case 2:
6. case 3:
7. case 4:
8. descuento = 2/100;
9. break;
10. case 5:
11. case 6:
12. case 7:
13. case 8:
15. break;
16. case 9:
17. case 10:
19. break;
20. default:
21. descuento = 0;
22. break;
23. }

JAVASCRIPT
47
8. BUCLES
Uno de los procedimientos más utilizados en cualquier lenguaje de programación es la utilización de
bucles. Un bucle es la repetición de un conjunto de sentencias, un número determinado de veces o
su repetición mientras se cumpla una condición.
En varios lenguajes de programación se establecen diferencias entre las diferentes sentencias para
realizar bucles, distinguiéndolas principalmente en bucles condicionales y bucles incondicionales.
En JavaScript no se aprecia tal distinción ya que las sentencias que sirven para realizar iteraciones,
tienen todo un factor de condición.
Aun así, es conveniente saber aplicar un tipo u otro y esto dependerá en gran medida de que se sepa
el principio y final de un bucle, o el bucle dependa de una condición. Dependiendo de esta medida a
tomar se utilizará una sentencia u otra.
8.1. Bucle For
La primera sentencia para realizar bucles, es el bucle denominado For (“Para”), el cual tiene la
siguiente sintaxis:
1. for ( variable = valor_inicial ; condición_a_evaluar ; incremento ) {
2. acción/es a realizar ;
3. acción/es a realizar ;
4. };
La idea del funcionamiento de un bucle for es la siguiente: "mientras la condición indicada se siga
cumpliendo, repite la ejecución de las instrucciones definidas dentro del for. Además, después de
cada repetición, actualiza el valor de las variables que se utilizan en la condición".
var mensaje = "Hola, estoy dentro de un bucle";
for(var i = 0; i < 5; i++) {
alert(mensaje);
}
La sentencia For, su funcionamiento es el siguiente, cuando el flujo del programa entra en el bucle,
se asigna en primer lugar “valor_inicial”, a la “variable” especificada, a continuación se realiza la
evaluación de la condición especificada en “condición_a_evaluar”, si la condición se cumple, es decir
es verdadera se ejecutan las acciones especificadas dentro del bloque correspondiente al bucle, otra
forma de expresarlo es que se ejecutan las ordenes que estén situadas entre las llaves { } del bucle,
una vez ejecutadas las sentencias del bloque, se aplica a “variable” el incremento especificado por
“incremento” y se vuelve a evaluar la condición, repitiéndose el proceso de nuevo si es verdadera y
finalizando la ejecución del bucle en caso de ser falsa.
A este tipo de bucle se les denomina incondicionales, aunque como se ha comentado anteriormente
tengan condición, y normalmente se han de utilizar cuando se conoce el principio y el final de
repetición del bucle.

JAVASCRIPT
48
Mostrar los días de la semana contenidos en un array utilizando la estructura FOR:
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
for(var i=0; i<7; i++) {
alert(dias[i]); }
Teniendo en cuenta la sintaxis anterior, el siguiente ejercicio práctico con solución, plantea un
algoritmo que visualice los números del 1 al 10.
1. /*
2. Algoritmo que visualiza los números del 1 al 10
3. */
4.
5. var numeros = 0;
6. for( numeros = 1 ; numeros < 11 ; numeros++ ) {
7. console.log(numeros);
8. }
9.
10. /*
11. Algoritmo que visualiza los números del 10 al 1
12. */
13.
14. for (let contar = 10 ; contar > 0 ; contar-- ) {
15. console.log(contar);
16. }
17.
18. /*
19. Ejercicios y prácticas de programación en JavaScript
20. Gracias por visitar www.redinfor.mipropia.com
21. */
Poco a poco iremos incrementado la dificultad de los ejercicios y es por eso que intercalaremos
explicaciones de otros temas. En esta ocasión el bucle For, que hemos utilizado en el ejemplo
anterior, utiliza para aplicar el incremento de valor a la unidad el operador ++.
Se puede utilizar para incrementar o decrementar el valor de la variable el operador unario
“Incremento” ( ++ ), y el operador unario “Decremento”.
La función del operador ++ es la de aumentar en una unidad el valor del operando, dependiendo de
dónde se sitúa respecto al operando se denomina preIncremento o posIncremento. Observe el
siguiente ejemplo:
1. /*
2. Ejemplo práctico operador Incremento y Decremento
3. */
4. var NumeroA = 10;
5. var NumeroB = 10;
6. var NumeroC = 0;
7. var NumeroD = 0;
8. NumeroC = NumeroA++;
9. NumeroD = ++NumeroB;
10. console.log("A = "+NumeroA);
11. console.log("B = "+NumeroB);

JAVASCRIPT
49
12. console.log("C = "+NumeroC);
13. console.log("D = "+NumeroD);
El resultado una vez ejecutado en el navegador es el siguiente.
Como se puede ver en el ejemplo la variable “NumeroC”, contiene como valor 10, esto es mientras
que el resto contiene como valor 11, es debido a que se ha utilizado el operador como
postincremento y por tanto primero se realiza en primer lugar la asignación y posteriormente se
aumenta el valor de la variable “NumeroA”, en una unidad.
Volviendo a la sentencia For para realizar bucles, el incremento no necesariamente ha de ser de una
unidad, ya que se puede utilizar el concepto de acumulador para el incremento,
variable=variable+valor.
El siguiente ejemplo práctico muestra un ejercicio en el cual se realiza la visualización de los números
pares entre 2 y 20.
1. /*
2. Ejercicios y prácticas resueltas en JavaScript
3. Sentencia For - Bucles
4. www.redinfor.mipropia.com
5.
6. Ejercicio: Visualizar los números pares entre 2 y 20
7.
8. */
9.
10. for(let numero=2; numero<=20 ; numero=numero+2 ) {
11. console.log( numero );
12. }

JAVASCRIPT
50
El resultado en el navegador ha de ser el siguiente.
El siguiente ejercicio resuelto que se muestra solicita mediante un formulario html, los valores de
inicio y final del bucle for, y visualiza como quedaría el bucle generado y el resultado que se
obtendría del mismo.

JAVASCRIPT
51
index.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>Bucle For - Javascript</title>
5. <meta charset="utf-8">
6. <meta name="author" content="José M. Castillo">
7. <meta name="generator" content="www.redinfor.mipropia.com">
8. <link rel="stylesheet" type="text/css" href="estilos.css">
9. </head>
10. <body>
11. 
12. <h3>Bucle For - Javascript</h3>
13. 
14. <p>Ejercicios y prácticas de programación en JavaScript con solución</p>
15. <p>El siguiente ejercicio muestra el uso del bucle For en JavaScript permitiendo la
introducción de los valores iniciales y finales del bucle, mostrando el resultado en el
navegador.</p>
16. 
17. <form action="#" name="formulario1" id="formulario1">
18. <label for="Inicio">Inicio</label><br>
19. <input type="text" name="Inicio" id="Inicio" /><br>
20. <label for="Final">Final</label><br>
21. <input type="text" name="Final" id="Final" /><br><br>
22. 
23. <button id="generar" name="generar">Generar</button>
24. <button id="ejecutar" name="ejecutar">Ejecutar</button>
25. </form>
26. <br>
27. 
28. <label for="generado">Previsualizar Sentencia</label><br>
29. <textarea name="generado" id="generado" cols="60" rows="5" readonly></textarea>
30. <br>
31. 
32. <label for="resultado">Resultado</label><br>
33. <textarea name="resultado" id="resultado" cols="60" rows="5" readonly></textarea>
34. 
35. <script src="principal.js"></script>
36. </body>
37. </html>

JAVASCRIPT
52
estilos.css
1. /*
2. FUENTES GOOGLE FONTS
3. ====================
4. Importar fuentes del servidor google
5. */
6.
7. @import url('https://fonts.googleapis.com/css?family=Sansita');
8. @import url('https://fonts.googleapis.com/css?family=PT+Sans');
9. @import url('https://fonts.googleapis.com/css?family=Nova+Mono');
10.
11.
12. /* Establecer la fuente del titulo */
13. body h3 {
14. font-family: 'Sansita', sans-serif;
15. }
16.
17. /* Establecer la fuente de los parrafos */
18. body p {
19. font-family: 'PT Sans', sans-serif;
20. }
21.
22.
23. /* Establecer estilos para el area de texto de previsualizacion de la sentencia For */
24. #generado {
25. background-color: #EEEEEE;
26. color: #ffffff;
27. font-family: 'Nova Mono', monospace;
28. }

JAVASCRIPT
53
principal.js
1. /*
2. Funcion a ejecutar al cargar la página
3. */
4. window.onload = function() {
5. /* Asignar evento al botón generar sentencia */
6. document.getElementById('generar').addEventListener("click",function(e){
7. e.preventDefault();
8. var areagenerado = document.getElementById("generado");
9. areagenerado.innerHTML = "for (let x = "+document.getElementById("Inicio").value +
10. " ; x <= "+document.getElementById("Final").value + " ; x++) {n" +
11. " console.log( '-' + x );n" +
12. "}";
13. });
14. /* Asignar evento al botón generar previsualización */
15. document.getElementById("ejecutar").addEventListener("click",function(e){
17. var arearesultado = document.getElementById("resultado");
18. var mensaje = "";
19. var inicio = document.getElementById("Inicio").value;
20. var final = document.getElementById("Final").value;
21. for(let x=inicio; x<=final; x++) {
22. mensaje=mensaje+"-"+x;
23. }
24. arearesultado.innerHTML = mensaje;
25. });
26. }
Ejercicio 1 - Bucle For
Realizar un ejercicio que visualice los números del 1 al 10 en orden inverso.
Vamos a complicar los ejercicios. Realizar un ejercicio en el cual se visualice una cuenta de 1 a 10, y a
la vez, una cuenta inversa de 10 a 1.
Más complicación!!, realizar un ejercicio en el cual se visualicen los números primos del 1 al 20.

JAVASCRIPT
54
8.2. Bucle – do … while
Bucle while
Después de haber utilizado el bucle For (“Para”), a continuación, se describe el primero de los bucles
denominados condicionales, ya que dependen de que una condición se cumpla para repetir las
acciones que en ellos se especifican.
La estructura while permite crear bucles que se ejecutan ninguna o más veces, dependiendo de la
condición indicada. Su definición formal es:
while(condicion) {
...
}
El funcionamiento del bucle while se resume en: "mientras se cumpla la condición indicada, repite
indefinidamente las instrucciones incluidas dentro del bucle".
Si la condición no se cumple ni siquiera la primera vez, el bucle no se ejecuta. Si la condición se
cumple, se ejecutan las instrucciones una vez y se vuelve a comprobar la condición. Si se sigue
cumpliendo la condición, se vuelve a ejecutar el bucle y así se continúa hasta que la condición no se
cumpla.
Evidentemente, las variables que controlan la condición deben modificarse dentro del propio bucle,
ya que de otra forma, la condición se cumpliría siempre y el bucle while se repetiría indefinidamente.
El siguiente ejemplo utiliza el bucle while para sumar todos los números menores o iguales que otro
número:
var resultado = 0;
var numero = 15;
var i = 15;
while(i <= numero) {
resultado += i;
i++;
}
alert(resultado);
En el ejemplo anterior, mientras se cumpla la condición, es decir, mientras que la variable i sea
menor o igual que la variable número, while(i <= numero) se ejecutan las instrucciones del bucle.
Dentro del bucle se suma el valor de la variable i al resultado total (variable resultado) resultado += i
y se actualiza el valor de la variable i, i++; que es la que controla la condición del bucle. Si no se
actualiza el valor de la variable i, la ejecución del bucle continua infinitamente o hasta que el
navegador permita al usuario detener el script.

JAVASCRIPT
55
Bucle do...while
El bucle de tipo do...while es muy similar al bucle while, salvo que en este caso siempre se ejecutan
las instrucciones del bucle al menos la primera vez. Su definición básica es:
do {
...
} while(condicion);
De esta forma, como la condición se comprueba después de cada repetición, la primera vez siempre
se ejecutan las instrucciones del bucle. Es importante no olvidar que después del while() se debe
añadir el carácter ; (al contrario de lo que sucede con el bucle while simple).
<CENTER>
<FORM>
<INPUT Type="button" Value=" Su clave " onClick="Alert(' ¡Su clave de acceso es A33S! ')"> </FORM>
</CENTER>
Este bucle do…while, el cual se puede traducir por haz…mientras, el bucle tiene la siguiente sintaxis.
1. do {
2. Acción/es…;
3. Acción/es…;
4. } while ( condición_a_evaluar );
El funcionamiento del bucle seria el siguiente, el flujo del programa entra en el bucle y ejecuta una
vez las acciones que se especifican dentro del bloque, cuando haya ejecutado las acciones se evalúa
la condición especificada, y en caso de cumplirse se vuelve a repetir el conjunto de acciones, en caso
contrario se da por finalizada la ejecución del bucle.
Teniendo en cuenta la sintaxis anterior realizar un ejercicio en el cual se muestren los valores de 1 a
10.
1. // Ejercicios y prácticas de programación en JavaScript
2. // Crear variables auxiliares
3. var contador=0;
4. // Inicializar el contador
5. contador=1;
6. // repetir mientras que el contador tenga
7. // un valor inferior a 10
8. do {
9. // visualizar el valor de contador
10. console.log(contador);
11. // incrementar contador en una unidad
12. contador=contador+1;
13. } while(contador<11);
14.
15. // Se ha de tener en cuenta que el no incrementar
16. // el contador puede tener como consecuencia
17. // la ejecución de un bucle infinito y por tanto
18. // el bloqueo del programa.
19. // Gracias por su visita a www.redinfor.mipropia.com

JAVASCRIPT
56
El resultado que se ha de obtener en la consola del navegador ha de ser similar al que se muestra a
continuación.
El ejercicio que se plantea es rellenar una lista de un formulario con los números del 1 al 20 y
traspasar a otra lista los números primos de la primera lista.
Para realizar estas acciones se han insertado tres botones, uno que genera los números del 1 al 20 en
la primera lista, un segundo botón que permite borrar los números generados de la primera lista y
por último otro botón que lee los números de la primera lista y traspasa a la segunda solo aquellos
que sean primos.

JAVASCRIPT
57
index.html
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>Bucle Do...While</title>
5. <meta charset="utf-8">
6. <meta name="author" content="Jose M. Castillo">
7. <meta name="generator" content="www.redinfor.mipropia.com">
8. <link rel="stylesheet" type="text/css" href="estilos.css">
9. </head>
10. <body>
11. 
12. <h3>Bucle Do...While</h3>
13. 
14. <form action="#" name="formulario1" id="formulario1">
15. 
16. <section class="izquierda">
17. <label for="lista1">Lista con números generados</label>
18. <br>
19. <select name="lista1" id="lista1" size="20"></select>
20. </section>
21. 
22. <section class="centro">
23. <button id="generar_numeros" name="generar_numeros" id="generar_numeros">Generar
Números</button>
24. <button id="borrar_lista" name="borrar_lista" id="borrar_lista">Borrar Lista</button>
25. <button id="generar_primos" name="generar_primos" id="generar_primos">Generar
Primos</button>
26. </section>
27. 
28. <section class="derecha ultimo">
29. <label for="lista2">Lista con números primos</label>
30. <br>
31. <select name="lista2" id="lista2" size="20"></select>
32. </section>
33. <div class="limpiar"></div>
34. </form>
35.
36. 
37. <script src="principal.js"></script>
38. </body>
39. </html>

JAVASCRIPT
58
estilos.css
1. /*
2. Incluir fuentes de google
3. */
4. @import url('https://fonts.googleapis.com/css?family=Sansita');
5.
6.
7. /* fuente para todo el documento */
8. body {
9. font-family: 'Sansita', sans-serif;
10. }
11.
12. /* Formulario */
13. body form {
14. width: 90%;
15. margin: 0 auto;
16. padding: 1%;
17. box-sizing: border-box;
18. border: 1px solid grey;
19. box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
20. }
21.
22. /* Sección izquierda del formulario */
23. .izquierda, .centro, .derecha {
24. box-sizing: border-box;
25. float: left;
26. margin-right: 5%;
27. width: 30%;
28. }
29.
30. label {
31. margin-bottom: 5px;
32. display: block;
33. text-align: center;
34. }
35.
36. select {
37. width: 100%;
38. background-color: #66CC99;
39. color: #ffffff;
40. }
41.
42. button {
43. border: none;
44. background-color: #0099CC;
45. padding: 5px;
46. width: 100%;
47. color: #ffffff;
48. height: 40px;
49. margin: 5px;
50. }
51.

JAVASCRIPT
59
52. .ultimo {
53. margin-right: 0px;
54. }
55.
56.
57.
58.
59. .limpiar {
60. clear: both;
61. }
principal.js
1. /*
2. Bucle do ... while ejercicios y prácticas de programación aprendoencasa.com
3. */
4.
5. window.onload = function() {
6. document.getElementById("generar_numeros").addEventListener("click",function(e){
8. var lista = document.getElementById("lista1");
9. lista.options.length = 0;
10. var contar=1;
11. do {
12. let opcion = document.createElement("option");
13. opcion.text = contar;
14. lista.add(opcion);
15. contar=contar+1;
16. } while(contar<=20);
17. });
18. document.getElementById("borrar_lista").addEventListener("click",function(e){
20. var lista = document.getElementById("lista1");
21. lista.options.length = 0;
22. });
23. document.getElementById("generar_primos").addEventListener("click",function(e){
25. let listap = document.getElementById("lista1");
26. let listas = document.getElementById("lista2");
27. let cuantoslistap = listap.options.length;
28. if(cuantoslistap>0) {
29. let contar=0;
30. do {
31. let numero = 0;
32. numero = listap.options[contar].text;
33. let divisor_inicial = 2;
34. let divisor_final = numero;
35. let divisores = divisor_inicial;
36. let primo = "si";
37. for(let d = divisor_inicial; d < divisor_final && primo=="si" ; d++ ) {

JAVASCRIPT
60
38. if( numero%d == 0 ) {
39. primo="no";
40. }
41. }
42. if(primo=="si") {
43. let opcion = document.createElement("option");
44. opcion.text = numero;
45. listas.add(opcion);
46. }
47. contar++;
48. } while(contar<cuantoslistap);
49. }
50. })
51. }

JavaScript

Recomendados

Recomendados

Más contenido relacionado

Similar a JavaScript

Similar a JavaScript (20)

Más de Jomicast

Más de Jomicast (20)

Último

Último (20)

JavaScript