<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE chapitre SYSTEM "../ressources/chapitre22.dtd">

<chapitre typecourssiteweb="dhtml">
	<cours nomfichier="introjavascript">Cours de manipulation du DOM et DHTML</cours>
	<entete>
		<titre>Introduction à Javascript</titre>
		<auteur email="Gilles.Chagnon@upmc.fr">G. Chagnon</auteur>
		<resume>Ce chapitre présente les bases de JavaScript.</resume>
		<motsclefs>javascript, js</motsclefs>
	</entete>
	<corpus>
		<partie titre="Introduction" ancre="intro">
			<section titre="JavaScript n'est pas Java" ancre="jsetjava">
				<paragraphe>
					<texte>Pour commencer, tordons le cou à une erreur classique&#160;: <code type="langage">JavaScript</code> et <code type="langage">Java</code> ne sont en aucune manière apparentés. Il s'agit de deux langages différents. En effet, dans le cadre d'un site Web&#160;:</texte>
					<liste>
						<item><texte><code type="langage">JavaScript</code> est toujours interprété côté client, sur la machine sur laquelle tourne le navigateur qui analyse et affiche la page Web, alors que <code type="langage">Java</code> peut être compilé ou interprété côté serveur.</texte></item>
						<item><texte>Un code <code type="langage">JavaScript</code> est appelé dans une page Web différemment d'une <autrelangue>applet</autrelangue> <code type="langage">Java</code>.</texte></item>
						<item><texte>Il est nécessaire de déclarer les variables en <code type="langage">Java</code>, alors que cette déclaration peut être implicite en <code type="langage">JavaScript</code>.</texte></item>
					</liste>
				</paragraphe>
			</section>
			<section titre="Historique" ancre="histo">
				<paragraphe>
					<texte><code type="langage">JavaScript</code> a été mis au point par Brendan Eich de Netscape Communications et baptisé <code type="langage">LiveScript 1.0</code>. Lorsque <code type="langage">Java</code> de la compagnie Sun est devenu populaire, le langage a été rebaptisé <code type="langage">JavaScript</code>.</texte>
					<texte>La version&#160;1.0 de <code type="langage">JavaScript</code> a été intégrée par Netscape dans son navigateur <logiciel lang="en">Netscape Navigator&#160;2.0</logiciel>. Microsoft a alors suivi le mouvement et a introduit un langage compatible avec <code type="langage">JavaScript</code> dans <logiciel lang="en">Internet Explorer&#160;3.0</logiciel>, le <code type="langage">JScript&#160;1.0</code>.</texte>
					<texte>Netscape a sorti ensuite la version 1.1 de son langage, pendant que Microsoft sortait une version&#160;1.1  de <code type="langage">JScript</code>. Les deux langages étaient devenus en partie incompatibles.</texte>
					<texte>Lorsque Netscape a rendu publiques les définitions de son langage afin de le rendre plus populaire, la compagnie et Microsoft ont trouvé un terrain d'entente afin de développer <code type="langage">ECMAScript</code>, sous le patronage de l'<acronyme titre="European Computer Manufacturers Association" lang="en">ECMA</acronyme>, une organisation suisse, en juillet 1997. Cela n'empêcha pas les compagnies de publier en parallèle <code type="langage">JavaScript 1.2</code> et <code type="langage">JScript 2.0</code> qui étaient encore moins compatibles entre eux.</texte>
					<texte>À cette époque, le quotidien du développeur Web consistait surtout à gérer les incompatibilités entre les navigateurs -incompatibilités dans le code de script utilisé, mais aussi dans les éléments <code type="langage">HTML</code> supportés par chaque navigateur. Actuellement, les éditeurs de navigateur ont plus ou moins convergé sur le support de l'<code type="langage">ECMAScript</code>, et à l'exception d'<logiciel lang="en">Internet Explorer</logiciel> qui est sur certains points déficient, le support de <code type="langage">JavaScript</code> est assez homogène, ce qui a permis le développement de nombreuses bibliothèques.</texte>
				</paragraphe>
			</section>
			<section titre="Insertion de code JavaScript dans un document (X)HTML" ancre="insertion">
				<paragraphe titre="Trois méthodes d'insertion" ancre="troismeth">
					<texte>Il existe trois manières d'insérer du code <code type="langage">JavaScript</code> dans un document (X)HTML&#160;:</texte>
					<liste type="ordonnee">
						<item><texte>La manière la plus simple à mettre en œuvre est l'utilisation des attributs prévus dans les recommandations (X)HTML pour cela&#160;: <code>onclick</code>, <code>onmouseover</code>, etc. Cette méthode présente un inconvénient majeur, celui de mêler le code destiné à donner la structure du document (le <code>HTML</code>) au code destiné à le mettre en quelque sorte en mouvement, le <code type="langage">JavaScript</code>. La mise à jour d'une telle page est difficile, de la même manière que gérer la mise en forme <code type="langage">CSS</code> à l'aide de l'attribut <code>style</code> est une pratique à déconseiller.</texte></item>
						<item>
							<texte>Une deuxième méthode, analogue à l'utlisation d'une feuille de style interne en <code type="langage">CSS</code>, consiste à faire appel à l'élément <code>script</code> et à insérer le code <code type="langage">JavaScript</code> à l'intérieur de cet élément. Par exemple,</texte>
							<exemple type="HTML">
								<element nom="script" enligne="non"><attribut nom="type">text/javascript</attribut>(...)</element>
							</exemple>
							<texte>L'attribut <code>type</code> est obligatoire. Vous rencontrerez parfois l'atttribut <code>language</code> avec la valeur <code>JavaScript</code>, mais cet attribut est obsolète et ne devrait donc plus être utilisé.</texte>
							<texte>Cet élément peut être présent dans l'entête du fichier <code type="typefichier">HTML</code> tout comme l'élément <code>style</code> des feuilles de style internes. Il est aussi possible de l'insérer au cœur de la page <code type="typefichier">HTML</code>, comme descendant de l'élément <code>body</code>, mais cela complique encore une fois la maintenance de la page.</texte>
						</item>
						<item>
							<texte>Une troisième méthode fait elle aussi appel à l'élément <code>script</code>, mais cette fois-ci le code <code type="langage">JavaScript</code> se trouve dans un fichier externe. Dans ce cas, l'élément <code>script</code> précise à l'aide de l'attribut <code>src</code> l'emplacement du fichier <code type="typefichier">JavaScript</code>&#160;:</texte>
							<exemple type="HTML">
								<element nom="script" vide="oui"><attribut nom="type">text/javascript</attribut><attribut nom="src">../scripts/aideSaisie.js</attribut></element>
							</exemple>
							<texte>Cette dernière méthode est la plus commode à mettre en œuvre si un script doit être utilisé sur plusieurs pages, mais elle doit être maniée avec précaution afin d'éviter toute perte d'informations. À la fin de ce cours, nous reviendrons sur de <reference href="bonnespratiques.html">bonnes pratiques de codage</reference> à utiliser afin d'éliminer ce genre de soucis.</texte>
						</item>
					</liste>
				</paragraphe>
				<paragraphe titre="Présence d'une alternative" ancre="noscript">
					<texte>Il n'y a pas que des navigateurs graphiques supportant <code type="langage">JavaScript</code> qui soient susceptibles de consulter un document Web. Il existe des outils de consultation de pages qui ne supportent pas <code type="langage">JavaScript</code>, ou, ce qui est pire, n'en ont qu'un support partiel. De plus, les robos indexeurs des moteurs de recherche sont incapables d'indexer du contenu qui serait produit en <code type="langage">JavaScript</code>. C'est la raison pour laquelle, à chaque fois que du contenu ou une fonctionnalité est ajouté à une page en faisant appel à <code type="langage">JavaScript</code>, il est nécessaire de prévoir une alternative sous un format accessible à ce genre d'outils de consultation (le plus souvent simplement du <code type="langage">HTML</code>), et fournissant à ces outils une information équivalente et des fonctionnalités permettant d'atteindre les mêmes buts. Cette alternative doit être présente dans un élément <code>noscript</code>, enfant de <code>script</code> <valeur>lorsqu'il est descendant de l'élément <code>body</code></valeur>. Par exemple&#160;:</texte>
					<exemple type="HTML">
						<element nom="script" indent="oui"><attribut nom="type">text/javascript</attribut>
							<contenu niveau="1">(...)</contenu>
							<element nom="noscript" niveau="1" enligne="non">Information équivalente au contenu produit par le script</element>
						</element>
					</exemple>
				</paragraphe>
			</section>
		</partie>
		<partie titre="Conventions" ancre="conventions">
			<section titre="Règles générales" ancre="regles">
				<paragraphe>
					<texte><code type="langage">JavaScript</code> est assez souple. Ainsi, écrire <code><![CDATA[a = b + 2]]></code> ou <code>a=b+2</code> est équivalent, et signifie que l'on affecte à la variable <code>a</code> la valeur de la variable <code>b</code> augmentée de 2. Il accepte de même l'insertion de tabulations au sein des expressions, avant ou après les opérateurs. On peut insérer un retour chariot partout où il est possible de placer un espace. Par conséquent, les lignes de code doivent se terminer par des "<code>;</code>". Par exemple...</texte>
					<exemplejavascript>
						<variable name="a"/><sautligne/>
						<autres>=</autres><sautligne/>
						<variable name="b"/><sautligne/>
						<autres>+</autres><sautligne/>
						<autres>2</autres><sautligne/>
						<finligne/>
					</exemplejavascript>
				</paragraphe>
			</section>
			<section titre="Commentaires" ancre="commentaires">
				<paragraphe>
					<texte>Un commentaire <code type="langage">JavaScript</code> permet de placer du texte en-dehors du script&#160;: il n'est alors pas interprété. Deux syntaxes sont possibles&#160;:</texte>
					<liste type="ordonnee">
						<item><texte>Quand le commentaire s'étend sur une seule ligne, on peut commencer cette ligne par <code>//</code>.</texte></item>
						<item><texte>Quand le commentaire doit s'étendre sur plusieurs lignes, il doit commencer par <code>/*</code> et se terminer par <code>*/</code>.</texte></item>
					</liste>
					<exemplejavascript>
						<commentaire_js>Une ligne</commentaire_js>
						<sautligne/>
						<commentaire_js>Deux<sautligne/>lignes</commentaire_js>
					</exemplejavascript>
				</paragraphe>
			</section>
			<section titre="Noms de variables et de fonctions" ancre="noms">
				<paragraphe>
					<texte><code type="langage">JavaScript</code> est sensible à la casse employée. Par conséquent, <code>variabletest</code> et <code>Variabletest</code> désignent deux variables différentes.</texte>
					<texte>Il existe un certain nombre de noms réservés, qui sont à peu près les mêmes que dans les autres langages de programmation, comme <code>var</code>, <code>function</code>, <code>for</code>, <code>if</code>... Nous les rencontrerons au fur et à mesure.</texte>
				</paragraphe>
			</section>
		</partie>
		<partie titre="Variables" ancre="variables">
			<section titre="Types de données" ancre="types">
				<paragraphe titre="Les types" ancre="tp">
					<texte><code type="langage">JavaScript</code> est un langage dans lequel il est possible de ne pas déclarer qu'une variable doit être d'un certain de type de données. Cela signifie qu'il suffit d'indiquer <code>a=2;</code>, par exemple, pour déclarer premièrement que l'on définit une variable qui s'appelle <code>a</code> et qui a pour valeur 2, mais aussi deuxièmement que cette variable est de type nombre.</texte>
					<texte>Il n'existe que quelques types de données en <code type="langage">JavaScript</code>, ce qui en facilite l'usage mais complique le contrôle des valeurs autorisées pour une variable donnée. Ces types prédéfinis sont&#160;:</texte>
					<liste>
						<item><texte>la chaîne de caractères. Une chaîne de caractères est délimitée par des <code>"</code> ou <code>'</code>. Par exemple, <code>a="Ceci est une chaîne" ;</code>. Si l'on doit utiliser des apostrophes ou des guillemets imbriqués, on peut faire appel à l'autre forme : <code>"C'est une chaîne"</code>, voire « échapper » les caractères&#160;: <code>'Le duc déclara : "C\'est une affaire d\'honneur".'</code> Il existe d'autres caractères échappés&#160;: <code>\b</code> correspond au retour arrière, <code>\f</code> au saut de page, <code>\n</code> au saut de ligne, <code>\r</code> au retour chariot, <code>\t</code> à la tabulation horizontale et finalement <code>\\</code> au caractère <code>\</code> lui-même.</texte></item>
						<item>
							<texte>les nombres. Il s'agit soit d'un nombre entier (par exemple 3, -456 ou 78900001), soit d'un nombre à virgule flottante (comme 3.1415 ou -745.6). Les nombres sont compris entre 2<puissance>24</puissance>-1 et -(2<puissance>24</puissance>), ce qui correspond à environ 10<puissance>308</puissance>. Certaines constantes correspondent à des valeurs particulières. Ce sont&#180;:</texte>
							<liste>
								<item><texte><code>positive Infinity</code> ou <code>+Infinity</code> qui peut être obtenu quand on essaie d'ajouter une quantité strictement positive au plus grand nombre géré par le langage</texte></item>
								<item><texte><code>negative Infinity</code> ou <code>-Infinity</code></texte></item>
								<item><texte><code>positive zero</code> ou <code>+0</code> qui correspond à une valeur nulle positive</texte></item>
								<item><texte><code>negative zero</code> ou <code>-0</code> qui correspond à une valeur nulle négative</texte></item>
								<item><texte><code>NaN</code> (<autrelangue>Not A Number</autrelangue>) qui est obtenu lorsque l'on essaie de réaliser une opération interdite (comme par exemple diviser par zéro)</texte></item>
							</liste>
						</item>
						<item><texte>les booléens, avec le type <code>boolean</code>. Les variables de type booléen ne peuvent prendre que deux valeurs possibles&#160;: «&#160;vrai&#160;» (<code>true</code>) ou «&#160;faux&#160;» (<code>false)</code>.</texte></item>
						<item><texte>les objets, avec le type <code>object</code>. Il s'agit d'un moyen d'utiliser des objets en <code type="langage">JavaScript</code>, qui est un <reference href="http://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype">langage orienté prototype</reference>.</texte></item>
						<item><texte><code>undefined</code> est un type particulier, puisqu'il ne peut prendre qu'une seule valeur, <code>undefined</code>. Lorsqu'une variable ne peut pas être définie ou ne l'a pas encore été, elle est de ce type.</texte></item>
						<item><texte><code>null</code> est un dernier type possible. Il signifie qu'une variable ne contient pas de donnée.</texte></item>
					</liste>
				</paragraphe>
				<paragraphe titre="Conversion de type" ancre="conversion">
					<texte><code type="langage">JavaScript</code> permet de changer le type d'une variable, avec les fonctions suivantes&#160;:</texte>
					<liste>
						<item><texte><code>parseInt()</code> et <code>parseFloat()</code> permettent de convertir une chaîne de caractères en nombre (respectivement entier ou à virgule flottante). Si par exemple la variable <code>x</code> contient la chaîne de caractères <code>"34.7"</code>, <code>parseInt(x)</code> renvoie 34, et <code>parseFloat(x)</code> renvoie 34,7.</texte></item>
						<item><texte><code>Number()</code> transforme  un objet en nombre à la manière de <code>parseFloat()</code> pour les chaînes de caractères.</texte></item>
						<item><texte><code>string()</code> transforme un objet en chaîne de caractères.</texte></item>
					</liste>
				</paragraphe>
				<paragraphe titre="Tests sur les types" ancre="testsTypes">
					<texte>Il est parfois nécessaire, avant de lancer un traitement sur des variables supposées être des nombres, de tester si tel est vraiment le cas.</texte>
					<liste>
						<item><texte><code>isFinite()</code> permet de tester si la variable passée en paramètre est bien un nombre fini (par exemple, <code>isFinite(+Infinity)</code> renvoir le booléen <code>false</code>).</texte></item>
						<item><texte><code>isNaN()</code> teste si le paramètre <valeur>n'est pas</valeur> un nombre. Par exemple, <code>isNaN(34.7)</code> renvoie <code>false</code>, mais <code>isNaN("abc")</code> renvoie <code>true</code>.</texte></item>
					</liste>
				</paragraphe>
			</section>
			<section titre="Déclaration ; affectation de valeurs" ancre="declaration">
				<paragraphe titre="Déclaration d'une variable sans affectation de valeur" ancre="declare">
					<texte>Une déclaration (sans affectation de valeur) se fait à l'aide du mot-clef <code>var</code>. Par exemple, <code>var a;</code> déclare l'existence d'une variable s'appelant le nom <code>a</code>, mais sans lui avoir affecté de valeur. Elle est donc de type <code>undefined</code>.</texte>
				</paragraphe>
				<paragraphe titre="Opérateur d'affectation simple =" ancre="opegal">
					<texte>On affecte une valeur à l'aide de l'opérateur <code>=</code>. Par exemple, <code>a="Ceci est une chaîne"</code>. Cet opérateur permet aussi d'affecter la même valeur à plusieurs variables. Par exemple, <code>a=b=c=d=e=5</code> affecte la valeur 5 aux cinq variables <code>a</code>, <code>b</code>, <code>c</code>, <code>d</code> et <code>e</code>.</texte>
				</paragraphe>
				<paragraphe titre="Opérateurs d'affectation complexe" ancre="opcomplexe">
					<texte>Ces opérateurs permettent d'effectuer une opération sur une variable puis de lui affecter le résultat.</texte>
					<liste>
						<item><texte><code>+=</code> permet de réaliser une addition&#160;: si <code>a</code> vaut 5, <code>a+=2;</code> affecte 5+2=7 à <code>a</code>.</texte></item>
						<item><texte><code>-=</code> permet de réaliser une soustraction&#160;: si <code>a</code> vaut 5, <code>a-=2;</code> affecte 5-2=3 à <code>a</code>.</texte></item>
						<item><texte><code>*=</code> permet de réaliser une multiplication&#160;: si <code>a</code> vaut 5, <code>a*=2;</code> affecte 5*2=10 à <code>a</code>.</texte></item>
						<item><texte><code>/=</code> permet de réaliser une division&#160;: si <code>a</code> vaut 5, <code>a/=2;</code> affecte 5/2=2.5 à <code>a</code>.</texte></item>
					</liste>
				</paragraphe>
				<paragraphe titre="Opérateur ternaire" ancre="opternaire">
					<texte>Cet opérateur permet d'affecter une valeur à une variable en fonction du résultat à un test. Sa syntaxe est la suivante&#160;:</texte>
					<exemplejavascript>
						<variable name="variable"/><autres>=</autres><variable name="TestÀRéaliser"/><instruction name="?"/><autres>valeurSiTestVrai</autres><instruction name=":"/><autres>ValeurSiTestFaux</autres>
					</exemplejavascript>
					<texte>Par exemple, <code>a=b&gt;3?0:1</code> affecte 0 à <code>a</code> si <code>b</code> est strictement supérieur à 3, et 1 dans le cas contraire.</texte>
				</paragraphe>
			</section>
			<section titre="Portée" ancre="portee">
				<paragraphe>
					<texte>La portée d'une variable désigne l'ensemble du code dans lequel elle peut être utilisée.</texte>
					<texte>Si une variable est déclarée sans le mot-clef <code>var</code>, elle peut être utilisée n'importe où dans le script.</texte>
					<texte>Si une variable est déclarée avec le mot-clef <code>var</code>, elle ne peut être utilisée que dans le bloc où elle se trouve. Ainsi, dans l'exemple suivant...</texte>
					<exemplejavascript>
						<declaration nomvariable="a" valeur="8" new="non"/><finligne/>
						<sautligne/>
						<instruction name="function"/><autres> </autres><fonction name="testFonction"/>
						<bloc>
							<declaration nomvariable="pi" valeur="3.14" new="non"/><finligne/>
							<autres>(...)</autres><finligne/>
						</bloc>
						<sautligne/>
						<instruction name="function"/><autres> </autres><fonction name="testFonction2"/>
						<bloc>
							<autres>(...)</autres><finligne/>
						</bloc>
					</exemplejavascript>
					<texte>... la variable <code>a</code> peut être utilisée dans les fonctions <code>testFonction1</code> et <code>testFonction2</code>, mais la variable <code>pi</code> ne peut être utilisée que dans la fonction <code>testFonction1</code>.</texte>
					<texte>Cette possibilité de contrôler la portée d'une variable conduit à conseiller l'utilisation systématique du mot-clef <code>var</code>. Cela permet par exemple d'éviter d'écraser par inadvertance la valeur d'une variable portant le même nom.</texte>
				</paragraphe>
			</section>
			<section titre="Tableaux" ancre="tableaux">
				<paragraphe titre="Tableau à une dimension" ancre="tab1d">
					<texte>Un tableau permet de déclarer une variable qui doit se présenter comme une collection de valeurs. On numérote alors ces valeurs à partir de 0. Par exemple,</texte>
					<exemplejavascript>
						<commentaire_js>Déclaration d'un tableau de 4 éléments :</commentaire_js>
						<declaration nomvariable="tableau1" valeur="Array(4)"/><finligne/>
						<commentaire_js>Déclaration d'un tableau dont le nombre d'éléments est a priori inconnu :</commentaire_js>
						<declaration nomvariable="tableau2" valeur="Array()"/><finligne/>
					</exemplejavascript>
					<texte>Pour affecter des valeurs à un tableau, plusieurs possibilités sont disponibles&#160;:</texte>
					<liste type="ordonnee">
						<item>
							<texte>On peut affecter les valeurs l'une après l'autre&#160;:</texte>
							<exemplejavascript>
								<declaration nomvariable="tableau1" valeur="Array(4)"/><finligne/>
								<variable name="tableau1"/><autres>[0]="Beurre"</autres><finligne/>
								<variable name="tableau1"/><autres>[1]="Confiture"</autres><finligne/>
								<variable name="tableau1"/><autres>[2]="Pain"</autres><finligne/>
								<variable name="tableau1"/><autres>[3]="Jus de fruit"</autres><finligne/>
							</exemplejavascript>
						</item>
						<item>
							<texte>On peut affecter les valeurs en une seule ligne&#160;:</texte>
							<exemplejavascript>
								<declaration nomvariable="tableau1" valeur="Array(4)"/><finligne/>
								<variable name="tableau1"/><autres>=["Beurre", "Confiture", "Pain", "Jus de fruit"]</autres><finligne/>
							</exemplejavascript>
						</item>
						<item>
							<texte>Il est enfin possible de déclarer et définir le tableau simultanément&#160;:</texte>
							<exemplejavascript>
								<declaration nomvariable="tableau1" valeur="Array('Beurre', 'Confiture', 'Pain', 'Jus de fruit')"/><finligne/>
							</exemplejavascript>
						</item>
					</liste>
					<texte>La propriété <code>length</code> d'un tableau renvoie son nombre d'éléments. Par exemple...</texte>
					<exemplejavascript>
						<declaration nomvariable="tableau1" valeur="Array('Beurre', 'Confiture', 'Pain', 'Jus de fruit')"/><finligne/>
						<fonction name="alert"><variable name="tableau1.length"/></fonction><finligne/>
					</exemplejavascript>
					<texte>... renvoie 4.</texte>
				</paragraphe>
				<paragraphe titre="Tableau multidimensionnel" ancre="tabnd">
					<texte>Un tableau à deux dimensions se déclare en déclarant tout d'abord un tableau à une dimension, puis en déclarant que chacun des éléments de ce tableau est lui-même un tableau. Par exemple,</texte>
					<exemplejavascript>
						<declaration nomvariable="tableau1" valeur="Array(4)"/><finligne/>
						<instruction name="for"/><autres>(i=0;i&lt;</autres><variable name="tableau1"/><autres>.</autres><propriete name="length"/><autres>;i++)</autres><sautligne/>
						<bloc>
							<variable name="tableau1"/><autres>[i] = </autres><instruction name="new"/><autres>Array(2)</autres><finligne/>
						</bloc>
					</exemplejavascript>
					<texte>La déclaration précédente amène à un tableau de 4×2 éléments. Le processus peut aisément être étendu à la déclaration d'un tableau de n dimensions quelconque.</texte>
				</paragraphe>
			</section>
		</partie>
		<partie titre="Opérateurs et fonctions" ancre="operateursfn">
			<section titre="Opérateurs binaires mathématiques" ancre="opbinmath">
				<paragraphe>
					<texte>Les opérateurs binaires sont ceux qui effectuent une opération sur deux variables ou données. Ces opérateurs sont&#160;:</texte>
					<liste>
						<item><texte><code>+</code> permet dans le cas de deux nombres leur addition, et dans le cas de deux chaînes de caractères leur concaténation. Par exemple, <code>2+3</code> renvoie 5, mais <code>"2"+"3"</code> renvoie <code>"23"</code>. Si cet opérateur agit sur une chaîne et un nombre, alors ce dernier est transformé en chaîne&#160;: <code>"un"+2</code> renvoie donc <code>"un2"</code> et  <code>2+"3"</code> renvoie <code>"23"</code>.</texte></item>
						<item><texte><code>-</code> permet de faire la soustraction de deux nombres. <code type="langage">JavaScript</code> gère les conversions de types à la volée dans ce cas, et <code>"7"-2</code> renvoie <code>5</code></texte></item>
						<item><texte><code>*</code> permet de faire la multiplication de deux nombres. <code>9*2</code> renvoie donc <code>18</code>. <code type="langage">JavaScript</code> gère aussi les conversions de types à la volée dans ce cas, et <code>"9"*2</code> renvoie aussi <code>18</code>.</texte></item>
						<item><texte><code>/</code> permet de faire la division du premier nombre par le second. <code>9/2</code> renvoie donc <code>4.5</code>. <code type="langage">JavaScript</code> gère aussi les conversions de types à la volée dans ce cas, et <code>"7"/2</code> renvoie <code>3.5</code>.</texte></item>
						<item><texte><code>%</code> renvoie le reste de la division euclidienne de deux nombres. Par exemple, <code>9 % 2</code> renvoie <code>1</code>. <code type="langage">JavaScript</code> opère la conversion de type aussi dans ce sens : <code>"9" % 2</code> renvoie aussi <code>1</code>. Cette opérateur fonctionne aussi avec les nombres à virgule flottante&#160;: <code>20.4%4.8</code> renvoie <code>1.2</code> (ou plutôt <code>1.1999999999999993</code> selon les arrondis de calcul).</texte></item>
					</liste>
				</paragraphe>
			</section>
			<section titre="Opérateurs binaires de comparaison" ancre="opbincmp">
				<paragraphe>
					<texte>Les opérateurs binaires de comparaison permettent de réaliser des tests sur des variables ou des données. Leur valeur de sortie est un booléen. Ces opérateurs sont&#160;:</texte>
					<liste>
						<item><texte><code>&lt;</code> permet de tester si le premier nombre est strictement inférieur au second&#160;: <code>1&lt;2</code> renvoie <code>true</code>, mais <code>1&lt;1</code>. renvoie <code>false</code>.</texte></item>
						<item><texte><code>&lt;=</code> permet de tester si le premier nombre est inférieur ou égal au second&#160;: <code>1&lt;=2</code> renvoie <code>true</code> ainsi que <code>1&lt;=1</code>.</texte></item>
						<item><texte><code>&gt;</code> permet de tester si le premier nombre est strictement supérieur au second&#160;: <code>1&gt;2</code> renvoie <code>false</code>.</texte></item>
						<item><texte><code>&gt;=</code> permet de tester si le premier nombre est supérieur ou égal au second&#160;: <code>1&gt;=2</code> renvoie <code>false</code>.</texte></item>
						<item><texte><code>==</code> permet de tester l'égalité de deux nombres&#160;: <code>1==2</code> renvoie <code>false</code>. <code type="langage">JavaScript</code> gère la conversion de type et <code>1=="1"</code> renvoie <code>true</code>.</texte></item>
						<item><texte><code>!=</code> permet de tester si deux nombres sont différents&#160;: <code>1!=2</code> renvoie <code>true</code>.</texte></item>
						<item><texte><code>===</code> permet de tester à la fois le type et l'égalité de deux expressions&#160;: <code>1===2</code> renvoie <code>false</code>, . <code>1===1</code> renvoie <code>true</code> mais <code>1==="1"</code> renvoie <code>false</code>, puisque l'on compare un nombre à une chaîne de caractères.</texte></item>
					</liste>
				</paragraphe>
			</section>
			<section titre="Opérateurs binaires logiques" ancre="opbinlog">
				<paragraphe>
					<texte>Ces opérateurs renvoient aussi des booléens, et opèrent sur des booléens.</texte>
					<liste>
						<item><texte><code>&amp;&amp;</code> est le "et logique", et renvoie <code>true</code> quand les deux quantités sur laquelle il opère valent <code>true</code>. Par exemple, <code>(1&lt;2) &amp;&amp; (chaine == "a")</code> renvoie <code>true</code> si la variable <code>chaine</code> vaut <code>"a"</code>, et <code>false</code> dans le cas contraire.</texte></item>
					<item><texte><code>||</code> est le "ou logique", et renvoie <code>true</code> quand au moins une des deux quantités sur laquelle il opèrent vaut <code>true</code>. Par exemple, <code>(1&lt;2) &amp;&amp; (chaine == "a")</code> renvoie <code>true</code> dans tous les cas, car <code>1&lt;2</code> est toujours vrai.</texte></item>
					</liste>
				</paragraphe>
			</section>
			<section titre="Opérateurs unaires" ancre="opun">
				<paragraphe titre="Introduction" ancre="unaireintro">
					<texte>Les opérateurs unaires s'appliquent à une seule quantité. Il y en a trois.</texte>
					<liste>
						<item><texte><code>!</code> est l'opérateur logique de négation, et s'applique aux booléens. Ainsi, <code>!(1&lt;2)</code> renvoie <code>false</code>.</texte></item>
						<item><texte><code>++</code> est l'opérateur d'incrémentation&#160;: il ajoute 1 à la variable concernée. Par exemple, si <code>a</code> vaut 2, alors <code>a++</code> affecte 3 à <code>a</code>. Cet opérateur peut être placé en préfixe ou en postfixe (comme dans cet exemple). Voir ci-après pour plus de détails.</texte></item>
						<item><texte><code>--</code> est l'opérateur de décrémentation&#160;: il soustrait 1 à la variable concernée. Par exemple, si <code>a</code> vaut 2, alors <code>--a</code> affecte 1 à <code>a</code>. Cet opérateur peut être placé en préfixe (comme dans cet exemple) ou en postfixe. Voir ci-après pour plus de détails.</texte></item>
					</liste>
				</paragraphe>
				<paragraphe titre="Utilisation des opérateurs d'incrémentation et de décrémentation" ancre="incrdecr">
					<texte>La position des opérateurs d'incrémentation ou de décrémentation est importante dans le cas d'un calcul. Lorsque l'opérateur est en position de préfixe, l'opération est réalisée avant tout calcul. Lorsqu'il est en postfixe, l'opération est réalisée à la toute fin du calcul. Voici quelques exemples&#160;:</texte>
					<exemplejavascript>
						<instruction name="var"/><autres> </autres><variable name="a"/><autres>=3</autres><finligne/>
						<variable name="b"/><autres>=(</autres><variable name="a"/><autres>++)*2</autres><finligne/>
					</exemplejavascript>
					<exemplejavascript>
						<instruction name="var"/><autres> </autres><variable name="a"/><autres>=3</autres><finligne/>
						<variable name="b"/><autres>=(++</autres><variable name="a"/><autres>)*2</autres><finligne/>
					</exemplejavascript>
					<texte>Le premier exemple effectue d'abord la multiplication de <code>a</code> par 2, puis incrémente <code>a</code>. On obtient donc b=(3)*2=6. Le second exemple incrémente d'abord <code>a</code>, puis multiplie le résultat par 2. On obtient donc b=(3+1)*2=8. Dans les deux cas, la valeur finale de <code>a</code> est 3+1=4.</texte>
				</paragraphe>
			</section>
			<exercice titre="Manipulation des opérateurs" ancre="exomanipoperateurs">
				<enonce href="exercices/exo27.html"/>
				<correction href="exercices/exo27cor.html"/>
			</exercice>
			<section titre="Fonctions" ancre="fonctions">
				<paragraphe titre="Déclaration d'une fonction" ancre="fndeclare">
					<texte>Une fonction est un ensemble d'instructions que l'on peut appeler séparément. La forme générale de sa déclaration est</texte>
					<exemplejavascript>
						<instruction name="function"/><autres> nomFonction(liste des arguments)</autres><sautligne/>
						<bloc><autres>(...)</autres><sautligne/></bloc>
					</exemplejavascript>
					<texte>Une fonction est ensuite appelée dans le code <code type="langage">JavaScript</code> par <code>nomFonction(arguments...)</code>. Une fonction peut ne pas nécessiter d'arguments (qui en sont les données d'entrée), et elle peut ne pas retourner de valeur en sortie.</texte>
				</paragraphe>
				<paragraphe titre="Valeur retournée" ancre="fnreturn">
					<texte>Une fonction peut « retourner » une valeur à l'aide de l'instruction <code>return</code>. Par exemple,</texte>
					<exemplejavascript>
						<instruction name="function"/><autres> surfaceRectangle(longueur, largeur)</autres><sautligne/>
						<bloc>
							<instruction name="return"/><autres> longueur*largeur</autres><finligne/>
						</bloc>
					</exemplejavascript>
					<texte>Un appel à cette fonction se fait ainsi&#160;:</texte>
					<exemplejavascript><fonction name="alert"><fonction name="surfaceRectangle"><autres>2.5</autres><autres>3</autres></fonction></fonction></exemplejavascript>
					<texte>À l'écran, une boîte d'affichage montrera 7.5.</texte>
				</paragraphe>
				<exercice titre="Écriture d'une fonction simple" ancre="exofonctionsimple">
					<enonce href="exercices/exo28.html"/>
					<correction href="exercices/exo28cor.html"/>
				</exercice>
			</section>
		</partie>
		<partie titre="Objets prédéfinis" ancre="objetspredf">
			<section titre="Quelques mots sur la programmation orientée objet" ancre="poo">
				<paragraphe titre="Introduction" ancre="objIntro">
					<texte>Il n'est pas dans le propos de ce cours de faire une initiation complète à la Programmation Orientée Objet, mais d'en présenter les quelques points qui sont utiles au jour le jour en <code type="langage">JavaScript</code>. Nous reviendrons plus en détails dans un autre chapitre sur la manière de <reference href="bonnespratiques.html#objet">manipuler des objets en <code type="langage">JavaScript</code></reference>.</texte>
				</paragraphe>
				<paragraphe titre="Qu'est-ce qu'un objet ?" ancre="objCekoi">
					<texte>Un objet est une entité de programmation qui possèdent un certain nombre de <valeur>propriétés</valeur>, et sur laquelle il est possible d'agir ou qui est susceptible d'agir par l'intermédiaire de <valeur>méthodes</valeur>. Une méthode est une sorte de fonction s'appliquant à l'objet, et à la syntaxe un peu particulière.</texte>
					<texte>Une propriété caractérise un objet. Par exemple, si l'on pense à un objet physique comme une boîte, ses propriétés pourraient être ses longueur, hauteur et profondeur, sa couleur, le fait qu'elle soit ouverte ou fermée, pleine ou vide, etc. Des méthodes permettant d'interagir avec cette boîte seraient par exemple l'action de l'ouvrir ou de la fermer (qui agirait sur la propriété «&#160;ouverte ou fermée&#160;»), celle d'y ajouter ou d'en extraire du contenu (qui agirait sur la propriété «&#160;pleine ou vide&#160;»), etc. En <code type="langage">JavaScript</code> comme dans les autres langages orientés objet, on représente les propriétés et les méthodes avec des points. Pour reprendre notre exemple de boîte, une implémentation <code type="langage">Javascript</code> en serait&#160;:</texte>
					<exemplejavascript>
						<variable name="boite"/><autres>.</autres><propriete name="longueur"/><finligne/>
						<variable name="boite"/><autres>.</autres><propriete name="hauteur"/><finligne/>
						<variable name="boite"/><autres>.</autres><propriete name="profondeur"/><finligne/>
						<variable name="boite"/><autres>.</autres><propriete name="couleur"/><finligne/>
						<variable name="boite"/><autres>.</autres><propriete name="ouverte"/><finligne/>
						<variable name="boite"/><autres>.</autres><propriete name="pleine"/><finligne/>
						<sautligne/>
						<variable name="boite"/><autres>.</autres><fonction name="ouvrir"/><finligne/>
						<variable name="boite"/><autres>.</autres><fonction name="fermer"/><finligne/>
						<variable name="boite"/><autres>.</autres><fonction name="remplir"><autres>contenu</autres></fonction><finligne/>
						<variable name="boite"/><autres>.</autres><fonction name="vider"/><finligne/>
					</exemplejavascript>
					<texte>Nous allons voir des exemples de propriétés et de méthodes pour des objets que l'on utilise très souvent en <code type="langage">JavaScript</code>.</texte>
				</paragraphe>
			</section>
			<section titre="L'objet String" ancre="objString">
				<paragraphe titre="Propriétés de l'objet String" ancre="strprop">
					<texte>Cet objet ne possède qu'une seule propriété, <code>length</code>, qui renvoie sa longueur. Ainsi, <code>chaine="Bonjour!";alert(chaine.length);</code> renvoie 8.</texte>
				</paragraphe>
				<paragraphe titre="Méthodes de l'objet String" ancre="strmeth">
					<texte>Les méthodes de cet objet permettent de manipuler les chaînes de caractères. Elles s'appliquent à toute variable de ce type.</texte>
					<liste type="ordonnee">
						<item><texte><code>indexOf</code> renvoie la position de la première occurrence d'un caractère donné dans une chaîne. Ainsi, <code>chaine="Bonjour!";alert(chaine.indexOf('o'));</code> renvoie 1, la numéroration commençant à 0. Si le caractère n'est pas trouvé, la méthode renvoie -1.</texte></item>
						<item><texte><code>lastIndexOf</code> renvoie la position de la dernière occurrence d'un caractère donné dans une chaîne. Ainsi, <code>chaine="Bonjour!";alert(chaine.lastIndexOf('o'));</code> renvoie 4.</texte></item>
						<item><texte><code>charAt</code> renvoie le caractère présent à une certaine position. Par exemple, <code>chaine="Bonjour!";alert(chaine.charAt(5));</code> renvoie «&#160;u &#160;».</texte></item>
						<item><texte><code>charCodeAt</code> renvoie le code Unicode du caractère présent à une certaine position. Par exemple, <code>chaine="Bonjour!";alert(chaine.charCodeAt(5));</code> renvoie «&#160;117 &#160;».</texte></item>
						<item><texte><code>fromCharCode</code> renvoie une chaîne correspondant à la séquence de codes Unicode passée en paramètre. Par exemple, <code>alert(String.fromCharCode(66, 111, 110, 106, 111, 117, 114, 33))</code> renvoie «&#160;Bonjour!&#160;».</texte></item>
						<item><texte>La méthode <code>toUpperCase</code> convertit la chaîne en majuscules. Par exemple, <code>chaine="Bonjour!";alert(chaine.toUppercase);</code> affiche «&#160;BONJOUR!&#160;».</texte></item>
						<item><texte>À l'inverse, la méthode <code>toLowerCase</code> convertit la chaîne en minuscules. Par exemple, <code>chaine="Bonjour!";alert(chaine.toLowercase);</code> affiche «&#160;bonjour!&#160;».</texte></item>
						<item><texte>La méthode <code>substring</code> extrait une sous-chaîne de la chaîne à laquelle elle s'applique. Cette méthode prend deux entiers positifs en paramètres. Le paramètre le plus petit indique la position de départ dans la chaîne (commençant à 0), le paramètre le plus grand la position de fin (le caractère de cette position ne fait pas partie du résultat). Par exemple, <code>chaine="Bonjour!";alert(chaine.substring(1,4);</code> renvoie «&#160;onj&#160;».</texte></item>
						<item><texte><code>substr</code> extrait aussi une sous-chaîne, mais elle fonctionne différemment. Ainsi, le premier paramètre désigne la position de départ, et le second indique la <valeur>longueur</valeur> de la sous-chaîne à extraire. Par exemple, <code>chaine="Bonjour!";alert(chaine.substr(1,4));</code> renvoie «&#160;onjo&#160;».</texte></item>
						<item><texte><code>slice</code> extrait aussi une sous-chaîne, mais elle fonctionne encore différemment. Ainsi, le premier paramètre désigne la position de départ, et le second indique la position de fin de la sous-chaîne à extraire. Par exemple, <code>chaine="Bonjour!";alert(chaine.substr(2,4));</code> renvoie «&#160;njo&#160;». Si le second paramètre est omis, <code>slice</code> extrait la sous-chaîne jusqu'à la fin&#160;: <code>chaine="Bonjour!";alert(chaine.substr(2));</code> renvoie donc «&#160;njour!&#160;»</texte></item>
						<item><texte><code>split</code> permet de scinder une chaîne en sous-chaînes en utilisant le paramètre comme caractère de séparation. Le résultat est un tableau de chaînes de caractères. Ainsi, <code>chaine="Bonjour!";tab=chaine.split('o');</code> renvoie un tableau à une dimension dont les éléments sont respectivement <code>"B"</code>, <code>"nj"</code> et <code>"ur!"</code>.</texte></item>
						<item><texte><code>concat</code> concatène la chaîne avec la ou les chaînes passées en argument. Par exemple, <code>chaine="Bonjour!";alert(chaine.concat(" et à ", "bientôt..."));</code> renvoie «&#160;Bonjour! et à bientôt...&#160;».</texte></item>
						<item><texte><code>replace</code> remplace un morceau de la chaîne indiqué en paramètre par une autre chaîne indiquée comme second paramètre. Par exemple, <code>chaine="Bonjour!";alert(chaine.replace("jour", "soir"));</code> renvoie «&#160;Bonsoir!&#160;».</texte></item>
						<item>
							<texte><code>match</code> sélectionne les parties d'une chaîne qui correspondent à une <reference href="#regexp">expression rationnelle</reference>. Par exemple (exemple tiré de la <reference href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:String:match">Référence Javascript&#160;1.5 de la Fondation Mozilla</reference>)&#160;:</texte>
							<exemplejavascript>
								<declaration nomvariable="str" valeur='"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"' new="non"/><finligne/>
								<declaration nomvariable="regexp" valeur="/[A-E]/gi" new="non"/><finligne/>
								<declaration nomvariable="matches_array" valeur="str.match(regexp)" new="non"/><finligne/>
								<fonction name="alert"><variable name="matches_array"/></fonction><finligne/>
							</exemplejavascript>
						</item>
						<item><texte><code>search</code> recherche une expression rationnelle dans la chaîne à laquelle elle s'applique, et renvoie l'index de cette expression.</texte></item>
					</liste>
				</paragraphe>
			</section>
			<section titre="L'objet Math" ancre="objMath">
				<paragraphe titre="Propriétés de l'objet Math" ancre="mathprop">
					<texte>Il est courant de devoir faire appel à des fonctions ou des constantes mathématiques dès lors que l'on souhaite réaliser quelques calculs. Plusieurs sont disponibles à l'aide de cet objet (ne pas oublier la majuscule à <code>Math</code>&#160;!).</texte>
					<liste>
						<item><texte><code>E</code> est la constante d'Euler (environ 2,718)</texte></item>
						<item><texte><code>PI</code> est le nombre pi (environ 3,14159)</texte></item>
						<item><texte><code>LN2</code> est le logarithme naturel de 2 (environ 0,693)</texte></item>
						<item><texte><code>LN10</code> est le logarithme naturel de 10 (environ 2,302)</texte></item>
						<item><texte><code>LOG2E</code> est le logarithme en base 2 de e (environ 1,442)</texte></item>
						<item><texte><code>LOG10E</code> est le logarithme en base 10 de e (environ 0,434)</texte></item>
						<item><texte><code>SQRT2</code> est la racine carrée de 2 (environ 1,414)</texte></item>
						<item><texte><code>SQRT1_2</code> est la racine carrée de 1/2 (environ 0,707)</texte></item>
					</liste>
				</paragraphe>
				<paragraphe titre="Méthodes de l'objet Math" ancre="mathmeth">
					<texte>Ces méthodes correspondent à des fonctions mathématiques.</texte>
					<liste>
						<item><texte><code>abs</code> retourne la valeur absolue du paramètre</texte></item>
						<item><texte><code>cos</code>, <code>sin</code> et <code>tan</code> renvoient respectivement le cosinus, le sinus et la tangente du paramètre (celui-ci doit être indiqué en radians).</texte></item>
						<item><texte><code>acos</code>, <code>asin</code> et <code>atan</code> renvoient respectivement l'arccosinus, l'arcsinus et l'arctangente du paramètre, exprimé en radians.</texte></item>
						<item><texte><code>atan2</code> renvoie l'arctangente du rapport de ses deux paramètres (c'est-à-dire l'angle en radians dont la tangente est égale au rapport des deux paramètres).</texte></item>
						<item><texte><code>ceil</code> renvoie le plus petit entier supérieur ou égal à son argument. Par exemple, <code>ceil(3.7)</code> et <code>ceil(3.2)</code> renvoient 4.</texte></item>
						<item><texte><code>floor</code> renvoie le plus grand entier inférieur ou égal à son argument. Par exemple, <code>floor(3.7)</code> et <code>floor(3.2)</code> renvoient 3.</texte></item>
						<item><texte><code>round</code> renvoie l'entier le plus proche de son argument. Par exemple, <code>round(3.7)</code> renvoie 4 et <code>round(3.2)</code> renvoie 3.</texte></item>
						<item><texte><code>exp</code> renvoie l'exponentielle de son argument</texte></item>
						<item><texte><code>log</code> renvoie le logarithme <valeur>naturel</valeur> de son argument. Par exemple, <code>alert(Math.log(Math.E));</code> renvoie 1.</texte></item>
						<item><texte><code>max</code> et <code>min</code> renvoient respectivement le plus grand et le plus petit nombre d'une collection de nombres. Par exemple, <code>alert(Math.max(1,2))</code> renvoie 2.</texte></item>
						<item><texte><code>pow</code> élève à la puissance du second paramètre le nombre passé en premier paramètre. Par exemple, <code>alert(Math.pow(2,3))</code> renvoie 8.</texte></item>
						<item><texte><code>sqrt</code> renvoie la racine carrée de son argument</texte></item>
						<item><texte><code>random</code> renvoie un nombre pseudo-aléatoire compris entre 0 et 1.</texte></item>
					</liste>
				</paragraphe>
				<exercice titre="Écriture d'une fonction complexe" ancre="exofonctioncomplexe">
					<enonce href="exercices/exo29.html"/>
					<correction href="exercices/exo29_1cor.html" description="Appel à une fonction retournant une valeur"/>
					<correction href="exercices/exo29_2cor.html" description="Calcul de la longueur d'un côté de triangle rectangle"/>
					<correction href="exercices/exo29_3cor.html" description="Création d'un tableau à deux dimensions"/>
				</exercice>
			</section>
			<section titre="L'objet Date" ancre="objDate">
				<paragraphe titre="Constructeur de l'objet Date" ancre="contructeurDate">
					<texte><code>Date</code> est un type d'objet qui permet de gérer non seulement les dates, mais aussi les heures et durées. Le constructeur est ce qui permet de créer une nouvelle « instance » de la classe <code>Date</code>. Sa syntaxe est</texte>
					<exemplejavascript>
						<declaration nomvariable="nouvelleDate" valeur="Date(annee, mois, jour [, heure, minute, seconde, milliseconde])"/><finligne/>
					</exemplejavascript>
					<texte>Les paramètres <code>heure</code>, <code>minute</code>, <code>seconde</code> et <code>milliseconde</code> sont optionnels. Par exemple, une variable stockant la date du 11 octobre 2003 à 9h32 passée de 34 secondes et 123 millisecondes est créée par...</texte>
					<exemplejavascript>
						<declaration nomvariable="nouvelleDate" valeur="Date(2003, 10, 11, 9, 32, 34, 123)"/><finligne/>
					</exemplejavascript>
					<texte>Si aucun paramètre n'est utilisé, par exemple <code>auj=new Date;</code>, la date renvoyée est la date courante.</texte>
				</paragraphe>
				<paragraphe titre="Méthodes de l'objet Date" ancre="dateprop">
					<texte>Tous les exemples ci-dessous sont donnés avec l'objet <code>nouvelleDate</code> tel qu'il a été créé plus haut. Les méthodes de <code>Date</code> sont&#160;:</texte>
					<liste>
						<item><texte><code>getFullYear</code> renvoie l'année pour la date spécifiée. Ainsi, <code>alert(nouvelleDate.getFullYear())</code> renvoie 2003. Cette méthode est complétée par <code>getUTCFullYear</code> qui donne l'année dans le Temps Universel en tenant compte du décalage horaire.</texte></item>
						<item><texte><code>getMonth</code> renvoie le mois pour la date spécifiée. Ainsi, <code>alert(nouvelleDate.getMonth())</code> renvoie 10. Cette méthode est complétée par <code>getUTCMonth</code> qui donne l'année dans le Temps Universel en tenant compte du décalage horaire.</texte></item>
						<item><texte><code>getDate</code> renvoie le quantième dans le mois pour la date spécifiée. Ainsi, <code>alert(nouvelleDate.getDate())</code> renvoie 11. Cette méthode est complétée par <code>getUTCDate</code> qui donne l'année dans le Temps Universel en tenant compte du décalage horaire.</texte></item>
						<item><texte><code>getDay</code> renvoie le jour de la semaine pour la date spécifiée (0=dimanche, 6=samedi). Ainsi, <code>alert(nouvelleDate.getDay())</code> renvoie 6. Cette méthode est complétée par <code>getUTCDay</code> qui donne l'année dans le Temps Universel en tenant compte du décalage horaire.</texte></item>
						<item><texte><code>getHours</code> renvoie l'heure dans le jour pour la date spécifiée (entre 0 et 23). Ainsi, <code>alert(nouvelleDate.getHours())</code> renvoie 9. Cette méthode est complétée par <code>getUTCHours</code> qui donne l'année dans le Temps Universel en tenant compte du décalage horaire.</texte></item>
						<item><texte><code>getMinutes</code> renvoie le nombre de minutes pour la date spécifiée. Ainsi, <code>alert(nouvelleDate.getMinutes())</code> renvoie 32. Cette méthode est complétée par <code>getUTCMinutes</code> qui donne l'année dans le Temps Universel en tenant compte du décalage horaire.</texte></item>
						<item><texte><code>getSeconds</code> renvoie le nombre de secondes pour la date spécifiée. Ainsi, <code>alert(nouvelleDate.getSeconds())</code> renvoie 34. Cette méthode est complétée par <code>getUTCSeconds</code> qui donne l'année dans le Temps Universel en tenant compte du décalage horaire.</texte></item>
						<item><texte><code>getMilliseconds</code> renvoie le nombre de millisecondes pour la date spécifiée. Ainsi, <code>alert(nouvelleDate.getMilliseconds())</code> renvoie 123. Cette méthode est complétée par <code>getUTCMilliseconds</code> qui donne l'année dans le Temps Universel en tenant compte du décalage horaire.</texte></item>
						<item><texte><code>getTime</code> renvoie le nombre de millisecondes écoulées depuis le 1er janvier 1970 jusqu'à la date spécifiée.</texte></item>
						<item><texte><code>getTimezoneOffset</code> renvoie le déclarage horaire en minutes par rapport au Temps Universel tel qu'il est défini sur le système d'exploitation. Par exemple, si l'on se trouve dans une zone à GMT+10, la valeur retournée est -600.</texte></item>
					</liste>
					<texte>Chacune de ces méthodes a son pendant permettant de spécifier la propriété correspondante (par exemple <code>setDate</code> en parallèle de <code>getDate</code>).</texte>
					<liste>
						<item><texte><code>toLocaleString</code> convertit une date en chaîne de caractères en utilisant les conventions locales. Cette méthode est complétée par <code>toLocaleDateString</code> et <code>toLocaleTimeString</code> pour la date et l'heure.</texte></item>
					</liste>
				</paragraphe>
			</section>
			<section titre="Trois méthodes de l'objet window pour interagir avec l'internaute" ancre="window">
				<paragraphe>
					<texte>Nous reviendrons sur l'objet <reference href="window.html" lang="en"><code>window</code></reference> plus loin dans ce cours. Pour le moment, voici trois méthodes d'un usage courant, permettant de gérer les interactions avec l'utilisateur&#160;:</texte>
					<liste>
						<item><texte><code>alert(chaine)</code> affiche à l'écran le message d'information contenu dans <code>chaine</code>. Dans la boîte ne se trouve qu'un bouton <code>OK</code>.</texte></item>
						<item><texte><code>confirm(chaine)</code> affiche la chaîne de caractères <code>chaine</code> accompagnée de deux boutons <code>OK</code> et <code>Annuler</code>. Cette méthode renvoie un booléen qui vaut <code>true</code> si OK a été cliqué, et <code>false</code> si l'utilisateur a cliqué sur <code>Annuler</code>.</texte></item>
						<item><texte><code>prompt(chaine)</code> affiche la chaîne de caractères <code>chaine</code> puis une champ de saisie. La méthode retourne sous la forme d'une chaîne de caractères le résultat de la saisie de l'utilisateur. Si l'on souhaite traiter cette sortie comme un nombre, il est nécessaire de passer par la fonction <code>parseInt</code>. Par exemple, <code>quantite=prompt("Entrez la quantité souhaitée :");</code></texte></item>
					</liste>
				</paragraphe>
			</section>
		</partie>
		<partie titre="Tests et boucles" ancre="testsboucles">
			<section titre="Tests logiques" ancre="tests">
				<paragraphe titre="Introduction" ancre="testsIntro">
					<texte>Les tests logiques permettent de réaliser des opérations en fonction des conditions dans lesquelles le code s'exécute. Par exemple, si l'utilisateur a entré un prénom féminin en guise d'identifiant, on peut envisager d'accorder les participes passés en fonction de ce choix.</texte>
				</paragraphe>
				<paragraphe titre="Instruction if" ancre="if">
					<texte>L'instruction <code>if</code> est la plus simple possible. Elle permet de tester une condition unique. Par exemple,</texte>
					<exemplejavascript>
						<instruction name="if"/><autres> (choix==1)</autres><sautligne/>
						<bloc>
							<fonction name="alert"><autres>"Vous avez fait le premier choix"</autres></fonction><finligne/>
						</bloc>
					</exemplejavascript>
					<texte>Elle peut être complétée par l'instruction <code>else</code>, qui permet d'indiquer le code à exécuter si la condition n'est pas remplie&#160;:</texte>
					<exemplejavascript>
						<instruction name="if"/><autres> (choix==1)</autres><sautligne/>
						<bloc>
							<fonction name="alert"><autres>"Vous avez fait le premier choix"</autres></fonction><finligne/>
						</bloc>
						<instruction name="else"/><sautligne/>
						<bloc>
							<fonction name="alert"><autres>"Vous n'avez pas fait le premier choix"</autres></fonction><finligne/>
						</bloc>
					</exemplejavascript>
				</paragraphe>
				<paragraphe titre="Instruction switch" ancre="switch">
					<texte>Cette instruction permet de réaliser des branchements conditionnels. Elle s'utilise avec le mot-clef <code>case</code>. Chaque cas est analysé, puis si le test est concluant, la liste d'instructions suivant le <code>case</code> est exécutée. Cette exécution se poursuit jusqu'à rencontrer l'instruction <code>break</code>. On indique la liste des instructions à réaliser par défaut avec <code>default</code>. Par exemple,</texte>
					<exemplejavascript>
						<instruction name="switch"/><autres> (choix)</autres><sautligne/>
						<bloc>
							<instruction name="case"/><autres> 1:</autres><sautligne/>
								<fonction name="alert"><autres>"Vous avez fait le premier choix"</autres></fonction><finligne/>
							<instruction name="break"/><finligne/>
							<instruction name="case"/><autres> 2:</autres><sautligne/>
							<fonction name="alert"><autres>"Vous avez fait le deuxième choix"</autres></fonction><finligne/>
							<instruction name="break"/><finligne/>
							<instruction name="case"/><autres> 3:</autres><sautligne/>
							<fonction name="alert"><autres>"Vous avez fait le troisième choix"</autres></fonction><finligne/>
							<instruction name="break"/><finligne/>
							<instruction name="default"/><autres> :</autres><sautligne/>
							<fonction name="alert"><autres>"Vous avez fait un choix au moins égal à 4"</autres></fonction><finligne/>
						</bloc>
					</exemplejavascript>
					<texte>Si on avait omis le <code>break</code> à la fin du troisième <code>case</code>, si l'utilisateur avait saisi 3 on aurait eu coup sur coup l'affichage des messages "Vous avez fait le troisième choix" et "Vous avez fait un choix au moins égal à 4". </texte>
				</paragraphe>
				<exercice titre="Utilisation de switch" ancre="exoswitch">
					<enonce href="exercices/exo30.html"/>
					<correction href="exercices/exo30cor.html"/>
				</exercice>
			</section>
			<section titre="Itérations" ancre="boucles">
				<paragraphe titre="Introduction" ancre="iterintro">
					<texte>Les itérations sont des séries d'instructions qui doivent être exécutées de manière répétitive, un certain nombre de fois ou bien jusqu'à ce qu'une condition soit réalisée. Quatre instructions sont disponibles&#160;: <code>do... while</code>, <code>while</code>, <code>for</code> et <code>for... in</code></texte>
				</paragraphe>
				<paragraphe titre="do... while et while" ancre="dowhile">
					<texte>Ces deux instructions jouent des rôles similaires. Une série d'instructions est répétée tant qu'une condition est réalisée. Par exemple...</texte>
					<exemplejavascript>
						<declaration nomvariable="compteur" valeur="1" new="non"/><finligne/>
						<instruction name="do"/><sautligne/>
						<bloc>
							<variable name="compteur"/><autres>++</autres><finligne/>
							<fonction name="alert"><autres>compteur</autres></fonction><finligne/>
						</bloc>
						<instruction name="while"/><autres> (compteur&lt;3)</autres>
					</exemplejavascript>
					<texte>Le code précédent affichera successivement 2 puis 3 avant de sortir de la boucle. Il en est de même pour...</texte>
					<exemplejavascript>
						<declaration nomvariable="compteur" valeur="1" new="non"/><finligne/>
						<instruction name="while"/><autres> (compteur&lt;3)</autres><sautligne/>
						<bloc>
							<variable name="compteur"/><autres>++</autres><finligne/>
							<fonction name="alert"><autres>compteur</autres></fonction><finligne/>
						</bloc>
					</exemplejavascript>
					<texte>La différence vient du fait que <code>do... while</code> exécutera l'ensemble d'instructions au moins une fois. Ainsi...</texte>
					<exemplejavascript>
						<declaration nomvariable="compteur" valeur="1" new="non"/><finligne/>
						<instruction name="do"/><sautligne/>
						<bloc>
							<variable name="compteur"/><autres>++</autres><finligne/>
							<fonction name="alert"><autres>compteur</autres></fonction><finligne/>
						</bloc>
						<instruction name="while"/><autres> (compteur&lt;1)</autres>
					</exemplejavascript>
					<texte>... affichera 2 une fois avant de sortir de la boucle. En revanche...</texte>
					<exemplejavascript>
						<declaration nomvariable="compteur" valeur="1" new="non"/><finligne/>
						<instruction name="while"/><autres> (compteur&lt;1)</autres><sautligne/>
						<bloc>
							<variable name="compteur"/><autres>++</autres><finligne/>
							<fonction name="alert"><autres>compteur</autres></fonction><finligne/>
						</bloc>
					</exemplejavascript>
					<texte>... n'affichera rien du tout.</texte>
				</paragraphe>
				<exercice titre="Utilisation de while" ancre="exowhile2">
					<enonce href="exercices/exo31.html"/>
					<correction href="exercices/exo31cor.html"/>
				</exercice>
				<paragraphe titre="Boucles for" ancre="for">
					<texte>Deux types de boucles <code>for</code> existent en <code type="langage">JavaScript</code>. Ces boucles s'effectuent un nombre déterminé de fois. La plus simple à concevoir est par exemple la boucle...</texte>
					<exemplejavascript>
						<instruction name="for"/><autres> (i=0;i&lt;3&lt;i++)</autres><sautligne/>
						<bloc>
							<autres>Suite d'instructions...</autres><sautligne/>
						</bloc>
					</exemplejavascript>
					<texte>La syntaxe générale de la parenthèse après le mot-clef <code>for</code> est</texte>
					<liste type="ordonnee">
						<item><texte>instruction de départ&#160;;</texte></item>
						<item><texte>condition de fin&#160;;</texte></item>
						<item><texte>instruction à exécuter à chaque fin d'itération.</texte></item>
					</liste>
					<texte>La dernière instruction est souvent limitée à une incrémentation, mais lorsque la boucle ne comporte qu'une seule instruction, il est possible de l'y placer.</texte>
					<texte>Une variante de la boucle <code>for</code> est la boucle <code>for... in</code>. Cette boucle permet de parcourir un tableau ou plus généralement un objet. Par exemple,</texte>
					<exemplejavascript>
						<declaration nomvariable="tab" valeur="Array(3)"/><finligne/>
						<instruction name="for"/><autres> (element </autres><instruction name="in"/><autres> </autres><variable name="tab"/><autres>)</autres><sautligne/>
						<bloc>
							<variable name="element"/><autres>="test"</autres><finligne/>
						</bloc>
					</exemplejavascript>
					<texte>L'exemple précédent crée un tableau de trois chaînes de caractères, dont chaque élément contient la chaîne <code>"test"</code>.</texte>
				</paragraphe>
			</section>
		</partie>
		<partie titre="Divers" ancre="divers">
			<section titre="Temporisation" ancre="tempo">
				<paragraphe titre="Fixer un délai pour une exécution : setTimeout et clearTimeout" ancre="setTimeout">
					<texte>Ces deux méthodes de l'objet <code>window</code> permettent d'indiquer une liste d'instructions à exécuter au bout d'un certain temps. Par exemple,</texte>
					<exemplejavascript>
						<instruction name="function"/><autres> fonctionTest(i)</autres><sautligne/>
						<bloc>
							<instruction name="while"/><autres> (i&gt;0)</autres>
							<bloc>
								<fonction name="alert"><autres>i</autres></fonction><finligne/>
								<fonction name="setTimeout"><autres>"fonctionTest(i)", 1000</autres></fonction><finligne/>
							</bloc>
							<autres>i--</autres><finligne/>
						</bloc>
					</exemplejavascript>
					<texte>Le second paramètre est le temps au bout duquel le premier paramètre doit être évalué, exprimé en millisecondes. Ici, <code>fonctionTest(3)</code> affichera toutes les secondes successivement 3, puis 2, puis 1 avant de s'arrêter. <code>setTimeout</code> renvoie un entier servant à identifier l'appel à cette méthode, et il est possible de stopper ces répétitions à l'aide de la méthode <code>clearTimeout(identifiant)</code>.</texte>
				</paragraphe>
				<paragraphe titre="Répéter une action" ancre="setIntervall">
					<texte>La méthode <code>setInterval</code>, qui renvoie un entier servant d'identifiant, permet de relancer une fonction à intervalles de temps réguliers (exprimés en millisecondes). Le code suivant relance la fonction <code>fonctionARepeter</code> toutes les secondes.</texte>
					<exemplejavascript>
						<variable name="identifiant"/><autres>=</autres><fonction name="setInterval"><autres>"fonctionARepeter()", 1000</autres></fonction><finligne/>
					</exemplejavascript>
					<texte>L'identifiant retourné permet de stopper ces répétitions à l'aide de la méthode <code>clearInterval</code>.</texte>
				</paragraphe>
			</section>
			<section titre="Évaluation d'une expression" ancre="eval">
				<paragraphe>
					<texte>Il est possible de demander à ce qu'une expression soit évaluée à la saisie, à l'aide de la fonction <code>eval()</code>. Par exemple, <code>eval("a=3+2;alert(a);")</code> affiche ( dans une boîte d'alerte. Attention&#160;: cette fonction est à utiliser avec précaution, pour des raisons de sécurité.</texte>
				</paragraphe>
			</section>
			<!--<section titre="Cookies" ancre="cookies">
				<paragraphe>
					<texte>Les <autrelangue>cookies</autrelangue> sont de petits fichiers que <code>Javascript</code> crée et permet de manipuler sur le poste client, et dans lequel il est possible de stocker les valeurs de paramètres. Pour créer un cookie, il suffit de renseigner la propriété <code>document.cookie</code>. Par exemple,</texte>
					<exemplejavascript>
						<variable name="document.cookie"/><autres>="parametre1="+valeurDuParametre1</autres><finligne/>
					</exemplejavascript>
					<texte>Les valeurs des paramètres sont écrites en plusieurs fois. Il est possible aussi d'indiquer la date d'expiration d'un cookie, qui doit être exprimée au format GMT&#160;:</texte>
					<exemplejavascript>
						<declaration nomvariable="fin" valeur="Date"/><finligne/>
						<variable name="fin"/><autres>.</autres><fonction name="setMonth"><autres>(fin.getMonth()+3)</autres></fonction><finligne/><variable name="document.cookie"/><autres>="parametre1="+valeurDuParametre1</autres><finligne/>
						<variable name="document.cookie"/><autres>="parametre2="+valeurDuParametre2;expires=fin.toGMTString</autres><finligne/>
					</exemplejavascript>
					<texte>Pour lire un cookie, il suffit de manipuler la propriété <code>document.cookie</code> à l'aide de la méthode <code>split</code>, de séparer les paires (paramètre, valeur) à l'aide de <code>;</code>, puis de lire les valeurs correspondant à chaque paire en séparant une nouvelle fois avec les caractères <code>=</code>.</texte>
				</paragraphe>
				<exercice titre="Utilisation d'un cookie" ancre="exocookie">
					<enonce href="exercices/exo32.html"/>
					<correction href="exercices/exo32_1cor.html" description="première question"/>
					<correction href="exercices/exo32_2cor.html" description="seconde question"/>
				</exercice>
			</section>--><!--
			<section titre="Expressions régulières" ancre="regexp">
				<paragraphe>
					<texte>Les expressions régulières en <code type="langage">JavaScript</code> se déclarent à l'aide de caractères <code>/</code>. Par exemple,</texte>
					<exemplejavascript></exemplejavascript>
				</paragraphe>
			</section>-->
		</partie>
	</corpus>
</chapitre>

