Exercice 1 - Compteur de Clics

Admin Messages : 15 Date d'inscription : 19/09/2018

Explication pour comment réutiliser les codes.

]Une fois le code trouvé, il vous faudra créer une page HTML. Pour y accéder, il suffit d'aller dans le panneau d'administration, dans la section module. Puis sur le menu de gauche, en tout dernier, vous avez le choix de gestion de page HTML et Javascript. Sélectionner HTML. Puis, cliquez sur l'engrenage nommé «Gestion avancé (HTML)». Copié-collé le code voulu et sauvegarder. Ensuite, quand vous voudrez afficher le code, il vous faudra copier le lien ci-dessous en remplaçant les valeurs (expliqué).

Code:: <iframe src="URLDULIEN" frameborder="0" scrolling="no" style="width:100%;height:100%;"></iframe>

Pour avoir l'URL de votre lien, il vous faudra regarder dans la gestion des pages. Vous remarquerez qu'il y a une section à ce nom. Copier ce mot et tadaaaam

Admin Messages : 15 Date d'inscription : 19/09/2018

Code:: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cliqueur</title>
</head>
<body>

<button id="bouton">Cliques !</button>
<p id="Para1"> </p>

<script>
//*******************
// Déclaration d'objet(s)
//*******************
var compteur=
{
//attributs
cpt: 0,

//méthodes
augmenter:
function()
{
this.cpt = this.cpt + 1;
document.getElementById("Para1").innerHTML = this.cpt;
}
}

//*******************
// Écouteurs d'événements
//*******************
document.getElementById("bouton").addEventListener("click", function(){ compteur.augmenter(); });

</script>

</body>
</html>

Admin Messages : 15 Date d'inscription : 19/09/2018

Code:: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cliqueur</title>
</head>
<body>

<button id="bouton">Cliques !</button>
<p id="para1"> </p>

<script>
//*******************
// Déclaration d'objet(s)
//*******************
var compteur=
{
//attributs
cpt: 0,

//méthodes
augmenter:
function()
{
this.cpt=this.cpt + 1;
{
if (this.cpt == 5)
{
document.getElementById("para1").innerHTML = "On se calme !";
}
}

}
}

//*******************
// Écouteurs d'événements
//*******************
document.getElementById("bouton").addEventListener("click", function(){ compteur.augmenter(); });

</script>

</body>
</html>

Admin Messages : 15 Date d'inscription : 19/09/2018

Code:: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cliqueur</title>
</head>
<body>

<button id="bouton">Cliques !</button>
<p id="para1"> </p>

<script>
//*******************
// Déclaration d'objet(s)
//*******************
var compteur=
{
//attributs
cpt: 0,

//méthodes
augmenter:
function()
{
this.cpt=this.cpt+1 ;
{
if (this.cpt == 5)
{
document.getElementById("para1").innerHTML = "On se calme !" ;
}
else
{
document.getElementById("para1").innerHTML = "Nombre de clics : " + this.cpt ;
}
}
}
}

//*******************
// Écouteurs d'événements
//*******************
document.getElementById("bouton").addEventListener("click", function(){ compteur.augmenter(); });

</script>

</body>
</html>

Admin Messages : 15 Date d'inscription : 19/09/2018

Code:: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cliqueur</title>
</head>
<body>

<button id="bouton">Cliques !</button>
<p id="para1"> </p>
<p id="para2"> </p>

<script>
//*******************
// Déclaration d'objet(s)
//*******************
var compteur=
{
//attributs
cpt: 0,

//méthodes
augmenter:
function()
{
this.cpt=this.cpt+1;
document.getElementById("para1").innerHTML = "Nombre de clics : " + this.cpt ;
{
if (this.cpt ==10)
{
document.getElementById("para2").innerHTML = "Vous avez atteint dix clics !" ;
}
}
{
if (this.cpt ==20)
{
document.getElementById("para2").innerHTML = "Vous avez atteint vingt clics !" ;
}
}
}
}

//*******************
// Écouteurs d'événements
//*******************
document.getElementById("bouton").addEventListener("click", function(){ compteur.augmenter(); });

</script>

</body>
</html>

Admin Messages : 15 Date d'inscription : 19/09/2018

Code:: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cliqueur</title>
</head>
<body>

<button id="bouton">Cliques !</button>
<p id="para1"> </p>
<p id="para2"> </p>

<script>
//*******************
// Déclaration d'objet(s)
//*******************
var compteur=
{
//attributs
cpt: 0,

//méthodes
augmenter:
function()
{
this.cpt = this.cpt+1;
document.getElementById("para1").innerHTML = "Nombre de clics : " + this.cpt ;
{
if (this.cpt >=15 && this.cpt <=20)

if (this.cpt ==20)
{
document.getElementById("para2").innerHTML = "Vous avez atteint vingt clics !" ;
}
else
{
document.getElementById("para2").innerHTML = "Presque vingt !" ;
}
}
}
}

//*******************
// Écouteurs d'événements
//*******************
document.getElementById("bouton").addEventListener("click", function(){ compteur.augmenter(); });

</script>

</body>
</html>

Admin Messages : 15 Date d'inscription : 19/09/2018

Code:: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cliqueur</title>
</head>
<body>
<button id="bouton" onclick="counterHandler()">Cliques !</button>

<p id="para1"> </p>
<p id="para2"> </p>

<script>
//*******************
// Déclaration d'objet(s)
//*******************
var cpt = 0;
function counterHandler(){
http://this.cpt = this.cpt + 1;

this.cpt += 1;
document.getElementById("para1").innerHTML= "Nombre de clics : " + this.cpt.toString();

if (this.cpt == 3)
{
document.getElementById("para2").innerHTML= "Vous avez cliquez trois fois ! On recommence." ;
this.cpt = 0 ;
}
else
{
document.getElementById("para2").innerHTML= " " ;
}
}

</script>

</body>
</html>

» Exercice 2 - Compteur de taxe
» Exercice 4 - Exercice primaire (améliorer)
» Exercice 3 - Exercice de primaire