Javascript

Javascript
D3
Guy Lapalme
Javascript
• Langage de programmation objet
• Présent dans tous les browsers
• Pas toujours activé, mais presque…
de manipuler
• Permet
le contenu d’une page web une fois chargée
-
tous les éléments du browser
valider les éléments d’un formulaire
2
Javascript : brefs rappels -1
plus de détails
de base
• Types
nombres, chaines de caractères, booléens, null,
-
undefined
objets
•
•
tableau
fonction
• Variables (déclarées avec var)
• Opérateurs (+,-,*,/,<,<=,==,>,>=)
• -Énoncés
if (cond) {…} else {…}
-
for (var i=0;i<n;i++){…}
3
Javascript : brefs rappels - 2
plus de détails
• -Tableau
var t = ["veau","vache","cochon"]
-
t.length, t[2], t.push("couvée"), t.pop()
t.join(" et "), t.sort()
• Fonction
var fact = function(n) {
if (n == 1) return 1;
return n*fact(n-1);
};
4
Javascript : brefs rappels - 3
plus de détails
Objets
simples
var personne={prenom:"Alain",nom:"Ternet",
setNom:function(newNom){
this.nom=newNom;
return this;
}
};
personne.prenom+" "+personne["nom"] => ??
personne.setNom("Formatique");
personne.setPrenom=function(newPrenom){
this.prenom=newPrenom;
return this;
};
personne.prenom+" "+personne["nom"] => ??
personne.setNom("Dinateur").setPrenom("Laure")
personne.prenom+" "+personne["nom"] => ??
Autres exemples de création d'objets
5
Accès aux éléments du browser
et propriétés prédéfinies
• Objets
Document Object Model
• node, children, …
- Browser Object Model
•
window, frames, history, location, …
• Gestion des événements par appel de
fonction (callback, event listener)
-
click, load, mouseover, submit …
6
Lien avec une page web
script
• Balise
soit dans le corps de la page (à éviter)
-
soit dans l’entête
-
source HTML
source Javascript
-
source HTML
source Javascript
: afficher la date du browser
• Exemple
Exécuter
lien avec un formulaire
• Exemple:
Dessin d’un polygone avec SVG
7
Frameworks Javascript
•
•
•
Ensemble de fonctions JS pour la
programmation client
-
manipulation DOM
extensions diverses aux tableaux, chaînes
gestion uniforme des événements
widgets pour interface usager
-
jQuery
D3
Permet de s'affranchir des particularités des
browsers (y compris diverses versions)
Utilise à fond les aspects fonctionnels de JS
8
D3
Data Driven Document
• Représentation graphique des données
• gestion automatique des axes et des échelles
• traitement des couleurs, dates, projections, etc
• plusieurs graphiques prédéfinis: arbres, cartes, …
• Basé sur les standards: HTML, CSS, SVG
• Animations avec les transitions SVG
• Mise à jour dynamique des entrées/sorties des
nouvelles données
• Indépendance des browsers modernes
9
Sélection
d3.select(sélecteur CSS)
d3.selectAll(sélecteur CSS)
*
tous les éléments
.class
tous les éléments de cette classe
élément
tous les éléments de ce nom
#id
l’élément avec cet id
sel1, sel2, … combine tous les résultats des sélecteurs
parent enfant tous les enfants d’un parent
10
Sélection D3 vs élément DOM
var totoS = d3.select("#toto")
var toto = document.getElementById("toto")
var toto = totoS.node()
var bleusS = d3.selectAll(".bleu")
var bleus = document.getElementsByClassName("bleu")
11
Sélection D3
attributs
attr(nom[,valeur])
classes
classed(nom[,true|false])
style
style(nom[,valeur])
propriété
property(nom[,valeur])
texte
text([valeur])
html
html([valeur])
ajout à la fin
append(nomElement)
insertion après
insert(nom[,before])
enlèvement
remove()
KMsAPied.xhtml
Autres exemples avec D3
12