JAVASCRIPT
Nueva rama, la rama
Ejercicio En grupos
Refactoricen y mejoren el código del piedra papel tijeras ahora que tenemos mejorados nuestros superpoderes
MANIPULACIÓN DEL DOM/HTML
JavaScript y las variables globales
Cuando desarrollamos una web, podemos acceder a unas determinadas variables y funciones que ya están creadas por defecto.
Por ejemplo, cuando usábamos el console.log() o el alert eran funciones globales
Document
var nuestraWeb = document.body;
nuestraWeb.innerHTML = `<h1> Nuevo HTML</h1>`var mensaje = "Mi nombre";
mensaje = mensaje + ' no es ';
mensaje += 'Miguel';
console.log(mensaje) // Mi nombre no es MiguelPausa informativa
innerHTML + getElementById
var results = document.getElementById('results');
var numero = 25;
results.innerHTML += `<p> Nuevo resultado = ${numero}</p>`;<body>
<div id="results">
<h1> Zona de resultados <h1>
</div>
</body>innerHTML + getElementById
var displaySection = document.getElementById('display');
var username = prompt(`Hola, ¿cómo te llamas?`);
displaySection.innerHTML += `<h1> Bienvenido ${username}</h1>`;<body>
<div id="display"></div>
</body>onClick="metodo()"
<button onClick="peligro()"> ¡ NO ME PULSES ! </button>function peligro(){
alert('Peligro !!');
}
onClick="metodo(value)"
<li class="user"
onClick="userSelected('Pepe')">
<h2>Pepe</h2>
</li>function userSelected(username){
console.log(username);
}
En grupos
Volvemos al piedra papel tijeras
Ahora que sabes imprimir en el DOM usando el innerHTML y ahora que sabes detectar clicks.
¿Te animas a hacer un Piedra Papel y Tijeras con interfaz?
function userSelected(userHTML){
userHTML.style.backgroundColor = 'green';
userHTML.className += 'selected';
userHTML.classList.add('selected');
userHTML.classList.toggle('selected');
}
Changing the style
function userSelected(userHTML){
userHTML.innerText = 'Paco';
userHTML.innerHTML = '<h1>Paco</h1>';
// Si fuese un input
userHTML.value = 'Paco';
}
Changing the content
Curso de Frontend EOI-Telefonica Noviembre 2024. Javascript Séptimo día :) A practicar
By Yunior González Santana
Curso de Frontend EOI-Telefonica Noviembre 2024. Javascript Séptimo día :) A practicar
Séptimo día de Javascript del curso de "EOI Telefónica Noviembre 2024" online.
