Revise paste 91adf5102fa64

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lezione 3 Novembre</title>
    <style>
        * {
            /*margin: 0;*/
            /*padding: 0;*/
            box-sizing: border-box;
        }

body {
            font-family: Tahoma, Arial, Helvetica, sans-serif;
            font-size: 20px;
        }

.classe-uno {
            text-decoration: line-through;
        }

.classe-due {
            text-decoration: underline;
        }
        
        button {
            font-size: 20px;
        }

</style>
    <script defer src="index.js"></script>
</head>
<body>

<div>
    <h1 id="mio-titolo">Titolo!</h1>
</div>

Prima di article
<article>
    Dentro article prima del div
    <div>Questo e' un articolo</div>
    Dentro article dopo il div
</article>

<p>
    <em>Questo e' un testo in un paragrafo</em>
</p>

<p>
    Questo e' un testo nel secondo paragrafo
</p>

<div id="mio-div" class="classe-uno">
    <p>
        Questo e' un testo nel terzo paragrafo
    </p>
    <p>

</p>
    <p></p>
</div>

<ol>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
</ol>

<div id="ultimo-div"></div>
<br>
<button id="mio-bottone">Cliccami!</button>
<br>
<br>
<br>

</body>
</html>

// js

// Metodi dell'oggetto document

let elemento = document.getElementById("mio-titolo");

console.log(elemento.innerText);
elemento.innerText =  "Nuovo Titolo!"

//
elemento.classList.add(...["mia-classe", "mia-classe2"]);
// elemento.classList.remove("mia-classe");
//
elemento.style.color = "red";
elemento.style.color = "blue";
elemento.style.fontSize = "3em";
// elemento.style.fontWeight = "bold";
//

// <h1 style="color: red;"></h1>
console.log(elemento.innerText);

let paragrafo = document.querySelector("p");
// paragrafo.innerText = "<strong>Nuovo contenuto del paragrafo!</strong>";

// paragrafo.innerHTML = paragrafo.innerHTML + "<strong>Nuovo contenuto del paragrafo!</strong>";
paragrafo.innerHTML += "<strong>Nuovo contenuto del paragrafo!</strong>";

let frase = "Ciao!";
let fraseFinale = "";

// Ciclo for per creare una stringa di HTML da inserire in una sola
// volta in un tag qualsiasi

for (let i = 0; i < 5; i++) {
    fraseFinale = fraseFinale + ("<br>" + frase); // "Ciao!<br>"
    // 2a ripetizione del ciclo fraseFinale == "Ciao!<br>Ciao!<br>"
}

paragrafo.innerHTML += fraseFinale;

paragrafo.innerHTML += "<br><strong>Nuovo contenuto del paragrafo!</strong>";

let contenutoParagrafoInHTML = paragrafo.innerHTML;
console.log(contenutoParagrafoInHTML)

let contenutoParagrafoText = paragrafo.innerText;
console.log(contenutoParagrafoText)
// paragrafo.innerHTML = "Nuovo contenuto del paragrafo!";
// paragrafo.innerText =  "<h1>Nuovo Titolo!"

let mioDiv = document.querySelector("article > div");

// articolo.innerText = "<h1>Ciao</h1>" ;
mioDiv.innerHTML = "<h1>Ciao</h1>" ;

1) document.getElementById("id di un tag")
2) document.querySecelector("nome di un tag")
3) document.querySelectorAll("selettore come per i CSS")
4) document.getElementsByTagName("nome di un tag")
4) .innerText
5) .innerHTML

/*
    p {
        dsdsds
    }
 */
let tuttiParagrafi = document.querySelectorAll("div.classe-uno > p");

// let p1 = tuttiParagrafi[0];
// let p2 = tuttiParagrafi[1];

// p1.innerHTML = "Paragrafo recuperato con querySelectorAll";
// p2.innerHTML = "Secondo paragrafo recuperato con querySelectorAll";

// let i = 900;
for (let i = 0; i < tuttiParagrafi.length; i++) {

if (i === 0) {
        // lavora
    }
    tuttiParagrafi[i].innerText = "Con loop for - Paragrafo " + i.toString() + " recuperato con querySelectorAll";
}

// console.log(i);

for (let mioSuperElemento of tuttiParagrafi) {
    mioSuperElemento.style.fontSize = "2.em";
}

let paragrafiConUnaClasse = document.getElementsByClassName("classe-uno");

document.getElementById("div-finale").innerText = paragrafiConUnaClasse.length.toString();
// document.getElementsByTagName("p")

let tagNuovo = document.createElement("p");
tagNuovo.innerText = "Nuovo paragrafo che non esisteva";
document.getElementById("div-finale").appendChild(tagNuovo);

let nuovoDiv = document.createElement("div");
nuovoDiv.id = "mio-nuovo-div";

let nuovoParagrafoUno = document.createElement("p");
let nuovoParagrafoDue = document.createElement("p");
let nuovoParagrafoTre = document.createElement("p");

nuovoDiv.appendChild(nuovoParagrafoUno);
nuovoDiv.appendChild(nuovoParagrafoDue);
nuovoDiv.appendChild(nuovoParagrafoTre);
nuovoParagrafoUno.innerText = "Primo paragrafo dal nulla";
nuovoParagrafoDue.innerText = "Secondo paragrafo dal nulla";
nuovoParagrafoTre.innerText = "Terzo paragrafo dal nulla";
// nuovoParagrafoUno.

let mioFooter = document.querySelector("footer");

mioFooter.appendChild(nuovoDiv);

// window.setTimeout(() => {
//     mioFooter.style.visibility = "hidden";
// }, 10000)
//
//
// window.setTimeout(() => {
//     mioFooter.style.visibility = "visible";
// }, 15000)

let ultimoDiv = document.getElementById("ultimo-div");
let mioBottone = document.getElementById("mio-bottone");

mioBottone.addEventListener("mouseover", () => {
    mioFooter.style.visibility = "hidden";
    ultimoDiv.innerHTML = "<h3>Hai cliccato sul pulsante sinistro del mouse!</h3>";
});

mioBottone.addEventListener("mouseleave", () => {
    mioFooter.style.visibility = "visible";
    ultimoDiv.innerHTML = "<h3>Hai lasciato il pulsante sinistro del mouse!</h3>";
});