Tag: codice

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.