[Link].
com Javascript ES6 - Parte 1
Inicio con JavaScript (ECMAScript6) : variables
1)
a) Abrir Brackets (o cualquier otro editor de HTML)
b) Archivo Nuevo
c) ¡Copiar el código que empieza por <!DOCTYPE HTML> s i g u i e n t e .
d) Menú... Archivo... Guardar como: [Link]
e) Menú... Archivo... Vista previa dinámica
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 1 </title>
</head>
<body>
<script>
[Link](¡” 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
2) C r e a r archivo nuevo ‘[Link]’ 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 el valor 5
<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} ` );
[Link] Javascript ES6 - Parte 1
</script>
</body>
</html>
ES6 Inicio 3) Crear archivo nuevo ‘[Link]’ y copiar el siguiente código.
Una vez guardado, ejecutar el programa: Launch in Firefox (Chrome …)
<!DOCTYPE html>
<html>
<body>
<script>
Se añade 1 al valor que contiene num1
Se añade 5 al valor que contiene num2
let num1=0; let num2=0;
num1 = num1 + 1; num2 = num2
+ 5;
alert (`El primer numero ahora es ${num1} `); alert (`El
segundo numero ahora es ${num2} ` );
</script>
</body>
</html>
4) Crear archivo nuevo ‘[Link]’ 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!";
[Link]("Constante a contiene " + a) ;
[Link]("</br>"); [Link]("Variable b
contiene " + b) ; [Link]("</br>");
[Link](a + b) ;
</script>
<p>El signo '+' sirve para concatenar cadenas de texto</p>
</body>
</html>
[Link] Javascript ES6 - Parte 1
ES6 Inicio 5) Atención: Tiene error para corregirlo UTILIZANDO PTOS INTERRUPCIÓN
Crear archivo nuevo ‘[Link]’ 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;
[Link](`Variable a contiene ${a} <br> ` );
[Link](`Variable b contiene ${b} <br> ` );
[Link](`El producto de a por b es ${result}
`);
</script>
<p>Los puntos de interrupcion son fundamentales para programar</p>
</body>
</html>
ES6 Inicio 6) Ejecutar el siguiente programa . Introducción de valores por teclado.
<!DOCTYPE html>
<html>
<body>
<script>
let dato, resultado;
dato = [Link]("Introduce tu nombre", "0");
resultado = `Hola, como estas ${dato} ` ;
[Link](resultado);
</script>
<p><br>Todo lo que se teclea son letras.</p>
</body>
</html>
[Link] Javascript ES6 - Parte 1
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 por teclado en un valor
<body> numérico.
<script>
let dato, num;
dato = [Link]("Introduce número ?", "0");
num = parseInt(dato);
num = num *2;
[Link](`El 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 = [Link]("Introduce primer número ?",
"0"); num1 = parseInt(dato1);
dato2 = [Link]("Introduce segundo número ?",
"0"); num2 = parseInt(dato2);
let resultado = num1 + num2;
[Link](`<br/> <br/> La suma es ${resultado} ` );
</script>
[Link] Javascript ES6 - Parte 1
<p>Para sumar, las variables deben ser numéricas.</p>
</body>
</html>
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>
<div id ="salida"></div>
<script>
let dato, num;
dato = [Link]("Introduce un número ?",
"0"); num = parseInt(dato);
let resultado = num *2;
[Link]("salida").innerHTML = (`El 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">
[Link] Javascript ES6 - Parte 1
{
var contador; contador=1;
while (contador<5)
{
let dato=prompt('Introduce número del 1 al 10:',''); let
num=parseInt(dato);
[Link](` El numero introducido es ${num} </br> `); [Link](`
El contador es ${contador} </br> `);
contador = contador +1 ;
}
[Link]( ` </br><h2>
Fin del programa
contador ya NO es menor que 5.
</h2>
`);
[Link] (`</br> Ultimo numero introducido es ${num}`)
}
</script>
</html>
13) ¿Qué error no permite ver el último [Link]?
Sustituye let num=parseInt(dato); por var num=parseInt(dato);
ACTIVIDADES PROPUESTAS:
-----------------------------------------------
14) Has hecho una compra y sabes el precio del producto y su iva. Haz un script que te calcule
el precio total que vas a pagar por tu compra. Te recuerdo que para calcular el total debes sumar
al precio el resultado de multiplicasr precio por el iva y dividir por 100.
15) En una variable tienes el lado de un cuadrado, debes escribir un programa que te calcule el
área y el perímetro del cuadrado. El area la calculas como lado multiplicado por lado. El
perímetro es la suma de los cuatro lados.
16) Un poco de interactividad. En este ejercicio debes escribir un programa que lea el nombre
del usuario y salude con un "Hola" seguido del nombre del usuario. Para leer el nombre usa un
[Link] Javascript ES6 - Parte 1
prompt con un texto indicativo como "Escribe tu nombre"
17) En este ejercicio vas a pedir al usuario que teclee tres números enteros y el script mostrará
como resultado el valor medio de los tres. Recuerda que la media de tres números se calcula
sumando los tres y dividiendo entre 3.
18) Escribe un programa que solicite al usuario ingresar el número de kilómetros recorridos por
su coche y el número de litros consumidos. El script debe mostrar el consumo de combustible
por kilómetro. Un problema matemático muy simple número de litros dividido por número de
kilómetros.