Partage

FAQ et liens utiles

A lire avant de poster

strucky

8 octobre 2008 à 11:15:51

Liens utiles

MDN JavaScript
jQuery (cours OC)

FAQ

Comment faire pour que mon lien s'ouvre dans une autre fenêtre ? pour faire un pop-up quoi..
Comment faire fonctionner une propriété css contenant un trait d'union sur un élément en javascript ?
Comment appeler une fonction située dans la page mère à partir d'une popup ?
Pourquoi les attributs onclick sur les balises <option> ne marchent pas sur Internet Explorer ?
Pourquoi lorsque je tape plusieurs fois la même balise, la prévisualisation de mon bbcode se trompe ?
Comment avoir le curseur positionné dans un champ de mon formulaire au chargement de la page ?
Comment récupérer/modifier le contenu d'un élément (DIV par exemple) ?
Pourquoi je n'arrive pas à accéder à un élément de la page avec getElementById() ou autres méthodes similaires ?
Comment faire pour redéfinir des fonctions natives de javascript ?
Comment rajouter des événements dynamiquement, c'est à dire sans les mettre dans les balises ?
Comment accéder à l'attribut class d'une balise ?
Comment ajouter un lien "Imprimer cette page" ?
Comment inclure du javascript dans un document xHhtml et rester valide ?

JAVASCRIPT/<acronym title="Asynchronous JavaScript And XML">AJAX</acronym>

-
Edité par Benzouye 2 septembre 2020 à 11:37:57

strucky

8 octobre 2008 à 11:18:53

Auteur : Kels

Comment faire pour que mon lien s'ouvre dans une autre fenêtre ? pour faire un pop-up quoi..

Le (X)HTML ne permet pas de le faire, il faut utiliser du javascript.

<a href="page.htm" onclick="window.open(this.href); return false;">

Ce script permet d'ouvrir la page "page.html" dans une nouvelle fenêtre.

Pour plus d'informations et des options comme par exemple la taille de la fenêtre qui va s'ouvrir, consultez ce site.

Attention tout de même à ne pas abuser des pop-up, les net-addicts que vous êtes le savent: trop de pop-up tue la navigation.

Sachez également que certains navigateurs récent, je pense à firefox, ont le pouvoir de forcer les pop-up à s'ouvrir dans un nouvel onglet et non une nouvelle fenêtre.

strucky

8 octobre 2008 à 11:20:42

Comment faire fonctionner une propriété css contenant un trait d'union sur un élément en javascript ?

Réponse :

En supprimant le tiret, et en mettant la 1ère lettre du mot suivant en majuscule.

Exemples :

// Un margin-left
document.getElementById('id').style.marginLeft = '2em';

// Un border-right-color
document.getElementById('id').style.borderRightColor = '#00f';

strucky

8 octobre 2008 à 11:22:19

Auteur : Boo2M0rs0

Comment appeler une fonction située dans la page mère à partir d'une popup ?

Réponse : Il faut utiliser la propriété window.opener qui donne accès à la page mère.
Par exemple:

window.opener.ajouter_smiley(':)');

strucky

8 octobre 2008 à 11:23:19

Auteur : Boo2M0rs0

Pourquoi les attributs onclick sur les balises <option> ne marchent pas sur Internet Explorer ?

Réponse :
L'attribut onclick sur une balise option est invalide et Internet Explorer a donc raison de refuser de fonctionner.
Il est plus logique (et souvent plus pratique) d'utiliser l'évènement onchange sur la balise select.

Exemple dans le cas d'un bbcode:

<select id="couleur">
  <option onclick="bbcode('[couleur=rouge]','[/couleur]');">Rouge</option>
  <option onclick="bbcode('[couleur=vert]','[/couleur]');">Vert</option>
  <option onclick="bbcode('[couleur=blue]','[/couleur]');">Bleu</option>
  <!-- etc. -->
</select>

Devient (en utilisant value):

<select id="couleur" onchange="bbcode('[couleur=' + this.value + ']','[/couleur]');">
  <option value="rouge">Rouge</option>
  <option value="vert">Vert</option>
  <option value="bleu">Bleu</option>
  <!-- etc. -->
</select>

strucky

8 octobre 2008 à 11:24:11

Auteur : Boo2M0rs0

Pourquoi lorsque je tape plusieurs fois la même balise, la prévisualisation de mon bbcode se trompe ?

Réponse :
C'est dû à la gourmandise des quantificateurs: l'expression régulière cherche à englober le plus de caractères possibles:

'a zzz b a zzzz b'.replace(/a(.+)b/g,'[]$1[/]');
//donne: "[] zzz b a zzzz [/]"

En plaçant un "?" après le quantificateur, la gourmandise est inversée:

'a zzz b a zzzz b'.replace(/a(.+?)b/g,'[]$1[/]');
//donne: "[] zzz [/] [] zzzz [/]"

strucky

8 octobre 2008 à 11:25:16

Comment avoir le curseur positionné dans un champ de mon formulaire au chargement de la page ?

Réponse :

Il suffit d'utiliser la méthode focus() de javascript.

Exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>focus sur le champ de recherche au chargement</title>
<meta name="generator" content="Bluefish 1.0.7"/>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
input#recherche:focus{ background: #ffc; }
</style>
</head>
<body onload="document.forms['form'].recherche.focus()">
 
  <form id="form" action="" method="post">
    <label for="recherche">Rechercher </label>
    <input type="text" id="recherche" name="recherche" />
  </form>
 
</body>
</html>

Dans :

document.forms['form'].recherche.focus()

form est l'id du formulaire.
recherche est le name du champ devant recevoir le focus.

strucky

8 octobre 2008 à 11:27:15

Auteur : Boo2M0rs0

Pourquoi mes pages affichées grâce à XMLHttpRequest contiennent des "?" en lieu de place des caractères accentués ?

Réponse :
Tous vos fichiers sont sûrement encodés en ISO-8859-15. Or, le fichier téléchargé par XMLHttpRequest est considéré par défaut comme étant encodé en utf-8.

Il faut donc modifier le fichier téléchargé pour indiquer explicitement son encodage, grâce à un header php en début de code:

<?
header('Content-type: text/html; charset=ISO-8859-15');

strucky

8 octobre 2008 à 11:28:25

Auteur : Boo2M0rs0

Pourquoi mon script d'actualisation (ajax) ne marche pas sur Internet Explorer alors que je n'ai aucune erreur ?

Réponse :
Si vous utilisez la méthode "GET", Internet Explorer va mettre le fichier téléchargé en cache et n'en téléchargera pas un nouveau à chaque actualisation.

Il faut rajouter des header en début de code php dans la page qui est téléchargée pour interdire la mise en cache:

//Exemple 1676. Interdire la mise en cache avec header()
//http://fr.php.net/manual/fr/function.header.php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date du passé

strucky

8 octobre 2008 à 11:29:21

Auteur : Boo2M0rs0

Pourquoi mes "+" se transforment en espaces ?

Réponse :
Si vous ne le faites pas déjà, il faut utiliser la fonction escape pour protéger les variables (issues des formulaires par exemple).
Par exemple, si on fait:

xhr.send('variable1=' + document.formulaire.champs.input);

En tapant "blabla&variable2=foo" dans le formulaire,
On va obtenir la chaîne:

Citation

variable1=blabla&variable2=foo

soit deux variables au lieu d'une !

C'est pour cela qu'il faut utiliser escape pour remplacer les caractères spéciaux (comme le "&"):

xhr.send('variable1=' + escape(document.formulaire.champs.input));

Seulement, cette fonction est boguée et ne remplace pas le caractère spécial "+", il faut donc la corriger:

(function () {
  var escape_old = escape; //ancienne fonction escape
  escape = function (texte)
  {
    return escape_old(texte).replace(/\+/g,'%2B');
  };
})();

(ce morceau de code est à placer en début des sources pour "corriger" escape).

strucky

30 octobre 2008 à 20:33:12

Auteur : Thunderseb

Comment récupérer/modifier le contenu d'un élément (DIV par exemple) ?

Réponse :
Il suffit d'utiliser la propriété innerHTML, à la base développé par Microsoft, et désormais compatible avec tous les navigateurs. innerHTML permet de définir le contenu d'un élément directement avec du code HTML :

// Récupérer le contenu
var contenu = document.getElementById("monDiv").innerHTML;

// Définir le contenu
document.getElementById("monDiv").innerHTML = "Du texte en <strong>gras</strong>";

Des opérations comme += peuvent être utilisées pour ajouter du contenu :

document.getElementById("monDiv").innerHTML += ", et en <em>italique</em>";

Il existe aussi la propriété innerText, mais reconnue uniquement par Internet Explorer. Les autres navigateurs reconnaissent textContent :

var element = document.getElementById("monDiv");
var texte = "";

if (element.innerText) { // IE
    texte = element.innerText;
} else { // Pas IE
    texte = element.textContent;
}

Pour ajouter du HTML, il vaut mieux utiliser les méthodes de manipulation du DOM alliées avec createElement etc.

strucky

20 avril 2009 à 19:20:54

Auteur : Golmote

Pourquoi je n'arrive pas à accéder à un élément de la page avec getElementById() ou autres méthodes similaires ?

Réponse :

Il est probable que vous soyez en train d'appeler un élément qui n'a pas encore été chargé... Alors forcément, ça coince...
Pour s'assurer que l'élément est bien chargé lorsque le javascript est exécuté, il y a deux solutions.

1) Soit mettre tout sous forme de fonctions dans la partie "head" de la page.
Exemple :

<head>
<script type="text/javascript">
function appel() {
  div = document.getElementById("conteneur");
  div.style.textAlign = "center";
}
</script>
</head>

Ici, la fonction sera appelée soit avec <body onload="appel();"> , soit par une action du visiteur. Donc le chargement sera terminé dans les deux cas, et l'élément accessible.

2) Soit vous placez le code dans la partie "body", et là méfiez-vous ! Il faut que le code soit situé après l'élément appelé.
Exemple :

<body>
<div id="conteneur">
<!-- Contenu du div -->
</div>
<script type="text/javascript">
div = document.getElementById("conteneur");
div.style.textAlign = "center";
</script>
</body>

strucky

20 avril 2009 à 19:31:55

Auteur : Timot

Comment faire pour redéfinir des fonctions natives de javascript ?

Il arrive que l'on veuille redéfinir certaines fonctions natives de javascript dans certains cas.

Par exemple, imaginez quelqu'un ayant repris le fameux script de lightbox et l'a modifié de sorte que l'on puisse afficher du texte facilement.

Il souhaiterait pouvoir redéfinir la fonction alert() afin qu'elle affiche le message dans la lightbox plutôt que la boite habituelle du navigateur.

Voila à quoi ressemblerait son code:

var CS_alert = alert; //On sauvegarde l'ancien code d'alert
alert = function(str_){
  LightBox(str_); //Fonction d'affichage dans une lightbox
}

Remarque : la sauvegarde du code d'alert (var CS_alert = alert()) permet d'en conserver une copie.
Par exemple si on désire juste rajouter certaines instructions à la fonction alert() mais qu'on veuille quand même pouvoir appeler la fonction initale dans certains cas.

Par exemple :

var CS_alert = alert; //On sauvegarde l'ancien code d'alert
alert = function(str_){
  if(condition) {
     CS_alert(str_);
  }
}

Ainsi, par exemple, certains redéfinissent la fonction alert pour qu'elle ne puisse afficher que 30 alert() à la suite, pour éviter les plantages du navigateur.

Voila donc, ça peut être utile à certains

strucky

20 avril 2009 à 19:39:10

Auteur : Timot

Comment rajouter des événements dynamiquement, c'est à dire sans les mettre dans les balises ?

Il y a plusieurs manières de le faire, la plus propre reste d'utilise l'addEventListener.
Cependant IE nécessite lui attachEvent pour faire la même chose.
Donc :

if( obj.attachEvent) {
    obj.attachEvent('on' + event,fct);
}
else {
    obj.addEventListener(event,fct,true);
}

Cependant, dans les fonctions ou le mot clé this est utilisé, par exemple onmouseover="this.src='nouvelle source'", IE ne peut pas le gérer avec ce code, on est obligé d'attacher l'événement avec obj.evenement = ...

Voila donc une fonction qui permet d'attacher une fonction à un événement :

function addEvent(obj_, event_, fct_) {
    if(obj_.addEventListener) {
        obj_.addEventListener(event_, fct_, true);	
    }
    else if(obj_.attachEvent) {
        if(/this\./g.test(fct_.valueOf())){
            obj_['on' + event_] = fct_;
        }
        else {
            obj_.attachEvent('on' + event_, fct_);
        }
    }
}

Exemples :

addEvent(window, "load", Ini);
addEvent(document.getElementById("test"), "click", Test);

Pour pouvoir appeler les fonctions avec des arguments, il faut passer par une fonction anonyme qui se chargera d'appeler notre fonction avec ses arguments

Exemples :
addEvent(window, "load", function(event) { Ini(param, param2); });
A noter que le paramètre event est automatiquement envoyé à la fonction qu'on lui donne.

A noter aussi que l'on n'est pas obligé de passer par une fonction nommé et que l'on peut mettre toute nos instructions dans la fonction anonyme :

addEvent(window, "load", function(event) {
    document.getElementById("test").style.color = "blue";
    alert("Vive les lapins !!");
    onLoaded = true;
});

strucky

20 avril 2009 à 19:42:41

Auteur : Nesquik69

Comment accéder à l'attribut class d'une balise ?

En Javascript, le mot class est déjà réservé, ce qui fait que l'on ne peut pas accéder à la classe d'une balise par ce moyen :

alert(document.getElementById('test').class);

Pour y avoir accès il faut utiliser le mot className :

alert(document.getElementById('test').className);

strucky

20 avril 2009 à 19:49:37

Auteur : cerium50

Comment ajouter un lien "Imprimer cette page" ?

Il suffit de tester la méthode print, et d'afficher un lien, ou tout autre élément auquel on associe window.print() à l'événement onclick.

<p id="print"></p>

<script type="text/javascript">
//<![CDATA[
if(window.print) { //si le client connait la méthode print()
    document.getElementById('print').innerHTML = '<a href="#" onclick="window.print(); return false;">Imprimer cette page.</a>'; //on affiche un lien dans la balise qui a pour id 'print' et le tour est joué
	}	
//]]>
</script>

strucky

20 avril 2009 à 19:51:49

Auteur : cerium50

Comment inclure du javascript dans un document xHhtml et rester valide ?

Il faut dans ce cas utiliser les CDATA qui sont prévus à cet effet (ils permettent dans un document XML de ne pas interpréter le code entre ces balises), (le but de la méthode consistant à mettre des commentaires n'est pas la validité mais de masquer le code aux anciens navigateurs) :

<script type="text/javascript">
//<![CDATA[

/*tout plein de code javascript ici*/

//]]>
</script>

partner23

27 juin 2013 à 0:41:18 - Message modéré pour le motif suivant : illégal

rga

27 décembre 2013 à 15:19:05

bonjour,

je cherchais une astuce pour avoir des caractères accentués dans les alert() JS. et j'ai trouvé l'astuce grâce à ce site :

si ça peut servir à d'autres

Winter Is Coming - Explorez le forum : votre problème a déjà dû être traité ailleurs

GrosSacASacs

26 février 2014 à 7:48:28 - Message modéré pour le motif suivant : Message complètement hors sujet

datface

19 mars 2014 à 22:10:54 - Message modéré pour le motif suivant : Message complètement hors sujet

zidma

rga

21 mars 2014 à 9:43:18 - Message modéré pour le motif suivant : Message complètement hors sujet

Winter Is Coming - Explorez le forum : votre problème a déjà dû être traité ailleurs

annedelimal

22 avril 2014 à 19:18:27 - Message modéré pour le motif suivant : Message complètement hors sujet

Faire de sa passion son métier

Monomotapa

1 mai 2014 à 20:44:32 - Message modéré pour le motif suivant : Message complètement hors sujet

Monomotapa

1 mai 2014 à 20:48:28 - Message modéré pour le motif suivant : Message complètement hors sujet

hobamiagegi

5 juillet 2014 à 15:01:04 - Message modéré pour le motif suivant : Message complètement hors sujet

xam4lor

30 novembre 2014 à 18:38:36 - Message modéré pour le motif suivant : Message complètement hors sujet

KikiFanck

24 avril 2016 à 13:35:49 - Message modéré pour le motif suivant : Toute forme de publicité est interdite

KikiFanck

24 avril 2016 à 13:36:58 - Message modéré pour le motif suivant : Toute forme de publicité est interdite

Stéréotaxiste

5 novembre 2016 à 12:15:34 - Message modéré pour le motif suivant : Message complètement hors sujet

Programmez un casse-brique 2D | Une API REST avec Symfony 3 | Pointeurs restreints en C

FAQ et liens utiles

A lire avant de poster

Liens utiles

FAQ

JAVASCRIPT/<acronym title="Asynchronous JavaScript And XML">AJAX</acronym>

Supprimer

Modérer

Signaler le message aux modérateurs