Ce cours vous permettra de rendre vos pages dynamiques et interactives afin d'améliorer l'expérience de l'utilisateur sur le Web.
Je vous invite à poster vos questions sur le cours ici. J'essaierai de répondre régulièrement, mais n'hésitez pas à discuter entre vous et à vous entraider.
Je viens de débuter le cours "Créez des pages web interactives avec JS", et le lien de la solution au problème en fin de chapitre "Découvrez le DOM" ne fonctionne pas (Error 404). Même si l'exercice ne présente pas de difficulté particulière, je voudrai simplement comparer mon code avec la solution proposée.
Merci
Thierry
PS : vos cours sont vraiment très bien conçus ! Encore bravo
Dans l'exercice "Gestion des attributs" du chapitre 2, je pense que les lignes 24 a 26 doivent être effaces pour ne pas nous faire tromper, nous étudiants. Étant donne qu'il nous est demande de la rajouter après.
Sur ce merci Mr Baptiste pour ce cours très attendu pour ma part...
Merci pour ce cours, il est vraiment bien pour moi qui me replonge dans le javascript.
Je voulais signaler une petite faute de frappe dans le formulaire d'exemple du chapitre 6, il appel le fichier "cous.js" au lieu de "cours.js". C'est gênant pour tester.
Bonjour, j'ai un problème avec la question 6 du deuxième Quizz. Je ne donnerais pas la réponse ici, mais aucunes des quatre réponses ne correspondent. Ou alors l'une des réponse qui semble être la bonne est assez mal formulé.
j'ai un problème au niveau du code ajax et php de mon projet (réservation siège de cinéma ) : Une fois le client réserve un siège , il choisit le numero de la place dans la liste déroulante , une fois choisie le numero du siège est supprimé de notre liste déroulante . tout ça ça marche mais le problème c que cette procédure ne s'affiche pas en temps réel , il faut à chaque fois que le client actualise la page pour que la place soit supprimée de la liste déroulante . On a cree 2 tables :
je suis à l'exercice "Modification des couleurs" du chapitre "Donnez du style à vos éléments".
Dans la correction je ne comprends pas l'intérêt d'une boucle "for" pour selectionner toutes les balises <div> car par définition getElementsByTagName("div") sélectionne toutes les balises <div> ????
Ce fonctionnement me parait être une répétition...
A l'origine j'ai réalisé cet exercice sans la boucle "for" et effectivement ça ne fonctionne pas.
Pourquoi document.getElementsByTagName("div") seul, ne fonctionne pas??
Quand tu récupères tes balises <div>, elles sont mises dans un tableau qu'il faut ensuite parcourir avec une boucle for pour changer la couleur du background.
A+
- Edité par Philippe2463 21 mai 2016 à 22:59:34
La chute n'est pas un échec, l'échec c'est de rester là où on est tombé!
J'en suis à l'activité_2 de ce cours et je planche dessus depuis plus de 10 h.
Je suis arrivé à créer le bouton "ajouter un lien".
J'arrive à le cacher en cliquant dessus et afficher un formulaire javascript et à rendre les champs obligatoire.
Cependant, je suis bloqué pour que les nouvelles saisies dans le formulaire apparaissent dans la page.
Vous pouvez m'aider svp?
Nelf
PS/ je suis reparti de la correction de l'activité 1
Bonsoir Nelf,
As tu fais tous les exercices des paragraphes "À vous de jouer" de chaque chapitre ? Ils permettent de bien dégrossir les difficultés que l'on peut rencontrer par la suite et en l'occurrence pour l'activité 2.
A+
- Edité par Philippe2463 22 mai 2016 à 19:45:24
La chute n'est pas un échec, l'échec c'est de rester là où on est tombé!
Je ne sais pas trop comment faire pour poster le sujet suivant, qui ne répond pas à l'appel à l'aide précédent, je suis désolée !
On m'a orientée vers vous suite à une interrogation lorsque j'ai suivi le cours sur les effets avancés de CSS, et plus spécifiquement les effets sur les hover. Je me suis exercée en créant un grid de 9 cases à effets hover (un carré de 3 cases sur 3 cases) : lorsqu'on passe la souris sur une image d'une des cases, un effet de transition a lieu et on arrive sur un texte explicatif avec une couleur de fond. En gros, on a une image au-dessus et on arrive à un texte "en-dessous" grâce à un effet sur le hover. Seulement ces effets ne marchent pas sur les IPhone et IPad bien qu'il n'y ait aucun pb avec les tablettes Samsung qui sont pourtant des tablettes tactiles.
J’ai vu en recherchant qu’on pouvait résoudre ce problème avec la fonction ontouchstart="" que l’on met au niveau de la balise body : <body ontouchstart="">. J'ai essayé et oh miracle, cela marche très bien sur les IPhone et Ipad, continue de bien fonctionné sur les tactiles Androïd et les tactiles Windows. Pas de problème non plus sur Safari, Opera, Chrome, Mozilla, Edge et IE9.
Puis-je en savoir d’avantage sur cette fonction ? En quoi consiste-t’elle exactement ? Comment fonctionne-t'elle ? Est-ce une fonction reconnue par les standards du web ?
Car quoiqu’on en dise, lors d’un développement il faut penser à la manière dont on va pouvoir le faire fonctionner sur des tactiles. J’ai réussi à faire fonctionner ces fameux effets hover grâce à cette fonction ontouchstart="" sans réellement comprendre comment cela marchait, c'est ce qui me gêne. J’ai cherché sur le Web, je n’ai rien trouvé de très explicite sur cette fonction ontouchstart.
je suis en train de faire la troisième activité et je rencontre un problème assez gênant que je n'arrive pas à résoudre.
Quand je veux utiliser https://oc-jswebsrv.herokuapp.com/api/lien j'ai une erreur 400 Bad Request, j'ai beau chercher je ne comprends absolument pas d'où ça peut venir.
J'arrive à récupérer les liens mais après j'ai ce problème qui bloque tout le code.
Est-ce que quelqu'un a déjà rencontré ce problème et pourrait me conseiller.
function ajaxGet(url, callback) {
var req = new XMLHttpRequest();
req.open("GET", url);
req.addEventListener("load", function () {
if (req.status >= 200 && req.status < 400) {
// Appelle la fonction callback en lui passant la réponse de la requête
callback(req.responseText);
} else {
console.error(req.status + " " + req.statusText + " " + url);
}
});
req.addEventListener("error", function () {
console.error("Erreur réseau avec l'URL " + url);
});
req.send(null);
}
function ajaxPost(url, data, callback, isJson) {
var req = new XMLHttpRequest();
req.open("POST", url);
req.addEventListener("load", function () {
if (req.status >= 200 && req.status < 400) {
// Appelle la fonction callback en lui passant la réponse de la requête
callback(req.responseText);
} else {
console.error(req.status + " " + req.statusText + " " + url);
}
});
req.addEventListener("error", function () {
console.error("Erreur réseau avec l'URL " + url);
});
if (isJson) {
// Définit le contenu de la requête comme étant du JSON
req.setRequestHeader("Content-Type", "application/json");
// Transforme la donnée du format JSON vers le format texte avant l'envoi
data = JSON.stringify(data);
}
req.send(data);
}
Voici liensWeb.js
/*
Activité 3
*/
var listeLiens = [
{
titre: "So Foot",
url: "http://sofoot.com",
auteur: "yann.usaille"
},
{
titre: "Guide d'autodéfense numérique",
url: "http://guide.boum.org",
auteur: "paulochon"
},
{
titre: "L'encyclopédie en ligne Wikipedia",
url: "http://Wikipedia.org",
auteur: "annie.zette"
}
];
// Crée et renvoie un élément DOM affichant les données d'un lien
// Le paramètre lien est un objet JS représentant un lien
function creerElementLien(lien) {
var titreElt = document.createElement("a");
titreElt.href = lien.url;
titreElt.style.color = "#428bca";
titreElt.style.textDecoration = "none";
titreElt.style.marginRight = "5px";
titreElt.appendChild(document.createTextNode(lien.titre));
var urlElt = document.createElement("span");
urlElt.appendChild(document.createTextNode(lien.url));
// Cette ligne contient le titre et l'URL du lien
var ligneTitreElt = document.createElement("h4");
ligneTitreElt.style.margin = "0px";
ligneTitreElt.appendChild(titreElt);
ligneTitreElt.appendChild(urlElt);
// Cette ligne contient l'auteur
var ligneDetailsElt = document.createElement("span");
ligneDetailsElt.appendChild(document.createTextNode("Ajouté par " + lien.auteur));
var divLienElt = document.createElement("div");
divLienElt.classList.add("lien");
divLienElt.appendChild(ligneTitreElt);
divLienElt.appendChild(ligneDetailsElt);
return divLienElt;
}
ajaxGet(" https://oc-jswebsrv.herokuapp.com/api/liens", function (lien) {
var contenuElt = document.getElementById("contenu");
// Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
var listeLiens= JSON.parse(lien);
listeLiens.forEach(function (lien) {
var lienElt = creerElementLien(lien);
contenuElt.appendChild(lienElt);
});
});
// Crée et renvoie un élément DOM de type input
function creerElementInput(placeholder, taille) {
var inputElt = document.createElement("input");
inputElt.type = "text";
inputElt.setAttribute("placeholder", placeholder);
inputElt.setAttribute("size", taille);
inputElt.setAttribute("required", "true");
return inputElt;
}
var ajouterLienElt = document.getElementById("ajoutLien");
// Gère l'ajout d'un nouveau lien
ajouterLienElt.addEventListener("click", function () {
var auteurElt = creerElementInput("Entrez votre nom", 20);
var titreElt = creerElementInput("Entrez le titre du lien", 40);
var urlElt = creerElementInput("Entrez l'URL du lien", 40);
var ajoutElt = document.createElement("input");
ajoutElt.type = "submit";
ajoutElt.value = "Ajouter";
var formAjoutElt = document.createElement("form");
formAjoutElt.appendChild(auteurElt);
formAjoutElt.appendChild(titreElt);
formAjoutElt.appendChild(urlElt);
formAjoutElt.appendChild(ajoutElt);
var p = document.querySelector("p");
// Remplace le bouton d'ajout par le formulaire d'ajout
p.replaceChild(formAjoutElt, ajouterLienElt);
// Ajoute le nouveau lien
formAjoutElt.addEventListener("submit", function (e) {
e.preventDefault();
var url = urlElt.value;
// Si l'URL ne commence ni par "http://" ni par "https://"
if ((url.indexOf("http://") !== 0) && (url.indexOf("https://") !== 0)) {
// On la préfixe par "http://"
url = "http://" + url;
}
// Création de l'objet contenant les données du nouveau lien
var lien = {
titre: titreElt.value,
url: url,
auteur: auteurElt.value
};
ajaxPost("https://oc-jswebsrv.herokuapp.com/api/lien", lien, function () {
var lienElt = creerElementLien(lien);
// Ajoute le nouveau lien en haut de la liste
contenuElt.insertBefore(lienElt, contenuElt.firstChild);
// Création du message d'information
var infoElt = document.createElement("div");
infoElt.classList.add("info");
infoElt.textContent = "Le lien \"" + lien.titre + "\" a bien été ajouté.";
p.insertBefore(infoElt, ajouterLienElt);
// Suppresion du message après 2 secondes
setTimeout(function () {
p.removeChild(infoElt);
}, 2000);
}, true);
// Remplace le formulaire d'ajout par le bouton d'ajout
p.replaceChild(ajouterLienElt, formAjoutElt);
});
});
Merci de vos conseils pour me dire d'où vient mon problème d'erreur 400
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Where there is a shell, there is a way