JavaScript è uno dei linguaggi più versatili e diffusi nello sviluppo web. Questo articolo presenta 100 righe di codice essenziali che ogni sviluppatore dovrebbe conoscere; questi snippet offrono soluzioni rapide e migliorano l’efficienza nello sviluppo quotidiano.
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
};
4.2 Aggiungere una Proprietà a un Oggetto
person.email = '[email protected]';
console.log(person);
4.3 Rimuovere una Proprietà da un Oggetto
delete person.age;
console.log(person);
4.4 Iterare su un Oggetto
for (let key in person) {
if (person.hasOwnProperty(key)) {
console.log(key + ': ' + person[key]);
}
}
4.5 Creare un Oggetto con un Metodo
const person = {
name: 'John',
age: 30,
greet: function() {
console.log('Hello, ' + this.name);
}
};
person.greet(); // Hello, John
5. Funzioni
5.1 Funzione Dichiarata
function greet(name) {
return 'Hello, ' + name;
}
console.log(greet('John')); // Hello, John
5.2 Funzione Assegnata a una Variabile
const greet = function(name) {
return 'Hello, ' + name;
};
console.log(greet('John')); // Hello, John
5.3 Funzione Freccia
const greet = (name) => 'Hello, ' + name;
console.log(greet('John')); // Hello, John
5.4 Funzione che Restituisce un’ Altra Funzione
function createGreeting(greeting) {
return function(name) {
return greeting + ', ' + name;
};
}
const greet = createGreeting('Hello');
console.log(greet('John')); // Hello, John
5.5 Funzione Ricorsiva
function factorial(n) {
if (n === 0) {
return 1;
}
return n * factorial(n - 1);
}
console.log(factorial(5)); // 120
6. Promesse e Async/Await
6.1 Creare una Promessa
const myPromise = new Promise((resolve, reject) => {
const success = true;
if (success) {
resolve('Operation successful');
} else {
reject('Operation failed');
}
});
6.2 Utilizzare una Promessa
myPromise.then((message) => {
console.log(message);
}).catch((error) => {
console.error(error);
});
6.3 Funzione Asincrona con Async/Await
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData();
6.4 Utilizzare Promise.all per Eseguire Più Promesse in Parallelo
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values); // [3, 42, 'foo']
});
7. Utilità Varie
7.1 Timer con setTimeout
setTimeout(() => {
console.log('This message is delayed by 2 seconds');
}, 2000);
7.2 Timer con setInterval
const intervalId = setInterval(() => {
console.log('This message repeats every second');
}, 1000);
// Per fermare l'intervallo
clearInterval(intervalId);
7.3 Clonare un Oggetto
const original = { a: 1, b: 2 };
const clone = { ...original };
console.log(clone); // { a: 1, b: 2 }
7.4 Mescolare gli Elementi di un Array
const array = [1, 2, 3, 4, 5];
array.sort(() => Math.random() - 0.5);
console.log(array);
7.
5 Verificare se una Variabile è un Array
const array = [1, 2, 3];
console.log(Array.isArray(array)); // true
7.6 Unire Due Oggetti
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 2 }
7.7 Rimuovere Duplicati da un Array
const array = [1, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]
7.8 Convertire un Oggetto in una Stringa JSON
const obj = { a: 1, b: 2 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // {"a":1,"b":2}
7.9 Convertire una Stringa JSON in un Oggetto
const jsonString = '{"a":1,"b":2}';
const obj = JSON.parse(jsonString);
console.log(obj); // { a: 1, b: 2 }
7.10 Controllare se una Stringa Contiene un’ Altra Stringa
const str = 'Hello, world!';
console.log(str.includes('world')); // true
8. Manipolazione di Date e Ore
8.1 Creare una Data
const now = new Date();
console.log(now);
8.2 Ottenere l’Anno Corrente
const year = new Date().getFullYear();
console.log(year); // es. 2024
8.3 Ottenere il Mese Corrente
const month = new Date().getMonth() + 1; // I mesi sono indicizzati da 0
console.log(month); // es. 7 per Luglio
8.4 Aggiungere Giorni a una Data
const date = new Date();
date.setDate(date.getDate() + 5);
console.log(date);
8.5 Formattare una Data
const date = new Date();
const formattedDate = date.toLocaleDateString('it-IT');
console.log(formattedDate); // es. 19/07/2024
9. Manipolazione di Stringhe
9.1 Convertire una Stringa in Maiuscolo
const str = 'hello, world!';
const upperStr = str.toUpperCase();
console.log(upperStr); // HELLO, WORLD!
9.2 Convertire una Stringa in Minuscolo
const str = 'HELLO, WORLD!';
const lowerStr = str.toLowerCase();
console.log(lowerStr); // hello, world!
9.3 Sostituire Parte di una Stringa
const str = 'Hello, world!';
const newStr = str.replace('world', 'JavaScript');
console.log(newStr); // Hello, JavaScript!
9.4 Estrarre una Sottostringa
const str = 'Hello, world!';
const substr = str.substring(0, 5);
console.log(substr); // Hello
9.5 Dividere una Stringa in un Array
const str = 'Hello, world!';
const arr = str.split(', ');
console.log(arr); // ['Hello', 'world!']
10. Utilizzo di RegEx
10.1 Testare un Pattern
const str = 'Hello, world!';
const pattern = /world/;
console.log(pattern.test(str)); // true
10.2 Ottenere un Match
const str = 'Hello, world!';
const match = str.match(/world/);
console.log(match); // ['world']
10.3 Sostituire con RegEx
const str = 'Hello, world!';
const newStr = str.replace(/world/, 'JavaScript');
console.log(newStr); // Hello, JavaScript!
10.4 Estrarre Numeri da una Stringa
const str = '123 abc 456';
const numbers = str.match(/\d+/g);
console.log(numbers); // ['123', '456']
10.5 Verificare il Formato di una Email
const email = '[email protected]';
const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
console.log(isValidEmail); // true
Questi 100 snippet di codice JavaScript coprono una vasta gamma di operazioni comuni e utili che ogni sviluppatore dovrebbe conoscere. Essere familiari con questi frammenti di codice ti aiuterà a risolvere problemi rapidamente e a migliorare la qualità del tuo lavoro.