Aller au contenu

Le javascript pour dynamiser notre code

Le principe!

Le cours précédent rappelle que le HTML décrit le contenu des pages web que le CSS vient par la suite le formater. Il ne s'agit pas d'un langage de programmation et on ne peut donc pas interagir avec des événements comme le clic de la souris, l'appui sur une touche du clavier ou le chargement d'une page...

Le javascript est un langage de programmation créé en 1995 et intégré au navigateur Netscape Navigator afin de dynamiser les pages webs statiques. À une action d'un utilisateur, on peut par exemple associer un comportement comme le changement de couleur d'un texte, d'un paragraphe,...

Distinction importante!

Le javascript est un langage de programmation et le HTML un langage de description!

Le Document Object Model (D.O.M)

Le DOM est la représentation schématique et hiérarchique de votre page web permettant de visualiser l'ensemble des balises HTML qui la constituent.

Le javascript agit sur les objets du DOM. Il les repère soit par le nom de leur balise soit par leur idendifiant (id) ou bien encore leur classe (class).

Rôle du Javascript

Le javascript est un langage de programmation qui agit sur le DOM.

Il peut:

  • modifier des éléments du DOM: changer la couleur d'un élément, changer la fonte des polices, ...
  • ajouter des éléments au DOM: ajouter un titre, une image, un lien,...
  • faire disparaître des éléments dans la page
  • ...

Ces diverses actions font suite à des événements comme le clic de souris, la manipulation du clavier ou encore le chargement de la page web...

Nous allons proposer plusieurs manipulations dans la conception d'un jeu.

Le jeu du juste nombre

Ce jeu est connu: quelqu'un propose un nombre entre 1 et 100 et vous devez le retrouver avec les indications plus ou moins.

Pour jouer, je vous propose l'interface web suivante:

Construire son arborescence

  1. Créer un dossier jeujs contenant les dossiers img, css et js. Attention de bien respecter la casse!
  2. Téléchargez puis enregistrez le fichier index.html(ici) à la racine du dossier jeujs et le fichier monstyle.css(là) dans le dossier css.
  3. Visualiser alors le fichier index.html avec un navigateur. Normalement, il y a comme un souci...

Cette interface contient du code HTML,CSS mais pas encore du Javascript donc aucune interaction possible pour le moment.

Vous remarquez que le css n'est pas chargé et l'affichage est plutôt brut et pas trop joli.

Attachez la feuille de style

  1. Modifiez le document HTML en attachant la feuille de style contenu dans le dossier js. Regardez dans le TP Développement Web pour vous rappeler la manipulation.
  2. Enregistrez et rafraichissez la page WEB.
  3. Appelez votre professeur pour validation.

À ce stade, aucune intéraction n'est possible. Vous pouvez appuyer sur le bouton ou saisir une valeur, il ne se passera rien...

Intégration du js

Nous allons petit à petit intégrer du code javascript pour pouvoir jouer.

Construction du jeu

Personnaliser l'interface

Je vous propose tout d'abord qu'au chargement de la page:

  • un prompt s'ouvre pour demander votre prénom
  • votre prénom sera alors intégrer à la page web

Tout cela se fait assez facilement... Mais,

Où met-on le javascript?

  1. Le principe est le même que pour le css. On fabrique un fichier js, par exemple monscript.js qu'on enregistre dans le dossier js.
  2. On indique au fichier html (donc le fichier index.html) qu'un fichier js agit sur ces éléments. Pour cela, on ajoute en fin de code (juste avant la fermeture la balise body et juste après la barre de commentaires de couleur verte), le code suivant:
    🌍 Code HTML
    <script type="text/javascript" src="js/monscript.js"></script>

Création de votre premier js

  1. Dans Notepad++ ou vscode, créer le fichier monscript.js ,ajouter les lignes suivantes et enregistrez-le dans le bon dossier:
    JavaScript
    let pnom =  window.prompt("Quel est votre prénom!"); // creation d'un variable
document.getElementById("nom").innerHTML = "<h2>Bonne chance," + pnom + "</h2>"; // Ajout d'un élément HTML
  2. Comme indiqué ci-dessus, ajouter au fichier index.html le lien vers le fichier js.
  3. Enregistrez et rafraichissez la page.

Vous remarquerez que les instructions javascript finissent toujours par un ;.

Félicitations!

Vous venez de créer votre première action en Javascript.

Il faut maintenant avancer pour pouvoir jouer...

Création des variables

Pour jouer, il faut créer des variables qui gardent en mémoire l'état du jeu. À savoir:

  • une variable nombreSecret dont la valeur est choisie par l'ordinateur;
  • une variable nbTentatives dont la valeur initiale est 0;
  • une variable partieTerminee initialisée à false;
  • une variable historique de type liste pour enregistrer les choix faits par le joueur.

Déclaration des variables

Ajouter les variables suivantes au fichier monscript.js:

JavaScript
let nombreSecret;
let nbTentatives = 0;
let partieTerminee = false;
let historiqueTentatives = [];

J'ai déclarée la variable nombreSecret sans l'initialiser. En python il faudrait utiliser la biliothèque random , en javascript cela donne ceci:

JavaScript
nombreSecret = Math.floor(Math.random() * 100) + 1;

Nombre aléatoire

Ajouter cette instruction à la suite du fichier js.

Proposer et comparer

Il s'agit maintenant de proposer un nombre dans la zone de saisie puis:

  • de comparer notre proposition à la valeur de nombreSecret
  • d'afficher le bon message
  • d'afficher dans l'historique, la proposition déjà effectuée.
  • d'incrémenter le compteur nbTentatives

On va coder tout cela en js:

JavaScript
// capturer la valeur saisie dans le input
const input = document.getElementById('inputNombre');
const proposition = parseInt(input.value);
// incrementation compteur
nbTentatives++;
// ajout du choix à la liste
historiqueTentatives.push(proposition);
// Mise à jour de l'affichage
document.getElementById('tentatives').textContent = nbTentatives;
// comparer
if (proposition === nombreSecret) {  
    partieTerminee = true; // dans ce cas la partie est terminée
    const messageDiv = document.getElementById('message');
    messageDiv.textContent = `🎉 Bravo ! Vous avez trouvé ${nombreSecret} en ${nbTentatives} tentatives !`;
            } 
else if (proposition < nombreSecret) {
    const messageDiv = document.getElementById('message');
    messageDiv.textContent = "📈 C\'est plus grand !";
            } 
else {
    const messageDiv = document.getElementById('message');
    messageDiv.textContent = "📉 C\'est plus petit !";
            }
// ajouter à la liste des choix celui qui vien d'être fait
const liste = document.getElementById('tentatives-list');
const div = document.createElement('div');
div.className = 'tentative';
div.textContent = proposition;
liste.appendChild(div);

Ajoutons à la fin de ce code deux instructions pratiques pour réinitailiser le champ de saisie d'abord puis garder le focus sur ce champ (inutile de clicker à chaque fois...)

JavaScript
input.value = '';
input.focus();

Jouons!!

Ajouter dans cet ordre les codes javascript précédent.

Pensez à enregistrer!!

Je suis nul, ça marche pas!!!

Quand vous proposez un nombre et que vous appuyez sur le bouton DEVINER, rien ne se passe 😥 !

C'est tout à fait normal! Le code javascript réagit à un événement comme le clic de souris par exemple.

Le bouton DEVINER

Inspecter le code source et vous constaterez que le bouton DEVINER a un attribut onclick dont la valeur est la fonction deviner().

Cela signifie qu'à l'appui sur ce bouton, sera exécutée la fonction deviner().

Mais...

On n'a pas de fonction deviner() dans le js

Effectivement, elle n'existe pas encore. En fait, le corps de cette fonction contient toutes les instructions que nous avons saisies précédemment. On va donc créer cette fonction, c'est facile!

Création d'une fonction javascript

Vous allez modifier votre js en mettant les instructions du jeu dans une fonction. Vous avez le code source juste après.

Code du js
JavaScript
let pnom =  window.prompt("Quel est votre prénom!"); // creation d'un variable
document.getElementById("nom").innerHTML = "<h2>Bonne chance," + pnom + "</h2>"; // Ajout d'un élément HTML

let nombreSecret;
let nbTentatives = 0;
let partieTerminee = false;
let historiqueTentatives = [];

function deviner(){

// capturer la valeur saisie dans le input
const input = document.getElementById('inputNombre');
const proposition = parseInt(input.value);
// incrementation compteur
nbTentatives++;
// ajout du choix à la liste
historiqueTentatives.push(proposition);
// Mise à jour de l'affichage
document.getElementById('tentatives').textContent = nbTentatives;
// comparer
if (proposition === nombreSecret) {  
    partieTerminee = true; // dans ce cas la partie est terminée
    const messageDiv = document.getElementById('message');
    messageDiv.textContent = `🎉 Bravo ! Vous avez trouvé ${nombreSecret} en ${nbTentatives} tentatives !`;
            } 
else if (proposition < nombreSecret) {
    const messageDiv = document.getElementById('message');
    messageDiv.textContent = "📈 C\'est plus grand !";
            } 
else {
    const messageDiv = document.getElementById('message');
    messageDiv.textContent = "📉 C\'est plus petit !";
            }
// ajouter à la liste des choix celui qui vien d'être fait
const liste = document.getElementById('tentatives-list');
const div = document.createElement('div');
div.className = 'tentative';
div.textContent = proposition;
liste.appendChild(div);

input.value = '';
input.focus();
}

Enregistrez vos fichiers et jouez!!

Améliorer

Je vais proposer quelques améliorations légitimes.

Pour avoir créer une variable booléenne

Pour contrôler le déroulement du jeu.

Même si elle n'a pas été utilisée dans le code précédent, nous allons maintenant l'expoiter ainsi:

  • si la valeur de partieTerminee est false alors la partie se déroule jusqu'à proposer le bon nombre.
  • si le nombre est trouvée la valeur de partieTerminee passe à true et le jeu s'arrête.

Mais dès que le jeu s'arrête je veux pouvoir recommencer à jouer. Pour cela, je vais faire apparaître un bouton Recommencer la partie qui va reinitialiser le jeu.

Voici, le code final du javascript qu'il faut utiliser:

Code du js
JavaScript
let pnom =  window.prompt("Quel est votre prénom!"); // creation d'un variable
document.getElementById("nom").innerHTML = "<h2>Bonne chance," + pnom + "</h2>"; // Ajout d'un élément HTML

let nombreSecret;
let nbTentatives = 0;
let partieTerminee = false;
let historiqueTentatives = [];

nombreSecret = Math.floor(Math.random() * 100) + 1;

//reinitialisation des variables
function nouvellePartie() {
    nombreSecret = Math.floor(Math.random() * 100) + 1;
    nbTentatives = 0;
    historiqueTentatives = [];
    score = 100;
    partieTerminee = false;
    document.getElementById('tentatives').textContent = '0';
    document.getElementById('message').innerHTML = '';
    document.getElementById('inputNombre').value = '';
    document.getElementById('btnNouvelle').style.display = 'none';
    document.getElementById('inputNombre').disabled = false;
    document.getElementById('tentatives-list').innerHTML = '';
}

function deviner(){
// capturer la valeur saisie dans le input
const input = document.getElementById('inputNombre');
const proposition = parseInt(input.value);
// incrementation compteur
nbTentatives++;
// ajout du choix à la liste
historiqueTentatives.push(proposition);
// Mise à jour de l'affichage
document.getElementById('tentatives').textContent = nbTentatives;
// comparer
if (proposition === nombreSecret) {  
    partieTerminee = true; // dans ce cas la partie est terminée
    const messageDiv = document.getElementById('message');
    messageDiv.textContent = `🎉 Bravo ! Vous avez trouvé ${nombreSecret} en ${nbTentatives} tentatives !`;
    document.getElementById('inputNombre').disabled = true;
    document.getElementById('btnNouvelle').style.display = 'block';
            } 
else if (proposition < nombreSecret) {
    const messageDiv = document.getElementById('message');
    messageDiv.textContent = "📈 C\'est plus grand !";
            } 
else {
    const messageDiv = document.getElementById('message');
    messageDiv.textContent = "📉 C\'est plus petit !";
            }
// ajouter à la liste des choix celui qui vien d'être fait
const liste = document.getElementById('tentatives-list');
const div = document.createElement('div');
div.className = 'tentative';
div.textContent = proposition;
liste.appendChild(div);
// pour vider le champ de saisie et garder le focus dessus
input.value = '';
input.focus();
}

// Permettre la validation avec Entrée
document.getElementById('inputNombre').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        deviner();
    }
});

Tricher un peu...

Vous pouvez faire afficher le nombre choisi par le programme dans la console. Pour cela, deux questions se posent:

Où se trouve la console javascript?

Appuyez sur F12 et regarder dans l'onglet console

Comment afficher dans la console?

Facile. Ajouter le code suivant console.log(nombreSecret); quelque part(pas n'importe où non plus...) dans votre code et la valeur du nombre choisi par le programme sera alors affichée en console...

En mode classique

Au quotidien, vous accédez à un site web par l'intermédiaire d'un serveur web.

Accès serveur

L'accès à un serveur se fait par son URL(Uniform Resource Locator).

Par exemple, l'url de mon site est https://marcturro.github.io/. En fait, on peut aussi saisir l'adresse IP du site, à condition qu'elle soit fixe (ce qui n'est pas le cas pour mon site.. :bowtie:).

Nous allons donc déposer notre site sur un serveur web.

Serveur Web

Un serveur assure un ou plusieurs services. Un serveur web attend les sollicitations des clients et répond en envoyant le code HTML, css ,...

L'architecture classique des serveurs WEB est WAMP pour Windows Apache Mysql PHP. Si Apache assure le service WEB en gérant les requêtes, Mysql et PHP ont des rôles plus élaborés. Ils assurent:

  • la gestion et communication avec une base de données avec MySql et PHP.
  • la dynamique côté serveur avec PHP.

Javascipt assure aussi le dynamisme du site mais côté client.

Notre distribution

Nous allons utiliser une distribution plus légère et portable que WAMP: elle s'appelle UWAMP et est installée sur le réseau du lycée.

Utilisation d'un serveur web

  1. Tapez UWAMP dans la barre de recherche de windows et ouvrez-le.
  2. Normalement le serveur web démarre tout seul: sinon activez son démarrage.
  3. Appuyez sur le bouton Dossier www: le dossier du même nom s'ouvre.Supprimez éventuellement son contenu
  4. Déposez dans ce dossier votre site (index.html et les deux dossiers css et js)
  5. Appuyez dans l'interface sur Navigateur www. Vous devriez voir apparaître votre site.

Vous avez installé un serveur sur votre machine qui est aussi le client qui demande la ressource.

Localhost

L'url pour atteindre le serveur web sur sa propre machine est localhost. Son adresse IP est 127.0.0.1 sur le port 80.

Vous apprendez plus tard à paramétrer UWAMP pour que les autres ordinateurs de la salle (les clients) puissent se connecter à votre serveur web...