11 Javascript

JavaScript (qui est souvent abrégé en « JS ») est un langage de script léger, orienté objet, principalement connu comme le langage de script des pages web.

Mais il est aussi utilisé dans de nombreux environnements extérieurs aux navigateurs web tels que Node.js, Apache CouchDB voire Adobe Acrobat.

Le code JavaScript est interprété ou compilé à la volée (JIT). C'est un langage à objets utilisant le concept de prototype, disposant d'un typage faible et dynamique qui permet de programmer suivant plusieurs paradigmes de programmation : fonctionnelle, impérative et orientée objet.

Une définition générale

JavaScript est un langage de programmation qui permet d’implémenter des mécanismes complexes sur une page web. À chaque fois qu’une page web fait plus que simplement afficher du contenu statique — afficher du contenu mis à jour à des temps déterminés, des cartes interactives, des animations 2D/3D, des menus vidéo défilants, etc...

JavaScript a de bonnes chances d’être impliqué. C’est la troisième couche des technologies standards du web, les deux premières étant HTML et CSS.

Les trois couches viennent s’empiler naturellement. Prenons pour exemple une simple étiquette.

Premier exemple de javascript

Je vous conseille de mettre cette exemple dans une route à part de votre site par exemple /js/exemple1

Nous pouvons la baliser en HTML pour définir sa structure et son but :

<p>Player 1: Ben</p>

Nous pouvons ensuite ajouter du CSS pour rendre ça plus joli :

p {
    font-family: 'helvetica neue', helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid rgba(0,0,200,0.6);
    background: rgba(0,0,200,0.3);
    color: rgba(0,0,200,0.6);
    box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
    border-radius: 10px;
    padding: 3px 10px;
    display: inline-block;
    cursor:pointer;
}

Et enfin utiliser JavaScript pour ajouter un comportement dynamique :

let para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

Pensez à placer le code javascript en fin de fichier HTML dans les balises:

<script type="text/javascript">

</script>

JavaScript peut faire bien plus. Voyons cela plus en détail.

Que peut-il vraiment faire ?

Le cœur de JavaScript est constitué de fonctionnalités communes de programmation permettant de :

• stocker des valeurs utiles dans des variables. Dans l’exemple plus haut, nous demandons un nouveau nom à l’utilisateur puis le stockons dans une variable appellée name.
• faire des opérations sur des strings. Dans l’exemple plus haut, nous prenons la chaîne de caractères "Player 1: " et lui adjoinions la variable name pour créer l’étiquette texte complète ''Player 1: Chris".
• exécuter du code en réponse à certains évènements se produisant sur une page web. Nous avons utilisé un évènement (« event ») click dans l’exemple plus haut pour détecter quand l’utilisateur clique sur le bouton et alors exécuter le code qui met à jour l’étiquette texte.
• Et bien plus encore !

Ajax

AJAX est un raccourci pour Asynchronous JavaScript + XML (JavaScript asynchrone plus XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet non standard XMLHttpRequest pour communiquer avec des scripts situés sur le serveur.

L’objet permet d’échanger des informations sous différents formats (dont XML, HTML ou texte), mais son principal attrait est sa nature « asynchrone » qui implique qu’il peut communiquer avec le serveur, échanger des données et mettre à jour sans avoir à sans recharger la page.

Les deux fonctionnalités combinées vous permettent de :

• faire des requêtes vers le serveur sans avoir à recharger la page ;
• analyser et travailler avec des documents XML.

XMLHttpRequest

Pour faire une requête HTTP vers le serveur à l’aide de JavaScript, il faut disposer d’une instance d’une classe fournissant cette fonctionnalité. C’est ici que la classe XMLHttpRequest intervient. Une telle classe a d’abord été introduite dans Internet Explorer sous la forme d’un objet ActiveX appelé XMLHTTP.

Par la suite, Mozilla, Safari et d’autres navigateurs ont suivi en implémentant une classe XMLHttpRequest qui fournit les mêmes méthodes et propriétés que l’objet ActiveX original de Microsoft. Dans l’intervalle, Microsoft a également implémenté XMLHttpRequest.

Par conséquent, pour créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs, vous pouvez utiliser :

httpRequest = new XMLHttpRequest();

Un exemple simple

Notre JavaScript demande un document HTML situé à l'URL /js/test/, qui contient le texte « Je suis un test. », et nous affichons le contenu de cette ressource dans un message alert().

Remarquez que cet exemple n’utilise que JavaScript (jQuery n’est pas utilisé ici).

<script type="text/javascript" language="javascript">

    function makeRequest(url) {

        var httpRequest = false;

        httpRequest = new XMLHttpRequest();

        if (!httpRequest) {
            alert('Abandon :( Impossible de créer une instance XMLHTTP');
            return false;
        }
        httpRequest.onreadystatechange = function() { alertContents(httpRequest); };
        httpRequest.open('GET', url, true);
        httpRequest.send(null);

    }

    function alertContents(httpRequest) {

        if (httpRequest.readyState == XMLHttpRequest.DONE) {
            if (httpRequest.status == 200) {
                alert(httpRequest.responseText);
            } else {
                alert('Un problème est survenu avec la requête.');
            }
        }

    }
</script>
<span
    style="cursor: pointer; text-decoration: underline"
    onclick="makeRequest('/js/test')">
        Effectuer une requête
</span>

Dans cet exemple :

• L’utilisateur clique sur le lien « Effectuer une requête » dans le navigateur ;
• Ceci appelle la fonction makeRequest() avec un paramètre – l'url /js/test/;
• la requête est faite et ensuite (onreadystatechange) l’exécution est passée à alertContents();
• alertContents() vérifie si la réponse a été reçue et est correcte, et affiche ensuite la contenu de la ressource dans un message alert().

Un deuxième exemple

Pour finir, envoyons quelques données au serveur et réceptionons la réponse. Notre JavaScript demandera cette fois çi une réponse dynamique, /api/hello/ qui prendra notre contenu envoyé et revera une chaîne « calculée » - "Bonjour, [user data] !" - que nous transmettrons à alert().

Nous allons déjà ajouter un boîte de texte dans notre HTML afin que l’utilisateur puisse saisir son nom :

<label>Vore nom : 
  <input type="text" id="ajaxTextbox" />
</label>
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
  Lancer une requête
</span>

Nous allons également ajouter une ligne à notre gestionnaire d’événement pour obtenir les données de l’utilisateur de la boite de texte et l’envoyer à la fonction makePostRequest() ainsi que l’URL de notre script côté serveur :

document.getElementById("ajaxButton").onclick = function() { 
    var userName = document.getElementById("ajaxTextbox").value;
    makePostRequest('/api/hello',userName); 
};

Nous devons créer makePostRequest() afin qu’il accepte les données de l’utilisateur et les transmette jusqu’au serveur.

function makeRequest(url, userName) {

    var httpRequest = false;
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
        alert('Abandon :( Impossible de créer une instance XMLHTTP');
        return false;
    }
    httpRequest.onreadystatechange = function() { alertNameContents(httpRequest); };
    httpRequest.open('POST', url);
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    httpRequest.send('userName=' + encodeURIComponent(userName));
}

La fonction alertNameContent() peut être écrite de la même manière qu’au dessus pour afficher notre chaîne calculée, si c’est tout ce que le serveur renvoie.

Cependant, le serveur renvoie et la phrase calculée et la donnée originale. Donc si notre utilisateur saisi « Ben », la réponse du serveur ressemblera à :

{"userData":"Ben","computedString":"Bonjour, Ben !"}

Pour utiliser cette phrase dans alertNameContent(), nous pouvons simplement afficher une alerte avec le contenu de responseText, nous devons la récupérer et afficher computedString, la propriété que nous souhaitons :

function alertNameContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
        if (httpRequest.status === 200) {
            var response = JSON.parse(httpRequest.responseText);
            alert(response.computedString);
        } else {
            alert('Un problème est survenu avec la requête.');
        }
    }
}

À vous de jouer

1. Créer une nouvelle route qui contiendra le code javascript qui chargera les dinosaures depuis l'api développé au sein de notre projet,
2. Et qui les ajoutera au sein de la page HTML, je vous conseille la lecture de cet article de MDN.