JScript Katana

Qu’est‑ce que “javascript:void(0)” ? Guide complet sur la signification, l’utilisation et les meilleures pratiques

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

1. Introduction – Qu’est‑ce que “javascript:void(0)” ?

Lorsque vous apprenez le JavaScript, vous pouvez rencontrer la notation “javascript:void(0)” dans le code. À première vue, elle peut sembler difficile à comprendre. Pourtant, il s’agit d’une technique utile pour contrôler le comportement d’une page et gérer le traitement des événements.
Cet article explique clairement la signification, le but et l’utilisation de “javascript:void(0)”. Il aborde également les précautions importantes et les alternatives modernes.

1-1. Question fréquente : Que signifie “javascript:void(0)” ?

“javascript:void(0)” est une notation utilisée pour empêcher le comportement par défaut des liens ou des boutons et exécuter du JavaScript personnalisé à la place.
Normalement, une balise HTML <a> navigue vers une page de destination lorsqu’on clique dessus. Mais lorsqu’on veut que le lien se comporte comme un bouton sans navigation, “javascript:void(0)” devient pratique.
Exemple :

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

Cliquer sur ce lien ne fait rien en soi. Vous pouvez y attacher votre propre gestion d’événement JavaScript à la place.

1-2. Difficultés des lecteurs et objectif de l’article

Lorsqu’on ajoute une gestion d’événement personnalisée aux pages web, il existe de nombreuses façons de contrôler les liens et les boutons. Cependant, “javascript:void(0)” peut prêter à confusion pour les débutants et peut affecter le SEO ou l’accessibilité s’il est mal utilisé.
Cet article couvre les sujets suivants afin que vous puissiez le comprendre et l’utiliser correctement :

  1. Le concept de base et l’implémentation de “javascript:void(0)”
  2. Précautions et inconvénients
  3. Alternatives plus sûres et modernes

Avec ces connaissances, vous serez capable de créer des applications web plus modernes et efficaces.

2. Concept de base de “javascript:void(0)”

“javascript:void(0)” est un type d’expression JavaScript utilisé principalement pour désactiver le comportement par défaut des liens ou des boutons. Cette section explique comment fonctionne l’opérateur void et ce que signifie réellement “void(0)”.

2-1. Ce que signifie l’opérateur “void”

En JavaScript, l’opérateur “void” renvoie rien (undefined).
Normalement, les expressions JavaScript renvoient une valeur, mais “void” force le résultat à être undefined. Il est principalement utilisé pour ignorer le résultat d’une évaluation tout en effectuant des effets de bord.
Exemple de base :

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

Cela confirme que void(0) renvoie undefined.

2-2. Ce que représente “void(0)”

“void(0)” signifie “ne rien faire”. Il s’évalue à undefined, empêchant la navigation de la page tout en permettant votre comportement de clic personnalisé.
Exemple :

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

Ce lien ne navigue pas mais déclenche une alerte.

2-3. Pourquoi utilise‑t‑on “javascript:void(0)”

Les principales raisons sont :

  1. Désactiver la navigation du lien : éviter le rechargement de la page tout en gérant des clics personnalisés.
  2. Utiliser comme lien mort : pratique comme espace réservé pendant le développement.
  3. Simple et facile à implémenter : syntaxe conviviale pour les débutants.

3. Exemples d’utilisation et implémentation

Cette section explique des exemples concrets d’utilisation de “javascript:void(0)”, des extraits de base aux scénarios appliqués.

3-1. Exemple de code de base

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

Ce lien ne fait rien lorsqu’on clique dessus.

3-2. Personnalisation des événements de clic

Exemple 1 : Afficher une alerte

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

3-3. Exemple basé sur un scénario

Déclencher une fenêtre 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. Avantages et inconvénients – Faut‑il vraiment l’utiliser ?

“javascript:void(0)” est largement utilisé, mais il présente certains inconvénients. Cette section explique à la fois les avantages et les précautions.

4-1. Avantages

  1. Empêche la navigation par défaut
  2. Syntaxe simple et intuitive
  3. Utile pour les liens factices

4-2. Inconvénients

  1. Impact SEO Les moteurs de recherche ne peuvent pas explorer le contenu du href.
  2. Problèmes d’accessibilité Les lecteurs d’écran et la navigation au clavier peuvent ne pas fonctionner correctement.

4-3. Quand l’utiliser et quand l’éviter

Cas d’utilisation recommandés :

  • Se comporter comme un bouton tout en étant implémenté comme un lien
  • Liens temporaires inactifs

À éviter lorsque :

  • Vous avez besoin de liens compatibles SEO
  • L’accessibilité est importante

5. Alternatives et bonnes pratiques modernes

Bien que “javascript:void(0)” soit pratique, des approches plus modernes et plus sûres existent.

5-1. Utilisation de event.preventDefault()

Concept
Cette méthode annule le comportement par défaut tel que la navigation du lien ou la soumission d’un formulaire.

Exemple
HTML :

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

JavaScript :

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

5-2. Utilisation de la balise <button>

HTML5 recommande d’utiliser les éléments <button> lorsqu’on implémente un comportement de type bouton.
HTML :

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

JavaScript :

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

5-3. Exemple accessible et SEO‑friendly

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. Code d’exemple par cas d’utilisation

6-1. Création d’un menu de navigation

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. Déclencheur de fenêtre 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. Résumé – Utilisation de “javascript:void(0)” et options futures

7-1. Points clés

  1. Concept de base : Désactiver le comportement de lien par défaut et exécuter une logique personnalisée.
  2. Précautions et alternatives : Utiliser event.preventDefault() ou <button> pour le SEO et l’accessibilité.
  3. Exemples pratiques : Menus de navigation, déclencheurs de modales, etc.

7-2. Recommandations pour le développement moderne

Bien que “javascript:void(0)” soit encore utilisé, le développement moderne privilégie le SEO et l’utilisabilité.
Approche recommandée :

  • Utiliser “javascript:void(0)” pour des prototypes rapides ou de très petits projets.
  • Utiliser event.preventDefault() ou <button> en production.

7-3. Conclusion

En appliquant les techniques présentées ici, vous pourrez coder en tenant compte à la fois du SEO et de l’expérience utilisateur.

広告