Partage

FAQ et liens utiles

A lire avant de poster

8 octobre 2008 à 11:15:51

Liens utiles


Liste des sites dédiés au JavaScript


  • MDC (fr/en) : pratique pour ce qui touche à Firefox/Gecko.
  • MSDN (en) : pour tout le JS relatif à Internet Explorer (JSCript).
  • quirksmode (en) : site assez complet sur tout ce qui touche au JS.

Bibliothèques les plus utilisées



Liens vers des tutos




FAQ


JAVASCRIPT




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




Pour étoffer cette FAQ, vous pouvez apporter votre contribution dans ce sujet

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
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. :D

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.
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';
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(':)');
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>
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 [/]"
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.
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');
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é
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).
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.
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>
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 ;)
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;
});
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);
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>
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>
27 juin 2013 à 0:41:18 - Message modéré pour le motif suivant : illégal


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 :D

Winter Is Coming - Explorez le forum : votre problème a déjà dû être traité ailleurs
26 février 2014 à 7:48:28

les liens de la FAQ sont cassés
19 mars 2014 à 22:10:54

comment calculer le tepmps de chargement d'une page

zidma
21 mars 2014 à 9:43:18

@datface:

via chrome, avec l'extension Page load time;

via firefox, avec l'extension PageSpeed;

 et ici, tu as un calcul apparemment : http://www.editeurjavascript.com/scripts/scripts_temps_2_98.php

-
Edité par rga 21 mars 2014 à 9:45:09

Winter Is Coming - Explorez le forum : votre problème a déjà dû être traité ailleurs
22 avril 2014 à 19:18:27

 Bonjour, j'ai essayé d'inclure du java script avec CDATA dans ma feuille de slyle:

Le but, avoir la largeur d'écran pour faire du responsive design pour les areas sur une photo en fonction de la taille de la photo(impossible en CSS3)

<xsl:variable name="largeur">
  <!-- obtenir la largeur de la fenêtre-->
  <script type="text/javascript">
    //<![CDATA[
      document.write($(window).width());
    //]]>
  </script>
</xsl:variable>  

Lorsque j'affiche la variable:

<xsl:value-of select="$largeur"/>

J'obtiens à l'écran le code, non le contenu, càd la largeur d'écran

Merci d'avance pour l'aide



Faire de sa passion son métier
1 mai 2014 à 20:44:32

Bonjour,

Je ne suis qu'un amateur : merci de votre indulgence !

Je voudrais habiller le lecteur audio html5 en installant un outil trouvé sur internet basé sur jQuery. Le résultat fonctionne avec tous les logiciels et supports, sauf avec Chrome sur PC (mais marche avec Chrome sur téléphone Android).

Sur Chrome/PC, le chargement est très long (30" à 50"). D'après le "timeline" de l'inspecteur Chrome (tests en effaçant l'historique après chaque chargement, pour simuler un premier visiteur) Chrome charge 2.2 MB du mp3 (au lieu de quelques Bytes seulement quand il marche) puis se met en pause et au bout d'un certain temps, et à la 3e tentative, affiche la durée totale et me donne la main.

Si, pendant qu'il est en pause, je sollicite Chrome (en réduisant et rouvrant la fenêtre, ou en affichant la source), alors le chargement se fait immédiatement.
Si après un premier chargement (donc après 40" par ex.) je n'efface pas l'historique, le second chargement est immédiat; le 3e aussi, etc.
Dans certaines conditions qui ne me sont pas claires (si je n'efface pas l'historique, après un échec, si le fichier est aussi ouvert dans une autre fenêtre ou un autre navigateur, ...) même le lecteur html5 de Chrome ne fonctionne plus (en entrant l'URL de l'audio dans la fenêtre Chrome).

En local, et en navigation privée, j'ai le même problème la 1ère fois, puis tout fonctionne.

Page de test :
http://www.revue-secousse.fr/ATest10bis/Sks12-Gregoire-Audio-Test20.htm

PS. J'ai les mêmes problèmes en implantant le lecteur originel sur mon site. Même problème aussi avec un tout autre lecteur que j'ai essayé en alternative.

Un grand merci d'avance à qui pourra m'aider : je patine depuis 3 semaines...

1 mai 2014 à 20:48:28

Pardon, j'ai mal posté mon sujet...

5 juillet 2014 à 15:01:04

Comment disposer des chiffres de façons aléatoires sur une grille dans le cas du jeu bataille navale?

Bonjour à tous, je me prénomme Stéphane et je suis en train de réaliser un projet personnel: le jeu de la bataille navale. Je souhaiterais pouvoir placer les chiffres réprésentants mes batiments de guerre de façon aléatoire sur la grille 10*10. Voici un extrait du code: 

var plateau=[
 [0,0,0,0,0,0,0,0,0,0],
 [0,5,0,0,0,0,2,2,2,2],
 [0,5,0,1,0,0,0,0,0,0],
 [0,0,0,1,0,0,0,0,0,0],
 [0,0,0,1,0,0,0,0,0,0],
 [0,0,0,1,0,0,0,0,0,0],
 [0,0,0,1,0,0,0,0,0,0],
 [0,0,0,0,0,0,0,3,0,0],
 [4,4,4,0,0,0,0,3,0,0],
 [0,0,0,0,0,0,0,3,0,0]];
 

La flotte du jeu comprends:

1 porte-avions (5 cases)

1 croiseur (4 cases)

1 contre-torpilleur (3 cases)

1 sous-marin (3 cases)

1 torpilleur (2 cases) 

Voici mes coordonnées: hoba1992@live.fr

 Merci d'avance

30 novembre 2014 à 18:38:36

Bonjour,  mon code ne marche pas puisque à chaque fois que je clique sur un bouton, la page se recharge, le code se relance et le chronomètre repart à 0.
Serait-il possible de faire quelque chose pour que la page ne se recharge pas à chaque fois ?

Merci d'avance !!

Code html:

<html>
    <head>
   <script type="text/javascript" src="Java Script.js"> </script>
   <link rel="stylesheet" href="css.css" />
<title>Le nombre mystère</title>
    </head>
    <body>
<form name="form2">
   <center><u style = "color: red"><b><h1 style = "color: red">I. Le nombre mystere</h1></b></u></center>
<br>
<u style = "color: #0101DF"><h2 style = "color: #0101DF">Objectif: </h2><br></u>
<p>Trouver le nombre mystere, il se situe entre 1 et 100</p>
<p name = "nbutilisateur2" value = ""></p>
<span id = "reponsecompar"></span>
<br>
   <p>Entrez votre nombre ici: </p>
            <input type="text" id="solution">
<p>  </p>
            <button onclick="traiter()">Appuyez sur ce boutton pour valider votre choix</button><br><br>
<p>Temps: </p><span id="time">00:00:00</span>
</form>
    </body>
</html>
Dans un autre document, j'ai ce "texte" JavaScript:
//Le nombre choisi par l'ordinateur (se situe entre 100 et le nombre maximum choisi par l'utilisateur)
var nbordi = Math.floor(Math.random() * 51);
var traiter = function() { 
    var nbutilisateur = document.getElementById("solution").value;
   //Si le nombre choisi par l'utilisateur n'est pas un nombre, cette fonction va s'executer
    if(isNaN(nbutilisateur)) {
        alert("Le texte que vous avez entré n'est pas un nombre");
    } 
   //Sinon, commencer les tests
    else {
 //si le nombre de l'utilisateur est supérieur au nombre de l'ordi, faire ça
  if (nbutilisateur > nbordi) {
     alert("Le nombre que vous avez sélectionné est trop grand");
  }
  else if (nbutilisateur < nbordi) {
     alert("Le nombre que vous avez entré est trop petit");
  }
  else {
     alert("Vous avez gagné");
  }
}
}
//Chronomètre:
var time = "0:0:0";
function changeTime() {
        var timeSplited = time.split(':');
        var hour = timeSplited[0];
        var minute = timeSplited[1];
        var second = timeSplited[2];
        second++;
        if(second == 60) {
            second = '0';
            minute++;
            if(minute == 60){
                minute = '0';
                hour++;
            }
        }
   hour = '0' + hour;
   hour = hour.toString().substr(-2, 2);
   minute = '0' + minute;
   minute = minute.toString().substr(-2, 2);
   second = '0' + second;
   second = second.toString().substr(-2, 2);
        time = hour + ":" + minute + ":" + second;
        document.getElementById('time').innerHTML = time;
    }
var instance = self.setInterval(changeTime ,1000);
--xam4lor