Conditions HTML
Résolu/Fermé
A voir également:
- Condition html
- Excel cellule couleur si condition texte - Guide
- Editeur html - Télécharger - HTML
- Br html ✓ - Forum Webmastering
- &Nbsp html - Forum HTML
- Balise </br> - Forum HTML
2 réponses
Salut,
rien à voir donc avec le HTML.
Ici c'est le langage de programmation JavaScript.
En HTML cela n'est pas possible puisque ce n'est pas de la programmation et donc n'aura aucune structure conditionnelle possible.
Vous pouvez commence par apprendre JavaScript
Un exemple simple en utilisant un tableau de données(Array) qui fait ce que vous dites:
Entre "/*" et "*/" ce sont les commentaires qui expliquent le programme.
Bien sûr c'est loin d'être optimisé mais ça peut vous donner une idée des possibilités de la programmation. La structure conditionnelle c'est juste un test pour pouvoir vérifier quelque chose mais sans la structure(algorithme) nécessaire à faire ce que l'on veut il n'y aura pas de résultats.
Ici la structure (algorithme) est assez simple :
définir une liste d'images. bien sûr mettez les bonnes URL pour tester le fichier dans la variable tableau listImages. Vous pouvez tester en ajoutant des images dans le tableau cela fonctionnera de la m^me manière.
Parcourir cette liste d'image pour afficher la première au chargement de la page.
Incrémenter un compteur (ajout de +1)et afficher l'image qui correspond au compteur sauf si le compteur est au bout de la liste(c'est là qu'il y a besoin de IF alors ELSE sinon) ou remettre le compteur à zéro si on est à la dernière image.
Mais on peut faire des choses beaucoup plus avancées et automatiser des fonctionnalités avec la programmation.
Un langage de script est assez accessible car il est lu (interprété) par un programme du navigateur. Certains langages de programmation plus puissant nécessitent que le code source soit traduit dans le langage de l'ordinateur(compilé) et fonctionnent directement dans la partie matérielle(mémoire, processeur, etc...).
rien à voir donc avec le HTML.
Ici c'est le langage de programmation JavaScript.
En HTML cela n'est pas possible puisque ce n'est pas de la programmation et donc n'aura aucune structure conditionnelle possible.
Vous pouvez commence par apprendre JavaScript
Un exemple simple en utilisant un tableau de données(Array) qui fait ce que vous dites:
Entre "/*" et "*/" ce sont les commentaires qui expliquent le programme.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><img id='imageclic' src='nulle' alt='description obligatoire'/></p>
<!-- par défaut il n'y a pas d'image-->
<script>
/* un tableau de variables est simplement une liste de valeurs associée à son numéro d'index de 0(première valeur du tableau au nombre que l'on souhaite*/
let listImages=['image1.jpg', 'image2.png, 'image3.gif'];
/* on n'est pas limité en nombre, bien sûr à remplacer par les vrais chemins d'accès de vraies images*/
let compteur=0;//-- un simple compteur définit à la première image(0)
/* la variable(mot clé let ou var) monImage contient l'objet HTML(un élément HTML) repéré ici par son ID */
let monImage = document.getElementById('imageclic');
/* attribue le chemin d'accès à l'image qui pour l'instant n'en a pas.
Pour accéder à la valeur d'un array il faut indiquer l'index que l'on veut entre crochets, détails ici:
https://www.w3schools.com/js/js_arrays.asp
*/
monImage.src=listImages[compteur];//-- identique pour l'instant à monImage.src=listImages[0]; puisque compteur vaux 0
/*la fonction addEventListener est un 'écouteur' d’événement , le premier argument de la fonction indique de détecter le clic , le second est une fonction qui détermine ce qui doit se passer lors de l'événement , voir manuel ici:
https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener
*/
monImage.addEventListener('click', function(){
/* ici il y a une condition pour vérifier si le compteur est égal à la taille du tableau(donc ua nombres d'images -1 parce que le compteur part à 0)*/
if(compteur>listImages.length-1){
compteur =0;/* dans ce cas remet le compteur à zéro qui correspond à la première image)*/
}else{/* sinon ajoute +1 à la valeur du compteur*/
compteur=compteur+1;
}
/* Il ne reste plus qu'à mettre à jour la source(src) de l'image*/
monImage.src=listeImages[compteur];
}
);
</script>
</body>
</html>
Bien sûr c'est loin d'être optimisé mais ça peut vous donner une idée des possibilités de la programmation. La structure conditionnelle c'est juste un test pour pouvoir vérifier quelque chose mais sans la structure(algorithme) nécessaire à faire ce que l'on veut il n'y aura pas de résultats.
Ici la structure (algorithme) est assez simple :
définir une liste d'images. bien sûr mettez les bonnes URL pour tester le fichier dans la variable tableau listImages. Vous pouvez tester en ajoutant des images dans le tableau cela fonctionnera de la m^me manière.
Parcourir cette liste d'image pour afficher la première au chargement de la page.
Incrémenter un compteur (ajout de +1)et afficher l'image qui correspond au compteur sauf si le compteur est au bout de la liste(c'est là qu'il y a besoin de IF alors ELSE sinon) ou remettre le compteur à zéro si on est à la dernière image.
Mais on peut faire des choses beaucoup plus avancées et automatiser des fonctionnalités avec la programmation.
Un langage de script est assez accessible car il est lu (interprété) par un programme du navigateur. Certains langages de programmation plus puissant nécessitent que le code source soit traduit dans le langage de l'ordinateur(compilé) et fonctionnent directement dans la partie matérielle(mémoire, processeur, etc...).
bonjour,
merci pour votre réponse
je vais reposter au bon endroit du coup
j'ai lu vos instructions mais cela est différent de la façon dont on m'a dit de faire. et je ne comprends pas vraiment.
ma prof ne m'a pas expliqué tout cela et m'a dit que c'était "simple".
j'ai avancé depuis que j'ai posté le message le 18/03.
j'en suis là:
merci pour votre réponse
je vais reposter au bon endroit du coup
j'ai lu vos instructions mais cela est différent de la façon dont on m'a dit de faire. et je ne comprends pas vraiment.
ma prof ne m'a pas expliqué tout cela et m'a dit que c'était "simple".
j'ai avancé depuis que j'ai posté le message le 18/03.
j'en suis là:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Projet informatique </title>
<script defer>
let img = document.getElementById('img');
function alternanceImage(src) {
if(src === 'https://zupimages.net/up/20/10/qqni.png') {
src = 'https://zupimages.net/up/20/10/gds4.png';
} else {
src = 'https://zupimages.net/up/20/10/qqni.png';
}
img.src = src;
}
img.addEventListener("click", function() {
alternanceImage(this.src);
});
</script>
</head>
<body>
<h1>TEXTE</h1>
<img src='https://zupimages.net/up/20/10/ow91.jpeg' alt="FL" height="250" width="450" align="right"
onmouseover="this.src='https://zupimages.net/up/20/10/bq9z.png';"
onmouseout="this.src='https://zupimages.net/up/20/10/ow91.jpeg';">
<img src='https://zupimages.net/up/20/10/qqni.png' alt="LDDG" height="300" width="300" align="left"
onclick="this.src='https://zupimages.net/up/20/10/gds4.png';"
/>
<p align="center"><img src="https://zupimages.net/up/20/10/ju6t.png" width="400"></p>
<img id="img" src="https://zupimages.net/up/20/10/qqni.png"/>
</body>
</html>
22 mars 2020 à 05:47
JavaScript n'a aucun rapport avec le HTML mais permet de modifier et manipuler le HTML.
Donc à priori si vous n'avez rien dans le BODY vous n'aurez rien à manipuler. Mais c'est faux car vous pouvez très bien créer par la programmation les éléments à ajouter(le contenu ou balises HTML) et les ajouter ensuite.
J'ai mis les balises script qui correspondent à la programmation JavaScript à la fin du contenu(avant la fermeture de BODY) car comme cela le script fonctionne une fois que le reste de la page est chargé.
Cela évite que JavaScript tente d'intervenir sur un élément qui n'existe pas car pas encore chargé(le chargement se fait à partir du haut de la age jusqu'en bas).
Ceci n'est qu'un exemple simpliste mais correspond à votre question.
Dans la pratique réelle il vaut écrire un fichier à part pour le programme(extension ".js") qui sera chargé par la page HTML.
Cela permet de modifier l'un et l'autre indépendamment, de réutiliser l'un et l'autre dans d'autres contextes et bien sûr est plus clair à lire que dans un seul fichier. Surtout quand on a besoin d'une page HTML et d'un fichier de programmation complet.
https://www.alsacreations.com/astuce/lire/80-comment-intgrer-du-code-javascript-dans-une-page.html