javascript without jquery

JavaScript sans jQuery

Conseils et exemples pratiques, tirés de l'article CatsWhoCode.

Table des matières

1. À l'écoute du document prêt
2. Ajout d'écouteurs d'événements
3. Sélection d'éléments
4. Utiliser Ajax
5. Ajout et suppression de classes
6. Fondu entrant
7. Masquer et afficher des éléments
8. Manipulation du DOM

À l'écoute du document prêt

Une page ne peut pas être manipulée en toute sécurité tant que le document n'est pas « prêt ». Pour cette raison, nous, les développeurs, avons pris l'habitude d'encapsuler tout notre code JS dans la fonction jQuery $(document).ready() :

 $ ( document ) . ready ( function ( ) {
  console . log ( 'ready!' ) ;
} ) ;

Le même résultat peut être obtenu facilement en utilisant du JavaScript pur :

 document . addEventListener ( 'DOMContentLoaded' , function ( ) {
  console . log ( 'ready!' ) ;
} ) ;

Ajout d'écouteurs d'événements

Les écouteurs d'événements constituent une partie très importante du développement JavaScript. jQuery a un moyen très simple de les gérer :

 $ ( someElement ) . on ( 'click' , function ( ) {
  // TODO event handler logic
} ) ;

Vous n'avez pas besoin de jQuery pour créer des écouteurs d'événements en JavaScript. Voici comment procéder :

 someElement . addEventListener ( 'click' , function ( ) {
  // TODO event handler logic
} ) ;

Sélection d'éléments

jQuery facilite grandement la sélection d'éléments à l'aide d'un identifiant, d'un nom de classe, d'un nom de balise, etc :

 // By ID
$ ( '#myElement' ) ;

// By Class name
$ ( '.myElement' ) ;

// By tag name
$ ( 'div' ) ;

// Children
$ ( '#myParent' ) . children ( ) ;

// Complex selecting
$ ( 'article#first p.summary' ) ;

Pure JavaScript propose différentes manières de sélectionner des éléments. Toutes les méthodes ci-dessous fonctionnent sur tous les navigateurs modernes ainsi que sur IE8+.

 // By ID
document . querySelector ( '#myElement' ) ;

// By Class name
document . querySelectorAll ( '.myElement' ) ;

// By tag name
document . querySelectorAll ( 'div' ) ;

// Children
document . querySelectorAll ( 'myParent' ) . childNodes ;

// Complex selecting
document . querySelectorAll ( 'article#first p.summary' ) ;

Utiliser Ajax

Comme la plupart d’entre vous le savent, Ajax est un ensemble de technologies permettant de créer des applications web asynchronymes. jQuery dispose d'un ensemble de méthodes utiles pour Ajax, notamment get() comme indiqué ci-dessous :

 $ . get ( 'ajax/test.html' , function ( data ) {
  $ ( '.result' ) . html ( data ) ;
  alert ( 'Load was performed.' ) ;
} ) ;

Bien que jQuery rende le développement Ajax plus facile et plus rapide, il est certain que vous n'avez pas besoin du framework pour utiliser Ajax :

 var request = new XMLHttpRequest ( ) ;
request . open ( 'GET' , 'ajax/test.html' , true ) ;

request . onload = function ( e ) {
  if ( request . readyState === 4 ) {

    // Check if the get was successful.

    if ( request . status === 200 ) {
      console . log ( request . responseText ) ;
    } else {
      console . error ( request . statusText ) ;
    }
  }
} ;

Ajout et suppression de classes

Si vous devez ajouter ou supprimer la classe d'un élément, jQuery dispose de deux méthodes dédiées pour le faire :

 // Adding a class
$ ( '#foo' ) . addClass ( 'bold' ) ;

// Removing a class
$ ( '#foo' ) . removeClass ( 'bold' ) ;

Sans jQuery, ajouter une classe à un élément est assez simple. Pour supprimer une classe, vous devrez utiliser la méthode replace() :

 // Adding a class
document . getElementById ( 'foo' ) . className += 'bold' ;

// Removing a class
document . getElementById ( 'foo' ) . className = document . getElementById ( 'foo' ) . className . replace ( / ^bold$ / , '' ) ;

Fondu entrant

Voici un exemple pratique de la raison pour laquelle jQuery est si populaire. Le fondu d'un élément ne nécessite qu'une seule ligne de code :

 $ ( el ) . fadeIn ( ) ;

Le même effet peut être obtenu en JavaScript pur, mais le code est bien plus long et compliqué.

 function fadeIn ( el ) {
  el . style . opacity = 0 ;

  var last = + new Date ( ) ;
  var tick = function ( ) {
    el . style . opacity = + el . style . opacity + ( new Date ( ) - last ) / 400 ;
    last = + new Date ( ) ;

    if ( + el . style . opacity < 1 ) {
      ( window . requestAnimationFrame && requestAnimationFrame ( tick ) ) || setTimeout ( tick , 16 ) ;
    }
  } ;

  tick ( ) ;
}

fadeIn ( el ) ;

Masquer et afficher des éléments

Masquer et afficher des éléments est une tâche très courante. jQuery propose les méthodes hide() et show() pour modifier l'affichage d'un élément.

 // Hiding element
$ ( el ) . hide ( ) ;

// Showing element
$ ( el ) . show ( ) ;

En JavaScript pur, afficher ou masquer des éléments n'est pas plus compliqué :

 // Hiding element
el . style . display = 'none' ;

// Showing element
el . style . display = 'block' ;

Manipulation du DOM

Manipuler le DOM avec jQuery est très simple. Disons que vous souhaitez ajouter un élément <p> à #container :

 $ ( '#container' ) . append ( '<p>more content</p>' ) ;

Le faire en JavaScript pur n’est pas non plus un gros problème :

 document . getElementById ( 'container' ) . innerHTML += '<p>more content</p>' ;