I. Introduction▲
Dojo Toolkit est une bibliothèque très complète pour JavaScript. Elle vous permettra d'écrire rapidement votre application Web avec un rendu incroyable.
Cette bibliothèque contient de nombreux outils pour manipuler le JavaScript, faire des animations, manipuler le DOM.
Elle possède également un système de création de widget pour réaliser des composants réutilisables complexes, en plus d'en proposer de nombreux préfabriqués.
Apprenez à intégrer cette bibliothèque, en utilisant une méthode de formation structurée, pas à pas et orientée pratique.
Avec la méthode "Développement Facile", vous allez apprendre à développer des applications Web incroyables, que vos visiteurs adoreront !
Retrouvez un extrait de la formation gratuite "Dojo Facile", composée de plus de 30 cours professionnels pour vous aider à progresser rapidement avec la maîtrise du Dojo.
Téléchargez Dojo Toolkit, iciTéléchargez Dojo Toolkit, ici
II. La technique pour créer un élément dans le DOM avec le framework Dojo▲
Apprenez à créer un élément dans le DOM (Document Object Model) de votre page Web avec Dojo.
Ci-dessous, l'exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
-->
<title>HTML5</title>
<meta charset="UTF-8">
<script src="dojo-release-1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.addOnLoad(function()// a la fin du chargement de la page
{
dojo.create("div", {innerHTML: "Insertion Dojo : <br /> Bonjour tout le monde !"}, dojo.body());// création d'une div avec le texte.
dojo.place("<div class='node'>Module 0</div>", "main", "first");// ajout un div avant le premier div
dojo.place("<div class='node'>Module 5 fin</div>", "main", "last");// positionné à la fin
dojo.place("<div class='node'>Module 5 avant menu</div>", "main", "before");// positionné avant la balise main
dojo.place("<div class='node'>Module 5 après menu</div>", "main", "after");// positionné après la balise main
//dojo.place("<div class='node'>Module 5 remplace</div>", "main", "replace");// remplace l'élément
//dojo.place("<div class='node'>Module 5 supprime</div>", "main", "only");// supprime les autres éléments
});
function empty()
{
dojo.empty("text");// supprime le contenu de la balise avec l'id text
}
</script>
<style type="text/css">
div { width: 250px;
text-align: center;
font-family: Arial;
margin-top: 25px;
margin-bottom: 25px;}
#main { border: 1px dotted #9683EC;
width: 260px;}
.node { background-color: #9683EC;
margin: 5px 5px;}
#text { width: 350px; height: 90px;
background-color: #BBD2E1;
border: 3px solid #0000FF;
padding: 5px;}
</style>
</head>
<body class="soria">
<header>
<span>Developpement Facile</span>
</header>
<div id="main">
<div class="node">Module 1</div>
<div class="node">Module 2</div>
<div class="node">Module 3</div>
</div>
<div id="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
nec, ultricies dolor.
</div>
<br />
<button id="delete" type="button" onclick="empty()">Supprimer le contenu</button>
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
III. La méthode pour supprimer un élément du DOM avec le framework Dojo▲
Dans cette vidéo, apprenez à supprimer et à dupliquer rapidement un élément de votre page Web avec Dojo.
Ci-dessous, l'exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
-->
<title>HTML5</title>
<meta charset="UTF-8">
<script src="dojo-release-1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
/**
* supprime complètement un élément
* @return {[type]} [description]
*/
function destroy()
{
dojo.destroy("text");// supprime la balise avec l'id text
}
/**
* duplique un élément (en supprimant l'élément source)
* @return {[type]} [description]
*/
function clone()
{
var copy = dojo.clone("text");
dojo.place (copy, "clone", "after");
}
</script>
<style type="text/css">
div { width: 150px;
border: 1px solid black;
background-color: #26C4EC;
text-align: center;
margin-top: 25px;}
#main { border: 1px dotted black;
width: 260px;}
div.noeud { background-color: #9683EC;
margin: 5px 5px;}
#text { width: 350px; height: 90px;
background-color: #BBD2E1;
border: 3px solid 0000FF;
padding: 5px;}
</style>
</head>
<body class="soria">
<header>
<span>Developpement Facile</span>
</header>
<div id="text">
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500
</div>
<br />
<button id="delete" type="button" onclick="destroy()">Supprimer le bloc</button>
<button id="clone" type="button" onclick="clone()">Dupliquer le bloc</button>
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
IV. Comment modifier un attribut du DOM avec le framework Dojo▲
Vous verrez dans cette vidéo, comment ajouter ou supprimer des classes CSS, et comment modifier les attributs d'un élément de votre page HTML.
Ci-dessous, l'exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<link rel="stylesheet" type="text/css" href="dojo-release-1.9.3/dijit/themes/soria/soria.css">
-->
<title>HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="dojo-release-1.9.3/dojo/dijit/themes/claro/claro.css" />
<script src="dojo-release-1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
function updateStyle() // modifie le style CSS de la balise avec l'id texte
{
dojo.attr("text", "style", {
padding: "5px",
width: "500px",
border: "5px solid #CECECE",
background: "#9D3E0C"});
}
function showStyle() // affiche le style de la balise avec l'id texte dans une nouvelle balise
{
dojo.attr("resul", "innerHTML", "id: " + dojo.attr("text", "id") + "<br>"+ "tabindex: " + dojo.attr("text", "tabindex") + "<br>" +"style: " + dojo.attr("text", "style") + "<br>");
}
function verifAttr() // vérifier la présence des attributs
{
dojo.attr("resul", "innerHTML", "id : " + dojo.hasAttr("text", "id") + "<br>"+ "tabindex : " + dojo.hasAttr("text", "tabindex") + "<br>"+ "style : " + dojo.hasAttr("text", "style") + "<br>"+ "name : " + dojo.hasAttr("text", "name"));
}
function showImg()// supprime l'attribut style des images
{
dojo.removeAttr("image", "style");
}
</script>
<style type="text/css">
body{
font-family: Arial;
}
div { width: 370px;
border: 1px solid black;
background-color: #26C4EC;
text-align: center;
margin-top: 25px;}
#main { border: 1px dotted black;
width: 260px;}
div.noeud { background-color: #9683EC;
margin: 5px 5px;}
#text { width: 370px; height: 90px;
background-color: #BBD2E1;
border: 3px solid #0000FF;
padding: 5px;}
</style>
</head>
<body class="claro">
<header>
<span>Developpement Facile</span>
</header>
<div id="text">
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500
</div>
<br />
<button id="updateStyle" onClick="updateStyle();">Modifier le style</button>
<button id="showStyle" onClick="showStyle();">Afficher le style</button>
<button id="verifAttr" onClick="verifAttr();">Vérifier la présence des attributs</button>
<br />
<div id="resul">Coucou !</div>
<br /><br />
<input type="checkbox" value="show" id="caseImg" onclick="showImg()">Afficher l'image<br />
<img id="image" style="display: none;" src="08-logo-dev-facile.png">
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
V. Les stratégies pour utiliser les tableaux array avec le framework Dojo▲
Dans ce cours vidéo, apprenez à gérer des tableaux avec Dojo.
Dojo vous permet d'accéder et de manipuler facilement les éléments de votre tableau.
Ci-dessous, l'exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
-->
<title>HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="dojo-release-1.9.3/dojo/dijit/themes/claro/claro.css" />
<script src="dojo-release-1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
function isArray(oBtnValue)
{
console.log("oBtn");
console.log(oBtnValue);
if( oBtnValue == "array")
aTestArray = ['a', 'b', 'c'];
else
aTestArray = oBtnValue;
// le contenu du bouton est un tableau
if ( dojo.isArray( aTestArray) )
{
dojo.byId("result").innerHTML = "Yesss !<br />c'est un tableau array.";// modifie le contenu de la balise avec id result
dojo.style(result, { "background-color": "#26C4EC"});// ajout du style CSS à la balise avec id result
}
else
{
dojo.byId("result").innerHTML = "Erreur !<br />ce n'est pas un tableau array.";// modifie le contenu de la balise avec id result
dojo.style(result, { "border": "2px solid #BBD2E1"});// ajout du style CSS à la balise avec id result
}
}
var tableau = ["Amandine", "Gwen", "Alice", "Christelle","Delphine", "Alice", "Marine"];
/**
* Permet de retrouver la première position d'un élément dans un tableau
*/
function getPosition()
{
var nPos = dojo.indexOf(tableau, "Alice");
dojo.byId("result").innerHTML= "<p>Alice se trouve à la position " + (nPos + 1) + " en commençant par le début. Donc l'index " + nPos + " suivant JavaScript.</p>";
}
/**
* Permet de retrouver la dernière position d'un élément dans un tableau
*/
function getLastPosition()
{
var nPos = dojo.lastIndexOf(tableau, "Alice");
dojo.byId("result").innerHTML= "<p>Alice apparaît pour la dernière fois à la position " + (nPos + 1) + ". Donc l'index " + nPos + " suivant JavaScript.</p>";
}
/**
* Mise en forme d'un tableau sous forme de liste numérotée.
*/
function showArray()
{
dojo.forEach(tableau, function(item, i){// parcoure le tableau et appelle la fonction
var li = dojo.doc.createElement("li");
li.innerHTML = i + 1 + ". " + item;
dojo.byId("forEach-items").appendChild(li);// ajoute les éléments du tableau dans la liste
});
}
/**
* Filtre le contenu d'un tableau
*/
function filterArray()
{
var tableau_filtre = dojo.filter(tableau, function(item) {
return item == "Alice";
});
dojo.forEach(tableau_filtre, function(item, i) {
var li = dojo.doc.createElement("li");
li.innerHTML = i + 1 + ". " + item;
dojo.byId("array-filter").appendChild(li);// ajoute les éléments du tableau dans la liste
});
}
</script>
<style type="text/css">
body{
font-family: Arial;
}
div { width: 550px;
border: 1px solid black;
background-color: #26C4EC;
text-align: center;
margin-top: 25px;}
#text { width: 350px;
height: 90px;
background-color: #BBD2E1;
border: 3px solid #0000FF;
padding: 5px;}
.style1 { width: 380px;
background-color: #23D2Ef;
color: #DF0101;}
.style2 { border: 10px solid #ffC423;
font-size: 24px;}
.style3 { padding: 20px;
font-style: italic}
</style>
</head>
<body class="claro">
<header>
<span>Developpement Facile</span>
</header>
<button type="button" id="btn1" onclick="isArray(this.value)" value="2933">btn = 2933;</button>
<button type="button" id="btn2" onclick="isArray(this.value)" value="array">btn = ['a', 'b', 'c'];</button>
<div id="infos" class="style2">Cliquez sur un bouton pour en tester sa valeur.</div>
<div id="result" class="style1">Voici le résultat!</div>
<div>
Le tableau (array) comporte les personnes suivantes :<br />
- Amandine<br />
- Gwen<br />
- Alice<br />
- Christelle<br />
- Delphine<br />
- Alice<br />
- Marine
</div>
<br />
<button id="btn3" onClick="getPosition()" type="button">Première Position d'Alice ?</button>
<button id="btn4" onClick="getLastPosition()" type="button">Dernière Position d'Alice ?</button>
<button id="btn5" onClick="showArray()" type="button">Mise en forme du tableau Array</button>
<button id="btn5" onClick="filterArray()" type="button">Filtrer le tableau Array</button>
<ul id="forEach-items"><li></li></ul>
<ul id="array-filter"><li></li></ul>
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
VI. Comment utiliser la puissance des tableaux array avec le framework Dojo – partie 2▲
Dans cette vidéo, complétez vos connaissances sur la manipulation des tableaux avec Dojo.
Ci-dessous, l'exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
-->
<title>HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="dojo-release-1.9.3/dojo/dijit/themes/claro/claro.css" />
<script src="dojo-release-1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
var tableau = ["Amandine", "Gwen", "Alice", "Christelle","Delphine", "Alice", "Marine"];
var tableau_chiffres = [33, 1433, 1788, 1269, 365, 28, 3328];
/**
* A la fin du chargement de la page.
* @return {[type]} [description]
*/
dojo.addOnLoad(function()
{
this.initData();
});
/**
* Init des datas de la page
*
*/
function initData()
{
// Création du tableau initial
dojo.forEach(tableau, function(item, i)
{
console.log("forEach lancé");
var li = dojo.doc.createElement("li");
li.innerHTML = item;
dojo.byId("array_start").appendChild(li);
});
// création du tableau des nombres
dojo.forEach(tableau_chiffres, function(item, i)
{
var li = dojo.doc.createElement("li");
li.innerHTML = item;
dojo.byId("div_nbre").appendChild(li);
});
}
/**
* Mets à jour tous les éléments d'un tableau
*
*/
function useMap()
{
var tableau_map = dojo.map(tableau, function(item)
{
return item + " Yesss";// modifie tous les éléments du tableau
});
dojo.forEach(tableau_map, function(item, i)
{
var li = dojo.doc.createElement("li");
li.innerHTML = item;
dojo.byId("array_end").appendChild(li);
});
}
/**
* Vérifie le contenu du tableau
* @return {[type]} [description]
*/
function testContentArray(sTypeTest)
{
console.log("sTypeTest : "+sTypeTest);
if( sTypeTest == "sup")
{
console.log("if sup -> "+sTypeTest);
// est-ce qu'il y a des valeurs supérieures ou égales à 800
if ( dojo.some(tableau_chiffres, function(item){
return item >= 800;}) )
{// oui true
alert("Oui, des valeurs du tableau sont supérieures ou égales à 800");
}
else
{
alert("Non, toutes les valeurs du tableau sont inférieures à 800");
}
}
else if( sTypeTest == "inf")
{
console.log("if inf -> "+sTypeTest);
// est-ce qu'il y a des valeurs inférieures à 800
if ( dojo.every(tableau_chiffres, function(item){
return item >= 800;}) )
{// oui true
alert("Non, toutes les valeurs du tableau sont supérieures ou égales à 800");
}
else
{// false
alert("Oui, des valeurs du tableau sont inférieures à 800");
}
}
}
</script>
<style type="text/css">
body{
font-family: Arial;
}
div { width: 150px;
border: 1px solid black;
background-color: #26C4EC;
text-align: center;
float : left;
margin-top: 25px;}
ul { list-style-type: none;
padding: 0px;}
button { margin-right: 30px;}
</style>
</head>
<body class="claro">
<header>
<span>Developpement Facile</span>
</header>
<br /><br />
Liste de départ
<ul id="array_start"></ul>
<button type="button" onClick="useMap()" style="float: left;">Modifier la liste</button>
<br /><br />
Liste modifiée<br />
<ul id="array_end"></ul>
<button type="button" onClick="testContentArray('sup')" style="float: left;">Des nombres >= 800 ?</button>
<button type="button" onClick="testContentArray('inf')" style="float: left;">Des nombres < 800 ?</button>
<br /><br />
Tableau des nombres
<ul id="div_nbre"></ul>
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
VII. Recevez gratuitement la formation "Dojo Facile"▲
Si vous souhaitez aller plus loin dans la création de sites Web incroyables,
vous pouvez recevoir gratuitement la formation "Dojo Facile" avec des cours pas à pas, accompagnés de codes source commentés.
Ainsi, vous progressez à votre rythme, avec un suivi personnalisé et individuel. Vous avez la possibilité de poser toutes vos questions techniques à la fin de chaque cours.
Vous allez ainsi découvrir comment utiliser le framework Dojo pour développer rapidement et efficacement vos applications Web pour un rendu incroyable. 
Cliquez simplement ici pour recevoir gratuitement la formation "Dojo Facile" !Cliquez simplement ici pour recevoir gratuitement la Formation Dojo Facile !
VIII. Remerciements▲
Merci beaucoup à l'équipe de rédaction de Developpez.com de contribuer à la diffusion de ce tutoriel.
J'adresse également un merci tout particulier à Jacques Jeanjacques_jean pour sa relecture orthographique.
