div et span en javascript: comment les manipuler?

**johnny3** · 22/12/2009, 18h16

Bonjour à tous,

débutant en javascript, je patauge avec les div et span. Je sais les utiliser en HTML&CSS, mais je ne comprends rien à leur utilisation en javascript.

Voici des exemples de programmes que j'ai dans mon cours et dans lesquels il y a des div et des spans:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">
<head>
<title>Exercice 2</title>

<script type="text/javascript">
function testerFormulaire() {
	var resultat= true;
	document.getElementById('nomErreur').innerHTML="";
	document.getElementById('sErreur').innerHTML="";
	document.getElementById('mErreur').innerHTML="";

	
	var nom= document.getElementById('nom').value;
	if (nom == "") {
		document.getElementById('nomErreur').innerHTML="nom vide";
		resultat= false;
	}
	
	var est_M= document.getElementById('sexe_m').checked;
	var est_F= document.getElementById('sexe_f').checked;
	if (! est_M && ! est_F) {
		document.getElementById('sErreur').innerHTML="champ non renseigné";
		resultat= false;
	}
	var musique=document.getElementById('musiquePreferee');
	if (musique.value== "nonDefinie") {
		document.getElementById('mErreur').innerHTML="champ non renseigné";
		resultat= false;
	}
	return resultat;
}
</script>
</head>
<body>

<form action="http://www.qenherkhopeshef.org/cgi-bin/echo.pl" method="post" 
	onsubmit="return testerFormulaire();">
<p> nom <input type="text" name="nom" id="nom"/> <span id="nomErreur"></span></p>
<p> sexe <input type="radio" name="sexe" value="m" id="sexe_m"/> m
	<input type="radio" name="sexe" value="f" id="sexe_f"/> f <span id="sErreur"></span></p>
<p> <select name="musiquePreferee" id="musiquePreferee">
		<option value="nonDefinie">Choisir votre musique préférée</option>
		<option>rock</option>
		<option>jazz</option>
		<option>rap</option>
		<option>classique</option>
		<option>variétés</option>
		<option>autres</option>
	</select> <span id="mErreur"></span>
		</p>
		<p><input type="submit"/></p>
</form>

</body>
</html>

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">
<head>
<title>Exercice 1</title>

<script type="text/javascript" src="exo1.js"></script>

</head>
<body>

<p>Votre nom :
		<input type="text" name="nom1" id="nom1"/> 
		<button type="button" onclick="saluer1()">saluer</button></p>
		

<p>Votre nom :
		<input type="text" name="nom2" id="nom2"/> 
		<button type="button" onclick="saluer2()">saluer</button></p>
<div id="destination"></div>

</body>
</html>

et le fichier javascript qu'il utilise:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function saluer1() {
	var entree= document.getElementById('nom1');
	alert("bonjour "+ entree.value);
}
 
 
function saluer2() {
	var nom= document.getElementById('nom2').value;
	var dest= document.getElementById('destination');
	dest.innerHTML= "bonjour "+ nom;
}

Je vous remercie par avance, car je ne trouve pas d'info sur internet sur leur utilisation.

John

**sebhm** · 22/12/2009, 20h31

comment les utiliser?

qu'est ce que tu veux faire ?

utiliser une balise HTML en Javascript, ca veut pas dire grand chose, le verbe manipuler doit être plus adapter
mais tout depend de ce que tu veux faire.

sois plus précis

Invité · 22/12/2009, 20h44

bonjour

un span est fait pour etre utilise en ligne

exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

vivement que je <span>gagne</span>au loto

dans cette exemple le span contient le mot gagne sa pourait servire a modifier pour ce mot la taille de la police la couleur ...etc
si tu aurait mis un div si je ne me trompe sa aurait cree un saut de ligne alor que la il reste sur la meme ligne il est inligne

le span a un style display:inline alors que le div a un style display:block

un span peut se comporter comme un div car on peut modifier son style display inline en le metant en block de meme pour le div

**johnny3** · 22/12/2009, 21h02

Envoyé par sebhm

qu'est ce que tu veux faire ?

utiliser une balise HTML en Javascript, ca veut pas dire grand chose, le verbe manipuler doit être plus adapter
mais tout depend de ce que tu veux faire.

sois plus précis

Pour être plus précis, je ne comprends absolument rien à div et span en javascript, notamment dans les codes que j'ai mis en ligne. Je sais les manipuler en HTML et CSS, mais je ne comprends pas du tout les codes que j'ai mis plus haut.

Quand utilise-t-on un div, un span, et à quel dessein?

**johnny3** · 22/12/2009, 21h05

Envoyé par mekal

bonjour

un span est fait pour etre utilise en ligne

exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

vivement que je <span>gagne</span>au loto

dans cette exemple le span contient le mot gagne sa pourait servire a modifier pour ce mot la taille de la police la couleur ...etc
si tu aurait mis un div si je ne me trompe sa aurait cree un saut de ligne alor que la il reste sur la meme ligne il est inligne

le span a un style display:inline alors que le div a un style display:block

un span peut se comporter comme un div car on peut modifier son style display inline en le metant en block de meme pour le div

merci pour ta réponse.

Oui, je comprends cela pour les CSS, mais comment comprendre les codes que j'ai mis dans mon post? Il s'agit des codes de mon cours, mais le prof est en vacances et ne répondra qu'à la rentrée (cours du CNAM)

Je ne vois pas à quoi renvoie, par exemple,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span id="nomErreur"></span></p>

Merci par avance

**sebhm** · 22/12/2009, 21h53

d'accord.

tu n'as pas de DIV ou de SPAN dans ton code javascript.
Javascript sert à manipuler les balises HTML comme <div> ou <span>.

Il faut commencer par le début
cours
faq

bonne lecture

**sebhm** · 22/12/2009, 22h43

pour essayer de comprendre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="text" name="nom" id="nom"/>
<span id="nomErreur"></span>

on a là :
- un element <input> (dans lequel l'utilisateur va saisir le nom)
- un element <span> vide. Alors vide ça a peu d'intérêt sauf si on veut le remplir après.

Et c'est là qu'intervient Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var nom= document.getElementById('nom').value;

on recupere la valeur du champ nom (parce qu'on avait 'id="nom"' dans le <input>, ce qui permet de l'identifier)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if (nom == "") {
	document.getElementById('nomErreur').innerHTML="nom vide";
	resultat= false;
}

si le nom est vide, on ecrit dans le <span> (qui est identifié par 'id="nomErreur"') le texte 'nom vide'.

Donc ce code sert simplement à controler le formulaire qui est créé en HTML, et à afficher les erreurs de saisie s'il y en a.

**kernelfailure** · 23/12/2009, 00h46

L'utilisation des SPAN effectuée dans ton source, en haut, est simplement celle d'un conteneur.
C'est en quelque sorte une étiquette où sera ajouté du texte par l'intermédiaire de javascript (ici, accès par méthode DOM et modification du contenu de la balise par propriété objet javascript - La balise aurait pu être modifier par méthode ou propriété DOM [Voir : .appendChild(), .data, .nodeValue]).

http://javascript.developpez.com/faq/?page=DOM

Comme l'a dit Mekal, la différence SPAN/DIV est son étendue d'affichage.

SPAN est plus approprié en milieu de structure, pour ne pas trop bousculer l'affichage.

**johnny3** · 23/12/2009, 11h31

Envoyé par sebhm

d'accord.

tu n'as pas de DIV ou de SPAN dans ton code javascript.
Javascript sert à manipuler les balises HTML comme <div> ou <span>.

Il faut commencer par le début
cours
faq

bonne lecture

Merci, mais j'ai déjà le cours Cnam javascript, qui reprend ce que j'avais lu sur développez.com.

Par contre, je ne trouve pas les cours du Cnam top. Ils sont en accès libre ici:
http://deptinfo.cnam.fr/~pons/COURS/.../cours/p1.html
http://deptinfo.cnam.fr/~pons/COURS/.../cours/p2.html

Qu'en pensez-vous? J'ai acheté "Javascript, le guide complet" pour fixer les choses.

**johnny3** · 23/12/2009, 11h41

Envoyé par sebhm

pour essayer de comprendre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="text" name="nom" id="nom"/>
<span id="nomErreur"></span>

on a là :
- un element <input> (dans lequel l'utilisateur va saisir le nom)
- un element <span> vide. Alors vide ça a peu d'intérêt sauf si on veut le remplir après.

Et c'est là qu'intervient Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var nom= document.getElementById('nom').value;

on recupere la valeur du champ nom (parce qu'on avait 'id="nom"' dans le <input>, ce qui permet de l'identifier)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if (nom == "") {
	document.getElementById('nomErreur').innerHTML="nom vide";
	resultat= false;
}

si le nom est vide, on ecrit dans le <span> (qui est identifié par 'id="nomErreur"') le texte 'nom vide'.

Donc ce code sert simplement à controler le formulaire qui est créé en HTML, et à afficher les erreurs de saisie s'il y en a.

D'accord, je comprends mieux. Et pourquoi a-t-on utilisé un div

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="destination"></div>

et pas un span?

Ce que je veux dire, c'est que je connais div pour les encadrés, les faire flotter, indiquer les marges dans le cadre, définir sa position, etc. et span pour mettre du texte en italique, en couleur, avec une police particulière, etc, mais le prof ne les a jamais mentionnés dans son cours pour traiter les erreurs, par exemple, et du coup, je me sens bloqué.

Déjà, j'ai une indication pour les span du code (effectivement, au temps pour moi, ils sont dans le code HTML, pas javascript. Par contre, le div est bien dans le code javascript puisqu'il se trouve dans le fichier .js

Merci déjà pour l'aide apportée pour le span. Saurais-tu où je pourrais trouver des exemples similaires pour généraliser le phénomène?

**E.Bzz** · 23/12/2009, 11h58

Bonjour,
tu te poses des problèmes qui n'en sont pas :

je connais div pour les encadrés, les faire flotter, indiquer les marges dans le cadre, définir sa position, etc. et span pour mettre du texte en italique, en couleur, avec une police particulière, etc

Tout ceci, côté manipulation en JS (et CSS) est identique pour les div et les span.

La seule différence est que, du fait des propriétés CSS définies par défaut pour chacun de ces 2 éléments (essentiellement display:inline pour les span et display:block pour les div), ils sont utilisés pour des buts différents (comme illustrés dans l'exemple donné par mekal).
Pour résumer : un span sert à mettre en forme une partie de "phrase" d'un "paragraphe", alors qu'un div est utilisé pour contenir une zone de ta page (un paragraphe justement, mais aussi header, footer, bulle d'aide, menu ...) ...

EDIT : d'ailleurs, il est tout à fait possible de faire en sorte qu'un span se comporte exactement comme un div (et vice-versa). C'est d'ailleurs le cas d'autres balises HTML qui peuvent être détournées de leur utilisation initiale (H1, P ....). Mais ceci n'est pas recommandé, notamment à cause de la prise en compte par certains navigateurs alternatifs (vocaux par ex.) qui risquent d'être induits en erreur ...

A+

**sebhm** · 23/12/2009, 12h17

en effet, peu importe la balise HTML, Javascript sert à les manipuler.
Tu as un exemple où on écrit dans un <span>, un autre où on écrit dans un <div>.

Apres, c'est coté HTML qu'on va s'occuper de pourquoi un <span> ou pourquoi un <div>. Et la réponse est "parce que chaque balise a une utilité propre" (meme si on peut souvent faire la meme chose avec des balises différentes en HTML)

**johnny3** · 23/12/2009, 15h27

ok, merci à tout le monde. Je vais voir si je trouve d'autres exemples de ce type pour bien asseoir le concept et ensuite l'appliquer pour voir si je le comprends bien.

div et span en javascript: comment les manipuler?

JavaScript

Discussions similaires

Partager

Partager