Javascript Es6 Ejercicios Resueltos Parte 1

JavaScript
Ejercicios resueltos (1ª parte)
Programación web con ECMAScript 6
Matias Salom Avellà

www.ibserveis.com Javascript ES6 - Parte 1
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.
Í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

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.

www.ibserveis.c Javascript ES6 -
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>
<script>
document.writeln("Hola Mundo!");
</script>
</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
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>
A la variable a se le asigna el valor 10 A la variable b se le asigna e
<script> La variable resultado contiene la suma de a y b
let a, b;
a = 10; b = 5;
resultado = a + b;
alert (`La suma de a+b es ${resultado} ` );
</script>
</body>
</html>

Una vez guardado, ejecutar el programa: Launch in Firefox (Chrome …)
<!DOCTYPE html>
<html>
<body>
<script>
Se añade 1 al valor que contiene num1
let num1=0; Se añade 5 al valor que contiene num2
let num2=0;
num1 = num1 + 1;
num2 = num2 + 5;
alert (Èl primer numero ahora es ${num1} `);

alert (Èl segundo numero ahora es ${num2} `
);
</script>
</body>
</html>

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(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>
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(Èl 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
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 introducido
<body>
<script>
let dato, num;
dato = window.prompt("Introduce número ?", "0");

num = parseInt(dato);
num = num *2;
document.write(Èl doble es ${num} `);
</script>
<p><br>Los números por teclado, son letras. Tienen que convertirse .</p>
</body>
</html>
ES6 Inicio 8) Ejecutar el siguiente programa. Introducimos dos números y se suman.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<script>
let dato1, dato2, num1, num2;
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>
<body>
<p>innerHtml controla que puede incluirse en un elemento.</p>

<div id ="salida"></div>
<script>
let dato, num;
dato = window.prompt("Introduce un número ?", "0");

num = parseInt(dato);
let resultado = num *2;
document.getElementById("salida").innerHTML = (Èl doble es ${resultado} `);
</script>
</body>
</html>
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.
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.
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");

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

if (num1 > num2)

{ Si num1 es mayor que num2 ,
resultado = " el primero"; entonces resultado es "El primero"
} SINO resultado es "El segundo"
els
e
{ 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

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");
dato3 = window.prompt("Tercer número?", "0");
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
ES6 Condicionales 5) Realizar el siguiente programa. ¿Porqué el código está en el <body>?
<!DOCTYPE html>
<html>
<body>
<p id="salida"></p>
<script>
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>
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.
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%.
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
</head> joven", si es mayor que 18: "Mayor de edad"
</html>
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.
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

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">
<script>
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.
Funciones 3)
Ejecutar el siguiente programa: Funciones de calculo
<!DOCTYPE html>
<html><head>
<script> Parámetro (numero) , si no recibe recibe valor, vale 1 . Se utiliza com
function Calcula(numero=1)
{
let calculo = numero * numero;
document.write(`<p/> Resultado = ${calculo}
</p>`);
}
</script>
</head>
<body>
<input type="button" onclick="Calcula()" value="Calculo">

<input type="button" onclick="Calcula(5)" value="Otro 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>
<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>
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.
Teoría en : https://frontendlabs.io/3410--
let suma = (x,y) => {return x+y}; 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>
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>
<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>
<script>
Saludo("Ana","Pedro");
</script>
</body>
</html>
Funciones 8) getElementById y cambios en propiedad style .
<!DOCTYPE html>
<html>
<head>
<title> Ejemplo getElementById </title>
<script>
function CambiaColor(nombreColor) {
let obj = document.getElementById("informacion");
obj.style.color = nombreColor;
}
</script>
</head>
<body>
<p id="informacion">Curso de ECMAScript6</p>
<button onclick="CambiaColor('blue');">azul</button>
<button onclick="CambiaColor('red');">rojo</button>
</body>
</html>
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>
<script>
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>
Funciones 11)
Hacer seguimiento de las variables del siguiente código ( con puntos de interrupción)
<!DOCTYPE html>
<html>
<script>
function f()
{
let solo_local = 100;
let z = solo_local;
}
</script>
</head>
<body>
<script>
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?
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.
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%.
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

<input type="text" size="20" name="entrada" />
<input type="button" name="B1" value="Ejecuta" onclick="calcula()" />
<br /><br />
Respuesta:<input type="text" size="20" name="respuesta"/>

<br /><br />
<input type="reset" name="B2" value="Reset" />
</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.

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>
<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>
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>
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.
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.

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>
<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>
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>
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>
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

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 + Èl 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);
}
</script>
</head></html>
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>
<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
Es6 Bucles 6) Creación elementos dinámicos.
<!DOCTYPE html>
<html>
<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
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.
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>
<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");
nota2 =
parseInt(dato2); nota3
= parseInt(dato3);
media = (nota1 + nota2 + nota3)/3;
if (media >8)
{
resultat = " Excelente";
}
els
e
{ 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.
Resumen
un Crear PSEUDOCODIGO
número la computadora , en un valres:
contesta con diferentes paper o medio digital, en el que un usuario
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.
Resumen
Completar y ejecutar el seguiente codigo: ( Hugo Moragues 2014)
<!DOCTYPE html>
<html>
<title>Calculadora IP Class</title>
<script>
function getClass(i)
{
if(i>=240) {
return alert("Clase E");
}
else
{ if(i>=224) {
return alert("Clase D");
}
else
{ if(i>=192) {
return alert("Clase C");
}
else
{ if(i>=128) {
// Completar código !!
}
else // Completar código
}
}
}
}
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>
Resumen 7) Ejecutar el siguiente programa (Apuesta dados)
<!DOCTYPE html>
<html>
<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.
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>
<script>
function sumar() {
let num1, num2, res;
num1 = parseInt(document.calculadora.valor1.value);
res = num1 + num2;
document.calculadora.resultado.value = res;
}
function restar() {
res = num1 - num2;
}
function multiplicar() {
res = num1 * num2;
}
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>
Solución alternativa:
<head>
function calcula(operacio) {
var num1;
var num2;
var res;
if (operacio == 1) res = num1 + num2;

if (operacio == 2) res = num1 - num2;
if (operacio == 3) res = num1 * num2;
if (operacio == 4) res = num1 / num2;
}
</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="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>
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.
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>
</body>
</html>
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>
<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>
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
EJERCICIO1 DE CLASES - 1) CommonJS, 2) Object Interface , 3)Clases ECMAScript 6
<!DOCTYPE html>
<html>
<title>Modules - CommonJS</title>

<script>
function ficha() {
let alumno = {
nombre: "Caterina",
edad: 18
};
this.verNombre = function ()
{
return alumno.nombre;
}
this.verEdad = function ()
{
var resultado =
alumno.edad; return
resultado;
}
}
let obj = new ficha();
document.writeln(Èl nombre es ${obj.verNombre()} <br>`);

document.writeln(`La edad es ${obj.verEdad()} <br>`);
}
</script>
</head>
<body>
<h3>Clase ficha </h3>
</body>
</html>
<!DOCTYPE html>
<html>
<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'
ficha.inicio();
document.writeln(Èl nombre es ${ficha.verNombre()} <br>`);
//document.writeln(`La edad es ${ficha.verEdad()} <br>`);

}
</script>
</head>
<body>
<h3>Clase ficha </h3>
</body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"/>
<title>ECMA6 - Clases1</title>


<script>
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;
}
}
let obj = new
EntradaDatos();
obj.introduceNombre ();
document.writeln(Èl nombre es ${obj.verNombre()} <br>`);
}
</script>
</head>
<body>
<h3>Clase Entrada Datos </h3>
<form name="formEntrada">
<input type="text" name="txtInicial" />
</form>
</body>
</html>
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>
var toggle =1;
$(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>
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;
}
RESPONSIVE DESIGN
1) TRADUCIR, renombrar con ayuda de la imagen adjunta, t odas las ‘class’ del siguiente
documento para que se entienda su estructura en castellano.
<!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>
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%;
}
.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;
}
}

Javascript Es6 Ejercicios Resueltos Parte 1

Cargado por

Copyright:

Formatos disponibles

Javascript Es6 Ejercicios Resueltos Parte 1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Javascript Es6 Ejercicios Resueltos Parte 1

Cargado por

Copyright:

Formatos disponibles

JavaScript

Ejercicios resueltos (1ª parte)

Programación web con ECMAScript 6

Matias Salom Avellà

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

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

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

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

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

Inicio con Javascript (ECMAScript6) : variables

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

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

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

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

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

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

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

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

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

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

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

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.

let dato, resultado;

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

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

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

let dato, num;

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

num = num *2;

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

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

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

let resultado = num1 + num2;

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

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

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

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

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

let resultado = num *2;

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

sacando por pantalla la resta de ambos números.

ES6 Inicio 12) CTRL + MAYÚSCULAS + I

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

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

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

Javascript (ES6): Condicionales.

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

ES6 Condicionales 2) Ejecutar el siguiente programa.

let dato1,dato2,num1, num2, resultado;

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

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

if (num1 > num2)