abril 2024 – Página 3 – Trifulcas

Ejemplo creación dinámica inputs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #contenedor {
            background-color: aqua;
        }
        input{
            display: block;
        }
    </style>
</head>

<body>
    <label for="alumnos">Dime el número de alumnos</label>
    <input type="number" id="alumnos" value="0" />
    <div id="contenedor">
    </div>
    <script src="js/script.js"></script>
</body>

</html>

window.onload=function(){
    let alumnos=document.getElementById("alumnos");
    alumnos.addEventListener("input", function(){
        let numero=this.value;
        let contenedor=document.getElementById("contenedor");
        contenedor.innerHTML="";
        for (let i=1;i<=numero;i++){
            let caja=createCaja("alumno"+i);
            contenedor.append(caja);

        }
    })
   
}

function createCaja(nombre){
    let cajaTexto = document.createElement('input');
    cajaTexto.size=30;
    cajaTexto.type="text";
    cajaTexto.id=nombre;
    cajaTexto.placeholder="Introduce el nombre del "+nombre;
    return cajaTexto;
}

document.getElementById("contenedor").append(cajaTexto);

Ejemplo crear y añadir nodos

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #contenedor{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="contenedor">
        <h1>Hola</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nobis quidem, pariatur aliquid, aliquam accusamus amet ullam provident impedit maxime nisi deserunt officiis alias odit aspernatur fugiat quia esse soluta.</p>
    </div>
    <script src="js/script.js"></script>
</body>
</html>

let titulo=document.createElement('h3');
titulo.innerHTML="Título extra before";
console.log(titulo)
let contenedor=document.getElementById("contenedor");
contenedor.before(titulo);
let titulo2=titulo.cloneNode();
titulo2.innerHTML="Título extra after";
contenedor.after(titulo2);
let titulo3=titulo.cloneNode();
titulo3.innerHTML="Título extra prepend";
contenedor.prepend(titulo3);
let titulo4=titulo.cloneNode();
titulo4.innerHTML="Título extra append";
contenedor.append(titulo4);

Calculadora version 4


// Asigno el mismo evento a todos los botones
for (elemento of document.getElementsByTagName("button")) {
    elemento.addEventListener("click", operacion);
}

function operacion() {
    let operacion=this.innerHTML;
    let [numero1, numero2] = obtenerNumeros();
    let resultado=0;
    switch(operacion){
        case "+": resultado=numero1 + numero2;break;
        case "-": resultado=numero1 - numero2;break;
        case "*": resultado=numero1 * numero2;break;
        case "/": resultado=numero1 / numero2;break;
    }
   
    // Muestro el valor
    ponerNumero(resultado);
}


// Interacción con el HTML
function obtenerNumeros() {
    let numero1 = document.getElementById("numero1");
    let numero2 = document.getElementById("numero2");
    return [Number(numero1.value), Number(numero2.value)];
}

function ponerNumero(numero) {
    let resultado = document.getElementById("resultado");
    resultado.value = numero;
}

Calculadora refactorizada (versión 3)

// Asignación de los eventos
document.getElementById("suma").addEventListener("click", sumar);
document.getElementById("resta").addEventListener("click", restar);
document.getElementById("multiplicacion").addEventListener("click", multiplicar);
document.getElementById("division").addEventListener("click", dividir);

// Funciones que implementan la lógica
function sumar() {
    // Obtengo los valores
    let [numero1, numero2] = obtenerNumeros();
    // Los sumo
    let suma = numero1 + numero2;
    // Muestro el valor
   ponerNumero(suma);
}

function restar() {
    // Obtengo los valores
    let [numero1, numero2] = obtenerNumeros();  // Los sumo
    let resta = numero1 - numero2;
    // Muestro el valor
   ponerNumero(resta);
}

function multiplicar() {
    // Obtengo los valores
    let [numero1, numero2] = obtenerNumeros();  // Los sumo
    let multiplicacion = numero1 * numero2;
    // Muestro el valor
    ponerNumero(multiplicacion);
}


function dividir() {
    // Obtengo los valores
    let [numero1, numero2] = obtenerNumeros();  // Los sumo
    let division = numero1 / numero2;
    // Muestro el valor
    ponerNumero(division);
}

function obtenerNumeros() {
    let numero1 = document.getElementById("numero1");
    let numero2 = document.getElementById("numero2");
    return [Number(numero1.value), Number(numero2.value)];
}

function ponerNumero(numero) {
    let resultado = document.getElementById("resultado");
    resultado.value = numero;
}

Calculadora refactorizada (versión 2)

// Asignación de los eventos
document.getElementById("suma").addEventListener("click", sumar);
document.getElementById("resta").addEventListener("click", restar);
document.getElementById("multiplicacion").addEventListener("click", multiplicar);
document.getElementById("division").addEventListener("click", dividir);

// Funciones que implementan la lógica
function sumar() {
    // Obtengo los valores
    let numero1 = document.getElementById("numero1");
    let numero2 = document.getElementById("numero2");
    // Los sumo
    let suma = Number(numero1.value) + Number(numero2.value);
    // Muestro el valor
    let resultado = document.getElementById("resultado");
    resultado.value = suma;
}

function restar () {
    // Obtengo los valores
    let numero1 = document.getElementById("numero1");
    let numero2 = document.getElementById("numero2");
    // Los sumo
    let suma = Number(numero1.value) - Number(numero2.value);
    // Muestro el valor
    let resultado = document.getElementById("resultado");
    resultado.value = suma;
}

function multiplicar () {
    // Obtengo los valores
    let numero1 = document.getElementById("numero1");
    let numero2 = document.getElementById("numero2");
    // Los sumo
    let suma = Number(numero1.value) * Number(numero2.value);
    // Muestro el valor
    let resultado = document.getElementById("resultado");
    resultado.value = suma;
}


 function dividir() {
    // Obtengo los valores
    let numero1 = document.getElementById("numero1");
    let numero2 = document.getElementById("numero2");
    // Los sumo
    let suma = Number(numero1.value) / Number(numero2.value);
    // Muestro el valor
    let resultado = document.getElementById("resultado");
    resultado.value = suma;
}

Calculadora solución 1

 <h1>Calculadora</h1>
    <input type="number" id="numero1">
    <button id="suma">+</button>
    <button id="resta">-</button>
    <button id="multiplicacion">*</button>
    <button id="division">/</button>
    <input type="number" id="numero2">
    =
    <input type="number" id="resultado">
    <script src="js/script.js"></script>

// Vamos a hacer la suma
// 1.- Establecer el algoritmo (la receta)
// 2.- Comprobar el programa
// 3.- Refactorizar (mejorar)
// Cuando pulsen la suma se suman los dos numeros y se muestran en el resultado
// a) Saber como hacer que cuando pulsen un botón mi programa haga algo
// Añadiendo un evento al botón
// b) Saber coger el valor de una caja de texto
// Obtener el elemento y con 'value'
// c) Saber sumar dos números
// con +
// d) Saber cambiar el valor de una caja de texto
// obtener el elemento y usar el value
// Al pulsar el botón obtener los dos valores, sumarlos y ponerlos en la caja de resultado

let suma=document.getElementById("suma");
suma.onclick=function(){
    // Obtengo los valores
    let numero1=document.getElementById("numero1");
    let numero2=document.getElementById("numero2");
    // Los sumo
    let suma=Number(numero1.value)+Number(numero2.value);
    // Muestro el valor
    let resultado=document.getElementById("resultado");
    resultado.value=suma;
}

let resta=document.getElementById("resta");
resta.onclick=function(){
    // Obtengo los valores
    let numero1=document.getElementById("numero1");
    let numero2=document.getElementById("numero2");
    // Los sumo
    let suma=Number(numero1.value)-Number(numero2.value);
    // Muestro el valor
    let resultado=document.getElementById("resultado");
    resultado.value=suma;
}

let multiplicacion=document.getElementById("multiplicacion");
multiplicacion.onclick=function(){
    // Obtengo los valores
    let numero1=document.getElementById("numero1");
    let numero2=document.getElementById("numero2");
    // Los sumo
    let suma=Number(numero1.value)*Number(numero2.value);
    // Muestro el valor
    let resultado=document.getElementById("resultado");
    resultado.value=suma;
}


let division=document.getElementById("division");
division.onclick=function(){
    // Obtengo los valores
    let numero1=document.getElementById("numero1");
    let numero2=document.getElementById("numero2");
    // Los sumo
    let suma=Number(numero1.value)/Number(numero2.value);
    // Muestro el valor
    let resultado=document.getElementById("resultado");
    resultado.value=suma;
}

Teclado

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="nombre" name="nombre">
    <script src="js/teclado.js"></script>
</body>
</html>

let caja = document.getElementById("nombre");

// Se activa al pulsar la tecla
caja.onkeydown = function (evt) {
    console.log(evt);
    // No permite la pulsación de la letra 'A'
    if (evt.key == "a") {
        return false; // Cancela el evento, o sea que se carga la pulsación de la tecla
    }
}

// Al levantar la tecla
caja.onkeyup = function (evt) {
    console.log(evt);
}


// Cuando el elemento tiene el foco
caja.onfocus=function(evt){
    console.log("Cogemos el foco");
    this.style.backgroundColor="Yellow";
}

// Cuando el elemento pierde el foco
caja.onblur=function(evt){
    console.log("Perdemos el foco");
    this.style.backgroundColor="White";
}

// Cuando cambia el valor y salimos del elemento
caja.onchange=function(evt){
    console.log(evt);
}

// Cuando cambia el valor sin salir del elemento
caja.oninput=function(evt){
    console.log(evt);
}

Ejemplos eventos

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="test"></div>

    <script src="js/mouse.js"></script>
</body>
</html>

#test{
    height: 200px;
    width: 200px;
    background-color: chartreuse;
}

let caja=document.getElementById("test");

caja.onclick=function(evt){
    console.log("Has pinchado");
}

Eventos intro

 <button id="pinchar">Pínchame</button>
    <button id="otro">Pínchame también</button>
    <button id="otromas">Pínchame de nuevo</button>


// Eventos. Primero capturo el elemento
let boton=document.getElementById("pinchar");
let otro=document.getElementById("otro");
let otromas=document.getElementById("otromas");

// Asigno a sus eventos la función que quiero usar

// Una función que ya existe
boton.onclick=saludar;

function saludar(){
    alert("Hola");
}

// Una función definida en el  momento
otro.onclick=function(){
    alert("Hola que tal");
}

// Una función flecha
otromas.onclick=()=>{
    alert("con función flecha")
}

Ejemplo JS

  <p>Esto es una prueba</p>
    <input type="text" size="20" value="Hola" id="nombre" name="nombre"/>
    <p id="resultado"></p>

    <script src="js/prueba.js"></script>


let tabla = "";
// Creo una cadena con la tabla de multiplicar
for (let i = 1; i <= 10; i++) {
    tabla += i + " x 5 = " + (i * 5) + "<br/>"
}

// Cambio el  párrafo para que tenga esa cadena
document.getElementById("resultado").innerHTML = tabla;