Esercizi Classi Javascript

Codegrind Team•Jul 22 2023

Ecco degli esercizi semplici con soluzione per praticare le basi delle classi e programmazione ad oggetti in Javascript.

Esercizio 1

Ottenere un elemento per ID e stamparne il contenuto.

const elemento = document.getElementById("mioElemento");
console.log(elemento.textContent);

Esercizio 2

Ottenere un elemento per classe e modificare il suo stile.

const elementi = document.getElementsByClassName("mioElemento");
for (let i = 0; i < elementi.length; i++) {
  elementi[i].style.color = "red";
}

Esercizio 3

Ottenere elementi per tag e aggiungere loro una classe.

const elementi = document.getElementsByTagName("p");
for (let i = 0; i < elementi.length; i++) {
  elementi[i].classList.add("mioStile");
}

Esercizio 4

Ottenere un elemento utilizzando un selettore CSS e modificare il suo testo.

const elemento = document.querySelector("#mioElemento");
elemento.textContent = "Nuovo testo";

Esercizio 5

Ottenere tutti gli elementi che corrispondono a un selettore CSS e nasconderli.

const elementi = document.querySelectorAll(".mioElemento");
elementi.forEach((elemento) => {
  elemento.style.display = "none";
});

Esercizio 6

Ottenere il valore di un input di testo.

const input = document.getElementById("mioInput");
console.log(input.value);

Esercizio 7

Ottenere il valore selezionato di un elemento select.

const select = document.getElementById("mioSelect");
const valoreSelezionato = select.value;
console.log(valoreSelezionato);

Esercizio 8

Ottenere il valore di un elemento checkbox.

const checkbox = document.getElementById("mioCheckbox");
const isChecked = checkbox.checked;
console.log(isChecked);

Esercizio 9

Ottenere il valore di un elemento radio selezionato.

const radios = document.getElementsByName("mioRadio");
let valoreSelezionato;
radios.forEach((radio) => {
  if (radio.checked) {
    valoreSelezionato = radio.value;
  }
});
console.log(valoreSelezionato);

Esercizio 10

Ottenere tutti gli elementi figli di un elemento padre e aggiungere loro una classe.

const elementoPadre = document.getElementById("elementoPadre");
const elementiFigli = elementoPadre.children;
for (let i = 0; i < elementiFigli.length; i++) {
  elementiFigli[i].classList.add("miaClasse");
}

Esercizio 11

Ottenere il primo elemento figlio di un elemento padre e modificare il suo testo.

const elementoPadre = document.getElementById("elementoPadre");
const primoFiglio = elementoPadre.firstElementChild;
primoFiglio.textContent = "Nuovo testo";

Esercizio 12

Ottenere l'elemento successivo di un elemento e nasconderlo.

const elementoCorrente = document.getElementById("elementoCorrente");
const elementoSuccessivo = elementoCorrente.nextElementSibling;
elementoSuccessivo.style.display = "none";

Esercizio 13

Ottenere l'elemento precedente di un elemento e rimuovergli una classe.

const elementoCorrente = document.getElementById("elementoCorrente");
const elementoPrecedente = elementoCorrente.previousElementSibling;
elementoPrecedente.classList.remove("miaClasse");

Esercizio 14

Ottenere tutti gli elementi che hanno un determinato attributo e aggiungere loro una classe.

const elementiConAttributo = document.querySelectorAll("[data-mioAttributo]");
elementiConAttributo.forEach((elemento) => {
  elemento.classList.add("miaClasse");
});

Esercizio 15

Ottenere tutti gli elementi che corrispondono a un selettore CSS all'interno di un altro elemento e modificarne il contenuto.

const elementoPadre = document.getElementById("elementoPadre");
const elementiFigli = elementoPadre.querySelectorAll(".mioElemento");
elementiFigli.forEach((elemento) => {
  elemento.textContent = "Nuovo testo";
});

Esercizio 16

Ottenere tutti gli elementi che hanno una classe specifica all'interno di un elemento e nasconderli.

const elementoPadre = document.getElementById("elementoPadre");
const elementiFigli = elementoPadre.getElementsByClassName("miaClasse");
for (let i = 0; i < elementiFigli.length; i++) {
  elementiFigli[i].style.display = "none";
}

Esercizio 17

Ottenere tutti gli elementi che contengono un determinato testo e aggiungere loro una classe.

const elementiConTesto = document.querySelectorAll(':contains("mioTesto")');
elementiConTesto.forEach((elemento) => {
  elemento.classList.add("miaClasse");
});

Esercizio 18

Ottenere il valore di un attributo di un elemento

const elemento = document.getElementById("mioElemento");
const valoreAttributo = elemento.getAttribute("data-mioAttributo");
console.log(valoreAttributo);