JavaScript : Des fondamentaux aux concepts avancés

Ce livre sur Javascript est destiné à tous ceux qui se préoccupent de donner plus
d ’ interaction à leurs sites web. Il vise deux objectifs : tout
d’abord maîtriser les fondements de JavaScript afin d’élaborer les scripts les plus fréquemment utilisés sur le net, puis découvrir le nouveau
potentiel de JavaScript aussi bien grâce à son utilisation avec les feuilles de styles en cascade ( CSS ), le DHTML , AJAX qu’avec les bibliothèques
telles que Prototype ou Script.aculo.us .
Après avoir présenté la syntaxe de base, le livre prend appui sur des exemples significatifs (gestion des formulaires, du temps, des menus de
navigation, glissé-déposé, autocomplétion), pour les commenter et démontrer l’omniprésence de JavaScript dans une architecture Web 2.0 .
Le livre accompagne le lecteur tout au long d’un véritable parcours allant des rudiments de JavaScript jusqu’à la découverte des concepts les plus
avancés.
Les exemples de script cités dans l’ouvrage sont en téléchargement sur cette page.
Ce livre numérique a été conçu et est diffusé dans le respect des droits d’auteur. Toutes les marques citées ont été déposées par leur éditeur respectif. La loi du 11 Mars
1957 n’autorisant aux termes des alinéas 2 et 3 de l’article 41, d’une part, que les “copies ou reproductions strictement réservées à l’usage privé du copiste et non destinées
à une utilisation collective ” , et, d’autre part, que les analyses et les courtes citations dans un but d’exemple et d’illustration, “toute représentation ou reproduction intégrale,
ou partielle, faite sans le consentement de l’auteur ou de ses ayants droit ou ayant cause, est illicite ” (alinéa 1er de l’article 40). Cette représentation ou reproduction, par
quelque procédé que ce soit, constituerait donc une contrefaçon sanctionnée par les articles 425 et suivants du Code Pénal. Copyright Editions ENI
JavaScript
Des fondamentaux aux concepts avancés
EmmanuelGUTIERREZ
Résumé
L'auteur
Après plusieurs années passées en tant que formateur, Emmanuel Gutierrez est aujourd'hui consultant informatique, gérant d’un centre de
formation qu'il a créé. Ses différentes missions en entreprises autour de la création de sites web s'allient à son expérience pédagogique pour
fournir au lecteur un ouvrage réellement opérationnel pour maîtriser le développement en JavaScript.
- 1 -© ENI Editions - All rigths reserved

HistoriqueetversionsdeJavaScript
Lemoinsquel ’ onpuissedirec ’ estqueJavaScriptestunlangagetrèscontroversé.Audébutdel ’ Internet,lespages
étaientconstituéesuniquementdetextesetdelienshypertextes,cequirestreignaitl ’ usageàdesscientifiquesetdes
universitaires. De toutes manières, les contraintes techniques de l ’ époque, notamment au niveau des débits de
transfert,nepouvaientpasproposerautrechosedemieux.C ’ estaumilieudesannées1990quelebesoindedisposer
desitesInternetplusconviviauxetproposantplusdeservicesestapparu.BrendanEich,alorsingénieurinformaticien
chezNetscapeestchargédudéveloppementd ’ unnouveaunavigateurweb.Ilenprofitepourdévelopperunlangage
de Script, à l ’ originenomméLiveScript,etquidevaitêtreuncomplémentàJava(cesdeuxlangagessontsouvent
confondusdufaitdeleurappellationquasi identique,bienqu ’ ilsn ’ aientquepeudechosesencommun).L ’ objetdece
langagedescriptestderendrelespagesInternetplusattractives,plusconvivialespourlevisiteur,enpermettant
davantagedechosessanspourautantfaireappelàlaprogrammationcôtéserveur.Pourcefaire,lenavigateurdoit
pouvoirinterpréterlecodeJavaScript.Netscapedécided ’ implémenternativementLiveScriptdanslaversion2.0deson
navigateur(alorsbaptiséNetscapeNavigator)dès1995.Débutealors,unepériodedegrandepopularitédeslangages
descriptetMicrosoftnepouvaitqueserésoudreàsortirsapropreversion.CefutJscriptsortien1996etintégréà
sonnavigateurInternetExplorerdontladernièreversionestaujourd ’ huiJscript.Net.LesversionsdeJavaScriptsesont
alors succédées, apportant pour chacune d ’ entre elles son lot d ’ améliorations. Tout le monde a pu constater que
l ’ Internetarapidementétéenvahidepagescomportantdepetitsscriptspermettant,parexemple,d ’ afficherl ’ heure,la
date, le nom du visiteur, ou effectuant la validation du contenu de champs de formulaire. Cependant, même si
JavaScript suit les instructions données par l ’ ECMA (European Computer Manufacturers Association), organisme
internationalchargédelastandardisationdessystèmesd ’ informationetdecommunication,leséditeursdelogiciels
(Microsoft d ’ un côté avec Internet Explorer et Sun de l ’ autre avec Firefox), ont élaboré, depuis le début, des
navigateurs qui implémentent différemment JavaScript. De ce fait, certains scripts peuvent très bien s ’ exécuter
normalementsurunnavigateuretparadoxalement,généreruneerreursurunautre.C ’ estenpartieàcausedecela
qu ’ à la fin des années 1990, d ’ autres langages tels ASP ou PHP deviendront plus populaires. Mais c ’ est surtout
l ’ utilisation à outrance de pop up (fenêtre surgissante) qui est à l ’ origine de la baisse d ’ intérêt pour l ’ emploi de
JavaScript.LeurproliférationaénormémentnuiàJavaScriptetl ’ exaspérationdesutilisateursafiniparencacherles
avantages aux yeux des développeurs ; certains allant même jusqu ’ à le considérer comme un sous langage.
Heureusement, l ’ arrivée des bloqueurs de pop up intégrés aux navigateurs a permis à JavaScript de redorer son
blason.
LetableausuivantpermetdelierlaversiondeJavaScriptaveccelledunavigateur :
Aujourd ’ hui,JavaScriptestredevenuunlangageàlamode.Ilestd ’ ailleursintéressantdeconstaterquelesmêmes
personnes,qui,ilyaquelquestemps,décriaientcelangage,l ’ utilisentaujourd ’ huiàtortetàtravers.Eneffet,l ’ arrivée
denouvellestechnologieswebetnotammentduweb2.0,redonneaudéveloppementJavaScriptuneplacecentrale,
notammentparsonutilisationconjointeavecXMLouparsonutilisationasynchrone(Ajax),dontnousreparleronsplus
tard.Cecidit,iln ’ estpasinutiledepointerdudoigtlesavantagesetleslimitesdel ’ utilisationdeJavaScript.
Annéedesortie
VersiondeJavaScript
Navigateurscompatibles
1995
1.0
InternetExplorer3.0
NetscapeNavigator2.0
1996
1.1
InternetExplorer4.0
NetscapeNavigator3.0
1997
1.2
InternetExplorer4.0
NetscapeNavigator4.0
1998
1.3
NetscapeNavigator4.5
1999
1.4
InternetExplorer6.0
NetscapeNavigator6.0
2000
1.5
NetscapeNavigator6.0
2005
1.6
Firefox1.0
2006
1.7
Firefox2.0
InternetExplorer7.0
- 1 -© ENI Editions - All rigths reserved

LimitesetavantagesdeJavaScript
Commenousl ’ avonsdéjàprécisé,JavaScriptestunlangageuniverselquiseretrouvedansdenombreusespages
HTML,encomplémentdececode.GrâceàJavaScript,lespagesHTMLsontplusrichesetdisposentdenombreuses
fonctionnalitéssupplémentaires.
Savoir rédiger des scripts en JavaScript, c ’ est permettre aux visiteurs de vos pages HTML d ’ accéder à d ’ autres
fonctionnalités,àd ’ autresservicesetd ’ améliorerainsilaprofessionnalisationd ’ unsite.Ainsi,ilyaencorequelques
temps,lorsqu ’ unutilisateurchoisissaitunidentifiantpourlapremièrefois,ilfallaitcliquersurunboutonetattendre
uneréponsedelapartduserveur.Et,celui ci,parfois,invitaitàrecommencerleprocessusdecréation,lepseudoétant
déjàpris.Alorsqu ’ aujourd ’ hui,avecl ’ emploidelatechnologieAJAX,lecontrôles ’ effectueenarrière planpendantque
levisiteurcomplètesafiche.IlestindéniablequeJavaScriptcontribuefortementàlaconvivialitéd ’ unsiteInternetet
améliore,parconséquent,lafidélisationdesvisiteurs.
Étantdonnécettelargediffusion,savoirrédigerdesscriptsJavaScriptestdevenu,aujourd ’ hui,uneconnaissancede
basedetoutdéveloppeurweb.
Pour autant, l ’ usage de JavaScript n ’ est pas réservé au web, en effet plusieurs logiciels du marché tels Adobe
PhotoshopouAdobeIllustratorutilisentdesvariantestrèsprochesdeJavaScriptpourautomatisercertainestâches.
Encequiconcerneladifficultédulangage,certainspourraientêtreréticentsàl ’ analysedespagesHTMLcontenantdu
codeJavaScript,maisfinalementavecunpeudetempsetderecherche,JavaScriptestunlangagedontlamaîtriseest
assezfacile.D ’ autantplussivousêtesdéjàfamilieravecd ’ autreslangagestelsleVisualBasicoulelangageC,par
exemple,mêmesiuneadaptationàquelquesparticularitésesttoutdemêmenécessaire.
À l ’ inverse, JavaScript ne peut pas tout faire. Comme c ’ estun langage descript qui s ’ exécutecôté client, il lui est
impossibledes ’ interfaceravecunebasededonnéesdetypeMysqlouSQL,parexemple.Pourremplircettemission,il
fautimpérativementpasserpardelaprogrammationcôtéserveuravecdeslangagestelsASPouPHP.Autrepoint
important,JavaScriptn ’ estpasenmesured ’ écrireoudeliresurledisquedurduposteclient(hormislescookiesquine
sontquedepetitsfichierstexteetdontnoustraiteronslesdifférentsaspectsauchapitreAméliorerl ’ interactivitéavec
JavaScriptetCSS).Cettedernièrelimitationn ’ enconstituepaspourautantundéfaut,carainsiJavaScriptnepropage
pasd ’ infectionsviralesfortementdangereuses.
UneautreparticularitédeJavaScriptrésidedanslefaitqu ’ ilnenécessitepasd ’ éditeurparticuliernidecompilateur.Il
esttrèsfacilederédigerdesscriptsdirectementdanslecodedelapageHTMLenpassantparunsimpleéditeurde
textedetypeWordpadouunéditeurdecodeHTML.Ilexiste,cependant,desoutilsdeconceptiondontl ’ apportn ’ est
pasnégligeable.
- 1 -© ENI Editions - All rigths reserved

Outilsdeconception
Lesoutilspermettantd ’ insérerducodeJavaScriptsontnombreux.Celavadusimplelogicieléditeurdetexte,comme
parexempleWordPaddeWindows,àl ’ outilspécifiqueAptanaStudio,enpassantparleséditeursdecodeHTMLtels
DreamweaverouFrontPage,aveclesquelsilestpossibled ’ insérerdesblocsJavaScript.L ’ usagedeceslogicielspermet
dedisposerd ’ uncertainsnombred ’ outilsfacilitantl ’ écritureducode.Ilest,parexemple,fortsimplede:
●vérifierunesyntaxeparlacolorationautomatiqueducode;
●disposerdel ’ autocomplétion(propositiondesméthodesoupropriétésdisponiblesdel ’ objet);
●connaîtrelavaleurd ’ unevariablelorsdel ’ exécutiond ’ unscript.
Pour cela, vous pouvez opter pour un logiciel tel Aptana que vous pouvez télécharger à l ’ adresse
http://www.aptana.com.MalheureusementcetIDE(environnementdedéveloppement)estenanglais,cequipeutêtre
décourageant.Ils ’ avèreracependantutilepourledébogageaumêmetitrequed ’ autresoutilsdontnousreparlerons
auxchapitressuivants.
Votreoutildeconceptionsélectionné,ilconvientdeconstruireunenvironnementdedéveloppementetdetestsafinde
perdreleminimumdetempslorsdelarecherchedeserreurs,quisurviendrontinévitablement.
- 1 -© ENI Editions - All rigths reserved