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. Comment le framework JavaScript Dojo peut littéralement décupler vos applications Web▲
Dans cette vidéo, découvrez une présentation du framework Dojo pour JavaScript. Comment le télécharger, l'installer et l'utiliser.
Ci-dessous, un premier exemple de code.
<!
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/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
"
);
dojo.
require
("
dijit/form/Button
"
);
dojo.
require
("
dojo/domReady!
"
);
dojo.
require
("
dijit/form/DateTextBox
"
);
dojo.
require
("
dijit/form/ToggleButton
"
);
dojo.
require
("
dijit/form/ComboButton
"
);
dojo.
require
("
dijit/Menu
"
);
/*
*
*
A
la
fin
du
chargement
de
la
page.
*
@return
{[type]}
[description]
*/
dojo.
addOnLoad
(function
()
{
console.
log
("
page
chargée
"
);
require
([
"
dijit/form/Button
"
,
"
dojo/domReady!
"
]
,
function
(Button)
{
var
button =
new
Button
({
label
: "
Cliquez
ici
!
"
,
onClick
: function
(){
console.
log
("
Clic
sur
le
1er
bouton!
"
);
}
}
,
"
btn
"
);
button.
startup
();
}
);
require
([
"
dijit/form/Button
"
,
"
dojo/domReady!
"
]
,
function
(Button)
{
var
button2 =
new
Button
({
iconClass
:"
dijitIconNewTask
"
,
showLabel
:false
,
label
: "
Clic
ici
!
"
,
onClick
: function
(){
console.
log
("
Clic
sur
le
2e
bouton!
"
);
}
}
,
"
btn2
"
);
button2.
startup
();
}
);
require
([
"
dijit/form/ToggleButton
"
,
"
dijit/form/ComboButton
"
,
"
dijit/Menu
"
,
"
dijit/MenuItem
"
,
"
dijit/form/DropDownButton
"
,
"
dijit/TooltipDialog
"
]
,
function
(ToggleButton,
ComboButton,
Menu,
MenuItem)
{
var
toggleButton =
new
ToggleButton
({
iconClass
: "
dijitCheckBoxIcon
"
,
label
: "
Bouton
à
cocher
!
"
,
checked
: true
}
,
"
toggle
"
);
toggleButton.
startup
();
var
menu =
new
Menu
({
id
: "
saveMenu
"
}
);
var
menuItem1 =
new
MenuItem
({
label
: "
Enregistrer
"
,
iconClass
: "
dijitEditorIcon
dijitEditorIconSave
"
,
onClick
: function
() {
console.
log
("
Enregistrer
"
);
}
}
);
var
menuItem2 =
new
MenuItem
({
label
: "
Enregistrer
Sous
"
,
onClick
: function
() {
console.
log
("
Enregistrer
Sous
"
);
}
}
);
menu.
addChild
(menuItem1);
menu.
addChild
(menuItem2);
var
comboButton =
new
ComboButton
({
optionsTitle
: "
Save
Options
"
,
iconClass
: "
dijitIconFile
"
,
label
: "
Combo
"
,
dropDown
: menu,
onClick
:function
(){
console.
log
("
Clicked
ComboButton
"
);
}
}
,
"
combo
"
);
comboButton.
startup
();
menu.
startup
();
}
);
}
);
</script>
<style
type="text/
css">
body{
font-family
:
Arial;
}
</style>
<
/
head>
<
body
class=
"
claro
"
>
<
header>
<
span>
Developpement Facile<
/
span>
<
/
header>
<
br
/
>
<
br
/
>
<
h1
id=
"
greeting
"
>
Bonjour tout le monde !<
/
h1>
<
div>
<
button
id=
"
btn
"
>
<
/
button>
<
button
id=
"
btn2
"
>
<
/
button>
<
label
for=
"
date
"
>
Choisissez votre date :<
/
label>
<
input
id=
"
date
"
value=
"
2014-05-16
"
data-dojo-type=
"
dijit/form/DateTextBox
"
>
<
button
id=
"
toggle
"
>
<
/
button>
<
button
id=
"
combo
"
>
<
/
button>
<
/
div>
<
br
/
>
<
br
/
>
<
footer>
<
hr>
<
p>
Copyright www.Developpement-Facile.com 2014<
/
p>
<
/
footer>
<
/
body>
<
/
html>
III. Installation et utilisation des thèmes graphiques du framework Dojo▲
Dans cette vidéo, découvrez comment installer et utiliser des thèmes graphiques avec Dojo. Dojo propose de base quatre thèmes graphiques.
Ci-dessous, l'exemple du thème nihilo.
<!
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/dijit/themes/nihilo/nihilo.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
"
);
dojo.
require
("
dijit/form/Button
"
);
dojo.
require
("
dojo/domReady!
"
);
dojo.
require
("
dijit/form/DateTextBox
"
);
dojo.
require
("
dijit/form/ToggleButton
"
);
dojo.
require
("
dijit/form/ComboButton
"
);
dojo.
require
("
dijit/Menu
"
);
/*
*
*
A
la
fin
du
chargement
de
la
page.
*
@return
{[type]}
[description]
*/
dojo.
addOnLoad
(function
()
{
console.
log
("
page
chargée
"
);
require
([
"
dijit/form/Button
"
,
"
dojo/domReady!
"
]
,
function
(Button)
{
var
button =
new
Button
({
label
: "
Cliquez
ici
!
"
,
onClick
: function
(){
console.
log
("
Clic
sur
le
1er
bouton!
"
);
}
}
,
"
btn
"
);
button.
startup
();
}
);
require
([
"
dijit/form/Button
"
,
"
dojo/domReady!
"
]
,
function
(Button)
{
var
button2 =
new
Button
({
iconClass
:"
dijitIconNewTask
"
,
showLabel
:false
,
label
: "
Clic
ici
!
"
,
onClick
: function
(){
console.
log
("
Clic
sur
le
2e
bouton!
"
);
}
}
,
"
btn2
"
);
button2.
startup
();
}
);
require
([
"
dijit/form/ToggleButton
"
,
"
dijit/form/ComboButton
"
,
"
dijit/Menu
"
,
"
dijit/MenuItem
"
,
"
dijit/form/DropDownButton
"
,
"
dijit/TooltipDialog
"
]
,
function
(ToggleButton,
ComboButton,
Menu,
MenuItem)
{
var
toggleButton =
new
ToggleButton
({
iconClass
: "
dijitCheckBoxIcon
"
,
label
: "
Bouton
à
cocher
!
"
,
checked
: true
}
,
"
toggle
"
);
toggleButton.
startup
();
var
menu =
new
Menu
({
id
: "
saveMenu
"
}
);
var
menuItem1 =
new
MenuItem
({
label
: "
Enregistrer
"
,
iconClass
: "
dijitEditorIcon
dijitEditorIconSave
"
,
onClick
: function
() {
console.
log
("
Enregistrer
"
);
}
}
);
var
menuItem2 =
new
MenuItem
({
label
: "
Enregistrer
Sous
"
,
onClick
: function
() {
console.
log
("
Enregistrer
Sous
"
);
}
}
);
menu.
addChild
(menuItem1);
menu.
addChild
(menuItem2);
var
comboButton =
new
ComboButton
({
optionsTitle
: "
Save
Options
"
,
iconClass
: "
dijitIconFile
"
,
label
: "
Combo
"
,
dropDown
: menu,
onClick
:function
(){
console.
log
("
Clicked
ComboButton
"
);
}
}
,
"
combo
"
);
comboButton.
startup
();
menu.
startup
();
}
);
}
);
</script>
<style
type="text/
css">
body{
font-family
:
Arial;
}
</style>
<
/
head>
<
body
class=
"
nihilo
"
>
<
header>
<
span>
Developpement Facile<
/
span>
<
/
header>
<
br
/
>
<
br
/
>
<
h1
id=
"
greeting
"
>
Bonjour tout le monde !<
/
h1>
<
div>
<
button
id=
"
btn
"
>
<
/
button>
<
button
id=
"
btn2
"
>
<
/
button>
<
label
for=
"
date
"
>
Choisissez votre date :<
/
label>
<
input
id=
"
date
"
value=
"
2014-05-16
"
data-dojo-type=
"
dijit/form/DateTextBox
"
>
<
button
id=
"
toggle
"
>
<
/
button>
<
button
id=
"
combo
"
>
<
/
button>
<
/
div>
<
br
/
>
<
br
/
>
<
footer>
<
hr>
<
p>
Copyright www.Developpement-Facile.com 2014<
/
p>
<
/
footer>
<
/
body>
<
/
html>
L'exemple du thème soria.
<!
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/dijit/themes/soria/soria.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
"
);
dojo.
require
("
dijit/form/Button
"
);
dojo.
require
("
dojo/domReady!
"
);
dojo.
require
("
dijit/form/DateTextBox
"
);
dojo.
require
("
dijit/form/ToggleButton
"
);
dojo.
require
("
dijit/form/ComboButton
"
);
dojo.
require
("
dijit/Menu
"
);
/*
*
*
A
la
fin
du
chargement
de
la
page.
*
@return
{[type]}
[description]
*/
dojo.
addOnLoad
(function
()
{
console.
log
("
page
chargée
"
);
require
([
"
dijit/form/Button
"
,
"
dojo/domReady!
"
]
,
function
(Button)
{
var
button =
new
Button
({
label
: "
Cliquez
ici
!
"
,
onClick
: function
(){
console.
log
("
Clic
sur
le
1er
bouton!
"
);
}
}
,
"
btn
"
);
button.
startup
();
}
);
require
([
"
dijit/form/Button
"
,
"
dojo/domReady!
"
]
,
function
(Button)
{
var
button2 =
new
Button
({
iconClass
:"
dijitIconNewTask
"
,
showLabel
:false
,
label
: "
Clic
ici
!
"
,
onClick
: function
(){
console.
log
("
Clic
sur
le
2e
bouton!
"
);
}
}
,
"
btn2
"
);
button2.
startup
();
}
);
require
([
"
dijit/form/ToggleButton
"
,
"
dijit/form/ComboButton
"
,
"
dijit/Menu
"
,
"
dijit/MenuItem
"
,
"
dijit/form/DropDownButton
"
,
"
dijit/TooltipDialog
"
]
,
function
(ToggleButton,
ComboButton,
Menu,
MenuItem)
{
var
toggleButton =
new
ToggleButton
({
iconClass
: "
dijitCheckBoxIcon
"
,
label
: "
Bouton
à
cocher
!
"
,
checked
: true
}
,
"
toggle
"
);
toggleButton.
startup
();
var
menu =
new
Menu
({
id
: "
saveMenu
"
}
);
var
menuItem1 =
new
MenuItem
({
label
: "
Enregistrer
"
,
iconClass
: "
dijitEditorIcon
dijitEditorIconSave
"
,
onClick
: function
() {
console.
log
("
Enregistrer
"
);
}
}
);
var
menuItem2 =
new
MenuItem
({
label
: "
Enregistrer
Sous
"
,
onClick
: function
() {
console.
log
("
Enregistrer
Sous
"
);
}
}
);
menu.
addChild
(menuItem1);
menu.
addChild
(menuItem2);
var
comboButton =
new
ComboButton
({
optionsTitle
: "
Save
Options
"
,
iconClass
: "
dijitIconFile
"
,
label
: "
Combo
"
,
dropDown
: menu,
onClick
:function
(){
console.
log
("
Clicked
ComboButton
"
);
}
}
,
"
combo
"
);
comboButton.
startup
();
menu.
startup
();
}
);
}
);
</script>
<style
type="text/
css">
body{
font-family
:
Arial;
}
</style>
<
/
head>
<
body
class=
"
soria
"
>
<
header>
<
span>
Developpement Facile<
/
span>
<
/
header>
<
br
/
>
<
br
/
>
<
h1
id=
"
greeting
"
>
Bonjour tout le monde !<
/
h1>
<
div>
<
button
id=
"
btn
"
>
<
/
button>
<
button
id=
"
btn2
"
>
<
/
button>
<
label
for=
"
date
"
>
Choisissez votre date :<
/
label>
<
input
id=
"
date
"
value=
"
2014-05-16
"
data-dojo-type=
"
dijit/form/DateTextBox
"
>
<
button
id=
"
toggle
"
>
<
/
button>
<
button
id=
"
combo
"
>
<
/
button>
<
/
div>
<
br
/
>
<
br
/
>
<
footer>
<
hr>
<
p>
Copyright www.Developpement-Facile.com 2014<
/
p>
<
/
footer>
<
/
body>
<
/
html>
Et l'exemple du thème tundra.
<!
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)
:
*/
-->
<
title>
HTML5<
/
title>
<
meta
charset
=
"
UTF-8
"
>
<
link
rel=
"
stylesheet
"
href=
"
dojo-release-1.9.3/dijit/themes/tundra/tundra.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
"
);
dojo.
require
("
dijit/form/Button
"
);
dojo.
require
("
dojo/domReady!
"
);
dojo.
require
("
dijit/form/DateTextBox
"
);
dojo.
require
("
dijit/form/ToggleButton
"
);
dojo.
require
("
dijit/form/ComboButton
"
);
dojo.
require
("
dijit/Menu
"
);
/*
*
*
A
la
fin
du
chargement
de
la
page.
*
@return
{[type]}
[description]
*/
dojo.
addOnLoad
(function
()
{
console.
log
("
page
chargée
"
);
require
([
"
dijit/form/Button
"
,
"
dojo/domReady!
"
]
,
function
(Button)
{
var
button =
new
Button
({
label
: "
Cliquez
ici
!
"
,
onClick
: function
(){
console.
log
("
Clic
sur
le
1er
bouton!
"
);
}
}
,
"
btn
"
);
button.
startup
();
}
);
require
([
"
dijit/form/Button
"
,
"
dojo/domReady!
"
]
,
function
(Button)
{
var
button2 =
new
Button
({
iconClass
:"
dijitIconNewTask
"
,
showLabel
:false
,
label
: "
Clic
ici
!
"
,
onClick
: function
(){
console.
log
("
Clic
sur
le
2e
bouton!
"
);
}
}
,
"
btn2
"
);
button2.
startup
();
}
);
require
([
"
dijit/form/ToggleButton
"
,
"
dijit/form/ComboButton
"
,
"
dijit/Menu
"
,
"
dijit/MenuItem
"
,
"
dijit/form/DropDownButton
"
,
"
dijit/TooltipDialog
"
]
,
function
(ToggleButton,
ComboButton,
Menu,
MenuItem)
{
var
toggleButton =
new
ToggleButton
({
iconClass
: "
dijitCheckBoxIcon
"
,
label
: "
Bouton
à
cocher
!
"
,
checked
: true
}
,
"
toggle
"
);
toggleButton.
startup
();
var
menu =
new
Menu
({
id
: "
saveMenu
"
}
);
var
menuItem1 =
new
MenuItem
({
label
: "
Enregistrer
"
,
iconClass
: "
dijitEditorIcon
dijitEditorIconSave
"
,
onClick
: function
() {
console.
log
("
Enregistrer
"
);
}
}
);
var
menuItem2 =
new
MenuItem
({
label
: "
Enregistrer
Sous
"
,
onClick
: function
() {
console.
log
("
Enregistrer
Sous
"
);
}
}
);
menu.
addChild
(menuItem1);
menu.
addChild
(menuItem2);
var
comboButton =
new
ComboButton
({
optionsTitle
: "
Save
Options
"
,
iconClass
: "
dijitIconFile
"
,
label
: "
Combo
"
,
dropDown
: menu,
onClick
:function
(){
console.
log
("
Clicked
ComboButton
"
);
}
}
,
"
combo
"
);
comboButton.
startup
();
menu.
startup
();
}
);
}
);
</script>
<style
type="text/
css">
body{
font-family
:
Arial;
}
</style>
<
/
head>
<
body
class=
"
tundra
"
>
<
header>
<
span>
Developpement Facile<
/
span>
<
/
header>
<
br
/
>
<
br
/
>
<
h1
id=
"
greeting
"
>
Bonjour tout le monde !<
/
h1>
<
div>
<
button
id=
"
btn
"
>
<
/
button>
<
button
id=
"
btn2
"
>
<
/
button>
<
label
for=
"
date
"
>
Choisissez votre date :<
/
label>
<
input
id=
"
date
"
value=
"
2014-05-16
"
data-dojo-type=
"
dijit/form/DateTextBox
"
>
<
button
id=
"
toggle
"
>
<
/
button>
<
button
id=
"
combo
"
>
<
/
button>
<
/
div>
<
br
/
>
<
br
/
>
<
footer>
<
hr>
<
p>
Copyright www.Developpement-Facile.com 2014<
/
p>
<
/
footer>
<
/
body>
<
/
html>
IV. Votre première application avec le framework Dojo en trois lignes de code▲
On rentre dans le vif du sujet avec cette vidéo, où vous allez apprendre à vous servir de Dojo.
Ici votre première application en trois lignes de code.
Ci-dessous, l'exemple de code.
<!
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)
:
*/
-->
<
title>
HTML5<
/
title>
<
meta
charset
=
"
UTF-8
"
>
<
link
rel=
"
stylesheet
"
href=
"
dojo-release-1.9.3/dijit/themes/soria/soria.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
"
);
dojo.
require
("
dijit.form.DateTextBox
"
);
/*
*
*
A
la
fin
du
chargement
de
la
page.
*
@return
{[type]}
[description]
*/
dojo.
addOnLoad
(function
()
{
console.
log
("
page
chargée
"
);
}
);
</script>
<style
type="text/
css">
body{
font-family
:
Arial;
}
</style>
<
/
head>
<
body
class=
"
soria
"
>
<
header>
<
span>
Developpement Facile<
/
span>
<
/
header>
<
br
/
>
<
br
/
>
<
h1
id=
"
greeting
"
>
Bonjour tout le monde !<
/
h1>
<
div>
<
form>
<
p>
Choisissez votre date de depart :
<
input
type=
"
text
"
dojoType=
"
dijit.form.DateTextBox
"
value=
"
2014-05-16
"
style=
"
width:160px
"
>
<
/
p>
<
/
form>
<
/
div>
<
br
/
>
<
br
/
>
<
footer>
<
hr>
<
p>
Copyright www.Developpement-Facile.com 2014<
/
p>
<
/
footer>
<
/
body>
<
/
html>
V. Les fonctions essentielles du framework Dojo▲
Dans cette vidéo, apprenez à :
- configurer Dojo;
- appeler et charger des modules;
- debugger avec Dojo.
Ci-dessous, l'exemple de code.
<!
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)
:
*/
-->
<
title>
HTML5<
/
title>
<
meta
charset
=
"
UTF-8
"
>
<
link
rel=
"
stylesheet
"
href=
"
dojo-release-1.9.3/dijit/themes/soria/soria.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
"
);
dojo.
require
("
dijit.form.DateTextBox
"
);
dojo.
require
("
dijit/form/Button
"
);
/*
*
*
A
la
fin
du
chargement
de
la
page.
*
@return
{[type]}
[description]
*/
dojo.
addOnLoad
(function
()
{
console.
log
("
page
chargée
"
);
require
([
"
dijit/form/Button
"
,
"
dojo/domReady!
"
]
,
function
(Button)
{
var
button =
new
Button
({
label
: "
Cliquez
ici
!
"
,
onClick
: function
(){
console.
log
("
Clic
sur
le
1er
bouton!
"
);
}
}
,
"
btn
"
);
button.
startup
();
}
);
require
([
"
dijit/form/Button
"
,
"
dojo/domReady!
"
]
,
function
(Button)
{
var
button2 =
new
Button
({
iconClass
:"
dijitIconNewTask
"
,
showLabel
:false
,
label
: "
Clic
ici
!
"
,
onClick
: function
(){
console.
log
("
Clic
sur
le
2e
bouton!
"
);
}
}
,
"
btn2
"
);
button2.
startup
();
}
);
}
);
</script>
<style
type="text/
css">
body{
font-family
:
Arial;
}
</style>
<
/
head>
<
body
class=
"
soria
"
>
<
header>
<
span>
Developpement Facile<
/
span>
<
/
header>
<
br
/
>
<
br
/
>
<
h1
id=
"
greeting
"
>
Bonjour tout le monde !<
/
h1>
<
div>
<
form>
<
p>
Choisissez votre date de départ :
<
input
type=
"
text
"
dojoType=
"
dijit.form.DateTextBox
"
style=
"
width:120px
"
>
<
button
id=
"
btn
"
>
<
/
button>
<
button
id=
"
btn2
"
>
<
/
button>
<
/
p>
<
/
form>
<
/
div>
<
br
/
>
<
br
/
>
<
footer>
<
hr>
<
p>
Copyright www.Developpement-Facile.com 2014<
/
p>
<
/
footer>
<
/
body>
<
/
html>
VI. Comment sélectionner les éléments du DOM avec le framework Dojo▲
Apprenez, dans la vidéo suivante, à sélectionner un ou plusieurs éléments du DOM avec Dojo.
Ci-dessous l'exemple de code.
<!
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)
:
*/
-->
<
title>
HTML5<
/
title>
<
meta
charset
=
"
UTF-8
"
>
<
link
rel=
"
stylesheet
"
href=
"
dojo-release-1.9.3/dijit/themes/soria/soria.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
"
);
/*
*
*
A
la
fin
du
chargement
de
la
page.
*
@return
{[type]}
[description]
*/
dojo.
addOnLoad
(function
()
{
console.
log
("
page
chargée
"
);
//
modifier
le
texte
de
la
div
identifiée
M2
et
son
style
dojo.
byId
("
M2
"
).
innerHTML =
"
Bloc
sélectionné
"
;
dojo.
style
("
M2
"
,
{
"
backgroundColor
"
:
"
#819FF7
"
}
);
//
sélectionne
les
éléments
impairs
de
la
liste
à
puces
dojo.
query
("
ul
:nth-child(odd)
"
).
style
("
backgroundColor
"
,
"
#5FB404
"
);
//
sélectionne
les
éléments
avec
l'attribut
name
dont
la
valeur
comporte
_this.
dojo.
query
('
div[name*="_this"]
'
).
style
("
backgroundColor
"
,
"
#FF4000
"
);
}
);
</script>
<style
type="text/
css">
body{
font-family
:
Arial;
}
div{
width
:
250px
;
height
:
20px
;
margin
:
5px
;
}
</style>
<
/
head>
<
body
class=
"
soria
"
>
<
header>
<
span>
Developpement Facile<
/
span>
<
/
header>
<
br
/
>
<
br
/
>
<
div
id=
"
M1
"
>
Module 1<
/
div>
<
div
id=
"
M2
"
>
Module 2<
/
div>
<
div
id=
"
M3
"
>
Module 3<
/
div>
<
ul>
<
li>
Module 1<
/
li>
<
li>
Module 2<
/
li>
<
li>
Module 3<
/
li>
<
li>
Module 4<
/
li>
<
li>
Module 5<
/
li>
<
li>
Module Bonus<
/
li>
<
/
ul>
<
div
name=
"
tit_thisle
"
>
Lorem ipsum dolor _this sit amet<
/
div>
<
div
name=
"
fisrt
"
>
Lorem ipsum dolor sit amet<
/
div>
<
div
name=
"
other_this
"
>
Lorem ipsum dolor sit amet_this<
/
div>
<
div
name=
"
_thisnew
"
>
_thisLorem ipsum dolor sit amet<
/
div>
<
div
name=
"
last
"
>
Lorem ipsum dolor sit amet<
/
div>
<
br
/
>
<
br
/
>
<
footer>
<
hr>
<
p>
Copyright www.Developpement-Facile.com 2014<
/
p>
<
/
footer>
<
/
body>
<
/
html>
VIII. 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 !
VII. 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.