Arts numériques

Jouer un sample en javascript pur

Stéphane Noel — 2020-12-13T11:10:17Z

Si coder un lecteur audio complet, avec bouton "play", "stop", l'affichage du temps et la possibilité de naviguer dans le morceau est complexe, déclencher un son court peut être réalisé avec quelques lignes de code.

Sans jQuery

JQuery est une librairie puissante et assez complète, mais s'il s'agit de produire des scripts simples, on a parfois l'impression de prendre un bazooka pour tuer des mouches. Un script simple comme celui qui suit peut être fait de manière rapide, en javascript "pur".

Le html

Vous devez disposer d'un son court pour réaliser cet exercice. J'ai été en chercher un sur la bibliothèque de la BBC, en affichant les sons par durée.

l'attribut "controls" dans le tag audio est ce qui fait apparaitre le lecteur. Pour en savoir plus à ce sujet, lire l'article sur la balise audio sur ce site.
En appuyant sur le bouton play, on peut tester le son, vérifier que tout se passe bien à ce stade.

Déclencher avec javascript

Nous allons maintenant créer un bouton, qui devra déclencher le son. Nous avons ajouté un id au tag audio pour facilement y accéder.

   Jouer le son

Le problème de ce code est qu'une fois le son joué, il ne se passe plus rien quand on clique à nouveau sur le bouton. La tête de lecture du son ne revient pas automatiquement au début de celui-ci. On va donc ajouter un ligne qui met le son au début du fichier chaque fois que le bouton est cliqué.

   Jouer le son

Et voilà . Il suffit de cacher le lecteur en retirant l'attribut "controls" et le lecteur disparait, laissant seul le bouton.

Une version du code pour plusieurs boutons
Il est possible de faire facilement une version de ce code qui permettent de déclencher différentes balises audio à partir de la même fonction.

Il suffit de transmettre l'id du tag audio que l'on veut déclencher dans l'appel de la fonction, comme ceci :

      Biiip Hooonk

Associer l'apparition d'un bloc dans la page Ã une action

Stéphane Noel — 2020-10-07T10:55:20Z

Il existe des plugin pour jquery, le plus connu Ã©tant waypoints, qui permettent de dÃ©tecter si lors d'un scroll, un Ã©lÃ©ment apparait dans la page. Voici un code relativement court de dÃ©monstration de cette fonction.

Comparer le scrollTop()

Il s'agit de comparer le nombre de pixels scrollÃ© depuis le haut de la page, qui est un chiffre, avec l'endroit dans la page oÃ¹ se trouve tout les blocs associÃ© Ã une classe (ici .truc). En comparant position et la taille verticales du bloc avec ce chiffre, on peut dÃ©terminer si le bloc est actuellement dans l'espace de la fenÃªtre du navigateur. Si c'est le cas, on lui ajouter la classe .inview, sinon on la retire.
En associant une transition Ã cette classe, on peut obtenir diffÃ©rents effets avec l'opacitÃ© (opacity), le dÃ©placement (translate), l'agrandissement (scale), la rotation (rotate), etc. Et jouer sur les combinaisons de ces effets.

Modifier le script

Ce code enlÃ¨ve la classe .inview lorsque l'Ã©lÃ©ment disparait de la page, mais il est possible de ne pas supprimer cette classe, rendant l'apparition permanente.

Il est aussi possible de rendre l'apparition plus tardive ou rapide en jouant sur le calcul : l'Ã©lÃ©ment peut alors apparaitre alors qu'il est au milieu de la fenÃªtre, ou au contraire, commencer sa transition alors qu'il n'est pas encore visible.

Le code

 Un truc
 Un truc
 Un truc
 Un truc
 Un truc
 Un truc
 Un truc

Un exemple de css pour accompagner ce code :

Un lecteur en bas de page

Stéphane Noel — 2020-03-03T00:40:34Z

Ce lecteur occupe le bas de la page, dans une barre blanche occupant toute la largeur.

Le code complet est en pièce jointe. Le code est similaire au lecteur "Un lecteur audio codé avec jquery", et utilise jQuery.

Pour utiliser le code, il faut disposer de jQuery, et charger les deux fichiers de bases : un fichier javascript et un fichier CSS :

Puis créer le tag audio en lui donnant la classe .lecteur-son :

Les attributs data-titre et data-auteur permettent d'afficher dans le lecteur les infos de titre du morceau et de l'auteur.

Les CSS restent modifiables pour personnaliser le lecteur.

Jouer un sample sur clic avec jquery

Stéphane Noel — 2019-12-07T14:43:29Z

Un script simple, qui vide à activer un son sur base d'un clic avec jquery.

Le html

Le code est composé d'un élément comportant la class .jouerson, avec un élément visible (ici un simple texte), et un tag audio avec le lien correct vers un son court. Le tag audio n'a pas d'attribut "controls" donc il est invisible, ce qui nous convient.

<div class="jouerson"> Play me !   </audio> </div>

Le javascript

Le javascript est écrit en jquery. Il faut évidemment charger Jquery avant d'afficher ce script.
Le script cherche à l'intérieur de l'élément sélectionné par la classe un tag audio, et s'il le trouve, le remet à zéro (au cas où il serait déjà en cours de lecture) et le joue.
On peut utiliser plusieurs éléments avec cette même classe dans la page.

$(".jouerson").click(function(){ var a=$(this).find("audio").get(0); // trouver le tag audio a.currentTime=0; // remettre au début du son a.play(); // jouer return false; });

Un lecteur audio "vanilla" (sans librairie)

Stéphane Noel — 2019-02-26T12:20:18Z

Ce script utilise des fonctions natives de javascript pour créer un lecteur audio.

Usage

Le code est placé dans le fichier javascript.js. Ce fichier doit être chargé à la fin de la page, après tout le code html.

Pour activer le lecteur, il est nécessaire de préparer le html avec cette structure :

   Your browser does not support the audio element.

Le script détecte la classe "lecteur" et crée des éléments html supplémentaires à l'intérieur de celui-ci, dont les boutons de lecture.

Voici sa structure :

CSS

Le fichier css est volontairement vide, et comporte juste les classes principales associées au lecteur.

Plusieurs sons

Le code supporte plusieurs lecteurs. Ils auront tous le même comportement css de base, à vous de les dissocier en utilisant d'autres id et classes associé à l'élément "lecteur".

Qu'est-ce que Javascript ?

Stéphane Noel — 2018-12-12T11:46:34Z

Bref Ã©claircissement sur ce langage, diffÃ©rent dans sa nature du html et de css, qu'il complÃ¨te.

Javascript est un langage de programmation

Contrairement Ã HTML qui est un langage de description, Javascript est un langage de programmation, ce qui signifie que l'on donne des ordres. Le langage Javascript s'adresse au moteur javascript du navigateur web, la plupart du temps.
Les instructions Ã©crites en javascript doivent respecter des rÃ¨gles de syntaxe prÃ©cises, sans quoi le moteur les ignore ou arrÃªte l'exÃ©cution du code pour toute la page, ce qui peut Ãªtre problÃ©matique.

Javascript est un langage cÃ´tÃ© client

C'est un dÃ©tail trÃ¨s important Ã comprendre : le navigateur web qui reÃ§oit du code javascript va devoir l'exÃ©cuter lui-mÃªme. Du coup, un navigateur installÃ© sur un ordinateur rapide exÃ©cute le code javascript plus vite qu'un navigateur installÃ© sur un ordinateur plus ancien. Si le navigateur est vieux, il risque aussi d'Ãªtre incompatible avec la version trop rÃ©cente du code utilisÃ©, puisque Javascript est un langage qui Ã©volue Ã travers diffÃ©rentes versions.
Si plusieurs pages exÃ©cutent du code javascript, chaque page l'exÃ©cutera plus lentement aussi. Bref, l'exÃ©cution du code est dÃ©pendant de la machine finale, et pas du serveur web qui a envoyÃ© la page.

Le langage cÃ´tÃ© client est l'opposÃ© d'un langage cÃ´tÃ© serveur, qui est exÃ©cutÃ© sur le serveur avant qu'il n'envoie la page vers le navigateur. Php, Asp, Ruby, Python sont des langages cÃ´tÃ© serveur. Le fait qu'une seule machine exÃ©cute le code cÃ´tÃ© serveur permet d'identifier plus facilement les bugs, puisqu'il sont concentrÃ© Ã un seul endroit et le code toujours exÃ©cutÃ© de la mÃªme maniÃ¨re.

Javascript n'est pas Java

Le langage dÃ©veloppÃ© par Brendan Eich, employÃ© chez Netscape en pleine guerre des navigateurs, s'appelle d'abord Livescript. Comme Netscape est en relation commerciale avec Sun Microsystems, qui dÃ©veloppe Java, il est dÃ©cidÃ© quelques jours avant la prÃ©sentation du langage qu'il changera de nom pour Javascript, pour lui donner un air de famille. Un rÃ©flexe commercial idiot, qui produira de la confusion entre les deux langages. Si javascript s'inspire de Java, les deux langages sont trÃ¨s diffÃ©rents et ne doivent pas Ãªtre confondus.

Bref historique

La mythologie raconte que le langage a Ã©tÃ© crÃ©Ã© en dix jours en mai 1995 par Brendan Eich qui travaille Ã l'Ã©poque pour Netscape Communications Corporation, dÃ©veloppeur du navigateur Netscape.
En mars 1996, Netscape met en Å“uvre le moteur JavaScript dans son navigateur Web Netscape Navigator 2.0. Le navigateur Netscape a Ã©tÃ© largement et gratuitement distribuÃ©, et il est donc trÃ¨s populaire, ce qui assure immÃ©diatement un engouement pour le javascript.
La guerre des navigateurs en est Ã ses dÃ©but et il n'est donc pas question pour l'Ã©quipe de Internet Explorer, de Microsoft, de se concerter avec Netscape. L'Ã©quipe de Internet Explorer "invente" donc sa propre version qui s'appelle Jscript, qui sera implÃ©mentÃ© dans la version 3 de Internet Explorer quelques mois plus tard.

Jscript et Javascript sont trÃ¨s proche, mais le code Ã©crit pour l'un des navigateurs a une fÃ¢cheuse tendance Ã ne pas s'exÃ©cuter sur l'autre. DÃ©velopper en script signifie donc dÃ©velopper deux versions de code pour obtenir le mÃªme rÃ©sultat pour chacun des navigateurs. Une perte de temps qui durera jusqu'au milieu des annÃ©es 2000.

Javascript est standardisÃ© (dÃ©crit comme une norme) sous le nom d'ECMAScript en juin 1997 (la norme est Ã©crite puis valisÃ©e par Ecma International, un organisme de rÃ©gulation). En 2019, la norme en est Ã sa 8eme Ã©dition.

ajouter un événement en clic sur un élément

Stéphane Noel — 2018-12-02T22:44:52Z

Rendre un élément de la page clickable est une des opérations de base en intéraction web. Il y a plusieurs moyens d'y arriver.

Ecrire dans le tag avec l'attribut onclick

On peut ajouter un attribut onclick sur n'importe quel élément. C'est une méthode non recommandée, car on ajoute du javascript dans du html, ce qui est considéré comme intrusif. Mais une méthode toujours utile.

Cliquez moi

Associer une action à un tag en pur javascript

Ici, on va associer l'action uniquement avec javascript. Là aussi, plusieurs méthodes possibles.

Première méthode

Cliquer ici

On sélectionne l'élément par son id et on lui associe une fonction, codée dans la foulée.

Deuxième méthode
On peut aussi écrire cet appel de fonction avec addEventListener

Activer plusieurs boutons avec la même fonction

La fonction forEach permet de passer en revue tous les éléments sélectionnés avec querySelectorAll, qui comme son nom l'indique sélectionne plusieurs éléments qui correspondent à la requête, et renvoie une liste, un array, au lieu de un seul élément.
Le code suivant crée un attribut "data-style" dans le tag "body", que l'on peut styler avec les css

La propagation des clics

Le clic est un événement qui peut se propager. à‡a signifie que si un élément est cliqué, son parent est aussi averti du clic. Si il a lui-même une action codée en cas de clic, il va lui aussi s'exécuter, ce qui peut être gênant. Un autre cas typique est le clic sur un lien. Vous avez un lien en html traditionnel fonctionnel, mais vous codez une action en javascript sur ce même lien. Si vous ne stoppez pas la propagation du clic, le script va s'exécuter et dans le même temps, le lien va s'activer, et donc changer de page. Il faut donc empêcher le lien de s'exécuter.

Voici un code non-fonctionnel :

Cliquez moi

Lorsqu'on clique sur le lien, le script fait apparaitre une page d'alerte, mais dès que l'on referme celle-ci, le lien s'active et on change de page. Si le but est de rester sur la même page, on ajoutera un code empêchant la propagation.

 Cliquez moi

Autres actions

onclick n'est pas la seule action gérée par javascript. En voici d'autres :
mousedown
mouseup
mousemove
dblclick
mouseover
mouseout
mouseenter
mouseleave
contextmenu
Faite une recherche, tout ceci est abondamment documenté sur le net.

Manipuler les éléments de la page

Stéphane Noel — 2018-12-01T22:35:58Z

Pour manipuler les éléments de la page, il faut avoir compris les bases du DOM, puis apprendre une série de fonctions qui permettent de sélectionner les éléments de la page.

Une page faite de noeuds

Le navigateur charge la page html, l'analyse pour construire sa structure (en corrigeant à la volée les erreurs de code) puis jette le document de base pour ne plus regarder que cette structure qui représente ce qu'il a compris du code qu'il a reçu. C'est ce qu'on appelle le DOM pour Document Object Model.
Le DOM est donc une structure arborescente faites de noeuds, décrivant la structure d'une page web.

Un noeud est basiquement un tag. Chaque tag possède possiblement des attributs (un id, des classes, un href pour un lien, un src pour une image, etc.), un contenu (du texte) et des enfants, c'est à dire d'autres tags, qui sont eux-mêmes des noeuds. Et ainsi de suite.
On peut accéder à chacun de ces noeuds à travers javascript, et modifier librement et les attributs, et le contenu, et les enfants.

On peut par exemple :
– remplacer une image par une autre en changeant le contenu de l'attribut "src"
– supprimer un élément
– cacher un élément en lui ajoutant l'attribut css "display : none" puis le montrer (lors d'un clic ou un survol) en changeant cet attribut avec "display : bloc"
– changer le contenu texte d'un élément, pour faire apparaitre une légende par exemple.

Sélectionner les éléments, comme en CSS

Pour modifier une page, on va sélectionner un ou plusieurs noeuds dans la page, et appliquer une série de transformations, comme par exemple modifier ses attributs, le déplacer dans la page, lui ajouter des noeuds, etc.

Les principaux outils pour ce faire sont querySelector().
Voici un exemple :

let titre = document.querySelector('h1');

Ce code permet de sélectionner dans la page le premier tag h1. Un seul, le premier, sera sélectionné et stocké dans la variable titre. Il est possible à partir de là de manipuler cet élément.

Par exemple :

// changer le contenu de l'élément titre.textContent = 'Hello world!'; // changer la couleur du fond titre.style.backgroundColor = "red"; // ajouter une classe titre.classList.add("actuel");

Pour sélectionner plusieurs éléments, on utilisera querySelectorAll().
Le résultat est une liste d'éléments, un peu plus difficile à manipuler, car il faut passer par une boucle pour atteindre les éléments un par un.

let liste = document.querySelectorAll('div'); // changer la couleur de fond de tous les éléments liste.forEach(function (elem) { elem.style.backgroundColor = "red"; })

Comprendre les bases : le DOM

Stéphane Noel — 2018-12-01T11:59:34Z

Le DOM (Document Object Model) est la structure de la page web que vous avez sous les yeux, telle qu'interprÃ©tÃ©e par votre navigateur. Le navigateur lit donc le html, puis en dÃ©gage une structure qu'il mÃ©morise. Lorsque l'on interagit ensuite avec la page par du code (javascript principalement), on agit sur le dom, pas sur le code html d'origine.

Le DOM est une sorte d'arbre, dont les deux troncs principaux sont head et body, et qui se divise ensuite en branche pour afficher tous vos div, li et autres p.

C'est sur base de ce dom interprÃ©tÃ© par le navigateur que vous pourrez ensuite appliquer vos styles css et agir avec javascript. Ceci est important Ã retenir : si votre code html est mal analysÃ© par le navigateur Ã cause d'erreurs de syntaxe, certaines parties de votre page ne pourrons pas Ãªtre atteintes. Donc pour un codage javascript efficace, il est important de s'appuyer sur un codage html correct.

Une fois stockÃ© dans la mÃ©moire de l'ordinateur, le dom peut Ãªtre manipulÃ© : on peut lui ajouter des branches, cloner des branches, modifier des Ã©lÃ©ments, le texte contenu dans ces Ã©lÃ©ments, puisqu'on ne manipule pas un fichier physique (le html d'origine, jetÃ© aprÃ¨s l'analyse du dom), mais sa reprÃ©sentation sous forme de structure.

Le DOM et les navigateurs

La difficultÃ© jusqu'il y a quelques annÃ©es Ã©tait que la syntaxe javascript pour agir sur le dom Ã©tait (et reste) diffÃ©rente suivant les navigateurs. LÃ encore, le W3C tente de jouer son rÃ´le de standardisation, mais comme il ne fait que recommander, pas imposer, la standardisation du code pour interfacer avec le dom reste diffÃ©rente dans les navigateurs.

"Use strict"

On a aujourd'hui une plus grande standardisation du code, qui a amenÃ© Ã la crÃ©ation du mode "strict" de javascript, qui est une faÃ§on de spÃ©cifier que l'on va utiliser un code contemporain, plus strict, moins tolÃ©rant avec les erreurs. Cette dÃ©claration a Ã©tÃ© introduite avec la version 5 de ECMAScript (le nom technique de javascript).
Typiquement, les variables doivent Ãªtre dÃ©clarÃ©es avant utilisation :

x=15;

var x=15;

ou mieux

let x=15;

FenÃªtre, document et navigateur

Javascript a pour but d'interagir avec le navigateur qui l'exÃ©cute. Il peut atteindre 3 grandes entitÃ©s de celui-ci, considÃ©rÃ© comme des objets.

navigator est le terme permettant d'atteindre les propriÃ©tÃ©s du navigateur. On ne peut que lire les informations donnÃ©es par le navigateur, pas les changer.
Typiquement, on peut demander au navigateur
– son nom de code (appCodeName) ou son nom (appName)
– si il est connectÃ© Ã internet ou pas
– si les cookies sont acceptÃ©s
– si javascript est actif ou si le navigateur l'interdit
– la langue et la localisation du navigateur

DÃ¨s qu'une page html est chargÃ©e et analysÃ©e, elle devient un objet nommÃ© document. Cet objet contient toute la structure et les contenus de la pages sous la forme de nÅ“uds contenant des attributs ou d'autres objets. C'est lÃ qu'on va pouvoir manipuler les Ã©lÃ©ments d'un page.
– lister les Ã©lÃ©ments (tags) de la page
– accÃ©der Ã leur texte et Ã leurs attributs
– crÃ©er des Ã©lÃ©ments dans la page
– les supprimer
– les dÃ©placer
et beaucoup d'autres choses.

Un objet window est crÃ©Ã© pour chaque fenÃªtre crÃ©Ã©e par le navigateur. On peut accÃ©der aux informations d'une fenÃªtre et aussi changer certains de ses paramÃ¨tres :
– l'historique des pages qui y ont Ã©tÃ© vues
– sa taille en largeur et hauteur
– sa position dans l'Ã©cran de l'ordinateur
– le nombre de pixels scrollÃ©s sur l'axe horizontal et vertical
et d'autres choses encore.

Stéphane Noel — 2018-04-24T09:30:42Z

Une utilisation assez standard de jquery est celle d'onglets. Ils permettent d'afficher facilement plus d'information dans peu d'espace. Il existe des centaines de faÃ§ons de coder des onglets, et jquery possÃ¨de mÃªme dans ses librairies "UI" des fonctions prÃ¨tes Ã l'emploi. Cet exemple est donc surtout pÃ©dagogique, mais il est aussi fonctionnel.

Le code :


    Des onglets      Tab 1
 Tab 2
 Tab 3
 
  Contenu du tab 1
 Contenu du tab 2
 Contenu du tab 3

Arts numériques

Jouer un sample en javascript pur

Sans jQuery

Le html

Déclencher avec javascript

Associer l'apparition d'un bloc dans la page Ã une action

Comparer le scrollTop()

Modifier le script

Le code

Un lecteur en bas de page

Jouer un sample sur clic avec jquery

Le html

Le javascript

Un lecteur audio "vanilla" (sans librairie)

Usage

CSS

Plusieurs sons

Qu'est-ce que Javascript ?

Javascript est un langage de programmation

Javascript est un langage cÃ´tÃ© client

Javascript n'est pas Java

Bref historique

ajouter un événement en clic sur un élément

Ecrire dans le tag avec l'attribut onclick

Associer une action à un tag en pur javascript

Activer plusieurs boutons avec la même fonction

La propagation des clics

Autres actions

Manipuler les éléments de la page

Une page faite de noeuds

Sélectionner les éléments, comme en CSS

Comprendre les bases : le DOM

Le DOM et les navigateurs

"Use strict"

FenÃªtre, document et navigateur

CrÃ©er des onglets avec jquery