Salut, ce cours traite le relation entre HTML et JAVASCRIPT
Ce cours nécessite des notions en HTML et Javascript, si ces deux notions ne vous disent rien, alors je vous conseille de commencer par mon cours sur HTML et JAVASCRIPT.
Ici, nous allons faire pas mal des choses. Sans plus tarder, on y va!!!
Plus besoin de vous rappeler ce que c'est HTML moins encore Javascript car à ce stade, ils sont supposés connus par coeur.
STRUCTURE D'UNE PAGE HTML AVEC JAVASCRIPT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
</head>
<body>
<script tyep="text/javascript" >
//C'est ici que nous mettrons notre code Javascript
</script>
</body>
</html>
On a beau parlé, il est temps de mettre en pratique notre premier code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
</head>
<body>
<script tyep="text/javascript" >
alert("salut, comment vous allez?")
</script>
</body>
</html>
Ici, il suffit juste de recharger notre page web pour vous s'y afficher le message d'alerte "salut, comment vous allez?"
Nous pouvons modifier notre code de la manière ci-dessous mais le résultat reste le même
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
<style type="text/css">
button {
font-family: sans-serif;
border: none;
padding: 15px 30px;
font-size: 20px;
outline: none;
margin: 10px;
}
#btn {
background-color: rgb(23, 52, 89);
color: #f8f9f9;
box-shadow: .5px .5px 1px 2px #000000;
}
</style>
</head>
<body>
<button id="btn"> Clique-moi </button>
<script tyep="text/javascript" >
document.getElementById("btn").onclick = function() {
alert("salut, comment vous allez?")
}
</script>
</body>
</html>
Résultat :
Si tout marche bien, allons nous pouvons passer à l'étape suivante. Cette fois-ci nous allons essayer de faire une petite fonction qui
puisse nous permettre de changer le contenu de notre page en cliquant sur un bouton
Cette focntion, je l'appelle changeContenu
innerHTML est une propriété de tout élément HTML qui désigne le contenu qui se trouve entre la balise entrante et la balise fermante. Dans l'exemple ci-dessous, innerHTML a pour valeur "Bonjour tout le monde" On l'utilise pour lire pour insérer dynamiquement un contenu dans une page. Au-delà de l'insertion de texte simple, des différences peuvent apparaître dans son fonctionnement selon les navigateurs. Il a d'abord été implémenté dans Internet Explorer 5 puis repris par tous les navigateurs. Depuis HTML 5, il fait partie du standard et est maintenant une propriété de HTMLElement et HTMLDocument.
Le code va ressembler à ceci :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
</head>
<body>
<p id="change">Bonjour tout le monde </p>
<button onclick="changeContenu();">Je change le contenu </button>
<script tyep="text/javascript" >
function changeContenu(){
document.getElemntById("change").innerHTML="Je suis le nouveau contenu de la page";
}
</script>
</body>
</html>
Résultat :
Bonjour tout le monde
En effet, Le paragraphe contient au départ "Bonjour tout le monde", remplacé par "Je change le contenu" quand on clique sur le bouton.
Il est possible ainsi de remplacer le contenu de toute balise, et d'y insérer un code plus complexe qu'un texte avec des balises imbriquées.
Dans la démonstration, on insère une image dans la page en insérant une balise dans le code source, ou du code plus complexe.
Le onclick nous aide à démarrer la fonction définie
Essayons de modifier un tout petit peu notre code sans changer le mode d'affichage en mettant le code ci-dessous :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
</head>
<body>
<p id="demo">Bonjour tout le monde </p>
<button id="btn">Je change le contenu </button>
<script tyep="text/javascript" >
document.getElementById("btn").addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Je suis le nouveau contenu de la page";
});
</script>
</body>
</html>
Résultat :
Bonjour tout le monde
L'objectif était de chasser le onclick
Nous continuons. Cette fois-ci nous allons nous intéresser à la partie style. Notre deuxième focntion nous aidera à changer le style de notre texte.
Je l'appelle changestyles
Notre code va ressembler à ceci :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
</head>
<body>
<p id="change">Bonjour tout le monde </p>
<button onclick="changeStyles();">Je change le contenu </button>
<script tyep="text/javascript" >
function changeStyles(){
document.getElemntById("change").style.font-size = "20px";
document.getElemntById("change").style.fontStyle = "italic";
document.getElemntById("change").style.color = "gold";
}
</script>
</body>
</html>
Résultat :
Bonjour tout le monde!
Nous constatons que notre code fonctionne tout à fait bien.
Testons le codeci-dessous
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
<style type="text/css">
div {
height: 200px;
line-height: 200px;
color: white;
text-align: center;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div onclick="changeColor(this)" style="background-color: red;">
Clique-moi pour changer la couleur!
</div>
<script tyep="text/javascript" >
function changeColor(element) {
var currentColor = element.style.backgroundColor;
if(currentColor == "red") {
element.style.backgroundColor = "green";
} else {
element.style.backgroundColor = "red";
}
}
</script>
</body>
</html>
Résultat :
UN PEU DE PRATIQUES
Utilisation de Console
Prenons l'exemple ci-dessous
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
<style type="text/css">
</style>
</head>
<body>
<script tyep="text/javascript" >
var x = 5;
var y = 5;
var sum = x+y;
console.log(sum);
</script>
</body>
</html>
Utilisation de Dialog Boxes
Prenons l'exemple ci-dessous
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
<style type="text/css">
</style>
</head>
<body>
<button onclick="sum();" type="button" style="width:30%;">
Clique-moi!
</button>
<script tyep="text/javascript" >
function sum(){
var x = 5;
var y = 5;
var sum = x+y;
alert(sum);
}
</script>
</body>
</html>
Résultat :
Utilisation de document
Supposons maintenant qu'on veuille afficher notre résultat sur la même page HTMl. Qu'allons-nous faire?
La solution est très simple. Nous allons tout simplement récourir à une des méthodes déjà étudiées précédemment.
Notre code va ressembler à ceci :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
<style type="text/css">
</style>
</head>
<body>
<p> id="demo"</p>
<button onclick="myFunc" type="button" style="width:30%;">
Clique-moi!
</button>
<script tyep="text/javascript" >
function{
var x = 5;
var y = 5;
var sum = x+y;
document.getElementById("demo").innerHTML = sum;
}
</script>
</body>
</html>
résultat :
Utilisation de document.write
Supposons maintenant qu'on veuille afficher notre résultat sur une autre page HTMl. Qu'allons-nous faire?
La solution est très simple. Nous allons tout simplement récourir à une des méthodes déjà étudiées précédemment.
Notre code va ressembler à ceci :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
<style type="text/css">
</style>
</head>
<body>
<p> id="demo"</p>
<button onclick="myFunc" type="button" style="width:30%;">
Clique-moi!
</button>
<script tyep="text/javascript" >
function myFunc(){
var x = 5;
var y = 5;
var sum = x+y;
document.write(sum);
}
</script>
</body>
</html>
résultat :
Vous pouvez tester ce petit code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
<style type="text/css">
</style>
</head>
<body>
<script tyep="text/javascript" >
var num = 5;
document.write(num);
</script>
</body>
</html>
Il en est de même pour le produit de deux nombres. Regardons cet exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
<style type="text/css">
</style>
</head>
<body>
<p> id="demo"</p>
<button onclick="myFunc" type="button" style="width:30%;">
Clique-moi!
</button>
<script tyep="text/javascript" >
function myFunc(){
var x = 5;
var y = 5;
var sum = x+y;
var product = x*y;
document.getElementById("demo").innerHTML = product;
}
</script>
</body>
</html>
Dans l'exemple ci-dessus, nous verrons apparaître sur notre écran la valeur de product.
Je vous laisse tester!!!
Résolution d'une équation du premier degré avec Javascript
Bon, je tiens à rappeler que nous n'allons pas faire les maths ici histoire de ne pas léser certains. Mais nous exploiterons tout simplement les notions de mathématique pour la résolution de notre problème. Et d'ailleurs ce sont de notions très simple et presque connues de tous.
Si vous avez des difficultés ou encore besoin d'apprendre les mathématiques, je vous invite vivement à aller suivre
mes cours de mathématique en cliquant ici. Je suis sûr que cela pourra vous aider pour la suite de ce tutoriel et pour les notions avancées que nous allons apprendre.
Pourquoi je le dis? Bah, justement parce que hormis d'autres notions que nous allons apprendre, nous étudierons aussi la résolution de l'équation du second degré et même du troisième degré tel qu'ils se trouvent au niveau du solveur toujours avec Javascript
On sait qu'une équation du premier degré se présente sous la forme : \(ax+b=0\). Résoudre une telle équation, revient à trouver la valeur de \(x\)
tel qu'en faisant \(a\times x+b\), cette somme donne \(0\).
Déjà en regardant l'équation \(ax+b=0\), nous pouvons facilement trouver la valeur de \(x\).
Nous ferons : \(ax+b=0\iff ax=-b\iff x=\frac{-b}{a}\).
Et c'est tout. Nous avons résolu le problème en math.
Et en Informatique? Non. Utilisons Javascript pour cette affaire. Notre code ressemblera à ceci :
Je tiens à signaler que pour un premier temps, nous allons déjà attribuer des valeurs à \(a\ et \ b\). Ensuite, nous allons transformer notre
fonction pour permettre à l'utilisateur de saisir ses propres valeurs. C'est très simple.
Voici le code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
<style type="text/css">
</style>
</head>
<body>
<button onclick="equation_pd" type="button" style="width:30%;">
Clique-moi!
</button>
<script tyep="text/javascript" >
function equation_pd(){
var a = 5;
var b = 5;
var x = -b/a ;
alert("+x");
}
</script>
</body>
</html>
Résultat :
Oui. Tout es ok. Libre à vous de choisir le mode d'affichage du résultat. Je vous propose par exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
<style type="text/css">
</style>
</head>
<body>
<button onclick="equation_pd();" type="button" style="width:30%;">
Résolution
</button>
<script tyep="text/javascript" >
function equation_pd(){
var a = 5;
var b = 5;
var x = -b/a ;
document.write("+x");
}
</script>
</body>
</html>
Maintenant nous allons essayer de transformer notre fonction afin de pouvoir laisser la possibilité à l'utilisateur de saisir ses propres valeurs
Nous allons également utiliser une suite de conditions pour tester si les valeurs saisies par l'utilisateur sont correctes.
Voici notre code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
<style type="text/css">
</style>
</head>
<body>
<p class="lead text-center"> Saisir les coefficients de l'équation<br>
Si un coefficient manque dans votre équation, mettez 0</p>
<h1>Résolution d'une équation du premier degré ax+b=0>/h1>
<p>Entrez les valeurs de a et b :</p>
<label>a:</label>
<input type="number" id="a">
<br>
<label>b:</label>
<input type="number" id="b">
>br>
<button onclick="equaPremierDegre()">Résoudre</button>
<br>
<p id="resultat"></p>
<script>
function equaPremierDegre() {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
if (a == 0) {
document.getElementById("resultat").textContent = "L'équation n'admet pas de solution";
} else {
var x = -b / a;
if (b == 0) {
document.getElementById("resultat").textContent = "La solution de l'équation " + a + "x = 0 est x = 0";
} else {
document.getElementById("resultat").textContent = "La solution de l'équation " + a + "x + " + b + " = 0 est x = " + x;
}
}
}
</script>
</body>
</html>
Ici nous commençons d'abord par vérifier si \(a=0\) alosr, l'équation n'admet pas de solution car on ne peut diviser par \(0\)
sachant que notre \(x=\frac{-b}{a}\)
En deuxième position, nous vérifions aussi si \(b==0\), alors l'équation admet une solution unique qui vaut \(x=0\). Car la division de \(0\) par tout
nombre différent de \(0\) vaut toujours \(0\). Voilà, nous avons notre fonction qui nous permet de résoudre n'importe quelle équation du premier degré dans \(\mathbb{R}\).
Testons
Résultat :
Résolution d'une équation du premier degré ax+b=0
Entrez les valeurs de a et b :
Voilà, vous savez maintenant comment résoudre une équation du premier degré avec Javascript. Je vous laisse améliorer le design si vous voulez et autres choses.
vous pouvez télécharger le code complet juste ici Télécharger
Pour la prochaine fois, nous allons résoudre l'équation du second degré et l'équation du troisième degré aussi
Si vous avez des questions, n'hésitez pas à les exposer dans le forum. Nous sommes là pour vous aider. Merci