JavaScript - Isis TRUCKisis.truck.free.fr/Site/fichiers/CM_Javascript.pdf · Eléments de langage...

JavaScript

M2CogniTech,UPOparIsisTRUCK,PRInformatiqueUP8

Inspirédediversessourcescommehttps://developer.mozilla.org/

http://www.commentcamarche.net/http://www.toutjavascript.com

http://www.thesitewizard.com/javascripts/change-style-sheets.shtml

JavaScript:motivations•  OnavudansleTP1(exercice9)leslimitationsd’un

langagedetypeHTML•  Ilfautbiendistinguerlangagedeprogrammationet

langagedebalisage(trèsrestrictif!)•  Javascriptestunlangagedescript(àmi-cheminentreles

deux)•  Iln'aaucuneutilitéentantquelangageautonomemaisest

conçupours'intégrerfacilementauseind’unnavigateurWebparexemple

•  Lorsqu'utiliséauseind'unenvironnementhôte,JavaScriptpeutêtrereliéauxobjetsdecetenvironnementetainsifournirunmoyendecontrôlercesobjetsparlebiaisdelaprogrammation.

•  Ilestinterprétésurleposteduclient2

Intérêts(parmid’autres)

•  L’exécutiondecode(JavaScriptenparticulier)surleposteclientpeut:– Améliorerl’interactivité(tempsderéponsepluscourtcarinutiled’allerinterrogerleserveur)

– Améliorerlesdébitssurleréseau(éviterdesenvoiscontenantdeserreurs,etdoncdesurchargerinutilementleréseau,parexemple:testd’unformulaireavantl’envoi)

3

JavaScriptdebase•  LeJavaScriptdebase(le«noyau»)contientunensembled'objets

debase(Array,DateetMath)ainsiqu'unensembled'élémentsdebasepourtoutlangagedeprogrammation:opérateurs,structuresdecontrôleetautresinstructions.

•  ilpeutêtreétendupourêtreapplicableàn’importequeldomaineenluiajoutantdesobjetssupplémentaires.Exemples:–  LeJavaScriptclientétendlelangagedebaseenluiajoutantdesobjets

destinésàcontrôlerunnavigateuretàmanipulerleDOM.Parexemple,lesextensionsclientpermettentauxapplications

•  d'ajouterdesélémentsàunformulaireHTML,•  derépondreauxactionsdel'utilisateurtelsquelesclicsdesouris•  degérerl'entréedesformulairesetlanavigationentrelespages,etc.

–  LeJavaScriptserveurétendlelangagedebaseenfournissantdesobjetsrelatifsaubonfonctionnementdeJavaScriptducôtéduserveur.Parexemple,lesextensionsserveurpermettentauxapplicationsdemanipulerdesfichiersprésentssurleserveur.

4

InteractionavecHTML(XHTML,HTML5…)

•  MéthodespourinsérerducodeJavascriptdansunepagetypeHTML:–  Utilisationdelabalise<script>:codedanslapageHTML

•  Déclarationdesfonctionsdansl’entête(<head>)•  Appeldefonctionouexécutiond’unecommandeJavaScript(dans<body>)

–  Balise<script>:insertiond’unfichierJavaScriptexterne•  Déclarationdufichier.jsdansl’entête(<head>)•  Appeldefonctionouexécutiond’unecommandeJavaScript(dans<body>)

–  UtilisationdansuneURL:•  UneURLpeutêtreuneexécutiondefonctionJavaScript(entre<a>…</a>ou<form>…</form>)

–  Utilisationdenouveauxattributsdebalisepourlagestiond’événementsutilisateur

•  <baliseonEvenement="Action_Javascript_ou_Fonction();">•  Exemplesd’événements:onClick,onMouseOver… 5

Méthode1:JavaScriptdansleHTML

•  EcrituredeJavaScriptauseind'unepage:•  Syntaxe:

–  Exple:Mettreunealerte,dansleheadoudanslebody:<scripttype="text/javascript">//<![CDATA[alert("Houston,we’vegotaproblem");//]]></script>

<noscript>Votrenavigateurnesupportepaslejavascript</noscript>

–  NB1:Ici,alert()n’apasbesoind’êtredéclarée:c’estunefonction(méthode)deJavaScript,pasunefonctioncrééeparl’utilisateur.

–  NB2:lesélémentssituésdansl'en-têtesecomportentcommedesdéclarations,ilsnes'exécutentpasdirectement.Lesélémentssituésdanslecorpss'exécutentaufuretàmesureduchargementdelapage

6

Méthode1:JavaScriptdansleHTML(2)

–  Exple2:appelerunefonctioncrééeparl’utilisateur:<head>

<scripttype="text/javascript">functionmaFonction(){…;}</script></head><body><ahref="javascript:maFonction();">appelerlafonction</a>

</body>7

Méthode2:insertiond’unfichierexterneàlapage

•  Déclarationd'unfichierJavaScriptexterneàlapage=>mettrelabalise<script>dans<head>:<scripttype="text/javascript"

src="FichierJavascript.js"></script><noscript>Votrenavigateurnesupportepasle

javascript</noscript>=>appelerlafonctiondans<body>:<ahref="javascript:maFonction();">appelerlafonction</a>Oubien:<p>passezlasouris<a

href=""onMouseOver="maFonction();">ici</a></p> 8

Elémentsdelangage•  Variables

=lieuxdemémorisationdeschiffresetdescaractères.•  L’affectationpermetd’attribuerunevaleuràunevariable–  Syntaxe:target = source –  Affectationconditionnelle:var = (condition) ? expr_alors : expr_sinon

–  Pourassignerunechaînedecaractères,onlaplaceentreguillemetsdoublesousimples

–  Exemples:•  a=3•  b=“helloworld”•  c=‘hellofromParis8’•  a=b•  a=3*4*3+2

9

Elémentsdelangage(2)

– Attentionàbiendistinguerl’affectation(=)delacomparaison(==)

–  Ilexistedesnotationsabrégéescomme:•  x+=y(équivalentàx=x+y)•  x--(équivalentàx=x-1décrémentation)

•  Commentaires://commentairesur1ligne /*commentairessur plusieurslignes*/

•  Séparateurd’instructions:‘;’ouretourchariot

10

Typesdevariables?•  pasobligatoirededéclarerletypedevariablesquel'onutiliseen

JavaScript,contrairementàdeslangagesévoluéscommeC,C++ouJavapourlesquelsilfautprécisers'ils'agitd'entier(int),denombreàvirguleflottante(float),decaractères(char),etc.=>ils’agitd’unlangageàtypagefaible

•  Portéedesvariables:locale(uniquementdanslescriptoulafonction)ouglobale(entoutpointduscript)–  lorsqu'unevariableestdéclaréesanslemotclévar,(defaçonimplicite),elle

estaccessibledepartoutdanslescript(n'importequellefonctionduscriptpeutfaireappelàcettevariable).Onparlealorsdevariableglobale

–  Laportéed'unevariabledéclaréedefaçonexplicite(précédéedumot-clévar),dépenddel'endroitoùelleestdéclarée.

•  Unevariabledéclaréeaudébutduscript,avanttoutefonction,seraglobale.Ellepeutêtreutiliséen'importeoùdanslescript

•  Unevariabledéclaréeexplicitementdansunefonctionaurauneportéelimitéeàcetteseulefonction,c'est-à-direqu'elleestinutilisableailleurs.Onparlealorsdevariablelocale.

11

Typesdevariables(2)•  JavaScriptn'autoriselamanipulationquede4typesdedonnées:–  desnombres:entiersouàvirgule–  deschaînesdecaractères(string):unesuitedecaractères

–  desbooléens(variablesàdeuxétatspermettantdevérifierunecondition):

•  false:résultatestfaux•  true:résultatestvrai

–  desvariablesdetypenull:unmotcaractéristiquepourindiquerqu'iln'yapasdedonnées

12

Nomdesvariables•  nomd’unevariablepeutêtreaussilongquesouhaité,maisildoit:

–  commencerparunelettre(majusculeouminuscule)ouun"_"–  comporterdeslettres,deschiffresetlescaractères_et&(pasd’espaces!)–  Ilnepeutpasêtreundesnomssuivants(nomsréservés):

•  abstract•  booleanbreakbyte•  casecatchcharclassconstcontinue•  debuggerdefaultdeletedodouble•  elseexportextends•  falsefinalfinallyfloatforfunction•  goto•  if,implements,import,in,infinity,instanceof,int,interface•  label,long•  native,new,null•  package,private,protected,public•  return•  short,static,super,switch,synchronized•  this,throw,throws,transient,true,try,typeof•  var,void,volatile•  while,with•  (ainsiquetouslesnomsdesobjetsJavascript)

13

Opérateurs(1)

14

Opérateurs logiques

&& Opérateur ET : implique que toutes les conditions soient réalisées

|| Opérateur OU : implique qu'au moins une des conditions soit réalisée

! Opérateur de négation : implique que la condition ne soit pas réalisée

Opérateurs de calcul

+ Addition de deux valeurs numériques

- Soustraction de deux valeurs numériques

* Multiplication de deux valeurs numériques

/ Division de deux valeurs numériques

= Affectation d'une valeur à une variable

% Reste de la division entière entre deux valeurs numériques 9 % 3 vaut 0, 7 % 2 vaut 1, 7 % 8 vaut 7 ...

Opérateurs d'incrémentation

++ Incrémente de 1 la valeur de la variable

-- Décrémente de 1 la valeur de la variable

Opérateurs(2)

15

Opérateurs d'affectation

+= Ajoute à la variable de gauche la variable de droite. Stocke la nouvelle valeur dans la variable de gauche

-= Soustrait à la variable de gauche la variable de droite. Stocke la nouvelle valeur dans la variable de gauche

*= Multiplie la variable de gauche par la variable de droite. Stocke la nouvelle valeur dans la variable de gauche

/= Divise la variable de gauche par la variable de droite. Stocke la nouvelle valeur dans la variable de gauche

%= Calcule le modulo entre deux valeurs numériques. Stocke la nouvelle valeur dans la variable de gauche

Opérateurs(3)

16

Opérateurs de comparaison

== opérateur d'égalité : retourne 1 si les éléments comparés sont égaux, 0 sinon

!= opérateur de différence : retourne 1 si les éléments comparés sont différents, 0 sinon

< opérateur d'infériorité stricte : retourne True si la comparaison est correcte, False sinon

<= opérateur d'infériorité : retourne True si la comparaison est correcte, False sinon

> opérateur de supériorité stricte : retourne True si la comparaison est correcte, False sinon

>= opérateur de supériorité : retourne True si la comparaison est correcte, False sinon

=== opérateur d'identité : compare la valeur et le type des variables, retourne 1 si les éléments comparés sont les mêmes, 0 sinon

!== opérateur de différence : compare la valeur et le type des variables, retourne 1 si les éléments comparés sont différents, 0 sinon

Exemplesd’expressions

•  arithmétique(3+4) * (56.7 / 89)

•  chaînedecaractères"parce" + " " + "que"

•  logiquetemp == 37

h2o = (temp<100) ? "eau" : "vapeur";

h2o = (temp>0) ? ((temp<100) ? "eau" : "vapeur") : "glace";

17

Exemples•  Ladate:<html> <head> <title>Page dynamique</title> </head> <body> <script type = "text/javascript"> //<![CDATA[ date = new Date(); document.writeln("Nous sommes le ", date); //]]> </script> </body> </html>

18

Structuresdecontrôle•  Instructionsdebranchement

–  ifelse:if(condition){instructions;}[else{instructions;}]

–  switchcase:switch(variable){case‘valeur1’:

codeàexécutersi“variable==‘valeur1’”;break;

case‘valeur2’:codeàexécutersi“variable==‘valeur2’”;break;

case‘valeur9’:codeàexécutersi“variable==‘valeur1’”;break;

default:codeàexécutersitouslesautrescasontéchoué;break;

}19

Structuresdecontrôle

•  Boucles–  for:

for (i=1;i<n;i++) {instructions;} for (p in objet) {instructions;}

– while:while (condition) {instructions;}

–  dowhile:do {instructions;} while (condition)

–  Sortied’uneboucle:break; –  Itérationsuivanted’uneboucle(pour“skip”uneitération):continue;

20

Fonctions•  Définition:

function nomFonction(param1, ..., paramN) {

// code JavaScript

return expression ;

}

•  Appel:nomVariable = nomFonction(exp1, ..., expN);

•  LesfonctionsJavaScriptontunepropriétéspécialeappeléearguments,quicontientuntableau(Array)desparamètresprisenentrée.Enutilisantlapropriétélengthd’unArray,ilestpossibled’itérersurchaqueparamètreautraversdutableau.

•  =>Celapermetdedévelopperdesfonctionsquichangentenfonctiondunombredeparamètres.

21

Exempledefonctionfunction somme() { var argv = somme.arguments; var argc = somme.arguments.length; var result = 0; for (var i = 0 ; i < argc ; i++) { result += argv[i]; } return result; }

Queretournesomme(1,2,3)?etsomme(2)?

22

Fonctions:passagedesparamètres(1)

•  Lesvariablessontpasséesparvaleurs,lesobjetsparréférence.LesArraysontdesobjets

•  Casd'unevariablesimple–  Lafonctiontest()ajouteunechaîneàunechaînedonnéeenparamètre.

function test(z)

{ z = z + "suffixe";

}

var x = "démo";

test(x); document.write(x);

=>Résultat:démo –  Onpeutvérifierquelavariablexn'estpasmodifiéehorsducontextedela

fonction.–  Lamêmechosesevérifieraitavecunnombre.

23


•  Casd'unobjetStringvar x = new String("démo"); test(x);

document.write(x);

=>Résultat:démo – LesobjetssimplescommeString,Boolean,Numbersontaussipassésparvaleur.

24


•  Casd'unobjetArray–  Lafonctiontestaajouteunélémentàuntableaudonnéenparamètre.

function testa(a) {

a.push("ajouté"); }

x = new Array("un", "deux", "trois");

testa(x); document.write(x);

=>Résultat:un,deux,trois,ajouté –  Onvoitqu'unobjetArrayestpasséparréférence,puisquel'élément

ajoutédanslecorpsdelafonctionresteinclusdansletableauaprèsl'appeldelafonction.

25


•  Celavaut-ilaussipouruntableaudéclarécommeunlittéral?

var y = [1, 2, 3];

testa(y); document.write(y);

Résultat:1,2,3,ajouté =>oui,celavautaussi

26


•  Enconclusion,sil'onveutpasserunevariablesimpleparréférence,ilfautl'incluredansuntableau:x = "essai"; x = [x]; testa(x); x = x.join(' '); document.write(x);

•  Résultat:essai ajouté •  Lafonctionjoin(String separ)transformele

tableauenchaînedecaractères(lesélémentsétantséparésparsepar)aprèsl'appeldelafonction.

•  Celaalourditlecodemais,restelemoyenleplussimpledepasserunechaînedecaractèresparréférence.

27

Fonctions:passagedesparamètres(6)•  Autrepossibilité(pluscompliquée)pourpasserunechaîneparréférence

function testb(a) { var x = a[0]; x += "suffixe"; a[0] = x; } x = "essai"; x = [x]; testb(x); x = x[0]; document.write(x); Résultat:essaisuffixe

28

Lesobjetsprédéfinis •  Objetsdunoyau

29

Nomdel'objet Description

Array L'objetArraypermetdecréerdestableaux.Ilpossèdedenombreusesméthodespermettantd'ajouter,desupprimeroud'extrairedesélémentsd'untableauainsiquedelestrier.

Boolean L'objetBooleanpermetdecréerdesvaleursbooléennes,c'est-à-diredesélémentspossédantdeuxétats:vraietfaux.

Date L'objetDatepermetdecréerdesdatesetdesdurées.Ilproposedesméthodespermettantdelesmanipuler.

Function L'objetFunctionpermetdedéfinirdesfonctionspersonnalisées.

Math L'objetMathpermetdemanipulerdesfonctionsmathématiques,commeparexemplelesfonctionstrigonométriquesouencorelafonctiongénérantunnombrealéatoire,etc.

Number L'objetNumberestunobjetpermettantdefairedesopérationsdebasesurlesnombres.

RegExp L'objetRegExppermetdecréerdesexpressionsrégulières,c'est-à-diredesélémentspermettantdefairedesopérationsavancéessurleschaînesdecaractères.

String L'objetStringproposeunegrandevariétédeméthodespermettantdemanipulerdeschaînesdecaractères.

Lesobjetsprédéfinis(2)

•  Objetsdunavigateur–  navigator:quicontientdesinformationssurlenavigateurdeceluiquivisitelapage

–  window:c'estl'objetoùs'affichelapage,ilcontientdoncdespropriétésconcernantlafenêtreelle-mêmemaisaussitouslesobjets-enfantscontenusdanscelle-ci

–  location:contientdesinformationsrelativesàl'adressedelapageàl'écran

–  history:c'estl'historique,c'est-à-direlalistedeliensquiontétévisitésprécédemment

–  document:ilcontientlespropriétéssurlecontenududocument(couleurd'arrièreplan,titre,...)

30

Objetwindowwindowestl'objetprincipaldanslemodèleobjetJavaScript•  Propriétés

closed(Indicateurdefermeturedefenêtre)defaultStatus(Textepardéfautdelabarredestatut)name(Nomdelafenêtre)opener(Fenêtreouvrante)screenLeft(Positionhorizontaledelafenêtrenavigateur.)screenTop(Positionverticaledelafenêtrenavigateur.)status(Textedelabarredestatut)

•  Méthodesalert()(Afficheunmessaged'information)blur()(Enlèvelefocusàlafenêtre)clearInterval()(Arrêtel'exécutiond'untraitementàintervallerégulier)clearTimeout()(Suspenduneminuterie)close()(Fermelafenêtre)confirm()(PermetlechoixentreOuietNon)focus()(Donnelefocusàlafenêtre)home()(Ouvrelapagededémarragedunavigateur)moveBy()(Déplacelafenêtre)moveTo()(Positionnelafenêtre)

31

Objetwindow(2)•  Méthodesdewindow(suite)

open()(Ouvreunpopup)print()(Imprimelapageencours)prompt()(Ouvreuneboîtedesaisie)resizeBy()(Agranditouréduitlatailled'unefenêtre)resizeTo()(Redimensionneunefenêtre)scrollBy()(Déroulelesascenseurs)scrollTo()(Positionnelesascenseurs)setInterval()(Lanceuntraitementàintervallerégulier)setTimeout()(Déclencheuneminuterie)stop()(Arrêtelechargementdelapage)

•  Sous-objetsdocument(Objetdocumentvisiblesurlapage)external(ObjetpropreàInternetExplorer)frames(Tableauxdesframes)history(Objetpermettantdenaviguerdansl'historique)location(Informationssurl'adressedelapage)parent(Fenêtremèredujeudeframes)screen(Informationsurl'écran)self(Fenêtreencours)top(Fenêtreinitialedujeudeframes) 32

Objetdocument •  L'objetdocumentestprobablementl'undesobjetslesplusimportantsdumodèleobjet

JavaScript.Ilpermetd'accéderàtouslesélémentsaffichéssurlapage,decontrôlerlessaisies,demodifierl'apparenceetlecontenu.

•  Propriétés(nonexhaustif)bgColor(Couleurdefonddepage)cookie(Chaînecontenantlescookiesdudomaine)fgColor(Couleurdutexte)fileSize(Tailledelapageenoctets)lastModified(Datededernièremodification)location(Urldelapage)referrer(Adressedelapaged'origine)title(Titredelapage)

•  Méthodes(nonexhaustif)getElementById()(RetourneunobjetHTMLàpartirdesonid)getElementsByName()(RetourneunobjetHTMLàpartirdesonnom)getElementsByTagName()(Retourneuntableaud'objetsàpartirdeleurbalise)write()(Ecritdutextedansledocument)

•  Sous-objetsforms(Tableaudesformulairesdudocument)images(Tableaudesimagesdelapage)

33

Lire/écrire

•  prompt() – Ouvreuneboîtededialogueavecunezonesaisieet2boutons(OKetAnnuler),

–  retournel'informationlue•  confirm()

– Ouvreuneboîtededialogueavec2boutonsOKetAnnuler,

–  retourneunbooléen•  alert()

–  Permetd‘écrireunmessagedansunefenêtre

34

Lire/écrire:exemple<html> <head>

<title>Utilisation de prompt() et d'alert()</title>

</head>

<body>

<script type = "text/javascript">

//<![CDATA[

annee = prompt('En quelle année sommes-nous ? ', '2018'); alert('Vous avez répondu : ' + annee);

//]]>

</script>

</body>

</html>

35

Écrireavecdocument.write()<html>

<head> <title>Utilisation de document.write</title>

</head>

<body>

<script type = "text/javascript">

//<![CDATA[ document.write('Hello world !');

//]]>

</script>

</body>

</html>

36

Ouvrirunenouvellefenêtre<script type = "text/javascript"> //<![CDATA[ fenetre = open('', '', 'height=50, width=300,

status=yes'); fenetre.document.write('<html>'); fenetre.document.write('<head>'); fenetre.document.write('<title>' + 'Titre fenetre'

+ '</title>'); fenetre.document.write('</head>'); fenetre.document.write('<body>'); fenetre.document.write('Texte dans la fenetre'); fenetre.document.write('</body>'); fenetre.document.write('</html>'); //]]>

</script>

37

Encadrerlesitems(avecjQuery)•  Encadrerlesitemsd’unelisteaupassagedelasouris:

–  //codeHTML<ul id="liste"> <li>texte1</li> <li>texte2</li> <li>texte3</li> </ul>

–  //codecss.li_hover { border:1px solid black; }

–  //codeJavaScript$("#liste li").hover( function(){

$(this).addClass('li_hover'); }, function(){ $(this).removeClass('li_hover'); } );

38

JavaScriptetCSS•  Enreprenantl’exempledeVermeer(cf.cours1,page28),dansunfichier

JSexterne,onpourraainsimodifierlalargeurdu<div>vialasyntaxesuivante:document.getElementById("peinture").style.width =

"100px"; (Onaccèdeàl’élémentdontl’idestpeintureetonchangesalargeur(à100pixels))

•  Delamêmefaçon,pourchangerdynamiquementlestyle,ilfautmarierJavaScriptetCSSen,parexemple:

–  créant2baliseslinksuccessivesdansleHTMLcontenantl’attributrel(avec2valeursdistinctes:altetstylesheet,parexemple)

–  affectantàlavariablelientouslesnœudsnomméslink:var lien = document.getElementsByTagName("link") ;

–  testantlien[i].rel.indexOf("stylesheet") != -1 –  affectantlien[i].disabledàtrueoufalse,selonlescas

39

Formulairesetvérification(1)•  OnutiliselabaliseHTMLformetonfaitdestestssurlesvariablesrécupéréesviaJS•  Exemple1:Changerdynamiquementlecontenud’unchamptexte: <form>

Nom du personnage : <br /> <input type="text" name="le-nom" id="nomP" value="Mickey" />

<input type="submit" onclick="switch_name();return false;" name="chg" value="Changer !" />

</form>

•  Laformenelle-mêmen’estpasvisible.•  Lalargeurpardéfautd’unchamptextest20caractères.•  L’appelàl’événementJSsefaitgrâceàonclick="switch_name();" •  LescriptJScontient: function switch_name() {

nom=document.getElementById("nomP");

if (nom.value=="Mickey") nom.value="Donald";

else nom.value="Mickey”;

}

40

Formulairesetvérification(2)•  OnutiliselabaliseHTMLformetonfaitdestestssurlesvariables

récupéréesenmodeGETouPOSTviaduPHP(nontraitédanscecours)•  Exemple2:

<form> Mot de passe: <input type="password" name="pwd"> </form>

•  Exemple3:<form name="input" action="form_action.php" method="get">

Nom de login: <input type="text" name="user"> <input type="submit" value="Valider">

</form>

•  Ilyaégalementdesboutonsradio,etc.Voir:http://www.w3schools.com/html/html_forms.asp

41

Conseils(1)•  Document.write

–  Lecomportementdecettefonctionestproblématique.Lorsduchargementd'unepageHTMLcettefonctionajoutelachaînepasséeenparamètreaucontenu.Unefoislapagechargée,cettefonctionremplacetotalementleHTMLdelapageparlachaineenparamètre.

–  Onavuplushautquelechargementd'unepageHTMLestséquentiel,c'estunexercicepérilleuxpourlenavigateurquederajouterducontenuàunepageentraindecharger.Sic'estpérilleux,lesbugsnesontpasloin.Pouréviterlescomportements«étranges»ilnefautpasutiliserdocument.write()

–  L'alternativeestd'utiliserlesstandardsetplusprécisémentleDOM.SionveutrajouterducontenuàunepageHTMLleplussimpleestdeplacerunélémentvideàl'endroitvouluetdeleremplirunefoislapagechargée.Sil'onappliquelesrecommandationssurlaplacede<script>,celadonne:

42

Pourremplacerdocument.write<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/><title>Unepageweb</title></head><body><h1>Titredelapage</h1><p>Aujourd’hui,j’ai</p><pid="dynamique"></p><p>ettoutesmesdents</p><scripttype="text/javascript">document.getElementById("dynamique").innerHTML="8ans";</script></body></html>

43

Conseils(2)

•  LesscriptsJavaScriptdoiventêtreplacésdansunfichierexterneàlapageHTML.

•  Habituellementonplacelabalised'insertiondesfichiersdansle<head>.

•  Mais,pourunequestiondeperformancesonpeutpréférerlaplaceràlafindelapage,justeavant</body>

•  ÀnoterquelesdeuxméthodessontvalidesdupointdevuedelaspécificationHTMLetXHTML.

44

JavaScript - Isis TRUCKisis.truck.free.fr/Site/fichiers/CM_Javascript.pdf · Eléments de langage...

Documents

Transcript of JavaScript - Isis TRUCKisis.truck.free.fr/Site/fichiers/CM_Javascript.pdf · Eléments de langage...