100 righe di codice che ogni sviluppatore JavaScript deve conoscere

JavaScript è uno dei linguaggi di programmazione più versatili e diffusi nel mondo dello sviluppo web. Questo articolo presenta 100 righe di codice JavaScript essenziali che ogni sviluppatore dovrebbe conoscere. Questi snippet coprono una vasta gamma di funzionalità, dalla manipolazione del DOM alla gestione degli eventi, passando per le funzionalità di array e oggetti.

1. Manipolazione del DOM

1.1 Selezionare un Elemento dal DOM

const element = document.querySelector('.my-class');
console.log(element);

1.2 Cambiare il Testo di un Elemento

document.getElementById('my-element').textContent = 'Nuovo testo';

1.3 Aggiungere una Classe a un Elemento

document.getElementById('my-element').classList.add('new-class');

1.4 Rimuovere una Classe da un Elemento

document.getElementById('my-element').classList.remove('old-class');

1.5 Creare un Nuovo Elemento

const newElement = document.createElement('div');
newElement.textContent = 'Ciao, mondo!';
document.body.appendChild(newElement);

2. Gestione degli Eventi

2.1 Aggiungere un Evento di Click a un Bottone

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
});

2.2 Rimuovere un Evento di Click da un Bottone

function handleClick() {
    alert('Button clicked!');
}
document.getElementById('myButton').removeEventListener('click', handleClick);

2.3 Prevenire il Comportamento Predefinito di un Form

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
});

2.4 Delegazione degli Eventi

document.getElementById('parent').addEventListener('click', function(event) {
    if (event.target && event.target.matches('button.my-class')) {
        alert('Button clicked!');
    }
});

2.5 Evento di Cambio su un Input

document.getElementById('myInput').addEventListener('change', function() {
    console.log('Input value changed:', this.value);
});

3. Array

3.1 Creare un Array

const array = [1, 2, 3, 4, 5];

3.2 Aggiungere un Elemento a un Array

array.push(6);
console.log(array);  // [1, 2, 3, 4, 5, 6]

3.3 Rimuovere l'Ultimo Elemento da un Array

array.pop();
console.log(array);  // [1, 2, 3, 4, 5]

3.4 Iterare su un Array

array.forEach(function(item) {
    console.log(item);
});

3.5 Mappare un Array

const newArray = array.map(function(item) {
    return item * 2;
});
console.log(newArray);  // [2, 4, 6, 8, 10]

3.6 Filtrare un Array

const filteredArray = array.filter(function(item) {
    return item > 2;
});
console.log(filteredArray);  // [3, 4, 5]

3.7 Ridurre un Array a un Singolo Valore

const sum = array.reduce(function(acc, item) {
    return acc + item;
}, 0);
console.log(sum);  // 15

3.8 Trovare un Elemento in un Array

const found = array.find(function(item) {
    return item === 3;
});
console.log(found);  // 3

3.9 Controllare se Tutti gli Elementi Soddisfano una Condizione

const allAboveZero = array.every(function(item) {
    return item > 0;
});
console.log(allAboveZero);  // true

3.10 Controllare se Almeno un Elemento Soddisfa una Condizione

const someAboveThree = array.some(function(item) {
    return item > 3;
});
console.log(someAboveThree);  // true

4. Oggetti

4.1 Creare un Oggetto

const person = {
    name: 'John',
    age: 30
};