Sei sulla pagina 1di 8

Ciclo Formativo de Grado Superior

Desarrollo de Aplicaciones Multiplataforma


Módulo
Desarrollo de Interfaces en Entorno Cliente

Curso Académico
2018-2019

UT04. Estructuras definidas por el Usuario en


JavaScript (EJERCICIOS)

Versión del Documento


1.0

Actualizado a
17/12/2018
Profesor
Jonay García González

Email
jonaygarciav@gmail.com
Tabla de Contenidos

Tabla de contenido
4. ESTRUCTURAS DEFINIDAS POR EL USUARIO EN JAVASCRIPT ................................................................. 1
4.1. Arrays .......................................................................................................................................... 1
4.2. Funciones .................................................................................................................................... 5

i Jonay García González


ESTRUCTURAS DEFINIDAS POR EL USUARIO EN JAVASCRIPT

4. ESTRUCTURAS DEFINIDAS POR EL USUARIO EN JAVASCRIPT

4.1. Arrays

Ejercicio 1. Copiar el siguiente código en un Editor de Código y ejecutarlo en un Navegador Web. Indicar qué
función realiza el código:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
var dias = ["lunes", "martes", "miércoles", "jueves", "viernes"];
document.write("<h2>Días de la semana</h2>");
for (var i = 0; i < dias.length; i++)
document.write(` ${dias[i]} <br> `);
</script>
</head>
</html>

Ejercicio 2. Modificar el siguiente programa para que muestre los días “jueves” y “martes”:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
var dias = ["lunes", "martes", "miércoles", "jueves", "viernes"];
document.write("<h2>Días de la semana</h2>");
final = (dias.length - 1);
for (var i = final; i > 1; i = i - 2)
document.write(` ${dias[i]} <br> `);
</script>
</head>
<body>
</body>
</html>

Ejercicio 3. Copiar el siguiente código en un Editor de Código y ejecutarlo en un Navegador Web. Indicar qué
función realiza el código:

1 Jonay García González


ESTRUCTURAS DEFINIDAS POR EL USUARIO EN JAVASCRIPT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
var dias = ["lunes", "martes", "miércoles", "jueves", "viernes", "sabado",
"domingo"];
document.write("<h2>Días de la semana</h2>");
dato = window.prompt("Introduce número del 0 al 6", "0");
num = parseInt(dato);
document.write(` <br> El dia introducido es: ${dias[num]} `);
</script>
</head>
<body>
</body>
</html>

Ejercicio 4. Copiar el siguiente código en un Editor de Código y ejecutarlo en un Navegador Web. Indicar qué
función realiza el código:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
var dias = ["lunes", "martes", "miércoles", "jueves", "viernes", "sabado",
"domingo"];

function verCada(array) {
for (var i = 0; i < array.length; i++)
document.write(` ${array[i]} <br> `);
}
verCada(dias);
</script>
</head>
<body>
</body>
</html>

Ejercicio 5. Copiar el siguiente código en un Editor de Código y ejecutarlo en un Navegador Web. Indicar qué
función realiza el código:

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

2 Jonay García González


ESTRUCTURAS DEFINIDAS POR EL USUARIO EN JAVASCRIPT
<script>
var numeros = [100, 200, 300, 400];

function paraCada(array, action) {


for (var i = 0; i < array.length; i++)
action(array[i]);
}
paraCada(numeros, alert);
</script>
</head>
<body>
</body>
</html>

Para cada elemento, ejecuta una función determinada pasada como parámetro.

Ejercicio 6. Copiar el siguiente código en un Editor de Código y ejecutarlo en un Navegador Web. Indicar qué
función realiza el código:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
var dias = ["lunes", "martes", "miércoles", "jueves", "viernes", "sabado",
"domingo"];

// El metodo forEach() ejecuta la funcion callback indicada una vez


// por cada elemento del array.
dias.forEach(function(element) {
document.write(` ${element} <br/> `);
});

document.write(`<br/>`);

// La funcion callbak se puede especificar tambien de la siguiente


// manera para simplificar.
dias.forEach( element => {
document.write(` ${element} <br/> `);
});

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

3 Jonay García González


ESTRUCTURAS DEFINIDAS POR EL USUARIO EN JAVASCRIPT
Ejercicio 7. Copiar el siguiente código en un Editor de Código y ejecutarlo en un Navegador Web. Indicar qué
función realiza el código:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
// forEach utiliza elementos de la Array que tengan un índice,
// de esta manera evitamos problemas con índices vacios.
var nuevosCoches = ["Seat", "Renault", "Alfa Romeo", "Peugeot"];
document.write("<h2>Marcas de Coches</h2>");
nuevosCoches.forEach(function (item, index) {
document.write(`${item} <br>`);
});
</script>
</head>
<body>
</body>
</html>

Ejercicio 8. Copiar el siguiente código en un Editor de Código y ejecutarlo en un Navegador Web. Indicar qué
función realiza el código:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<script>
const obj = {
a: 1,
b: 2,
c: 3,
d: 4
}

for (let elem in obj) {


document.write(obj[elem] + '<br/>')
}
</script>
</head>
<body>
</body>
</html>

4 Jonay García González


ESTRUCTURAS DEFINIDAS POR EL USUARIO EN JAVASCRIPT

4.2. Funciones

Ejercicio 1. Ejecuta el siguiente código, en qué momento se ejecuta la función:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function saludo(nombre)
{
document.getElementById('nombre').innerHTML = nombre;
}
</script>
</head>
<body>
<input type="button" onclick="saludo('Ana')" value="Pulsa aqui">
<div id="nombre"></div>
</body>
</html>

Ejercicio 2. Ejecuta el siguiente código, en qué momento se ejecuta la función:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function Calcula(numero = 1)
{
let calculo = numero * numero;
document.getElementById('resultado').innerHTML = calculo
}
</script>
</head>
<body>
<input type="button" onclick="Calcula()" value="Calculo">
<input type="button" onclick="Calcula(5)" value="Otro Calculo">
<div id="resultado"></div>
</body>
</html>

5 Jonay García González


ESTRUCTURAS DEFINIDAS POR EL USUARIO EN JAVASCRIPT

Ejercicio 3. Ejecuta el siguiente código, en qué momento se ejecuta la función:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function suma(n1, n2)
{
return n1 + n2;
}

function calculoSuma(n1, n2)


{
resultado = suma (n1, n2);
document.getElementById('resultado').innerHTML = resultado;
}

</script>
</head>
<body>
<input type="button" value="Suma" onclick="calculoSuma(5, 6)">
<div id="resultado"></div>
</body>
</html>

6 Jonay García González

Potrebbero piacerti anche