OVH Cloud OVH Cloud

Question Oui/Non

17 réponses
Avatar
Gloops
Bonjour tout le monde,

Voici un document HTML d'appel pour test, et une fenêtre popup, pour
poser à l'utilisateur une question à laquelle répondre par oui ou par
non, ce qu'en VB on fait par ret = MsgBox(strQuestion, vbYesNo).

ça fonctionne, sous Firefox sur Windows, je soumets l'ensemble à vos
commentaires pour optimisation, correction d'erreurs de portabilité ou
de lisibilité, autres commentaires ...

Notamment je vois deux questions :
1/ Je peux changer le texte d'un élément Label QuestionToAsk par
this.QuestionToAsk.innerHTML=window.opener.question;
aussi je me serais attendu aussi à pouvoir faire de même avec un bouton,
or là non je dois impérativement utiliser la syntaxe développée :
document.getElementById('Yes').value = strYes;
Est-ce que ça signifie quelque chose qui m'a échappé quant à la
différence entre ces deux contrôles ?
Le fait que dans le premier cas on a affaire à un nœud HTML et dans le
second à un attribut ?

2/ J'ai écrit une fonction à chaque étape :
- dans l'appelant une fonction openPopup pour ouvrir la popup
- dans la popup une fonction à l'ouverture pour traduire les intitulés
- dans la popup une fonction returnfunction pour la fermeture et pour
transmettre les valeurs
- dans l'appelant une fonction followPopup pour exploiter les valeurs
de retour.

Est-il exclu de faire comme dans VB une fonction qui reçoit un intitulé
de question, et qui retourne une valeur de réponse, qu'on pourrait
placer dans l'appelant entre l'instruction à exécuter avant de répondre
à la question, et celle à exécuter après, classiquement un test ?
Il me semble que ça améliorerait la lisibilité. ça aurait du reste sur
le VB l'avantage de plus de souplesse pour les intitulés des boutons.

Je vois qu'après réponse la fenêtre appelante affiche son message un peu
avant que la popup se soit fermée. Serait-il judicieux de mettre une
temporisation à cet endroit ? Le code continuerait-il de s'exécuter une
fois la fenêtre popup vraiment fermée ?

A part ça ma popup met pas loin d'une minute à s'afficher sur ma
machine, mais j'imagine que l'optimisation de cette affaire-là ne relève
pas de Javascript ?

================= TestYesNo.html ============================

<HTML><HEAD>
<TITLE>Test d'appel d'une pop-up</TITLE>
<SCRIPT language="Javascript">
var question;
var ret;
var culture="fr";
function openPopup(arg){
question=arg;
var w = window.open("YesNoQuestion.html", "pop1", "top=150, left=250,
height=250, width=300");
}
function followPopup(){
if(ret)alert("oui");
alert("Fin de traitement openPopup");
}
</SCRIPT>
</HEAD><BODY><form></form>
<input type="button" value="Appel popup" name="call" id="call"
onClick="openPopup('Qu\'est-ce qu\'on dit à la popup ?')" />
</BODY></HTML>


======================= YesNoQuestion.html =========================

<html><head>
<title>Yes/No question</title>
<script language="javascript">
var ret;
function opening()
{
this.QuestionToAsk.innerHTML=window.opener.question;
var strYes = "";
var strNo = "";
switch(window.opener.culture)
{
case "fr":
strYes = "Oui";
strNo = "Non";
break;
default:
strYes = "Yes";
strNo = "No";
}
document.getElementById('Yes').value = strYes;
document.getElementById("No").value = strNo;
}
function returnfunction()
{
window.opener.ret = ret;
this.close();
window.opener.followPopup();
}
</script>
</head>
<body onload="opening();">
<form>
<label id="QuestionToAsk" name="QuestionToAsk">Please allow the
script to ask you a question.</label><br />
<input type="button" value="Yes" name="yes" id="Yes"
onClick="ret=true;returnfunction()" />
<input type="button" value="No" id="No"
onClick="ret=false;returnfunction()" />
</form>
</body>
</html>

7 réponses

1 2
Avatar
Gloops
Le 19/07/2016 à 10:56, Gloops a écrit :
Est-ce que ça signifie que quelque chose m'a échappé quant à la
différence entre ces deux contrôles ?

Tes éléments input ne sont pas dans le FORM ?
Faute de frappe ? (typo)
Le fait que dans le premier cas on a affaire à un nœud HTML et dans le
second à un attribut ?

??? ce sont des IDs pour chaque, non ?
Alors pourquoi ça t'y fonctionnerait 1 coup sur 2 ?

Il faudra que je ressorte l'exercice que j'ai fait l'année dernière, ce
n'était pas avec XPath mais il s'agissait bien de désigner les
différentes parties d'un document XML.

Le getElementsByTagName de Javascript apparemment ne retrouve que les
éléments directement sous la racine ?
Ceux en dessous, il faut aller les chercher par childNodes ?
Je n'ai pas retrouvé ce que j'avais fait, alors je suis obligé de le
reconstruire. La recherche Google était semble-t-il "Javascript
parcourir le DOM"
Et on dirait que la technique employée s'appelle WebAPI, si je ne
confonds pas.
Vu comme ça a l'air demandé il vaut mieux le savoir.
Quelques particularités :
- entre deux balises HTML on a systématiquement une balise text ;
là-dedans se retrouve le texte qui figure entre les deux balises,
souvent un saut de ligne
- Le innerHTML d'une balise est récupéré comme un nœud à part, lui aussi
de type text
Je commence tout juste à réassimiler la syntaxe, je me rappelle qu'il
existe une notion de type de nœud qui a son importance pour parcourir
l'arborescence XML proprement.
Avatar
Guiche
Gloops Wrote in message:
Le 19/07/2016 à 10:56, Gloops a écrit :
Est-ce que ça signifie que quelque chose m'a échappé quant à la
différence entre ces deux contrôles ?

Tes éléments input ne sont pas dans le FORM ?
Faute de frappe ? (typo)
Le fait que dans le premier cas on a affaire à un n?ud HTML et dans le
second à un attribut ?

??? ce sont des IDs pour chaque, non ?
Alors pourquoi ça t'y fonctionnerait 1 coup sur 2 ?

Il faudra que je ressorte l'exercice que j'ai fait l'année dernière, ce
n'était pas avec XPath mais il s'agissait bien de désigner les
différentes parties d'un document XML.

Le getElementsByTagName de Javascript apparemment ne retrouve que les
éléments directement sous la racine ?
Ceux en dessous, il faut aller les chercher par childNodes ?

Bizarre à partir du moment où on accède rarement à un élément avec
parent.getElementsByTagName... MDN ( https://de
veloper.mozilla.org/fr/docs/Web/API/Element/getElementsByTagName)
dit que « la recherche porte sur le sous-arbre de l'élément
spécifié » et j'ai plutôt tendance à les croire.
Je n'ai pas retrouvé ce que j'avais fait, alors je suis obligé de le
reconstruire. La recherche Google était semble-t-il "Javascript
parcourir le DOM"
Et on dirait que la technique employée s'appelle WebAPI, si je ne
confonds pas.
Vu comme ça a l'air demandé il vaut mieux le savoir.
Quelques particularités :
- entre deux balises HTML on a systématiquement une balise text ;
là-dedans se retrouve le texte qui figure entre les deux balises,
souvent un saut de ligne
- Le innerHTML d'une balise est récupéré comme un n?ud à part, lui aussi
de type text
Je commence tout juste à réassimiler la syntaxe, je me rappelle qu'il
existe une notion de type de n?ud qui a son importance pour parcourir
l'arborescence XML proprement.

En effet tu peux facilement y accéder via la propriété nodeType de
chaque élément. Les valeurs intéressantes sont Node.ELEMENT_NODE
(une balise), Node.ATTRIBUTE_NODE (un attribut dans un début de
balise) et Node.TEXT_NODE (du texte seul, possiblement à côté
d'une balise <br> ou <i> par exemple).
----Android NewsGroup Reader----
http://usenet.sinaapp.com/
Avatar
Gloops
Le 04/08/2016 à 07:20, Guiche a écrit :
Ceux en dessous, il faut aller les chercher par childNodes ?

Bizarre à partir du moment où on accède rarement à un élément avec
parent.getElementsByTagName... MDN ( https://de
veloper.mozilla.org/fr/docs/Web/API/Element/getElementsByTagName)
dit que « la recherche porte sur le sous-arbre de l'élément
spécifié » et j'ai plutôt tendance à les croire.

Ben c'est a priori ce que j'aurais cru aussi, mais j'avais un document
avec une DIV et un P et aucun des deux n'apparaît dans
document.getElementsByTagName("*"), alors qu'on obtient HEAD, BODY, FORM
... six balises si je me rappelle bien.
J'ai essayé à partir de BODY, je n'obtenais pas non plus DIV ni P.
Par childNode en revanche je tombe dessus.
Je me serais gouré quelque part ?
En effet tu peux facilement y accéder via la propriété nodeType de
chaque élément. Les valeurs intéressantes sont Node.ELEMENT_NODE
(une balise), Node.ATTRIBUTE_NODE (un attribut dans un début de
balise) et Node.TEXT_NODE (du texte seul, possiblement à côté
d'une balise <br> ou <i> par exemple).

Ah oui, ça me cause :)
En faisant une recherche dessus je vais bien me rappeler si je dois
fournir les valeurs numériques.
Je ne me trompe pas c'est bien ça qu'on appelle WebAPI ?
Avatar
Guiche
Gloops Wrote in message:
Le 04/08/2016 à 07:20, Guiche a écrit :
Ceux en dessous, il faut aller les chercher par childNodes ?

Bizarre à partir du moment où on accède rarement à un élément avec
parent.getElementsByTagName... MDN ( https://de
veloper.mozilla.org/fr/docs/Web/API/Element/getElementsByTagName)
dit que « la recherche porte sur le sous-arbre de l'élément
spécifié » et j'ai plutôt tendance à les croire.

Ben c'est a priori ce que j'aurais cru aussi, mais j'avais un document
avec une DIV et un P et aucun des deux n'apparaît dans
document.getElementsByTagName("*"), alors qu'on obtient HEAD, BODY, FORM
... six balises si je me rappelle bien.
J'ai essayé à partir de BODY, je n'obtenais pas non plus DIV ni P.
Par childNode en revanche je tombe dessus.
Je me serais gouré quelque part ?

Je testerai demain mais bizarrement, je n'ai jamais rencontré ce
problème (bon, honnêtement, je n'ai écrit qu'une ou deux pages
qui utilisaient ça mais ça fonctionnait). J'aurai peut-être
besoin d'un exemple minimal et du nom du navigateur utilisé... La
seule chose dont je me souviens à propos de ça c'est qu'IE laisse
(parfois ? toujours ?) traîner des variables nommées selon les
(certains ?) objets nommés, je pense notamment à des input dans
des formulaires (grosse surprise quand ça ne fonctionne pas
ailleurs).
En effet tu peux facilement y accéder via la propriété nodeType de
chaque élément. Les valeurs intéressantes sont Node.ELEMENT_NODE
(une balise), Node.ATTRIBUTE_NODE (un attribut dans un début de
balise) et Node.TEXT_NODE (du texte seul, possiblement à côté
d'une balise <br> ou <i> par exemple).

Ah oui, ça me cause :)

Sous IE>=9 et Firefox (je ne sais plus si j'ai testé Chrome), ces
constantes sont reconnues.
En faisant une recherche dessus je vais bien me rappeler si je dois
fournir les valeurs numériques.
Je ne me trompe pas c'est bien ça qu'on appelle WebAPI ?

Pour moi ça reste de la bête manipulation du DOM (bien nécessaire
de nos jours), après MDN semble mettre ça dans cette catégorie.
J'y voyais avant tout des trucs comme localStorage,
etc.
----Android NewsGroup Reader----
http://usenet.sinaapp.com/
Avatar
Guiche
Guiche Wrote in message:
Gloops Wrote in message:
Je me serais gouré quelque part ?

Je testerai demain mais bizarrement, je n'ai jamais rencontré ce
problème (bon, honnêtement, je n'ai écrit qu'une ou deux pages
qui utilisaient ça mais ça fonctionnait).

Pas tout à fait « demain » mais voilà quelque chose qui
fonctionne. Vois-tu une différence avec ce que tu as
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript test</title>
<style>
div.c {
    padding: 5px;
    background-color: grey;
    margin-bottom: 10px;
}
p {
    background-color: lightgrey;
}
</style>
<script>
function empty() {
    var output = document.getElementById("output");
    while (output.hasChildNodes())
        output.removeChild(output.childNodes[0]);
}
function enumerate() {
    empty();
    var ol = document.createElement("ol");
    var tn = document.getElementById("tn").value;
    var from = document.getElementById("from").value;
    from = document.getElementsByTagName(from)[0];
    var elements = from.getElementsByTagName(tn);
    for (var i=0; i<elements.length; i++) {
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(elements[i].tagName));
        ol.appendChild(li);
    }
    document.getElementById("output").appendChild(ol);
    return false; //onsubmit
}
</script>
</head>
<body>
    <div class="c">
        <p>bonjour</p>
        <p>vous allez bien ?</p>
    </div>
    <form onsubmit="return enumerate()">
        <label>partir de:
            <select id="from">
                <option>html</option>
                <option>body</option>
                <option>div</option>
            </select></label>
        <label>Tag Name: <input type="text" id="tn" value="*"></label>
        <button>lister</button>
    </form>
    <div id="output">
    </div>
</body>
</html>
----Android NewsGroup Reader----
http://usenet.sinaapp.com/
Avatar
Gloops
Le 08/08/2016 à 06:22, Guiche a écrit :
Guiche Wrote in message:
Gloops Wrote in message:
Je me serais gouré quelque part ?

Je testerai demain mais bizarrement, je n'ai jamais rencontré ce
problème (bon, honnêtement, je n'ai écrit qu'une ou deux pages
qui utilisaient ça mais ça fonctionnait).

Pas tout à fait « demain » mais voilà quelque chose qui
fonctionne. Vois-tu une différence avec ce que tu as
?

Pour parler franchement j'ai oublié de sauvegarder la chose, et je n'ai
pas réussi à reproduire l'erreur, donc il ne me reste qu'un souvenir
d'un script qui n'a pu me sortir que six nœuds, et là-dedans il n'y
avait pas H1 ni P que j'avais ajoutés pour test.
Quand j'ai voulu le refaire, j'avais bien (à plat) tout le contenu de
l'arborescence par document.getElementsByTagName("*")
C'est vrai que c'est bête, il suffisait d'aller dans le répertoire
sélectionner le fichier, et taper Ctrl C, Ctrl V, avant d'essayer autre
chose.
Au moins ça m'a donné l'occasion de me remettre à flot au sujet de
WebAPI, ce qui peut toujours servir.
Avatar
Gloops
Le 08/08/2016 à 06:22, Guiche a écrit :
Guiche Wrote in message:
Pas tout à fait « demain » mais voilà quelque chose qui
fonctionne. Vois-tu une différence avec ce que tu as
?

Oui je vois la possibilité de filtrer :)
Et une insertion plus propre dans une DIV de destination.
Si on veut faire apparaître le texte c'est un peu compliqué, vu que pour
certaines balises on aura innerHTML, pour d'autres value, il doit bien y
en avoir pour lesquelles c'est Text ; peut-être pas Caption mais il
faudrait vérifier. On pourrait se fendre d'une fonction qui parcourt
tous les cas de figure -encore qu'il finirait bien par se glisser un
presque quelque part.
Avec WebAPI on trace toute l'arborescence y compris les attributs, donc
l'intitulé finit toujours par apparaître quelque part, même si c'est
dans un nœud enfant. Mais ce que je n'ai pas fait du coup c'est le faire
apparaître à un endroit unique.
1 2