Sistemas de

Programación-
Desarrollador Web
Full Stack

Rafael Cordero
Proyecto Isla IV – N.º. 68
 TABLA DE CONTENIDOS
O1 Intro Programación
02 HTML y CSS
Fundamentos de Fundamentos de
programación. HTML y CSS

Web
03 Development y yo 04 Front End
Fundamentos Básicos
Framework
de JavaScript Iniciación al uso de
Framework

05 Back End 06 Back End Framework

BBDD Consolidación
Almacenaje de datos JavaScript
en aplicaciones Web
 TABLA DE CONTENIDOS
07 BBDD MongoDb 08 Proyecto Final

Sistemas de BBDD Proyecto final

no relacional

FT Formación
Transversal
FC Formación
Complementaria
Formación en Formación en
igualdad empleo y
emprendimiento.
09 Prácticas
Prácticas en
empresas.
Módulo 3: Web Development y yo
Fundamentos básicos de programación
con JavaScript
Descripción del Módulo:

1. Objetivo:

Añadir funcionalidades de interactividad a una página incorporando

el lenguaje Javascript

2. Duración:

80 horas
JavaScrip!
Comenzamos…
03
JavaScript
Sintaxis Básica
JavaScript
1.1. Introducción
¿Qué es JavaScript?
JavaScript es un lenguaje de programación o de
secuencias de comandos que te permite implementar
funciones complejas en páginas web, cada vez que una
página web hace algo más que sentarse allí y mostrar
información estática para que la veas, muestra oportunas
actualizaciones de contenido, mapas interactivos,
animación de Gráficos 2D/3D, desplazamiento de
máquinas reproductoras de vídeo, etc., puedes apostar
que probablemente JavaScript está involucrado.

Es la tercera capa del pastel de las tecnologías web

estándar, dos de las cuales (HTML y CSS) hemos cubierto
en el módulo 2
Enlace: https://www.youtube.com/watch?v=riZbwRFMFuw

—Algunos Conceptos
1.1. Introducción

Algunos videos de apoyo para conocimiento general sobre la tecnología que

vamos a utilizar
- Principales usos Javascript
- ¿Qué es un Framework?
- Conceptos de programación básicos

— Videos Generales
1.1. Introducción

Lenguaje Javascript
Para construir una web actual debemos utilizar lo que nos aporta HTML, CSS y JavaScript.
Cada uno de estos elementos podemos definirlo de la siguiente forma:

 HTML es el lenguaje de marcado que usamos para estructurar y dar significado a nuestro
contenido web, por ejemplo, definiendo párrafos, encabezados y tablas de datos, o insertando
imágenes y videos en la página.

 CSS es un lenguaje de reglas de estilo que usamos para aplicar estilo a nuestro contenido HTML,
por ejemplo, establecer colores de fondo y tipos de letra, y distribuir nuestro contenido en múltiples
columnas.

 JavaScript es un lenguaje de secuencias de comandos que te permite crear contenido de

actualización dinámica, controlar multimedia, animar imágenes y prácticamente todo lo demás.
(Está bien, no todo, pero es sorprendente lo que puedes lograr con unas pocas líneas de código
JavaScript).
—Algunos Conceptos
1.1. Introducción

¿Cómo interactúan las 3 capas?

1. Primero debemos generar contenido HTML. Ejemplo: <p>Jugador 1: Pedro</p>
2. Luego, podemos agregar algo de CSS a la mezcla para
que se vea bien: p{
font-family: 'helvetica neue', helvetica,
sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0,0,200,0.6);
3. Y finalmente, podemos agregar algo de JavaScript para background: rgba(0,0,200,0.3);
implementar un comportamiento dinámico: color: rgba(0,0,200,0.6);
box-shadow: 1px 1px 2px
const para = document.querySelector('p'); rgba(0,0,200,0.4);
border-radius: 10px;
para.addEventListener('click', updateName);
padding: 3px 10px;
function updateName() { display: inline-block;
let name = prompt('Enter a new name'); cursor: pointer;
para.textContent = 'Player 1: ' + name; }
}
—Algunos Conceptos
1.1. Introducción

Javascript está en todas partes

Javascript se ha convertido en un lenguaje idóneo y muy recomendable para aprender a todos los
niveles, por disponer de muchas y variadas aplicaciones, además de aportar sencillez para las personas
que comienzan. Para ejecutarlo necesitamos tan solo un navegador, aunque en la actualidad Javascript
ha sobrepasado el ámbito de los clientes web, para situarse en casi cualquier parte.
 Javascript en la web
 El entorno donde Javascript apareció en primer lugar fue la web. Su ejecución se centraba en
el ámbito de un documento HTML y permitía a los desarrolladores aportar interactividad,
manipular el documento o la ventana del navegador, realizar cálculos, etc. Netscape Navigator,
un navegador desaparecido a día de hoy, tiene el honor de haber introducido Javascript como
lenguaje, aunque hoy lo soportan todos los clientes web con los que un usuario común pueda
llegar a navegar.
 Usar Javascript para la web, en el entorno del navegador, también se conoce como
programación del lado del cliente y es una de las actividades englobadas en el término
"frontend". Hoy sigue siendo el ambiente más habitual de ejecución de Javascript, pero
realmente es solo una más entre sus posibilidades.

—Algunos Conceptos
1.1. Introducción

Javascript está en todas partes

 Javascript en backend
 A ciertos desarrolladores se les ocurrió que podrían extraer el motor de ejecución de
Javascript, que hasta entonces sólo se disponía dentro del ámbito del navegador, para usarlo
en cualquier otro propósito fuera del cliente web. Así es como nació NodeJS, que no es más
que una plataforma para la ejecución de Javascript fuera del navegador.
 Con NodeJS podemos programar con Javascript aplicaciones que se ejecutan directamente
sobre el sistema operativo y que son capaces de resolver cualquier tipo de problema. Con esta
tecnología Javascript se convirtió en un lenguaje de programación de propósito general.
 Uno de los usos más habituales de NodeJS es la programación "backend", que permite
programar aplicaciones que son capaces de ejecutarse en el servidor, proporcionando
acceso a bases de datos, el sistema de archivos y cualquier otro recurso del lado del servidor.
Sin embargo, NodeJS es tan amplio que se puede usar para muchas otras tareas, como la
automatización, optimización o despliegue de aplicaciones, entre otras operaciones.
Enlace: Node JS

—Algunos Conceptos
1.1. Introducción

Javascript está en todas partes

 Javascript como lenguaje para apps de dispositivos
 También es posible usar Javascript como lenguaje para la creación de aplicaciones para
dispositivos (apps para móviles, tablets, TVs...). Las aplicaciones desarrolladas se instalan
desde los correspondientes app stores de los principales sistemas móviles y el usuario en
principio no percibe ninguna diferencia de éstas con respecto a las aplicaciones desarrolladas
con los lenguajes nativos. Pero, por el hecho de ser programadas con Javascript y HTML5,
abren un nuevo campo de actuación para las personas experimentadas en el desarrollo para la
web y dispensa del aprendizaje de lenguajes nativos para cada plataforma móvil.

 Al principio, para ejecutar aplicaciones realizadas en Javascript y HTML5 se necesitaba de un

"Web View". Básicamente la función del web view consiste en ofrecer un marco para la
ejecución de la app, de modo que ésta se ejecuta dentro de un navegador, aunque el usuario no
lo perciba. Esta situación tiene diversas ventajas e inconvenientes en los que no vamos a
entrar, pero hoy también existe la posibilidad de usar Javascript como lenguaje de desarrollo
de aplicaciones que se compilan a los lenguajes nativos, que no requieren un web view para
funcionar.

—Algunos Conceptos
1.1. Introducción

Javascript está en todas partes

 Javascript como lenguaje para aplicaciones de escritorio
 Otro de los ámbitos en los que Javascript ha penetrado con fuerza es en el desarrollo de
aplicaciones para ordenadores personales. Con Javascript somos capaces de crear
aplicaciones avanzadas de interfaz gráfica por ventanas, capaces de usar todos los recursos
de un ordenador y además ejecutarse en cualquier sistema operativo que necesitemos.

 Usar Javascript para aplicaciones de escritorio es sencillo gracias a proyectos como Electron,
que nos permite producir aplicaciones multiplataforma, es decir, que se podrán instalar en
Windows, Mac OS X y Linux. Hay bastantes aplicaciones conocidas desarrolladas con Electron,
como Atom, Visual Studio Code, Slack, Hyper, etc.

—Algunos Conceptos
1.1. Introducción

Javascript como primer lenguaje de programación

 Facilidad de uso:
 No necesitamos más que un navegador para poder ejecutar Javascript.
 No requiere ningún tipo de compilación (proceso para crear un archivo ejecutable binario para
un sistema operativo en particular) sino que es interpretado.
 Es de tipado dinámico y su sintaxis es menos rebuscada que la de otros lenguajes
 Amplias áreas de aplicación:
 Usos prácticamente ilimitados. Significa que puedes usar el lenguaje prácticamente para lo
que necesites.
 Aprendiendo un único lenguaje serás capaz de llegar a cualquier propósito que te propongas.
 Es un lenguaje abierto y estándar para web
 La mayoría de los desarrolladores trabajarán el entorno web.
 Javascript nos asegura que el conocimiento va a ser aplicado de manera directa en varios
proyectos web si decidimos hacer Desarrollo Web

—Algunos Conceptos
1.1. Introducción

Múltiples profesiones comienzan con JavaScript

Uno de los motivos por los que merece la pena comenzar con Javascript es porque el lenguaje es uno de
los pilares fundamentales para desempeñar múltiples profesiones demandadas dentro del ámbito de la
web.
 Frontend developer:
 Es el profesional que se ocupa del desarrollo del lado del cliente, aunque puede tener diversas actividades
además de la programación, como diseño, maquetación, desarrollo de interfaces de usuario, aplicaciones SPA
del lado del cliente, etc. El conocimiento Javascript es fundamental en todas la áreas de actuación de un
frontend developer.
 Backend developer:
 Como backend entendemos la programación del lado del servidor. Para backend lo cierto es que Javascript
(con NodeJS) es solo una de las muchas posibilidades. Sin embargo, NodeJS ofrece muchas ventajas como su
asincronía, rapidez y optimización, lo que lo hace idóneo para muchos tipos de proyectos.
 Fullstack developer:
 Es aquel que es capaz de trabajar tanto del lado del cliente como del lado del servidor.
 Requiere muchos conocimientos del desarrollador y por tanto es muy complicado, o imposible, que un único
perfil los reúna todos.
 La figura del fullstack developer facilita la vida a miles de desarrolladores, ya que les evita la fatiga mental de
pasar de un lenguaje a otro constantemente.

—Algunos Conceptos
1.1. Introducción

¿Porqué aprender código JavaScript?

 Todos los proyectos en la web usan Javascript y todo lo que puedes hacer con una librería o
framework lo puedes hacer también con Javascript, por lo que lo correcto es comenzar dominando el
lenguaje, para luego plantearse nuevos objetivos a medio o largo plazo.
 No aprendas jQuery: aprende Javascript. No aprendas Angular: aprende Javascript, no aprendas
React: aprende Javascript... Con una base sólida de Javascript te resultará mucho más sencillo
aprender más adelante cualquier librería o framework en la que te quieras basar.
 No tendrás problemas en el futuro si te cambian de framework en un proyecto o cuando encuentres
necesidades para las que esa librería no está pensada, o necesites personalizar cualquier detalle de
tu aplicación.
 Lo que sí debe acompañar al conocimiento y uso de Javascript son tus habilidades en todo aquello
que el navegador (la plataforma web) te ofrece de manera predeterminada: HTML5 y Web
Components

—Algunos Conceptos
1.1. Introducción

Diferencias entre Java y JavaScript

Java y Javascript son dos lenguajes de programación distintos. Comparten parte de su nombre y la base
de su sintaxis, sin embargo en realidad tienen sus diferencias:
 Compilador.
 Para programar en Java necesitamos un Kit de desarrollo y un compilador.
 Javascript no es un lenguaje que necesite que sus programas se compilen, sino que éstos se interpretan por
parte del navegador cuando éste lee la página.
 Orientado a objetos.
 Java es un lenguaje de programación orientado a objetos. (Más tarde veremos que quiere decir orientado a
objetos, para el que no lo sepa todavía).
 Javascript es un lenguaje "multiparadigma" no requiere programar orientado a objetos, aunque sí lo permite.
Esto quiere decir que podremos programar en Javascrip sin necesidad de crear clases.
 Propósito.
 Java en principio es mucho más potente que Javascript, debido a que es un lenguaje de propósito general. Con
Java se pueden hacer aplicaciones de lo más variado.
 Javascript sólo podemos escribir programas para que se ejecuten en páginas web. Aunque a decir verdad,
desde la última década Javascript se ha expandido tanto que hoy podemos usar el lenguaje para hacer
aplicaciones de todo tipo, como programas de consola, aplicaciones para móviles, de escritorio, etc. Por tanto,
a día de hoy es Javacript podríamos decir que es casi tan potente, o más, de lo que es Java.

—Algunos Conceptos
1.1. Introducción

Diferencias entre Java y JavaScript

+ Diferencias:
 Tipado estático
 Java es un lenguaje de programación fuertemente tipado (también llamado de tipado estático).
 Esto quiere decir que al declarar una variable en Java tendremos que indicar su tipo y no podrá cambiar
de un tipo a otro a lo largo de la ejecución del programa.
 Javascript no tiene esta característica, sino que es un lenguaje de tipado dinámico (o levemente tipado) y
podemos meter en una variable la información que deseemos, independientemente del tipo de ésta. Además,
podremos cambiar el tipo de dato de una variable cuando queramos.
 Lenguaje abierto / lenguaje propietario
 Javascript está basado en un estándar abierto, que no tiene un dueño en particular y por tanto cualquier
fabricante puede implementarlo en sus sistemas libremente.
 Java es un lenguaje propiedad de una empresa (actualmente Oracle), por lo que está dirigido con un enfoque
particular y comercial.
 Otras características.
 Java es mucho más complejo, aunque también más potente y robusto (tiene más funcionalidades que
Javascript) pero requiere de un aprendizaje más complejo.
 Javascript permite aprender con facilidad, incluso para personas sin experiencia en la programación, y permite
hacer programas rápidamente, obteniendo resultados bastante atractivos con poco código y esfuerzo.

—Algunos Conceptos
1.1. Introducción

Estándar ECMASCript
Javascript como lenguaje es estandarizado por la organización "ECMA
International". Esta empresa se dedica a la creación de estándares para la
comunicación y el tratamiento de información. Uno de sus más conocidos
estándares es ECMAScript.

ECMAScript es el estándar de definición del lenguaje Javascript, que cualquier

cliente que soporte Javascript debe de soportar. A lo largo del tiempo se han ido
publicando distintas versiones de ECMAScript, siendo la última más extendida
ECMAScript 2015, también conocido por ES6.

ES6 es soportado por todos los navegadores actuales, excepto Internet

Explorer. Por lo tanto, si programas con soporte a IE, no podrías usar en principio
ES6.
— Algunos Conceptos
1.2. Pseudocódigo
¿QUÉ PASOS DEBEMOS DAR PARA APRENDER A PROGRAMAR?

 Al hablar de fundamentos de programación nos referimos a aquellos conocimientos

básicos que nos permitirán desenvolvernos sin excesivo número de tropiezos.
 Veamos a qué tipo de tropiezos nos referimos utilizando un símil de transporte.
El conductor (programador) dispone de un coche (el ordenador) y desea
trasladarse entre dos puntos de una ciudad (objetivo del programa o la web).
 Como es lógico existen unos criterios en la búsqueda del objetivo como hacerlo
en el menor tiempo posible (ahorrar tiempo de programación), ir por las calles o
autovías más cómodas (un programa sencillo y comprensible) y economizar
combustible, neumáticos, etc.. (ahorrar memoria y evitar procesos innecesarios
que ocupen recursos de nuestro ordenador). Si nuestro hipotético conductor no
tiene ningún tipo de conocimiento ¿qué fundamentos habría que darle para
cumplir el objetivo?

—Algunos Conceptos
1.2. Pseudocódigo
¿QUÉ PASOS DEBEMOS DAR PARA APRENDER A PROGRAMAR?
¿qué fundamentos habría que darle para cumplir el objetivo?

 Antes de usar un modelo de coche concreto (lenguaje) es conveniente conocer

generalidades sobre los coches (tener unos fundamentos de programación).
 Hemos de ser conscientes de que si no tenemos fundamentos básicos para llevar un
coche (programa) seguramente tendremos una avería (el programa no funcionará)
dando lugar no sólo a que no alcancemos el objetivo, sino, lo que puede ser más
frustrante, a no tener ni idea de lo que está pasando. Por ejemplo, si no sabemos lo
que significa que se encienda el indicador de temperatura y continuamos circulando
terminaremos por fundir el motor dando por terminado el viaje en nuestro coche.

—Algunos Conceptos
1.2. Pseudocódigo
¿QUÉ PASOS DEBEMOS DAR PARA APRENDER A PROGRAMAR?
¿qué fundamentos habría que darle para cumplir el objetivo?

 Debemos saber discernir objetivos plausibles, difíciles,

e inalcanzables. Recorrer 100 km en media hora es un
objetivo fuera de lo que se puede considerar habitual:
en este caso conviene reconsiderar el problema
(viabilidad) o el dejarlo en manos de profesionales
(programas comerciales o programadores
profesionales).

—Algunos Conceptos
1.2. Pseudocódigo
¿QUÉ PASOS DEBEMOS DAR PARA APRENDER A PROGRAMAR?

 Existen unas normas de circulación (normas de sintaxis y construcción del lenguaje

informático que utilicemos) que pueden variar de un país a otro (de un lenguaje a otro).
Desconocer o infringir las normas de circulación puede llevarnos a la imposibilidad de
alcanzar el objetivo, incluso siendo éste de poca entidad.
 El simple hecho de conocer las normas de circulación no asegura el éxito del viaje,
pues cumpliendo las normas podemos perdernos o establecer recorridos circulares
que no llevan a ningún sitio.
 Antes de emprender viaje (programar), debemos tener claro:
 Dónde queremos ir (qué queremos que haga el programa).
 La ruta del viaje (estructura del programa), que no es fruto de la inspiración
divina, sino del estudio conjunto de objetivos - medios disponibles - normas -
restricciones, etc.. Invertir tiempo en el estudio de la ruta supondrá que el viaje
sea más cómodo y satisfactorio que si nos ponemos precipitadamente al
volante.
—Algunos Conceptos
1.2. Pseudocódigo
¿QUÉ PASOS DEBEMOS DAR PARA APRENDER A PROGRAMAR?

 En general, pero sobre todo para viajes complicados, conviene dividir el problema en
apartados como podrían ser:
 Tránsito por autopistas (algoritmo principal o guía del programa).
 Tránsito por carreteras principales (algoritmos de procesos relevantes).
 Tránsito por carreteras secundarias (algoritmos de procesos poco relevantes). Si
el tránsito por autopistas está mal planteado de poco valdrá el haber afinado en
la elección del tránsito por carreteras.
 Distintas rutas (estructuras de programa) pueden llevar al mismo objetivo. Puede
ocurrir que dos rutas sean igualmente buenas.

—Algunos Conceptos
1.2. Pseudocódigo
¿QUÉ PASOS DEBEMOS DAR PARA APRENDER A PROGRAMAR?

 Vistos ya, basándonos en un símil, qué son, para qué sirven y cuestiones
básicas relacionadas con los "fundamentos de programación", sobre los que
tratamos en este curso, vayamos al segundo paso: desarrollar programas
utilizando un lenguaje.
 Siguiendo el símil, equivaldría a realizar viajes (programas), planificándolos
correctamente y utilizando un modelo de coche (lenguaje) que sirva
adecuadamente a nuestras pretensiones.
 El manejo de un lenguaje debe basarse en:
 la progresividad
 en la práctica
 en el reciclaje.

—Algunos Conceptos
1.2. Pseudocódigo
¿QUÉ PASOS DEBEMOS DAR PARA APRENDER A PROGRAMAR?

 El manejo de un lenguaje debe basarse en:

 Progresividad en cuanto a que debe comenzarse con las instrucciones básicas
que permitan la ejecución de pequeños programas. Posteriormente se
introducirán, gradualmente, los aspectos de mayor complejidad.
 Práctica porque, como en casi toda disciplina, la experiencia que vamos
acumulando aumenta nuestra destreza.
 Y reciclaje porque, para bien o para mal, los lenguajes evolucionan y aparecen
nuevas versiones o variantes. Aunque en relación con esto, siempre hay quien
prefiere un buen clásico a las modernidades.

—Algunos Conceptos
1.2. Pseudocódigo
¿Qué es el Pseudocódigo?

 Es una forma de expresar los distintos pasos que va a realizar un programa, de la

forma más parecida a un lenguaje de programación. Su principal función es la de
representar por pasos la solución a un problema o algoritmo, de la forma más
detallada posible, utilizando un lenguaje cercano al de programación. El pseudocódigo
no puede ejecutarse en un ordenador ya que entonces dejaría de ser pseudocódigo,
como su propio nombre indica, se trata de un código falso (pseudo = falso), es un
código escrito para que lo entienda el ser humano y no la máquina.

 Aprender a escribir pseudocódigo para la resolución de un problema permite hacer

mucho más sencilla su programación en un lenguaje convencional, por lo que si estás
interesado en comenzar tu formación como programador y no tienes conocimientos
previos, resulta muy recomendable y conveniente formarse en pseudocódigo antes de
empezar a estudiar cualquier lenguaje de programación.

—Algunos Conceptos
1.2. Pseudocódigo
Partes del pseudocódigo

—Algunos Conceptos
1.2. Pseudocódigo
Partes del pseudocódigo

—Algunos Conceptos
1.2. Pseudocódigo
Estructuras de Repetitivas (Bucles)

 Un bucle o ciclo, en programación, es una secuencia de instrucciones de código que se ejecuta

repetidas veces, hasta que la condición asignada a dicho bucle deja de cumplirse.

 Los 3 bucles más utilizados en programación son el bucle while (Mientras), el bucle for (desde) y el
bucle do-while (Hasta que).

—Algunos Conceptos
1.2. Pseudocódigo
Estructuras de Repetitivas (Bucles)

 Bucle Mientras (While)

 Se utiliza cuando no sabemos el
número de iteraciones que
necesitamos.
 Se realiza mientras se cumpla una
condición (que nosotros
marcaremos al principio.
 No existe una variable que indique
el número de iteraciones que va a
realizar el bucle
 El bucle se termina cuando no se
cumpla la condición marcada
—Algunos Conceptos
1.2. Pseudocódigo
Estructuras de Repetitivas (Bucles)

 Bucle Hacer-Mientras (do -While)

 Es un bucle especial, la condición se
evalúa al final del bucle.
 La primera vez que se llegue al
bucle “no importa la condición”, la
secuencia se va a realizar al menos
una vez.
 El bucle se realizará mientras se
cumpla la condición indicada.

—Algunos Conceptos
1.2. Pseudocódigo
Estructuras de Repetitivas (Bucles)
 Bucle Desde (For)
 Se utilizan cuando el programa sabe el
número de vueltas que tiene que realizar
 El número de vueltas se indica mediante
una constante (n)
 Se debe indicar el comienzo del mismo y
la finalización del mismo.(Valor inicial y
Valor Final).
 Hay un tercer parámetros llamado
incremento o decremento que cuando
será el encargado de sumar o restar el
número de vueltas hasta llegar al
objetivo.
 La finalización del bucle se detecta
cuando la variable que marca la iteración
llega al valor final. —Algunos Conceptos
1.2. Pseudocódigo
Ejercicio 1 Pseudocódigo

Con lo ya aprendido en pseudocódigo, crea un esquema de programa, que pida a un usuario 2 números, le
pida que seleccione una operación (1 – Suma | 2 – Resta) y muestre el resultado de la operación

Ejercicio 2 Pseudocódigo

Solicita a un usuario que introduzca un nombre hasta que escriba salir. Cada vez que introduzca un
nombre, el programa debe poner en la consola: Vuelta x – nombre (Valor del nombre introducido por el
usuario)

Ejercicio 3 Pseudocódigo

Solicita a un usuario que introduzca un número y súmalo por si mismo 5 veces. Muestra el resultado de
cada suma que hagas y el resultado final.

IMPORTANTE: Guardaremos todos los Ejercicios en una carpeta Indicando el nombre del ejercicio.

— Sintaxis Programación
1.2. Pseudocódigo
Ejercicio 4 Pseudocódigo

Crea un programa en el que le pidas a un usuario en una variable su nombre y en otra sus apellidos.
También pide en variables diferentes, su DNI y su dirección. Muestra un resumen de todos los datos en el
que se muestre la información indicada por el usuario. Repite estas acciones 5 veces.

Ejercicio 5 Pseudocódigo

Crea un juego en el que introduces una variable llamada respuesta con un número. Solicítale al usuario
números hasta que acierte el número indicado o pulse el número 0.

Ejercicio 6 Pseudocódigo

Crea un programa en el que realices la reserva de una habitación de un hotel a nombre de una persona. El
hotel tiene 3 habitaciones. Para ello debes crear 3 variables (H1, H2 Y H3) de habitaciones e indicar a que
nombre está cada habitación. Si la habitación tiene ya un nombre, no puede ser asignada por otra
persona. Una persona solo puede ocupar una habitación. El programa termina cuando las tres
habitaciones están ocupadas.
— Sintaxis Programación
1.3. Comenzamos!

¿Cómo incluimos código JavaScript en nuestra web?

La inclusión de JavaScript en la página web es muy similar a lo que ya hemos
visto en el Módulo 1 con CSS. (Ejemplo 0)
Podemos incluir JavaScript en una web de varias formas:
 Al cargar la página.
 Ejemplo 1
 Como respuesta a un evento.
 Ejemplo 2

*Esto son dos ejemplos de código JavaScript

dentro del código de una Página Web.
(Seguramente no entiendas nada… de
momento )

— Arrancando JavaScript
1.3. Comenzamos!

¿Cómo incluimos código JavaScript en nuestra web?

También podemos indicar el código JavaScript de forma muy similar a las hojas
de estilos, es decir, en un archivo a parte:

<script src="archivo_externo.js"></script>

Debemos estructurar nuestra web:

 Archivos HTML  .html

 Archivos CSS  .css
 Archivos JavaScripts  .js

— Arrancando JavaScript
1.4. Sintaxis JavaScripts

Aspectos importantes de la Sintaxis JavaScript

 Se han de respetar las mayúsculas y minúsculas en nuestro código.
 Ejemplo: No es lo mismo una función Alert() que una función alert().
 Separación de instrucciones
 Para que el navegador sepa cuando acaba una instrucción y comienza otra,
debemos indicar un punto y coma  ;
 Nota: También permite hacerlo con un salto de línea, pero para no liarnos, vamos a
usar siempre el “;”.

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Comentarios
Serán muy importantes el uso de comentarios en nuestro código. Deberemos
explicar en todo momento lo que intentamos hacer, ya que se nos puede dar el
caso de que otra persona necesite ver que pretendemos hacer. Es vital hacer
comentarios para el buen mantenimiento de la plataforma. Ejemplo:
<SCRIPT>
//Este es un comentario de una línea
/*Este comentario se puede extender
por varias líneas.
Las que quieras*/
</SCRIPT>

Obligatorio que se usen siempre.

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis
 Variable: Es un espacio en memoria donde se almacena un dato, un espacio donde
podemos guardar cualquier tipo de información que necesitemos para realizar las
acciones de nuestros programas.
 Podemos pensar en ella como una caja, donde almacenamos un dato. Esa caja tiene un
nombre, para que más adelante podamos referirnos a la variable, recuperar el dato así
como asignar un valor a la variable siempre que deseemos.

— Sintaxis JavaScript
1.3. Sintaxis JavaScripts

Conceptos de la Sintaxis
 Variable:
 Ejemplo de uso de variables:

// PROGRAMA DE SUMAS:

sumando1 = 23
sumando2 = 33
Tenemos 3 Variables:
Sumando1 (con valor 23)
//Resultado: Sumando2 (con valor 33)
suma = sumando1 + sumando2 Suma (con el resultado)

* Ejemplo 3

— Sintaxis JavaScript
1.3. Sintaxis JavaScripts

Conceptos de la Sintaxis
 Variable:
 Reglas en el nombramiento de Variables:
 Los nombres de las variables han de construirse con caracteres alfanuméricos (números
y letras),
 Admite el carácter subrayado o guión bajo (_) y el carácter dólar $.
 Reglas adicionales para construir nombres para variables.
 La más importante es que no pueden comenzar por un carácter numérico.
 No podemos utilizar caracteres raros como el signo +, un espacio o un signo -.
 Nombres admitidos para las variables podrían ser:
Edad
Nota: También hay que evitar utilizar nombres reservados como
paisDeNacimiento
variables, por ejemplo no podremos llamar a nuestra variable _nombre
palabras como return o for, que ya veremos que son utilizadas para $elemento
estructuras del propio lenguaje. Otro$_Nombres

IMPORTANTE: Son sensibles a mayúsculas y

minúsculas:
Edad y edad son dos variables diferentes
— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis
 Variable:
 Declaración de Variable:
 Consiste en definir, y de paso informar al sistema, que vas a utilizar una variable.
 Es una costumbre habitual en los lenguajes de programación el especificar
explícitamente las variables que se van a usar en los programas.
 En muchos lenguajes de programación hay unas reglas estrictas a la hora de declarar las
variables, pero lo cierto es que Javascript es bastante permisivo.
 Javascript se salta muchas reglas por ser un lenguaje un tanto libre a la hora de
programar y uno de los casos en los que otorga un poco de libertad es a la hora de
declarar las variables, ya que no estamos obligados a hacerlo, al contrario de lo que pasa
en otros lenguajes de programación como Java, C, C# y muchos otros.
 Para declarar una variable utilizaremos la palabra reservada “var”: var operando1
 Podemos también asignarle un valor al declararla: var operando2
 Podemos declarar varias variables al mismo tiempo:
var operando1 = 12
* Ejemplo 4 var operando1, operando2 var operando2 = 6

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis
 Variable:
 Ámbito de las variables:
 Se le llama ámbito de las variables al lugar donde estas están disponibles
 cuando declaramos una variable hacemos que esté disponible en el lugar donde se ha
declarado.
 Las variables que declaremos en la página estarán accesibles dentro de ella.
 En Javascript no podremos acceder a variables que hayan sido definidas en otra página
 Se pueden hacer variables con ámbitos distintos del global, es decir, variables que
declararemos y tendrán validez en lugares más acotados.

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis
 Variable:
 Ámbito de las variables:
 Variables Globales
 Las variables globales son las que están declaradas en el ámbito más amplio
posible, que en Javascript es una página web.
 Para declarar una variable global a la página simplemente lo haremos en un script,
con la palabra var.
 Son accesibles desde cualquier lugar de la página, es decir, desde el script donde
se han declarado y todos los demás scripts de la página

<SCRIPT>
var variableGlobal
</SCRIPT>

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis
 Variable:
 Ámbito de las variables:
 Variables Locales
 podremos declarar variables en lugares más acotados, como por ejemplo una
función.
 Cuando se declaren variables locales sólo podremos acceder a ellas dentro del
lugar donde se ha declarado.
 Las variables pueden ser locales a una función, pero también pueden ser locales a
otros ámbitos, como por ejemplo un bucle. En general, son ámbitos locales
cualquier lugar acotado por llaves.
NOTA: Se puede declarar una variable local con el mismo nombre que una <SCRIPT>
global, en este caso la variable global será visible desde toda la página, excepto function miFuncion (){
en el ámbito donde está declarada la variable local ya que en este sitio ese
var variableLocal
nombre de variable está ocupado por la local y es ella quien tiene validez.
En resumen, la variable que tendrá validez en cualquier sitio de la página es la }
global. Menos en el ámbito donde está declarada la variable local, que será ella </SCRIPT>
quien tenga validez.

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis
 Variable:
 Diferencias entre declarar una variable con var y no declararlas
 En Javascript tenemos libertad para declarar o no las variables con la palabra var, pero
los efectos que conseguiremos en cada caso serán distintos.
 Cuando utilizamos var  la variable que estamos declarando sea local al ámbito
donde se declara.
 Si no utilizamos la palabra var  ésta será global a toda la página, sea cual sea el
ámbito en el que haya sido declarada.
 Cuando es declarada fuera de una función o cualquier otro ámbito más reducido, nos es
indiferente si se declara o no con var, desde un punto de vista funcional.
 Cualquier variable declarada fuera de un ámbito es global a toda la página.
 La diferencia se puede apreciar en una función por ejemplo, ya que si utilizamos
var la variable será local a la función y si no lo utilizamos, la variable será global a la
página.  es fundamental a la hora de controlar correctamente el uso de las
variables en la página, ya que si no lo hacemos en una función podríamos
sobrescribir el valor de una variable, perdiendo el dato que pudiera contener
previamente.
— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis
 Variable:
 Desde ECMAScript 2015 existe la declaración let. La sintaxis es la misma que var a
la hora de declarar las variables, pero en el caso de let la declaración afecta al
bloque.

 Bloque significa cualquier espacio acotado por unas llaves, como podría ser las
sentencias que hay dentro de las llaves de un bucle for.
for(let i=0; i<3; i++) {
// en este caso, la variable i sólo existe dentro del
bucle for
alert(i);
} // fuera del bloque for no existe la variable i

 Si esa variable "i" hubiera sido declarada en la cabecera del bucle for mediante "var",
sí que existiría fuera del bloque de código del for.
— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis
 Variable:
 Tipos de datos:
 Números
 Para empezar tenemos el tipo numérico, para guardar números como 9 o
23.6
 Cadenas
 El tipo cadena de carácter guarda un texto. Siempre que escribamos una
cadena de caracteres debemos utilizar las comillas (").
 Boleanos
 También contamos con el tipo boleano, que guarda una información que
puede valer si (true) o no (false).

Nota: Nuestras variables pueden contener cosas más complicadas, como podría ser un objeto,
una función, o vacío (null) pero ya lo veremos más adelante.

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis
 Variables - Tipos de Datos
 Tipo de datos Numérico
 En este lenguaje sólo existe un tipo de datos numérico, al contrario que
ocurre en la mayoría de los lenguajes más conocidos. Todos los números son
por tanto del tipo numérico, independientemente de la precisión que tengan o
si son números reales o enteros. Los números enteros son números que no
tienen coma, como 3 o 339. Los números reales son números fraccionarios,
como 2.69 o 0.25, que también se pueden escribir en notación científica, por
ejemplo 2.482e12.
 Con Javascript también podemos escribir números en otras bases, como la
hexadecimal. Las bases son sistemas de numeración que utilizan más o
menos dígitos para escribir los números.

* Ejemplo 5A

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis
 Variables - Tipos de Datos
 Tipo boleano
 El tipo boleano, boolean en inglés, sirve para guardar un si o un no o dicho de
otro modo, un verdadero o un falso. Se utiliza para realizar operaciones
lógicas, generalmente para realizar acciones si el contenido de una variable
es verdadero o falso.
 Usos de estas variables:
 Si una variable es verdadero entonces ----- Ejecuto unas instrucciones
 Si no ----- Ejecuto otras
 Los dos valores que pueden tener las variables booleanas son true o false.

miBoleana = true
<br>
miBoleana = false
* Ejemplo 5B

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis
 Variables - Tipos de Datos
 Tipo de datos cadena de caracteres
 es el que sirve para guardar un texto.
 Javascript sólo tiene un tipo de datos para guardar texto y en el se pueden
introducir cualquier número de caracteres.
 Un texto puede estar compuesto de números, letras y cualquier otro tipo de
caracteres y signos. Los textos se escriben entre comillas, dobles o simples.

miTexto = "Pepe se va a pescar" * Ejemplo 5C

miTexto = '23%%$ Letras & *--*'

Nota: Todo lo que se coloca entre comillas es tratado como una cadena de caracteres
independientemente de lo que coloquemos en el interior de las comillas.
Si en una variable de texto guardamos números y en ese caso tenemos que tener en cuenta que las
variables de tipo texto y las numéricas no son la misma cosa y mientras que las de numéricas nos
sirven para hacer cálculos matemáticos las de texto no.
— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis
 Variables - Tipos de Datos
 Tipo de datos cadena de caracteres
Salto de línea: \n
 En las variables de cadena, utilizaremos una
serie de caracteres especiales para Comilla simple: \'
determinadas acciones Comilla doble: \"
 Estos se conocen como caracteres de Tabulador: \t
escape Retorno de carro: \r
 Se escriben con una notación especial Avance de página: \f
que comienza por una contra barra (una Retroceder espacio: \b
barra inclinada al revés de la normal '') y Contrabarra: \\
luego se coloca el código del carácter a
mostrar.
 Algunos de estos caracteres probablemente * Ejemplo 5D
no los llegarás a utilizar nunca, pues su
función es un poco rara y a veces poco clara.
— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Ejercicio 1 JavaScript
Crea una página web con un pequeño código en JavaScript en el que indiques:
- Una variable de Texto con tu nombre y apellidos
- Una variable Numérica (num1) con un valor de 5
- Una variable numérica (num2) con un valor de 3
- Una variable numérica (suma) con el resultado de sumar num1 y num2.
- Genera un aviso (alert) al final de la página con un texto.

Nota: No olvides añadir alguna etiqueta HTML indicando lo que vas haciendo.

IMPORTANTE: Guardaremos todos los Ejercicios

en una carpeta Indicando el nombre del ejercicio.

— Sintaxis HTML
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Operadores)

 Operadores aritméticos
 Son los utilizados para la realización de operaciones matemáticas simples como la
suma, resta o multiplicación... Ejemplos:
+ Suma de dos valores
- Resta de dos valores, también puede utilizarse
para cambiar el signo de un número si lo
factura = precio * unidades //multiplico precio por
utilizamos con un solo operando -23
unidades
* Multiplicación de dos valores
resto = factura % 3 //obtengo el resto de dividir la
/ División de dos valores
variable factura por 3
% El resto de la división de dos números (3%2
devolvería 1, el resto de dividir 3 entre 2)
precio++ //incrementa en una unidad el precio
++ Incremento en una unidad, se utiliza con un
solo operando
-- Decremento en una unidad, utilizado con un * Ejemplo 6a
solo operando

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Operadores)

 Operadores de asignación
Sirven para asignar valores a las variables, ya hemos utilizado en ejemplos anteriores
el operador de asignación =, pero hay otros operadores de este tipo... Ejemplos:
= Asignación. Asigna la parte de la derecha del
igual a la parte de la izquierda. A al derecha se
colocan los valores finales y a la izquierda
ahorros = 7000 //asigna un 7000 a la variable ahorros
generalmente se coloca una variable donde
ahorros += 3500 //incrementa en 3500 la variable
queremos guardar el dato.
ahorros, ahora vale 10500
+= Asignación con suma. Realiza la suma de la
ahorros /= 2 //divide entre 2 mis ahorros, ahora
parte de la derecha con la de la izquierda y
quedan 5250
guarda el resultado en la parte de la izquierda.
-= Asignación con resta
*= Asignación de la multiplicación * Ejemplo 6b
/= Asignación de la división
%= Se obtiene el resto y se asigna

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Operadores)

 Operadores de cadenas
 Las cadenas de caracteres (variables de texto), tienen sus propios operadores para
realizar acciones típicas sobre cadenas.
 Aunque javascript sólo tiene un operador para cadenas se pueden realizar otras
acciones con una serie de funciones predefinidas. Ejemplos:
+ Concatena dos cadenas, pega la segunda cadena1 = "hola"
cadena a continuación de la primera. cadena2 = "mundo"
cadenaConcatenada = cadena1 + cadena2 //cadena
concatenada vale "holamundo"

* Un detalle importante que se puede ver en este caso es que el operador + sirve para dos usos distintos, si sus operandos
son números los suma, pero si se trata de cadenas las concatena. Esto pasa en general con todos los operadores que se
repiten en el lenguaje, JavaScript es suficientemente listo para entender que tipo de operación realizar mediante una
comprobación de los tipos que están implicados en ella.
* Ejemplo 6c

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Operadores)

 Operadores de cadenas:
 Un caso que resultaría confuso es el uso del operador + cuando se realiza la
operación con operadores texto y numéricos entremezclados. En este caso
JavaScript asume que se desea realizar una concatenación y trata a los dos
operandos como si de cadenas de caracteres se trataran, incluso si la cadena de
texto que tenemos fuese un número. Esto lo veremos más fácilmente con el
siguiente ejemplo. miNumero = 23
miCadena1 = "pepe"
miCadena2 = "456"
resultado1 = miNumero + miCadena1 //resultado1 vale "23pepe"
resultado2 = miNumero + miCadena2 //resultado2 vale "23456"
miCadena2 += miNumero //miCadena2 ahora vale "45623"

En el caso del operador +=, si estamos tratando con cadenas de texto y números
entremezclados, tratará a los dos operadores como si fuesen cadenas.
— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Operadores)

 Operadores lógicos:
 Sirven para realizar operaciones lógicas, que son aquellas que dan como resultado
un verdadero o un falso, y se utilizan para tomar decisiones en nuestros scripts.
 Para realizar este tipo de operaciones se utilizan operandos boleanos, que
conocimos anteriormente, que son el verdadero (true) y el falso (false).
 Nuestro programa Javascript utilizaría en este ejemplo un operando boleano para
tomar una decisión.
! Operador NO o negación. Si era true pasa a false y viceversa.
&& Operador Y, si son los dos verdaderos vale verdadero.
|| Operador O, vale verdadero si por lo menos uno de ellos es
verdadero.
Si tengo hambre y tengo comida entonces me pongo a comer
* Ejemplo 6d
miBoleano = true
miBoleano = !miBoleano //miBoleano ahora vale false
tengoHambre = true
tengoComida = true
comoComida = tengoHambre && tengoComida — Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Operadores)

 Tipos de datos:
 Para informar al sistema del tipo de dato de nuestra variable, debemos utilizar el
operador typeof.
 Este operador devuelve el tipo de dato que tiene nuestra variable:

var boleano = true;

var numerico = 22; Importante:
var numerico_flotante = 13.56; 1. Los números, ya tengan o no
var texto = "mi texto“; parte decimal, son siempre
var fecha = new Date(); del tipo de datos numérico.
document.write("<br>El tipo de boleano es: " + typeof(boleano)); 2. El uso de fechas que, es un
document.write("<br>El tipo de numerico es: " + typeof(numerico)); objeto de la clase Date(), es
document.write("<br>El tipo de numerico_flotante es: " + muy complejo en JavaScript
typeof(numerico_flotante)); y lo veremos más adelante
document.write("<br>El tipo de texto es: " + typeof(texto));
document.write("<br>El tipo de fecha es: " + typeof(fecha));

* Ejemplo 6e — Sintaxis JavaScript

1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Operadores)

 Operadores condicionales:
 Sirven para realizar expresiones condicionales todo lo complejas que deseemos.
 Se utilizan en las expresiones condicionales para tomas de decisiones
 Tabla de operadores condicionales:

== Comprueba si dos valores son iguales

!= Comprueba si dos valores son distintos
> Mayor que, devuelve true si el primer operando es mayor
que el segundo
< Menor que, es true cuando el elemento de la izquierda es
menor que el de la derecha
>= Mayor igual
<= Menor igual

Veremos ejemplos de operadores condicionales cuando expliquemos estructuras de

control, como la condicional if.

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Ejercicio 2 JavaScript
Crea una página web con un pequeño código en JavaScript en el que indiques:
- Dos variables de texto (Marca y modelo)  Pide al usuario que introduzca la marca y modelo de un
coche y muéstralo en la página.
- Dos variables numéricas (num1 y num2)  Crea dos variables numéricas y muestra por pantalla el
resultado de: multiplicar num1 x 2 y sumarle num2.
- Crea dos variables booleanas con el objetivo de saber si una persona puede ir a una excursión. Para
poder asistir a la excusión, la persona tiene que venir a clase y tener el permiso de sus padres.
(Muestra el resultado simplemente)
- Aumenta en 100 la variable num1 y disminuye en 50 la variable num2

Nota: No olvides añadir alguna etiqueta HTML indicando lo que vas haciendo.

IMPORTANTE: Guardaremos todos los Ejercicios

en una carpeta Indicando el nombre del ejercicio.

— Sintaxis HTML
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Estructuras de control)

 Tomas de decisiones:
 Tenemos dos tipos de estructuras para controlar las acciones de los usuarios
 Si… Entonces  if else
 Casos u opciones concretas  Switch
 Bucles
 Desde…  For
 Mientras  While
 Hacer hasta  Do While

Las estructuras de control son muy importantes en Javascript y en cualquier lenguaje de

programación. Vamos a verlas en detalle…

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Estructuras de control)

 Estructura de control if
 Es una estructura para el control de la toma de decisiones
 Es un condicional para tomar una u otras operaciones
 ¿Cómo funciona?  primero se evalúa una expresión, si da resultado positivo se
realizan las acciones relacionadas con el caso positivo.
 Sintaxis: if (expresión condicional) {
//acciones a realizar en caso positivo…
}
 También puede originar resultados negativos: if (expresión condicional) {
//acciones a realizar en caso positivo…
} else {
//acciones a realizar en caso negativo
//...
* Ejemplo 7a }

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Estructuras de control)

 Estructura de control if
 Expresiones condicionales con varias condiciones o condiciones complejas:
 Sintaxis:
if (expresión1 [operador] expresión2) {
//acciones a realizar en caso positivo…
}

 También puede originar resultados negativos de las dos expresiones:

if (expresión1 [operador] expresión2) {
//acciones a realizar en caso positivo…
} else {
//acciones a realizar en caso negativo
}

* Donde operador irían los operadores indicados en la diapositiva 62 * Ejemplo 7b

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Estructuras de control)

 Estructura de control if
 Estas estructura de control pueden anidarse, es decir, pueden aparecer dentro de
otras estructuras if, con el fin de evaluar de nuevo otras posibilidades:
var numero1=23
var numero2=63
if (numero1 == numero2){
document.write("Los dos números son iguales")
}else{
if (numero1 > numero2) {
document.write("El primer número es mayor
que el segundo")
}else{
document.write("El primer número es menor
que el segundo")
}
* Ejemplo 7c
}
— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Estructuras de control)

 Estructura de control switch
 Es una estructura de control más compleja que permite establecer varias opciones en base a
una variable
 Sirve para evaluar estados de esa variable y definir que hacer en cada uno de ellos.
 Sintaxis:
switch (expresión) {
case valor1:
Sentencias a ejecutar si la expresión tiene como valor a valor1
break
case valor2:
Sentencias a ejecutar si la expresión tiene como valor a valor2
break
case valor3:
Sentencias a ejecutar si la expresión tiene como valor a valor3
break
default:
Sentencias a ejecutar si el valor no es ninguno de los anteriores
}

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts
switch (dia_de_la_semana) {
case 1:
Conceptos de la Sintaxis (Estructuras de control) document.write("Es Lunes") ;
 Estructura de control switch break ;
case 2:
 Ejemplo
document.write("Es Martes") ;
break;
case 3:
document.write("Es Miércoles") ;
break;
case 4:
document.write("Es Jueves") ;
 En este ejemplo podemos ver como evaluamos en base a la break;
variable dia_de_la_semana las distintas opciones para que el case 5:
usuario decida que va a mostrar en pantalla la página. En document.write("Es viernes") ;
break;
caso de que el usuario se equivoque, está controlado case 6:
mediante default, e indicará que no existe ningún día si el document.write("Es sábado");
break;
usuario indica otra opción. case 7:
document.write("Es domingo") ;
break
default:
document.write("Ese día no existe");
}
* Ejemplo 7d
— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Ejercicio 3 JavaScript
Crea una página web con un pequeño código en JavaScript en el que indiques:
- En un restaurante se pueden ofrecer dos opciones de comida. Menú del día y Platos combinados.
- Si el usuario elige Platos combinados, se le deben mostrar tres platos combinados (Plato1,
Plato2,Plato3) .Sino, el menú del día se compone de dos platos (Primer Plato (Opciones de primer
plato) y Plato2 (Opciones de segundo Plato) (Si te ves con confianza, añade la opción de bebida y
postre)
- La página web deberá mostrar lo que ha elegido el usuario para comer.

Nota: No olvides añadir alguna etiqueta HTML indicando lo que vas haciendo.

IMPORTANTE: Guardaremos todos los Ejercicios

en una carpeta Indicando el nombre del ejercicio.

— Sintaxis HTML
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Estructuras de control)

 Estructura de control while
 Estos bucles se utilizan cuando queremos repetir la ejecución de unas sentencias un número
indefinido de veces, siempre que se cumpla una condición.
 No incorpora en la misma línea la inicialización de las variables su condición para seguir
ejecutándose y su actualización. Sólo se indica, como veremos a continuación, la condición que
se tiene que cumplir para que se realice una iteración.
 Sintaxis:
while (condición){
//sentencias a ejecutar
}

 Ejemplo:
var color = ""
while (color != "rojo"){
color = prompt("dame un color (escribe rojo para salir)","")
}

* Ejemplo 8A
— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Estructuras de control)

 Estructura de control do while
 Es una variación del bucle while.
 Se utiliza generalmente cuando no sabemos cuantas veces se habrá de ejecutar el bucle, igual
que el bucle WHILE, con la diferencia de que sabemos seguro que el bucle por lo menos se
ejecutará una vez.
 Sintaxis:

do {
//sentencias del bucle
} while (condición)
 Ejemplo:

var color
do {
color = prompt("dame un color (escribe rojo para salir)","")
} while (color != "rojo")

*Ejemplo 8B
— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Estructuras de control)

 Estructura de control for
 Se utiliza para repetir una o más instrucciones un determinado número de veces.
 De entre todos los bucles, el FOR se suele utilizar cuando sabemos seguro el número de veces
que queremos que se ejecute.
 Sintaxis: for (inicialización; condición; Ejemplo: for (let i=0;i<=10;i++) {
actualización) { document.write(i)
//sentencias a ejecutar document.write("<br>")
en cada iteración
}
}

 También se puede hacer descendente: for (let i=20;i>=0;i--) {

document.write(i)
document.write("<br>")
}

*Ejemplo 8C

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts
Ejercicio 13 JavaScript
Realiza un script que pida números hasta que se escriba “cancelar”. Si no es un número deberá indicarse
con un «alert» y seguir pidiendo. Al salir con “cancelar” deberá indicarse la suma total de los números
introducidos. (Realiza el ejercicio con el bucle do while)

Ejercicio 14 JavaScript
Realizar una página con un script que calcule el valor de la letra de un número de DNI (Documento
nacional de indentidad).
• Para calcular la letra del DNI, debes usar la fórmula: resto = numero % 23;
• Con el resultado, debes asignarlo a una letra de la siguiente forma :
• Ver ayuda ejercicio para definir las letras.

Ejercicio 15 JavaScript
Crea un script que escriba los números del 1 al 500, que indique cuales son múltiplos de 4 y de 9. (Múltiplo
de 4  numero % 4 = 0)
Nota: No olvides añadir alguna etiqueta HTML indicando lo que vas haciendo.

IMPORTANTE: Guardaremos todos los Ejercicios

en una carpeta Indicando el nombre del ejercicio. — Sintaxis HTML
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Estructuras de control)

 Instrucciones break y continue
 Existen dos instrucciones que se pueden usar en de las distintas estructuras de control y principalmente en los
bucles, que te servirán para controlar dos tipos de situaciones:
 break: Significa detener la ejecución de un bucle y salirse de él.
 continue: Sirve para detener la iteración actual y volver al principio del bucle para realizar otra iteración,
si corresponde. for (i=0;i<10;i++){
document.write (i)
escribe = prompt("dime si continuo preguntando...", "si")
if (escribe == "no") {
break;
}
}

var i=0
while (i<7){
incrementar = prompt("La cuenta está en " + i + ", dime si incremento", "si")
if (incrementar == "no") {
continue;
} *Ejemplo 9a
i++
} — Sintaxis JavaScript
1.4. Sintaxis JavaScripts
Ejercicio Guiado JavaScript

Crea un bucle for, en el que la i vaya desde 1 hasta mil, pero crea una instrucción que si i = 333 corte el
bucle.
Bucle
Desde 1…. 1000

Cortar….
333

IMPORTANTE: Guardaremos todos los Ejercicios

en una carpeta Indicando el nombre del ejercicio. — Sintaxis HTML
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Estructuras de control)

 Bucles anidados
 Anidar un bucle consiste en meter ese bucle dentro de otro.
 La anidación de bucles es necesaria para hacer determinados procesamientos un poco más
complejos que los que hemos visto en los ejemplos anteriores.
 Si en vuestra experiencia como programadores los habéis anidado un bucle todavía, tener
certeza que más tarde o temprano os encontraréis con esa necesidad.
 Ejemplo: for (i=0;i<10;i++){
for (j=0;j<10;j++) {
document.write(i + "-" + j)
}
}
 ¿Cómo funciona el ejemplo?
 Se inicializa el primer bucle, con lo que la variable i valdrá 0 y a continuación se inicializa el segundo
bucle, con lo que la variable j valdrá también 0.
 En cada iteración se imprime el valor de la variable i, un guion ("-") y el valor de la variable j, como las dos
variables valen 0, se imprimirá el texto "0-0" en la página web.
 El bucle que está anidado (más hacia dentro) es el que más veces se ejecuta.
*Ejemplo 9b — Sintaxis JavaScript
1.4. Sintaxis JavaScripts
Ejercicio Guiado JavaScript

Vamos a realizar todas las tablas de multiplicar desde el 1 hasta el 9.

Tabla del 1 Tabla del 2

Tabla del 3
1x1 = 1
1x2 = 2 Tabla del 4
1x3 = 3
Tabla del 5
1x4 = 4
1x5 = 5 Tabla del 6
1x6 = 6
1x7 = 7 Tabla del 7
1x8 = 8 Tabla del 8
1x9 = 9
1x10 = 10 Tabla del 9

IMPORTANTE: Guardaremos todos los Ejercicios

en una carpeta Indicando el nombre del ejercicio. — Sintaxis HTML
1.4. Sintaxis JavaScripts
Ejercicio 17 JavaScript
Realiza un script que imprima 14 resultados aleatorios de una quiniela 1 X 2.
Resultado 1: 1
Resultado 2: X
Resultado 3: 2
….
Nota: Para sacar números aleatorios entre 1 y tres, debes poner  num = Math.floor(Math.random() * 3);
Los resultados posibles serán:
1  Poner un 1
2  Poner una x
3  Poner un 2

Nota: No olvides añadir alguna etiqueta HTML indicando lo que vas haciendo.

IMPORTANTE: Guardaremos todos los Ejercicios

en una carpeta Indicando el nombre del ejercicio. — Sintaxis HTML
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Funciones)

 ¿Qué es una función?
 Podemos ver una función como una serie de instrucciones que englobamos dentro de un
mismo proceso.
 Este proceso se podrá luego ejecutar desde cualquier otro sitio con solo llamarlo.
 Por ejemplo, en una página web puede haber una función para cambiar el color del fondo y
desde cualquier punto de la página podríamos llamarla para que nos cambie el color cuando lo
deseemos.
 Se utilizan constantemente, no sólo las que escribes tú, sino también las que ya están definidas
en el sistema, pues todos los lenguajes de programación suelen tener un montón de funciones
para realizar procesos habituales, como por ejemplo obtener la hora, imprimir un mensaje en la
pantalla o convertir variables de un tipo a otro.
 Ya hemos usado algunas  document.write() en realidad estábamos llamando a la función
write() asociada al documento de la página, que escribe un texto en la página.
 Ahora vamos a ver como crear funciones y como usar nuestras propias funciones…

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Funciones)

 ¿Cómo crear una función?
 La función debe definirse con la siguiente sintaxis:

function nombrefuncion (){ function escribirBienvenida(){

instrucciones de la función document.write("<H1>Hola a
... todos</H1>")
} }

 Primero se escribe la palabra function, reservada para este uso.

 Seguidamente se escribe el nombre de la función, que como los nombres de variables puede tener
números, letras y algún carácter adicional como en guion bajo.
 Después se colocan los paréntesis de apertura y cierre () , que ya explicaremos para que son.
 A continuación se colocan entre llaves las distintas instrucciones de la función.
 Las llaves en el caso de las funciones no son opcionales, además es útil colocarlas siempre como se
ve en el ejemplo, para que se reconozca fácilmente la estructura de instrucciones que engloba la
función.

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Funciones)

 ¿Cómo llamamos a una función?
 Para ejecutar una función la tenemos que invocar en cualquier parte de la página. Con eso
conseguiremos que se ejecuten todas las instrucciones que tiene la función entre las dos llaves.

 Para ejecutar la función utilizamos su nombre seguido de los paréntesis. Por ejemplo, así
llamaríamos a la función escribirBienvenida() que acabamos de crear.

function escribirBienvenida(){
document.write("<H1>Hola a
escribirBienvenida();
todos</H1>")
}

 Nota: Existen muchas cosas adicionales que debemos conocer de las funciones, como el paso de
parámetros o los valores de retorno.

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Funciones)

 ¿Dónde incluimos el código de las funciones?
 Para ejecutar una función la tenemos que invocar en cualquier parte de la página. Con eso
conseguiremos que se ejecuten todas las instrucciones que tiene la función entre las dos llaves.
 Existen dos opciones posibles para colocar el código de una función:
 Colocar la función en el mismo bloque de script: En concreto, la función se puede definir en el bloque <SCRIPT>
donde esté la llamada a la función, aunque es indiferente si la llamada se encuentra antes o después del código
de la función, dentro del mismo bloque <SCRIPT>.
 Colocar la función en otro bloque de script: También es válido que la función se encuentre en un bloque
<SCRIPT> anterior al bloque donde está la llamada.
<SCRIPT> <SCRIPT>
function miFuncion(){ miFuncion()
//hago algo... function miFuncion(){
document.write("Esto va bien") //hago algo...
} document.write("Esto va bien")
</SCRIPT> }
…. </SCRIPT>
<SCRIPT> *Ejemplo 10a
miFuncion();
</SCRIPT> — Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Funciones)

 Uso de parámetros
 Los parámetros se usan para mandar valores a las funciones.
 Una función trabajará con los parámetros para realizar las acciones. Por decirlo de otra manera, los
parámetros son los valores de entrada que recibe una función.
 Ejemplo: una función que realizase una suma de dos números tendría como parámetros a esos dos
números.
 Los dos números son la entrada, así como la salida sería el resultado de la suma, pero eso lo veremos
más tarde.
 Ejemplo:
 Para mostrar un mensaje de bienvenida en la página web como el de antes pero con un saludo,
usaremos un parámetros:
function escribirBienvenida(nombre){
document.write("<H1>Hola " + nombre + "</H1>") escribirBienvenida(“Juan”);
}

*Ejemplo 10b — Sintaxis JavaScript

1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Funciones)

 Uso de parámetros
 Los parámetros pueden recibir cualquier tipo de datos, numérico, textual, boleano o un objeto.
 NO especificamos el tipo del parámetro, por eso debemos tener un cuidado especial al definir las acciones que
realizamos dentro de la función y al pasarle valores, para asegurarnos que todo es consecuente con los tipos de datos
que esperamos tengan nuestras variables o parámetros.

 ¿puede una función recibir varios parámetros?

 Una función puede recibir tantos parámetros como queramos y para expresarlo se colocan los nombres de los
parámetros separados por comas, dentro de los paréntesis.

function escribirBienvenida(nombre,colorTexto){
document.write("<FONT color='" + colorTexto + "'>") var miNombre = "Pepe"
document.write("<H1>Hola " + nombre + "</H1>") var miColor = "red"
document.write("</FONT>") escribirBienvenida(miNombre,miColor)
}

*Ejemplo 10c — Sintaxis JavaScript

1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Funciones)

 Uso de parámetros
 Los parámetros se pasan por valor
 Tenemos que saber que los parámetros de las funciones se pasan por valor.
 Esto quiere decir que estamos pasando valores y no variables.
 En la práctica, aunque modifiquemos un parámetro en una función, la variable original que habíamos pasado no
cambiará su valor.
 Ejemplo: function pasoPorValor(miParametro){
var miVariable = 5
miParametro = 32 pasoPorValor(miVariable)
document.write("he cambiado el valor a 32") document.write ("el valor de la variable es: " +
} miVariable)

NOTA:
- La función que recibe un parámetro y que modifica el valor del parámetro asignándole el valor 32.
- La variable, que inicializamos a 5 y posteriormente llamamos a la función pasándole esta variable como parámetro.
Como dentro de la función modificamos el valor del parámetro podría pasar que la variable original cambiase de
valor, pero como los parámetros no modifican el valor original de las variables, ésta no cambia de valor.
- Una vez ejecutada la función, al mostrar el valor de miVariable se imprimirá el número 5, (valor original de la
variable), en lugar de 32 que era el valor con el que habíamos actualizado el parámetro.
En Javascript sólo se pueden pasar las variables por valor.

*Ejemplo 10d — Sintaxis JavaScript

1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Funciones)

 Uso de parámetros - Devolución de resultados
 Las funciones pueden devolver valores, a través de la sentencia return.
 Es una de las utilidades más esenciales de las funciones, sin esta posibilidad, no tendrían sentido usar funciones.
 Ejemplo: Una función recibe dos números y devuelve como resultado la suma de los mismos:

function funcionSumar(valor1, valor2){

var resultado = valor1 + valor2;
return resultado;
}

 Ahora, para recibir la información de la función debemos escribir el siguiente código:

var num1 = 3;
var num2 = 4;
var sumar = funcionSumar(valor1,valor2);
document.write(“Resultado suma:” + sumar);

*Ejemplo 10e — Sintaxis JavaScript

1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Funciones)

 Uso de parámetros - Devolución de resultados
 Una de las limitaciones que tienen las funciones es que solo pueden devolver un dato.
 Pero, dentro de la función nosotros podemos realizar diferentes acciones para recibir el valor que nosotros deseemos
en base a condiciones, bucles…:

function multipleReturn(numero){
var resto = numero % 2;
if (resto == 0){
return 0;
}else{
return numero;
}
}

var num1 = 2;
var resultado1 = multipleReturn(num1);
var num2 = 3;
var resultado2 = multipleReturn(num2);

*Ejemplo 10f — Sintaxis JavaScript

1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Funciones)

 Uso de parámetros – Ámbito de las variables
 Dentro de las funciones podemos declarar variables.
 Sobre este asunto debemos de saber que todas las variables declaradas en una función son locales a esa función, es
decir, sólo tendrán validez durante la ejecución de la función.
 Si declaramos variables que tengan el mismo nombre que una variable global a la página. Entonces, dentro de la
función, la variable que tendrá validez es la variable local y fuera de la función tendrá validez la variable global a la
página.
 Si no declaramos las variables en las funciones se entenderá por javascript que estamos haciendo referencia a una
variable global a la página, de modo que si no está creada la variable la crea, pero siempre global a la página en lugar de
local a la función.

function variables_glogales_y_locales(){
var variableLocal = 23
variableGlobal = "qwerty"
}

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Funciones integradas JavaScript

 eval(string)
 Esta función recibe una cadena de caracteres y la ejecuta como si fuera una sentencia de
Javascript.
 parseInt(cadena,base)
 Recibe una cadena y una base. Devuelve un valor numérico resultante de convertir la cadena en
un número en la base indicada.
 parseFloat(cadena)
 Convierte la cadena en un número y lo devuelve.
 escape(carácter)
 Devuelve un el carácter que recibe por parámetro en una codificación ISO Latin 1.
 unescape(carácter)
 Hace exactamente lo opuesto a la función escape.
 isNaN(número)
 Devuelve un boleano dependiendo de lo que recibe por parámetro. Si no es un número devuelve
un true, si es un numero devuelve false.

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Arrays)

 ¿Qué es un array?
 Va a ser nuestra primera estructura compleja de datos.
 Es como una variable donde podemos introducir varios valores, en lugar de solamente uno como ocurre con la
variables normales.
 Los arrays nos permiten guardar varias variables y acceder a ellas de manera independiente, es como tener una
variable con distintos compartimentos donde podemos introducir datos distintos. Para ello utilizamos un índice que
nos permite especificar el compartimiento o posición a la que nos estamos refiriendo.
 El primer paso para utilizar un array es crearlo. Y para ello usaremos la sintaxis:

var miArray = new Array();

 Esto crea un array en la página que esta ejecutándose. El array se crea sin ningún contenido, es decir, no tendrá
ninguna casilla o compartimiento creado.
 También podemos crear el array Javascript especificando el número de compartimentos que va a tener.

var miArray = new Array(10);

— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Arrays)

 Elementos a tener en cuenta
 Es importante que nos fijemos que la palabra Array en código Javascript se escribe con la primera letra en
mayúscula. Como en Javascript las mayúsculas y minúsculas si que importan, si lo escribimos en minúscula no
funcionará.
 Tanto se indique o no el número de casillas del array javascript, podemos introducir en el array cualquier dato.
 Si la casilla está creada se introduce simplemente y si la casilla no estaba creada se crea y luego se introduce el dato,
con lo que el resultado final es el mismo.
 Esta creación de casillas es dinámica y se produce al mismo tiempo que los scripts se ejecutan. En otros lenguajes es
recomendable el indicar le número de casillas que tiene el array, con lo que nosotros intentaremos siempre crear los
array indicando el número de espacios a utilizar.
 Veamos a continuación cómo introducir valores en nuestros arrays:

var miArray = new Array(10); miArray[0] = 290

miArray[1] = 97
miArray[2] = 127

 Se introducen indicando entre corchetes el índice de la posición donde queríamos guardar el dato. En este caso
introducimos 290 en la posición 0, 97 en la posición 1 y 127 en la 2.
 Los arrays en Javascript empiezan siempre en la posición 0, por lo que un array de 10 posiciones va desde la posición
0 hasta la 9.
*Ejemplo 11a — Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Arrays)

 Recorrer un array
 Un array se puede recorrer mediante un bucle que vaya tratando cada una de sus posiciones.
 Para ello debemos indicar el índice del array con una variable que vaya aumentando o disminuyendo según queramos
recorrer el array:

var miArray = new Array(10); //Cargamos el array: for (i=0;i<10; i++){

miArray[0] = 290 document.write (“<br>El valor del array en la
miArray[1] = 97 posición “ + i + “ es: “ + miArray[i]);
miArray[2] = 127 }
miArray[3] = 90
miArray[4] = 77
miArray[5] = 12
miArray[6] = 70
miArray[7] = 17
miArray[8] = 127
miArray[9] = 11

 Se introducen indicando entre corchetes el índice de la posición donde queríamos guardar el dato. En este caso
introducimos 290 en la posición 0, 97 en la posición 1 y 127 en la 2.
 Los arrays en Javascript empiezan siempre en la posición 0, por lo que un array de 10 posiciones va desde la posición
0 hasta la 9.
*Ejemplo 11b — Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Arrays)

 Tipos de datos en array
 En las casillas de los arrays podemos guardar datos de cualquier tipo.
 Podemos ver un array donde introducimos datos de tipo carácter:

miArray[0] = “hola”
miArray[1] = “a”
miArray[2] = “todos”

 Incluso, en Javascript podemos guardar distintos tipos de datos en las casillas de un mismo array:

miArray[0] = “Rafa"
miArray[1] = 1275
miArray[2] = 0.78
miArray[3] = true

*Ejemplo 11c
— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Arrays)

 Declaración e inicialización resumida de Arrays
 Existe una resumida de declarar un array y cargar valores en un mismo paso.
 Este es el código:

var arrayRapido = [12,45,"array inicializado en su declaración"]

 Como se puede ver, se está definiendo una variable llamada arrayRapido y estamos indicando en los corchetes varios
valores separados por comas.
 Esto es lo mismo que haber declarado el array con la función Array() y luego haberle cargado los valores uno a uno.

*Ejemplo 11d
— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Arrays)

 Función para saber la longitud del Arrays
 Todos los arrays en javascript, aparte de almacenar el valor de cada una de sus casillas, también almacenan el número
de posiciones que tienen.
 Para ello utilizan una propiedad del objeto array, la propiedad length.
 Para acceder a una propiedad de un objeto se ha de utilizar el operador punto. Se escribe el nombre del array que
queremos acceder al número de posiciones que tiene, sin corchetes ni paréntesis, seguido de un punto y la palabra
length:

var miArray = new Array()

miArray[0] = 155
miArray[1] = 499
miArray[2] = 65

document.write("Longitud del array: " + miArray.length);

*Ejemplo 11e
— Sintaxis JavaScript
1.4. Sintaxis JavaScripts

Conceptos de la Sintaxis (Arrays)

 Función para saber la longitud del Arrays
 Es muy habitual que se utilice la propiedad length para poder recorrer un array por todas sus posiciones.
 Para ilustrarlo vamos a ver un ejemplo de recorrido por este array para mostrar sus valores.

for (i=0; i< miArray.length; i++){

document.write(miArray[i])
}

 Sabiendo el tamaño del array podemos recorrer cada una de sus posiciones sin saber con exactitud cuantas
posiciones tiene el array.

*Ejemplo 11e
— Sintaxis JavaScript
Final
Módulo 3