Dia 31ç
This commit is contained in:
Marcos Lopez
parent
96759acedd
commit
085cb5dc63
58
Practicas/Practicas JS/Bucles 02/02_bucles_javascript.html
Normal file
58
Practicas/Practicas JS/Bucles 02/02_bucles_javascript.html
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>02 Bucles javascript</title>
|
||||||
|
<link rel="stylesheet" href="css/estilos.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Bucles Javascript 02</h1>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
//1 Arrays beneficios y gastos
|
||||||
|
|
||||||
|
// Arrays de beneficios y gastos diarios(semana)
|
||||||
|
const ingresosDiarios = [120, 150, 200, 180, 250, 300, 210];
|
||||||
|
const gastosDiarios = [50, 60, 40, 80, 90, 70, 60];
|
||||||
|
|
||||||
|
// Inicializamos el beneficio neto total
|
||||||
|
let beneficioNetoTotal = 0;
|
||||||
|
/*
|
||||||
|
// Utilizamos un bucle 'for' para calcular el beneficio neto diario y total
|
||||||
|
for (let dia = 0; dia < ingresosDiarios.length; dia++) {
|
||||||
|
// Calculamos el beneficio neto diario restando los gastos del beneficio
|
||||||
|
let beneficioNetoDiario = ingresosDiarios[dia] - gastosDiarios[dia];
|
||||||
|
|
||||||
|
// Mostramos el beneficio neto diario
|
||||||
|
document.write(`Día ${dia + 1}: Beneficio Neto = ${beneficioNetoDiario}`);
|
||||||
|
document.write("<br>");
|
||||||
|
|
||||||
|
// Sumamos el beneficio neto diario al beneficio neto total
|
||||||
|
beneficioNetoTotal += beneficioNetoDiario;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mostramos el beneficio neto total al final de la semana
|
||||||
|
document.write(`Beneficio Neto Total Semanal = ${beneficioNetoTotal}`);
|
||||||
|
*/
|
||||||
|
|
||||||
|
//CON FOR EACH*
|
||||||
|
// Beneficio neto diario y total
|
||||||
|
ingresosDiarios.forEach(function(ingreso, dia) {
|
||||||
|
// Utilizamos la variable 'dia' para acceder a los gastos correspondientes
|
||||||
|
const gastoDiario = gastosDiarios[dia];
|
||||||
|
|
||||||
|
// Calculamos el beneficio neto diario restando los gastos del beneficio
|
||||||
|
let beneficioNetoDiario = ingreso - gastoDiario;
|
||||||
|
|
||||||
|
// Mostramos el beneficio neto diario
|
||||||
|
document.write(`Día ${dia + 1}: Beneficio Neto = ${beneficioNetoDiario}`);
|
||||||
|
document.write("<br>");
|
||||||
|
|
||||||
|
// Sumamos el beneficio neto diario al beneficio neto total
|
||||||
|
beneficioNetoTotal += beneficioNetoDiario;
|
||||||
|
});
|
||||||
|
document.write("Beneficio Neto Total Semanal ="+beneficioNetoTotal);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
21
Practicas/Practicas JS/Bucles 02/index.html
Normal file
21
Practicas/Practicas JS/Bucles 02/index.html
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="../Introduccion/estilos.css">
|
||||||
|
<script src="./js/main.js"></script>
|
||||||
|
<title>Document</title>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
document.write(muestraArray(DIASSEMANA,))
|
||||||
|
document.write(muestraArray(INGRESOS))
|
||||||
|
document.write(muestraArray(GASTOS))
|
||||||
|
document.write(muestraArray(beneficios()))
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
32
Practicas/Practicas JS/Bucles 02/js/main.js
Normal file
32
Practicas/Practicas JS/Bucles 02/js/main.js
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
const DIASSEMANA = [
|
||||||
|
"Lunes",
|
||||||
|
"Martes",
|
||||||
|
"Miercoles",
|
||||||
|
"Jueves",
|
||||||
|
"Viernes",
|
||||||
|
"Sabado",
|
||||||
|
"Domingo",
|
||||||
|
];
|
||||||
|
const INGRESOS = [120, 150, 200, 180, 250, 300, 210];
|
||||||
|
const GASTOS = [50, 60, 40, 80, 90, 70, 60];
|
||||||
|
|
||||||
|
function muestraArray(array) {
|
||||||
|
let linea = "";
|
||||||
|
let relleno = " ";
|
||||||
|
|
||||||
|
array.forEach((el) => {
|
||||||
|
linea += el;
|
||||||
|
for (let i = 0; i < 15-(el.toString().length); i++) {
|
||||||
|
linea +=relleno
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return linea + "<br>";
|
||||||
|
}
|
||||||
|
|
||||||
|
function beneficios() {
|
||||||
|
let resultado = [];
|
||||||
|
for (let i = 0; i < DIASSEMANA.length; i++) {
|
||||||
|
resultado[i] = INGRESOS[i] - GASTOS[i];
|
||||||
|
}
|
||||||
|
return resultado;
|
||||||
|
}
|
||||||
52
Practicas/Practicas JS/DOM 01/ejercicio01_DOM RESUELTO.html
Normal file
52
Practicas/Practicas JS/DOM 01/ejercicio01_DOM RESUELTO.html
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||||||
|
<title>Ejercicio 01 - DOM básico</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing elit</a>. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer lacus. Vestibulum venenatis erat eu odio. Praesent id metus.</p>
|
||||||
|
<p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin consequat auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>. Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum nulla vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum. Etiam <a href="http://prueba3">consequat sem quis massa</a>. Donec aliquam euismod diam. In magna massa, mattis id, pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed tellus.</p>
|
||||||
|
<p id="oculto" style="display:none">Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet imperdiet suscipit, nunc erat laoreet est, a <a href="http://prueba">aliquam leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique. Ut dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In sem. Cras id augue eu lorem dictum interdum. Donec pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula. Duis iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit, eros quis malesuada tristique, ipsum odio euismod tortor, a vestibulum nisl mi at odio. <a href="http://prueba5">Sed non lectus non est pellentesque</a> auctor.</p>
|
||||||
|
|
||||||
|
<a id="enlace" href="#" onclick="muestra()">Sigue leyendo</a>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// Numero de enlaces de la pagina
|
||||||
|
var enlaces = document.getElementsByTagName("a");
|
||||||
|
document.write("<br>");
|
||||||
|
document.write("Numero de enlaces = "+ enlaces.length);
|
||||||
|
document.write("<br>");
|
||||||
|
console.log(enlaces);
|
||||||
|
// Direccion del penultimo enlace
|
||||||
|
var enlaceP=enlaces[enlaces.length-2].href;
|
||||||
|
var mensaje = "El penultimo enlace apunta a: "+enlaceP;
|
||||||
|
document.write(mensaje);
|
||||||
|
document.write("<br>");
|
||||||
|
console.log(enlaces[enlaces.length-2]);
|
||||||
|
// Numero de enlaces que apuntan a http://prueba
|
||||||
|
var contador = 0;
|
||||||
|
for(var i=0; i<enlaces.length; i++) {
|
||||||
|
|
||||||
|
if(enlaces[i].href === "http://prueba" || enlaces[i].href === "http://prueba/") {
|
||||||
|
contador++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.write(contador);
|
||||||
|
document.write("<br>");
|
||||||
|
|
||||||
|
// Numero de enlaces del tercer párrafo
|
||||||
|
var parrafos = document.getElementsByTagName("p");
|
||||||
|
var parrafo3=parrafos[2];
|
||||||
|
var enlaces3P =parrafo3.getElementsByTagName("a");
|
||||||
|
//var enlaces3P = parrafos[2].getElementsByTagName("a");
|
||||||
|
document.write(enlaces3P.length);
|
||||||
|
document.write("<br>");
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
72
Practicas/Practicas JS/DOM 01/ejercicio01_DOM_enunciado.html
Normal file
72
Practicas/Practicas JS/DOM 01/ejercicio01_DOM_enunciado.html
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||||||
|
<title>Ejercicio 01 - DOM b<>sico</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing elit</a>. Sed mattis enim vitae orci.
|
||||||
|
Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien
|
||||||
|
nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices
|
||||||
|
porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis,
|
||||||
|
faucibus ut, rhoncus non, mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis eu adipiscing
|
||||||
|
ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer
|
||||||
|
adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec
|
||||||
|
arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer
|
||||||
|
lacus. Vestibulum venenatis erat eu odio. Praesent id metus.</p>
|
||||||
|
<p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
|
||||||
|
posuere cubilia Curae; Proin consequat auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>.
|
||||||
|
Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse
|
||||||
|
cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum
|
||||||
|
nulla vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum. Etiam
|
||||||
|
<a href="http://prueba3">consequat sem quis massa</a>. Donec aliquam euismod diam. In magna massa, mattis id,
|
||||||
|
pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in
|
||||||
|
scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed tellus.</p>
|
||||||
|
<p id="oculto" style="display:none">Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at
|
||||||
|
sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet imperdiet suscipit, nunc erat laoreet
|
||||||
|
est, a <a href="http://prueba">aliquam leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique.
|
||||||
|
Ut dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In sem. Cras id
|
||||||
|
augue eu lorem dictum interdum. Donec pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula.
|
||||||
|
Duis iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit, eros quis malesuada
|
||||||
|
tristique, ipsum odio euismod tortor, a vestibulum nisl mi at odio. <a href="http://prueba5">Sed non lectus non
|
||||||
|
est pellentesque</a> auctor.</p>
|
||||||
|
|
||||||
|
<a id="enlace" href="#" onclick="">Sigue leyendo</a>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let enlaces = document.getElementsByTagName("a");
|
||||||
|
let penultimoEnlace = enlaces[enlaces.length - 2].getAttribute("href");
|
||||||
|
let enlacesPrueba = document.querySelectorAll('a[href="http://prueba"]');
|
||||||
|
let tercerParrafo = document.getElementsByTagName("p")[2];
|
||||||
|
let enlacesTercerParrafo = tercerParrafo.getElementsByTagName("a");
|
||||||
|
|
||||||
|
var p = document.createElement("p");
|
||||||
|
p.textContent = `Nº Enlaces: ${enlaces.length}`;
|
||||||
|
document.body.appendChild(p);
|
||||||
|
|
||||||
|
var p = document.createElement("p");
|
||||||
|
p.textContent = `Penultimo enlace: ${penultimoEnlace}`;
|
||||||
|
document.body.appendChild(p);
|
||||||
|
|
||||||
|
var p = document.createElement("p");
|
||||||
|
p.textContent = `Enlaces que comienzan con Prueba: ${enlacesPrueba.length}`;
|
||||||
|
document.body.appendChild(p);
|
||||||
|
|
||||||
|
var p = document.createElement("p");
|
||||||
|
p.textContent = `Nº Enlaces en el tercer parrafo: ${enlacesTercerParrafo.length}`;
|
||||||
|
document.body.appendChild(p);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
80
Practicas/Practicas JS/DOM 02/ejercicio01_DOM_enunciado.html
Normal file
80
Practicas/Practicas JS/DOM 02/ejercicio01_DOM_enunciado.html
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||||||
|
<title>Ejercicio 01 - DOM b<>sico</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing elit</a>. Sed mattis enim vitae orci.
|
||||||
|
Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien
|
||||||
|
nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices
|
||||||
|
porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis,
|
||||||
|
faucibus ut, rhoncus non, mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis eu adipiscing
|
||||||
|
ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer
|
||||||
|
adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec
|
||||||
|
arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer
|
||||||
|
lacus. Vestibulum venenatis erat eu odio. Praesent id metus.</p>
|
||||||
|
<p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
|
||||||
|
posuere cubilia Curae; Proin consequat auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>.
|
||||||
|
Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse
|
||||||
|
cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum
|
||||||
|
nulla vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum. Etiam
|
||||||
|
<a href="http://prueba3">consequat sem quis massa</a>. Donec aliquam euismod diam. In magna massa, mattis id,
|
||||||
|
pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in
|
||||||
|
scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed tellus.</p>
|
||||||
|
<p id="oculto" style="display:none">Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at
|
||||||
|
sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet imperdiet suscipit, nunc erat laoreet
|
||||||
|
est, a <a href="http://prueba">aliquam leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique.
|
||||||
|
Ut dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In sem. Cras id
|
||||||
|
augue eu lorem dictum interdum. Donec pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula.
|
||||||
|
Duis iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit, eros quis malesuada
|
||||||
|
tristique, ipsum odio euismod tortor, a vestibulum nisl mi at odio. <a href="http://prueba5">Sed non lectus non
|
||||||
|
est pellentesque</a> auctor. <a href="#" onclick="ocultar(document.getElementById('oculto'))">Ocultar</a> </p>
|
||||||
|
|
||||||
|
<a id="enlace" href="#" onclick="mostrar(document.getElementById('oculto'))">Sigue leyendo</a>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let enlaces = document.getElementsByTagName("a");
|
||||||
|
let penultimoEnlace = enlaces[enlaces.length - 2].getAttribute("href");
|
||||||
|
let enlacesPrueba = document.querySelectorAll('a[href="http://prueba"]');
|
||||||
|
let tercerParrafo = document.getElementsByTagName("p")[2];
|
||||||
|
let enlacesTercerParrafo = tercerParrafo.getElementsByTagName("a");
|
||||||
|
|
||||||
|
|
||||||
|
function mostrar(elemento){
|
||||||
|
elemento.style.display="block";
|
||||||
|
}
|
||||||
|
function ocultar(elemento){
|
||||||
|
elemento.style.display="none";
|
||||||
|
}
|
||||||
|
|
||||||
|
var p = document.createElement("p");
|
||||||
|
p.textContent = `Nº Enlaces: ${enlaces.length}`;
|
||||||
|
document.body.appendChild(p);
|
||||||
|
|
||||||
|
var p = document.createElement("p");
|
||||||
|
p.textContent = `Penultimo enlace: ${penultimoEnlace}`;
|
||||||
|
document.body.appendChild(p);
|
||||||
|
|
||||||
|
var p = document.createElement("p");
|
||||||
|
p.textContent = `Enlaces que comienzan con Prueba: ${enlacesPrueba.length}`;
|
||||||
|
document.body.appendChild(p);
|
||||||
|
|
||||||
|
var p = document.createElement("p");
|
||||||
|
p.textContent = `Nº Enlaces en el tercer parrafo: ${enlacesTercerParrafo.length}`;
|
||||||
|
document.body.appendChild(p);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
53
Practicas/Practicas JS/DOM 02/ejercicio02_DOM CORREGIDO.html
Normal file
53
Practicas/Practicas JS/DOM 02/ejercicio02_DOM CORREGIDO.html
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Ejercicio 02 - DOM </title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing elit</a>. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer lacus. Vestibulum venenatis erat eu odio. Praesent id metus.</p>
|
||||||
|
<p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin consequat auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>. Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum nulla vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum. Etiam <a href="http://prueba3">consequat sem quis massa</a>. Donec aliquam euismod diam. In magna massa, mattis id, pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed tellus.</p>
|
||||||
|
<p id="oculto" style = "display: none">Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet imperdiet suscipit, nunc erat laoreet est, a <a href="http://prueba">aliquam leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique. Ut dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In sem. Cras id augue eu lorem dictum interdum. Donec pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula. Duis iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit, eros quis malesuada tristique, ipsum odio euismod tortor, a vestibulum nisl mi at odio. <a href="http://prueba5">Sed non lectus non est pellentesque</a> auctor.</p>
|
||||||
|
|
||||||
|
<!-- <a id="enlace" href="#" onclick="muestra()">Sigue leyendo</a>
|
||||||
|
<br>
|
||||||
|
<a id="enlace2" style="display:none" href="#" onclick="oculta()">Oculta</a> -->
|
||||||
|
<a id="enlace" href="#" onclick="muestraOculta()">Sigue leyendo</a>
|
||||||
|
<br>
|
||||||
|
<a id="enlace2" style="display:none" href="#" onclick="muestraOculta()">Oculta</a>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
let parrafoOculto=document.getElementById("oculto");
|
||||||
|
let botonSigueLeyendo=document.getElementById("enlace");
|
||||||
|
let botonOcultaTexto=document.getElementById("enlace2");
|
||||||
|
|
||||||
|
function muestra() {
|
||||||
|
parrafoOculto.style = "display: inline";
|
||||||
|
botonOcultaTexto.style = "display: inline";
|
||||||
|
botonSigueLeyendo.style = "display: none";
|
||||||
|
}
|
||||||
|
|
||||||
|
function oculta() {
|
||||||
|
parrafoOculto.style = "display: none";
|
||||||
|
botonOcultaTexto.style = "display: none";
|
||||||
|
botonSigueLeyendo.style = "display: inline";
|
||||||
|
}
|
||||||
|
|
||||||
|
// En una sola función
|
||||||
|
|
||||||
|
function muestraOculta() {
|
||||||
|
if (parrafoOculto.style.display === "none") {
|
||||||
|
parrafoOculto.style = "display: inline";
|
||||||
|
botonOcultaTexto.style = "display: inline";
|
||||||
|
botonSigueLeyendo.style = "display: none";
|
||||||
|
} else {
|
||||||
|
parrafoOculto.style = "display: none";
|
||||||
|
botonOcultaTexto.style = "display: none";
|
||||||
|
botonSigueLeyendo.style = "display: inline";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
181
Practicas/Practicas JS/DOM/08_ELEMENTOS_DOM.html
Normal file
181
Practicas/Practicas JS/DOM/08_ELEMENTOS_DOM.html
Normal file
|
|
@ -0,0 +1,181 @@
|
||||||
|
<!Doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>ELEMENTOS DOM</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page" onclick="azul()"><p>Este es un div con la ID:page</p></div>
|
||||||
|
<button onclick="azul()">Pon en azul</button>
|
||||||
|
<div class="item">Un div con clase "item"</div>
|
||||||
|
<div class="item" name="nombre">Un div con clase "item"</div>
|
||||||
|
<div class="item" name="nombre">Un div con clase "item"</div>
|
||||||
|
<button onclick="crea();crea1()">Crea div</button><br>
|
||||||
|
<button onclick="creaAd()">Crea div adyacente</button><br>
|
||||||
|
<button onclick="creaCUA()">Crea cuadrado</button><br>
|
||||||
|
<button onclick="creaAd2()">Crea otro adyacente</button><br>
|
||||||
|
<div class="info"><strong>Importante</strong></div>
|
||||||
|
<div class="data"><h1>Tema 1</h1></div>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
//En JavaScript, el DOM es crucial para interactuar dinámicamente con el contenido de una página web.
|
||||||
|
|
||||||
|
//** Seleccionar elementos del - DOM Búsqueda de elementos HTML desde Javascript
|
||||||
|
|
||||||
|
// .getElementById(id) Nos devuelve un elemento HTML - null si no encuentra
|
||||||
|
function azul() {
|
||||||
|
var page=document.getElementById("page");// <div id="page"></div>
|
||||||
|
page.style.color="blue";
|
||||||
|
}
|
||||||
|
|
||||||
|
// .getElementsByClassName(class) Nos devuelve un (HTMLCollection)(similar a un array) - devuelve [] si no encuentra
|
||||||
|
var items = document.getElementsByClassName("item"); // [div, div, div]
|
||||||
|
console.log(items[0]); // Primer item encontrado: <div class="item"></div>
|
||||||
|
console.log(items.length); // 3
|
||||||
|
|
||||||
|
// .getElementsByName(name) Nos devuelve un (HTMLCollection)(similar a un array) - devuelve [] si no encuentra
|
||||||
|
var nombrado = document.getElementsByName("nombre"); // [div, div]
|
||||||
|
console.log(nombrado[0]); // Primer div encontrado: <div class="item" name="nombre"></div>
|
||||||
|
console.log(nombrado.length); // 2
|
||||||
|
|
||||||
|
// .getElementsByTagName(tag) Nos devuelve un (HTMLCollection)(similar a un array) - devuelve [] si no encuentra
|
||||||
|
var divs= document.getElementsByTagName("div"); // [div, div, div, div,div,div]
|
||||||
|
console.log(divs.length); // 6
|
||||||
|
|
||||||
|
// .querySelector(sel) Primer elemento que coincide con el selector CSS sel. Si no,null.
|
||||||
|
|
||||||
|
// .querySelectorAll(sel) Busca todos los elementos que coinciden con el selector CSS sel. Si no, [].
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
//// Crear elementos en el DOM
|
||||||
|
|
||||||
|
div = document.createElement("div"); // Creamos un <div></div>
|
||||||
|
span = document.createElement("span");// Creamos un <span></span>
|
||||||
|
img = document.createElement("img"); // Creamos un <img>
|
||||||
|
|
||||||
|
// Con propiedades
|
||||||
|
div = document.createElement("div"); // <div></div>
|
||||||
|
div.id = "page"; // <div id="page"></div>
|
||||||
|
div.className = "data"; // <div id="page" class="data"></div>
|
||||||
|
div.style = "color: red"; // <div id="page" class="data" style="color: red"></div>
|
||||||
|
|
||||||
|
// setAttribute(attr, value)
|
||||||
|
div.setAttribute("id", "page");
|
||||||
|
|
||||||
|
//// Modificar elementos en el DOM
|
||||||
|
|
||||||
|
/// Remplazar
|
||||||
|
// .textContent Devuelve el contenido de texto del elemento. Se puede asignar para modificar.
|
||||||
|
var div = document.querySelector("div"); // <div></div>
|
||||||
|
div.textContent = "Hola a todos"; // <div>Hola a todos</div>
|
||||||
|
div.textContent; // "Hola a todos"
|
||||||
|
|
||||||
|
// .innerHTML Devuelve el contenido HTML del elemento. Se puede usar asignar para modificar.
|
||||||
|
var div = document.querySelector(".info"); // <div class="info"></div>
|
||||||
|
div.innerHTML = "<strong>Importante</strong>"; // Interpreta el HTML
|
||||||
|
div.innerHTML; // "<strong>Importante</strong>"
|
||||||
|
div.textContent; // "Importante"
|
||||||
|
div.textContent = "<strong>Importante</strong>"; // No interpreta el HTML
|
||||||
|
|
||||||
|
// .outerHTML Devuelve el contenido HTML del elemento incluyendo el propio elemento. Se puede usar asignar para modificar.
|
||||||
|
// "<div class="data"><h1>Tema 1</h1></div>"
|
||||||
|
var data = document.querySelector(".data");
|
||||||
|
data.innerHTML = "<h1>Tema 1</h1>";
|
||||||
|
data.textContent; // "Tema 1"
|
||||||
|
data.innerHTML; // "<h1>Tema 1</h1>"
|
||||||
|
data.outerHTML; // "<div class="data"><h1>Tema 1</h1></div>"
|
||||||
|
|
||||||
|
/// Insertar
|
||||||
|
// .appendChild(node) Añade como hijo. Devuelve el nodo insertado.
|
||||||
|
var img = document.createElement("img");
|
||||||
|
img.src = "imagenes/rectangulo.jpg";
|
||||||
|
img.alt = "Imagen de un rectangulo";
|
||||||
|
|
||||||
|
document.body.appendChild(img); // Lo insertaría como hijo en el body al final de los que haya.
|
||||||
|
|
||||||
|
// .insertAdjacentElement(pos, elem) Inserta el elemento elem en la posición pos. Si falla,null.
|
||||||
|
// .insertAdjacentHTML(pos, str) Inserta el código HTML str en la posición pos.
|
||||||
|
// .insertAdjacentText(pos, text) Inserta el texto text en la posición pos.
|
||||||
|
|
||||||
|
var div = document.createElement("div"); // <div></div>
|
||||||
|
div.textContent = "Ejemplo"; // <div>Ejemplo</div>
|
||||||
|
|
||||||
|
var app = document.querySelector("#app"); // <div id="app">App</div>
|
||||||
|
// pos
|
||||||
|
app.insertAdjacentElement("beforebegin", div);
|
||||||
|
// Opción 1: <div>Ejemplo</div> <div id="app">App</div>
|
||||||
|
|
||||||
|
app.insertAdjacentElement("afterbegin", div);
|
||||||
|
// Opción 2: <div id="app"> <div>Ejemplo</div> App</div>
|
||||||
|
|
||||||
|
app.insertAdjacentElement("beforeend", div);
|
||||||
|
// Opción 3: <div id="app">App <div>Ejemplo</div> </div>
|
||||||
|
|
||||||
|
app.insertAdjacentElement("afterend", div);
|
||||||
|
// Opción 4: <div id="app">App</div> <div>Ejemplo</div>
|
||||||
|
|
||||||
|
// Element HTML Text
|
||||||
|
app.insertAdjacentElement("beforebegin", div);
|
||||||
|
// Opción 1: <div>Ejemplo</div> <div id="app">App</div>
|
||||||
|
|
||||||
|
app.insertAdjacentHTML("beforebegin", '<p>Hola</p>');
|
||||||
|
// Opción 2: <p>Hola</p> <div id="app">App</div>
|
||||||
|
|
||||||
|
app.insertAdjacentText("beforebegin", "Hola a todos");
|
||||||
|
// Opción 3: Hola a todos <div id="app">App</div>
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Pasos para crear e insertar
|
||||||
|
function crea1() {
|
||||||
|
var div = document.createElement("div"); // <div></div>
|
||||||
|
div.id = "page2"; // <div id="page"></div>
|
||||||
|
div.className = "data"; // <div id="page" class="data"></div>
|
||||||
|
div.style = "color: red"; // <div id="page" class="data" style="color: red"></div>
|
||||||
|
div.textContent = "Hola a todos";
|
||||||
|
// Inserto
|
||||||
|
document.body.appendChild(div);
|
||||||
|
}
|
||||||
|
|
||||||
|
function crea() {
|
||||||
|
var img = document.createElement("img");
|
||||||
|
img.src = "./imagenes/triangulo.png";
|
||||||
|
img.alt = "Imagen triangulo";
|
||||||
|
|
||||||
|
document.body.appendChild(img);
|
||||||
|
}
|
||||||
|
|
||||||
|
function creaCUA() {
|
||||||
|
var img = document.createElement("img");
|
||||||
|
img.src = "./imagenes/rectangulo.jpg";
|
||||||
|
img.alt = "Imagen cuadrado";
|
||||||
|
|
||||||
|
document.body.appendChild(img);
|
||||||
|
}
|
||||||
|
|
||||||
|
function creaAd() {
|
||||||
|
var div = document.createElement("div"); // <div></div>
|
||||||
|
var page=document.getElementById("page");
|
||||||
|
div.id = "adyacente"; // <div id="page"></div>
|
||||||
|
div.className = "data"; // <div id="page" class="data"></div>
|
||||||
|
div.style = "color: green"; // <div id="page" class="data" style="color: green"></div>
|
||||||
|
div.textContent = "Hola a todos soy adyacente";
|
||||||
|
// Inserto
|
||||||
|
page.insertAdjacentElement("afterend", div);
|
||||||
|
}
|
||||||
|
|
||||||
|
function creaAd2() {
|
||||||
|
var div = document.createElement("div"); // <div></div>
|
||||||
|
var page=document.getElementsByClassName("item");
|
||||||
|
sitio=page[1];
|
||||||
|
div.id = "adyacente"; // <div id="page"></div>
|
||||||
|
div.className = "data"; // <div id="page" class="data"></div>
|
||||||
|
div.style = "color: green"; // <div id="page" class="data" style="color: red"></div>
|
||||||
|
div.textContent = "Hola a todos soy adyacente";
|
||||||
|
// Inserto
|
||||||
|
sitio.insertAdjacentElement("afterend", div);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
Practicas/Practicas JS/DOM/imagenes/cilindro.png
Normal file
BIN
Practicas/Practicas JS/DOM/imagenes/cilindro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
Practicas/Practicas JS/DOM/imagenes/circunferencia.jpg
Normal file
BIN
Practicas/Practicas JS/DOM/imagenes/circunferencia.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
Practicas/Practicas JS/DOM/imagenes/rectangulo.jpg
Normal file
BIN
Practicas/Practicas JS/DOM/imagenes/rectangulo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
Practicas/Practicas JS/DOM/imagenes/triangulo.png
Normal file
BIN
Practicas/Practicas JS/DOM/imagenes/triangulo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Loading…
Reference in New Issue
Block a user