Blog
Aller au contenu

Guillaume Duverger

Développement & graphisme


Accueil » Développement » Apprendre JavaScript

Sommaire
  1. JavaScript c'est quoi ?
  2. JavaScript pour quoi faire ?
  3. Commencer avec JavaScript
    1. La syntaxe JavaScript
    2. Les boites de dialogue
    3. Les commentaires JavaScript
    4. L'indentation en JavaScript
    5. Les variables JavaScript
      1. Une variable JavaScript c'est quoi ?
      2. Les variables var, let et const
      3. Les différents types de valeurs
      4. Tester et modifier la valeur d'une variable
      5. Opérations
    6. La concaténation
    7. Les conditions
      1. Les opérateurs de comparaison
      2. Les opérateurs de logique
      3. Les structures conditionnelles
    8. Les fonctions
    9. Le mode strict (use strict)
  4. Manipuler le DOM avec JavaScript
  5. Animations avec JavaScript
  6. Les données structurées avec JSON
  7. Les bibliothèques / framework JavaScript
  8. Aller plus loin
Télécharger ce cours en pdf

JavaScript c'est quoi ?

Le JavaScript (ou ECMAScript) est un langage de programmation (ou langage orienté objet ou encore POO) qui s'intègre dans une page (x)HTML. C'est pourquoi, il est impératif d'avoir des connaissances en (x)HTML.

Pour faire simple, on mettra du JavaScript dans une page HTML pour rendre celle-ci intéractive, mais seulement côté visiteur (ou client), à la différence du langage PHP qui s'éxécute côté serveur ou Node.js si l'on veut rester dans le monde du JavaScript. Attention à ne pas confondre avec le langage JAVA.

Voilà pour la très brève histoire, passons à la pratique...

👉 JavaScript pour quoi faire ?

Apprenez tout d'abord que c'est votre navigateur qui va se charger d'interpréter le JavaScript. Attention donc à ne pas en abuser, cela pourrait ralentir considérablement votre site.

Le code JavaScript se place généralement entre <head> et </head>, c'est-à-dire dans l'entête du document HTML. Mais il peut également se placer dans le corps (<body>) du document, souvent tout en bas (ou, cas possible, en haut et/ou en bas). Techniquement, il peut être mis à n'importe quel endroit dans le corps :



<!DOCTYPE html>
<head>
<script></script>
</head>
<body>
<script></script>
</body>
</html>


Vous pouvez écrire autant de scripts que vous souhaitez dans une page HTML, sachez juste que leur ordre est important puisque ceux-ci seront lus linéairement (les uns à la suite des autres). Au possible, essayez de rassembler tous vos scripts dans un seul script (sauf si vous constatez un conflit).

Le JavaScript peut également se trouver dans un fichier séparé avec l’extension .js. C'est souvent le cas lorsqu'on embarque des bibliothèques JavaScript telles que JQuery, MooTools, Dojo... ou lorsque l'on développe un gros projet.

Ainsi, vous sera t-il possible de manipuler des éléments HTML, de modifier le contenu existant ainsi que les styles... Concrètement, vous serez en mesure de contrôler la validation d'un formulaire, d'injecter du contenu sans rafraîchir la page, de créer des diaporamas, des jeux plus ou moins élaborés, des animations... En un mot : de l'intéraction.

👉 Commencer avec JavaScript

La syntaxe JavaScript :


<script>
alert('Mon texte');
</script>


💡 NB : Chaque instruction en JavaScript doit être terminée par un point virgule. Mais, dans la plupart des cas, celui-ci peut être omis lorsqu'il y a une rupture de ligne.



alert('Mon texte')
alert('Mon autre texte')



Les boites de dialogue :

Lorsque vous débutez avec JavaScript, la première chose à faire est de tester votre code. Pour cela il existe les boites de dialogue. Celles-ci affichent une fenêtre comportant un message qui servent avant tout à dialoguer avec l'utilisateur.

Cliquez pour voir la boite de dialogue Autre méthode sans le saut de page


<a href="#" onclick="alert('Ma boite de dialogue');">Cliquez pour voir la boite de dialogue</a>

/* ou */

<a href="javascript:alert('Ma boite de dialogue');">Autre méthode sans le saut de page</a>



Les commentaires JavaScript :

Il y a deux façons d'écrire un commentaire en JavaScript : les commentaires mono-ligne et les commentaires multi-lignes.



// ceci est un commentaire se situant en fin de ligne

/* ceci est un commentaire qui peut s'étaler 

sur plusieurs lignes */

/* on peut également utiliser cette syntaxe sur une seule ligne */



L'indentation en JavaScript

L’indentation correspond au fait de décaler certaines lignes de code par rapport à d’autres. Cela est généralement utilisé pour rendre son code plus lisible et donc plus simple à comprendre.


Les variables JavaScript :
Une variable JavaScript c'est quoi ?

Une variable JavaScript est en quelque sorte un espace de mémoire qui va stocker de manière temporaire une information. Il peut s'agir d'une valeur numérique, d'une chaîne de caractères (autrement dit du texte), d'une valeur booléenne ou encore d'un objet.

Avant de détailler chaque type de valeurs d'une variable, voyons comment celle-ci se déclare :



var nomVariable = valeur; //ancien mot clé

let nomVariable = valeur; //nouveau mot-clé 


💡 Le JavaScript est sensible à la casse. Attention donc aux lettres majuscules et minuscules.



let nomVariable = valeur;

/* est différent de :*/

let nomvariable = valeur;



Les variables var, let et const

On déclare une variable avec le mot-clé var ou let, suivi du nom de notre variable. Celle-ci doit impérativement commencer par une lettre. Elle peut contenir des lettres (non accentuées), des chiffres ou les signes _ (tiret bas) et $ (dollar).

Par contre, il n'est pas possible d'utiliser un mot-clé propre au langage (comme var ou let justement). A noter que le signe = (égal) est un opérateur d'affectation et ne signifie en aucun cas une égalité.

💡 Différence entre let et var : le mot-clé var est ancien. On ne l'utilise plus ou presque. Le mot-clé let est apparu dans la spécification du langage ES2015 qui vise à remplacer son prédécesseur (même ci celui-ci est toujours utilisable). Les deux sont donc assez similaires, à la différence que let permet d'être scopé au bloc courant. Voir cet article pour plus de précisions.

Le mot-clé const s'avère utile pour déclarer une variable qui ne changera pas (constante). Si on tente de la modifier, on obtient alors une erreur.

Il est bien entendu possible de déclarer plusieurs variables, mais chacune doit posséder un identifiant unique.

De plus, il existe différentes façons de déclarer une variable :



let nomVariable = valeur;

/* ou on déclare plusieurs variables en les séparant par une virgule. On utilise une seule fois le mot-clé let*/

let nomVariable1 = "valeur", nomVariable2 = "valeur" ;

/* ou on déclare une variable vide, puis on la remplit ensuite */

let nomVariable = "";
nomVariable = "valeur";


💡 Il est important de bien nommer ses variables. En effet, il est préférable de donner un nom explicite et de préférence court.

Les différents types de valeurs :
Le type de valeur number :

Le type de valeur number est utilisé pour les nombres entiers ainsi que les nombres à virgule flottante (comme en PHP) :



let nombre1 = 1;
let nombre2 = 1.2; // attention à bien mettre un point et non pas une virgule
let nombre3 = -3;


💡 Notez bien que l'on n’utilise ni guillemet ni apostrophe pour déclarer une valeur de type number.

Si l'on souhaite écrire de grands nombres, nous allons utiliser la lettre e (une sorte de multiplicateur), ceci pour éviter d'avoir à déclarer le nombre en entier :



let million = 1e6; // il y a 6 zéros dans un million

let microseconde = 1e-6 // un millionième de seconde


Le type de valeur string :

Le type de valeur string représente une chaine de caractères (du texte). Contrairement aux nombres, il faut entourer notre valeur. Pour cela, il existe plusieurs méthodes :



let nomVariable = 'valeur';
let nomVariable = "valeur";

let nomVariable = `valeur`;


💡 Attention toutefois si une valeur stockée contient des guillements et/ou apostrophes, il faudra alors "échapper" celle-ci au moyen d'un antislash (symbole \) :



let nomVariable = 'J\'apprends JavaScript';

let nomVariable = "Je trouve ce langage un peu \"difficile\"";


💡 Une dernière chose importante : une variable déclarée sans valeur aura la valeur undefined.

Le type de valeur boolean :

Le type de valeur boolean permet de procéder à des tests en vérifiant la présence (true) ou non (false) d'une condition (voir plus bas). Cette valeur se présente ainsi :



let x = true;

let y = false;


💡 Nous avons présenté les trois types de valeurs les plus courants que l'on peut stocker dans une variable JavaScript. Il existe d'autres.

Tester et modifier la valeur d'une variable :

Pour vérifier l'existence d'une valeur contenue dans une variable, nous devons utiliser les instructions typeof ainsi que alert (voir les boites de dialogue plus haut)



let texte = "texte", x = 2, y = false;
        
alert(typeof(texte) + typeof(x) + typeof(y)); //renvoie les trois types de valeurs


Si l'instruction typeof renvoie undefined, soit la variable n'existe pas, soit elle ne contient rien.

Pour modifier la valeur d'une variable, c'est plutôt simple. On déclare une variable comme nous l'avons vu préalablement. Il suffit juste de déclarer la même variable à nouveau et de changer la valeur de celle-ci :



let x = "valeur";

let x = "nouvelle valeur";



Opérations :

Les variables JavaScript permettent d'effectuer des calculs tels que les additions, les soustractions, les divisions et autres multiplications.

Ci-dessous, un exemple simple d'une addition :



let x = 5, y = 8;
let total = x + y;
document.getElementById("id").innerHTML = "Résultat : " + total;


Nous avons déclaré deux variables. La variable "x" vaut 5, la variable "y" vaut 8. Le résultat affiché est donc bien 13.

Ci-dessous, un tableau récapitulatif des différentes opérations, le modulo étant le reste d'une division :

tableau récapitulatif des différentes opérations JavaScript

💡 Il existe des priorités de calcul dans les opérations sur les variables, les parenthèses étant prioritaires sur toute autre opération. Ensuite viennent la multiplication, la division et le modulo et enfin l’addition ainsi que la soustraction.


La concaténation

La concaténation en JavaScript signifie additionner deux chaînes de caractères afin d'en créer une seule. Pour ce faire, il nous faut utiliser l'opérateur +. On pourrait également opter pour la méthode concat().



<p id=conca></p>




let chaine1 = "Ceci "; 
let chaine2 = "est une concaténation";
let chaine3 = chaine1+chaine2;
	
document.getElementById("conca").innerHTML = chaine1+chaine2;


Résultat du code :

On peut également faire de la concaténation entre des valeurs :



let conca = "Ceci " + "est une concaténation";
document.getElementById("conca1").innerHTML = conca;


Résultat du code :


Les conditions :

Nous avons évoqué un peu plus haut le type de valeur boolean, nous allons nous en servir pour les conditions.

Les conditions sont constituées de valeurs ainsi que de deux types d'opérateurs :

Les opérateurs de comparaison :

Ci-dessous, un tableau récapitulatif des différents opérateurs de comparaison :

différents opérateurs de comparaison JavaScript

Et voici un exemple de comparaison où nous nous servons de l'opérateur supérieur ou égal à :



let examen = 6;	
let compare = (examen >= 5);
let echec = "Vous avez commis plus de 5 erreurs. Vous avez échoué à votre examen."
document.getElementById("condi").innerHTML = echec;


Résultat du code :

Les opérateurs de logique :

Il existe trois opérateurs de logique : et (symbolisé par &&) ou (symbolisé par ||) et non (symbolisé par !).

Tandis que l'opérateur et va vérifier si toutes les valeurs contenues dans la variable valent true, l'opérateur ou, plus permissif, va seulement vérifier si une des valeurs vaut true. L'opérateur non est un peu différent dans le sens où son rôle ne va pas être de vérifier mais d'inverser la valeur de la variable. Ainsi, la valeur true deviendra false et inversement.

Les structures conditionnelles :

Pour l'instant, nous avons vu comment déclarer une condition en comparant des valeurs afin de renvoyer un résultat. Les structures conditionnelles vont permettre d'aller plus loin en exécutant une instruction.

Il existe trois types de conditions :

  • if
  • if else
  • if else if else

L'instruction if exécute une instruction si une condition donnée est vraie. Si la condition n'est pas vérifiée, il est possible d'utiliser une autre instruction.



let heure = 20, message="Bonjour";   
           
if (heure <= 20 == true) {
document.getElementById("condi1").innerHTML = message;
}



Résultat du code :


Les fonctions :

Une fonction JavaScript est un ensemble d'instructions effectuant une tâche bien précise. Une fonction connue que nous avons vue plus haut est alert() pour les boites de dialogue. Il s'agit toutefois d'une fonction propre au langage. Il en existe beaucoup d'autres comme par exemple eval(), isFinite(), parseFloat()...

Si l'on souhaite créer une fonction, il faut en toute logique la définir. Nous allons donc déclarer une fonction. L'intérêt d'une fonction est de pouvoir l'utiliser autant de fois que nécessaire sans avoir à la modifier.

Une déclaration de fonction repose sur le mot-clé function et se présente ainsi :



function nomFonction(){

...

}



Le mode strict (use strict)

Il s'agit tout simplement de l'utilisation plus rigoureuse de la sémantique d'un code JavaScript. On indiquera l'instruction suivante en début du code :



"use strict";

/* ou */

'use strict';


Le mode strict peut s'appliquer à des scripts entiers ou à des fonctions individuelles mais pas à des blocs d'instructions entourés d'accolades. Cela ne produira aucun effet.

Le rôle concret de cette instruction est de transformer les syntaxes non conformes en erreurs. En effet, en JavaScript "normal", il est possible de ne pas écrire le mot-clé var ou let pour déclarer une variable, même si cela n'est pas recommandé. Impossible en mode strict, qui n'exécutera tout simplement le script.

Un exemple très simple ci-dessous :

💡 Notez bien que le second texte n'est pas affiché. Si l'on avait déclaré la seconde variable en premier alors le mode strict aurait renvoyé une erreur et par conséquent n'aurait rien affiché du tout.



<p id="monId1"></p>
<p id="monId2"></p




'use strict';

let exempleStrict = document.getElementById('monId1');
	
let exempleNormal = document.getElementById('monId2');
	
let blaBla = 'Mon texte est bien affiché en mode strict';
exempleStrict.innerHTML = blaBla;
	
blaBla2 = 'Mon texte qui ne sera pas affiché';
exempleNormal.innerHTML = blaBla2;


Le mode strict oblige donc à produire du code JavaScript respectant les standards ECMAScript.

Cependant, le mode strict et non-strict (ou "mode bâclé" pour les experts JavaScript) peuvent tout à fait cohabiter, mais surtout pas se mélanger.

👉 Manipuler le DOM avec JavaScript

Le DOM est une interface qui permet l'accès de documents HTML ou XML. D'une manière générale, on parle de la structure du DOM comme d'un arbre composé de noeuds (node en anglais). Chaque noeud étant une partie du document. L'intérêt du DOM est de permettre de créer, manipuler ou modifier les noeuds.



<!DOCTYPE HTML>
<html>
<head>
<title>titre page</title>
</head>
<body>
<p>lorem ipsum dolor sit amet</p>
</body>
</html>  


L'élément html est la racine, tous les autres éléments sont ses enfants. L'élément head est le parent de l'élément title. Et ainsi de suite. Les éléments HTML sont considérés comme des objets.

L'objet document :

Pour accéder aux éléments d'un document HTML, il nous faudra utiliser l’objet document. Pour cela, nous aurons recours à différentes méthodes. Le document (ou la page) HTML en soi est représenté dans le DOM par un objet document. L’objet document, comme les autres objets créés par le DOM, est un noeud.

Nous allons pouvoir utiliser l'objet document avec différentes méthodes pour modifier un noeud :

  • La méthode getElementById()
  • La méthode getElementsByTagName()
  • La méthode getElementsByClassName()
  • La méthode querySelector()
  • La méthode querySelectorAll()
-La méthode getElementById() :

Cette méthode permet de cibler un élément HTML possédant un attribut id en particulier. C’est certainement la méthode la plus utilisée.



let exDom = document.createElement('p');
exDom.className = "message";
exDom.innerHTML = "Nous avons créé un élement dans le DOM avec JavaScript.";
document.getElementById("ex_dom")
.appendChild(exDom);


La méthode appendChild() ajoute un noeud en tant que dernier enfant d'un noeud.

Ci-dessous, un exemple de fenêtre (lightbox) avec la même méthode :



<div id="fenetre" class="print fenetre">
<div class="cadre-fenetre">
<span class="ferme-fenetre" aria-label="fermer">X</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis congue odio ac eleifend. Nam odio neque, commodo at pharetra non, aliquam id lectus. Pellentesque hendrerit euismod ante nec venenatis. Donec rhoncus tristique auctor. Vestibulum porta nisl et lectus maximus, sit amet dictum lectus lobortis. Morbi in elit sit amet nibh accumsan vestibulum ac non elit. Etiam iaculis erat mauris, ut tincidunt lorem feugiat sed.</p>
</div>
</div>




.fenetre {

display: none;
position: fixed; 
z-index: 1; 
left: 0;
top: 0;
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: hsla(0,0%,0%,.4)

}


.cadre-fenetre {  

background-color: #fefefe;
margin: 20vh auto; 
padding: 20px;
border: 1px solid #888;
width: 80%

}


.ferme-fenetre {

color: #aaa;
font-size: 2rem;
font-weight: bold

}

.ferme-fenetre:hover,
.ferme-fenetre:focus {

color: black;
text-decoration: none;
cursor: pointer

}




let fenetre = document.getElementById('fenetre');
let bouton = document.getElementById("bouton");
span = document.getElementsByClassName("ferme-fenetre")[0];
    
bouton.onclick = function() {
   
    fenetre.style.display = "block"; 

}

span.onclick = function() {
   fenetre.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == fenetre) {
        fenetre.style.display = "none";
    }
} ;



X

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis congue odio ac eleifend. Nam odio neque, commodo at pharetra non, aliquam id lectus. Pellentesque hendrerit euismod ante nec venenatis. Donec rhoncus tristique auctor. Vestibulum porta nisl et lectus maximus, sit amet dictum lectus lobortis. Morbi in elit sit amet nibh accumsan vestibulum ac non elit. Etiam iaculis erat mauris, ut tincidunt lorem feugiat sed.

💡 Chapitre non terminé. En cours d'écriture.

👉 Animations avec JavaScript

JavaScript permet de gérer les animations de manière plus précise et de réaliser des opérations plus complexes par rapport à CSS.

Méthode setInterval() :

Cliquez sur la voiture ci-dessous :


voiture.onclick = function() { // la fonction se déclenche au clic
      
    let start = Date.now(); // on déclare une variable avec comme valeur la méthode Date.now() 

      let timer = setInterval(function() {
        
          let timePassed = Date.now() - start;

voiture.style.left = timePassed / 5 + 'px';

        if (timePassed >= 2000) clearInterval(timer); // si le temps de 2s est écoulé alors on arrête l'animation

      }, 20);
    }


<svg style="position:relative;cursor:pointer" id="voiture" height="200" width="200" viewBox="0 0 512 512">
<path d="M489.798 239.613c-16.627-10.24-70.258-23.335-145.52-23.335l-39.756-46.38c-8.385-9.782-20.627-15.413-33.51-15.413H152.007c-12.644 0-24.87 4.523-34.47 12.75L70.624 207.45l-50.04 7.148c-7.105 1.015-12.888 6.23-14.63 13.195l-5.95 23.794L132.42 313.38h370.755v-49.904c-.002-9.76-5.068-18.744-13.377-23.863z" fill="var(--theme-couleur)"/>
<path d="M503.173 269.24c0-17.654-26.482-35.31-150.067-35.31H8.83c-4.874 0-8.826 3.954-8.826 8.828v52.965l167.725 26.482h335.443V269.24z" fill="var(--theme-couleur)"/>
<path d="M503.173 304.55H89.243l-78.5-17.442C6.03 286.073 1.27 289.043.21 293.81c-1.053 4.76 1.948 9.474 6.706 10.53l79.447 17.655c.63.142 1.267.21 1.913.21H503.17c4.88 0 8.828-3.952 8.828-8.826 0-4.877-3.946-8.83-8.825-8.83z" fill="var(--theme-couleur)"/>
<circle cx="423.72" cy="304.549" r="44.137" fill="#EDEDEE"/>
<path d="M423.725 357.516c-29.207 0-52.965-23.758-52.965-52.965 0-29.205 23.758-52.963 52.965-52.963s52.965 23.758 52.965 52.965c0 29.208-23.758 52.966-52.965 52.966zm0-88.275c-19.473 0-35.31 15.84-35.31 35.31 0 19.475 15.837 35.31 35.31 35.31s35.31-15.834 35.31-35.31c0-19.47-15.836-35.31-35.31-35.31z" fill="#504B5A"/>
<circle cx="423.72" cy="304.549" r="17.655" fill="#DCDBDE"/>
<circle cx="88.275" cy="304.549" r="44.137" fill="#EDEDEE"/>
<path d="M88.28 357.516c-29.208 0-52.966-23.758-52.966-52.965 0-29.205 23.758-52.963 52.965-52.963s52.963 23.758 52.963 52.965c0 29.208-23.76 52.966-52.965 52.966zm0-88.275c-19.474 0-35.31 15.84-35.31 35.31 0 19.475 15.836 35.31 35.31 35.31s35.31-15.834 35.31-35.31c0-19.47-15.838-35.31-35.31-35.31z" fill="#504B5A"/>
<circle cx="88.275" cy="304.549" r="17.655" fill="#DCDBDE"/>
<path d="M353.105 286.896H167.728c-4.875 0-8.827-3.953-8.827-8.827 0-4.877 3.955-8.83 8.83-8.83h185.376c4.875 0 8.827 3.953 8.827 8.828s-3.952 8.826-8.827 8.826zm150.068 0h-8.827c-4.875 0-8.828-3.953-8.828-8.827 0-4.877 3.953-8.83 8.828-8.83h8.827c4.875 0 8.827 3.953 8.827 8.828s-3.952 8.826-8.827 8.826z" fill="hsla(0,0%,100%,.4)"/>
<path d="M70.624 207.45l46.914-40.215c9.6-8.228 21.826-12.75 34.47-12.75H271.01c12.886 0 25.126 5.63 33.512 15.412l39.756 46.38H135.276c-7.78 0-15.546-.643-23.22-1.922l-41.432-6.906z" fill="var(--theme-couleur)"/>
<path d="M261.294 169.664c-3.354-4.025-8.323-6.352-13.563-6.352H166.21c-4.682 0-9.173 1.86-12.483 5.17l-26.482 26.483c-2.34 2.34-3.657 5.516-3.657 8.827 0 6.894 5.59 12.484 12.484 12.484h154.646c3.742 0 5.786-4.365 3.39-7.24l-32.812-39.372z" fill="#625D6B"/>
<path fill="#b4b4b4" d="M185.38 216.276H158.9l17.655-52.964h17.655"/>
<path d="M493.697 242.76h-8.18c-4.876 0-8.828 3.95-8.828 8.826s3.95 8.827 8.825 8.827h17.26c-.765-6.865-3.962-13.076-9.08-17.654z" fill="#EDEDEE"/>
<path d="M304.522 169.897c-2.115-2.468-4.48-4.67-7.036-6.585H283.08c-3.742 0-5.786 4.364-3.39 7.24l32.812 39.374c3.354 4.025 8.323 6.352 13.562 6.352h18.213l-39.755-46.38z" fill="#625D6B"/>
<path d="M.004 242.76v8.826H17.66c4.874 0 8.826-3.952 8.826-8.827s-3.953-8.83-8.827-8.83H8.83c-4.875 0-8.826 3.953-8.826 8.828z" fill="#e0e0e0"/>
</svg>  

La même animation en CSS (cliquez sur la voiture) :



#anim_voiture:target{

animation:anim_voiture 2s linear forwards

} 

@keyframes anim_voiture{

from{

transform: translatex(0)

}

to{

transform: translatex(400px)

}
}

Librairies animations JavaScript :

MO.JS

GSAP

Anime.js

Animate Plus

Bounce.js

Segment

💡 Chapitre non terminé. En cours d'écriture.

Les données structurées avec JSON

JSON est un format d'échange de données. Il est basé sur un sous-ensemble du langage de programmation JavaScript...

Voir article

Les bibliothèques / framework JavaScript :

JQuery :

JQuery est une bibliothèque JavaScript libre. La première version date de janvier 2006.

JQuery se présente comme un seul fichier JavaScript, placé dans un document HTML soit dans le <head> de la page soit tout en bas de celle-ci, généralement dans sa version minifiée comme ceci :



<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>


Ce code provient de Google, très pratique car situé sur un serveur autre que le votre. De plus, cette librairie est mise à jour régulièrement. Ainsi, trouverez-vous toujours la dernière version en date.

Vous pouvez bien entendu télécharger le script sur le site officiel, si la solution précédente ne vous convient pas.

JQuery permet notamment la manipulation du DOM, d'utiliser AJAX, de créer des animations... La vocation première de cette bibliothèque est de gagner du temps dans le développement des applications : "write less, do more" (écrire moins, faire plus), telle est la devise de JQuery.

Concrètement, avec JQuery, vous pouvez mettre en place très facilement des menus animés, des diaporamas, des formulaires... et depuis 2010, JQuery propose un script permettant de créer des applications et des sites en version mobile.

Il existe de nombreux plugins pour vous permettre la mise en oeuvre de vos projets.

davidwalsh: tutoriels JQuery sur le site de David Walsh. (EN)

coding.smashingmagazine : nombreuses ressources et articles sur JQuery. (EN)

unheap.com : dépôt de nombreux plugins JQuery.

jq.creativejuiz.fr : plugins JQuery. (FR)

Pour celles et ceux qui voudraient se passer de JQuery, voici des alternatives.

Plugin JQuery pour des transitions de page en CSS. (EN)

Découvrir Zepto.js, une bibliothèque de JavaScript compatible avec JQuery. (EN)


Three.js :

Three.js est une bibliothèque JavaScript 3D. Celle-ci facilite l'accès aux routines de WebGL, et permet d'importer de nombreux types d'objets 3D. Cette bibliothèque peut également s'associer avec l'élément HTML canvas.

Télécharger Three.js

Mer avec Three.js

Jeu avec Three.js

Ville avec Three.js

Three.js editor


Vue.js :

Vue.js est un framework JavaScript open-source qui permet de créer des interfaces. Sa syntaxe est inspirée de celle des custom-elements des Web Components.

Site officiel

Tutoriels (EN) Vue.js.

Article (EN) : passer de JQuery à Vue.js

Exemple avec Vue.js


React.js :

React.js est une bibliothèque JavaScript libre (de chez Facebook). Le but principal est de faciliter la création d'application web. Basé sur le langage JSX (FR), celui-ci permet de générer des objets Javascript avec une notation similaire à HTML.

Site officiel

Exemple avec React.js.

Menu responsive avec React.js.


Angular.js :

Angular.js est un framework JavaScript libre et open source développé à l'origine par des développeurs de Google.

Site officiel.

Tutoriels (FR) sur Angular.js.


Pre3d :

Pre3d est une bibliothèque JavaScript de visualisation d'objets en trois dimensions

Télécharger Pre3D

Exemple avec Pre3D


D3.js

D3.js est une bibliothèque graphique JavaScript qui permet l'affichage de données numériques sous une forme graphique et dynamique.

d3-path-morphing

👉 Aller plus loin :

Outils en ligne :

jscompress est un outil en ligne permettant la compression de votre code JS.

Outil intéressant qui vous permettra de rendre votre code JavaScript plus propre et optimisé : jsbeautifier.

Outil de test et de partage de codes : jsfiddle

JSLint est un outil qui va repérer vos erreurs.

plainjs est un site regroupant de nombreux plugins JavaScript.


Tutoriels, informations... :

Un site très complet dédié au JavaScript : javascript.info

Découvrir Vanilla.js et ici

Comment déclarer une variable ? (EN)

Variables et constantes dans ES6

Différence entre JQuery et JavaScript