Aller au menu - Aller au contenu
Inscris-toi au e-camp "Héberge ton jeu Facebook sur Azure" de Microsoft vendredi 25 mai à 13h30 !

FAQ et liens utiles

A lire avant de poster

Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne strucky # Posté le 08/10/2008 à 11:15:51
Jamais content !
Avatar

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/AJAX




Pour étoffer cette FAQ, vous pouvez apporter votre contribution dans ce sujet
Édité le 23/02/2011 à 11:37:57 par Shivaan
Publicité # Posté le 08/10/2008 à 11:15:51

Hors ligne strucky # Posté le 08/10/2008 à 11:18:52
Jamais content !
Avatar
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.
Code : JavaScript
1
<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.
Hors ligne strucky # Posté le 08/10/2008 à 11:20:42
Jamais content !
Avatar
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 :

Code : JavaScript
1
2
3
4
5
// Un margin-left
document.getElementById('id').style.marginLeft = '2em';

// Un border-right-color
document.getElementById('id').style.borderRightColor = '#00f';
Hors ligne strucky # Posté le 08/10/2008 à 11:22:19
Jamais content !
Avatar
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:
Code : JavaScript
1
window.opener.ajouter_smiley(':)');
Hors ligne strucky # Posté le 08/10/2008 à 11:23:18
Jamais content !
Avatar
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:
Code : HTML
1
2
3
4
5
6
<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):
Code : HTML
1
2
3
4
5
6
<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>
Hors ligne strucky # Posté le 08/10/2008 à 11:24:10
Jamais content !
Avatar
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:
Code : JavaScript
1
2
'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:
Code : JavaScript
1
2
'a zzz b a zzzz b'.replace(/a(.+?)b/g,'[]$1[/]');
//donne: "[] zzz [/] [] zzzz [/]"
Édité le 08/10/2008 à 11:26:02 par strucky
Hors ligne strucky # Posté le 08/10/2008 à 11:25:15
Jamais content !
Avatar
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 :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!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 :
Code : JavaScript
1
document.forms['form'].recherche.focus()


form est l'id du formulaire.
recherche est le name du champ devant recevoir le focus.
Hors ligne strucky # Posté le 08/10/2008 à 11:27:15
Jamais content !
Avatar
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:
Code : PHP
1
2
<?
header('Content-type: text/html; charset=ISO-8859-15');
Hors ligne strucky # Posté le 08/10/2008 à 11:28:24
Jamais content !
Avatar
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:Code : PHP
1
2
3
4
//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é
Hors ligne strucky # Posté le 08/10/2008 à 11:29:21
Jamais content !
Avatar
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:
Code : JavaScript
1
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 "&"):
Code : JavaScript
1
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:
Code : JavaScript
1
2
3
4
5
6
7
(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).
Hors ligne strucky # Posté le 30/10/2008 à 20:33:12
Jamais content !
Avatar
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 :

Code : JavaScript
1
2
3
4
5
// 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 :

Code : JavaScript
1
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 :

Code : JavaScript
1
2
3
4
5
6
7
8
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.
Hors ligne strucky # Posté le 20/04/2009 à 19:20:54
Jamais content !
Avatar
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 :

Code : HTML
1
2
3
4
5
6
7
8
<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 :
Code : HTML
1
2
3
4
5
6
7
8
9
<body>
<div id="conteneur">
<!-- Contenu du div -->
</div>
<script type="text/javascript">
div = document.getElementById("conteneur");
div.style.textAlign = "center";
</script>
</body>
Hors ligne strucky # Posté le 20/04/2009 à 19:31:55
Jamais content !
Avatar
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:
Code : JavaScript
1
2
3
4
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 :
Code : JavaScript
1
2
3
4
5
6
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 ;)
Hors ligne strucky # Posté le 20/04/2009 à 19:39:10
Jamais content !
Avatar
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 :
Code : JavaScript
1
2
3
4
5
6
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 :
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
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 :
Code : JavaScript
1
2
3
4
5
addEvent(window, "load", function(event) {
    document.getElementById("test").style.color = "blue";
    alert("Vive les lapins !!");
    onLoaded = true;
});
Hors ligne strucky # Posté le 20/04/2009 à 19:42:41
Jamais content !
Avatar
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 :

Code : JavaScript
1
alert(document.getElementById('test').class);


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

Code : JavaScript
1
alert(document.getElementById('test').className);
Hors ligne strucky # Posté le 20/04/2009 à 19:49:36
Jamais content !
Avatar
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.
Code : HTML
1
2
3
4
5
6
7
8
9
<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>
Hors ligne strucky # Posté le 20/04/2009 à 19:51:48
Jamais content !
Avatar
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) :

Code : HTML
1
2
3
4
5
6
7
<script type="text/javascript">
//<![CDATA[

/*tout plein de code javascript ici*/

//]]>
</script>

Retour au forum "Javascript" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx