|
Par
nod_
Mise à jour : 13/06/2009
670 visites depuis 7 jours,
classé 179/786
|
.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <title>Inclusion de fichier javascript dans une page</title> </head> <body> <!-- tout le contenu de la page --> <script src="fichier.js" type="text/javascript"></script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <title>Configuration rapide de notre application javascript</title> </head> <body> <!-- tout le contenu de la page --> <script src="fichier.js" type="text/javascript"></script> <script type="text/javascript"> var configuration = { id_mbr: 502, posts_par_page: 50 }; </script> </body> </html> |
1 2 3 4 5 6 | <script type="text/javascript"> <!-- // --> </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // on veut transformer cet objet en chaine JSON var objet = { variable1: "une chaine", variable2: 5 }; var chaine = JSON.stringify(objet); // renvoie la chaine '{"variable1":"une chaine","variable2":5}' // maintenant on veut un objet à partir d'une chaine JSON var objet2 = JSON.parse(chaine); // renvoie un objet ayant la même structure que la variable objet ci-dessus alert(objet2.variable1); // affiche : "une chaine" alert(objet2.variable2); // affiche : 5 |
1 2 3 4 5 6 7 8 9 10 11 | // pour exécuter une fonction sans paramètre setInterval(maFonction, 1000); // si il faut passer des paramètres à notre fonction du futur, il faut l'englober // dans une fonction anonyme qui contient l'appel à notre fonction paramétré. setInterval(function () { maFonction(parametre1, parametre2); }, 5000); // une méthode plus élégante qui malheureusement ne marche pas sous IE setTimeout(maFonction, 5000, parametre1, parametre2 /*, etc. */); |
1 | <a href="/supprimer/id" onclick="return confirm('Supprimer cet objet ?');">supprimer l'objet</a> |
1 | <button type="button" onclick="cacher();">Cachez moi !</button> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <title>Une page web</title> </head> <body> <h1>Titre de la page</h1> <p>Du contenu?</p> <p id="dynamique"></p> <p>Encore plus de contenu</p> <script type="text/javascript"> document.getElementById("dynamique").innerHTML = "ma chaine de caractères à rajouter avec javascript"; </script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // on oublie pas le mot-clef pour limiter la portée des variables var // une bonne habitude à prendre, garder une référence à l'objet dans une variable // pour éviter les document.getElementById consécutifs qui ralentissent le code liste = document.getElementById("todo"), // la chaine a rajouter à notre liste taches = "", // on déclare la variable d'incrémentation au début de préférence. // décalarée ici ou dans la boucle, elle a la même portée. i; for (i = 0; i < 100; i++) { // il est préférable d'utiliser des quotes simples quand on travaille avec du HTML // pas besoin d'échapper les innombrables " dans les attributs HTML taches += '<li id="tache_'+ (i+1) +'">tâche n°:'+ (i+1) +'</li>'; } // une fois la chaine crée on la rajoute à la page. C'est l'opération la plus coûteuse du script. liste.innerHTML = taches; |
1 2 3 4 5 6 7 8 9 10 11 12 | function monAction () { var element = document.getElementById("idElement"), color = "yellow"; // on ne veut pas avoir à réécrire "element.style." pour chaque propriété // on utilise alors with() pour "raccourcir". with (element.style) { color = "red"; zIndex = "20"; fontFamily = "Verdana"; } } |
1 2 3 4 5 6 7 8 9 | function monAction () { var element = document.getElementById("idElement"), style = element.style, // on crée une variable pour lever l'ambiguïté color = "yellow"; style.color = "red"; style.zIndex = "20"; style.fontFamily = "Verdana"; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | // on assigne une variable var variable = "une chaine"; // plus subtil, on assigne une fonction anonyme à une variable var maFonction = function () { // le code de la fonction return "valeur à retourner"; }; // on utilise plus souvent ce genre de chose Date.prototype.maFonctionPerso = function (format) { // on formate la date comme on veut }; // on crée un objet var monObjet = {/* les propriétés et méthodes */}; // un appel de fonction maFonction(); // ATTENTION : pour une déclaration de fonction pas besoin de point virgule ! function uneFonctionInnocente (param) { // code de la fonction } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | if (valeur === "un truc") { // exécuter du code } else if (valeur === "un autre truc") { // exécuter du code } else { // executer du code } for (var i = 0; i < 50; i++) { // instructions } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // Les tableaux // constructeur: Array var tab = [];// un nouveau tableau vide var tab = ['zéro','un','deux','trois'];// avec du monde dedans // Les objets // constructeur: Object var obj = {}; // un objet vide var obj = { // avec du monde dedans propriete: "valeur", methode:function () {} }; // Les expressions régulières // constructeur: RegExp var reg = /\d+/ig; // une regex |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // dans ces deux fonctions la variable "i" a exactement la même portée function uneBoucle () { // ici on déclare la variable dans la boucle, c'est pas le mieux for (var i = 0; i < 100; i++) { // du code } } function uneAutreBoucle () { var i; // il est préférable de déclarer _toutes_ les variables en même temps au début de la fonction for (i = 0; i < 100; i++) { // du code } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // pas de "var" : donc c'est une variable globale casper = "variable globale"; // il n'y a pas de fonction parente explicite alors c'est aussi une variable globale var variableGlobale = true; function topSecrete () { var casper = "fantôme"; alert(casper); } topSecrete(); // affiche : fantôme alert(casper); // affiche : variable globale |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function maFonction () { var variable1 = "", variable2 = [], variable3 = 0, variable4, variable5; function locale() { // dans cette fonction toutes les variables de la fonction parente // sont utilisables. De plus cette fonction est locale à «maFonction» } // ici variable4 et variable5 sont des variables locales de type "undefined" } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Une page toute gentille</title> </head> <body> <a href="/url/service/classique" onclick="vaChercherAjax();">Un vrai lien</a> <button type="button" onclick="actionImmediate();">Action !</button> <script src="mesScriptsExternes.js" type="text/javascript"></script> <script type="text/javascript"> var configuration = { utilisateur: "nod_", id: "fixe", age: "" }; // ou si on a défini un objet global ailleurs dans le code MonObjetGlobal.configuration = { utilisateur: "nod_", id: "fixe", age: "", sexe: "oh oui" }; </script> </body> </html> |
|
|
Les Bookmarklets ou comment modifier la page d'un site depuis la barre d'adresse |
|
|
Introduction |
|
|
Extensions pour chrome |
|
|
Une première extension ? |