Forums des Zéros

4 février 2016 à 19:04:39

@ElvenElder, j'en suis à peu près au même niveau que toi.

Si j'ai bien compris, ton but est d'afficher 5 images avec des tailles de bordure différente donc normalement ton

code devrais ressembler à ça:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <p><img src="canard.jpg" title="animal canard" border="11"/>Paragraphe 1</p>
    <p><img src="chat.jpg" title="animal chat" border="4"/>Paragraphe 2</p>
    <p><img src="cheval.jpg" title="cheval" border="2"/>Paragraphe 3</p>
    <p><img src="chien.jpg" title="animal chien" border="8"/>Paragraphe 4</p>
    <p><img src="girafe.jpg" title="girafe" border="4"/>Paragraphe 5</p>
 
    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('[border!="15"]').css('color','red');
      }); 
    </script>
  </body>
</html>

<span></span> n'est pas la balise pour afficher une image, c'est <img/>.

Sinon aucun problème avec ton script: "appliquer une police rouge à tous les éléments ayant un attribut "border"

de valeur différente de "15" ".

In this world, sky's the true limit. All the others are man-made...

5 février 2016 à 19:12:00

Bonjour à tous,

pour l'activité 4, celle sur ajax, le fichier externe est obligatoirement un fichier txt ou ça peut être un fichier json (qui est aussi un fichier texte) ?

PS : je n'ai pas l'impression que beaucoup de monde font ce mooc vu que mes activité prennent longtemps à être corrigée.

-
Edité par condor666 5 février 2016 à 19:12:12

Try harder !!!

5 février 2016 à 20:35:00

Bonjour,

Je pense qu'en créant un sujet sur tes questions, tu auras plus rapidement une réponse qu'ici malheureusement.

In this world, sky's the true limit. All the others are man-made...

6 février 2016 à 0:21:13

Oui c'est sûr, mais je pense avoir trouvé la solution pour utiliser un fichier texte

Try harder !!!

6 février 2016 à 2:18:01

Ok. Bonne continuation.

In this world, sky's the true limit. All the others are man-made...

6 février 2016 à 13:17:37

Salut à tous, Salut Martin.

Merci pour ce super cours que je suis avec beaucoup d’intérêts.

Une petite question.

Dans le TP mise en forme d'une page web:

dans la

6 février 2016 à 13:23:29

oups, erreur de manip

Donc j'écrivais:

Dans le TP mise en forme d'une page web:

dans la section premier caractère de phrase,

il ya une ligne qui reste obscure pour moi et j'aimerai que quelqu'un ai la gentillesse d'éclairer ma lanterne.

else {
  var tableau2 = $.map(tableau, function(el, ind) {

je galère un peu avec la fonction map, et la fonction passée en paramètre aussi.

à quoi sert le ind?

Merci d'avance pour toutes explication bienveillante

6 février 2016 à 13:49:54

Bonjour,

Il me semble que "ind" est l'index d'un élément du tableau, son rang dans le tableau.

In this world, sky's the true limit. All the others are man-made...

6 février 2016 à 17:09:03

merci pour ta réponse.

Malheureusement, je n'arrive toujours pas à faire fonctionner ce code.

Pour la mise en gras du premier caractere pas de probleme, mais pour le retour au texte sans gras...

voici mon code (j'avoue que je l'ai recopié, mais je l'ai commenté pour essayé de bien comprendre ce que je recopiais)

je n'arrive pas à deboguer.

  /*----------------premiere lettre en gras-----*/
    $('#prem-car-phrases').change(function() {
        var pcp = $('#prem-car-phrases option:selected').val();
        if(pcp == 'normal') {
            /*si le choix est 'normal'*/
            $('p').each(function() {
               /* pour chaque paragraphe en cours de traitement*/
                var unPar = $(this).html();
                /* on récupère le texte du paragraphe en cours de traitement*/
                if(unPar.indexOf('<img') == -1)
                    /* Si l'element en cours ne contient pas la chaine <img (parametre -1 de la methode
                    indexOf) donc pas d'image unPar est une chaine */
                    $(this).text($(this).text());
                /**/
            });
        }
        
         if(pcp == 'Gras') {                                      // Si le choix est "gras"
            $('p').each(function() {                             // Pour chaque paragraphe traiter comme suis
                var tableau = $(this).text().split('. ');       
                /* tableau = recupération du texte du paragraphe en cours de traitement et                   séparation de chaque phrase en element du tableau par le séparateur '. ' */
                if (tableau.length==1){}                        // Si la longueur du tableau
                /* ne contient qu'un element ne rien faire*/
                else {                                          //sinon
                    var tableau2 = $.map(tableau, function(el, ind) {
/* on stock une fonction map dans tableau2 */
                        if (el[0] != null) return'<b>' + (el[0]) + '</b>' + el.substring(1) +'. ';
                        /* Cette fonction verifie la condition de la valeur examinée (si elle est null, ce doit être autre chose que du texte) la fonction retourne le 1er element de la phrase en gras + la suite de la phrase à partir du deuxième caractere jusqu'à la fin, et ajoute le point et l'espace retirer par la methode split*/
                    });
                    $(this).html(tableau2.join(''));
                    /* les élements du paragraphe en cours de traitement sont inséré sous forme de chaine séparer par des espace (tableau2.join(''))*/
                }
            });
        }
    });

pardon pour l'indentation!

Si quelqu'un arrive néanmoins à me relire...

Merci d'avance

6 février 2016 à 17:13:37

   /*----------------premiere lettre en gras-----*/
    $('#prem-car-phrases').change(function() {
        var pcp = $('#prem-car-phrases option:selected').val();
        if(pcp == 'normal') {
/*si le choix est 'normal'*/
            $('p').each(function() {
/* pour chaque paragraphe en cours de traitement*/
                var unPar = $(this).html();
/* on récupère le texte du paragraphe en cours de traitement*/
                if(unPar.indexOf('<img') == -1)
/* Si l'element en cours ne contient pas la chaine <img (parametre -1 de la methode indexOf) donc pas d'image unPar est une chaine */
                    $(this).text($(this).text());
            });
        }
        
         if(pcp == 'Gras') {
// Si le choix est "gras"
            $('p').each(function() {
// Pour chaque paragraphe traiter comme suis
                var tableau = $(this).text().split('. ');       
/* tableau = recupération du texte du paragraphe en cours de traitement et séparation de chaque phrase en element du tableau par le séparateur '. ' */
                if (tableau.length==1){}
// Si la longueur du tableau ne contient qu'un element ne rien faire
                else {                                          //sinon
                    var tableau2 = $.map(tableau, function(el, ind) {
/* on stock une fonction map dans tableau2 */
                        if (el[0] != null) return'<b>' + (el[0]) + '</b>' + el.substring(1) +'. ';
/* Cette fonction verifie la condition de la valeur examinée (si elle est null, ce doit être autre chose que du texte) la fonction retourne le 1er element de la phrase en gras + la suite de la phrase à partir du deuxième caractere jusqu'à la fin, et ajoute le point et l'espace retirer par la methode split*/
                    });
                    $(this).html(tableau2.join(''));
/* les élements du paragraphe en cours de traitement sont inséré sous forme de chaine séparer par des espace (tableau2.join(''))*/
                }
            });
        }
    });

Comme ça c'est peut être plus lisible

6 février 2016 à 17:27:52

ok j'ai oublié la majuscule à Normal.

Quand je pense que j'ai passer 2 heures la dessus!!!!!!!!!!!!!!!!!!!!!!!!!!!!

6 février 2016 à 18:46:28

jQuery ça pardonne pas....

In this world, sky's the true limit. All the others are man-made...

12 février 2016 à 18:34:48

bonjour a tous,

je suis au début du cour, et je me demande s'il y a moyen de redonner le focus a un input déjà créer, au moment ou on le fait apparaître avec un clic.

merci par avance.

12 février 2016 à 20:11:50

Salut,

Je suis en fin de partie 2. Normalement, il y a moyen de tout faire avec jQuery, tout dépend de ton code. Si

le retour du focus est ce que tu veux en fin de traitement, il te faut donc cette ligne de traitement en fin.

As-tu un début de code?

In this world, sky's the true limit. All the others are man-made...

12 février 2016 à 21:54:28

greg3487 a écrit:

bonjour a tous,

je suis au début du cour, et je me demande s'il y a moyen de redonner le focus a un input déjà créer, au moment ou on le fait apparaître avec un clic.

merci par avance.

C'est faisable (même facilement) mais sans bout de code on ne pourra pas t'aider

Try harder !!!

14 février 2016 à 9:54:27

condor666 a écrit:

greg3487 a écrit:

bonjour a tous,

je suis au début du cour, et je me demande s'il y a moyen de redonner le focus a un input déjà créer, au moment ou on le fait apparaître avec un clic.

merci par avance.

C'est faisable (même facilement) mais sans bout de code on ne pourra pas t'aider

$(function() {

    $('button').click(function() {
        $('#insertion').show();
        var textButton = $(this).text();

        if(textButton === "Label") 
        {
                        
            $('#infoInsertion').text('label : ');
            $('#insertion').show();
                        
        } 
    });

    $('<div id="insertion"></div>').appendTo($('#droite'));
    $('<label for="insertion" id="infoInsertion"></label>').prependTo($('#insertion'));
    $('<input type="text" id="text" autofocus></input>').insertAfter($('#insertion label')); // c'est cette ligne qui dois avoir le focus a la sortie du .hide 
    $('<button id="envoi">ok</button>').insertAfter($('#insertion input'));
    $('#insertion').hide();

    $('#envoi').click(function() 
    {
        var label = $('#infoInsertion').text();
        var value = $('#text').val();

        if(label === "label : ") 
        {

            $('<label>' + value +' : </label>').appendTo($('#gauche'));
            $('#text').val('');
            $('#insertion').hide();

        } 
    });
});

14 février 2016 à 10:51:37

Après ta boucle if (donc les accolades) tu rajoute :

$('#text').focus();

Tout en restant dans la fonction click

Try harder !!!

15 février 2016 à 16:10:23

condor666 a écrit:

Après ta boucle if (donc les accolades) tu rajoute :
$('#text').focus();
Tout en restant dans la fonction click

C'était très simple. La suite du cours nécessitera plus de pratique pour en plaisanter mais rien de traumatisant.

In this world, sky's the true limit. All the others are man-made...

16 février 2016 à 7:52:59

merci a tout

ElvenElder

17 février 2016 à 3:21:41

Je ne sais pas si je suis sur le bon forum .. C'est un peu obscur la navigation sur le forum ... Huhuhuh !

Voilà, je suis sur le cours de " Simplifiez vos développements JavaScript avec jQuery" - Partie 2.3 "Modifier le contenu d'un élément" .. Je bute sur le

$('p').text(function(index,actuel) {

  alert('Paragraphe ' + (index+1) + ' : '+actuel);

});

Je pense que ça mériterait de plus amples explications.

En fait, je me pose la question : Quels sont les arguments que retourne la fonction vers la fonction text() ?

Sachant que text() va chercher et retourner une chaîne de caractères.

Moi pas comprendre la logique ici.

Merci de votre aide !

-
Edité par ElvenElder 17 février 2016 à 3:22:47

Guettoudou

17 février 2016 à 19:22:34

@ElvenElder,

La méthode text() ne renvoie pas une simple chaîne de caractères mais la valeur textuelle de chaque élément auquel elle est appliquée.

La fonction va chercher la valeur textuelle de l'élément actuellement désigné par son index : le premier <p>, d'index 0, a une valeur textuelle (paramètre ou argument : actuel) égale à "Documentation officielle", et le deuxième <p>, d'index 1, a une valeur textuelle égale à "API jquery".

C'est exactement ce que renvoient les deux fenêtres alert() qui s'affichent...

Relis bien le paragraphe, c'est beaucoup plus clair que tu ne le laisses entendre (et que ce que je suis capable d'exprimer...) !

Cordialement

ElvenElder

18 février 2016 à 9:34:54

Merci Gettoudou pour ta réponse.. Mais j'ai beau relire, je n'entends toujours rien à la fonction... Qui renseigne les paramètres index et argument de la fonction ? Je vois bien dans la doc officielle qu'ils en parlent de text(function()) ... Mais bon ... Ce n'est non plus pas très explicite ... Ça reste obscur ! Je vais continuer à avancer dans le cours et j'y reviendrai plus tard !

18 février 2016 à 18:03:16

ElvenElder a écrit:

Merci Gettoudou pour ta réponse.. Mais j'ai beau relire, je n'entends toujours rien à la fonction... Qui renseigne les paramètres index et argument de la fonction ? Je vois bien dans la doc officielle qu'ils en parlent de text(function()) ... Mais bon ... Ce n'est non plus pas très explicite ... Ça reste obscur ! Je vais continuer à avancer dans le cours et j'y reviendrai plus tard !

Bonjour ElvenElder ,

Il vaut mieux ne pas faire d'impasse sur cette partie, c'est vraiment une base.

Comme Gettoudou l'a bien expliqué, la forme

$('sel').text(function(index, actuel) {
......
});

où $('sel') est l'élément sélectionné, passe en revue tous les éléments sélectionnés pour leur afficher tour à tour leur contenu

textuel, chaque éléments étant numéroté à partir de 0. S'il y en 3 correspondant à $('sel'), ils seront numérotés 0, 1 et 2 puis

traités dans cet ordre par l'instruction alert('...') .

Bonne continuation.

-
Edité par kisow24 18 février 2016 à 18:10:24

In this world, sky's the true limit. All the others are man-made...

Guettoudou

18 février 2016 à 23:12:15

ElvenElder a écrit:

Merci Gettoudou pour ta réponse.. Mais j'ai beau relire, je n'entends toujours rien à la fonction... Qui renseigne les paramètres index et argument de la fonction ? Je vois bien dans la doc officielle qu'ils en parlent de text(function()) ... Mais bon ... Ce n'est non plus pas très explicite ... Ça reste obscur ! Je vais continuer à avancer dans le cours et j'y reviendrai plus tard !

La doc officielle dit çà :

Je ne comprends pas ce qui reste abscons pour toi dans l'utilisation des arguments... Tu peux remplacer "actuel" par "text", ou par "toto" si tu préfères, tu obtiendras toujours le même résultat.

Cordialement

emixamdu

23 février 2016 à 14:53:05

Bonjour à tous !

J'ai un problème sur l'activité de la partie 2 du cours, avec cette histoire de formulaire...

Quand je clique sur Label, tout va bien : j'écris ce que je veux, et ça s'affiche à gauche. Je précise que je peux répéter l'opération, ça fonctionne toujours.

Le problème, c'est quand je clique sur Zone de texte: la première fois ça fonctionne, mais la 2ème fois il m'affiche 2 <input> à gauche au lieu d'un seul. Et ça continue, puisqu'au 3ème clic ce sont 3 nouveaux <input> qui apparaissent...

Je ne comprend pas pourquoi ça déconne, surtout que mes codes "Label" et "Texte" ont grosso-modo la même structure...

Des idées ?

$("#texte_bouton").click (
		function() {
			$("#label:visible").hide();
			$("#bouton:visible").hide();
			$("#texte").show();
			$("#texte_texte").val("");
			$("#ok2").click (
			function() {  /*C'est ici que ca coince...*/
					var id = $("#texte_texte").val();
					$("#gauche").append("<input type='text' id='"+id+"'/>");
					$("#texte_texte").val("");
					$("#texte").hide();

				});
				

	});