Mission #8 - Un langage objet? [Initié]

Badiboum!

Me voici, me voilà, pour cette huitième mission \o/

Cette fois-ci, on s'attaque à un langage un peu plus inconnu de la pluspart de nos codeurs qui utilisent habilement le HTML et le CSS. On va en effet s'attaquer au Javascript!

Wow, ça fait peur, right? Par d'inquiétude, on va rester dans des trucs bien basiques pour commencer et même probablement tout du long ^^

Tout d'abord, je vous donne ce site, il est utile pour tester les javascripts. Il vous suffit de copier le HTML dans la partie HTML, de taper le javascript dans la partie Javascript et de cliquer sur "Run" en haut à gauche. Le carré en bas à droite vous donnera le résultat.
https://jsfiddle.net/


Le principe, c'est que je vais donner des bouts de codes en HTML/CSS et je vais vous demander d'ajouter un javascript pour créer un effet en particulier. Pas clair? Allez, je vous montre un exemple, ce ne sera pas trop compliqué ^^

---

Objectif : mettre mot "les" en bleu en utilisant du javascript.

J'ai ceci en HTML :

Code:

<div id="Baba">
  <span class="Ba">Salut</span>
  <span class="Ba" id="da">les</span>
  <span class="Ba" id="banane">gens!</span>
</div>

Ma solution :

Code:

document.getElementById("da").style.color = "blue";

Et voilà, j'ai un "les" en bleu!

Pour ceux qui ne savent pas, "document.getElementById()" permet de sélectionner un élément par son "id" qu'on met dans les parenthèses entre guillemets. Le ".style" indique qu'on veut modifier un élément de CSS et le ".color" indique que l'élément de CSS à modifier est la couleur du texte. Le "=" indique que ce par quoi on va modifier la couleur sera l'élément après, à savoir "blue" (bleue). C'est cool, non?

À votre tour maintenant!

---

Le Maître de Missions a écrit:Objectif : Faire une alerte qui nous dit quel est le texte (et seulement le texte) à l'intérieur du span avec l'id "banane".

J'ai ceci en HTML :

Code:

<div id="Baba">
  <span class="Ba">Salut</span>
  <span class="Ba" id="da">les</span>
  <span class="Ba" id="banane"><b>gens!</b></span>
</div>

Indice 1 : Voir le défi 1, on a trouvé comment aller prendre le "html" à l'intérieur d'un élément et là on veut faire presque la même chose, sauf qu'on veut uniquement le "texte"
Indice 2 : Une alerte fonctionne comme ceci :

Code:

alert("Bonjour");

ou

var truc = "Bonjour";
alert(truc);

Site pour tester le javascript : https://jsfiddle.net/cb205917/4/

Défi 1:

Note 1 : Essayez d'expliquer vos essais, ça met un peu plus de piquant ^^




Note 2 : Je sais que la 6e et la 7e n'ont pas été fermées et qu'on n'est pas supposé d'avoir plus que 2 missions à la fois, mais en même temps la 6e n'a pas eu de réponse depuis presque un an, alors...

Hello Onyx =)

Super sujet <3 Tu gères ^^ surtout que le JS traumatise beaucoup de monde (moi la première ^^)

Du coup, j'ai marqué la mission 6 comme terminée pour faire la part belle à celle-ci =)

Alors, je n'y suis pas parvenue, perso, mais je crois avoir pigé la logique du truc ^^ (suite sous hide du coup ^^)



Wala =) merci pour la mission <3

Hé bien merci, j'avais peur que personne ne veuille participer T_T

Pas besoin de mettre sous hide, de toute façon on va changer la tâche à chaque fois qu'un solution est trouvée

Ehawee a écrit:si j'ai bien compris, du coup, faut commencer le code par

Code:

document.getElementById("banane")

pour dire que dans le document, on fait main basse sur l'élément qui a l'id "banane".

C'est ça, document.getElementById("") permet de sélectionner un élément qui a un id en particulier. Dans ce cas-ci, comme le mot "gens!" qu'on voulait modifier était entouré d'un span avec l'id "banane", c'était effectivement la bonne façon de fonctionner.


C'est d'ailleurs là que tu as un peu trébuché, à savoir que dans les autres essaies, tu as essayé de rajouter un ".span" ou un ".element", comme pour dire quel élément tu voulais sélectionner... Sauf qu'il était déjà sélectionné, alors tu n'avais pas besoin d'essayer de le sélectionner une deuxième fois ^^

Ehawee a écrit:En fait, ce qui m'a induite en erreur, c'est que comme dans ton premier exemple tu as une syntaxe en .style.color pour dire "je modifie le style, et dans le style, je modifie la couleur" je pensais qu'il faudrait un truc du même genre, en mode "je modifie l'élément, et je modifie son contenu" alors qu'en fait, tu peux directement dire "je modifie le contenu" ce qui est plus logique ^^

Tu n'as pas tord, dans l'exemple, j'ai sélectionné l'élément, puis j'ai mis ".style" pour dire que je voulais modifier le CSS. La raison pour laquelle j'avais ajouté ".color", c'est que dans le CSS, il peut y avoir 72 propriétés différentes alors je suis obligé de venir définir quelle propriété je voulais modifier, à savoir la couleur. L'inverse est vrai, à savoir qu'on est obligé d'aller chercher le "style" parce que c'est lui qui contient la couleur. C'est comme quand on voit un élément html comme ceci :

Code:

<span class="color" style="color: red;">Truc</span>

Comme le "color" qu'on veut modifier est en dedans du "style", on a pas le choix de dire qu'on veut modifier le "style", sinon, le javascript ne saura pas où chercher, d'autant plus qu'il y a aussi un "color" dans la class. Il y a deux "couches", le style et la couleurs, donc on est obligé de mettre les deux.

Ehawee a écrit:Du coup je suis allée checker la solution sur le net, et j'ai fini par trouver, j'étais pas si loin que cela en fait, c'est juste que je n'avais pas la bonne fonction xD

Code:

document.getElementById("banane").innerHTML = "bananes!";

Je suppose que la logique du truc, c'est de se dire que ".innerHTML" remplace l'intérieur du HTML, donc de la balise identifiée par l'id "banane"?

C'est effectivement un bonne solution ^^ Le ".innerHTML" permet de sélectionner/changer le HTML à l'intérieur de l'élément que tu avais déjà sélectionné avec "document.getElementById("banane")".

Je suppose que les programmeurs ont appelé cette fonction "innerHTML" à la place de "HTML" justement pour rappeler les gens que cela sélectionne le HTML à l'intérieur de l'élément et non l'élément lui-même, ce qui est un peu bizarre parce qu'il n'y a même pas de fonction "HTML" nul part

---

Sauf que même si c'est une des solutions, ce n'est pas la seule solution. Pour trouver l'autre solution, je vais lancer un nouveau défique voici :

Le Maître de Missions a écrit:Objectif : Faire une alerte qui nous dit quel est le texte (et seulement le texte) à l'intérieur du span avec l'id "banane".

J'ai ceci en HTML :

Code:

<div id="Baba">
  <span class="Ba">Salut</span>
  <span class="Ba" id="da">les</span>
  <span class="Ba" id="banane"><b>gens!</b></span>
</div>

Indice 1 : Voir le défi 1, on a trouvé comment aller prendre le "html" à l'intérieur d'un élément et là on veut faire presque la même chose, sauf qu'on veut uniquement le "texte"
Indice 2 : Une alerte fonctionne comme ceci :

Code:

alert("Bonjour");

ou

var truc = "Bonjour"
alert(truc);

Site pour tester le javascript : https://jsfiddle.net/cb205917/4/

Coucou,

Moi aussi je suis comme Ehawee, j'ai compris le principe mais j'ai pas vraiment réussi. J'avoue j'ai pas vraiment fait du Javascript en plus, j'ai utilisé du jQuerry x.x
Le reste est sous hide :)



Merci en tous les cas pour cette mission !

Salut!

Il y a présentement 2-3 petits soucis dans ton code. Le premier est plutôt bête. Sur JSFiddle, dans la section des javascript, si tu utilises du jquery, tu dois aller cocher une version de Jquery. Sinon, cela ne fonctionne pas. Donc tu vas dans le carré du jquery et en haut à droite du carré, tu cliques sur "javascript". Tu vas dans "FRAMEWORKS & EXTENSIONS" et tu sélectionne jQuery 2.2.3.

---

Le 2ème soucis, c'est la structure. Quand on utilise les conditions, voici la structure à suivre :

Code:

if (condition à respecter) {
  ce qui est exécuté si la condition est respectée;
}
else {
ce qui est exécuté si la condition n'est pas respectée;
;}

Le else est facultatif. Par contre, ce qui s'exécute si la condition est respectée doit être entourée de {} pour avoir une bonne structure.

La bonne structure dans ton cas serait celle-ci :

Code:

$(function() {
 if($('#chapeau').hasClass('Ba')) {
 alert("Cheshire");}
 });

---

Bref, si je reprends ton code, cela regarde si le span avec l'id "chapeau" a la class "Ba". Si oui, il y a une alerte qui dit "Cheshire". Sinon, il ne se passe rien. C'est pas mal du tout!

Par contre, ce n'est pas tout à fait ce qui était demandé. Maintenant, essaie, à la place de "Cheshire", de mettre le contenu du span avec l'id "chapeau". Essaie de faire mettre "Alice" dans l'alerte! Tu crois que tu as une idée de comment faire?

Oui je vois !

J'ai essayer de changer ça mais j'ai pas trop réussi pour le coup


Sinon j'ai tenté de rechercher une nouvelle technique en lisant quelques trucs sur le forum de OpenClassroom et j'ai testé ça


J'avoue j'ai du mal >.>

Onyx a écrit:

Je suppose que les programmeurs ont appelé cette fonction "innerHTML" à la place de "HTML" justement pour rappeler les gens que cela sélectionne le HTML à l'intérieur de l'élément et non l'élément lui-même, ce qui est un peu bizarre parce qu'il n'y a même pas de fonction "HTML" nul part

En fait, c'est innerHTML, pour l'intérieur (donc sans la balise) et outerHTML pour l'extérieur (donc balise + innerHTML)
Il n'y a pas de HTML pour ne pas avoir de confusion. Donc il n'y a rien de bizarre, c'est même bien pensé.

sinon je poste pour voir si quelqu'un a utilisé les regex, si il y personne, je proposerais des regex.

https://jsfiddle.net/8qx3rv2t/4/

édit : voilà une solution bases sur les regex :

Code:


function alertInnerTextForId(id){
  var str =document.body.innerHTML;
  var regex =new RegExp('(?:<[a-z]*(?: [a-z]+="[^"]*")* id="'+id+'"(?: [a-z]+="[^"]*")*>(?:(?:(?:<[a-z]*>)(.*?)(?:<\/[a-z]*>))|(.*?))<\/[a-z]*>){1}?')
  var tmpArr = regex.exec(str);
  var text="";
  for(var i=1;i<tmpArr.length;i++){
    if(tmpArr[i])
      text+=tmpArr[i];
  }
  alert(text);
}

alertInnerTextForId('banane');


Après une regex aussi compliquée, je ne peux vous laisser sans explications. La regex est composé de 3 grandes parties :

Code:

<[a-z]*(?: [a-z]+="[^"]*")* id="'+id+'"(?: [a-z]+="[^"]*")*>

?:(?:(?:<[a-z]*>)(.*?)(?:<\/[a-z]*>))|(.*?))


<\/[a-z]*>

La première est la balise ouvrante composé de trois partie, dont une répété deux fois :

Code:


<[a-z]* /*début de balise, matche sans problème toutes les balises classiques en html, mais pas en xml à cause du tiret - pas pris en compte*/

(?: [a-z]+="[^"]*")*  /*match les attributs HTML (comme les classes ou les balises style ou les id)*/

id="'+id+'" /*match tout simplement l'id ciblé*/

(?: [a-z]+="[^"]*")* /*r épétition des attributs*/

> /*fin de balise */


pourquoi répéter les attribut alors qu'on sais dans l'exemple que l'id est toujours dernier ? Parce que le navigateur peut les réagencer.

la deuxième partie match le texte :

Code:

(?:(?:(?:<[a-z]*>)(.*?)(?:<\/[a-z]*>)) /*on garde que le texte et on retire les balises*/

| /*ou*/

(.*?)) /*du simple texte*/

et la balise fermante ressemble à l'ouvrante en plus simple


avantage de la solution :

fonctionne partout, même sur un naigateur dépourvu de DOM (aka un script node js par exemple)

contre :

c'est quand même compliqué pour rien dans une page web

edit 2 :
JS, c'est pas un langage objet, mais prototype hein ; )

Ethan > J'avoue que je m'attendais à quelque chose de plus simple, je ne voulais justement pas perdre personne et je dois avouer que tu m'as perdu u_u Je vais relire ton code tranquille plut tard

Cheshire > Désolée du temps de réponse surtout T_T

Je vois que tu continues avec tes conditions, hein XD
On va y revenir plus tard.

Alors, lorsqu'on parle de jquery, il y a plusieurs manières de récupérer le contenu d'une balise.

Plus haut, tu as peut-être remarqué que j'ai dit à Ehawee qu'on doit utiliser innerHTML pour récupérer tout le contenu à l'intérieur de l'élément qui avait le id sélectionné. Comme Valtena_Ethan l'a expliqué, on utilise outerHTML lorsqu'on veut récupérer l'élément qui avait le id sélectionné ainsi que son contenu, pas juste le contenu.

Sauf que ça, c'était pour le javascript. Le jQuery est différent.

Avec lui, on utilise html() pour récupérer le contenu. Il remplace innerHTML.

Donc, en enlevant "inner" devans ton html, cela fonctionne selon ta première solution :
http://jsfiddle.net/mzcaLoah/4/

Si je résume, tu as une condition qui regarde si l'élément qui a un id "chapeau" a un contenu qui est "Alice". Si oui, il y a une alerte qui dit "Cheshire". C'est parfait !

---

Sinon, ta 2ème solution fonctionnerait si tu l'avais mis comme cela :
http://jsfiddle.net/mzcaLoah/5/

Le "contains" est plutôt bon, cela te permet de savoir si l'élément qui a un id "chapeau" a un contenu qui est "Alice". Sauf que le html d'après était de trop.

---

Enfin, disons que tu aurais voulu que ton alerte dise "Alice" sans le mettre directement dans l'alerte, tu aurais pu faire comme cela :
http://jsfiddle.net/mzcaLoah/6/

La première ligne sert à créer une variable qui va contenir le contenu à l'intérieur de l'élément qui a l'id "chapeau". La deuxième ligne sert a faire une alerte qui va dire cette variable.

---

Peut-être que tu l'as compris en lisant le reste, mais quand le html() est vide et qu'on a rien mis à l'intérieur, c'est souvent quand on "prend" le html. On le donne à une variable quelconque pour le réutiliser.

Quant le html() a un contenu comme html("Alice") ou html("Cheshire") ? Il peut y avoir 2 raisons.

Soit c'est écrit comme cela :
if ( $("#chapeau").html("Alice") ) {action si condition respectée;}
Et on se retrouve à vérifier si le contenu est bel et bien Alice.

Soit c'est écrit comme cela, sans condition :
$("#chapeau").html("Cheshire");
Et là, le contenu de "chapeau" est transformé en "Cheshire".
Si si, je le jure, regarde ici :
http://jsfiddle.net/mzcaLoah/7/

Donc on a 3 options possible, récupérer le html d'un élément, vérifier si le html d'un élément est bel et bien ce qu'on pense et transformer le html d'un élément en autre chose. Pas mal, non?

---

Et maintenant, si je te donne ce JSFiddle et je te dits « Je veux qu'il y ait une alerte qui dise "Alice", sans que tu écrives directement Alice dans l'alerte. Tu dois toucher seulement au jquery/javascript, pas au HTML. En plus, je veux qu'il soit écrit seulement Alice, sans balise autour ! ».

JS à utiliser : http://jsfiddle.net/mzcaLoah/8/

Tu pense avoir une idée?

Haaan, mais j'avais pas participé ici

Du coup, pour le second exo, voici mon résultat :

Spoiler:

Valt > Utiliser les regex pour le principe pourquoi pas haha, mais en vrai c'est quand même pas pratique . Mais je salue pour l'exercice xD

Coucou!

J'aimerais bien participer à la mission mais j'ai pas compris ce que tu voulais en faite.

Bonjour,

Comme Marie cette mission m'intéresse, mais je ne comprends pas bien ce que tu attends de nous

Bouh!

En fait, ce sont des petits exercices pour apprendre quelques petites bases de javascript. D'ailleurs, Nihil vient de réussir le dernier exercice alors je vais passer au suivant. Val nous a sorti un truc assez compliqué et Cheshire a tendance à plutôt utiliser le jquery à la place du javascript de base, mais je jure qu'on a rien vu de compliqué jusqu'à maintenant u_u

Pour le moment, on a vu que :

- Pour sélectionner un élément qui a un id, on utilise document.getElementById("NomDuId")

- Pour sélectionner des éléments qui ont une certaine class, on utilise document.getElementsByClassName("NomDeLaClass")

- Pour rajouter du CSS à un élément, on le sélectionne (voir plus haut), puis on ajoute .style.propriété("NouvelleValeur"), ce qui donne quelque chose comme cela :
document.getElementById("NomDuId").style.color = "blue"

- On termine toujours une instruction par ; ce qui donnerait ceci :
document.getElementById("NomDuId").style.color = "blue";

- Pour changer le html à l'intérieur d'un certain élément, on le sélectionne (voir plus haut), puis on ajoute .innerHTML = "HTML qui remplace le html à l'intérieur de l'élément" ce qui donnerait ceci :
document.getElementById("NomDuId").innerHTML = "HTML qui remplace le html à l'intérieur de l'élément";

- Pour changer uniquement le texte d'un élément sans toucher au html, on le sélectionne (voir plus haut), puis on ajoute .innerText = "Texte qui remplace le texte à l'intérieur de l'élément" ce qui donnerait ceci :
document.getElementById("NomDuId").innerText = "Texte qui remplace le texte à l'intérieur de l'élément";

- Pour récupérer le texte ou html d'un élément sans rien changer, c'est très similaire. On utiliserait quelque chose comme ce qui suit plus bas. Ce qui dit littéralement "ma variable NomDeMaVariable est égale au text de l'élément NomDuId" :

Code:

var NomDeMaVariable = document.getElementById("NomDuId").innerText;

Si on veut faire une alerte (c'est très utile pour tester un js pour savoir ce qui fonctionne etc.), on fonctionne comme ceci :

Code:

/*Si on utilise des variables*/
var NomDeMaVariable = "Bonjour!";
alert(NomDeMaVariable);

ou

/*Si on met directement le texte dans l'alerte*/
alert("Bonjour");

Et en regardant

Voilà pour le moment ^^

Maintenant, prochain défi!

J'ai ceci en HTML :

Code:

<div id="Baba">
  <span class="Ba" id="chapeau"><b>Alice</b></span>
  <span class="Ba">au</span>
  <span class="Ba">Pays</span>
  <span class="Ba">des</span>
  <span class="Ba">Merveilles</span>
</div>

Je veux faire des calculs! Si je vous demande de me dire combien de span avec la class "Ba" il y a dans ce code, êtes vous capable de trouver comment faire le javascript?

Voilà le fiddle avec lequel vous pouvez vous amuser pour trouver la solution :
http://jsfiddle.net/mzcaLoah/9/

Ce concept de missions est très intéressant. ^^ Je me permets de proposer ma réponse au défi donné !

Hey =)

Je réponds juste avec cent ans de retard !

Merci du récap' Onyx, j'avais du mal à voir où tu voulais en venir, en fait, et du coup, le récap' permet un petit coup de projecteur ^^

Du coup, j'ai tenté !

Ahoy!

Oh, j'aime beaucoup ces idées de mission. J'avoue que je n'ai jamais tenté de bidouiller du JS donc, je m'y suis un peu lancée en mode "partons à l'aventure, matelot".

Bonjour !

Vous êtes tous super bons *o*

Celle qui résume a écrit:- Pour sélectionner un élément qui a un id, on utilise document.getElementById("NomDuId")

- Pour sélectionner des éléments qui ont une certaine class, on utilise document.getElementsByClassName("NomDeLaClass")

- Pour rajouter du CSS à un élément, on le sélectionne (voir plus haut), puis on ajoute .style.propriété("NouvelleValeur"), ce qui donne quelque chose comme cela :
document.getElementById("NomDuId").style.color = "blue"

- On termine toujours une instruction par ; ce qui donnerait ceci :
document.getElementById("NomDuId").style.color = "blue";

- Pour changer le html à l'intérieur d'un certain élément, on le sélectionne (voir plus haut), puis on ajoute .innerHTML = "HTML qui remplace le html à l'intérieur de l'élément" ce qui donnerait ceci :
document.getElementById("NomDuId").innerHTML = "HTML qui remplace le html à l'intérieur de l'élément";

- Pour changer uniquement le texte d'un élément sans toucher au html, on le sélectionne (voir plus haut), puis on ajoute .innerText = "Texte qui remplace le texte à l'intérieur de l'élément" ce qui donnerait ceci :
document.getElementById("NomDuId").innerText = "Texte qui remplace le texte à l'intérieur de l'élément";

- Pour récupérer le texte ou html d'un élément sans rien changer, c'est très similaire. On utiliserait quelque chose comme ce qui suit plus bas. Ce qui dit littéralement "ma variable NomDeMaVariable est égale au text de l'élément NomDuId" :

Code:

var NomDeMaVariable = document.getElementById("NomDuId").innerText;

Si on veut faire une alerte (c'est très utile pour tester un js pour savoir ce qui fonctionne etc.), on fonctionne comme ceci :

Code:

/*Si on utilise des variables*/
var NomDeMaVariable = "Bonjour!";
alert(NomDeMaVariable);

ou

/*Si on met directement le texte dans l'alerte*/
alert("Bonjour");

Si on veut compter une quantité d'éléments spécifique, on les sélectionne (voir plus haut), puis on ajoute .length ce qui donnerait ceci :
document.getElementsByClass("NomDeLaClass").length;
ou ceci si je veut le mettre en alerte ou en variable :

Code:

var NomDeMaVariable = document.getElementsByClass("NomDeLaClass").length;
alert(NomDeMaVariable);

Voilà pour le moment ^^

Maintenant, prochain défi!

Cette fois-ci, je ne vous demande pas nécessairement de changer quelque chose, mais plutôt de m'expliquer quelque chose.

Comme l'a dit zaw, on peut mettre du texte et des variables dans une alerte.

On a vu que les alertes étaient comme cela :

Code:

var NomDeMaVariable = "Bonjour !";
alert(NomDeMaVariable);

Ou

alert("Bonjour !");

Et Zaw qui nous as combiné une alerte qui contenait une variable et un texte l'a fait comme ça :

Code:

var NomDeMaVariable = "Bonjour, ";
var AutreNomDeMaVariable = document.getElementsByClassName("Ba").length;

alert(NomDeMaVariable + "mon nom est Pomette LaVerte et j'ai " + AutreNomDeMaVariable + " ans.");

Ce qui donnait ce texte :
Bonjour, mon nom est Pomette LaVerte et j'ai 5 ans.


Ma question est donc la suivante :
Pourquoi certaines choses sont entre " " (ou entre ' ') et d'autres non?
C'est pareil pour document.getElementsByClassName("Ba"); à savoir pourquoi je mets Ba entre " " ?

C'est rigolo ^^

Je participe !

Jvais éviter de dire que c'est facile alors que si ça se trouve ma réponse sera fausse x)

Est-ce toujours d'actualité ?

La mission n'est plus "en cours" (personne ne l'anime / elle n'est plus mise en avant), mais tu peux tout à fait participer :)