IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

div et span en javascript: comment les manipuler?


Sujet :

JavaScript

  1. #1
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2008
    Messages
    207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2008
    Messages : 207
    Par défaut div et span en javascript: comment les manipuler?
    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

  2. #2
    Membre émérite Avatar de sebhm
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2004
    Messages
    1 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Avril 2004
    Messages : 1 090
    Par défaut
    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

  3. #3
    Invité
    Invité(e)
    Par défaut
    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

  4. #4
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2008
    Messages
    207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2008
    Messages : 207
    Par défaut
    Citation Envoyé par sebhm Voir le message
    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?

  5. #5
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2008
    Messages
    207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2008
    Messages : 207
    Par défaut
    Citation Envoyé par mekal Voir le message
    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

  6. #6
    Membre émérite Avatar de sebhm
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2004
    Messages
    1 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Avril 2004
    Messages : 1 090
    Par défaut
    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

  7. #7
    Membre émérite Avatar de sebhm
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2004
    Messages
    1 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Avril 2004
    Messages : 1 090
    Par défaut
    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.

  8. #8
    Membre chevronné
    Profil pro
    Inscrit en
    Juin 2009
    Messages
    313
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2009
    Messages : 313
    Par défaut
    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.

  9. #9
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2008
    Messages
    207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2008
    Messages : 207
    Par défaut
    Citation Envoyé par sebhm Voir le message
    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.

  10. #10
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2008
    Messages
    207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2008
    Messages : 207
    Par défaut
    Citation Envoyé par sebhm Voir le message
    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?

  11. #11
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    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+

  12. #12
    Membre émérite Avatar de sebhm
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2004
    Messages
    1 090
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Avril 2004
    Messages : 1 090
    Par défaut
    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)

  13. #13
    Membre éclairé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2008
    Messages
    207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2008
    Messages : 207
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 30/08/2012, 13h43
  2. Réponses: 1
    Dernier message: 16/06/2012, 21h19
  3. Comment bien manipuler les array multidimensionnel
    Par pierrot10 dans le forum Langage
    Réponses: 1
    Dernier message: 25/02/2012, 21h10
  4. [javascript] Comment savoir si un div existe
    Par LE NEINDRE dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 22/08/2005, 17h13
  5. [BIGINT dans Firebird] comment les manipuler dans Delphi ?
    Par kase74 dans le forum Bases de données
    Réponses: 4
    Dernier message: 30/08/2004, 11h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo