Découvrez les bases du langage JavaScript, le langage indispensable pour dynamiser vos pages WEB.
JavaScript est un langage de programmation, plus précisément un langage de script, qui permet notamment de manipuler les éléments d'une page Web, d'interagir avec le navigateur internet et de réagir aux actions de l'utilisateur. C'est un langage qui s'exécute du "côté client", c'est à dire sur l'ordinateur de l'internaute contrairement à des langages comme PHP qui s'exécute sur le serveur web distant ("côté serveur"). S'il le souhaite, l'utilisateur peut donc désactiver la prise en compte du JavaScript dans le menu "Options" de son navigateur internet. Contrairement à certaines idées reçus, JavaScript est un langage moderne et qui offre de nombreuses fonctionnalités puissantes comme le développent orienté objet ou encore la gestion des exceptions. Il vous permettra de réaliser des sites internet aux interfaces bluffantes.
JavaScript (initialement appelé LiveScript) a été créé en 1995 par Brendan Eich pour le navigateur Netscape. De son côté, Microsoft sort sa propre implémentation de JavaScript le JScript. A cette époque, chaque navigateur veut imposé son standard. Ceci permet de comprendre pourquoi il est encore si difficile de faire du code JavaScript qui fonctionne sur tous les navigateurs. Incompris, le langage JavaScript a longtemps été considéré comme un langage jouet ou de seconde zone aux possibilités limitées. Tous les développeurs web pensaient le maîtriser alors qu'ils ne connaissaient en fait qu'une petite partie de ses incroyables possibilités. Dans les années 2000, les développeurs du monde entier poussent un cri de soulagement avec la sortie d'excellents framework JavaScript comme Prototype, YUI, jQuery, Mootools... qui permettent enfin de ne plus se soucier des versions des navigateurs. On parle alors de framework JavaScript cross-browser, c'est à dire de framework compatible avec la plupart des navigateurs courants. Avec l'arrivée du Web 2.0 et d'AJAX, le JavaScript devient à la mode à tel point qu'il est aujourd'hui quasi incontournable pour la réalisation d'applications internet avancées.
Voici quelques idées reçus sur JavaScript tirées de l'excellent livre de Christophe Porteneuve : "Bien développer pour le Web 2.0" dont nous vous recommandons fortement la lecture (disponible dans notre boutique)
La confusion vient bien entendu de la similarité des noms. Cependant JavaScript n'a rien à voir avec Java si ce n'est un coup de pub marketing de Netscape et Sun. JavaScript est un langage de script conçu pour être utilisé avec très peu de contraintes et une grande agilité. Même si certains concepts object (objets, instances, méthodes, ...) sont présents, les aspects plus complexes (héritage, interface, encapsulation...) ne sont pas pris en charge.
A l'origine, JavaScript était lent (encore plus si on l'exécutait sous IE...), comme l'étaient d'autres langages comme Java ou Ruby. Mais la technologie du langage ainsi que les moteurs JavaScript des navigateurs ont fortement évolué. Aujourd'hui JavaScript permet de réaliser des effets et animations avec une fluidité étonnante.
Javascript se base sur le standard ECMA-262 définie par le comité ECMA.
Pour ajouter du code JavaScript dans une page HTML il faut utiliser la balise <script>. Voici un exemple de code qui peut être ajouté dans une page HTML :
<script type="text/javascript"> // ici j'insère mon code javascript </script>
On peut également vouloir, pour des questions d'organisation et de lisibilité, placer son code JavaScript dans un fichier à part. Les fichiers qui contiennent du code JavaScript doivent être créer avec l'extension .js (ex: monFichierJavascript.js). Dans ce cas, on utilise la syntaxe suivante pour charger le fichier .js dans sa page HTML :
<script type="text/javascript" src="monFichierJavascript.js"></script>
Si votre fichier .js ne se trouve pas dans le même répertoire que votre page HTML, mais dans un autre repertoire (par exemple monRepertoireJs) alors il sera nécessaire d'indiquer le chemin du fichier complet avec son répertoire.
<script type="text/javascript" src="/monRepertoireJs/monFichierJavascript.js"></script>
Le code JavaScript et les balises scripts qui vont avec doivent être ajoutés dans la balise <head> (c'est à dire l'entête) de la page HTML. C'est la manière propre d'insérer du JavaScript dans une page. Voici un exemple :
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr"> <head> <title>Petits rappels javascript | yoja-web.com <script type="text/javascript" src="monFichierJavascript.js"></script> </head> <body> .... le contenu de la page </body> </html>
Il peut cependant arriver dans certains cas que vous n'ayez pas accès directement à la zone head de votre page HTML (comme pour une boutique Zlio par exemple). Vous n'aurez alors pas d'autres choix que d'insérer le JavaScript dans le corps de votre page HTML.
Dans cette rubrique, nous discuterons de différentes méthodes pour optimiser notre code JavaScript.
La compression de votre code JavaScript va vous permettre de créer des fichiers plus légers et donc plus faciles et rapides à télécharger. La compression doit toujours s'effectuer en dernière étape de votre développement, une fois que vous avez parfaitement testé votre code JavaScript et que ce dernier est prêt pour être utilisé en "production". Il existe différents types de compresseurs de code JavaScript que l'on peut classer en 2 grandes catégories :
compresseurs (ex JSMin) qui se contentent de supprimer les caractères superflus de votre code comme les espaces ou les commentaires. Ce type de compresseurs est généralement moins performant mais possède l'avantage de ne pas nécessiter un respect strict des normes de codage JavaScript. En d'autres termes, en utilisant un compresseur "non obstrusif" vous aurez beaucoup plus de chance que votre code JavaScript compressé fonctionne du premier coup.
compresseurs (ex Packer) qui suppriment tous les caractères superflus et en plus minimisent la taille de tous les mots de votre code. Ce type de compresseurs est généralement plus performant mais nécessite un respect strict des normes de codage pour pouvoir fonctionner.
Ce compresseur JavaScript va tout simplement supprimer tous les caractères inutiles de votre code. Vous trouverez la documentation en ligne à l'adresse http://www.crockford.com/javascript/jsmin.html ainsi qu'une démonstration à l'adresse http://fmarcia.info/jsmin/test.html.
// is.js
// (c) 2001 Douglas Crockford
// 2001 June 3
// is
// The -is- object is used to identify the browser. Every browser edition
// identifies itself, but there is no standard way of doing it, and some of
// the identification is deceptive. This is because the authors of web
// browsers are liars. For example, Microsoft's IE browsers claim to be
// Mozilla 4. Netscape 6 claims to be version 5.
var is = {
ie: navigator.appName == 'Microsoft Internet Explorer',
java: navigator.javaEnabled(),
ns: navigator.appName == 'Netscape',
ua: navigator.userAgent.toLowerCase(),
version: parseFloat(navigator.appVersion.substr(21)) ||
parseFloat(navigator.appVersion),
win: navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
is.ie = is.ns = false;
is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
is.ie = is.ns = false;
is.gecko = true;
}
qui donne compressé avec JSMin
var is={ie:navigator.appName=='Microsoft Internet Explorer',java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',ua:navigator.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||parseFloat(navigator.appVersion),win:navigator.platform=='Win32'}
is.mac=is.ua.indexOf('mac')>=0;if(is.ua.indexOf('opera')>=0){is.ie=is.ns=false;is.opera=true;}
if(is.ua.indexOf('gecko')>=0){is.ie=is.ns=false;is.gecko=true;}
Packer est l'un des plus puissants compresseurs JavaScript. Il se base sur un algorithme très complexe qui transforme totalement votre code pour le rendre le plus condensé possible. Il est particulièrement recommandé pour le code de taille importante alors que JSMin peut s'avérer meilleur pour du code de petite taille. Il est disponible à l'adresse http://dean.edwards.name/packer/ (Pour une compression maximale il faut cocher les cases Base62 encode et Shrink variables) .
Le code précédent compressé avec Packer
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('g 1={4:2.7==\'h i j\',k:2.l(),5:2.7==\'m\',3:2.n.o(),p:8(2.9.q(r))||8(2.9),s:2.t==\'u\'}1.a=1.3.6(\'a\')>=0;b(1.3.6(\'c\')>=0){1.4=1.5=d;1.c=e}b(1.3.6(\'f\')>=0){1.4=1.5=d;1.f=e}',31,31,'|is|navigator|ua|ie|ns|indexOf|appName|parseFloat|appVersion|mac|if|opera|false|true|gecko|var|Microsoft|Internet|Explorer|java|javaEnabled|Netscape|userAgent|toLowerCase|version|substr|21|win|platform|Win32'.split('|'),0,{}))