Bon, j'ai fini par trouver, après avoir ouvert wamp, il fallait mettre les 2 fichiers (dsl_script.html et dsl_script.php) dans le fichier C/wamp/www, et ouvrir le fichier dsl_script.html dans le localhost.
Je pense qu'un simple rappel de cette procédure php ne serait pas superflu dans ce cours de Javascript.
- Edité par Vincent FLORES 14 août 2017 à 20:37:22
Bon, j'ai fini par trouver, après avoir ouvert wamp, il fallait mettre les 2 fichiers (dsl_script.html et dsl_script.php) dans le fichier C/wamp/www, et ouvrir le fichier dsl_script.html dans le localhost.
Je pense qu'un simple rappel de cette procédure php ne serait pas superflu dans ce cours de Javascript.
Bonjour,
En fait, il s'agissait d'un exemple qui repose sur deux connaissances supplémentaires qui ne peuvent faire partie du cours:
php: qui est un "langage" assez complexe
et l'utilisation d'un "serveur local"
Sans oublier aussi, la notion de chemin absolu et chemin relatif et le html...
Quant à Wamp (Xamp pour Windows) son utilisation n'est pas aussi "simple" que vous tentez de l'expliquer.
D'une part, parce que ce logiciel permet utilise divers "scripts" (PHP, SQL, Apache...) et permet d'"émuler", en local, un site comme s'il était en ligne. D'autre part, parce ce logiciel permet pas mal de choses en modifiant certains fichiers d'initialisation, pour exemple l'"émulation" de plusieurs sites à partir de leur url écrite directement dans la barre de navigation du navigateur. Par extension, pour ce dernier exemple, on comprendra que tout n'est pas à mettre dans le dossier www et tout ne doit pas (forcément) se lancer via localhost. Dès que cela devient complexe, il est important d'organiser les choses.
Mais ceci est une autre histoire, le but de l'exercice étant de faire comprendre le fonctionnement de javascript.
Je n'ai jamais dit que le langage php était simple.
C'est vrai que l'auteur nous prévient, avant d'entamer le chapitre "XMLhttprequest", qu'il nous faudra lire les 2 premières parties du cours de php de Mathieu Nebra (1 semaine de travail au bas mot pour les néophytes).
C'est une très bonne chose de faire interagir le Javascript et le php, mais je pense qu'un simple rappel sur l'utilisation du php et du fonctionnement d'un serveur local, ne serait pas de trop. D'autant plus que les exemples qui suivent le nécessite vraiment, alors autant essayer de faciliter les choses, cela reste malgré tout un cours de Javascript, et un très bon cours avec de nombreux exemples qui plus est.
- Edité par Vincent FLORES 15 août 2017 à 16:00:46
Je suis actuellement en train d'effectuer l'exercice "Ecrire une boucle while qui execute un prompt" partie 1, chapitre 5.
J'ai fait :
var num;
prompt("Choisi un nombre entre 1 et 10");
while (num != 5){
prompt("Non ce nest pas cela ! essaye encore ?");
alert("Félicitation");
}
Ça fonctionne (en tt cas sur firefox) mais lorsque je regarde la solution, je me rends compte que "alert" se trouve en dehors de la boucle. Donc, je la sors, mais là mon code ne fonctionne plus !!! Pourquoi ?
Y aurait-il une bonne âme pour éclairer ma lanterne ?
Je suis actuellement en train d'effectuer l'exercice "Ecrire une boucle while qui execute un prompt" partie 1, chapitre 5.
J'ai fait :
var num;
prompt("Choisi un nombre entre 1 et 10");
while (num != 5){
prompt("Non ce nest pas cela ! essaye encore ?");
alert("Félicitation");
}
Ça fonctionne (en tt cas sur firefox) mais lorsque je regarde la solution, je me rends compte que "alert" se trouve en dehors de la boucle. Donc, je la sors, mais là mon code ne fonctionne plus !!! Pourquoi ?
Y aurait-il une bonne âme pour éclairer ma lanterne ?
Merci infiniment, d'avance !
Bonjour nancy, alors là c'est juste un problème d'algo. Si j'interprete ton code en francais cela veut dire: -soit un nombre quelconque; -afficher le promt une 1èrer fois -tant que ce nombre n'est pas egal à 5 ->afficher le prompt ->afficher "felicitation"
Maintenant je vais te poser les questions: quand est ce que dans ton code recupères-tu le nombre entrer par l'utilisateur? quand est ce que sortira t'on de cette boucle comme ce nombre ne sera jamais égal à 5 (d'après ton code)?
- Edité par 2boubacar10 30 novembre 2017 à 17:45:26
Pour l'exercice ici, j'ai une solution alternative :
function askNumber() {
var nbnb=parseInt(prompt('entrez un nombre :'));
if (isNaN(nbnb)) {
nbnb=askNumber();
}
return nbnb;
}
alert('Le nombre est : ' + askNumber());
Je me doute que :
La récursivité sera vue plus tard
La récursivité est un puits de mémoire
Mais malgré tout si un nouveau découvreur de la programmation a cette idée, il peut être bon de le féliciter pour son esprit contre-intuitif (et puis les boucles, c'est pas beau).
Je viens vous demander un coup de main si possible pour un exercice où il faut remplir les blancs, en effet il n'y a pas de correction/solution sur celui-ci et je n'arrive pas à trouver la dernière case.
J'ai pourtant, je pense, compris comment fonctionnait le code mais je me trompe encore donc si quelqu'un aurait la solution svp, dans l’exercice ont doit vérifier si les inputs du formulaire ont été remplis :
var myFramework = {};
myFramework["checkThisForm"] = function(form) {
var inputs = form.querySelectorAll("{ICI}");
for (var i=0, c=inputs.length; i<c; i++) {
if (!inputs[i].value) {
return false;
}
}
return true;
};
Voilà au niveau de ICI que je ne trouve pas, j'ai essayer "input[text]" "input[type=text]" par exemple pour récupérer tout les inputs du form mais ce n'est pas ça.
Un input.text ne fonctionne pas aussi mais cela parait logique comme ce n'est pas une classname.
Merci à vous
EDIT : Solution trouvé c'était bien "input[type=text]" mais comme ça "input[type='text']".
Pour exemple l'utilisation d'un do while en solution me semble tout indiqué :
function askNumber() {
var number;
do{
number = prompt("Entrez un nombre : ");
}while(isNaN(parseInt(number)));
return number;
}
alert('Le nombre est : ' + askNumber());
- Edité par julienhermann 11 février 2018 à 14:26:59
Je suis sur l'exercice "Editer les cellules du tableau" du cours "Dynamisez vos sites web avec JavaScript".
var chemin_td = document.getElementsByTagName('td');
for (var i = 0, c = chemin_td.length; i<c;i++){
chemin_td[i].addEventListener('click', changeContent);
}
function changeContent(){
if (this.getAttribute("data-state")) return;
var contenu = this.innerHTML;
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.value = contenu;
this.innerHTML = '';
this.appendChild(newInput);
this.setAttribute("data-state", "edit");
newInput.focus();
newInput.addEventListener('blur',function(){
this.parentNode.innerHTML = this.value;
this.parentNode.removeChild(newInput);
});
}
Il me manquait la ligne newInput.focus(). Celle-ci je l'ai comprise. Mais il me manquait aussi les lignes avec l'attribut data-state. Globalement, je vois bien que sans cet attribut, re-cliquer sur ma ligne crée des erreurs... mais je ne comprends pas du tout comment il s'utilise et à quoi il sert exactement.
Je suis sur l'exercice "Editer les cellules du tableau" du cours "Dynamisez vos sites web avec JavaScript".
var chemin_td = document.getElementsByTagName('td');
for (var i = 0, c = chemin_td.length; i<c;i++){
chemin_td[i].addEventListener('click', changeContent);
}
function changeContent(){
if (this.getAttribute("data-state")) return;
var contenu = this.innerHTML;
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.value = contenu;
this.innerHTML = '';
this.appendChild(newInput);
this.setAttribute("data-state", "edit");
newInput.focus();
newInput.addEventListener('blur',function(){
this.parentNode.innerHTML = this.value;
this.parentNode.removeChild(newInput);
});
}
Il me manquait la ligne newInput.focus(). Celle-ci je l'ai comprise. Mais il me manquait aussi les lignes avec l'attribut data-state. Globalement, je vois bien que sans cet attribut, re-cliquer sur ma ligne crée des erreurs... mais je ne comprends pas du tout comment il s'utilise et à quoi il sert exactement.
Pour l'exercice concerné, je te poste le code, tel que je l'ai commenté, en espérant que tu comprendras mieux :
<script>
var output = document.getElementById('output'), cells;
if (output) {
cells = output.getElementsByTagName('td');
for (var i=0, c=cells.length; i<c; i++) {
cells[i].onclick = function() {
if (this.getAttribute("data-state")) return; // Si data-state est présent, on ne fait rien
// Car ça veut dire qu'on est déjà en train d'éditer la cellule
var text = this.innerHTML; // On récupère le contenu de la cellule
var input = document.createElement("input"); // On crée un input
input.value = text;
input.type = "text";
this.innerHTML = ''; // On efface le contenu de la cellule
this.appendChild(input); // On place l'input dans la cellule,
this.setAttribute("data-state", "edit"); // On indique que la cellule est en cours d'édition
input.focus(); // On place le curseur dans l'input (c'est important)
input.onblur = function() { // Quand l'input perd le focus...
this.parentNode.removeAttribute("data-state"); // On supprime l'attribut
this.parentNode.innerHTML = this.value; // Et on remplace la contenu de la cellule (et donc l'input) par la valeur de l'input
};
};
}
}
</script>
Je ne sais pas si ce code n'a pas été mis volontairement, mais il est possible pour l'exercice "http://odyssey.sdlm.be/javascript/40/partie2/chapitre2/stripbr.htm" d'utiliser une boucle for qui ncrémente.
var divOut = document.getElementById("output"); var brElt = divOut.querySelectorAll("br"); for (var i = 0, c = brElt.length; i < c; i++) { brElt[i].parentNode.removeChild(brElt[i]); }
C'est en dehors de votre discussion, mais j'ai vu que depuis quelques temps, on utilisait plutôt let que var pour définir les variables. Je me pose donc la question de savoir si les cours de Javascript d'Openclassroom ont bien été mis à jour pour tenir compte de ce genre de changement.
Comme je souhaite les revoir pour mieux structurer mon code sur un projet que j'ai commencé il y a longtemps, ça m'embêterait de faire encore du "vieux" code.
Sinon, auriez-vous des liens vers de tutoriels et des exercices plus à jour ?
- Edité par doudoulolita 14 octobre 2018 à 15:44:23
Alors d'abord bravo pour ce cours, qui pour le moment (chapitre 2 ) est très bien réalisé.
J'aimerais avoir vos avis concernant justement l'exercice cité plus haut sur l'édition d'un tableau.
ayant cru comprendre qu'on gagnait en performance en privilégiant la manipulation du DOM sur innerHTLM, et en ne connaissant pas l'usage de l'attribut datat-state, j'ai proposé ce code :
function CreateNode(name, object){
let node = document.createElement(name);
if(object){
for(let id in object){
node.setAttribute(id,object[id]);
}
}
return node;
}
let texte;
const node=CreateNode('input',{id:'Jules',type:'text',
onfocus:'select()',
size:10}),
tabletd=document.querySelectorAll('#output td'),
taille=tabletd.length;
for(let i=0;i<taille;i++){
tabletd[i].addEventListener('click',function(e){
texte=this.replaceChild(node,this.firstChild);
node.value=texte.textContent;
node.focus();
});
}
node.addEventListener('click',function(e){
e.stopPropagation;});
node.addEventListener('blur',function(e){
texte.textContent=node.value;
node.parentNode.replaceChild(texte,node);});
dans l'exercice partie 2 Chapitre 3 Modifier une liste avec prompt, j'ai une solution qui fonctionne, mais je ne sais pas si c'est correct.
Je me mélange les pinceaux entre les notions de getElementsByTag ,et ById, je ne maîtrise pas l'objet Event encore, donc c'est en tâtonnant que j'ai trouvé ça, est ce que ça semble correct ?
var output, list;
output = document.getElementById('output');
list = output.getElementsByTagName('ol')[0];
list.addEventListener('click',function(e){
var text = prompt('Modifier le texte :');
e.target.innerHTML = text;
}, true);
Je suis en train de suivre le cours "dynamisez vos sites web..". C'est excellent: clair, progressif et super bien réalisé (les QCM et questionnaires en drag&drop !!). Mes débuts (un peu laborieux) dans l'univers du code
L'exercice consiste à réaliser une fonction qui demande à l'utilisateur de rentrer un nombre avec une prompt(). Une fois le nombre rentré, la fonction va convertir la chaîne de caractères entrée un nombre, et elle vérifiera s'il s'agit bien un nombre. Si ce n'est pas un nombre, la fonction redemande à l'utilisateur d'en entrer un. Dès que le nombre est correct, la fonction le retourne avec return.
Le corrigé:
function askNumber(){var number;while(isNaN(number)){ number =parseInt(prompt('Entrez un nombre entier positif'));}return number;}
Ce que je ne saisi pas : en faisant "number = parseInt(prompt('Entrez un nombre entier positif'));" la fonction parseInt converti une chaine de caractères en nombre (si j'ai bien compris), donc la valeur de la variable "number" devient forcément un nombre non ? donc il n'y a pas de sens à "vérifier qu'il s'il s'agit bien un nombre." ?
Soit je comprends mal l'énoncé soit un truc logique sur les variables m'échappe, j'avoue que je sèche sur la compréhension de cet exercice Peut être que l'un d'entre vous pourra m'éclairer Merci d'avance!
Pour le TP "convertir un nombre en toutes lettres", il y a un petit bug : votre script est incapable à détecter un nombre décimal. (La raison : méthode Prompt toujours convertit l'entrée en String).
Voici est une solution :
while (userEntry = prompt('Indiquez le nombre à écrire en toutes lettres (entre 0 et 999) :')) {
if (parseFloat(userEntry) % 1 !== 0) { alert( 'Veuillez entrer un nombre entier compris entre 0 et 999.'); } else { alert(num2Letters(parseInt(userEntry, 10))); } }
Ingénieur Environnement/Eau/Web passionné par la musique, le théâtre et l'éducation.
Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero