0% encontró este documento útil (0 votos)

14 vistas105 páginas

Manual App Cliente 2024

La documentación proporciona una introducción al lenguaje de programación JavaScript, cubriendo su uso en el desarrollo de páginas web interactivas y dinámicas. Se discuten conceptos básicos, la historia del lenguaje, su normalización bajo ECMAScript y su interpretación en navegadores. JavaScript es un lenguaje interpretado y orientado a objetos, utilizado principalmente del lado del cliente para mejorar la experiencia del usuario en la web.

Cargado por

nics080627mmctsva6

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

14 vistas105 páginas

Manual App Cliente 2024

Cargado por

nics080627mmctsva6

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

Está en la página 1/ 105

Edited with the trial version of

Foxit Advanced PDF Editor

To remove this notice, visit:
www.foxitsoftware.com/shopping

JavaScript (1) 1 de 46

JAVASCRIPT

Ahora te encuentras en el inicio de la documentación que trata sobre el lenguaje Web

Javascript. Durante la lectura aprenderás a hacer dinámicas tus páginas web y hacerlas mucho
más atractivas para los visitantes.

Esta documentación cubrirá muchos temas, desde lo básico. Aprenderás cómo hacer
animaciones, aplicaciones complejas y utilizar este lenguaje junto con HTML5, la nueva versión
del famoso W3C.

Esta documentación discutirá principalmente el uso de JavaScript en un entorno de navegador

Web, por lo que es esencial que sepas codificación HTML y CSS. Conocer PHP puede ser una
ventaja.

Parte 1: Conceptos básicos de Javascript

Como cualquier otro lenguaje de programación, JavaScript tiene algunas características

especiales: sintaxis, modelo de objetos, etc. Claramente, cualquier cosa que diferencia
un lenguaje de otro. Además, descubrirás rápidamente que JavaScript es un lenguaje
relativamente especial en su acercamiento a las cosas. Esta parte es esencial para
cualquier principiante de programación e incluso para aquellos que ya conocen un lenguaje
de programación debido a que las diferencias con otros lenguajes de programación son
numerosas.

Introducción a JavaScript

Antes de entrar directamente en el núcleo de la cuestión, este capítulo te enseñará lo que

Javascript, puede hacer, cuando se puede o se debe utilizar y cómo ha evolucionado desde su
creación en 1995.

También vamos a discutir algunos conceptos básicos tales como las definiciones exactas de
ciertos términos.

¿Qué es JavaScript?

JavaScript (1) 2 de 46

JavaScript es un lenguaje de programación de scripts (secuencia de comandos) orientado

a objetos. Esta descripción es un poco rudimentaria, hay varios elementos que vamos a
diseccionar.

- Un lenguaje de programación

En primer lugar, un lenguaje de programación es un lenguaje que permite a los

desarrolladores escribir código fuente que será analizado por un ordenador.

Un desarrollador o programador es una persona que desarrolla programas. Puede ser un

profesional (un ingeniero, programador informático o analista) o un aficionado.

El código fuente está escrito por el desarrollador. Este es un conjunto de acciones, llamadas
instrucciones, lo que permitirá dar órdenes al ordenador para operar el programa. El código
fuente es algo oculto, como un motor en un automóvil está oculto, pero está ahí, y es quien
asegura que el coche puede ser conducido. En el caso de un programa, es lo mismo, el código
fuente rige el funcionamiento del programa.

Dependiendo del código fuente, el ordenador realiza varias acciones, como abrir un menú,
iniciar una aplicación, efectuar búsquedas, en fin, todo lo que el equipo es capaz de hacer.

Hay una gran cantidad de lenguajes de programación, la mayoría se encuentran en esta página
de la Wikipedia.

- Scripts de programación

JavaScript te permite programar scripts. Como se mencionó anteriormente, un lenguaje de

programación es utilizado para escribir código fuente a ser analizada por un ordenador. Hay
tres formas de usar el código fuente:

Lenguaje compilado como: El código fuente se da a un programa llamado compilador que lee el
código fuente y lo convierte en un lenguaje que el equipo será capaz de interpretar: el lenguaje
binario, es de 0 y 1. Lenguajes como C o C ++ son lenguajes compilados muy conocidos.

Lenguaje precompilado: aquí, el código fuente se compila en parte, por lo general en un código
más fácil de leer para el ordenador, pero que todavía no es binario. Este código intermedio es
para ser leído por lo que se llama una “Máquina Virtual", que ejecutará el código. Lenguajes
como C # o Java se llaman precompilados.

Lenguaje interpretado: en este caso, no hay compilación. El código fuente se mantiene sin
cambios, y si desea ejecutar este código, debemos proporcionar un intérprete que va a leer y
realizar las acciones solicitadas.

JavaScript (1) 3 de 46

Los scripts son en su mayoría interpretados. Y cuando decimos que JavaScript es un lenguaje
interpretado, lo que significa que es un lenguaje interpretado. Por tanto, es necesario contar
con un intérprete para ejecutar código Javascript, y el intérprete que se utiliza una frecuencia:
se incluye en tu navegador de internet.

Cada navegador tiene un intérprete Javascript, que varía en función del navegador. Si está
utilizando Internet Explorer, el intérprete es llamado JScript (versión 9 intérprete llamado
Chakra), en Mozilla Firefox se llama SpiderMonkey y el motor V8 es el de Google Chrome.

- Lenguaje orientado a objetos

Queda una specto a analizar: orientado a objetos. Este concepto es bastante complicado de
configurar ahora y se profundizará sobre todo después de la parte 2. Sin embargo, un lenguaje
de programación orientado a objetos es un lenguaje que contiene elementos, llamados
objetos y los objetos diferentes tienen características específicas y formas de uso diferente.
El lenguaje proporciona objetos básicos, como imágenes, fechas, cadenas de caracteres...
También es posible crear tus propios objetos para hacer la vida más fácil y obtener un código
fuente más claro (fácil de leer) y una forma de programar mucho más intuitivo (lógica).

Es muy probable que no entiendas este paso si nunca ha realizado programación, pero no:
comprenderás muy pronto cómo funciona todo.

JavaScript, el lenguaje de scripts

Javascript actualmente es principalmente utilizado en internet, junto con las páginas web
(HTML o XHTML). Javascript está directamente incluido en la página web (o en un archivo
externo) y mejora una página HTML, añadiendo interacción del usuario, animación, ayudas a la
navegación, tales como:

Mostrar / ocultar el texto;

Deslizamiento de imágenes;
Crear presentaciones de diapositivas;
Crear burbujas de información.

De JavaScript se dice que es un lenguaje del lado del cliente, es decir que los scripts son
ejecutados por el navegador del usuario (cliente). Esto difiere de los llamados lenguajes
de script del lado del servidor que son ejecutadas por el servidor web. Este es el caso de
lenguajes como PHP.

Esto es importante porque el propósito de los scripts del lado del cliente y del lado del servidor
no es el mismo. Un script del lado del servidor se encargará de "crear" la página web que se
envía al navegador. Este entonces mostrará la página a continuación, ejecutará secuencias de
comandos del lado del cliente como JavaScript. Un patrón que se repite en esta operación:

JavaScript (1) 4 de 46

Javascript no es la Web

Si Javascript está diseñado para ser usado en conjunción con HTML, el lenguaje ha
evolucionado desde entonces hacia otros destinos. Javascript es regularmente utilizado para
hacer extensiones para diferentes programas, como los scripts codificados en Lua o Python.

JavaScript también se puede utilizar para construir aplicaciones. Mozilla Firefox es el ejemplo
más famoso: la interfaz del navegador se crea con una especie de HTML llamado XUL y
JavaScript que se utiliza para animar la interfaz. Otros programas también están basados
en esta tecnología, como por ejemplo de TomTom HOME que se utiliza para administrar tu
navegador GPS TomTom a través de tu PC.

Breve historia del lenguaje

En 1995, Brendan Eich trabajaba en Netscape Communications Corporation, la compañía que

publicó el famoso Netscape Navigator, entonces principal competidor de Internet Explorer.
Brendan desarrolló Live Script un lenguaje de script que se basa en el lenguaje Java, y que
estaba destinado a ser instalado en los servidores desarrollados por Netscape. Netscape inició
el desarrollo de una versión del cliente LiveScript, que pasó a llamarse JavaScript, en
homenaje al lenguaje Java creado por Sun Microsystems.

En efecto, en ese momento, el lenguaje Java era cada vez más popular, y Brendan Eich, el
padre de Javascript, al llamarlo JavaScript en lugar de LiveScript era una forma de publicidad
de Java y JavaScript en sí. Atención, al final, estos dos lenguajes son radicalmente diferentes,
no vayas a confundir Java y JavaScript, pues operan de forma diferente.

Javascript fue lanzado en diciembre de 1995 y estaba integrado en Netscape Navigator 2. El

lenguaje fue tan exitoso, por lo que Microsoft desarrolló una versión similar llamada JScript, que
se instalaba en Internet Explorer 3, en 1996. Netscape decidió enviar a su versión de Javascript
a ECMA International (European Computer Manufacturers Association, la Asociación Europea

JavaScript (1) 5 de 46
de Normalización de hoy los sistemas de información y comunicación) para que el lenguaje
fuera normalizado, es decir para que se creara una referencia del lenguaje y que así puediera
ser utilizado por otras personas y embebidos en otro software. ECMA International estandarizó
el lenguaje con el nombre de ECMAScript. Desde entonces, las versiones de ECMAScript
han evolucionado. La versión más conocida es utilizada en todo el mundo, es la versión
ECMAScript 3, publicado en diciembre de 1999.

ECMAScript y sus derivados

ECMAScript es la línea de base en el flujo de implementaciones de referencia. Obviamente, se

puede citar a Javascript, que se implementa en la mayoría de los navegadores, pero también:

JScript, que está embebido en la aplicación Internet Explorer. También es el nombre del
intérprete de Internet Explorer;
JScript.NET, que se inserta en el marco de Microsoft NET.;
ActionScript, que es la implementación realizada por Adobe en Flash;
EX4 que es el desarrollo de gestión de ECMAcript de XML en el seno del intérprete
JavaScript
SpiderMonkey,de Firefox.

Versiones de Javascript

Las versiones de Javascript se basan en los de la ECMAScript (que abreviaremos como ES).
Por lo tanto, se encuentran:

ES 1 y ES 1, que son los inicios de Javascript;

ES 3 (publicada en diciembre de 1999), que es funcional en todos los navegadores
(excepto las versiones anteriores de Internet Explorer);
ES 4, que fue abandonada debido a los grandes cambios que no fueron apreciados;
ES 5 (publicada en diciembre de 2009), que es la versión más reciente liberada;
ES 6, que se encuentra actualmente en fase de diseño.

Esta documentación cubrirá todas las versiones actualizadas.

Un logotipo desconocido

No hay imágenes oficiales para representar Javascript. Sin embargo, este logotipo se utiliza
cada vez más por la comunidad, especialmente desde su introducción en EE.UU. en JSConf
EU. Se puede encontrar en esta dirección en diferentes formatos.

Resumen

● JavaScript es un lenguaje de programación interpretado, es decir, que necesita un

intérprete para ser ejecutado.

JavaScript (1) 6 de 46

● JavaScript se utiliza principalmente en páginas web.

● Al igual que HTML, JavaScript es ejecutado por el navegador del usuario: se llama un
de cliente, en comparación con el lado del servidor cuando el código es ejecutado por el
servidor.
● Javascript está normalizado por ECMA International como el nombre ECMAScript
Language Reference.
● Hay otros lenguajes derivadas del ECMAScript como ActionScript, EX4 o JScript.NET.
● La última versión del estándar está basado en ECMAScript 5, lanzado en 2009.

JavaScript (1) 7 de 46

Primeros pasos en Javascript

Como se mencionó anteriormente, JavaScript es un lenguaje utilizado principalmente con el

lenguaje HTML, en este capítulo se aprende cómo integrar este lenguaje en tus páginas web,
descubrir su sintaxis básica y mostrar un mensaje en la pantalla del usuario.

También se encuentran al final de este capítulo algunos enlaces que pueden probablemente
ser útiles durante la reproducción de esta documentación.

En cuanto al editor de texto a usar (en el que se escribe el código Javascript) es muy probable
que valga el que se ha empleado para el código HTML.

Muestra un cuadro de diálogo

Hola Mundo! No se deroga la regla tradicional de que todos los tutoriales de programación
comenzarán mostrando el texto "Hello World!", ("¡Hola Mundo!" en español) al usuario. A
continuación se muestra un programa HTML simple que contiene la instrucción Javascript,
situada dentro de un elemento <script>:

Código: HTML - Hola Mundo!

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<script>
alert('Hello world!');
</script>
</body>
</html>

Apareciendo al ejecutarlo la siguiente caja de diálogo:

JavaScript (1) 8 de 46

Lo nuevo

En el código HTML indicado anteriormente, vemos algunas nuevas características. En primer

lugar, un elemento <script> está presente: es él quien tiene el código javascript de la siguiente
manera:

Código: JavaScript

alert ('Hello world');

Es una declaración, es decir, una orden, o más bien una acción que el equipo tendrá que
hacer. los lenguajes de programación consisten en una secuencia de instrucciones que,
colocados de extremo a extremo, permiten obtener un programa o un script completo. En este
ejemplo, no es una instrucción: se llama a la función alerta.

El cuadro de diálogo de alert ()

alert () es una declaración simple, llamada función, que muestra un cuadro de diálogo que
contiene un mensaje. este mensaje se coloca entre comillas, entre los paréntesis de la function
alert ().

Sintaxis de Javascript

Instrucción

La sintaxis de Javascript no es complicada. Generalmente, las instrucciones deben estar

separadas por un punto y coma que se coloca al final de cada instrucción:

Código: JavaScript

sentencia_1;
sentencia_2;
sentencia_3;

JavaScript (1) 9 de 46

En realidad, el punto y coma no es necesario si la instrucción siguiente está en la línea

posterior como en nuestro ejemplo. Sin embargo, si escriben varias instrucciones en una sola
línea, como en el siguiente ejemplo, el punto y coma es obligatorio. Si lo virtual punto

Código JavaScript

sentencia_1; sentencia_2
sentencia_3

Compresión de scripts

Algunas secuencias de comandos están disponibles en un formato comprimido, es decir, todo

el código se escribe como secuencia, no hay retornos de línea. Esto reduce considerablemente
el tamaño de una secuencia de comandos y sirve para asegurar que la página se carga más
rápidamente. Existen programas para "comprimir" el código Javascript. Pero si has olvidado un
solo punto y coma el código comprimido no va a funcionar porque las instrucciones no están
debidamente separadas. También es una de las las razones por las que siempre se pone el
punto y coma al final de la instrucción.

Espacios

Javascript no es sensible a los espacios. Esto significa que puedes alinear las instrucciones
que quieras, siempre que no interfiera con la secuencia de comandos. Por ejemplo, esto es
correcto:

Código JavaScript

instruccion_1;
instruccion_1_1;
instruccion_1_2;
instruccion_2; instruccion_3;

Sangría y presentación

La sangría en la programación informática, es una manera de estructurar el código para hacerlo

más legible. Las instrucciones son priorizadas en varios niveles y espacios de usos o lengüetas
para desplazar a la derecha y crear una jerarquía. Un ejemplo de código sangrado:

Código: JavaScript

function interruptor(elemID) {
var elem = document.getElementById(elemID);

if (elem.style.display == 'block') {

JavaScript (1) 10 de 46

elem.style.display = 'none';
} else {
elem.style.display = 'block';

}
}

La presentación de los códigos también es importante, es como si estuvieras escribiendo una

carta: no hay reglas predefinidas para escribir cartas, por lo que tendrás que hacer arreglos
para organizar tu código para mostrarlo claro. En el código sangrado mostrado anteriormente,
se puede ver que hay espacios para “airear” todo el código y sólo hay una declaración por línea
(salvo if else, pero ya llegaremos a eso más adelante). Algunos desarrolladores escriben su
código como este:

Código: JavaScript

function interruptor(elemID){
var elem=document.getElementById(elemID);
if(elem.style.display=='block'){
elem.style.display='none';
}else{elem.style.display='block';}
}

Comentarios

Los comentarios son anotaciones realizadas por el desarrollador para explicar el

funcionamiento de un script, una instrucción o incluso un grupo de instrucciones. Los
comentarios no interfieren con la ejecución de un script.

Hay dos tipos de comentarios: los de fin de línea y los multilínea.

Comentarios de fin de línea. Se utilizan para comentar una instrucción. Comienza con dos
barras de división:

Código: JavaScript

sentencia_1 / / Esta es mi primera instrucción

sentencia_2;
/ / La tercera declaración es la siguiente:
sentencia_3;

El texto colocado en un comentario se ignora cuando se ejecuta un script, lo que significa que
puedes poner un comentario, incluso en una instrucción (que, obviamente, no se ejecutará):

JavaScript (1) 11 de 46

Código: JavaScript

sentencia_1 / / Esta es mi primera instrucción

sentencia_2;
/ / La tercera declaración da problemas, la cancelo temporalmente
/ / sentencia_3;

Comentarios multilínea. Este tipo permite saltos de línea. Un comentario multilínea comienza
con / * y termina con * /:

Código: JavaScript

/ * Este script consta de tres pasos:

- Instrucción uno está haciendo algo
- Instrucción dos para otra cosa
- Instrucción tres que pone fin a la secuencia de comandos
*/
sentencia_1;
sentencia_2;
sentencia_3 / / Fin del script

Ten en cuenta que un comentario de varias líneas se pueden mostrar en una sola línea:

Código: JavaScript

sentencia_1 / * Esta es mi primera instrucción * /

sentencia_2;

Funciones

En el ejemplo de ¡Hola mundo!, Se utilizó la función alert (). Discutiremos en detalle la

funciones de trabajo, en los capítulos siguientes, necesitarás saber el resumen de la sintaxis.

Una función consiste en dos partes: su nombre, seguido por un par de paréntesis (una apertura
y un cierre):

Código: JavaScript

myFunction () / / "function" quiere decir "función" en Inglés

JavaScript (1) 12 de 46

Entre paréntesis se indican los argumentos que también se llaman parámetros. Estos contienen
los valores que se pasan a la función. En el caso de ¡Hola mundo!, Son las palabras "¡Hola,
mundo! " lo que se transfieren como parámetros:

Código: JavaScript

alert ('Hola mundo!');

Dónde colocar el código en la página

Los códigos JavaScript son insertados a través del elemento <script>. Este elemento tiene un
atributo de tipo que se utiliza para indicar el tipo de lenguaje que vamos a utilizar. En nuestro
caso, es JavaScript, pero podría ser otra cosa, como por ejemplo VBScript, aunque esto es
extremadamente raro.

En HTML 4 y XHTML 1.x, el tipo de atributo es obligatorio. En contraste, en HTML5, no lo es.

Esta es la razón por la que los ejemplos aquí mostrados, no incluirán este atributo. Si no estás
usando HTML5, sabemos que el atributo de tipo toma como valor text / javascript, que es en
realidad el tipo MIME de un código Javascript.

El tipo MIME es un identificador que describe un formato de datos. Aquí, con text / javascript,
se trata de datos de texto y JavaScript.

Javascript "en la página"

Para situar el código JavaScript directamente en una página web, nada más simple, siguiendo
el ejemplo de ¡Hola, mundo!: se coloca el código en el elemento <script>:

Código: HTML

<!DOCTYPE html>
<html>
<head>
<title>¡Hola Mundo!</title>
</head>
<body>
<script>
alert('¡Hola Mundo!');
</script>
</body>
</html>

Encuadramiento de caracteres reservados

JavaScript (1) 13 de 46

Si utilizas el estándar HTML 4.01 y XHTML 1.x a menudo, es necesario utilizar comentarios
de encuadramiento para que la página cumpla con las normas. Si por contra, como en este
supuesto, se utiliza el estándar HTML5, los comentarios de encuadramiento son inútiles.

Los comentarios de encuadramiento se utilizan para aislar el código Javascript para que el
Validator W3C (World Wide Web Consortium) no los interprete. Por ejemplo, si tu código
Javascript contiene galones < y >, el validador cree que HTML no está cerrado, por lo que
anularía la página. Esto no es grave en sí mismo, sino que una página sin errores, siempre es
preferible.

Los comentarios de encuadramiento son como los comentarios HTML:

Código: HTML

<body>
<script>

</script>
</body>

Javascript externo

Es posible, y conveniente escribir el código JavaScript en un archivo externo con la extensión.

Js. Este archivo se llama desde la página web mediante el elemento <script> y su atributo src
que contiene la dirección URL del archivo. js.

He aquí un pequeño ejemplo:

Código: JavaScript - contenido de ficheros hola.js

alert ('¡Hola mundo!');

Código: HTML - Página Web

<! DOCTYPE html>

<html>
<head>
<title>¡Hola mundo!!</title>
</head>
<body>
<script src="hola.js"></script>

JavaScript (1) 14 de 46

</body>
</html>

Se supone que el archivo hola.js se encuentra en el mismo directorio que el programa en

HTML.

Posición del elemento <script>

La mayoría de los cursos de Javascript, y ejemplos, muestran la necesidad de colocar el

elemento <script> dentro de <head> cuando se utiliza para cargar un archivo javascript. Eso es
correcto, sí, pero hay mejoras.

Una página web es leída por el navegador de forma lineal, es decir, en primer lugar lee <head>,
después los elementos de <body> uno después del otro. Si se llama a un archivo JavaScript
desde el principio de la carga de la página, el navegador por lo tanto cargará este archivo, y si
es grande, la carga de la página se desacelerará. Esto es normal, ya que el navegador cargará
el archivo antes de empezar a mostrar el contenido de la página.

Para superar este problema, es conveniente colocar los elementos <script> justo antes de
cerrar <body> (algunos navegadores modernos lo hacen automáticamente) como el siguiente
ejemplo:

Código: HTML

<!DOCTYPE html>
<html>
<head>
<title>¡Hola Mundo!</title>
</head>
<body>
<p>

</p>
<script>
// Un poco de código JavaScript...
</script>
<script src="hola.js"></script>
</body>
</html>

Resumen

JavaScript (1) 15 de 46

- Las instrucciones deben estar separadas por un punto y coma.

- Un código JavaScript bien presentado es más legible y más fácil de editar.

- Es posible incluir comentarios con los caracteres / /, / * y / *.

- Los códigos Javascript son colocados en un elemento de script.

- Es posible incluir un archivo JavaScript con el atributo src del elemento <script>.

JavaScript (1) 16 de 46

Variables

A lo largo de la lectura, descubrirás el uso de variables, los principales tipos que pueden
contener y sobre todo la forma de hacer tus primeros cálculos. También se presenta la
concatenación y los tipos de conversión. Y, por último, una parte importante de este capítulo
trata el uso de una nueva característica que permite interactuar con el usuario.

¿Qué es una variable?

En pocas palabras, una variable es un espacio de almacenamiento en un ordenador para

grabar cualquier tipo de datos como una cadena de caracteres, un valor numérico o estructuras
un poco más específicas.

Declarar una variable

En primer lugar, ¿qué significa "declarar una variable" significa? Se trata simplemente de
espacio de almacenamiento de reserva en memoria, nada más. Una vez que se declara la
variable, puedes comenzar a almacenar datos sin problema.

Para declarar una variable, primero debes encontrar un nombre. Es importante destacar que
el nombre de una variable puede contener sólo caracteres alfanuméricos, es decir, letras de la
A a la Z y números del 0 al 9, guión bajo (_) y dólar ($) también son aceptados. Algo más: el
nombre de la variable no puede comenzar con un número y no puede consistir únicamente de
palabras clave utilizadas por Javascript. Por ejemplo, no se puede crear una variable llamada
var porque encontrarás que esta palabra clave ya está en uso, sin embargo, puedes crear una
variable llamada var_.

En las palabras clave utilizadas por JavaScript, se pueden llamar "palabras reservadas",
simplemente porque no tienes el derecho de usarlos como nombres de variables. Encontrarás
en esta página (en Inglés) todas las palabras reservadas en Javascript.

Para declarar una variable, simplemente hay que escribir la siguiente línea:

Código: JavScript

var miVariable;

JavaScript es un lenguaje sensible en las denominaciones, ten cuidado de no confundir

las mayúsculas y minúsculas. En el siguiente ejemplo, tenemos tres variables diferentes
declaradas:

Código: JavaScript

JavaScript (1) 17 de 46

var miVariable;
var mivariable;
var MIVARIABLE;

La palabra clave var está presente para indicar que se declara una variable. Una vez que se
declara, se puede almacenar lo que quieras:

Código: JavaScript

var miVariable;
miVariable = 2;

El signo = se utiliza para asignar un valor a la variable, aquí le hemos asignado el número 2.
Cuando das un valor a una variable, decimos que se trata de una asignación, ya que asigna un
valor a la variable.

Es posible simplificar el código en una sola línea:

Código: JavaScript

var miVariable = 5.5 / / Como puedes ver, los números decimales se

separan con un punto

Del mismo modo, puedes declarar y asignar variables en una sola línea:

Código: JavaScript

var miVariable1, miVariable2 = 4, miVariable3;

Aquí hemos declarado tres variables en una fila, pero sólo la segunda tiene valor asignado .

Y la última posibilidad, que puede ser útil de vez en cuando:

Código: JavaScript

var miVariable1, miVariable2;

miVariable1 = miVariable2 = 2;

Ambas variables ahora contienen el mismo número 2. Puedes hacer lo mismo con tantas
variables como desees.

Tipos de variables

JavaScript (1) 18 de 46

A diferencia de muchos lenguajes, JavaScript es un lenguaje de tipado dinámicamente. Esto

significa, generalmente, que cualquier declaración de variables se hace con la palabra clave var
independientemente de su contenido, mientras que en otros lenguajes, como el C, es necesario
especificar el tipo de contenido que tendrá que contener la variable.

En Javascript, nuestras variables son tipadas dinámicamente, lo que significa que puedes
asignarle texto primero y luego borrarlo y poner un número cualquiera y sin restricciones.

Vamos a empezar por ver cuáles son los tres tipos principales de Javascript:

El tipo numérico (número): representa cualquier número, ya sea un entero, un número

negativo, en notación científica, etc. En pocas palabras, este es el tipo de números.

Para asignar un tipo numérico a una variable, sólo tienes que escribir el número var
numero = 5; Al igual que muchos lenguajes, JavaScript reconoce varios formatos para
los números, como por ejemplo escribir var numero = 5.5 o en notación científica var
número = 3.65 e5, o escribir el número hexadecimal, var numero= 0x391; En resumen,
hay diferentes maneras de escribir los valores numéricos.

Cadenas de caracteres (alias string): Este tipo representa texto. Puede asignarse de
dos maneras diferentes.

Código: JavaScript

var text1 = "Mi primer texto" / / Con comillas

var text2 = 'Mi segundo mensaje' / / Con apóstrofos

Es importante tener en cuenta que si escribes miVariable var = '2 ', el tipo de esta
variable es
cadena de caracteres y no un tipo numérico.

Otro punto importante, si usas apóstrofos para "enmarcar" el texto y deseas utilizar
apóstrofos en el texto mismo, entonces tienes que "escapar" de los apóstrofos como se
indica seguidamente:

Código: JavaScript

var text = 'Esto \' es algo ';

¿Por qué esto? Porque si no cancelas tu apóstrofo, Javascript cree que el texto se
detiene en el apóstrofo contenido en la palabra "es". Ten en cuenta que este problema
es idéntico al de las comillas.
En nuestro caso, solemos utilizar apóstrofos pero cuando el texto los contiene también
entonces las comillas pueden ser muy útiles.

JavaScript (1) 19 de 46

Booleanos (booleano): son un tipo particular de que se tratará más adelante. Mientras
tanto, en pocas palabras, un tipo booleano permite dos estados verdadero o falso. Estos
dos estados se puede escribir como sigue:

Código: JavaScript

var EsVerdader = true;

var EsFalso = false;

Hay otros tipos, que se considerarán cuando sea necesario.

Prueba de la existencia de variables con typeof

Puede ser que tengas en alguna ocasión la necesidad de probar la existencia de una variable o
comprobar su tipo. En tales situaciones, la instrucción typeof es muy útil, así es como se usa:

Código: JavaScript

var numero = 2;
alert (typeof numero ) / / Muestra: « number »

var text = "mitexto";

alert (typeof mitexto) / / Muestra: « string »

var aBoolean = false;

alert (typeof aBoolean) / / Muestra: « boolean »

Y ahora cómo probar la existencia de una variable:

Código: JavaScript

alert (typeof nada) / / Muestra: « undefined »

Es un tipo de variable muy importante. Si la instrucción typeof devuelve undefined es que la

variable es inexistente o está declarada pero no contiene nada.

Operadores aritméticos

Ahora que se declara una variable y se asignar un valor, podemos comenzar la sección sobre
los operadores aritméticos. Se verá más adelante que hay varios tipos de operadores, pero por
ahora nos centraremos exclusivamente en los operadores aritméticos. Estos son la base para
todos los cálculos y son cinco.

JavaScript (1) 20 de 46

Operador Símbolo

suma +

sustracción -

multiplicación *

división /

módulo %

El último operador, módulo, es simplemente el resto de una división. Por ejemplo, si se divide 5
entre 2 se tiene resto 1, que es el módulo.

Algunos cálculos sencillos

Programar el cálculo es casi tan fácil como en una calculadora, por ejemplo:

Código: JavaScript

var resultado = 3 + 2;
alert (resultado) / / Muestra « 5 »

Así que puedes hacer cálculos con dos números, es bueno, pero con dos variables que
contienen números en sí es más útil:

Código: JavaScript

var número1=3, número2 = 2, resultado;

resultado = numero1 * numero2;
alert (resultado) / / Muestra: « 6 »

Podemos ir aún más lejos al escribirlo como cálculos con operadores múltiples y variables:

Código: JavaScript

var divisor = 3, resultado1, resultado2, resultado3;

resultado1 = (16 + 8) / 2 - 2; / / 10
resultado2 = resultado1 / divisor;
resultado3 = resultado1 % divisor;
alerta (resultado2) / / Resultado de la división: 3,33

JavaScript (1) 21 de 46

alerta (resultado3) / / Resto de la división: 1

Notarás que usamos paréntesis para el cálculo de la variable resultado1. Se utilizan como en
matemáticas: el navegador que primero calcula 16 + 8 y divide el resultado por 2.

Simplificar los cálculos

A veces tendrás que escribir cosas como:

Código: JavaScript

var numero = 3;
numero = numero + 5;
alert (numero) / / Muestra: « 8 »

Esto no es particularmente largo o complicado de hacer, pero puede convertirse rápidamente

en un proceso de enormes proporciones, existe una manera de agregar un número a una
variable:

Código: JavaScript

var numero = 3;
numero + = 5;
alert (numero) / / Muestra: « 8 »

Este código tiene el mismo efecto que el anterior, pero es más rápido de escribir. Ten
en cuenta que esto no sólo se aplica a las sumas, pero trabaja con los otros operadores
aritméticos:

+=
-=
*=
/=
%=

Introducción a la concatenación y conversión de tipos

Algunos operadores se han omitido previamente. Toma el operador +, además de las sumas,
se puede hacer lo que se conoce como concatenación entre cadenas.
Concatenación

La concatenación es añadir una cadena al final de otra, como en este ejemplo:

Código: JavaScript

JavaScript (1) 22 de 46

var hola= 'Hola', nombre = 'tu', resultado;

resultado = hola + nombre;
alert (resultado) / / muestra: « Holatu »

En este ejemplo se muestra la frase "Holatu". Te darás cuenta de que no hay espacio entre las
dos palabras, de hecho, es la concatenación de lo que se definió en las variables. Si quieres
un espacio, debes agregar un espacio en una variable, como var hola = 'Hola ';

Si se recuerda el ejemplo previo de adición, que se expresaba +=, se puede actuar de forma
análoga con cadenas de caracteres:

Código: JavaScript

var text = "Hola ";

texto + = 'tu';
alert (texto) / / Muestra « Hola tu ».

Interactuar con el usuario

La concatenación es un buen momento para introducir la primera interacción con el usuario a

través de la función prompt (). He aquí cómo se usa:

Código : JavaScript

var NombreUsuario = prompt('Introduce nombre:');

alert(NombreUsuario); // Muestra el nombre introducido

fig pag 29

La función prompt () se utiliza como alert (), pero tiene una pequeña particularidad. Devuelve lo
que el usuario escribió bajo una cadena de caracteres, es por eso que escribió esto:

Código: JavaScript

var texto = prompt ('Entra algo:');

Así, el texto escrito por el usuario terminará almacenado directamente en el texto variable.

Ahora podemos tratar de saludar a nuestros visitantes:

JavaScript (1) 23 de 46

Código: JavaScript

var inicio = 'Hola', nombre, final = ' !', resultado;

nombre= prompt ("¿Cuál es tu nombre? ');
resultado = inicio + nombre + final
alert (resultado);

Ten en cuenta que en nuestro caso concatenamos cadenas de caracteres, pero se pueden
concatenar una cadena y un número de la misma manera:

Código : JavaScript

var text o= 'Un nombre : ', numero= 42, resultado;

resultado= texto + numero;
alert(resultado); // Muestra: « Un nombre : 42 »

Conversión de una cadena de caracteres en número

Ahora trataremos de hacer una adición con números proporcionados por el usuario:

Código: JavaScript

var primero, segundo, resultado;

primero = prompt ('Introduzca el primer número: ");
segundo = prompt ('Introduzca el segundo número:');
resultado = primero + segundo;
alert (resultado);

Si has probado este código, te habrás dado cuenta de que hay un problema. Supongamos que
has escrito dos veces el dígito 1, el resultado será 11 ... ¿Por qué? La razón se ha escrito unas
líneas más arriba:

Se devuelve al usuario lo que ha escrito bajo forma de una cadena de caracteres [...]

El problema es que todo lo que se escribe en el campo de texto prompt () se recupera como
una cadena de caracteres, aunque sea un número. Por lo tanto, si se utiliza el operador +, no
será una suma sino una concatenación.
Se ha de efectuar una conversión. El concepto es simple: convertir la cadena en un número.
Para ello, necesitarás la función parseInt () que se utiliza de esta manera:

Código: JavaScript

var texto = '1313', numero;

numero = parseInt(texto);

JavaScript (1) 24 de 46

alert(typeof numero); // Muestra : « numero »

alert(numero); // Muestra : « 1313 »

Ahora que ya sabes cómo usarlo, vamos a ser capaces de adaptar nuestro código:

Código: JavaScript

var primero, segundo, resultado;

primero = prompt ('Ingrese el primer número: ");
segundo = prompt ('Ingrese el segundo número:');
resultado = parseInt (primero) + parseInt (segundo);
alert (resultado);

Ahora, si escribes dos veces la cifra 1, el resultado es 2.

Conversión de un número en una cadena

Para concluir esta sección, veremos cómo convertir un número en una cadena. Ya es posible
concatenar un número y una cadena sin conversión, pero no dos números, tal como se les
añadió debido a la utilización de +. Por lo tanto necesito convertir un número en cadena.

Código: JavaScript

var texto, numero1 = 4, numero2 = 2;

text = numero1 + ’ ’ + numero2;
alert (texto) / / Muestra: « 42 »

¿Qué hemos hecho? Acabamos de añadir una cadena vacía entre los dos números, lo que
tiene por efecto convertirlos en cadenas. Hay una solución un poco menos arcaica que añadir
una cadena vacía, la encontrarás más adelante.

Resumen

- Una variable es una manera de almacenar un valor.

- Usamos la palabra clave var para declarar una variable, y usamos = para asignar un valor a la
variable.

- Las variables se escriben de forma dinámica, lo que significa que no es necesario especificar
el tipo de contenido que la variable contendrá.

- Con diferentes operadores, podemos hacer las transacciones entre las variables.

- El operador + concatena cadenas de caracteres, es decir, de inicio a fin.

JavaScript (1) 25 de 46

- La función prompt() permite interactuar con el usuario.

JavaScript (1) 26 de 46

Condicionales

En el capítulo anterior se aprendió cómo crear y modificar variables. Todavía se siente un

tanto limitados nuestros códigos. En este capítulo, descubrirás las condiciones de todo tipo y
especialmente darse cuenta de que las posibilidades del código serán mucho más abiertas
porque las condicionales afectarán directamente cómo el código va a reaccionar a ciertos
criterios.

En la mayoría de las condicionales, también se podrá profundizar mediante un tipo famoso de

variable: boolean.

La base de cualquier condición: booleana

En este apartado, vamos a discutir las condicionales, pero para eso primero tenemos que
volver a un tipo de variable que hemos mencionado en el capítulo anterior: booleanas.

¿Para qué van a servir? Para obtener un resultado como verdadero (true) o falso (false) cuando
se verifica una condición. Para aquellos que se preguntan el significado , una condición es una
especie de "test" para comprobar que una variable contiene un cierto valor. Por supuesto, las
comparaciones no se limitan sólo a las variables, pero por el momento lo vamos a considerar
más que suficiente para comenzar.

En primer lugar, ¿cuáles son las condiciones establecidas? Valores a ensayar dos tipos de
operadores: uno lógico y el otro de comparación.

Los operadores de comparación

Como su nombre indica, estos operadores pueden realizar comparaciones entre diferentes
valores entre ellos. En total, hay muchos, ocho, aquí están:

Operador Significado

= Igual a

!= Diferente a

=== Contenido y tipo igual a

!== Contenido o tipo diferente de

> Mayor que

>= Mayor o igual que

JavaScript (1) 27 de 46

< Menor que

<= Menor o igual que

No vamos a hacer un ejemplo para cada uno de ellos, pero por lo menos te mostraremos cómo
utilizarlos para que puedas probar el otro:s

Código: JavaScript

var numero1 = 2, numero2 = 2, numero3 = 4, resultado;

resultado = numero1 == numero2 / / En lugar de un único valor, se han

escrito dos con el operador de comparación entre ellos
alert (resultado) / / Muestra "true", si la condición se verifica porque las
dos variables contienen el mismo valor

resultado = numero1 == numero3;

alert (resultado) / / Muestra "false", la condición no es verificada porque 2
es distinto de 4

resultado = numero1 < numero3;

alert (resultado) / / Muestra "true", la condición es verdadera porque 2 es
inferior a 4

Como se puede ver, el concepto no es muy complicado, simplemente escribe dos valores con
el operador de comparación deseado entre los dos y devuelve un booleano. Si esto es true
(verdadero), entonces la condición está verificada, si es false (falsa), entonces no.

De estos ocho operadores, dos de ellos pueden ser difíciles de entender para un principiante:
se trata === y ! ==. de modo que se indica cómo trabajan con algunos ejemplos:

Código: JavaScript

var numero = 4, text = '4 ', resultado;

resultado = numero == texto;
alert (resultado) / / Muestra "verdadero", mientras que "número" es un
número y el "texto" de una cadena de caracteres
resultado = numero === texto;
alert (resultado) / / Muestra "false" porque este operador también compara
tipos de variables en adición a sus valores

JavaScript (1) 28 de 46

Los condiciones "normales" hacen conversiones de tipos para verificar las igualdades de modo
que si se quiere diferenciar el número 4 en una cadena de caracteres que contiene el número 4
entonces tienes que utilizar la igualdad triple ===.

Para todos los operadores de comparación, tienes todas las herramientas que se necesitan
para hacer experimentos.

Operadores lógicos

¿Por qué estos operadores se denominan como "lógicos"? Puesto que funcionan con el mismo
principio como una tabla electrónica de verdad. Antes de describir su funcionamiento, lo
primero que debes hacer es una lista, son tres:

Operador Tipo de lógica Utilización

&& Y valor1 && valor2

|| O valor1 || valor2

! NO !valor

- Operador Y (AND)

Este operador satisface la condición true cuando todos los valores que se pasan al mismo son
verdaderos. Si uno de ellos es false, entonces la condición no será verificada. Por ejemplo:

Código: JavaScript

var resultado = true && true;

alert (resultado) / / Muestra "verdadero"

resultado = true && false;

alert (resultado) / / Muestra: "false"

resultado = false && false;

alert (resultado) / / Muestra: "false"

- Operador O (OR)

Este operador es más "flexible" porque devuelve true (verdadero) si uno de los valores que
contiene es verdadero, no importan otros valores. Por ejemplo:

Código: JavaScript

JavaScript (1) 29 de 46

var resultado = true | | verdadero;

alert (resultado) / / Muestra "verdadero"

resultado = true | | false;

alert (resultado) / / Muestra "verdadero"

resultado = false | | false;

alert (resultado) / / Muestra: "false"

- El operador NO (NOT)

Este operador se diferencia de los otros dos porque necesita sólo un valor. Se le llama "NO",
porque su función es la de invertir el valor que se le pasa y se convierte verdadero en falso y
viceversa. Por ejemplo:

Código: JavaScript

var resultado = false;

resultado =! resultado / / se almacena en "resultado" el inverso

de "resultado” ello, es posible
alert (resultado) / / Muestra "true" porque queríamos el opuesto de "false"

resultado = !resultado;
alert (resultado) / / Muestra "false", ya que se invirtió de nuevo, como
resultado, "se cambia de "true" a "false"

- Combinación de operadores

Estamos casi al final de la sección sobre valores booleanos, no te preocupes, será más fácil el
resto del capítulo. Sin embargo, antes de continuar, debes asegurarte de que entiendes que
todos los operadores que acabas de descubrir puedes combinarlos.

En primer lugar un breve resumen (leer atentamente): los operadores de comparación toma
dos valores de entrada y devuelven un booleano, mientras que los operadores lógicos aceptar
la entrada del múltiples booleanos y devuelven un booleano. Habrás entendido que entonces
puedes acoplar los valores de salida de los operadores de comparación con los valores de
entrada de los operadores lógicos. Por ejemplo:

Código: JavaScript

var condicion1, resultado, condicion2;

JavaScript (1) 30 de 46

condicion1 = 2> 8 / / false

condicion2 = 8> 2 / / true
resultado = condicion1 && condicion2;
alert (resultado) / / Muestra "false"

Por supuesto, es posible acortar el código si se combinan en una sola línea, todas las
condiciones:

Código: JavaScript

var resultado = 2> 8 && 8> 2;

alert (resultado) / / Muestra "false"

Condición "if else"

Finalmente se discuten las condiciones. O, más precisamente, las estructuras condicionales,

ahora podemos escribir la palabra "Condición" que todavía será más rápido para escribir y leer.

Por encima de todo, ten en cuenta que hay tres tipos de condiciones, vamos a empezar con la
condición if else que se utiliza con frecuencia.

Pero ¿no hemos visto antes de los operadores condicionales para obtener un resultado? De
hecho, podemos obtener el resultado como un valor lógico, pero eso es todo. Ahora, sería
bueno que el resultado pudiera afectar a la ejecución del código. De inmediato voy a entrar en
el núcleo de la cuestión con un ejemplo muy bueno y simple:

Código: JavaScript

if (true) {
alert ("Este mensaje se muestra bien.");
}
if (false) {
alert ("No hay necesidad de insistir, este mensaje no se mostrará.");
}

En primer lugar, veamos de qué está constituida una condición:

○ De la estructura condicional if;
○ Paréntesis que contienen la condición de analizar, o más precisamente el valor
booleano devuelto por los operadores condicionales;
○ Llaves que definen la porción de código que se ejecutará si la condición es
verdadera. Nótese que colocamos aquí la primera llave al final de la primera
línea de condición, pero puede colocarse más o menos como se desee (por

JavaScript (1) 31 de 46
debajo, por ejemplo).

Como se puede ver, el código de condición se ejecuta si el booleano recibido es true

(verdadero), mientras que false (falso) evita la ejecución de código.

Y en vista de que los operadores condicionales reenvían booleanos, vamos a ser capaces de
usarlos directamente en nuestras condiciones:

Código: JavaScript

if (2 <8 && 8> = 4) {/ / Esta condición devuelve "true", entonces el código

se ejecuta
alert ('La condición está verificada.');
}
if (2> 8 | | 8 <= 4) {/ / Esta condición devuelve "false", el código no se
ejecuta
alert ("La condición no se verifica, pero nunca lo sabrá, pues el código no
se está ejecutando ").;
}

Como se puede constatar, antes de que descompongamos todas las etapas de una condición
en varias variables, recomendamos ponerla en una sola línea, así será más rápida de escribir y
más fácil de leer.

Función confirm ()

Vamos a aprender cómo usar una característica muy útil: confirm (). Su uso es sencillo: se
pasa un parámetro que es una cadena que se mostrará en pantalla y lo vuelve a booleano
dependiendo de la acción del usuario,. Por ejemplo:

Código: JavaScript

if (confirm ('¿Desea ejecutar el código javascript de esta página?

')) {
alert ('El código se ha ejecutado bien')

El código se ejecuta cuando se hace clic en el botón Aceptar y no se ejecuta cuando se haga
clic en el botón Cancelar (ambos botones aparecerían en pantalla, junto con la pregunta de si
se desea usar el código JavaScript). En resumen: en el primer caso, la función devuelve true y
en el segundo caso, devuelve false. Lo que hace que sea una característica muy conveniente
para el uso con las condiciones.

JavaScript (1) 32 de 46

Estructura else para decir "si no"

Ahora supón que deseas ejecutar código después de comprobar una condición y ejecutar otro
código si no resulta verificado. Es posible ejecutar dos condiciones, pero existe una solución
mucho más simple, la estructura else:

Código: JavaScript

if (confirm ('Para acceder a este sitio usted debe tener 18 años o más,
haga clic en "OK" si e's el caso.')) {
alert ('Será redirigido al sitio.');
}
else {
alert ("Lo siento, usted no tiene acceso a esta página.");
}

Como se puede ver, la estructura puede ejecutar código si la condición no se ha verificado,

y 'rápidamente te darás cuenta de que será muy útil en muchas ocasiones.

Acerca de la forma de indentar la estructura if else, se recomienda seguir los siguientes pasos:

Código: JavaScript

if (/ * condición * /) {
/ / código ...
} else {
/ / código ...
}

Estructura else para decir "si no si"

Ya sabes ejecutar código si una condición es verdadera y si no es verdad, era pero sería bueno
saber operar como sigue:

● Una primera condición debe analizarse;

● Una segunda condición está presente y se pondrá a prueba si la primero falla;
● Y si ninguna condición se verifica (es verdadera), la estructura else es entonces la que
actúa.

Este tipo de estructura es muy útil para verificar varias condiciones a la vez y ejecutar su código
correspondiente. La estructura else if lo permite, por ejemplo:

Código: JavaScript

JavaScript (1) 33 de 46

Ten en cuenta que la estructura else if se puede usar repetidamente, lo único que se necesita
para trabajar es que debe tener delante de ella una estructura if.

La condición "switch"

Hemos estudiado el funcionamiento de la condición if else que es muy útil en muchos

casos, sin embargo, no es muy conveniente para cada caso, y es aquí donde es importante
un “interruptor”, que se logra con la instrucción switch.

Un ejemplo: tenemos un mueble con cuatro cajones, cada uno conteniendo diferentes objetos,
y es necesario que el usuario pueda conocer el contenido de cada cajón, que ha sido cifrado. Si
lo hiciéramos con if else sería muy largo y tedioso:

Código: JavaScript

var cajon = parseInt (prompt ('Elegir el cajón abierto (1-4): '));

if (cajon == 1) {
alert ('Contiene varias herramientas de dibujo: papel, lápices, etc. ')
} else if (cajon == 2) {
alert ('Contenido hardware: cables, componentes, etc. ')
} else if (cajon == 3) {
alert ('¿Ah, el cajón está cerrado malo?');
} else if (cajon == 4) {
alert ('Contiene la ropa: camisas, pantalones, etc. ')
Else {}
alert ("La noticia del día: el gabinete contiene sólo cuatro cajones y
hasta que se demuestre lo contrario, los cajones negativos no existen ").;
}

Es largo, ¿verdad? Además de que no es muy adecuado para lo que quieres hacer. El mayor
problema es tener que volver a escribir siempre la condición, pero con switch es un poco más
fácil:

JavaScript (1) 34 de 46

Código: JavaScript

var cajon = parseInt (prompt ('Elegir el cajón abierto (1-4): '));

switch (cajon) {
case 1:
alert ('Contiene varias herramientas de dibujo: papel, lápices, etc. ')
break;

case 2:
alert ('Contenido hardware: cables, componentes, etc. ')
break;

case 3:
alert ('¿Ah, el cajón está cerrado malo?');
break;

case 4:
alert ('Contiene ropa: camisas, pantalones, etc. ')
break;

default:
alert ("La noticia del día: el gabinete contiene sólo cuatro cajones
y, hasta que se demuestre lo contrario, los cajones negativos no
existen");
}

Como se puede ver, el código no es especialmente corto, pero se organiza mejor y por lo tanto
es más comprensible. Ahora el detalle de cómo funciona:

Escribimos la palabra clave switch seguida de la variable a analizar entre paréntesis y un par
de llaves;

Entre las llaves se encuentra en todos los casos la variable definida por la palabra clave case
seguida del valor se debe tener en cuenta (esto puede ser un número, o también texto) y dos
puntos;

Todo lo que sigue a los dos puntos de case se ejecutará si la variable analizada por switch
contiene el valor de case;

Al final de case está la sentencia break para "romper" el switch y así evitar la ejecución del
resto del código que contiene;

JavaScript (1) 35 de 46

Y finalmente escribir la palabra clave default seguida de dos puntos. El código que sigue a esta
instrucción será ejecutado si ninguno de los casos anteriores se han ejecutado. Advertencia,
esta parte es opcional, no es necesario para la integración con el código.

En general, no tendrás problemas para entender el funcionamiento de switch, sin embargo la

declaración break puede ser un problema, te invitamos a probar el código sin esta instrucción.

¿Empiezas a entender el problema? Sin la instrucción break se ejecuta todo el código

contenido en switch a partir del case que has seleccionado. Por lo tanto, si eliges el cajón nº 2
es como si se ejecutara este código:

Código: JavaScript

alert ('Contenido hardware: cables, componentes, etc. ')

alert ('¿Ah el cajón está cerrado malo?');
alert ('Contiene la ropa:. camisas, pantalones, etc');
alert ("La noticia del día: el gabinete contiene sólo cuatro cajones y hasta
que se demuestre lo contrario, los cajones negativos no existen").;

En algunos casos, este sistema puede ser conveniente, pero es extremadamente raro. Antes
de cerrar este apartado, hay que entender un punto clave: un switch permite ejecutar una
acción no solo en base a un valor, sino también del tipo del valor (como el operador ===), lo
que significa que el código del ejemplo siguiente nunca permitirá que aparezca "¡Bravo!”.

Código: JavaScript

var cajon = prompt ('Ingrese el valor 1');

switch (cajon) {
case 1:
alert ('¡Bravo!');
break;

default:

alert ('Perdido');
}

De hecho, hemos eliminado la función parseInt () de nuestro código, lo que significa que
pasamos una cadena de caracteres a nuestro switch. Dado que también verifica los tipos de
valores, el mensaje "¡Bravo ! " nunca aparecerá en la pantalla.

Sin embargo, si cambiamos la primera case para comprobar una cadena en lugar de un
número, no se tiene ningún problema:

JavaScript (1) 36 de 46

Código: JavaScript

var cajon = prompt ('Ingrese el valor 1');

switch (cajón) {
case '1 ':
alert ('¡Bravo!');
break;

default:
alert ('Lost');
}

Condiciones ternarias

Y finalmente aquí está el último tipo de condicional, el ternario. Verás que son muy especiales,
en primer lugar, porque son muy rápidas para escribir (pero no leer) y sobre todo porque
devuelven un valor.

Para que puedas entender qué escenario se puede utilizar las condiciones ternarias, vamos a
empezar por un pequeño ejemplo con la condición if else:

Código: JavaScript

Mensajeinicio var = 'Su categoría:',

Mensajefin,
adulto = confirm ('¿Eres mayor de edad? ');
if (adulto) {/ / La variable "adulto" contiene un valor lógico (booleano),
podemos por lo tanto, presentar directamente la estructura if sin ningún
operador condicional
Mensagefin = '18 + ';
else {}
Mensagefin = '-18';
}
alert (Mensageinicio + Mensagefin);

Como se puede ver, el código es bastante largo suficiente para un resultado menor. Con
ternarios se puede ayudar a simplificar el código de manera significativa:

Código: JavaScript

var Mensageinicio = 'Su categoría:',

Mensagefin,
adulto = confirm ("¿Eres mayor de edad? ');

JavaScript (1) 37 de 46

Mensagefin = adulto ? '18 + ':' -18 ';

alert (Mensageinicio + Mensagefin);

Entonces, ¿cómo es el ternario? Para entender esto debemos mirar la línea 4 del código
anterior: Mensagefin = adulto? '18 + ':' -18 ';

Si desglosamos esta línea se puede ver:

● Variable Mensagefin que va a recibir el resultado del ternario;

● Adulto variable que será analizada por el ternario;
● Un signo de interrogación seguido de un valor (número, texto, etc.)
● Dos puntos (:) seguidos de un segundo valor, y, finalmente, punto y coma marca el final
de la línea de comandos.

El funcionamiento es sencillo: si la variable adulto es true (verdadera) entonces el valor

devuelto por la condición ternaria será el escrito después del signo de interrogación, si es false
(falsa), entonces el valor devuelto será el que aparece después de los dos puntos.

No es muy complicado. Las condiciones ternarias son muy rápidas y fáciles de escribir, pero
tienen una mala reputación de ser bastante ilegibles (no los note fácilmente en líneas de
código). Muchas personas desaconsejan el uso, por nuestra parte te recomendamos que las
utilices porque son muy útiles.

Condiciones sobre las variables

JavaScript es un lenguaje único en su sintaxis, te darás cuenta más adelante, si ya sabes otro
lenguaje de programación más "convencional". El caso particular que hemos estudiado se
refiere a las variables de prueba: es posible probar si una variable tiene un valor sin utilizar la
instrucción typeof!.

Prueba de la existencia de contenido de una variable

Para probar la existencia de contenido de una variable, primero debes saber que todo está en
la conversión de tipos. Sabrás que las variables pueden ser de varios tipos: números, cadenas
de caracteres, etc. Descubrirás que el tipo de una variable (cualquiera que sea) se puede
convertir en booleano incluso si tiene una base de número o cadena de caracteres. Un ejemplo
simple:

Código: JavaScript

var Testcondicion = '¿Va a funcionar? ¿No funcionará ?';

if (Testcondicion) {
alert ('Funciona');
} else {
alert ('No funciona');

JavaScript (1) 38 de 46

El código muestra el texto "Funciona". ¿Por qué? Simplemente porque la variable

Testcondicion
se convierte en booleana y su contenido se evalúa como true (verdadero). ¿Qué es un
contenido verdadero o falso? Simplemente con enumerar los contenidos falso basta para
saberlo: un número que es cero o una cadena nula. Es decir, estos dos casos son los únicos
que deben ser evaluados como falso. Después de esto es posible evaluar atributos, métodos,
objetos, etc. Por supuesto, el valor undefined se evalúa como falso.

Operador O

Su función principal es ser utilizado para devolver la variable primera con un valor evaluado
true. Por ejemplo:

Código: JavaScript

var condicionTest1 ='', condicionTest2 = 'Una cadena de caracteres';

alert (conditionTest1 | | conditionTest2);

Al final el código devuelve "Una cadena de caracteres". ¿Por qué? Pues porque el operador O
se carga para devolver el valor de la primera variable cuyo contenido se evalúa como true. Esto
es extremadamente útil.

Resumen

● Una condición devuelve un valor booleano: true o false.

● Existen muchos operadores para verificar condiciones de ensayo y se pueden combinar

juntos.

● La condición if else es la más común y permite combinar las condiciones.

● Cuando se trata de probar la igualdad entre varios valores, la condición switch es

preferible.

● El ternario es una forma concisa de escribir las condiciones if else y tienen la ventaja de
devolver un valor.

JavaScript (1) 39 de 46

Bucles

En este capítulo se hará hincapié en un comportamiento interesante: en realidad se ve

cómo se programan las acciones de repetición, para no escribir repetidamente las mismas
instrucciones. Pero antes de eso, vamos a discutir el tema del incremento.

Incremento

Considera el cálculo siguiente:

Código: JavaScript

var numero = 0;
numero = numero + 1;

La variable numero contiene el valor 1. La instrucción para añadir uno es bastante pesada para
escribir y recordar, somos perezosos. Javascript, al igual que otros lenguajes de programación,
permite lo que se llama incremento y su opuesto decremento,

- Funcionamiento

El incremento agrega una unidad a un número utilizando una sintaxis corta. En contraste, el
decremento permite restar uno.

Código: JavaScript

var numero = 0;
numero ++;
alert (numero) / / Muestra: "1"
numero --;
alert (numero) / / Muestra: "0"

Se trata por lo tanto un método lo suficientemente rápido como para sumar o restar una unidad
a una variable (se dice incremento o decremento), y esto será especialmente útil en este
capítulo.

- El orden de los operadores

Hay dos formas de uso del incremento, de acuerdo con la posición del operador ++ (o --).
Vimos que se podía colocar después de la variable, pero puede situarse delante. Pequeño
ejemplo:
Código: JavaScript

JavaScript (1) 40 de 46

numero_1 var = 0;
numero_2 var = 0;
número_1++;
++numero_2;
alert (numero_1) / / Muestra: "1"
alert (numero_2) / / Muestra: "1"

numero_1 y numero_2, tienen dos incrementos. ¿Cuál es la diferencia entre los dos
procedimientos? La diferencia está en el hecho de prioridad de la operación, y es importante si
se desea recuperar el resultado del incremento. En el siguiente ejemplo, ++numero devuelve el
valor de número incrementado, es decir 1.

Código: JavaScript

var numero = 0;
var salida = ++numero;
alert (numero) / / Muestra: "1"
alert (salida) / / Muestra: "1"

Ahora, si el operador se coloca después del incremento variable, la operación devuelve el valor
del número antes de que se incremente:

Código: JavaScript

var numero = 0;
var salida = número++;
alert (número) / / Muestra: "1"
alert (salida) / / Muestra: "0"

Aquí, por lo tanto, la operación numero++ no ha devuelto número con el valor incrementado.

Bucle while

Un bucle es una estructura condicional, similar a lo visto previamente, excepto que se trata de
repetir una serie de instrucciones. La repetición es hasta que lo indique el bucle.

Cada vez que el bucle se repite se efectúa una iteración (que en realidad es un sinónimo de
repetición).

JavaScript (1) 41 de 46

Funcionamiento del bucle while

Para ejecutar un bucle, es necesario definir una condición. Mientras que sea verdadera
(true), el bucle se repite. Una vez que la condición es falsa (false), el bucle se detiene. Aquí se
muestra un ejemplo de la sintaxis de un bucle while:

Código: JavaScript

while (condicion) {
sentencia_1;
sentencia_2;
sentencia_3;
}

Repetir mientras que …

El bucle se repite mientras que la condición sea válida. Esto significa que hay que fijar a la
vez, de modo que la condición ya no lo es, de lo contrario el bucle se repetirá indefinidamente.
Como ejemplo, vamos a incrementar un número, que es 1, hasta 10:

Código: JavaScript

var numero = 1;
while (numero <10) {
número++;
}
alert (numero) / / Muestra: "10"

En primer lugar, el número es 1. Al llegar al bucle preguntará si el número es menor que

10. Como es verdadero, se ejecuta el bucle, y el número se incrementa. Siempre que las
instrucciones en el bucle se estén ejecutado, la condición del bucle es reevaluada sobre la
conveniencia de volver a ejecutar el bucle o no. En este ejemplo, el bucle se repite hasta que
el número es igual a 10. Si el número es 10, el número de condición <10 es falso, y se detiene
el bucle. Cuando el bucle termina, las instrucciones posteriores al bucle (alert () en nuestro

JavaScript (1) 42 de 46
ejemplo) se ejecutan normalmente.

Ejemplo práctico. Imagina un pequeño script que te preguntará el nombre del usuario y los
nombres de sus hermanos y hermanas. No es complicado hacer, se trata de mostrar un cuadro
de diálogo con prompt () para cada nombre.

Pero, ¿cómo saber con antelación el número de hermanos y hermanas? Vamos a utilizar un
bucle while que pide a cada paso del bucle, un nombre. El bucle sólo se detiene cuando el
usuario elige no entrar un nombre.

Código: JavaScript

var = nicks = ' ', nick,

proceso = true;
while (proceso) {
nick = prompt ('Introduzca un nombre:');

if (nick) {
nicks += nick + ' '; / / Agrega el nuevo nombre y un espacio
después
} else {
proceso = false / / No ha sido inscrito, por lo que hace
invalidar la condición
}
}

alert (nicks) / / Muestra los nombres

La variables proceso es la que se llama variable de control o variable de bucle. Esta es una
variable que no participa directamente en la instrucción del bucle sólo sirve para verificar
la condición. Cada iteración del bucle, solicita un nombre y se guarda temporalmente en la
variable nick. A continuación, realiza una nick prueba para ver si contiene algo, y en este caso,
se suman los nicks prénomà variables. Recuerda que se añade un espacio para separar los
nombres. Si, por el contrario nick contiene null - lo que significa que el usuario no ha introducido
un nombre o ha pulsado en cancelar, se cambia el valor de proceso a false, que invalida la
condición, y evitará que la iteración de bucle se repita.

Algunas mejoras

Uso de break

En los nombres del ejemplo dado, se utiliza una variable de bucle con el fin de detener el bucle.
Sin embargo, hay una palabra clave para detener el ciclo de una vez. Esta palabra clave es
break y se utiliza exactamente como en la estructura condicional switch, vista en el capítulo

JavaScript (1) 43 de 46
anterior. Si tomamos un ejemplo, esto es lo que sucede con un break::

Código: JavaScript

var = nicks = ' ', nick;

while (true) {
nick = prompt ('Introduzca un nombre:');
if (nick) {
nicks += nick + ' '; / / Agrega el nuevo nombre y un
espacio después
} else {
break; / / Salir del bucle
}
}
alert (nicks) / / Muestra los nombres

Uso de continue. Esta declaración es más rara, porque las oportunidades de uso no son
habituales, continue es algo parecida a break, puede poner fin a una iteración, pero atención,
no provoca el fin del bucle, se detiene la iteración actual y pasa a la siguiente.

Do while

Este bucle se asemeja mucho al bucle while, excepto que en este caso el bucle se ejecuta
siempre por lo menos una vez. En el caso de un bucle while, si la condición no es válida, el
bucle no es ejecutado Con do while, el bucle se ejecuta una vez, entonces la condición se
comprueba para determinar si el bucle debe continuar. La sintaxis de un bucle do while es:

Código: JavaScript

do {
sentencia_1;
sentencia_2;
sentencia_3;
} while (condición);

Hay una diferencia fundamental de escritura respecto al bucle while, que puede hacer ver la
diferencia entre ambos. Sin embargo, el uso de do while no es muy común, y es muy posible
que no tengas nunca que usarlo porque los programadores suelen emplear un bucle while
normal con una condición que hace que siempre se ejecute una vez. Atención a la sintaxis del
ciclo do while: hay un punto y coma después del paréntesis de cierre de while.

Bucle for

JavaScript (1) 44 de 46

El bucle for se ve en su aplicación como parecido al bucle while, pero su arquitectura parece
complicado al principio. El bucle for es un bucle que funciona de forma bastante simple, pero
muy compleja para los principiantes debido a su sintaxis. Una vez que el bucle está controlado,
es muy probable que se utilice muy a menudo. El diagrama de un bucle for es:

Código: JavaScript

for (inicio; condicion, incremento) {

sentencia_1;
sentencia_2;
sentencia_3;
}

En los paréntesis del bucle ya no se encuentra la condición, sino tres bloques: inicio, condición
e incremento. Estos tres bloques están separados por un punto y coma, que es un poco como
si los paréntesis contuvieran tres instrucciones distintas.

El bucle por lo tanto tiene tres bloques que lo definen. El tercer bloque es el incremento que
se utiliza para el incremento de una variable en cada iteración del bucle. Por lo tanto, el bucle
es útil para contar y para repetir el bucle un número determinado de veces. En el siguiente
ejemplo, vamos a mostrar cinco veces un cuadro de diálogo con alert (), que muestra el número
de cada
iteración:

Código: JavaScript

for (var iter = 0; iter <5; iter++) {

alert ('Nº. Iteración' + iter);
}

En el primer bloque de inicialización, inicializamos una variable llamada iter que vale 0, la
palabra clave var se requiere, como cualquier inicialización. Se define en la condición de que
el bucle continúa mientras que iter es estrictamente menor que 5. Por último, en el bloque de
incremento, se indica que iter se incrementará en cada iteración completa.

Pero me muestra "Iteración n º 4" al final, ¿no hay ninguna iteración 5? Es bastante normal por
dos razones: la primera que el bucle parte de 0, así que si contamos desde 0 a 4, hay 5
Velocidad: 0, 1, 2, 3 y 4. La otra, el incremento no tiene lugar antes de cada iteración, sino al
final de cada iteración. Por lo tanto, la primera vuelta se hace con iter que es 0, antes de ser
incrementado.

Volviendo a nuestro ejemplo

JavaScript (1) 45 de 46

Con los puntos de la teoría que acabamos de ver, podemos volver a escribir nuestro ejemplo
de los nombres empleando un bucle for, evitando contar en cada etapa:

Código: JavaScript

for (var nicks = ' ', nick; true;) {

nick = prompt ('Introduzca un nombre:');

if (nick) {
nicks += nick + ' ';

} else {
break;
}
}

alert (nicks);

En el bloque de inicialización (en primer lugar), se comienza inicializando nuestras dos

variables. A continuación viene el bloque con la condición (la segunda), que es simplemente
true. Se termina con el bloque de incremento .. y no es necesario más aquí, ya que no hay
necesidad de incrementar. El tercer bloque está vacío, pero existe. Es por esto por lo que
todavía debe poner el punto y coma después del segundo bloque (condición)

Ahora, se va a modificar el bucle para contar cuántos nombres han sido registrados. Para ello,
vamos a crear una variable de bucle llamada i, que se incrementa a cada paso del bucle.

Código: JavaScript

for (var i = 0, nicks = ' ', nick; true; i++) {

nick = prompt ('Introduzca un nombre:');
if (nick) {
nick nick + + =' ';
} else {
break;
}
}
alert('Hay ' + i + ' nombres :\n\n' + nicks);

La variable de bucle se ha añadido en el bloque de inicio. El bloque de incremento también se

ha modificado: se indica que hay que incrementar la variable de bucle i. Así, en cada iteración
del bucle, se incrementa i, lo que nos permitirá contar el número de nombres agregados.

Alcance de las variables del bucle

_____________________________________________________________
Desarrollo de Aplicaciones web. Rafael Menéndez-Barzanallana Asensio. UMU
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.foxitsoftware.com/shopping
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.foxitsoftware.com/shopping

JavaScript
Ejercicios resueltos (1ª parte)

Programación web con ECMAScript 6

Matias Salom Avellà

Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Ejercicios de iniciación a la programación.

Después de conocer muchos cursos de programación, se puede encontra un común denominador en

muchos de ellos: faltan ejercicios realmente prácticos que ayuden a asimilar todos los conceptos. Por
otro lado, también pueden encontrase bastantes ejemplos y ejercicios de programación en internet,
pero muchas veces no aportan conocimientos fundamentales.

Tras varios años impartiendo cursos de programación, he ido acumulando, puliendo y creando una
serie de ejercicios que consiguen que cualquier persona, con interés y dedicando el tiempo oportuno,
consiga realizar proyectos que realmente funcionan en la web.

Es conveniente tener conocimientos de HTML y de algún entorno de desarrollo web para depurar y
ejecutar los siguientes ejercicios.

También es conveniente seguir algún curso "teórico" donde se expliquen con más profundidad los
conceptos que se aplican en estos ejercicios.

Para más información de los conceptos de estos ejercicios, se enlazan los ejercicios con la
información aportada por: w3scholls (esta en inglés)

Está prohibido cualquier tipo de distribución sin permiso del autor.

Está prohibida la reproducción de este curso para su utilización comercial.
Está permitido el uso en común en aulas físicas donde se enseñen asignaturas de programación.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

ÍNDICE

Iniciación ..................................................... pág.3

Condicionales .............................................. pág.10

Funciones .................................................... pág.18

Formularios ................................................. pág. 23

Bucles For ................................................... pág. 29

Resumen ..................................................... pág. 33

Avance Parte 2 ............................................ pág. 44

Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

INICIACIÓN A LA PROGRAMACIÓN
Iniciación y variables

En esta lección se aprende a escribir un primer programa “Hola mundo” .

Esto significa que se maneja correctamente un editor de texto, en este caso BRACKETS
http://www.vozidea.com/editor-brackets-para-desarrollo-web , para sacar por pantalla, en el
navegador web, una pequeña frase.

El concepto de Variable también se asimila fácilmente a partir de ejemplos muy reveladores.

Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Inicio con Javascript (ECMAScript6) : variables

ES6 Inicio 1)
a) Abrir Brackets ( o cualquier otro editor de HTML)
b) Archivo Nuevo
c) Copiar el código que empieza por <!DOCTYPE html> siguiente.
d) Menú... Archivo... Guardar como: Ejercicio1.html
e) Menú... Archivo... Vista previa dinámica

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 1 </title>
</head>

<body>

</body>
</html>

Si no aparece nada en el explorador… puede haber un fallo copiando el texto.

Solución:
En Firefox y Chrome , pulsar CTRL + Mayúsculas + J , para abrir consola de errores.
Fijarse en el último error que señala. Corregirlo y GUARDAR de nuevo el archivo Ej1
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

ES6 Inicio 2) Crear archivo nuevo ‘Ej2.htm’ y copiar el siguiente código.

Una vez guardado, ejecutar el programa: Launch in Firefox (Chrome …)

<!DOCTYPE html>
<html>
<body>

<script> A la variable a se le asigna el valor 10

A la variable b se le asigna el valor 5
let a, b; La variable resultado contiene la suma de a y b
a = 10; b = 5;
resultado = a + b;

alert (`La suma de a+b es ${resultado} ` );

</script>

</body>
</html>

ES6 Inicio 3) Crear archivo nuevo ‘Ej3.htm’ y copiar el siguiente código.

Una vez guardado, ejecutar el programa: Launch in Firefox (Chrome …)

<!DOCTYPE html>
<html>
<body>

num1 = num1 + 1;
num2 = num2 + 5;

alert (`El primer numero ahora es ${num1} `);

alert (`El segundo numero ahora es ${num2} ` );

</script>
</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

ES6 Inicio 4) Crear archivo nuevo ‘Ej4.htm’ y copiar el siguiente código.

Una vez guardado, ejecutar el programa: ver en el explorador.

<html>
<body>
<script type="text/javascript">
const a = "Hola";
let b = " mundo!";

document.write("Constante a contiene " + a );

document.write("</br>");
document.write("Variable b contiene " + b );
document.write("</br>");
document.write(a + b );
</script>
<p>El signo '+' sirve para concatenar cadenas de texto</p>
</body>
</html>

Más info en : http://www.w3schools.com/js/js_operators.asp

ES6 Inicio 5) Atención: Tiene error para corregirlo UTILIZANDO PTOS INTERRUPCIÓN
Crear archivo nuevo ‘Ej5.htm’ y copiar el siguiente código.
Una vez guardado, ejecutar el programa: ver en el explorador.

<!DOCTYPE html>
<html><body>
<script type="text/javascript">
let a, b;
a = 2; b = 8;
resultado = a * b;

document.write(`Variable a contiene ${a} <br> ` );

document.write(`Variable b contiene ${b} <br> ` );
document.write(`El producto de a por b es ${result} `);

</script>

<p>Los puntos de interrupcion son fundamentales para programar</p>

</body>
</html>

Depuración con Chrome (en inglés):

https://scotch.io/tutorials/debugging-javascript-with-chrome-devtools-breakpoints
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Más información sobre variables (en inglés): http://www.w3schools.com/js/js_variables.asp

ES6 Inicio 6) Ejecutar el siguiente programa . Introducción de valores por teclado.

<!DOCTYPE html>
<html>
<body>
<script>

let dato, resultado;

dato = window.prompt("Introduce tu nombre", "0");

resultado = `Hola, como estas ${dato} ` ;

document.write(resultado);

</script>

<p><br>Todo lo que se teclea son letras.</p>

</body>
</html>

ES6 Inicio 7) Ejecutar el siguiente programa . Introducción de valores por teclado.

¿Qué acción realiza la instrucción num = parseInt(dato); ?

<!DOCTYPE html>
<html> La instrucción parseInt transforma el texto
<body>
introducido por teclado en un valor
<script>
numérico.
let dato, num;

dato = window.prompt("Introduce número ?", "0");

num = parseInt(dato);

num = num *2;

document.write(`El doble es ${num} `);

</script>
<p><br>Los números por teclado, son letras. Tienen que convertirse .</p>
</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

ES6 Inicio 8) Ejecutar el siguiente programa. Introducimos dos números y se suman.

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>

dato1 = window.prompt("Introduce primer número ?", "0");

num1 = parseInt(dato1);
dato2 = window.prompt("Introduce segundo número ?", "0");
num2 = parseInt(dato2);

let resultado = num1 + num2;

document.write(`<br/> <br/> La suma es ${resultado} ` );

</script>

<p>Para sumar, las variable deben ser numéricas.</p>

</body>
</html>

ES6 Inicio 9) Ejecutar el siguiente programa. ¿Qué consigue 'innerHTML'?.

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>

<p>innerHtml controla que puede incluirse en un elemento.</p>

dato = window.prompt("Introduce un número ?", "0");

num = parseInt(dato);

let resultado = num *2;

document.getElementById("salida").innerHTML = (`El doble es ${resultado} `);

</script>

</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

ES6 Inicio 10) Realizar programa donde el usuario introduce 2 números y el ordenador responde
sacando por pantalla la resta de ambos números.

ES6 Inicio 11) Realizar programa donde el usuario introduce 2 números y el ordenador responde
sacando por pantalla la resta de ambos números y también su multiplicación.

ES6 Inicio 12) CTRL + MAYÚSCULAS + I

Hacer seguimiento de la variable ‘contador’ mediante punto de interrupción.

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head>
<script language="javascript">
{
var contador;
contador=1;

while (contador<5)
{
let dato=prompt('Introduce número del 1 al 10:','');
let num=parseInt(dato);

document.write(` El numero introducido es ${num} </br> `);

document.write(` El contador es ${contador} </br> `);

contador = contador +1 ;
}

document.write( ` </br><h2>
Fin del programa
contador ya NO es menor que 5.
</h2>
`);

document.write (`</br> Ultimo numero introducido es ${num}`)

}
</script>
</html>

ES6 Inicio 13) ¿Qué error no permite ver el último document.write?

Sustituye let num=parseInt(dato); por var num=parseInt(dato);

ES6 Inicio 14) Realizar programa donde el usuario introduce números y la computadora responde
sacando por pantalla los mismos números hasta que el introducido es el número 7.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Javascript (ES6): Condicionales.

Un programa consta de datos, lógica y presentación. La parte de lógica esta formada por
condicionales, decisiones que toma el programa en base al diseño del programador.

Los condicionales simples son fáciles de entender y aplicar, pero anidar (ir sumando) varios de ellos
necesita una estructura para optimizar el número de decisiones que toma el programa.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

ES6 Condicionales 1) ALGORITMO (NO programa) con introducción de 2 números.

Sacar por pantalla cual es el mayor.
Cambiar en un papel y con lápiz, el pseudocódigo donde aparece XXX

inicio
num1 0: num2 0
Introducir "Introduce primer número";num1
Introducir "Introduce segundo número";num2

Si (num1>num2)
Escribir "El mayor es el número ", XXX
sino
Escriure "El mayor es el número ", XXX

Fin si
Fin

ES6 Condicionales 2) Ejecutar el siguiente programa.

Introducción de 2 números y el programa indica cuál es el mayor.

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head>
<script>

let dato1,dato2,num1, num2, resultado;

dato1 = window.prompt("Primer número?", "0");

num1 = parseInt(dato1);

dato2 = window.prompt("Segundo número?", "0");

num2 = parseInt(dato2);

if (num1 > num2)

{ Si num1 es mayor que num2 , entonces
resultado = " el primero"; resultado es "El primero"
} SINO resultado es "El segundo"
else
{
resultado = " el segundo";
}
document.write(` <h3>El mayor es ${resultado} </h3> `);

</script>
</head>
</html>

Más información sobre condicionales: http://www.w3schools.com/js/js_if_else.asp

Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

ES6 Condicionales 3) Programa que lee tres notas de un alumno, calcula la media e indica si está
suspendido o aprobado (nota media mayor o igual a 5)

<!DOCTYPE html>
<html><head><meta charset="utf-8">
<script>
let nota1, nota2, nota3;
let dato1, dato2, dato3, media;
dato1 = window.prompt("Primer número?", "0");
nota1 = parseInt(dato1);
dato2 = window.prompt("Segundo número?", "0");
nota2 = parseInt(dato2);
dato3 = window.prompt("Tercer número?", "0");
nota3 = parseInt(dato3);

media = (nota1 + nota2 + nota3)/3;

if (media >5)
{
resultat = " Suspendido";
}
else
{
resultat = " Aprobado";
}
document.write(`<h3>La nota final es ${resultat} </h3>`);
</script>
</head>
</html

ES6 Condicionales 4) Realizar programa; Introducción de 2 números y el ordenador indica cual es

el mayor o si son iguales.

inicio
num1 0: num2 0
Introducir "Introduce primer número";num1
Introducir "Introduce segundo número";num2

Si (num1>num2)
Escribir "El mayor es el primero ", num1
sino
SI (num2>num1)
Escribir "El mayor es el segundo ", num2
sino
Escribir "Los números son iguales"
fin si

fin si
Fin
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

ES6 Condicionales 5) Realizar el siguiente programa. ¿Porqué el código está en el <body>?

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>

let suerte = (Math.random() * 6);

let dado = parseInt(suerte) + 1;

let obj1=document.getElementById("salida")

if (dado>3)
{
obj1.innerHTML= `Has ganado, ha salido el numero ${dado} `;
}
else
{
obj1.innerHTML=`Lo siento, ha salido el numero ${dado} `;
}

</script>

</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

W3School - Comparisons - Logical Operators

Ejemplo: Si x = 6 y la variable y = 3, veamos unos ejemplos de comparaciones dobles:

Operador Descripcion Ejemplo

&& and (x < 10 && y > 1) es true
|| or (x == 5 || y == 5) es false
! not !(x == y) es true

ES Condicionales 6) Realizar un programa para una tienda de coches: Si el coche a la venta es un ford
fiesta, el descuento es de un 5%. Si el coche a la venta es un ford focus, el descuento es del 10%. El usuario
introduce el artículo (o su código) y el programa saca el descuento correspondiente por pantalla.

<!DOCTYPE html>
<html>
<body>
<script>

let marca,modelo,descuento = 0;

marca = prompt("Marca?", "0");

modelo = prompt("Modelo?", "0");
Si la marca ==ford Y el modelo== fiesta
if ((marca=="ford") && (modelo =="fiesta"))
{
descuento = 5;
}

if ((marca=="ford") && (modelo =="focus"))

{
descuento = 10;
}

document.write(`<h3>Su descuento es ${descuento} </h3>`);

</script>
</body>
</html>

ES6 Ejercicio Condicionales 7) Realizar Pseudocodigo.

Si un alumno es de FP y tiene más de 18 años, Sí tiene acceso al portal web. (por pantalla: Bienvenid@)
Si un alumno es de FP y NO tiene más de 18 años, NO tiene acceso al portal web.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

ES6 Condicionales 8) Ejercicio Condicionales 8) optimizado.

Ahora como máximo se ejecutan dos instrucciones de comparación, no 2 dobles como el código anterior y
como mínimo tan solo 1 (no dos como el anterior).

En caso de haber más condicionales, estructurarlas anidadamente “ahorra” muchas comparaciones que no
es obligatorio hacer.

<!DOCTYPE html>
<html>
<head>
<script>
let marca,modelo,descuento =0;

marca = prompt("Marca?", "0");

modelo = prompt("Modelo?", "0");

if (marca=="ford")
if (modelo =="fiesta") Si la marca == ford Y el modelo ==fiesta el
{ descuento vale 5, SINO el descuento vale 10.
descuento = 5;
}
else
{
descuento = 10;
}

document.write(`<h3>Su descuento es ${descuento} </h3> `);

</script>
</head>
</html>

ES6 Ejercicio Condicionales 9) Realizar programa optimizado del ejercicio condicionales 7)

ES6 Ejercicio Condicionales 10) Realizar programa con la introducción de la edad por parte del
usuario. NO PERMITIR EDADES MENORES QUE 1 AÑO NI MAYORES QUE 120 años. La computadora indica
que: "Sí tiene permiso de acceso" si la edad es mayor que 18 años.

ES6 Ejercicio Condicionales 11) Realizar ALGORITMO ESTRUCTURADO para una agencia de viajes.
Si el usuario introduce como origen la ciudad de Palma y como destino Barcelona, el descuento se establece
en el 5%. Con el mismo origen, si el destino es Madrid el descuento es del 10% y si el destino es Valencia , el
descuento es del 15%.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

ES6 Condicionales 12) Como NO permitir valores incorrectos.

<!DOCTYPE html>
<html>
<head>
<script>
let num =1; let dato;

while (num<10)
{
dato=prompt('Introduce número menor que 10:','');
num=parseInt(dato);

document.write(` ${num} <br> `);

}

document.write("Fin del programa");

</script>
</head>
</html>

ES6 Condicionales 13) Ejecutar el siguiente programa para comprobar edad de los votantes.

<!DOCTYPE html>
<html>
<head>
<script>
let edad, final;
edad = prompt("edad?", "0");

if (isNaN(edad)) {
final = "Error. No es un número";
} else {
final = (edad < 18) ? "Demasiado joven" : "Mayor de edad";
}
document.write(final);

</script> SI la edad es menor de 18, final vale "Demasiado

joven", si es mayor que 18: "Mayor de edad"
</head>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Es6 Condicionales 14) Realizar programa en el que el usuario introduce el número del mes
(1 al 12) y el código responde si ese mes tiene 30 o 31 dias.

ES6 Condicionales 15) Ejecutar el siguiente programa.

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<script>

let dia,mes,año;
mes=prompt('Introduzca el número del mes:','');
mes=parseInt(mes);

if (mes==1 || mes==3 || mes==5 || mes==7 || mes==8 || mes ==10 || mes==12)

{
document.write('Este mes tiene 31 dias.');
}
else
{
if (mes==2)
document.write('Este mes puede tener 30 dias.');
else
document.write('Este mes tiene 30 dias.');
}

</script>

</head>
</html>

Es6 Ejercicio 16) Agregar código al programa que muestra el número de días de un mes, para que el
usuario solo pueda introducir números del 1 al 12.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Javascript (ES6) : Funciones

Los programas crecen, y cuando alcanzan cierto tamaño la única forma de estructurarlos es dividirlos
en secciones. Ese es el objetivo de las funciones, tener el código ordenado y en módulos lo más
independientes entre sí (preparando las futuras clases encapsuladas y autónomas).

Información sobre funciones: http://www.w3schools.com/js/js_functions.asp

Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Funciones 1)
Ejecutar el siguiente código. ¿En qué momento se “dispara” la función?

<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=utf-8">

function saludo(nombre)
{
document.write(`Hola ${nombre} `);
}

</script>

</head>
<body>

<input type="button" onclick="saludo('Ana')" value="Pulsa aquí">

</body>
</html>

Funciones 2)

Colocar un punto de interrupción en la primera línea 8 de código del ejercicio anterior

(document.write (`Hola ${nombre} `) y otro punto de interrupción en la línea 16 (<input type).

Empezar la depuración e ir ejecutando “paso a paso por procedimientos” (F10)

Ver el orden en que se ejecutan las instrucciones. Pulsar el botón “Llamada a función” para llegar al
punto de interrupción de la función.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Funciones 3)
Ejecutar el siguiente programa: Funciones de calculo

<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=utf-8">

</script>

</head>
<body>

<input type="button" onclick="Calcula()" value="Calculo">

</body>
</html>

Funciones 4) Ejecutar el siguiente código.

¿Qué está haciendo la instrucción RETURN? ¿Cuál es su traducción del inglés?

<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=utf-8">
<script>

function suma(n1,n2) {
return n1 + n2; RETURN , retorna como resultado de la
} función suma, el valor de n1 + n2

</script>
</head>

<body>

<input type="button" value="Suma" onclick="document.write(`Resultado:

${suma(2,3)}`)" >

<p><br>La función utiliza la sentencia <b>return</b> para devolver un valor.</p>

</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Funciones 5) En base al siguiente código: añadir función para restar dos números.

<!DOCTYPE html>
<html><body>
<script>
let multipli = function(x,y){
return x*y
}

let expon = function (x,y){

return Math.pow(x, y);
Funciones Arrow (flecha) otra forma de
}
representar funciones.
let suma = (x,y) => {return x+y}; Teoría en : https://frontendlabs.io/3410--funciones-
flecha-arrow-es6-javascript-tutorial-ecmascript-6

var result = multipli(5,2);

alert (result);

result = suma (3,4);

alert (result);

</script>
</body>
</html>

Funciones 6) En base al siguiente código: añadir función para pasar de Farenheit a Celsius

<!DOCTYPE html>
<html><body>
<script>
let pasaraFarenheit = (grado) => {return Fahrenheit = grado * 1.8 + 32;};

var result = pasaraFarenheit(22);

alert (result);

</script>
</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Funciones 7)

En base al siguiente código, realizar programa que muestra en pantalla un saludo al nombre
de dos personas introducido por teclado.

<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=utf-8">
<script>

function Saludo(persona1,persona2) {
document.getElementById("salida").innerHTML = `Hola ${persona1} y ${persona2}`;
}
</script>
</head>

<body>
<h1>Función con dos parámetros</h1>
<p>Saluda a dos personas.</p></br>
<p id="salida">Aquí el resultado</p>

</body>
</html>

Funciones 8) getElementById y cambios en propiedad style .

<!DOCTYPE html>
<html>
<head>
<title> Ejemplo getElementById </title>

</head>
<body>
<p id="informacion">Curso de ECMAScript6</p>
<button onclick="CambiaColor('blue');">azul</button>
<button onclick="CambiaColor('red');">rojo</button>
</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Funciones 9) Realizar un programa con una función: Esta función muestra en pantalla la suma de
dos números introducidos por el usuario en otra parte del código.

Funciones 10) Hacer seguimiento del valor de la variable 'x'

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<title>ECMA6 alcance asignación let</title>

function programa() {

let x = 3;

function func(randomize) {

if (randomize) {
let x = parseInt(Math.random()*10);
return x;
}
return x;
}

document.getElementById("salida").innerHTML = func(false); // 3
document.getElementById("salida").innerHTML += func(1);

</script>
</head>

<body>
<h3>Alcance de variables (Scope)</h3>
<input type="button" value="Pulsa aquí" onclick="programa()" />
<div id="salida"></div>
</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Funciones 11)
Hacer seguimiento de las variables del siguiente código ( con puntos de interrupción)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<script>

function f()
{
let solo_local = 100;
let z = solo_local;
}
</script>
</head>

let x, y;
y = "Bon dia";

document.write(`<p> Este es el valor de x: ${x} <br></p>`);

document.write(`<h3>Este es el valor de y: ${y} </h3>`);
f();
document.write(`<p>Este es el valor de z: + ${z} <br></p>`);

</script>

<p><br>Las variables declaradas en la función (f) existen durante el tiempo de

ejecución de la función. El resto son variables globales.</p>
</body>
</html>

Funciones 12)
Del anterior ejercicio: ¿Qué tipo de variable es z? ¿local o global? ¿Donde podemos sacarla por
pantalla?
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Javascript (ES6) : Forms

Para introducir datos desde campos de texto, se neceista una marca <form> que delimita todas las
posibles entradas de datos. Esta marca crea un objeto al cual podemos acceder a cada uno de sus
elementos de entrada de datos.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Forms1) Introducción datos en FORMS

<!DOCTYPE html>
<html>
<head>
<title> Datos en Formularios </title>
<script>
function saludo()
{
let nom_usuario = document.fdatos.entrada.value
document.writeln(`Hola, bon dia ${nom_usuario} `)
}
</script>
</head>

<body>
<form name="fdatos">
Escribe tu nombre: <input type="text" size="10" name="entrada"/>
<input type="button" value="Pulsa aquí" onclick="saludo()" />
</form>
</body>
</html>

Forms 2) Realizar programa en el cual el usuario introduce un valor en un FORM y por pantalla sale
como resultado su 10%.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Forms 3) Ejecutar el siguiente programa.

¿Qué realiza la instrucción “eval”?

<!DOCTYPE html>
<html>
<head>
<script>
function calcula()
{
document.datos.respuesta.value = eval(document.datos.entrada.value)
}
</script>
</head>
<body>

<form name="datos" action="Ejercicio.html" >

Escribe una fórmula matemática, por ejemplo: (2+3)*10

Respuesta:<input type="text" size="20" name="respuesta"/>

</form>
</body>
</html>

Forms 4) Realizar un programa en el cual se introduce un valor numérico en un FORM y como

resultado se muestran el resultado de elevar el número al cuadrado y también el resultado de elevar el
número al cubo.

a) Realizar con una función. b) Realizar con al menos , DOS funciones.

Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Forms 5) Entrada de datos visual con barra 'slide'

<!DOCTYPE html>
<html>
<head>
<script>
function ProcesaDatos() {
let objx = document.getElementById("RangoValor").value;
document.getElementById("resultado").innerHTML = objx;
}
</script>
</head>

<body>
<h3>Entrada de datos por 'Slide'</h3>
<input type="range" id="RangoValor" value="50" onchange="ProcesaDatos()">
<p id="resultado"></p>
</body>
</html>

Forms 6) Entrada de datos desde lista

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<title> Entrada de Datos</title>
<script>
function calcula()
{
let numero = document.fdatos.entrada.value;
let dato = document.getElementById("lista");
let valor = dato.options[lista.selectedIndex].value; // .text

let resultado = numero * valor;

document.getElementById("salida").innerHTML = resultado;
}
</script>
</head>

<body>

<form name="fdatos">
Introduce número: <input type="text" size="10" name="entrada"/>
<b> X </b>
<select id="lista" onchange="calcula()">
<option value="1" selected>uno</option>
<option value="2">dos</option>
<option value="3">tres</option>
<option value="4">cuatro</option>
</select>
</form>

<div id ="salida"></div>
</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Forms 7) Realizar programa con introducción de datos por formulario:

Introducimos un número ºC y el programa contesta en ºF (conversión Celsius- Fahrenheit )

Forms 8) AÑADIR al programa Forms 8) una función a la cual llega como parámetro
un número ºF y el programa contesta en ºC (conversión Fahrenheit-Celsius )

Forms 9) Realizar programa para una web, en el cual el usuario introduce 2 notas y su valor
ponderado (como cuando un examen vale un 30% y otro examen el 70%).
Pulsando el botón “Calcula” , la web muestra como resultado la nota media ponderada.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Forms 10) Utilización del input "date" con programación en Javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
</head>
<body>
<form>
<input type="date" id="start" onchange="getEventTime()">
<input type="date" id="end" onchange="getEventTime()">
</form>
<script>
var getEventTime = function(){
var start = moment(document.getElementById("start").value);
var end = moment(document.getElementById("end").value);
console.log(moment.duration(end.diff(start)).asDays());
}
</script>
</body>
</html>

Forms 11) Crear programa, en una pàgina web, donde el usuario intruduce su altura (cm), edad, sexo
y peso actual. El programa responde con una referencia de peso aproximado.

Por ejemplo : usuario introduce 176, 22, H, 79.

El programa ejecuta la fórmula: 50 + ((Altura-150) / 4) *3 + (Edad – 20) /4 * (0.9 si es mujer)

El resultado es: peso referencia = 70,5.

Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Forms 12) Crear programa, en una pàgina web, donde el usuario intruduce su altura (cm), edad, sexo
y peso actual. El programa responde con una referencia de peso aproximado.

Por ejemplo : usuario introduce 176, 22, H, 79.

El programa ejecuta la fórmula: 50 + ((Altura-150) / 4) *3 + (Edad – 20) /4 * (0.9 si es mujer)

El resultado es: peso referencia = 70,5.

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<title>Peso Referencia</title>
<script>
function pesoreferencia(datoaltura=1, datopeso=1, datoedad=1, datosexo="N")
{
let altura = parseInt(datoaltura);
let edad = parseInt(datoedad);
let peso = parseInt(datopeso);

if (datosexo == "h" || datosexo=="H")

{
peso = 50 + ((altura - 150) / 4)*3 + (edad - 20)/4;
}
else peso = peso * 0.9;

document.getElementById("resultado").innerHTML = peso;

}
</script>
</head>

<body>
<form name="fdatos">
Altura en cm (ej: 155) <input type="text" size="10" name="altura"/></br></br>
Peso en kg (ej: 80) <input type="text" size="10" name="peso"/></br></br>
Edad (ej: 45) <input type="text" size="10" name="edad"/></br></br>
Sexo (H/M/O) <input type="text" size="10" name="sexo"/></br></br>

<input id="pideal" type="button" value="Calcula"

onclick="pesoreferencia(fdatos.altura.value,fdatos.peso.value,fdatos.edad.value,
fdatos.sexo.value)" />

<input type="reset" value="Reset" />

</br></br> El peso aproximado de referencia es: <span id="resultado"></span>

</form>
</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Forms 13) Juegos apuestas con FORMulario

<!DOCTYPE html>
<html><head><script type="text/javascript">
function inic(){
var DI = document.game.dinero.value = 100;
}
function calc(){
var Din = parseInt(document.game.dinero.value);
var Num = document.game.num.value;
var Apu = parseInt(document.game.apuesta.value);
var dado = Math.floor(Math.random() * 7);
var ganancia = 0;
if (Din > 0)
{
if (Num == dado)
{
document.game.dado.value = dado;
document.game.res.value = ("Has ganado! " + Apu*2);
ganancia = (Din+Apu*2);
document.game.dinero.value = ganancia;
}
else{
document.game.dado.value = dado;
document.game.res.value = ("Has perdido!" + Apu);
ganancia = (Din-Apu);
document.game.dinero.value = ganancia;
}
}
else{
window.alert("Has perdido todo tu dinero!");
}
}
</script>
</head>
<body>
<h1 align="center">JUEGO APUESTAS</h1>
<form name="game">
<div align="center">
Dinero: <input type="text" name="dinero" size="5">   
Numero del dado: <input type="label" name="dado" size="5">
<br><br>
Introduzca un numero del 1 al 6: <input type="text" name="num" size="5">
<br><br>
Introduzca su apuesta: <input type="text" name="apuesta" size="5">
<br><br>
<input type="button" name="play" value="Jugar" onClick="calc()">
<input type="button" name="Start" value="Start" onClick="inic()">
<br><br>
<input type="label" name="res" size="15">
</div>
</form>
</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Javascript (ES6): BUCLES

Para repetir instrucciones un número determinado de veces, se utiliza for.

Más adelenta también se verá como utilizarlo sobre valores de datos en arrays y sus alternativas más
actuales.

Información de los bucles for : http://www.w3schools.com/js/js_loop_for.asp

Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

ES6 Bucles 1) Realizar seguimiento de las variables i , cadena (puntos interrupción)

<!DOCTYPE html>
<html><body>
<p id="central"></p>
<script>

let cadena="",i;

for (i=0;i<5;i++)
{
cadena = cadena + `El numero es ${i} <br />`;
}

document.getElementById("central").innerHTML= cadena;
</script>
</body>
</html>

ES6 Bucles 2) Crear programa para que salgan en pantalla los siguiente números:
54321
4321
321
21
1

<!DOCTYPE html>
<html>
<head>
<script>
for (x = 5; x > 0; x--)
{
for (j = x; j >= 1; j--)
document.write(+j);

document.write("</br>");
}
</script>
</head></html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

ES6 Bucles 3) Realizar seguimiento de las variables i , x

<!DOCTYPE html>
<html><body>
<p id="central"></p>
<script>
let i, j;
let x = "<table>";

for (i = 1; i <= 10; i++) // 10 filas

{
x= x + "<tr>";

for (j = 1; j <= i; j++) // números en cada fila

x= x + `<td> El numero es ${i} </td>`;

x = x + "</tr>";
}

x = x + "</table>";
document.getElementById("central").innerHTML= x;

</script>
</body>
</html>

ES6 Bucles 4) Ejecutar el programa y entender su lógica.

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<script>
let fila;
let columna = parseInt(prompt("Introduce el tamaño: ", "0"))

for (fila = 1; fila <= columna; fila++)

{
for (espacios = columna - fila; espacios > 0; espacios--)
document.write("&nbsp&nbsp");

for (conta = 1; conta < (2 * fila); conta++)

document.write("*");

document.writeln("</br>");
}
</script>
</head>
</html>

ES6 Bucles 5) En base al ejercicio anterior, realizar programa que dibuja un ROMBO
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Es6 Bucles 6) Creación elementos dinámicos.

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<script>
function funcionUno()
{
let result=""
let i;
for (i=1; i<=6; i++)
{
result = result + `<h${i}> Titulo ${i} </h>`;
}

document.getElementById("central").innerHTML= result;
}
</script>
</head>
<body>
<p>Pulsa el boton y se crean HTML tags de la 1 a la 6</p>
<button onclick="funcionUno()">Pulsa aqui</button>
<div id="central"></div>
</body>
</html>

ES6 Ejercicio Bucles 7)

Realizar una página web, con programación en ES6, con al menos una función. En esta web se pide al
usuario 2 números del 1 al 10. Una vez introducidos los números, el ordenador muestra una tabla
(HTML) que contiene la tabla de multiplicar del número 1 hasta el número2.

Ejemplo: El usuario introduce el número 2 y 4 , la web enseña por pantalla:

2 x1 = 2

2x2 = 4

2x3 = 6

2x4 = 8
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

EJERCICIOS RESUMEN

En este apartado se han recopilado ejercicios para recordar conceptos importantes y acumular "horas
de vuelo" programando. Como en todos los aprendizajes, cuanto más tiempo efectivo se dedica a
aprender la materia, más resultados se consiguen.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Resumen 1)
Programa que lee tres notas de un alumno, calcula la media e indicar el valor de la nota y la palabra
“Excelente” si tiene un valor mayor que 8 , “Aprobado” entre 5 y 8 , “Suspendido” < 5

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<script>

let nota1, nota2, nota3;

let media;
dato1 = prompt("Primer número?", "0");
dato2 = prompt("Segundo número?", "0");
dato3 = prompt("Tercer número?", "0");
nota1 = parseInt(dato1);
nota2 = parseInt(dato2);
nota3 = parseInt(dato3);

media = (nota1 + nota2 + nota3)/3;

if (media >8)
{
resultat = " Excelente";
}
else
{
if (media >=7)
resultat = " Notable";
else
resultat = " Aprobado";
}
document.write(`La nota final es ${media} y eso es ${resultat}`);

</script>
</body>
</html>

Resumen 2)
Añadir al programa anterior, el resultado de “Bien” si la nota está entre 5 y 6.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Resumen 3) Crear PSEUDOCODIGO , en un paper o medio digital, en el que un usuario introduce

un número la computadora contesta con diferentes valres:
Si el número esta entre 1 i 127 , el resultado es “ Tipo A”
Si el número esta entre 128 i 191 , el resultado es “ Tipo B
Si el número esta entre 192 i 191 , el resultado es “ Tipo C

Resumen 4) Realizar programa en JUEGO DADOS

Queremos programar un juego de dados en un página web.

El usuario empieza con 50€ para poder apostar.

El usuario decide a que número apuesta del 1 al 6, y también que cantidad de euros quiere apostar.

Se “lanza” un dado (asignación al azar de un número del a 1 al 6)

Si el usuario acierta el número, gana el doble de lo que ha postado. Si no acierta, pierde todo lo apostado.

El juego acaba cuand el usuario llega a 0 euros o al llegar a 200 euros

Resumen 5) Realizar programa donde se Introducen de 3 números y el programa indica cuál es el

mayor de los 3.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Resumen 6)
Completar y ejecutar el seguiente codigo: ( Hugo Moragues 2014)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<title>Calculadora IP Class</title>
<script>

function getOctal() {
var txt = document.getElementById("octal1");
var o1 = parseInt(txt.value);
getClass(o1);
}

</script>
</head>
<body>
<h2>Calculadora Clase IP</h2>
<h3>Introducir 8 bits en cada campo.</h3>
<input type="text" name="oc1" id="octal1">

<input type="button" value="Obtener Clase" onClick="getOctal()">
</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Resumen 7) Ejecutar el siguiente programa (Apuesta dados)

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<title>Juego Dados</title>
<script>

let dinero= 50, ganancias = 0 , apuesta =20, numero=0;

while (dinero > 0 && apuesta >0) // si la apuesta es cero, acaba el juego.
{
let dado = Math.floor(Math.random() * 6) + 1;

let num = prompt("A que número quiere apostar, del 1 al 6 ", "1");
numero = parseInt(num);

let cantidad = prompt("Cantidad que quiere apostar ", "20");

apuesta = parseInt(cantidad);

document.write (`Ha salido el número: ${dado} <br>`);

if (numero == dado)
{
dinero = dinero + apuesta*2
alert(`Has ganado ${dinero}`)
}
else
{
dinero = dinero - apuesta
alert(`Has perdido ${apuesta} ahora tienes ${dinero}`)
}

if (dinero == 0) {
alert("Game over")
break;
}

if (dinero >= 200) {

alert("Has ganado el juego")
break;
}
}

</script>
</head><body></body>
</html>

Resumen 8)
Realizar programa donde la computadora "piensa" un número aleatorio entre 1 y 100. El usuario debe
adivinarlo con las pistas de "es mayor" o "es menor" en un número determinado de intentos.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Resumen 9)
Crear un programa “Calculadora”, con las 4 operacions básicas, sumar restar, multiplicar y dividir.¿
Como se ha de “subdividir” el programa? ¿ Lo implemento con funciones? . ¿Cuántas funciones son necesarias?

Solución 1:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<script>

function sumar() {
let num1, num2, res;
num1 = parseInt(document.calculadora.valor1.value);
num2 = parseInt(document.calculadora.valor2.value);
res = num1 + num2;

document.calculadora.resultado.value = res;
}

function restar() {
let num1, num2, res;
num1 = parseInt(document.calculadora.valor1.value);
num2 = parseInt(document.calculadora.valor2.value);
res = num1 - num2;

document.calculadora.resultado.value = res;
}

function multiplicar() {
let num1, num2, res;
num1 = parseInt(document.calculadora.valor1.value);
num2 = parseInt(document.calculadora.valor2.value);
res = num1 * num2;
document.calculadora.resultado.value = res;
}

function dividir() {
// codigo similar a los anteriores
}
</script>
</head>

<body>
<form name="calculadora">
Primer número: <input type="text" name="valor1"><br>
Segundo número: <input type="text" name="valor2"><br>

<input type="button" name="button1" value="sumar" onclick="sumar()">

<input type="button" name="button2" value="restar" onclick="restar()">
<input type="button" name="button3" value="multiplicar" onclick="multiplicar()">
<input type="button" name="button4" value="dividir" onclick="dividir()"><br>
Resultado: <input type="text" name="resultado">

</form>
</body>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Solución alternativa:
<head>
<script type="text/javascript">

function calcula(operacio) {
var num1;
var num2;
var res;
num1 = parseInt(document.calculadora.valor1.value);
num2 = parseInt(document.calculadora.valor2.value);

if (operacio == 1) res = num1 + num2;

if (operacio == 2) res = num1 - num2;
if (operacio == 3) res = num1 * num2;
if (operacio == 4) res = num1 / num2;

document.calculadora.resultado.value = res;
}

</script>
</head>

Primer número: <input type="text" name="valor1"><br>

Segundo número: <input type="text" name="valor2"><br>

<input type="button" name="button1" value="sumar" onclick="calcula(1)">

<input type="button" name="button2" value="restar" onclick="calcula(2)">
<input type="button" name="button3" value="multiplicar" onclick="calcula(3)">
<input type="button" name="button4" value="dividir" onclick="calcula(4)"><br>
Resultado: <input type="text" name="resultado">

</form>
</body>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Resumen 10)

a) Crear programa donde se introduce una temperatura en ºCelsius sale el resultado en ºFahrenheit.

b) Añade una función que recibe como parámetro ºFahrenheit y que saca per pantalla las seguientes frases:
1) Si ºF está entre 14 y 32, sale la frase “Temperatura baja”
2) Si ºF está entre 32 y 68, sale la frase “Temperatura adecuada”
3) Si ºF está entre 68 y 96, sale la farse “Temperatura alta”
4) Si no está entre ningún caso anterior la frase “Temperatura desconocida”

c) Añadir función que recibe ºF introducida por el usuario i sale por pantalla los ºC correspondientes.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Autor: Alejandro Piqueras 2015

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>Conversor Temperaturas</title>
<script>

function EntraData() {
let txt = document.getElementById("tempEntrada");
let temp = parseInt(txt.value);
return temp;
}

function EscriuData(nomZona, text) {

document.getElementById(nomZona).innerHTML = text;
}

function toFahrenheit() {
let temp = EntraData();
temp = ((1.8) * temp + 32);
EscriuData('Zona1', temp + " ºF"); // por pantalla la temp resultado
FraseRelativa(temp);
}

function toCelsius() {
let temp = EntraData();
let temp2 = ((temp - 32) / 1.8);
EscriuData('Zona1', temp2 + " ºC");
FraseRelativa(temp);
}

function FraseRelativa(temperatura) {
let cadena="-";
if ((temperatura >= 14) && (temperatura < 32)) cadena ="Temperatura baja";
if ((temperatura >= 32) && (temperatura < 68)) cadena ="Temperatura adecuada";
if ((temperatura >= 68) && (temperatura <= 96)) cadena ="Temperatura alta";
if (cadena=="-") cadena = "Temperatura desconocida";
EscriuData('Zona2', cadena);
}

</script>
</head>
<body>
<h2>Conversor de temperatures</h2>
<input type="text" name="tempEntrada" id="tempEntrada">
<input type="button" value="Pasar a Fahrenheit" onClick="toFahrenheit()">
<input type="button" value="Pasar a Celsius" onClick="toCelsius()"><br>
<div id="Zona1"></div>
<div id="Zona2"></div>
<div id="Zona3"></div>
</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

Resumen 11)
Programa donde se introducen 3 números y muestra cual es el mayor de los 3.

Resumen 12) NO ejecutar el siguiente programa.

Sin ver por pantalla: ¿Qué saldría si se introduce 178?
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<script>
let dato, altura;
dato = prompt("Escribe tu altura en cm", "0");
altura = parseInt(dato);

if (altura >180) resultado = "Por encima de la media";

else
{
if (altura >=140)
resultado = "Altura media";
else
resultado = "Por debajo de la media";
}
document.write(resultado);
</script>
</html>

Resumen 13) Ejecutar el siguiente programa

<!DOCTYPE html>
<html><head>
<script>
let num1,num2,num3;
let numA=prompt('Introduce primer número:','');
let numB=prompt('Introduce segundo número:','');
let numC=prompt('Introduce tercer número:','');

num1=parseInt(numA);num2=parseInt(numB);num3=parseInt(numC);

if (num1>num2 && num1>num3)

{
document.write(Èl mayor es el ${num1} `);
}
else
{
if (num2>num3) document.write(Èl mayor es el ${num2} `);
else
{
document.write(Èl mayor es el ${num3} `);
}
}
</script>
</head>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

AVANCE : PARTE2 - Curso práctico de programación 2017 -

Adelanto de la Parte2 de los Ejercicios resueltos.

Los apartados que se estan preparando en la parte 2 son los siguientes:

Clases y Objetos

Arrays

JSON
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

EJERCICIO1 DE CLASES - 1) CommonJS, 2) Object Interface , 3)Clases ECMAScript 6

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>

<title>Modules - CommonJS</title>

function ficha() {

let alumno = {
nombre: "Caterina",
edad: 18
};

this.verNombre = function ()
{
return alumno.nombre;
}

this.verEdad = function ()
{
var resultado = alumno.edad;
return resultado;
}
}

function programa() {

let obj = new ficha();

document.writeln(`El nombre es ${obj.verNombre()} <br>`);

document.writeln(`La edad es ${obj.verEdad()} <br>`);
}

</script>
</head>
<body>
<h3>Clase ficha </h3>
<input type="button" value="Pulsa aquí" onclick="programa()" />
</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
<title>ObjectInterface - Clases1</title>
<script>

let ficha = (function () {

let alumno;
this.alumno ="Marga";

return {

inicio ()
{
this.alumno = "Norat"
},

verNombre()
{
return this.alumno;
},

} // fin return

})(); //fin 'clase'

function programa() {

ficha.inicio();
document.writeln(`El nombre es ${ficha.verNombre()} <br>`);

//document.writeln(`La edad es ${ficha.verEdad()} <br>`);

}

</script>
</head>

<body>
<h3>Clase ficha </h3>
<input type="button" value="Pulsa aquí" onclick="programa()" />
</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

<!DOCTYPE html>
<html><head><meta charset="utf-8"/>
<title>ECMA6 - Clases1</title>

class EntradaDatos {
constructor (){
let nombre;
let contrasenya;
this.nombre ="admin";
this.contrasenya ="1234"
}

introduceNombre ()
{
let valorEntrada = document.formEntrada.txtInicial.value;

if (this.compruebaNombre(valorEntrada))
this.nombre = valorEntrada;
else
this.nombre ="No valido";
}

compruebaNombre (valor)
{
let flag = true;
if (valor == null || valor == "") flag = false;
return flag
}

verNombre()
{
return this.nombre;
}
}

function programa() {
let obj = new EntradaDatos();
obj.introduceNombre ();
document.writeln(`El nombre es ${obj.verNombre()} <br>`);
}
</script>
</head>

<body>
<h3>Clase Entrada Datos </h3>
<form name="formEntrada">
<input type="text" name="txtInicial" />
<input type="button" value="Pulsa aquí" onclick="programa()" />
</form>
</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

TRANSITIONS

1) Explicación con ejemplos: https://robots.thoughtbot.com/transitions-and-transforms

2) Proyecto Menu-Slide con programación jQuery:

<!DOCTYPE html >

<html><head>
<title>Transitions amb jQuery</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

$(document).ready(function () {

$(".encabezado").click(function () {
if (toggle) { $(".slide-menu").css("transform", "translate3d(0, 0, 0)");
$(".contenedor").css("transform", "translate3d(250px, 0, 0)");
toggle=0;}
else { $(".slide-menu").css("transform", "translate3d(-250px, 0, 0)");
$(".contenedor").css("transform", "translate3d(0, 0, 0)");
toggle =1;}
});
}); // fi document.ready

</script>
</head>

<body>
<div class="slide-menu">
<nav class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
</nav>
</div>

<div class="contenedor">
<div class="encabezado">
<h1>&equiv; Transitions</h1>
</div>

<h2>Texto e información de la web</h2>

</div>

</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

estilos.CSS:

.slide-menu {
transform: translate3d(-250px, 0, 0);
position: absolute;
width: 250px;
background: #4f6b81;
color: #ddd;
left: 0;
transition: all .3s;
}
.slide-menu h1 {
height: 50px;
text-shadow: 1px 1px 1px #000;
}
.slide-menu img {
height: 90px;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu a {
display: block;
text-decoration: none;
color: #fff;
font-size: 1em;
padding: 15px;
background: linear-gradient(#0088CC,#006699);
border-bottom: 1px solid #1e222b;
box-shadow: inset 0px 1px 1px #8b9db3;
}
.menu a:hover {
background: linear-gradient(#3b3f48, #3c434d);
box-shadow: inset 0px 1px 1px #475059;
}

body {
font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
min-width: 100%;
}

.encabezado {
width:100%;
background-color: #006699;
color: #E9FAFA;
height: 90px;
display: block;
}

.contenedor {
width: 100%;
overflow: hidden;
min-height: 100%;
transform: translate3d(0, 0, 0);
transition: transform .3s;
}
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

RESPONSIVE DESIGN

1) TRADUCIR, renombrar con ayuda de la imagen adjunta, todas las ‘class’ del siguiente
documento para que se entienda su estructura en castellano.
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="estilos_Responsive.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="gridcontainer">
<div class="gridwrapper">
<div class="gridbox gridheader">
<div class="header">
<h1>The Pulpit Rock</h1>
</div>
</div>
<div class="gridbox gridmenu">
<div class="menuitem">The Drive</div>
<div class="menuitem">The Walk</div>
<div class="menuitem">The Return</div>
<div class="menuitem">The End</div>
</div>
<div class="gridbox gridmain">
<div class="main">
<h1>The Walk</h1>
<p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour
depending on the weather conditions and your physical shape.</p>
<img src="pulpitrock.jpg" alt="Pulpit rock" width="" height="">
</div>
</div>

<div class="gridbox gridright">

<div class="right">
<h2>What?</h2>
<p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p>
<h2>Where?</h2>
<p>The Pulpit Rock is in Norway</p>
<h2>Price?</h2>
<p>The walk is free!</p>
</div>
</div>

<div class="gridbox gridfooter">

<div class="footer">
<p>This web page is a part of a demonstration of fluid web design made by
www.w3schools.com. Resize the browser window to see the content response to the
resizing.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

ARCHIVO estilos_Responsive.css

body {
font-family: "Lucida Sans", Verdana, sans-serif;
}

.main img {
width: 100%;
}

h1{
font-size: 1.625em;
}

h2{
font-size: 1.375em;
}

.header {
padding: 1.0121457489878542510121457489879%;
background-color: #f1f1f1;
border: 1px solid #e9e9e9;
}

.menuitem {
margin: 4.310344827586206896551724137931%;
margin-left: 0;
margin-top: 0;
padding: 4.310344827586206896551724137931%;
border-bottom: 1px solid #e9e9e9;
cursor: pointer;
}

.main {
padding: 2.0661157024793388429752066115702%;
}

.right {
padding: 4.310344827586206896551724137931%;
background-color: #CDF0F6;
}

.footer {
padding: 1.0121457489878542510121457489879%;
text-align: center;
background-color: #f1f1f1;
border: 1px solid #e9e9e9;
font-size: 0.625em;
}

.gridcontainer {
width: 100%;
}

.gridwrapper {
overflow: hidden;
}

.gridbox {
margin-bottom: 2.0242914979757085020242914979757%;
margin-right: 2.0242914979757085020242914979757%;
float: left;
}

.gridheader {
width: 100%;
}
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.ibserveis.com Javascript ES6 - Parte 1 www.foxitsoftware.com/shopping

.gridmenu {
width: 23.48%;
}

.gridmain {
width: 48.99%;
}

.gridright {
width: 23.48%;
margin-right: 0;
}

.gridfooter {
width: 100%;
margin-bottom: 0;
}

2) Añadir el siguiente contenido al CSS anterior. ¿Qué cambia?

@media only screen and (max-width: 500px) {

.gridmenu {
width: 100%;
}

.menuitem {
margin: 1.0121457489878542510121457489879%;
padding: 1.0121457489878542510121457489879%;
}

.gridmain {
width: 100%;
}

.main {
padding: 1.0121457489878542510121457489879%;
}

.gridright {
width: 100%;
}

.right {
padding: 1.0121457489878542510121457489879%;
}

.gridbox {
margin-right: 0;
float: left;
}
}
Edited with the trial version of
Foxit Advanced PDF Editor
To remove this notice, visit:
www.foxitsoftware.com/shopping

JavaScript (1) 46 de 46

En Javascript, no se deben declarar las variables dentro de un bucle (entre llaves), en aras de
las prestaciones (velocidad) y la lógica: en efecto, hay no hay necesidad de declarar la misma
variable cada vez en el bucle. Es aconsejable declarar las variables directamente en el bloque
de inicialización, como se muestra en los ejemplos Pero cuidado: Una vez que se ejecuta el
bucle, la variable sigue existiendo, lo que explica que el ejemplo anterior se pueda recuperar
el valor de i después que el bucle se completa. Este comportamiento es diferente del de otros
lenguajes, en los que una variable declarada en un bucle es "destruida" después de que el
bucle se ejecuta.

Prioridad de ejecución

Los tres bloques que forman el bucle for no se ejecutan al mismo tiempo:

● Inicio: justo antes de que comience el bucle. Es como si las instrucciones fueron
escritas justo antes del bucle, un poco como un bucle while;

● Condición: antes de cada iteración del bucle, al igual que la condición de un bucle while;

● Incremento: después de cada ciclo. Esto significa que si ejecutas un break en un bucle
for, el paso en el bucle a partir de break no será contabilizado.

El bucle for es muy utilizado en Javascript, y no el bucle while, a diferencia de otros lenguajes
de
programación. Como veremos más adelante, el funcionamiento real de JavaScript hace que
sea necesario en la mayoría de los casos, como la manipulación tablas y de objetos. Se verá
más adelante. También hay una variante del bucle llamada for in que sólo se utiliza en casos
específicos.

Resumen

● El incremento es importante dentro de los bucles. Incrementar o decrementar significa la

adición o sustracción de una unidad a la variable. El comportamiento de un operador de
incremento es diferente si se sitúa antes o después de la variable.
● El bucle while permite repetir una lista de instrucciones mientras la condición sea
verdadera.
● El ciclo do while es una variante de while, que que será ejecutado al menos una vez,
independientemente de la condición.
● El bucle for es un bucle para repetir una lista de instrucciones un número dado de
veces. Esta es una variante muy específica del bucle while.

_____________________________________________________________
Desarrollo de Aplicaciones web. Rafael Menéndez-Barzanallana Asensio. UMU

También podría gustarte

Manual de Javascript
80% (5)
Manual de Javascript
142 páginas
Manual de Javascript
50% (2)
Manual de Javascript
163 páginas
Libro Js
100% (3)
Libro Js
129 páginas
Manual Javascript
100% (8)
Manual Javascript
125 páginas
Aprende JavaScript en Un Fin de Semana
100% (2)
Aprende JavaScript en Un Fin de Semana
224 páginas
Manual Actualizado Java
100% (1)
Manual Actualizado Java
124 páginas
Qué Es JavaScript
Aún no hay calificaciones
Qué Es JavaScript
14 páginas
JavaScript - Curso de Programacion para Principiantes (Spanish Edition) PDF
Aún no hay calificaciones
JavaScript - Curso de Programacion para Principiantes (Spanish Edition) PDF
43 páginas
Conceptos Basicos de Javascript Con Ejemplos-Libre
Aún no hay calificaciones
Conceptos Basicos de Javascript Con Ejemplos-Libre
44 páginas
Fermí Vilà
0% (2)
Fermí Vilà
96 páginas
Javascript Con Ejemplos PDF
Aún no hay calificaciones
Javascript Con Ejemplos PDF
44 páginas
Javascript PDF
100% (3)
Javascript PDF
131 páginas
Caso Estados Unidos Contra Microsoft
100% (1)
Caso Estados Unidos Contra Microsoft
20 páginas
Java
Aún no hay calificaciones
Java
331 páginas
JAVASCRIPT
100% (1)
JAVASCRIPT
37 páginas
1ra Unidad
Aún no hay calificaciones
1ra Unidad
138 páginas
JavaScript Como Lenguaje Interpretado
Aún no hay calificaciones
JavaScript Como Lenguaje Interpretado
209 páginas
Manual de Javascript
Aún no hay calificaciones
Manual de Javascript
195 páginas
Codigos Javascript
Aún no hay calificaciones
Codigos Javascript
263 páginas
Gestiforma Modulo4 3
Aún no hay calificaciones
Gestiforma Modulo4 3
140 páginas
Página 1 de 160
Aún no hay calificaciones
Página 1 de 160
160 páginas
Programacion HTML Intermedia
Aún no hay calificaciones
Programacion HTML Intermedia
181 páginas
Tema 3 - Introducción A JavaScript
Aún no hay calificaciones
Tema 3 - Introducción A JavaScript
101 páginas
JavaSxposicion (Again)
Aún no hay calificaciones
JavaSxposicion (Again)
71 páginas
Ejemplos Prácticos de Javascript
100% (1)
Ejemplos Prácticos de Javascript
17 páginas
Tutorial Javascript
Aún no hay calificaciones
Tutorial Javascript
90 páginas
Configuracion Sonicwall
Aún no hay calificaciones
Configuracion Sonicwall
38 páginas
Manual de Instrumetos Javascript Poo y Estructurada
Aún no hay calificaciones
Manual de Instrumetos Javascript Poo y Estructurada
27 páginas
Voces Libres de Los Campos Digitales
Aún no hay calificaciones
Voces Libres de Los Campos Digitales
65 páginas
PDF Manual Javascript DD - PDF
Aún no hay calificaciones
PDF Manual Javascript DD - PDF
46 páginas
Capitulo 11 Programacion en JavaScript
Aún no hay calificaciones
Capitulo 11 Programacion en JavaScript
34 páginas
Programacion en El Cliente: 6.1 Introducción A Javascript
Aún no hay calificaciones
Programacion en El Cliente: 6.1 Introducción A Javascript
41 páginas
M3 Desarrollo Web
Aún no hay calificaciones
M3 Desarrollo Web
38 páginas
Conceptos Bsicos de Javascript Con Ejemplos PDF
Aún no hay calificaciones
Conceptos Bsicos de Javascript Con Ejemplos PDF
44 páginas
Navegadores
Aún no hay calificaciones
Navegadores
4 páginas
Cesar Alfredo Ayala Canchari Primera Practica
Aún no hay calificaciones
Cesar Alfredo Ayala Canchari Primera Practica
19 páginas
Javascript
Aún no hay calificaciones
Javascript
75 páginas
Presentacion HTML
Aún no hay calificaciones
Presentacion HTML
28 páginas
Trabajo de Programación
Aún no hay calificaciones
Trabajo de Programación
27 páginas
Java Script
Aún no hay calificaciones
Java Script
16 páginas
Tarea 4, Programacion WEB
0% (1)
Tarea 4, Programacion WEB
2 páginas
JavaScript GRUPO #2
Aún no hay calificaciones
JavaScript GRUPO #2
14 páginas
Java Script 1
Aún no hay calificaciones
Java Script 1
21 páginas
2-Presentación Del Lenguaje JavaScript PDF
Aún no hay calificaciones
2-Presentación Del Lenguaje JavaScript PDF
5 páginas
Programación Con El Uso de Script
Aún no hay calificaciones
Programación Con El Uso de Script
17 páginas
Taller 1 JavaScript
Aún no hay calificaciones
Taller 1 JavaScript
30 páginas
JavaScript Presentación Básica
Aún no hay calificaciones
JavaScript Presentación Básica
6 páginas
Lenguaje de Programacion JavaScript
Aún no hay calificaciones
Lenguaje de Programacion JavaScript
46 páginas
Lenguaje de Programación
Aún no hay calificaciones
Lenguaje de Programación
12 páginas
Caracteristicas Efrain
Aún no hay calificaciones
Caracteristicas Efrain
48 páginas
Arabizar Mac
Aún no hay calificaciones
Arabizar Mac
21 páginas
Lenguaje de Programación JavaScript Actividad Evaluable 2
Aún no hay calificaciones
Lenguaje de Programación JavaScript Actividad Evaluable 2
7 páginas
Guia JavaScrip
Aún no hay calificaciones
Guia JavaScrip
14 páginas
AnexoHistoria de La Computación - Wikipedia, La Enciclopedia Libre
Aún no hay calificaciones
AnexoHistoria de La Computación - Wikipedia, La Enciclopedia Libre
19 páginas
Netscape Vs Microsoft
Aún no hay calificaciones
Netscape Vs Microsoft
6 páginas
2.1 Introducción A Javascript
Aún no hay calificaciones
2.1 Introducción A Javascript
13 páginas
Historia de La Web
Aún no hay calificaciones
Historia de La Web
15 páginas
DW S10
Aún no hay calificaciones
DW S10
15 páginas
Contrato de Conciencia Historica 2025
Aún no hay calificaciones
Contrato de Conciencia Historica 2025
6 páginas
Computación para Todos (Primaria) - 4to Grado
Aún no hay calificaciones
Computación para Todos (Primaria) - 4to Grado
21 páginas
INSTRUMENTOS
Aún no hay calificaciones
INSTRUMENTOS
5 páginas
Qué Es Javascript
Aún no hay calificaciones
Qué Es Javascript
11 páginas
Glosario Terminos Tecnologicos PDF
Aún no hay calificaciones
Glosario Terminos Tecnologicos PDF
20 páginas
AN-LISIS LITERARIO 1er Departamental
Aún no hay calificaciones
AN-LISIS LITERARIO 1er Departamental
4 páginas
Procedimiento Java
Aún no hay calificaciones
Procedimiento Java
9 páginas
Infografía Cronológica Línea de Tiempo Historia Vintage Sencilla Marrón y Beige
Aún no hay calificaciones
Infografía Cronológica Línea de Tiempo Historia Vintage Sencilla Marrón y Beige
3 páginas
Negociación 3-D El Juego Total. Harvard Business Review
Aún no hay calificaciones
Negociación 3-D El Juego Total. Harvard Business Review
16 páginas
Guia #1 - Historia de Windows
Aún no hay calificaciones
Guia #1 - Historia de Windows
6 páginas
4H 02 Jomb-Campos
Aún no hay calificaciones
4H 02 Jomb-Campos
5 páginas
Exposición Década 90-1
Aún no hay calificaciones
Exposición Década 90-1
9 páginas
Documento 2
Aún no hay calificaciones
Documento 2
4 páginas
Linea de Tiempo de Navegadores
Aún no hay calificaciones
Linea de Tiempo de Navegadores
13 páginas
Navegación Entre Pantallas en Flutter
Aún no hay calificaciones
Navegación Entre Pantallas en Flutter
4 páginas
0 - Introducción A Javascript
Aún no hay calificaciones
0 - Introducción A Javascript
4 páginas
Tarea de Diseño Web 2
Aún no hay calificaciones
Tarea de Diseño Web 2
3 páginas
JAVASCRIPT
Aún no hay calificaciones
JAVASCRIPT
3 páginas
Guerra Cristera
Aún no hay calificaciones
Guerra Cristera
1 página
Java Script
Aún no hay calificaciones
Java Script
4 páginas
Evolución y Características de Los Navegadores Web
Aún no hay calificaciones
Evolución y Características de Los Navegadores Web
4 páginas
Reporte de Javascript Mayo
Aún no hay calificaciones
Reporte de Javascript Mayo
8 páginas
Js 1
Aún no hay calificaciones
Js 1
2 páginas
Js 2
Aún no hay calificaciones
Js 2
2 páginas
Navegadores de Internet
Aún no hay calificaciones
Navegadores de Internet
2 páginas
Caso Microsoft y Netscape
Aún no hay calificaciones
Caso Microsoft y Netscape
3 páginas
Tuto HTML Aulaclic
Aún no hay calificaciones
Tuto HTML Aulaclic
11 páginas
El Mundo Es Plano (Resumen)
Aún no hay calificaciones
El Mundo Es Plano (Resumen)
5 páginas
Web y Buscadores en Ciencias de La Salud
Aún no hay calificaciones
Web y Buscadores en Ciencias de La Salud
0 páginas
B4A en Español: Desarrollo Rápido de App utilizando BASIC
De Everand
B4A en Español: Desarrollo Rápido de App utilizando BASIC
Wyken Seagrave
Aún no hay calificaciones
Aprende Python desde cero hasta avanzado
De Everand
Aprende Python desde cero hasta avanzado
Xavier Reyes Ochoa
Aún no hay calificaciones
UF2177 - Desarrollo de programas en el entorno de la base de datos
De Everand
UF2177 - Desarrollo de programas en el entorno de la base de datos
Jorge Martínez Mostazo
Aún no hay calificaciones
Processing: Desarrollo de interfaces de usuario, aplicaciones de visión artificial e IoT para Arduino y ESP8266
De Everand
Processing: Desarrollo de interfaces de usuario, aplicaciones de visión artificial e IoT para Arduino y ESP8266
Tomás Domínguez Mínguez
5/5 (1)
Introducción a la programación en C. Un enfoque práctico.
De Everand
Introducción a la programación en C. Un enfoque práctico.
Enrique Vicente
Aún no hay calificaciones
Exploración de la colección de imágenes: Revelando paisajes visuales en visión por computadora
De Everand
Exploración de la colección de imágenes: Revelando paisajes visuales en visión por computadora
Fouad Sabry
Aún no hay calificaciones
Paquete de programas: Revolucionando la visión por computadora con el paquete de software definitivo
De Everand
Paquete de programas: Revolucionando la visión por computadora con el paquete de software definitivo
Fouad Sabry
Aún no hay calificaciones