JScript Katana

Cos’è “javascript:void(0)”? Guida completa al significato, all’uso e alle migliori pratiche

Altre utility / Strumenti ausiliari
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Introduzione – Cos’è “javascript:void(0)”?

Quando si impara JavaScript, si può imbattersi nella notazione “javascript:void(0)” nel codice. A prima vista può risultare difficile da comprendere. Tuttavia, è una delle tecniche utili per controllare il comportamento della pagina e gestire gli eventi. Questo articolo spiega chiaramente il significato, lo scopo e l’uso di “javascript:void(0)”. Copre anche le precauzioni importanti e le alternative moderne.

1-1. Domanda comune: cosa significa “javascript:void(0)”?

“javascript:void(0)” è una notazione usata per impedire il comportamento predefinito di link o pulsanti e, invece, eseguire JavaScript personalizzato. Normalmente, un tag HTML <a> naviga verso una pagina di destinazione quando viene cliccato. Ma quando si vuole che il link si comporti come un pulsante senza navigare da nessuna parte, “javascript:void(0)” diventa utile. Esempio:

<a href="javascript:void(0);">Click</a>

Cliccando questo link non succede nulla di per sé. Puoi collegare il tuo gestore di eventi JavaScript al suo posto.

1-2. Sfide del lettore e scopo dell’articolo

Quando si aggiunge una gestione di eventi personalizzata alle pagine web, esistono molti modi per controllare link e pulsanti. Tuttavia, “javascript:void(0)” può risultare confuso per i principianti e può influire sulla SEO o sull’accessibilità se usato in modo errato. Questo articolo copre i seguenti argomenti così da poterlo capire e usarlo correttamente:

  1. Il concetto di base e l’implementazione di “javascript:void(0)”
  2. Precauzioni e svantaggi
  3. Alternative più sicure e moderne

Con queste conoscenze, sarai in grado di costruire applicazioni web più moderne ed efficienti.

2. Concetto di base di “javascript:void(0)”

“javascript:void(0)” è un tipo di espressione JavaScript usata principalmente per disabilitare il comportamento predefinito di link o pulsanti. Questa sezione spiega come funziona l’operatore void e cosa significa realmente “void(0)”.

2-1. Cosa significa l’operatore “void”

In JavaScript, l’operatore “void” restituisce nulla (undefined). Normalmente, le espressioni JavaScript restituiscono un valore, ma “void” forza il risultato a undefined. Viene usato principalmente per ignorare il risultato della valutazione mentre si eseguono effetti collaterali. Esempio base:

console.log(void(0)); // Output: undefined

Questo conferma che void(0) restituisce undefined.

2-2. Cosa rappresenta “void(0)”

“void(0)” rappresenta “non fare nulla”. Valuta a undefined, impedendo la navigazione della pagina mentre consente il tuo comportamento di click personalizzato. Esempio:

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

Questo link non naviga ma attiva un alert.

2-3. Perché si usa “javascript:void(0)”

Le ragioni principali includono:

  1. Disabilitare la navigazione del link – Evita il ricaricamento della pagina gestendo eventi di click personalizzati.
  2. Usarlo come link morto – Utile come segnaposto durante lo sviluppo.
  3. Semplice e facile da implementare – Sintassi amichevole per i principianti.

3. Esempi d’uso e implementazione

Questa sezione spiega esempi pratici di utilizzo di “javascript:void(0)”, dai frammenti di base a scenari applicati.

3-1. Esempio di codice base

<a href="javascript:void(0);">Link</a>

Questo link non fa nulla quando viene cliccato.

3-2. Personalizzare gli eventi di click

Esempio 1: Mostrare un alert

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

3-3. Esempio basato su scenario

Attivare una finestra modale
HTML:

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript:

document.getElementById('openModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'none';
});

4. Vantaggi e svantaggi – Dovresti davvero usarlo?

“javascript:void(0)” è ampiamente utilizzato, ma ha alcuni svantaggi. Questa sezione spiega sia i vantaggi che le precauzioni.

4-1. Vantaggi

  1. Impedisce la navigazione predefinita
  2. Sintassi semplice e intuitiva
  3. Utile per link placeholder

4-2. Svantaggi

  1. Impatto SEO I motori di ricerca non possono analizzare il contenuto di href.
  2. Problemi di accessibilità I screen reader e la navigazione da tastiera potrebbero non funzionare correttamente.

4-3. Quando Usare e Quando Evitare

Casi d’Uso Raccomandati:

  • Comportamento come un pulsante ma implementato come un link
  • Link morti temporanei

Evitare Quando:

  • Hai bisogno di link friendly per SEO
  • L’accessibilità è importante

5. Alternative e Migliori Pratiche Moderne

Sebbene “javascript:void(0)” sia comodo, esistono approcci più moderni e sicuri.

5-1. Utilizzo di event.preventDefault()

Concetto Questo metodo annulla il comportamento predefinito come la navigazione del link o l’invio del form. Esempio HTML:

<a href="#" id="customLink">Link</a>

JavaScript:

document.getElementById('customLink').addEventListener('click', function(event) {
  event.preventDefault();
  alert('Custom event executed!');
});

5-2. Utilizzo del Tag <button>

HTML5 raccomanda l’uso di elementi <button> quando si implementa un comportamento simile a un pulsante. HTML:

<button id="actionButton">Click</button>

JavaScript:

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

5-3. Esempio Friendly per Accessibilità & SEO

HTML:

<a href="#" id="accessibleLink" tabindex="0">Click</a>

JavaScript:

document.getElementById('accessibleLink').addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    alert('Executed with Enter key!');
  }
});

6. Codice di Esempio per Caso d’Uso

6-1. Creazione di un Menu di Navigazione

HTML:

<a href="javascript:void(0);" id="menuToggle">Menu</a>
<ul id="menu" style="display: none;">
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

JavaScript:

document.getElementById('menuToggle').addEventListener('click', function() {
  const menu = document.getElementById('menu');
  menu.style.display = (menu.style.display === 'none') ? 'block' : 'none';
});

6-2. Trigger per Finestra Modale

HTML:

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript:

const modal = document.getElementById('modal');
document.getElementById('openModal').addEventListener('click', function() {
  modal.style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  modal.style.display = 'none';
});

7. Riassunto – Utilizzo di “javascript:void(0)” e Opzioni Future

7-1. Punti Chiave

  1. Concetto base : Disabilita il comportamento predefinito del link ed esegui logica personalizzata.
  2. Precauzioni e alternative : Usa event.preventDefault() o <button> per SEO e accessibilità.
  3. Esempi pratici : Menu di navigazione, trigger modali e altro.

7-2. Raccomandazioni per lo Sviluppo Moderno

Sebbene “javascript:void(0)” sia ancora utilizzato, lo sviluppo moderno dà priorità a SEO e usabilità. Approccio raccomandato:

  • Usa “javascript:void(0)” per prototipi rapidi o progetti molto piccoli.
  • Usa event.preventDefault() o <button> in ambienti di produzione.

7-3. Considerazioni Finali

Utilizzando le tecniche introdotte qui, implementa codice che considera sia SEO che esperienza utente.

広告