Programmation Table des matièresL'objet document est probablement l'un des objets les plus importants du modèle objet javascript. Il permet d'accéder à tous les éléments affichés

Programmation

Table des matièresProgrammation.....................................................................................................................................1

programme compilé.........................................................................................................................3programme interprété.......................................................................................................................3

Pourquoi les programmes compilés sont-ils plus efficaces ? ......................................................3Caractéristiques du langage Javascript.................................................................................................4

Caractéristiques clefs:.....................................................................................................................4objet (première approche): .........................................................................................................4Les méthodes...............................................................................................................................4

Les différentes versions Javascript..................................................................................................5A quel emplacement insérer le Javascript dans votre page HTML.................................................6

page minimum......................................................................................................................................6un script............................................................................................................................................7 Une première instruction Javascript...............................................................................................8

document.write.....................................................................................................................................9Les objets..............................................................................................................................................9

Instructions liées aux objets........................................................................................................9L'Objet "window"...........................................................................................................................9L'Objet "document"......................................................................................................................10

Ne pas devoir écrire le nom de l'objet devant chaque méthode................................................10Les boîtes de dialogue ...................................................................................................................11Utiliser un formulaire. ..................................................................................................................12

Définir des variables...........................................................................................................................13Nom des variables : .......................................................................................................................13DÉCLARATION TYPÉE ............................................................................................................13Les nombres : ................................................................................................................................14Les chaînes : ..................................................................................................................................14

Concaténation : ........................................................................................................................15Les booléens :................................................................................................................................15Type particulier ............................................................................................................................15

Exercice : Mécanisme de l'affectation......................................................................................17Les opérateurs.....................................................................................................................................18

Qu'est-ce qu'un opérateur? ............................................................................................................18Les opérateurs de calcul ................................................................................................................18Les opérateurs d'affectation ..........................................................................................................18Les opérateurs d'incrémentation ...................................................................................................19Les opérateurs de comparaison .....................................................................................................19Les opérateurs logiques (booléens) ...............................................................................................20

Opérateurs de manipulation de chaînes de caractères ..............................................................20Les fonctions......................................................................................................................................21

Valeur de retour..............................................................................................................................21Portée (visibilité) des variables......................................................................................................22Les fonctions prédéfinies...............................................................................................................23Les méthodes (fonctions) Objet.méthode()...................................................................................23propriété -> grandeur qui est liée à un objet..................................................................................24Exemple:Valider une carte banquaire:...........................................................................................24

Structures..................................................................................................................................25exemple: convertir une durée (jours, heures et minutes en secondes)......................................26

1 Cours programmation

structure conditionnelle..................................................................................................................26L'instruction if ... else................................................................................................................27Une façon plus courte de faire un test.......................................................................................27

Les boucles ........................................................................................................................................28La boucle for.............................................................................................................................28L'instruction while ....................................................................................................................28L'instruction do {...}while ().....................................................................................................28Saut inconditionnel ..................................................................................................................29Arrêt inconditionnel .................................................................................................................29L'instruction switch...case ........................................................................................................30

tableau.................................................................................................................................................31Déclaration accélérée................................................................................................................31

Les tableaux associatifs.................................................................................................................31


programme compilé

programme interprété

un programme écrit en langage interprété est converti ligne par ligne en instructions directement exécutables par la machine au moment de son exécution. Au contraire, un programme écrit en langage compilé est traduit en instructions lisibles par la machine une fois pour toutes.

Le programme qui traduit le langage interprété est appelé interprète ; il doit être en fonctionnement sur la machine où l'on veut lancer un programme interprété.

Quelques exemples de langages interprétés :

• BASIC,• PHP,• Javascript et les langages de script en général.

Pourquoi les programmes compilés sont-ils plus efficaces ?La traduction d’un langage source en langage machine est une opération complexe. La compilation l’effectue une fois pour toutes, l’exécutable est en langage machine. L’interprète traduit chaque expression à chacune de ses exécutions.

Le compilateur dispose, pour traduire, de l’ensemble du texte du programme source, ce qui permet des optimisations. Si une même expression figure à plusieurs emplacements du programme, elle pourra n’être calculée qu’une fois. Le compilateur peut aussi détecter les « branches mortes » du programme, c’est-à-dire des expressions dont le calcul ne sert à rien parce que les résultats n’en sont jamais utilisés, et les supprimer. Et bien d’autres optimisations


Caractéristiques du langage Javascript

Caractéristiques clefs:

• Syntaxe: ressemble à Java, C, Php etc. • Langage basé objets (pas orienté objets!) • Des objets "browser", "HTML", etc. sont incorporés et permettent la manipulation de

contenus "Web" (notamment formulaires et liens/images). Il existe 3 versions principales de ces objets DOM (Document Object Model).

• Intégration avec HTML

Le Javascript est un langage sensible à la casse (« case sensitive »).

objet (première approche): chaque objet possède des méthodes (ou fonctions), des propriétés et .... des objets. Dans une page web, l'objet le plus élevé dans la hiérarchie est la fenêtre du navigateur window. Cet objet window contient entre autres l'objet document qui lui même contient tous les objets contenus dans la page web (paragraphes, formulaires, etc...). En plus de ces objets, il existe des objets créés par l'utilisateur.

Les méthodesLes méthodes sont des fonctions qui permettent d'agir sur certaines propriétés de l'objet, les propriétés contiennent les paramètres d'un objet.

Exemple d'un objet voiture : nous allons lui attribuer

• des propriétés : la couleur, la marque, le numéro d'immatriculation ; • des méthodes : tourner(), avancer(), reculer(), changer la couleur() ; • des objets : les phares, les pneus.

Pour résumer une méthode engendre une action, un verbe qualifie cette action, une propriété est généralement qualifiée par un nom.

Dans l'exemple de la voiture une méthode permet de changer la couleur de la voiture, par contre aucune méthode ne nous autorise à changer la marque de cette voiture (ce qui entraînerait une modification des autres propriétés et éventuellement l'apparition ou la disparition de méthodes).

Il en sera ainsi également avec nos objets Javascript : nous pourrons accéder voire modifier les propriétés (couleur du texte, style de la fonte) des objets grâce aux méthodes.


Les différentes versions Javascript

A l'heure actuelle, il existe plusieurs versions de Javascript. Voici, ci-dessous, un tableau résumant les différentes versions avec les navigateurs compatibles ainsi que la balise définissant la version.

Version Compatibilité Balise

javascript 1.0 I.Explorer 3.0 - Netscape 2.0

<script language="javascript1.0">

javascript 1.1 Netscape 3.0 <script language="javascript1.1">

javascript 1.2 I.Explorer 4.x - Netscape 4.x


javascript 1.3 I.Explorer 5.x et 6.X - Netscape 6.x


Cette standardisation a abouti au standard ECMAScript spécifié dans le document ECMA-262, ce dernier décrivant les mécanismes de base du langage.

Cette spécification sert de fondations aux différents dialects suivants:

• JavaScript correspondant à un enrichissement d'ECMAScript • JScript correspondant à la mise en oeuvre de Microsoft • ActionScript, correspondant à la mise en oeuvre d'Adobe


A quel emplacement insérer le Javascript dans votre page HTML

Le code Javascript peut être inséré où vous le désirez dans votre page Web, vous devez toutefois veiller à ce que le navigateur ait entièrement chargé votre script avant d'exécuter une instruction. En effet, lorsque le navigateur charge votre page Web, il la traite de haut en bas, de plus vos visiteurs (souvent impatients) peuvent très bien interrompre le chargement d'une page, auquel cas si l'appel d'une fonction se situe avant la fonction dans votre page il est probable que cela générera une erreur si cette fonction n'a pas été chargée.

Ainsi, on place généralement le maximum d'éléments du script dans la balise d'en-tête (ce sont les éléments située entre les balises <HEAD> et </HEAD>). Les événements Javascript seront quant à eux placés dans le corps de la page (entre les balises <BODY> et </BODY>) comme attribut d'une commande HTML...

page minimum<html>

<head>

<title>page de test</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

</body>

</html>


un script

<script language="Javascript" type="text/javascript">



</script>

L'argument de la balise <script> décrit le langage utilisé. Il peut être "Javascript" "Javascript1.1" "Javascript1.2" "Javascript1.3".

On peut ainsi (en passant un argument différent de "Javascript") utiliser d'autres langages de programmation que celui-ci (par exemple le Vbscript).

Pour utiliser différentes versions de Javascript tout en conservant une certaine compatibilité, il suffit de déclarer plusieurs balises script ayant chacune comme paramètre la version du Javascript correspondante.

La mention du type Mime est obligatoire depuis HTML 4.0. Avec type="text/javascript" vous stipulez le type Mime typique pour les fichiers Javascript.

vous devez introduire le code avec ; combinaison de commentaire javascript et fin de commentaire html.

Ainsi les navigateurs WWW plus anciens qui ne connaissent pas Javascript ignorent le code Javascript qui suit et ne l'interprètent pas par erreur comme du texte faisant partie du fichier HTML.


Une première instruction Javascript

Sans vraiment entrer dans les détails, voyons une première instruction Javascript, en fait une méthode de l'objet window, soit l'instruction alert().

alert (" le texte " ) ;

<html> Html normal

<head> <title>Mon premier Javascript</title> </head> <body> Bla-bla en Html <script language="Javascript" type="text/javascript"> Début du script  Fin de masquer </SCRIPT> Fin du script Suite bla -bla en Html Html normal </body></html>

Cette instruction affiche un message (dans le cas présent le texte entre les guillemets) dans une boite de dialogue pourvue d'un bouton OK. Pour continuer dans la page, le lecteur devra cliquer ce bouton. Remarquons les points-virgules à la fin de chaque instruction Javascript (ce qui n'est pas sans rappeler le C et le C++). Le Javascript est moins strict que ces autres langages et ne signale généralement pas de message d'erreur s'ils venaient à manquer. On peut considérer que le point-virgule est optionnel et qu'il n'est obligatoire que lorsque vous écrivez plusieurs instructions sur une même ligne. Il est quand même vivement recommandé d'en mettre de façon systématique.

Javascript n'est pas toujours trop strict sur la syntaxe. Très bien! Mais ce caractère "bon enfant" est à double tranchant car parfois, pour une raison indéterminée, il devient dans certaines situations plus rigoureux et alors bonne chance pour « débugger » le script.


document.writeune instruction bien utile pour afficher le résultat directement dans la page.

<html> Html normal <head> <title>Mon premier Javascript</title> </head> <body> Bla-bla en Html <script language="Javascript" type="text/javascript"> Début du script  Fin de masquer </SCRIPT> Fin du script Suite bla -bla en Html Html normal </body></html>

Les objets• le programmeur peut "utiliser" des objets "Javascript" pré-définis • il peut définir des objets simples (sans héritage) • tout élément conceptuel utilisé, affiché etc. dans le Navigateur est représenté par un

objet qui s'insère dans une structure DOM un objet est une structure informatique qui:

• possède des propriétés (variables contenant de l'information); • possède des méthodes (procédures permettant de manipuler les informations

contenues dans l'objet);

Instructions liées aux objets• une propriété ou une méthode d'un objet est invoquée par:

objectName.propertyName objectName.methodName(arguments...)

Méthodes (fonctions) ou propriétés (variables attachées aux objets) vous permettent de traiter une page HTML (essentiellement des formulaires), créer des boites de dialogues, de nouvelles pages, faire du DHTML etc.

L'Objet "window"L'objet window est l'objet par excellence dans Javascript, car il est le parent de chaque objet qui compose la page web, il contient donc:

• l'objet document: la page en elle-même • l'objet location: le lieu de stockage de la page • l'objet history: les pages visitées précédemment

En réalité, on devrait écrire: window.alert (" le texte " ) ;


L'Objet "document"

L'objet document est probablement l'un des objets les plus importants du modèle objet javascript.Il permet d'accéder à tous les éléments affichés sur la page, de contrôler les saisies, de modifier l'apparence et le contenu.

document.write() écrit dans la page (directement du html)document.title est une méthode qui récupère le titre (le texte) dans le conteneur <title> </title>)

Exemple Affiche le titre de la page

Code source<SCRIPT language= "javascript">document.write("Titre de la page : "+document.title)</SCRIPT>

Ne pas devoir écrire le nom de l'objet devant chaque méthode

• with

with (objet){ instruction }Exemple: le titre du document est une propriété de l'objet document:document.title et pour l'afficher, on utilise une méthode de l'objet document: document.write(« chaine à afficher »)

<html>

<head> <title>page de test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body>test

<script language="JavaScript" type="text/javascript"></script>

</body></html>


Les boîtes de dialogue

avertissement

alert()

alert ("Message d'alerte");

confirmation

confirm()

confirm ("Quel bouton sera utilisé ?");

invite

prompt()

var Reponse =prompt("Quel est votre nom ?","Entrez ici votre nom");

alert(), rien de grave, vous enverrez des informations Cette méthode ouvre une boîte de dialogue avec 1 bouton OK. Elle permet :

• d'envoyer une information, un résultat, ... très facilement. • de faire une pause. (utile pour la mise au point d'un programme.)

Syntaxe : alert( ... )

Exemples : <html><head><title>Programme Out0</title></head><body><script language="JavaScript"> alert('Pas discret, mais efficace.'); alert(2+2); alert('Pi='+3.14);</script></body></html>

prompt(), pour lire des informations. Cette méthode ouvre une boîte de dialogue avec une zone saisie et 2 boutons : OK Annuler. Elle permet :

• d'envoyer un message, mais surtout, • de recevoir des informations.


Exemples : <html><head><title>Programme In1</title></head><body><script language="JavaScript"> annee=prompt('En quelle année sommes-nous ? ', 2007); alert('Vous avez répondu : ' + annee)</script></body></html>

Utiliser un formulaire.

C'est HTML qui crée les formulaires. JavaScript peut les atteindre et afficher dedans.

HTML : (Rappel) <form>

<form><input type="text" size="12" value="toto"> </form>

JavaScript : Il est fortement conseillé de nommer les objets.

<form name="affiche"><input type="text" name="champ" size="12" value=""></form><script language="JavaScript"> document.affiche.champ.value='titi';</script>


Définir des variablesLes variables sont des endroits de la mémoire dans lesquels vous pouvez sauvegarder les données dont vous avez besoin au cours des procédures de votre programme. Le contenu qui est sauvegardé dans une variable s'appelle "valeur". Vous pouvez à tout moment modifier la valeur d'une variable. Pour pouvoir travailler avec des variables, vous devez d'abord définir les variables dont vous avez besoin.

Chaque variable possède : • un identificateur : c'est son nom. • un type : nombre, chaîne, booléen, tableau... • une valeur : la donnée.

Nom des variables :

C'est l'identififiant. Il commence par :

• une lettre minuscule ou Majuscule (Attention la casse est respectée) OU • le souligné _ (underscore) OU • le $.

Exemples Contre-exemples var Debut, debut // sont distinctes. var MaPreference, $pourquoi_pas$$ var _toto, euro_et_$, Oui1

var 1Non // pas de chiffre en tête var _top // mot réservé var pas de blanc, Pas_d'àccént

var est indispensable pour déclarer des variables locales dans les fonctions.

Un exemple dans lequel deux variables sont déclarées :<SCRIPT language="Javascript"></SCRIPT>

DÉCLARATION TYPÉE

A l'aide de l'opérateur new. Notez la Majuscule dans le nom du type. C'est la méthode recommandée. (A partir de JavaScript 1.1)


monNombre = new Number(); // parenthèses vides affectation par défaut 0 monNombre = new Number(123); // monNombre : type "Number" et contient 123

maChaine = new String(); // parenthèses vides affectation par défaut '' maChaine = new String('xyz'); // maChaine : type "String" et contient 'xyz'

drapeau = new Boolean(); // parenthèses vides par défaut false drapeau = new Boolean(true); // affectation drapeau a la valeur true

rem :Création d'objets: new

NomObjet = new TypeObjet ( param1 [,param2] ...[,paramN] )

Les nombres :

Entiers 123 , -4 , +2000 Ne pas commencer par 0 , sauf pour 0.

Réels(virgule flottante)

123 , -4 , 3.14 , 1e-2 (=1/100) ou 3E-2=.03Mantisse et exposant. Intervalle : 5E-324 à 1.79E+308

Entiers octaux Préfixe 0, pas de + - bien sûr chiffres de 0 à 7 ! Exemple : 07654321 ; 07+01=010

Entiers hexadécimaux Préfixe 0x ou 0X, pas de signe + - 10, 11, ...15 sont A, B, ... F ou a,b, ... f0xF9 , 0x9A1B , 0XFEDCBA9876543210

Valeurs particulières :

NaNNotaNumber C'est la valeur retournée lors d'une opération incohérente.

Infinity et -Infinity Il existe aussi un zéro positif et un zéro négatif.

Les chaînes :

C'est une suite de caractères. Longueur mini : 0 , pas de longueur maxi ( ! )Deux délimiteurs : ' ... ' ou " ... ".


' chaîne ''Pratique pour les "guillemets" ' Gare aux apostrophes : ' Utilisez l\'échappement ''123' est une chaîne et 123 est un nombre.

" chaîne "" C'est une chaîne avec apostrophes " mais attentionpour les guillemets : " C'est possible \"entre guillements\" "

Echappement \

\' : apostrophe. \n : saut de ligne. \t : tabulation. \\ : Contre oblique \.

\" : guillemet. \f : saut de page. \r : retour chariot. \b : retour arrière.

Pour mieux différentier JS et HTML, j'utilise ' ... ' avec JS et " ... " avec HTML.

Concaténation :

+ 'Bon' + 'jour' donne 'Bonjour'

Les booléens :

Deux valeurs : Vraie Faux. C'est le type le plus simple mais il permet d'écrire la logique, même compliquée.

true var test = true ; toto = true;

false var rep = false ; a = false ;

Un seul bit suffit pour un booléen. L'interrupteur de votre chambre peut être vu comme un booléen. 2 positions : allumé - éteint.

Type particulier

Type : Null . Valeur : nullType : "Indéfini" Valeur : undefined. Les particuliers :

Null signifie "pas de donnée valide dans la variable"Une seule valeur : null

undefined valeur retournée quand une variable n'a pas été initialisée

Transformer du texte en nombre et l'inverse

nb1=prompt("nombre1 ?"); nb2=prompt("nombre2 ?"); somme=parseInt(nb1)+parseInt(nb2);

parseInt(nb1) => Transforme nb1 qui est texte en valeur numérique entièreparseFloat(nb1) => Transforme nb1 qui est texte en valeur numérique décimale


texte= ""+1 donne une chaîne contenant le caractère 1

Vérifier si ce n'est pas un nombre: IsNaN(nb1)Pour connaître le type en général , on peut utiliser la fonction typeof() appliquée à une variable qui retournera son type.

var chaine = 'bonjour';document.write(typeof(chaine));

Attention L'attribution implicite de type, à première vue pratique, risque d'engendrer confusion et absence de rigueur.Il faut s'habituer à déclarer les variables et à les initialiser (c'estàdire leur donner une valeur initiale au moment de leur déclaration, ce qui fixe leur type.Par exemple nomLycee = "J. Feyder" ; TauxTva = 20.6 ;

exemple:

var i; //déclaration

i = 2; //entieri = "bonjour"; //chaîne de caractères i = true; //booléen

Eviter absolument ce qui suit (c'est compris par JS, mais peu recommandable !)

var x = 12.5;document.write('Ici x est une variable "réelle" : x = '+ x+ "<BR>" ); x = "Bonjour !" ;document.write("Maintenant x est une chaîne de caractères : x = " + x );


Exercice : Mécanisme de l'affectationI. Il s'agit d'échanger les valeurs des variables a et b.

Construire un petit programme pour tester cet échange, des 2 façons différentes décrites ci-dessous.Enregistrer l'exercice sous le nom js2-ex1.html dans le répertoire personnel.

1. Montrer que cela ne semble pas possible sans l'intervention d'une 3ème variable c intermédiaire.Ecrire la procédure echange1(a, b) qui utilise la variable c, déclarée en variable locale

II. Voici un algorithme sans 3ème variable. Montrer qu'il procéde bien à l'échange et écrire la procédure echange2(a, b)

a blire a, b 3 7a=a+b 10 7b=a-b 10 3a=a-b 7 3

III.Il s'agit d'écrire une séquence d'affectation portant sur 2 variables U et Us (signifiant valeur suivante)valeurs initiales de (U, Us) = (a, b)valeurs finales de (U, Us) = (b, a+b)on aura besoin d'utiliser une variable intermédiaire temporaire T

U Uslire a, b 3 5................ 5 8


Les opérateurs

Qu'est-ce qu'un opérateur?

Les opérateurs sont des symboles qui permettent de manipuler des variables, c'est-à-dire effectuer des opérations, les évaluer, ... On distingue plusieurs types d'opérateurs:

● les opérateurs de calcul ● les opérateurs d'affectation ● les opérateurs d'incrémentation ● les opérateurs de comparaison ● les opérateurs logiques

● les opérateurs bit-à-bit ● les opérateurs de rotation de bit ● les opérateurs de manipulation de chaînes

de caractères

Les opérateurs de calcul

Les opérateurs de calcul permettent de modifier mathématiquement la valeur d'une variable

Opérateur Dénomination Effet Exemple Résultat (avec x valant 7)

+opérateur d'addition Ajoute deux valeurs x+3 10

- opérateur de soustraction

Soustrait deux valeurs x-3 4

*opérateur de multiplication Multiplie deux valeurs x*3 21

/ plus: opérateur de division

Divise deux valeurs x/3 2.3333333

=opérateur d'affectation Affecte une valeur à une variable x=3

Met la valeur 3 dans la variable x

% opérateur moduloRetourne le reste de la division entière de l'opérande de gauche par celle de droite

x % 2 1

Les opérateurs d'affectation

Ces opérateurs permettent de simplifier des opérations telles que ajouter une valeur dans une variable et stocker le résultat dans la variable. Une telle opérations s'écrirait habituellement de la façon suivante

x=x+2 Avec les opérateurs d'assignation il est possible d'écrire cette opération sous la forme suivante: x+=2.

Ainsi, si la valeur de x était 7 avant opération, elle sera de 9 après...


Les opérateurs de ce type sont les suivants:

Opérateur Effet

+= ajoute l'opérande de gauche par l'opérande de droite et stocke le résultat dans l'opérande de gauche.

-=soustrait l'opérande de droite à l'opérande de gauche et stocke le résultat dans l'opérande de gauche.

*= multiplie l'opérande de gauche par l'opérande de droite et stocke le résultat dans l'opérande de gauche.

/=divise l'opérande de gauche par l'opérande de droite et stocke le résultat dans l'opérande de gauche.

%= calcule le reste de la division entière de l'opérande de gauche par l'opérande de droite et stocke le résultat dans l'opérande de gauche.

Les opérateurs d'incrémentation

Ce type d'opérateur permet de facilement augmenter ou diminuer d'une unité une variable. Ces opérateurs sont très utiles pour des structures telles que des boucles, qui ont besoin d'un compteur (variable qui augmente de un en un).

Un opérateur de type x++ permet de remplacer des notations lourdes telles que x=x+1 ou bien x+=1

Opérateur Dénomination EffetSyntax

eRésultat

(avec x valant 7)

++ Incrémentation Augmente d'une unité la variable

x++ 8

-- DécrémentationDiminue d'une unité la variable x-- 6

Les opérateurs de comparaison

Opérateur Dénomination Effet ExempleRésultat

(avec x valant 7)== A ne pas confondre avec le signe d'affectation (=)!!

opérateur d'égalité Compare deux valeurs et vérifie leur égalité x==3

Retourne True si X est égal à 3, sinon False

=== opérateur d'identitéVérifie l'identité de valeur et de type de deux valeurs a===b

Retourne True si a est égal à b et est de même type, sinon False

!= opérateur de différence

Vérifie qu'une variable est différente d'une valeur x!=3

Retourne 1 si X est différent de 3, sinon 0

!== opérateur de non identité

Vérifie la non identité de valeur et de type de deux valeurs, c'est-à-dire si les deux valeurs n'ont pas la même valeur ou bien sont de types différents.

a!==b

Retourne True si a est différent de b ou bien est de type différent, sinon False


Opérateur Dénomination Effet ExempleRésultat

(avec x valant 7)

< opérateur d'infériorité stricte

Vérifie qu'une variable est strictement inférieure à une valeur

x<3Retourne True si X est inférieur à 3, sinon False

<= opérateur d'inférioritéVérifie qu'une variable est inférieure ou égale à une valeur

x<=3Retourne True si X est inférieur ou égale à 3, sinon False

> opérateur de supériorité stricte

Vérifie qu'une variable est strictement supérieure à une valeur

x>3Retourne True si X est supérieur à 3, sinon False

>= opérateur de supériorité

Vérifie qu'une variable est supérieure ou égale à une valeur

x>=3Retourne True si X est supérieur ou égal à 3, sinon False

12 == 12; /* Vrai */false == 0; /* Vrai, avec une conversion */false === 0; /* Faux avec cet opérateur */null == undefined; /* Vrai, par convention */null === undefined; /* Faux */"12" == 12 /* Vrai */12 == "12" /* Évidemment vrai */12 === "12" /* Faux, dans tous les sens :-) */

Les opérateurs logiques (booléens)

Ce type d'opérateur permet de vérifier si plusieurs conditions sont vraies:

Opérateur Dénomination Effet Syntaxe

|| OU logiqueVérifie qu'une des conditions est réalisée

((expression1)||(expression2))

&& ET logiqueVérifie que toutes les conditions sont réalisées

((expression1)&&(expression2))

! NON logiqueInverse l'état d'une variable booléenne (retourne la valeur 1 si la variable vaut 0, 0 si elle vaut 1)

(!condition)

Opérateurs de manipulation de chaînes de caractères L'opérateur '+' lorsqu'il est utilisé avec des chaînes de caractères permet de les concaténer, c'est-à-dire de joindre bout-à-bout les deux chaînes de caractères :

Ainsi var='a'+'b' est équivalent à var='ab'.


Les fonctions• Il s'agit de méthodes attachées à votre page qui:

• calcule quelque chose, • retourne une valeur (ou non), • appelle d'autres fonctions (ou non), • fait appel à des méthodes Javascript (ou non).

• Voici la syntaxe et un exemple abstrait

function <nom> (<paramètre, ......>) { ...instructions ... }

Instruction composée: { instruction_1 ; instruction_2 ; instruction_3;

return valeur}

Valeur de retour

Une fonction peut retourner une valeur. Elle utilise pour cela le mot-clé return. La fonction peut donc être appelée ainsi :

var valeur = fonction(arguments);

où valeur prend la valeur de retour de la fonction.

Une valeur de retour peut être évidemment une chaîne de caractère, un nombre, mais aussi un tableau, ou un objet.

exemple simple :


function Nom_De_La_Fonction(argument1, argument2, ...) {

liste d'instructions return valeur}

mot clé

parametres

résultat (facultatif)true ou false par défaut

function discarre(x) {

var resultat = x * x; return resultat;}

Dans discarre(x) x est un paramètre ou argument ; un étiquette provisoire qui sera remplacée par la vrai valeur sur laquelle on veut travaillerUn bloc d'instructions commence par une parenthèse accolade qui s'ouvre { et se termine par une parenthèse accolade qui se ferme }

Dans cet exemple on ajoute un bouton HTML avec un événement « onClick »pour appeler la fonction.

<html><head><title>Programme In2</title></head><script language="JavaScript"> function lireAnnee() { annee=prompt('En quelle année sommes-nous ? ', 2000); alert('Vous avez répondu : ' + annee) }</script><body><form><input type="button" value=" prompt('' En quelle année ... '') " onClick="lireAnnee()"></form></body></html>

Portée (visibilité) des variables

Selon l'endroit où une variable est déclarée, celle-ci pourra être accessible (visible) de partout dans le script ou bien uniquement dans une portion confinée du code, on parle de « portée » d'une variable.

Lorsqu'une variable est déclarée sans le mot clé var, c'est-à-dire de façon implicite, elle est accessible de partout dans le script (n'importe quelle fonction du script peut faire appel à cette variable). On parle alors de variable globale

La portée d'une variable déclarée de façon explicite (précédée du mot-clé var), dépend de l'endroit où elle est déclarée.

• Une variable déclarée au début du script, avant toute fonction, sera globale. Elle peut être utilisée n'importe où dans le script .

• Une variable déclarée explicitement dans une fonction aura une portée limitée à cette seule fonction, c'est-à-dire qu'elle est inutilisable ailleurs. On parle alors de « variable locale ».

Voici deux exemples permettant de l'illustrer :

<SCRIPT language="Javascript"></SCRIPT>

Dans l'exemple ci-dessus, la variable a est déclarée explicitement en début de script, ainsi que dans la fonction. Voici ce qu'affiche ce script :

Le double de 4 est 8La valeur de a est 12

Voici un autre exemple dans lequel a est déclarée implicitement dans la fonction :

<SCRIPT language="Javascript"></SCRIPT>

Voici ce qu'affiche ce script :

Le double de 4 est 8La valeur de a est 8

Ces exemples montrent la nécessité de déclarer systématiquement des nouvelles variables avec le mot clé var

Les fonctions prédéfinies

Javascript possède un certain nombre de fonctions prédéfinies dont le nombre enfle à mesure de la sortie de nouvelles versions du langage.

Les méthodes (fonctions) Objet.méthode()

Ces fonctions sont généralement liées à un objet (document, fenêtre, formulaire, bouton...) et elles doivent être écrites derrière l’objet. Ex :

document.write('écrit un texte dans la page');

qui est la fonction "write" utilisée uniquement avec l’objet "document" (la page en cours).

Du fait que ces fonctions sont liées ou plutôt intégrées à un objet, on les appelle des "méthodes" (terminologie orientée-objet).

Exemple: substring (méthode prédéfinie)


une chaine de caractères "bonjour" est un objet de type string.

Cet objet possède une méthode substring( param1, param2) qui a deux paramètres :point de depart et fin(exclue).

texte="bonjour";

texte.substring(0,3);// donne "bon"

texte.substring(3,7); //donne "jour"

Le deuxième paramètre peut être omis si on va jusqu'au bout

texte.substring(3); //donne "jour"

propriété -> grandeur qui est liée à un objet

Exemple length

une chaine de caractère "bonjour" est un objet de type string qui a une propriété lenght qui désigne le nombre de caractères de la chaine.texte="bonjour";

document.write(texte.substring(0,3)+

" :debut d'une chaine \""+texte+"\" de "+

texte.length+ " caractères" );

donne

bon :debut d'une chaine "bonjour" de 7 caractères

Exemple:Valider une carte banquaire:

Les deux derniers chiffres forment un nombre qui est le reste de la division des 10 premiers chiffres par 97Remarque:

% opérateur modulo Retourne le reste de la division entière de l'opérande de gauche par celle de droite

X=7;x % 2

Resultat1

Script dans le head de la page <script language="javascript" type="text/javascript"> //  </script>


0 1 2 3 4 5 6

b o n j o u r

Dans le body, le formulaire:<form name="formulaire">

<input name="carte" size="12" ><input type="button" value="valider"

onclick="validation()"></form>

StructuresUn programme est essentiellement une suite, une séquence d'instructions.

Parfois, on doit prendre une décision et exécuter une séquence particulière en fonction d'un choix.

Dans certains cas, le choix nous amène à reprendre la même séquence plusieurs fois; on parle de boucle.

La norme utilisée pour les organigrammes

Afin de distinguer sans ambiguïté les ACTIONS et les CONDITIONS, il convient de respecter des règles de représentation communes :

- Les ACTIONS prendront place dans un rectangle

– Les CONDITIONS dans un losange


exemple: convertir une durée (jours, heures et minutes en secondes)L'organigramme et le pseudo langage de programmation

L'organigramme se fait en premier; il peut ne pas être aussi développé que le programme; les idées peuvent venir par la suite.

structure conditionnelle

L'instruction if

L'instruction if est la structure de test la plus basique, on la retrouve dans tous les langages (avec une syntaxe parfois différente d'un langage à l'autre...). Elle permet d'exécuter une série d'instructions (un bloc d'instructions) si jamais une condition est réalisée.La syntaxe de cette expression est la suivante:


if(condition réalisée) {

liste d'instructions

}

Remarques:

● la condition doit être entre des parenthèses ● il est possible de définir plusieurs conditions à remplir avec les opérateurs ET et OU (&& et

||) L'instruction suivante par exemple teste si les deux conditions sont réalisées:

if ((condition1)&&(condition2))

● L'instruction suivante par contre exécutera les instructions si l'une ou l'autre des deux conditions est réalisée :

if ((condition1)||(condition2))

L'instruction if ... else

L'instruction if dans sa forme basique ne permet de tester qu'une condition, or la plupart du temps on aimerait pouvoir choisir les instructions à exécuter en cas de non réalisation de la condition...

L'expression if ... else permet d'exécuter une autre série d'instruction en cas de nonréalisation de la condition.

La syntaxe de cette expression est la suivante:

if (condition réalisée) {

//liste d'instructions

}

else {

//autre série d'instructions

}

Une façon plus courte de faire un test

Il est possible de faire un test avec une structure beaucoup moins lourde grâce à la structure suivante:

(condition) ? instruction si vrai : instruction si faux

Remarques:

● la condition doit être entre des parenthèses● Lorsque la condition est vraie, l'instruction de gauche est exécutée ● Lorsque la condition est fausse, l'instruction de droite est exécutée


Les boucles Les boucles sont des structures qui permettent d'exécuter plusieurs fois la même série d'instructions jusqu'à ce qu'une condition (ne) soit plus réalisée... La façon la plus commune de faire une boucle, est de créer un compteur (une variable qui s'incrémente, c'est-à-dire qui augmente de 1 à chaque tour de boucle) et de faire arrêter la boucle lorsque le compteur dépasse une certaine valeur.

La boucle forL'instruction for permet d'exécuter plusieurs fois la même série d'instructions: c'est une boucle!

Dans sa syntaxe, il suffit de préciser le nom de la variable qui sert de compteur (et éventuellement sa valeur de départ, la condition sur la variable pour laquelle la boucle s'arrête (basiquement une condition qui teste si la valeur du compteur dépasse une limite) et enfin une instruction qui incrémente (ou décrémente) le compteur.


for (compteur; condition; modification du compteur) {

liste d'instructions

}

for (i=0; i<5; i++){ ...............}

L'instruction while L'instruction while représente un autre moyen d'exécuter plusieurs fois la même série d'instructions.


while (condition réalisée) { liste d'instructions}

Cette instruction exécute la liste d'instructions tant que (while est un mot anglais qui signifie tant que) la condition est réalisée. La condition de sortie pouvant être n'importe quelle structure conditionnelle, les risques de boucle infinie (boucle dont la condition est toujours vraie) sont grands, c'est-à-dire qu'elle risque de provoquer un plantage du navigateur! while (a<b) { ...............}

L'instruction do {...}while ()do


{ ...............}while (a<b)

Saut inconditionnel Il peut être nécessaire de faire sauter à la boucle une ou plusieurs valeurs sans pour autant mettre fin à celle-ci.

La syntaxe de cette expression est "continue;" (cette instruction se place dans une boucle!), on l'associe généralement à une structure conditionnelle, sinon les lignes situées entre cette instruction et la fin de la boucle seraient obsolètes.

Exemple: Imaginons que l'on veuille imprimer pour x allant de 1 à 10 la valeur de 1/(x-7) ... il est évident que pour x=7 il y aura une erreur. Heureusement, grâce à l'instruction continue il est possible de traiter cette valeur à part puis de continuer la boucle!

x=1;while (x<=10) { if (x == 7) { Alert('division par 0'); continue; } a = 1/(x-7); Alert(a); x++;

}

Il y a une erreur dans ce script... peut-être ne l'avez-vous pas vue: Lorsque x est égal à 7, le compteur ne s'incrémente plus, il reste constamment à la valeur 7, il aurait fallu écrire:

x=1;while (x<=10) { if (x == 7) { Alert('division par 0'); x++; continue; }a = 1/(x-7);Alert(a);x++;}

Arrêt inconditionnel A l'inverse, il peut être voulu d'arrêter prématurément la boucle, pour une autre condition que celle précisé dans l'entête de la boucle. L'instruction break permet d'arrêter une boucle (for ou bien while). Il s'agit, tout comme continue, de l'associer à une structure conditionnelle, sans laquelle la boucle ne ferait jamais plus d'un tour!

Dans l'exemple précédant il serait possible d'arrêter la boucle en cas d'annulation du dénominateur, pour éviter une division par zéro!

for (x=1; x<=10; x++) { a = x-7;


if (a == 0) { Alert('division par 0'); break; } Alert(1/a);}

L'instruction switch...case L'instruction switch permet de faire plusieurs tests de valeurs sur le contenu d'une même variable. Ce branchement conditionnel simplifie beaucoup le test de plusieurs valeurs d'une variable, car cette opération aurait été compliquée (mais possible) avec des if imbriqués. Sa syntaxe est la suivante:

switch (Variable) { case Valeur1: Liste d'instructions; break; case Valeur2: Liste d'instructions; break; case ValeurX: Liste d'instructions; break; default: Liste d'instructions; break;}

Les parenthèses qui suivent le mot clé switch indiquent une expression dont la valeur est testée successivement par chacun des case. Lorsque l'expression testée est égale à une des valeurs suivant un case, la liste d'instruction qui suit celui-ci est exécuté. Le mot clé break indique la sortie de la structure conditionnelle. Le mot clé default précède la liste d'instructions qui sera exécutée si l'expression n'est jamais égale à une des valeurs. Il est essentiel de terminer chaque bloc d'instruction par l'instruction break ! N'oubliez pas d'insérer des instructions break entre chaque test, ce genre d'oubli est difficile à détecter car aucune erreur n'est signalée...

exemple:

switch (typefruit) { case "Oranges": document.write("Les oranges sont à 0,59 € le kilo.<br>"); break; case "Pommes": document.write("Les pommes sont à 0,32 € le kilo.<br>"); break; case "Bananes": document.write("Les bananes sont à 0,48 € le kilo.<br>"); break; case "Cerises": document.write("Les cerises sont à 3 € le kilo.<br>"); break; case "Mangues": case "Papayes": document.write("Les mangues et les papayes sont à 2,79 € le kilo.<br>"); break;


default: document.write("Désolés, nous n'avons plus de " + fruittype + ".<br>");}document.write("Désirezvous autre chose ?<br>");

tableau

Un tableau est un objet Array. Pour déclarer un tableau, il faut utiliser l'instruction new : var tab=new Array;

Pour alimenter le tableau avec les jours de la semaine, on écrit le code suivant : var tab=new Array; tab[0]="Lundi"; tab[1]="Mardi"; tab[2]="Mercredi"; tab[3]="Jeudi"; tab[4]="Vendredi"; tab[5]="Samedi"; tab[6]="Dimanche"; var longueur=tab.length;

Déclaration accélérée

La déclaration du tableau des jours de la semaine peut se faire plus directement :var tab=new Array("Lundi","Mardi",

"Mercredi","Jeudi","Vendredi","Samedi","Dimanche");

Les tableaux associatifsOn peut utiliser un index textuel au lieu de l'index numérique:

Exemple:

<script language="javascript"> var personne=new Array(); personne['nom']="Durant"; personne['prenom']="Jean";

document.write("nom: "+personne['nom']+ "<br> prenom: " +personne['prenom']); document.write(" <i>ce qui fonctionne aussi bien que</i>:<br>"); personne[0]="Dupont"; personne[1]="Jean"; document.write("nom: "+personne[0]+ "<br> prenom: "+personne[1]);</script>


Autre exemple:

imaginons que pour chaque jour de la semaine on ait une page spéciale à charger : samedi et dimanche = weekend.html mercredi = enfant.html les autres jours = semaine.html

Il pourrait être intéressant d'avoir un tableau de ce type :

Indice Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche

Contenu semaine semaine enfant semaine semaine weekend weekend

Qui serait déclaré ainsi en javascript : var tab=new Array; tab["Lundi"]="semaine"; tab["Mardi"]="semaine"; tab["Mercredi"]="enfant"; tab["Jeudi"]="semaine"; tab["Vendredi"]="semaine"; tab["Samedi"]="weekend"; tab["Dimanche"]="weekend";

Documents

Programmation Table des matièresL'objet document est probablement l'un des objets les plus importants du modèle objet javascript. Il permet d'accéder à tous les éléments affichés