1

CREACIÓN, PROGRAMACIÓN Y DISEÑO DE PÁGINAS WEB CON HTML5 Y CSS3

Fundamentos de javascript
ÍNDICE

1 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 1.10

Introducción Introducción Fundamentos de

a javascript programación

PA R T E I
1.1 Introducción
C O M E N Z A R
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

SOFTWARE NECESITARÁS…

NAVEGADORES EDITOR DE CÓDIGO

Mozilla Visual Studio

Chrome Ms Edge Safari Notepad++
Firefox Code
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

VÍDEO
Usando los navegadores
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

1989

World Wide Web

Tim Berners-Lee
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

1980 1989
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

1980 1989 1990

Robert Cailliau
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

%!
% Ejemplo de código
/Courier findfont
En aquella época la mayoría de la gente utilizaba TeX y 20 scalefont
PostScript, lenguajes demasiado complicados teniendo % Cournier tamaño 20
en cuenta que debían ser leídos por todo tipo de Newpath
computadoras. Para llegar a un mayor número de 72 72 moveto
ordenadores y por tanto de usuarios se idearon tanto un % Cursor en la esquina
lenguaje de intercambio (HTML), como el protocolo de % inferior izquierda (72,72)
red (HTTP) más simples. (¡Hola mundo!) show
Showpage

Ejemplo de PostScript
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

HyperText Language

HT M L
Mark-up

Ésta se presenta como una aplicación de SGML (Standard Generalized Markup Language), un lenguaje muy general para
definir el formato de documentos.
El sistema se populariza y se convierte en un medio y un objetivo del mercado.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

La batalla de los navegadores

En 1995 Netscape es
considerado como el
estándar de facto para
los navegadores web,
con sólo algunos
competidores.
N E T S C A P E

Ese año, la empresa Más tarde, en su segunda versión, Microsoft libera su

Microsoft, consciente navegador del sistema operativo. Esto significa que la
del éxito de Netscape, aplicación puede funcionar independientemente de
lanza Windows 95 Windows. Al mismo tiempo, comienza una serie de
que incorpora la estrategias comerciales para ganarse el mercado, como
primera versión, de incluir su propia página web en la opción "Inicio" (página
Internet Explorer. predeterminada que se carga automáticamente).
W I N D O W S
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

Las consecuencias son las siguientes…

Agujeros de Los errores quedan Aparición del código

seguridad sin solventar propietario
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

En pocos años Internet Explorer recorta ventaja a Netscape (que se dedica casi en exclusiva al desarrollo de su
browser) hasta superarla en porcentaje de usuarios que utilizan su navegador.
En esos momentos la empresa de Bill Gates es líder del mercado de la informática llegando a ser acusada de
monopolizar el mercado con su sistema operativo Windows.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

El código
propietario
¿Cómo repercute en los
usuarios?
Esto suponía, y aún supone (pues cambiar de
software es una elección personal) no acceder a
todos los contenidos de manera correcta. Buena
parte de los internautas no eligen el navegador, sino
que de alguna manera le viene "impuesto" (Microsoft
puso mucha voluntad en ello, y aún lo hace).
Como resultado nos encontramos con que cada
internauta debe tomar partido por alguno de los
navegadores, y eso considerando que sea
conocedor de la situación y que tenga los
conocimientos necesarios para elegir.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

¿Y en los profesionales?
Para el diseñador el problema era especialmente
grave, y para las empresas desarrolladoras aún más.
Ante esta situación, no quedaba otro remedio que
hacer el trabajo por duplicado para que los sitios
webs se vieran en, al menos, los dos navegadores
más importantes, duplicando así el coste para las
empresas y el trabajo para diseñadores y
desarrolladores.
Obviamente, los costes de mantenimiento también
eran notablemente más altos.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

E s t o suponía:

N E C E S I D A D D E
U N D O B L E I N V E R T I R
M AYO R C O S T E D E C O N S TA N T E M E N T E
T R A B A J O D E
M A N T E N I M I E N T O E N D I S E Ñ O Y
P R O D U C C I Ó N
D E S A R R O L LO
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

EL COMPROMISO

Bajo el nombre W3C se encuentra el Consorcio World Wide Web, una asociación internacional
formada por organizaciones que trabajan para desarrollar estándares web.

Su misión es "guiar la Web" para conseguir su máximo desarrollo. Lo hacen basándose en

protocolos y pautas que aseguren su crecimiento futuro.
Su trabajo se fundamenta, pues, en la creación de estándares Web y en pautas que hagan
compatibles entre sí las tecnologías Web más destacadas.

La labor de la W3C ha originado el término "interoperatibilidad Web". Con él se refieren a la

publicación de estándares abiertos para lenguajes Web y protocolos.

El compromiso adoptado por este organismo ha sido esencial para evitar la fragmentación del
mercado y, por tanto, de la Web.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

¿Qué es el proyecto

WASP? [Link]

La importancia de esta entidad radica en que fue

capaz de realizar lo que, años antes, parecía
imposible: convencer a las principales compañías
(Microsoft y Netscape entre ellas) de que
admitiera, de manera precisa y completa, las
especificaciones (estándares del W3C).

Es más, "El proyecto" es el verdadero artífice de

los estándares Web al dar a las recomendaciones
del W3C identidad de estándares.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

(absorbida por Adobe) (European Computer Manufacturers Association)

INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

2007

Web responsive
En 2007 Apple introduce en el mercado su famoso iPhone. A partir de este momento
comenzamos a considerar los móviles como verdaderos dispositivos de acceso a la
Web.

Los diseños Web necesitan dar respuesta a nuevas pantallas, de menor resolución y
tamaño y diferente proporciones. La Web necesita ser flexible.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

Aunque la tecnología o el concepto Media Query es casi tan antiguo como la propia Web, es en
este momento cuando su desarrollo adquiere especial importancia.

Media Queries es un módulo CSS3 que permite adaptar la representación del contenido a
características del dispositivo como la resolución de pantalla.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

Esta solución nos ofrece varias ventajas:

• Menores costes en el desarrollo, puesto que no trabajamos con diferentes versiones sino con
una sola trabajada con una metodología específica desde el comienzo del desarrollo.
• Mayor facilidad de mantenimiento.
• Tranquilidad de cara a la aparición de nuevos dispositivos (el diseño se adaptará él solo de
acuerdo con el tamaño de sus pantallas).
• Mejorar el posicionamiento SEO de la web, dado que trabajamos con una única versión para
todos los dispositivos.
• Mejorar la experiencia de usuario, ya que tenemos un único diseño principal que mantendrá la
coherencia con la visualización desde cualquier dispositivo.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

¿En qué consiste el

Mobile first?
Se trata de un movimiento o una tendencia en el
diseño que pone en primer lugar a los dispositivos
móviles. A la hora de elaborar una página web, un
contenido o un software de cualquier tipo, tiene en
mente siempre a los dispositivos smart como
tablets o teléfonos móviles.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

Responsive Web VS Mobile first

Responsive
web

Mobile First
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

1998

Estándares
Q u é s o n y p o r q u é t e n e r l o s
e n c u e n t a

Sin el apoyo de organismos y empresas, el W3C

llamaba recomendaciones a una serie de normas
básicas que permitían, a los creadores de contenidos y
diseñadores, realizar su trabajo sin preocuparse de en
qué sistema o navegador iba a ser visto. Desde 1998,
estas recomendaciones se denominan estándares.

A efectos prácticos, diseñar con estándares supone

aplicar esas normas básicas independientemente de la
metodología de trabajo que se utilice.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

COMPATIBILIDAD DIRECTA COMPATIBILIDAD INVERSA

Cuando creamos y diseñamos contenidos Significa realizar páginas que son válidas
web que pueden funcionar en todos los para navegadores antiguos. Su desarrollo
sistemas operativos, navegadores, es costoso ya que, como hemos visto,
dispositivos actuales y del futuro decimos requiere de la realización de más de una
que nuestro sitio web. versión de determinados documentos.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

Necesidades y ventajas

D I S E Ñ O S PA R A PÁ G I N A S M Á S USABILIDAD ACCESIBILIDAD
EL FUTURO ECONÓMICAS El usuario o usuaria Aseguraremos el
Los fabricantes se Con menor cantidad pasa a tener el acceso a todos los
han dado cuenta de de código que control de la usuarios.
la importancia de los redunda en menores apariencia del
estándares y los tiempos de carga y contenido:
adoptan. Estamos facilita la gestión, maquetación en
garantizando una mantenimiento y columnas, tamaño y
viabilidad a largo actualización. color de fuentes...
plazo de nuestros adaptándola, así, a
trabajos. sus necesidades.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

Llegados a este punto, hay que tener en cuenta también que diseñar con
estándares economiza código. Veamos dos ejemplos:

<p>Diseñar con estándares es <P><FONT SIZE="-1" COLOR="RED">Diseñar con estándares es

<strong>mejor<strong/></p> <B><FONT COLOR="BLACK">mejor</FONT><B/></FONT></P>

ESTÁNDAR NO ESTÁNDAR
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

Los estándares web ayuda a mejorar

porque aportan…

Usabilidad Accesibilidad
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

HTML5 es la última versión de HTML. El término representa dos

conceptos diferentes:
Se trata de una nueva versión de HTML, con nuevos
elementos, atributos y comportamientos.
Contiene un conjunto más amplio de tecnologías que permite
a los sitios Web y a las aplicaciones ser más diversas y de gran
alcance. A este conjunto se le llama HTML5 y amigos (html, css,
javaScript), a menudo reducido a HTML5.
La versión definitiva salió en octubre de 2014.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

SEMÁNTICA CONECTIVIDAD SIN CONEXIÓN Y ALMACENAMIENTO

Permite describir con Permite comunicarse con el Permite a las páginas web almacenar
mayor precisión cual servidor de formas nuevas e datos localmente en el lado del cliente y operar sin
es su contenido. innovadoras. conexión de manera más eficiente.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

M U LT I M E D I A GRÁFICOS Y EFECTOS RENDIMIENTO E

2D/3D INTEGRACIÓN
Nos otorga un excelente
soporte para utilizar Proporciona una amplia gama de Proporciona una mayor
contenido multimedia como nuevas características que se ocupan optimización de la
lo son audio y video de los gráficos en la web como lo velocidad y un mejor uso
nativamente. son canvas 2D, WebGL, SVG, etc. del hardware.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

ACCESO AL DISPOSITIVO CSS3

Proporciona APIs para el uso de varios Nos ofrece una nueva gran
compomentes internos de entrada y variedad de opciones para
salida de nuestro dispositivo. hacer diseños más sofisticados.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

HTML5, igual que XHTML o XML se basan en etiquetas o

marcas que, en la mayoría de los casos, constan de una
apertura (<etiqueta>) y de un cierre (</etiqueta>).
El texto comprendido entre las dos etiquetas formará
parte del elemento estructural que define dicha etiqueta.
En este ejemplo:

<p>Esto es un párrafo</p>
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

Nombre del atributo

Atributo
Contenido
Valor

<html lang=“es”> … </html>

Apertura Cierre
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

HTML es un código con significado

Todas las etiquetas tienen un significado. <p> Significa párrafo -como
hemos visto- y <ul> abre una lista no numerada, por poner dos ejemplos.

No sirven para cambiar el aspecto. HTML es un código semántico.

INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

Con HTML creamos estructura en las páginas

Con HTML estamos creando una estructura donde colocar los contenidos. HTML nos aporta
marcado que nos va a permitir crear unidades estructurales bien conocidas por todos, como
puede ser un párrafo, una cita, listas de diferentes tipos. Nos aporta también una estructura
dada consistente en una cabecera y un cuerpo de la información.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript
CULTURA WEB Luis González

¿Qué es un
Sitio Web?
Es un conjunto de páginas web que
enlazadas mediante hiperenlaces o
hipertextos.
Constituyen un conjunto homogéneo al
cual se puede acceder a través de su
dirección o URL a partir de su página de
Inicio.
Normalmente se considera un sitio web
a un conjunto de páginas integradas
con una temática uniforme y una
apariencia o estética homogénea.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript
CULTURA WEB Luis González

Nuevos medios y
Archivos y directorios
técnicas
Desde un punto de vista técnico, un sitio Web suele estar
compuesto por múltiples archivos que nuestro navegador descarga.
Aunque veamos un documento integrado, una pantalla única, lo
normal es que una página Web necesite de diferentes documentos
para su composición.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript
CULTURA WEB Luis González

Nuevos medios y
técnicas
En un sitio web, todos estos archivos y directorios
tendrán una ubicación en nuestro ordenador y en el
servidor (cuando le demos acceso a Internet) al que nos
referiremos con el término informático "directorio raíz" o
raíz del sitio (root).

Independientemente, podremos usar otros

directorios en el que incluiremos otros
documentos que necesitemos para la construcción
del sitio, pero no forman parte de él.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

VÍDEO
Creando un sitio
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

CSS (Cascading Style Sheet) es un mecanismo para dar estilo

a documentos HTML y XML, que consiste en reglas simples a
través de las cuales se establece cómo se va a mostrar un
documento en la pantalla, o cómo se va a imprimir, o incluso
cómo va a ser pronunciada la información presente en ese
documento a través de un dispositivo de lectura.
Esta forma de descripción de estilos ofrece a los
desarrolladores control total sobre el estilo y formato de sus
documentos separando

contenido y presentación.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

Esta es la estructura tipo de un selector CSS:

Selector Declaración

main{
width:960px;
}
Propiedad Valor
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

VÍDEO
Aplicando CSS
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

JavaScript® es el lenguaje interpretado orientado

a objetos desarrollado por Netscape que se utiliza
en millones de páginas web y aplicaciones de
servidor en todo el mundo.
JavaScript de Netscape es un superconjunto del
lenguaje de scripts estándar de la edición de
ECMA-262 3 (ECMAScript) que presenta sólo
leves diferencias respecto a la norma publicada.
Con Javascript podrás crear contenido de
actualización dinámica, controlar multimedia,
animar imágenes, comprobar datos de formularios,
hacer cálculos matemáticos prácticamente todo lo
demás.
INTRODUCCIÓN La evolución de la Web Estándares web HTML5 y CSS3 JavaScript

VÍDEO
Mostrando un ejemplo sencillo de Javascript
1.2 Introducción
a javascript
C O M E N Z A R
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

Hay quien prefiere referirse al lenguaje en cuestión como ECMAScript a

JavaScript. Es más, debemos sabe que JavaScript es una implementación que
realizó la empresa Netscape del estándar ECMAScript.
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

EL MODELO

En una arquitectura cliente-servidor existe un reparto de las tareas, desempeños o roles

entre los diferentes computadoras o dispositivos. El cliente realiza peticiones a otro
programa y es el servidor el que da respuesta ofreciendo el recurso o información
solicitada.

Prácticamente toda la comunicación que se produce entre dispositivos en la actualizad usa

este modelo.
Los ejemplos más claros son el correo electrónico o la Web.
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

Ejemplo://
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

Por supuesto las páginas web por las que navegamos también funcionan gracias al
modelo cliente-servidor.
Los lenguajes que se usan en dichas webs podemos diferenciarlos en dos tipos:

L O S Q U E L O S Q U E S E
N E C E S I TA N E L E J E C U TA N
S E R V I D O R PA R A D I R E C TA M E N T E E N
F U N C I O N A R E L C L I E N T E

Pertenece al segundo tipo. No necesitamos

el uso de servidores para que funcione. Tan
solo un navegador de Internet.
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

No se tienen en
Se distinguen las No hace falta acabar
cuenta los espacios Se pueden incluir
mayúsculas y cada sentencia con
en blanco y las comentarios.
minúsculas. punto y coma (;)
nuevas líneas.
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

Principales elementos de la gramática de JavaScript

VARIABLE: nombre dado a un valor cambiante

O P E R A D O R E S : caracteres o conjunto de caracteres que sirven para calcular o comparar

E X P R E S I O N E S : combinación de elementos (variables, operadores…) que evalúan un

resultado.

S E N T E N C I A S : Instrucciones que contienen diferentes elementos de la gramática de JavaScript.

Se suele terminar con punto y coma (;) Aunque no es obligatorio a no ser que las expresiones estén
en la misma línea.

O B J E T O S : estructura contenedora de valores, procedimientos y funciones. A las funciones de

un objeto se le suele llamar método.

F U N C I O N E S O M É T O D O S : conjunto de sentencias que realizan alguna acción. Puede

contener valores entrantes o parámetros.
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

<html>
<head>
Incluir JavaScript </head>

Aunque habitualmente JavaScript se incluye dentro de

<body>
<head> es posible hacerlo en cualquier otra parte de un
documento HTML.
</body>
</html>
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

Igual que CSS que ocurre con CSS podemos incorporar Javascript de tres maneras diferentes:

E N L Í N E A , dentro de una etiqueta html como valor de una propiedad evento.

<button onclick=“alert(‘¡Hola Mundo!’);”>Accionar</button>

E N E L D O C U M E N T O , entre las etiquetas:

<script type=“application/javascript"> […] </script>
Como hemos dicho antes, no necesariamente en <head>

E N U N D O C U M E N T O E X T E R N O , enlazado mediante:
<script type=“application/javascript" src=“[Link]"></script>
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

El modo de inclusión “en línea” es una método

poco utilizado de manera única, aunque puede
servir entre otras usos para llamar a funciones
definidas con alguno de los otros dos métodos.

<button onclick=“abreMenu()”>Abrir menú</button>

I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

<!DOCTYPE html>
Incluir JavaScript <html lang="es">
<head>
Emplearemos el método entre las etiquetas
<script></script> para pequeño de código o cuando se <title>Saludo</title>
quieren incluir instrucciones específicas en un documento </head>
concreto que maticen o concreten instrucciones generales
<body>
para el sitio completo.
Su principal desventaja es que solo afecta al documento en <p id="saludando"></p>
el que está incluido. <script>
[Link]("saludando")
En cuanto a al atributo type, en la actualidad no es necesario
especificar la versión de javascript que usamos como ocurría .innerHTML = "Bienvenido al curso.";
antes. </script>
En la rfc4329 Se establece como posibles
</body>
application/javascript o application/ecmascript.
En cualquier caso en HTML5 no es necesario por defecto. </html>
En el se escribe la frase “Bienvenido al curso” dentro de un párrafo.
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

<!DOCTYPE html>
<html lang="es">
<head> Documento “[Link]”
<title>Saludo</title>
<script type="application/javascript" function saludo(){
src="js/[Link]"></script> [Link]("saluda
</head> ndo").innerHTML = "Bienvenido al
<body onload="saludo()"> curso.";
<p id="saludando"></p> }
</body>
</html>
En este ejemplo se ejecuta la misma acción que en la pantalla anterior, pero
en esta ocasión JavaScript no se encuentra en el mismo documento, sino en
una hoja externa.
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

<script type="application/javascript" >

//Esto es un comentario de una línea.
/*Este comentario tiene varías líneas

Comentarios function saludo(){

[Link]("saludando").i
Puesto que ya sabes escribir tu primer código con nnerHTML = "Bienvenido al curso.";
Javascript, es el momento de sepas como crear
comentarios. Los comentarios son textos que la }
persona que programa puede ver, pero el navegador Además de para “comentar”, los comentarios
no interpreta, por lo tanto no afecta en el sirven para deshabilitar trozos de códigos
que no queremos usar, pero no queremos
funcionamiento del código. borrar como ocurre aquí con la función
saludo().*/

</script>
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

VÍDEO
Mostrando los diferentes métodos de inserción
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

P R E G U N T A

Selecciona la opción correcta

¿Qué método de inserción de JavaScript usaría si la programación debe
afectar a un sitio Web completo, evitando la redundancia de información
y recursos?

En línea

En el documento

En un archivo externo
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

Aunque en la actualidad todos los navegadores están preparados para

interpretar JavaScript podemos crear contenido alternativo para
aquellos que no pudieran leerlo, incluyendo la etiqueta <noscript>
después de la etiqueta <script>.

<script>
[Link]("saludando").innerHTML = "Bienvenido
al curso.";
</script>
<noscript>
<p> Estás viendo este texto porque tu navegador no puede
interpretar javaScript. </p>
</noscript>
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

Para desactivar JavaScript en el navegador es necesario acceder a la configuración de dicho

navegador, en el caso de Google Chrome hay que entrar en Privacidad y Seguridad, vamos a
Configuración de sitios, entramos en la sección de Contenidos y posteriormente en JavaScript.
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

VÍDEO
Mostrando como se deshabilita Javascript
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

Las variables son conceptos fundamentales en programación. Son espacios de memoria en los que
guardamos información. Lo que hacemos es dar nombre a un valor para poder reusarlo, actualizarlo o
simplemente registrarlo.
Estas son algunas de sus características:

Las variables Sí al declara una En JavaScript no

se pueden A la hora de variable se le es obligatorio
usar para Se denominan inicializar las
declararla es asigna también
guardar así porque su variables, ya
necesario un valor, se dice
cualquier tipo valor no es que se pueden
definir el tipo que la variable
de dato en constante. declarar por una
de variable. ha
JavaScript. sido inicializada. parte y
asignarles un
valor
posteriormente.
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

[…]
<p id="saludando"></p>
<script>
var valor;
valor = "Hola ¿cómo estámos?"
[Link]("saludando").innerHTML = valor;
</script>
[…]

En el siguiente ejemplo se declara la variable y posteriormente se le asigna un valor,

aunque es posible asignar un valor inicial, como en el caso siguiente.

[…]
<p id="saludando"></p>
<script>
var valor "Hola ¿cómo estámos?“;
[Link]("saludando").innerHTML = valor;
</script>
[…]
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

A partir de la versión 1.7 también puede usarse la instrucción let.

Esta instrucción permite declarar variables limitando su alcance (scope) al

bloque, declaración, o expresión donde se está usando a diferencia var
que sirve para definir una variable global o local en una función sin
importar el ámbito del bloque.

Nosotros a partir de ahora, preferentemente, usaremos let en lugar de var

cuyo uso tiende a desaparecer.
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

Sobre las variables, también es importante saber:

1 2 3
El nombre únicamente El primer carácter no No usar palabras
puede incluir letras, puede ser un dígito. reservadas porque
dígitos, o los símbolos $ generaría un error, por
y _. ejemplo: return, class, let
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

Otras características de las variables en JavaScript es que permite

declarar variables en múltiples líneas, como en el siguiente ejemplo:

let nombre = 'Carlos', apellidos = "Martínez López", edad = 25;

Aunque la declaración en diferentes líneas es visualmente más claro.

let nombre = 'Carlos‘;

let apellidos = "Martínez López“;
let edad = 25;

La siguiente opción también es posible:

let nombre = 'Carlos',

apellidos = "Martínez López",
edad = 25;
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

Pero, ¿por qué el nombre de “variable”?

Pues la respuesta es bien fácil, su valor puede cambiar, variar.

Valga el siguiente ejemplo:

let mensaje;
mensaje = '¡Buenos días!';
mensaje = '¡Buenos noches!'; // valor modificado
[Link](mensaje);

En este ejemplo el mensaje s muestra en la consola web

(o del intérprete JavaScript), que puedes desplegar
usando la tecla
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

VÍDEO
Uso de variables. Cómo usar la consola
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

P R E G U N T A

Selecciona la opción correcta

¿Podemos usar var delante del nombre de una variable para declararla?

Sí

No

Depende del navegador

I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

Si el valor de la variable puede cambiarse ¿Qué hacemos cuando

sabemos que el valor no va a cambiar?

En ese caso usaremos una constante, cuya valor es inmutable,

aunque a efectos prácticos podemos usar perfectamente let, lo
correcto sería usar const.

const diaD = '06.06.1945';

diaD = '07.06.1945';// Esto es un error, no debemos hacerlo
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

TIPOS DE

Podemos esquematizar los tipos de datos en JavaScript de la siguiente manera:

PRIMITIVOS OBJETOS A R R AY S
• String
• Number Dedicaremos una sección especial y extendida a los objetos
y Arrays más adelante.

• Bigint
• Boolean
• Symbol
• Null
• Undefined
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

String es una cadena de texto o caracteres. Debe ir siempre entre

comilla simple o doble.
PRIMITIVOS
• String let texto;
texto = 'Este sitio web utiliza cookies';
• Number texto = "¿Estás de acuerdo";

• Bigint También es posible usar comillas invertidas o Backticks. Este tipo de

• Boolean comillas permite la inclusión de variables y expresiones.

• Symbol alert( `dos mas dos es ${2 + 2}` ); //dos más dos es 4

• Null
Podemos escribir el carácter de comillas invertidas pulsando la tecla “alt” +
• Undefined las teclas “9” seguidas de “6”.
También puedes usar el acento grave que el teclado QUERTY español. L o
encontrarás a la derecha de la “P “
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

Number hace referencia a número enteros o punto flotante (floating

point).

PRIMITIVOS Recordemos que para representar un número decimal usaremos “.” y no “,”
como tradicionalmente hacemos en España y otros países-
• String
<script>
• Number
let num1 = 15;
• Bigint let num2 = 14.5;
alert( num1 + num2 ); //29.5
• Boolean
</script>
• Symbol
Como vemos en este ejemplo es posible realizar cálculos matemáticos
• Null usando operadores.
Junto con los números comunes, también podemos encontrar “valores
• Undefined numéricos especiales” como son Infinity, -Infinity y NaN.

NaN (not a number, no es un número) representa un valor imposible de

calcular, habitualmente por la combinación de tipo de datos
incompatibles.
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

BigInt se utiliza para representar y manipular valores que son

PRIMITIVOS demasiado grandes para ser representados por como Number.

• String Un valor BigInt se crea incluyendo n al final de un número entero:

• Number
const muyGrande = 9007199254740991n;
• Bigint
• Boolean Es muy poco habitual necesitar el uso de este tipo de datos. Number
suele cubrir nuestras necesidades cuando programamos en
• Symbol JavaScript. En cualquier caso en el siguiente enlace puedes encontrar
• Null más información.

• Undefined AC C E D E A E ST E E N L AC E PA R A M Á S
INFORMACIÓN
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

PRIMITIVOS
El tipo de datos Boolean solo tiene dos valores: true o false . Es
• String decir, define si un valor es correcto o verdadero, o no lo es.
• Number
• Bigint let seleccionado = true;
• Boolean
Aunque parezca una idea algo simple su utilidad es muy grande,
• Symbol
especialmente para hacer comprobaciones o comparaciones.
• Null
Más adelante veremos algunos ejemplos.
• Undefined
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

PRIMITIVOS
• String
• Number
• Bigint
El tipo symbol se utiliza para crear identificadores únicos para los
• Boolean
objetos.
• Symbol
• Null
• Undefined
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

PRIMITIVOS
• String
• Number
• Bigint En Javascript es sólo un valor especial que representa “nada”, “vacío”
• Boolean o “valor desconocido”.

• Symbol
• Null
• Undefined
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

PRIMITIVOS
• String
• Number
• Bigint
Simplemente significa que el valor no ha sido asignado.
• Boolean
• Symbol
• Null
• Undefined
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

VÍDEO
Usando tipo de datos. Algunos ejemplos
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

P R E G U N T A

Selecciona la opción correcta

¿Podemos usar var delante del nombre de una variable para declararla?

Undefined

Null

Array
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

• Operadores aritméticos
• Operadores bit a bit
Operadores • Operadores de asignación
• Operadores de comparación
Existe un conjunto de operaciones en
JavaScript, es decir elementos que nos • Operadores lógicos
permiten actuar sobre los datos, realizad
• Operadores de cadenas de caracteres
operaciones matmáticas, etc. podemos dividir
los operadores disponibles según su carácter: • Operador condicional (ternario)
• Operador coma
• Operadores unarios
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

• Operadores aritméticos
• Operadores bit a bit Nombre Sintaxis Explicación
Resto % Devuelve el resto de una operación
• Operadores de asignación
Incremento ++ Incrementa en una unidad. Si se pone antes del operando (++i)
devuelve el resultado del incremento. Si se utiliza detrás (i++)
• Operadores de comparación muestra el valor antes del incremento.

• Operadores lógicos Decremento -- Igual que el de incremento pero restando 1.

Negación unaria - Intenta convertir a un número negativo al operando. Por ejemplo -
• Operadores de cadenas de caracteres “3" devuelve -3.
Unario positivo + Intenta convertir a un numero el operando. Por ejemplo +“3"
• Operador condicional (ternario) devuelve 3.
Exponenciación ** Aplica una potencia.
• Operador coma
• Operadores unarios
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

• Operadores aritméticos
Los operadores bit a bit usan los operandos como un conjunto de 32 bits
• Operadores bit a bit (ceros y unos), mostrando posteriormente valores numéricos estándar de
JavaScript.
• Operadores de asignación
Nombre Sintaxis Explicación
• Operadores de comparación AND a&b Operacion AND, por ejemplo 010 (2) AND 011 (3) = 010
OR a|b Operacion OR, por ejemplo 010 (2) OR 011 (3) = 011
• Operadores lógicos
XOR a^b Operacion XOR, por ejemplo 010 (2) XOR 011 (3) = 110
• Operadores de cadenas de caracteres NOT ~a Invierte los bits, por ejemplo NOT 1000 = 0111

• Operador condicional (ternario) Desplazamiento a << n Desplaza un conjunto de bits un numero de veces añadiendo
izquierda ceros a la izquierda, 10 << 3 = 10000
Desplazamiento a >> n Desplaza un conjunto de bits un numero de veces a la derecha,
• Operador coma derecha descartando bits a la izquierda: 10 >> 1 = 11

• Operadores unarios
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

Nos permiten asignar un valor a una variable.

• Operadores aritméticos
Nombre Sintaxis
• Operadores bit a bit Asignación a=b
Adición a += b
• Operadores de asignación Sustraccion a -= b
Multiplicacion a *= b
• Operadores de comparación
Division a /= b
• Operadores lógicos Resto a %= b
Exponenciacion a **= b
• Operadores de cadenas de caracteres Desplazamiento a la izquierda a <<= b
Desplazamiento a la derecha a >>= b
• Operador condicional (ternario) Desplazamiento a la derecha sin signo a >>>= b
AND binario a &= b
• Operador coma
XOR binario a ^= b
• Operadores unarios OR binario a |= b
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

• Operadores aritméticos
• Operadores bit a bit
• Operadores de asignación Nombre Sintaxis
Igual que a == b
• Operadores de comparación
Distinto a a != b
• Operadores lógicos Menor qué a<b
Mayor qué a> b
• Operadores de cadenas de caracteres Menor o Igual que a <= b
Mayor o Igual que a >= b
• Operador condicional (ternario)
• Operador coma
• Operadores unarios
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

• Operadores aritméticos
• Operadores bit a bit
Nombre Sintaxis Explicación
• Operadores de asignación AND Lógico a && b Devuelve a si puede ser convertido a false de lo
contrario devuelve b. Por lo tanto, cuando se usa con
• Operadores de comparación valores booleanos, && devuelve true si ambos
operandos son true, en caso contrario devuelve false.
• Operadores lógicos OR Lógico a || b Devuelve a si puede ser convertido a true de lo
contrario devuelve b. Por lo tanto, cuando se usa con
• Operadores de cadenas de caracteres valores booleanos, || devuelve true si alguno es true y
false si ambos lo son.
• Operador condicional (ternario) NOT Lógico !a Devuelve false si su operando puede ser convertido a
true, en caso contrario, devuelve true.
• Operador coma
• Operadores unarios
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

• Operadores aritméticos
• Operadores bit a bit
• Operadores de asignación Podemos realizar operaciones de concatenación entre
• Operadores de comparación textos o cadena de caracteres con los operadores + y
+=.
• Operadores lógicos
"Buenas" + " tardes" // "Buenas tardes"
• Operadores de cadenas de caracteres let b = "Buenas";
• Operador condicional (ternario) b+=" noches"; // "Buenas noches"

• Operador coma
• Operadores unarios
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

• Operadores aritméticos
• Operadores bit a bit
• Operadores de asignación (Condición ? ifTrue : ifFalse)
• Operadores de comparación
El operador condicional devuelve uno de dos valores
• Operadores lógicos según el valor lógico de la condición.
• Operadores de cadenas de caracteres (edad >= 65) ? "Precio senior" : "Precio junior";
• Operador condicional (ternario) //Devolverá Precio Senior

• Operador coma
• Operadores unarios
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

• Operadores aritméticos
• Operadores bit a bit El operador de coma (,) evalúa cada uno de sus operandos y
devuelve el valor del último. Esto permite evalúan varias
• Operadores de asignación
expresiones, devolviendo el valor del último. Es usado
• Operadores de comparación habitualmente para proporcionar múltiples parámetros a un
bucle for .
• Operadores lógicos
• Operadores de cadenas de caracteres for (var i = 0; i < [Link]; i++, e++) {
• Operador condicional (ternario) // Código del bucle
}
• Operador coma
• Operadores unarios
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

• Operadores aritméticos
• Operadores bit a bit Una operación unaria es una operación con un solo
• Operadores de asignación operando.

• Operadores de comparación Nombre Sintaxis Explicación

DELETE delete Elimina la propiedad de un objeto.
• Operadores lógicos VOID void Descarga el valor de retorno de una expresión.

• Operadores de cadenas de caracteres TYPEOF typeof Determina el tipo el objeto dado.

MÁS + Convierte su operando al tipo Number.
• Operador condicional (ternario)
MENOS - Convierte su operando al tipo Number y luego lo niega.
• Operador coma NOT ~ NOT bit a bit

• Operadores unarios
I N T R O D U C C I Ó N A J A V A S C R I P T La etiqueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diál

VÍDEO
Ejemplos de uso de diferentes operadores
I N T R O D U C C I Ó N A J A V A S C R I P T ueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diálogo

CUADROS DE

Podemos encontrarnos con tres casos:

ALERT CONFIRM PROMPT

I N T R O D U C C I Ó N A J A V A S C R I P T ueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diálogo

ALERT CONFIRM PROMPT

Muestra un mensaje en una ventana modal, en la que la persona usuario solo puede actuar pulsando
en “Aceptar”. Mientras tanto no podrá realizar ninguna otra acción en la página.

alert("Hola, soy una ventana modal de alerta");

I N T R O D U C C I Ó N A J A V A S C R I P T ueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diálogo

ALERT CONFIRM PROMPT

Muestra una ventana modal con una cuestión y dos botones: ACEPTAR y CANCELAR. El resultado es
true si se pulsa ACEPTAR y false en caso contrario.

let aprender = confirm("¿Quieres aprender JavaScript?");

alert( aprender );
I N T R O D U C C I Ó N A J A V A S C R I P T ueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diálogo

ALERT CONFIRM PROMPT

Muestra una ventana modal con una frase y una campo para insertar texto. Puede contener dos
parámetros, la pregunta o frase inicial y un valor por defecto que es opcional.

let edad = prompt("¿Qué edad tienes?", "15");

alert( "tienes " + edad + " años." );
I N T R O D U C C I Ó N A J A V A S C R I P T ueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diálogo

VÍDEO
Ejemplos de uso de cuadros de diálogo
I N T R O D U C C I Ó N A J A V A S C R I P T ueta (script) Contenidos alternativos Variables Tipos de datos Operadores Cuadros de diálogo

P R E G U N T A

Selecciona la opción correcta

¿Qué método de inserción de JavaScript usaría si la programación debe
afectar a un sitio Web completo, evitando la redundancia de información
y recursos?

Ninguno

Confirm y Prompt

To d o s
1.3 Fundamentos de
programación
C O M E N Z A R
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

Estructuras de

decisión
En los ejemplos que hemos visto hasta el momento en el
curso, las instrucciones están escritas de manera
secuencial, es decir, una debajo de la otra, mostrándose
una sola vez y en el orden en el que aparecen.

Las instrucciones se comportan como una lista de

principio a fin.

Con las estructuras de decisión, condiciones y

bucles conseguimos romper esa secuencia.
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

La sentencia if() evalúa la condición que haya entre los paréntesis. Si el resultado es
verdadero (true) ejecuta un bloque de código.

Ejemplo

if(edad >= 18) alert = "Has alcanzado la mayoría de edad.";

Aunque no es necesario para su funcionamiento es recomendable incluir el bloque

entre llaves {…}, espacialmente cuando hay más de una sentencia. De esta manera
se mejora la legibilidad. El Ejemplo quedaría así:

if(edad >= 18){

alert = "Has alcanzado la mayoría de edad.";
alert = “Ya puedes conducir un automóvil.";
}
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

Podemos incluir
un bloque else (si no) para el caso en que la condición sea falsa (false)

let condición = (edad >= 18)

if(condicion){
alert("Has alcanzado la mayoría de edad.");
}else{
alert("Aún no puedes conducir un automóvil.");
}
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

Example

También es posible incluir varias condiciones,

de manera que si la primera es falsa, continúa evaluando la siguiente.

Vemos el siguiente ejemplo:

if(edad < 18){

alert("Aún no eres mayor.");
}else if(edad > 18){
alert("Has alcanzado la mayoría de edad.");
}else{
alert("Justo este año has alcanzado la mayoría de edad.");
}
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

VÍDEO
Uso de la condición if… Else
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

En el tema dedicado a los operadores, pudimos ver el operador condicional

ternario de signo de interrogación “?”, que solemos usar cuando las
condiciones que queremos evaluar son sencillas y queremos incluir el
resultado en una variable, como en el siguiente caso:

let mensaje = (edad >= 18) ? 'Mayor de edad' : 'Menor de edad' ;

alert( mensaje );

También es posible crear una versión múltiple

let mensaje = (edad < 18) ? 'Eres menor de edad' :

(edad < 60) ? 'Eres mayor de edad' :
'¿Estás pensando en la jubilación?' ;
alert( mensaje );
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

Expresiones

lógicas
Las expresiones lógicas son aquellas que evalúan
los datos a verdadero (true) o falso (false). Usarlas
de manera adecuada es fundamental para
trabajar con cualquier lenguaje de programación.
Las expresiones lógicas pueden utilizar tanto
operadores lógicos como relacionales o ambos.

Te aconsejamos que repases el tema de los

operadores, especialmente los de asignación y
los lógicos. Su uso es sencillo e intuitivo y te
permitirán tener control sobre las condiciones
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

Lo que sucede dentro del paréntesis es una conversión Booleana de los

datos, es decir, lo convierte en un valor verdadero o falso

Observa los ejemplos siguientes:

let numero = 11; El cuadro “alert” aparecerá, puesto que el
if(numero >= 10){ número es 11, pero si fuera 10 también
alert("La condición es verdadera."); aparecería, puesto que la condición es que
} sea 10 ó mayor.

También es posible crear una versión

múltiple:
[…] En este caso el cuadro “alert” no aparecerá,
if(numero == 10){ puesto que la condición exige que el
[…] número sea exactamente 10.

[…] Aquí el cuadro “alert” tampoco aparecerá,

if(numero > 11){ puesto que la condición exige que el
[…] número sea mayor que 11, pero no 11.
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

Veamos ahora expresiones lógicas con operadores lógicos

let a = 9;
let b = 2;
alert ((a < 10 && b > 1) + "-" + (a < 10 && b < 1));

Usando el operador AND vemos que el primer

paréntesis la expresión lógica se cumple porque
las dos condiciones son verdaderas, en cambio
en el segundo caso una es verdadera y la otra no.

let a = 6; En este caso el cuadro “alert” no

let b = 3; aparecerá, puesto que la condición
alert ((a < 10 || b > 1) + "-" + (a < 10 || b < 1) + exige que el número sea exactamente
10.
"-" + (a > 10 || b < 1));

El operador NOT (!) devuelve verdadero

para declaraciones falsas y falso para
let a = 5; declaraciones verdaderas.
let b = 5; En el siguiente caso si quitáramos el
alert (!(a == b)); operador (!) el resultado sería true, pero al
incorporarlo estamos negando.
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

P R E G U N T A

Selecciona la opción correcta

¿Cuál de las siguientes opciones escribirías delante del comentario para
que la ventana de alerta aparezca?

let num = 20;

// Comentario: escribe aquí el resultado correcto
if(cond){
alert("La condición es verdadera.");
}

let cond = (num <= 19);

let cond = (num > 20)

let cond = (num != 19)

FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

Las estructuras de
repetición o bucles
Junto con las expresiones lógicas, son capaces de cambiar le flujo de
ejecución. Como su propio nombre indica, sirven para repetir un A continuación describiremos
conjunto de instrucciones. los siguientes bucles:

En cualquier caso se trata de repetir un conjunto de instrucciones un • Switch

número determinado de veces, conociendo o no este número mientras
• For
se cumpla una condición.
• While
Existen por tanto dos tipos de bucles, los que se ejecutan conociendo
antes el número de repetición y los que se ejecutan sin saberlo.

Existen otros bucles, como for in o do while. Estos casos los estudiaremos más adelante, una vez hayamos avanzado en
el curso y así podamos comprender mejor su uso.
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

Sentencia switch
Switch sirve para crear una condición “if” con múltiples posibilidades.

S i n t a x i s
Su funcionamiento es el siguiente
Se hace la comparación de la expresión en
switch(expresión) {
cada caso. Si hay una coincidencia, se
case a:
// Bloque de código ejecuta el bloque de código. Si no hay
break; ninguna coincidencia, se ejecuta el bloque
case b: de código predeterminado (default) que
// Bloque de código es opcional.
break;
default:
// Bloque de código
}
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

Sentencia switch Ejemplo

let color = prompt("¿Cuál es tu color primario favorito?");

switch (color) {
case "amarillo":
alert("Mi color favorito es el amarillo");
break;
case "rojo":
alert("Mi color favorito es el rojo");
break;
case "azul":
alert("Mi color favorito es el azul");
break;
case "azul":
alert("Mi color favorito es el verde");
break;
default:
alert("No me gustan los colores");
break;
}
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

Sentencia for
Su funcionamiento es algo más complejo, pero es mucho más utilizado porque nos va
a permitir realizar muchas más tareas.

Expr1 - Inicio - Se ejecuta una vez al comienzo

del bucle.
S i n t a x i s
Expr2 - Condición - Es comprobada antes de
cada paso del bucle. Si es falsa, el bucle finaliza.

Boque de código - Se ejecuta las veces

for(expr1;expr2,expr3) { necesarias mientras la condición sea
// Bloque de código verdadera.
}
Expr3 - paso - Se ejecuta después del Boque
de código en cada iteración.
Ejemplo

for(let i = 1; i < 10; i++) {

alert("me repito " + i );
}
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

Bucle while
While, mientras en inglés, es la manera más sencilla de repetir acciones.

El bloque de código se ejecutará mientras que

la condición sea verdadera.
S i n t a x i s

while(condición) {
// Bloque de código
} Ejemplo

let i = 0;
while (i < 5) {
alert( i );
i++;
}
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

VÍDEO
Comentando los ejemplos de estructura de repetición
FUNDAMENTOS DE PROGRAMACIÓN Estructuras de decisión Expresiones lógicas Estructura de repetición Definir funciones

P R E G U N T A

Selecciona la opción correcta

De las siguientes sentencias, ¿Cuál es una versión “extendida” o de
múltiples opciones de “if”?

For

While

Switch
FUNDAMENTOS DE PROGRAMACIÓN Expresiones lógicas Estructura de repetición Definir funciones Llamar funciones Ámb

Definir

FUNCIONES [Link]

Una función es un conjunto de instrucciones que

realiza una alguna tarea.

Trabajar con funciones puede ser muy útil y

económico porque nos va a permitir "usar" el
mismo código en más de una ocasión sin tener
que repetirlo.
Para poder utilizar una función, lo primero es
definirla o declararla.
FUNDAMENTOS DE PROGRAMACIÓN Expresiones lógicas Estructura de repetición Definir funciones Llamar funciones Ámb

En realidad ya hemos usado algunas funciones como alert(), prompt() y confirm().

Pero ahora vamos a aprender a crear funciones propias.
Veamos su estructura

function nombreFuncion(parametro1,
parametro2,…) {
// Acciones o cuerpo de la función.
}

Es decir, debemos comenzar con la palabra function, seguida del nombre que le queramos
poner y entre paréntesis una lista de parámetros.
FUNDAMENTOS DE PROGRAMACIÓN Expresiones lógicas Estructura de repetición Definir funciones Llamar funciones Ámb

function unMensaje() {
alert("Estamos aprendiendo a declarar una función.");
}

En este caso podemos comprobar que la función no contiene parámetros.

Los parámetros son opcionales.

function unMensaje(quien, que) {

alert( quien + "dice: " +que);
}

Aquí podemos ver una función que sí contiene parámetros

Si pruebas a incluir alguna de las funciones de esta pantalla en un documento HTML,

podrás comprobar que al llamar a dicha página no sucederá nada. Esto es debido a
que las funciones deben ser para que funcionen. Veámoslo a continuación.
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

Llamar

FUNCIONES
Llamar a una función es tan fácil como escribir el nombre de dicha función incluido los paréntesis,
ahora sin incluir la palabra function.

function unMensaje() {
alert("Estamos aprendiendo a declarar y llamar a una función.");
}
unMensaje();
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

Llamar

funciones
O pasando los datos a los parámetros parámetros, datos que habitualmente se les llama
argumentos.

function unMensaje(quien, que) {

alert( quien + "dice: " +que);
}
unMensaje("Carlos", "Me gusta Javascript.");
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

Los argumentos deben coincidir en número con los parámetros de la función, si no es así algún caso el
valor se vuelve undefined.

Así sucede en el siguiente ejemplo

function unMensaje(quien, que) {

alert( quien + " dice: " +que);
}
unMensaje("Carlos");
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

Así sucede en el siguiente

ejemplo:
Podemos especificar un valor llamado “predeterminado” o
“default” (que se usa si el argumento fue omitido) en la declaración
de función usando.

function unMensaje(quien, que = "no tengo nada que decir") {

alert( quien + " dice: " +que);
}
unMensaje("Carlos");
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

En JavaScript las funciones son consideradas

objetos, por lo que pueden ser pasadas como argumentos a otras funciones…

function llamada(f){
f();
}
llamada(function(){
alert("Estamos llamando a una función anónima.");
});
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

En JavaScript las funciones son consideradas

objetos …o asignarlas a variables.

function llamada(f){
f();
}
let f = function(){
alert("Hemos incluido una función como valor de una variable.");
}
llamada (f);
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

VÍDEO
Definiendo y llamando funciones
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

Una función puede devolver un valor al

código de llamada como resultado
Como en este ejemplo que se suman dos valores:

function suma(a, b) {
return a + b;
}
alert(suma(5, 8) );
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

La directiva return no necesariamente debe estar al final del código de la función, puede estar en
cualquier lugar de la función.
Incluso puede haber más de un return en una misma función. La función siempre se detendrá cuando
alcanza return.

function compruebaDia(edad) {
if (edad >= 18) {
return true;
} else {
return confirm('¿Debes entrar acompañado de un adulto?');
}
}
let edad = prompt('¿Cuantos años tienes?');
if ( compruebaDia(edad) ) {
alert( 'Puedes pasar' );
} else {
alert( 'No puedes pasar' );
}
Veamos a continuación su explicación
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

VÍDEO
Explicando el código anterior: Return
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

Scope [Link]

Scope (en inglés) o ámbito de una variable es el

lugar de la programación programa en la que se
define dicha variable.

Según el lugar en el que estén colocadas una

variable podrá ser:

Local: Interna. Dentro de una función.

Global: Externa. Fuera de la función.

FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

Variable local
Una variable local es aquella que se encuentra dentro de una función.
Podemos acceder desde la función…

function muestraMensaje() {
let mensaje = "Trabajando con una variable local";
alert( mensaje ); La razón es que la variable “mensaje” se
} ha definido dentro de la función
muestraMensaje(); muestraMensaje() y por tanto, es una
variable local que solamente está definida
dentro de la función.
…pero nunca desde fuera:
Cualquier instrucción de la función puede
acceder a la variable si está dentro y hacer
function muestraMensaje() {
que finalmente la función cumpla su
let mensaje = "Trabajando con una variable local";
} cometido, como ocurre en el primer
alert( mensaje ); ejemplo de esta pantalla.
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

VÍDEO
Explicando el código anterior: Una variable local
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

Variable global
Están definidas en cualquier lugar del programa pero fuera de la función.

let mensaje = “Creando una variable global";

function muestraMensaje() {
alert( mensaje );
} Cuando una función define una
muestraMensaje(); variable local con el mismo nombre
que una variable global que ya existe,
Cualquier función puede acceder a ella las variables locales prevalecen sobre
las globales, pero sólo dentro de la
let mensaje = “Soy global";
función:
function muestraMensaje() {
let mensaje = “Soy local”;
alert( mensaje );
}
muestraMensaje();
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

VÍDEO
Explicando el código anterior: Una variable global
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

P R E G U N T A

Verdadero o falso
Entre dos variables declaradas con el mismo nombre, una dentro de una
función y la otra fuera de la función, prepondera siempre la que está
fuera de la función o global.

Ve rd a d e ro

Falso
FUNDAMENTOS DE PROGRAMACIÓN Estructura de repetición Definir funciones Llamar funciones Ámbito de las variables

Es recomendable
Definir como variables locales todas las variables que sean de uso exclusivo
para realizar las tareas encargadas a cada función. Las variables globales se
utilizan para compartir variables entre funciones de forma sencilla.
De cualquier manera es mejor reducir el uso de variables globales. En
programación moderna prácticamente no se usan variables globales. La
mayoría de las variables están dentro de las funciones. Aunque a veces puede
justificarse almacenar algunos datos que sea útil para todo un sitio.
hemos
terminado
¡EXCELENTE TRABAJO!