JavaScript

De Memodev.

Aller à : Navigation, rechercher

JavaScript.png JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives. C'est un langage orienté objet à prototype, c'est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de générer leurs propriétés, et notamment une propriété de prototypage qui permet d'en générer des objets héritiers personnalisés (cf article JavaScript sur Wikipédia).

Sommaire

Tutoriels.png Les meilleurs tutoriels JavaScript

JavaScript :

DOM :

jQuery :

Idee.png Bonnes pratiques JavaScript

Pour connaître les bonnes pratiques du JavaScript et du Web en général, n'hésitez pas à aller voir notre page sur les bonnes pratiques du Web.

Ce qu'il faut retenir :

48px‎‎ Bibliothèques JavaScript

(Écrit le 26 septembre 2010) Il existe beaucoup de Bibliothèques JavaScript, mais laquelle utiliser ?

Liste des bibliothèques JavaScript les plus utilisées :

Si on regarde l'aspect purement technique, certaines bibliothèques ressortent comme Mootools (voir l'article jQuery vs Mootools     ) ou encore comme Ext JS (bibliothèque très avancée sur le design, mais payante). Ceci dit ce n'est pas le plus important quand utilise une bibliothèque JavaScript. Le plus important, c'est sa pérennité, sa communauté active , sa documentation, ses plugins et le fait qu'elle soit largement utilisée (Ces facteurs sont généralement liés). Pourquoi est-ce important ? Parce qu'il faut que la bibliothèque évolue (pour corriger des failles ou proposer de nouvelles fonctionnalités présentes dans les autres bibliothèques), et surtout que vous puissiez trouver des plugins variés et de qualité lorsque vous avez besoin d'un composant spécifique non présent de base dans la bibliothèque.

De ce point de vue, jQuery est de loin la meilleure bibliothèque. Il suffit de faire quelque recherches Google pour s'apercevoir qu'il y a bien plus de ressource sur jQuery que sur les autres. De plus jQuery est bien documentée, rapide, relativement légère et facile à prendre en main. Pour faire un tour d'horizon des autres bibliothèques (source     ) : Mootools est moins utilisée et moins facile à prendre en main, Prototype est la plus vielle ce qui fait que certaines implémentations sont vielles mais ne peuvent être changées, YUI (Yahoo! UI) est très bien documentée mais elle est lente et volumineuse, Dojo est peu utilisée et lente, Ext JS est très bien pour le design, mais son prix est élevé.

Plugins jQuery

FAQ.png FAQ JavaScript

Ajax

Comment bien gérer les erreurs Ajax avec jQuery ?     

Comment créer une image pour l'attente d'un chargement, via Ajax ?

Ce site      permet la customisation d'une image pour les chargements de contenu, via Ajax.

jQuery

Comment inclure différentes versions de jQuery dans une même page ?

Astuce très pratique pour utiliser des plugins de jQuery qui nécessitent différentes version de jQuery. Il suffit d'importer les deux versions de jQuery en leur affectant un nom de variable différent :

<!-- Chargement du jQuery 1.3 -->
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
      // Sauvegarde du jQuery 1.3
      var jQ13 = jQuery;
</script>
<!-- Chargement du jQuery 1.4 -->
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
      // La dernière bibliothèque chargé est jQuery 1.4
      // Donc les variables $ et jQuery pointe vers jQuery 1.4
     
      // Pour utiliser jQuery 1.3, il suffit d'ouvrir un context d'utilisation
      (function(jQuery) {
          var $ = jQuery;

          // ... Code JavaScript exécuté avec une jQuery 1.3 ...

          $(function(){
              // ... Code JavaScript exécuté avec une jQuery 1.3 au chargement du DOM ...
          });

      })(jQ13);
</script>

Comment valider un formulaire en Ajax ?

Comment appliquer un sélecteur jQuery sur un autre sélecteur ou sur un élément du DOM ?

Il suffit de passer deux paramètres dans la fonction du sélecteur classic :$("#identifiantSelecteur", elementDom);

Fonctionnalités

Comment forcé le scroll à rester tout en bas si l’utilisateur est déjà en bas de la page ?

Fonctionnalité très pratique pour l'affichage de logs ou autres données qui se rajoute dynamiquement dans la page. Cela n'empêchera pas l'utilisateur de scroller puisque cette fonctionnalité ne s'activera que lorsque l'utilisateur est déjà en bas de la page. Voir comment implémenter cette fonctionnalité     .

Pourquoi lors d'un clique sur le bouton retour du navigateur la fonction onload() ne s'exécute-t-elle pas toujours ?

C'est que sous certains navigateur (pour l'instant sous Firefox et Safari), la page HTML peut être stocké dans le "bfcache" (bfcache = back/forward cache. C'est le cache utilisé pour la navigation dans l'historique). Lors d'une navigation dans cet historique, cela à pour effet de ne plus exécuter le JavaScript habituellement exécuté au chargement des pages. Il y a des règles spécifiques qui font que la page est stockée dans ce cache ou non, et donc que l'appel à la fonction onload se fasse ou non lors d'un backward/forward. Par exemple, vous pouvez voir les conditions de stockage d'une page dans le bfcache de Firefox     .

Pour forcer l'exécution du JavaScript habituellement exécuté au chargement des pages sous les navigateurs qui utilise le bfcache, il suffit de rajouter un évènement unonload (voir la page d'exemple     ):

   window.onunload = function(){};

Exemple avec jQuery :

$(document).ready(function() {
   $(window).unload(function() {}); // ou $(window).bind("unload", function() {});
});

Note: Pour les version jQuery supérieur à la version 1.4.4, l'appel à la fonction ready() suffit (car elle ajoute elle même l'évènement unload).

Sources : topic stackOverflow     , 2ème topic stackOverflow     

Importation des .js

Comment forcer les navigateurs à recharger leur cache lorsqu'une image, un css, un JavaScript a été modifié ?

Voir la même question dans la FAQ css.

Pourquoi et comment réduire et compresser les fichiers JavaScript, CSS et HTML ?

Définition : Reduire (minify en anglais) consiste à supprimer les espace et commentaire, renommer les nom de variable avec des nom plus courts... Il est possible d'obfusquer à la place de réduire, mais c'est déconseillé (Voir l'explication sur cet article de Yahoo     ).

Il est important de réduire les JavaScript et de les compresser avec gzip car trop de données à charger peut ralentir la vitesse d'affichage d'une page. On peut aller jusqu'à réduire la taille d'un js par 6. Par contre, pour les bibliothèques JavaScript connues, il est préférable d'utiliser les bibliothèques mises à disposition par Google (voir la question suivante).

D'apres cet article il semblerait qu'il vaut mieux utiliser le YUI compressor pour réduire les js. Ensuite pour la compression, il suffit de suivre les instruction sur l'article d'Alsacréation.

Autres sources : comparatif fait par le réalisateur de YUI compressor     , comparatif des méthodes de compression pour mootools.js.

Pourquoi et comment utiliser les bibliothèques JavaScript stockées sur les serveur de Google ?

Il est très intéressant d'utiliser les bibliothèques mises à disposition par Google car elle sont déjà obfusquées et gzippées. De plus, si l'utilisateur qui vient sur votre site est déjà passé sur un site qui utilise la bibliothèque que vous utilisez, alors elle sera déjà dans son cache et il n'aura pas besoin de la re-télécharger. Pour les utiliser, il suffit de suivre les instructions depuis la page de Google     .

Outils personnels
Espaces de noms
Variantes
Actions
Navigation
Catégories
Boîte à outils