[Link].
com Javascript ES6 - Parte 1
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)
{
[Link](`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
([Link] (`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.
[Link] Javascript ES6 - Parte 1
Funciones 3)
Ejecutar el siguiente programa: Funciones de calculo
<!DOCTYPE html>
<html><head>
<meta content="text/html; charset=utf-8">
<script>
Parámetro (numero) , si no recibe recibe valor, vale 1 .
Se utiliza como variable local en la función.
function Calcula(numero=1)
{
let calculo = numero * numero;
[Link](`<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>
<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="[Link](`Resultado:
${suma(2,3)}`)" >
<p><br>La función utiliza la sentencia <b>return</b> para devolver un valor.</p>
</body>
</html>
[Link] Javascript ES6 - Parte 1
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 [Link](x, y);
Funciones Arrow (flecha) otra forma de
}
representar funciones.
let suma = (x,y) => {return x+y}; Teoría en : [Link]
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>
[Link] Javascript ES6 - Parte 1
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) {
[Link]("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 = [Link]("informacion");
[Link] = 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>
[Link] Javascript ES6 - Parte 1
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([Link]()*10);
return x;
}
return x;
}
[Link]("salida").innerHTML = func(false); // 3
[Link]("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>
[Link] Javascript ES6 - Parte 1
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>
<body>
<script>
let x, y;
y = "Bon dia";
[Link](`<p> Este es el valor de x: ${x} <br></p>`);
[Link](`<h3>Este es el valor de y: ${y} </h3>`);
f();
[Link](`<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?