javascript

JavaScript

Un langage dans la page

JavaScript : à quoi ça sert ?

Affiner et Animer vos pages WEB pré-calcul en fonction du navigateur contrôler finement l’affichage des pages

Réagir aux Réponses de l’Utilisateur choisir différentes pages d’après un formulaire traiter les événements souris faire du commerce électronique

Le Fonctionnement de JavaScript Un langage interprété

Ecrit directement dans les pages WEB

Evénementiel A base d ’objets Faiblement typé

Le Fonctionnement de JavaScript JavaScript n’est pas JAVA La syntaxe est très proche de celle de C C ’est un petit « bidule » qui a été ajouté

dans les navigateurs pour faire mieux que HTML

Son principal avantage et d’ouvrir les portes du DHTML, c’est-à-dire rendre les pages plus vivante

L’historique de JavaScript

LiveScript 1.0 Inventé par Netscape Sortie de Java ( Le Vrai) LiveScript devient JavaScript Microsoft sort Jscript Le Standard en 1997 : ECMAScript ? Une Histoire Chaotique ! La standardisation vient juste d’émerger

Netscape 6.x MS 5.5

Le standard : HTML 4.0 (en entier !) Style + DOM = DHTML Style : ensemble de propriétés qui permettent

de changer l’aspect de la page DOM : Modèle Objet du Document

Il offre à JavaScript l’accès à l’ensemble du code HTML sous forme d’objet qui permettent de changer l’aspect d’une page

Rq : Le DOM est un standard de programmation, il n’est pas lié à JavaScript

Les bases de JavaScript

Les règles de bases

Pour être complet :

http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

188 Pages !

Est en plus les navigateurs ne sont pas standard Il vaut mieux se baser sur l’usage que la théorie !

JavaScript prend place dans la page <html>

<head><title>Test</title><script type="text/javascript"></script></head><body></body></html>

<script type="text/javascript">Introduit le passage JavaScript

 Ferme le commentaire

alert("Hello monde!");Le code

On peut le placer dans les entêtes

JavaScript prend place dans la page html>

<head><title>Test</title></head><body>Avant le script<script type="text/javascript"></script>Après le script</body></html>

document.write("<h1>Bonjour, le monde</h1>\n"); Ajoute du code HTML à la page

Résultat :

Avant le script

Bonjour, le mondeAprès le script

On peut le placer en pleine page

JavaScript prend place dans la page On peut placer le code JavaScript dans un

fichier externe : calcul.js : function carre() { … } externe.html : <script src="carre.js"

type="text/javascript"></script> Permet de réemployer des fonctions Usage semblable aux feuilles de styles

JavaScript prend place dans la page On peut le placer dans des balises HTML <input type="button" value="Calculer"

onClick="calcul()"> onClick Désigne un gestionnaire

d’événements Il exécute du code JavaScript ici calcul() C’est généralement du code simple Ici l’appel d’une fonction

Java script dans des balises HTML Le code placer dans un gestionnaire

d’événement peut être long : <INPUT NAME="num"

onchange="if (!checkNum(this.value, 1, 10)) {this.focus();this.select();} else {thanks()}" VALUE="0">

Mais ce n’est pas une bonne pratique Cela ne donne pas un code lisible A n’utiliser que si cela simplifie la code

Appeler une fonction JavaScript dans un lien hypertexte <a

href="javascript:cadre('bas.htm','bas')">

On remarquera l’emploi de guillemets 'SIMPLE' car les "DOUBLES" sont utilisés pour délimiter la valeur de l’attribut.

JavaScript permet l’emploi des deux, il suffit qu’ils soient appairés

Base de programmation

Comme beaucoup de langage, JavaScript se base sur des fondamentaux.

Les fondamentaux de tout langage Variables et données Types de bases (Primitifs) Structures de données Instructions et Bloc d’instructions Expressions

(composées d’Opérateurs et Opérande ) Contrôle de Flux Eléments de Structurations Sans oublier les commentaires !

Les commentaires

Un programme est principalement constitué d’instructions (ce qu’on lui dit de faire)

Mais il est important de noter pourquoi on lui à dit de faire cela. Ainsi si l’on doit être relu, il sera possible de comprendre le pourquoi

i=0; // la fin de la ligne est un commentairei=1;/* toutcela est uncommentaire */i=2;

Les Variables

Elles se déclarent par le mot clé var Elles sont référencées par un nom

Ce nom doit débuter une lettre et ne comporter que des lettres, chiffres et _

Exemple : var Coupure_de_10_Euros Ne pas oublier que JavaScript est sensible à

la case c-à-d aux majuscules/minuscules

Les données

C’est ce que stock les variables Le moyen le plus simple d’écrire une

données et d’utiliser une constante

Exemple : var Somme = 0 ;

Les données on toujours un type

Les Variables un problème en JavaScript Les variables n’ont pas de type !!!

Elles contiennent une donnée qui elle à toujours un type, elles ont le type de la donnée qu’elles contiennent. Ce type peut changer quand la donnée change !

Elles peuvent être déclarer implicitementSomme = 0Si la variable Somme n’existe pas, une variable Somme est créée automatiquement

Les Types primitifs

Les nombres : Entiers Réels (virgules flottante)

Les chaînes de caractères Les booléens

Les entiers

Simplement un nombre sans virgule :var d = 6836; // en base 10 (non nul devant)

Accessoirement on peut noter dans une base différente :var o = 015264; // en base 8 (0 devant) var h = 0X1AB4; // en base 16 (0x devant)

Les réels

Un signe + ou - Une Partie entière Un point et une partie décimale Une lettre e ou E suivie d’un exposant Exemples : var r1 = 3.1415926536;

var r2 = -54E-12;var r3 = .656E46;

Les chaînes de caractères

Une suite de caractères encadré de guillemets 'simple' ou "double".

\ sert de caractère d’échappement

Exemple : var c="012'abcd\nefgh\\ijkl\'mnop\"rstu'345";Représente :012'abcdefgh\ijkl'mnop"rstu'345

Les booléens

Ne prenent que deux valeurs : true (vrai) false (faux)

Exemple :var b = true;b = false;

Les types particuliers

Ils représentent des conditions particulières

Infinity nombre infini NaN nombre impossible ex : 0/0 nul type et valeur inexistant, vides undefined variable non initialisée

Les structures de données

En java script il existe un seul type de structure : Les tableaux

En fait il en existe un second : Les objetsMais JavaScript n’est pas un vrai langage objet. Ce ne sont que des tableaux déguisés, plus précisément des dictionnaires.

Il faut envisager les objet en JavaScript comme un facilité de notation

Les tableaux

Les tableaux sont un ensemble de variables auxquelles on accède par un indicevar t=new Array(3);//tableau de 3 élémentst[0] = 'a'; // 1er élément indice 0t[1] = 'b'; // 2nd élément indice 1t[2] = 'c'; // 3iem élément indice 2

Equivalent à :var t = new Array('a','b','c');

Les tableaux

L’on n’est pas obligé de déclarer la taille d’un tableau

On peut utilisé toutes valeurs comme indices et pas seulement un entier

var employe=new Array();employe["nom"] = "Descartes";employe["prenom"] = "Jean";employe["residence"]= "Cahors";

Les tableaux sont en fait des dictionnaires On peut utiliser la notation pointé des objets :

employe.nom = "Descartes";

Les objets

Si il a été montrer le lien étroit qu’il existe entre Objet et Tableau en JavaScript, il ne faut pas oublier que c’est propre à ce langage

Garder à l’esprit que JavaScript n’est pas un langage Objet

En JavaScript les Objets sont juste une commodité de notation

On abordera les Objets lors de l’évocation du DOM

Les instructions et bloc

Les instructions sont les traitements élémentaires qu’exécutera le programme

En JavaScript on sépare les instructions par un point-virgule ;

Les instructions sont exécutées dans l’ordre de leurs écritures

Il est possible de regrouper des instructions en les entourant d’accolades { } , on obtient un bloc équivalent à une instruction

Les instructions et bloc

Exemple de bloc d’instructions :

{var P20 = Math.floor(Rendre / 20);Rendre = Rendre - (P20 * 20);document.formulaire.Nb20.value = P20;}

Expressions

Une instruction est l’ordre d’évaluer des Expressions

Une Expressions est simplement l’écriture de plusieurs Opérateurs et Opérandes

Exemple : (1+2)*b + est l’Opérateur adition, il utilise les valeurs des

Opérandes 1 et 2 pour retourner une valeur * est l’Opérateur multiplication, il utilise les valeurs

des Opérandes (1+2) et b pour retourner une valeur

Expressions

Le résultat de l’évaluation d’une expression peut être tout type de valeurs : Un booléen pour servir de condition à un test Un nombre pour le résultat d’un calcul Une chaîne de caractères pour afficher un

message Une données de type structuré pour des

traitements ultérieurs …

Les types d’opérateurs

Les opérateurs peuvent être : Unaire Binaire voir Ternaire

Cela désigne le nombre d’opérandesv=!a;v=a+b;v=a?b:c;

Les catégories d’opérateurs

Arithmétiques De comparaisons (ou relationnels) Logiques (ou booléens) Binaires (ou bit à bit) D’affectation Et d’autre plus difficiles à classer

Les Opérateurs Arithmétiques Ce sont les mêmes que ceux de mathématique En JavaScript il existe :

Opérateurs de type binaires : 1 + 2 Somme 1 - 2 Soustraction 1 * 2 Multiplucation 1 / 2 Division 1 % 2 Modulo

Opérateur de type unaire : - 1 négation numérique (le signe) + 1 ne fait rien (mais converti en nombre)

Les Opérateurs de comparaisons Il servent à comparer deux éléments, leurs

résultats est un booléen (destiner à un test) == égalité strict != différence < inférieur strict <= inférieur ou égale > supérieur strict >= supérieure ou égale

Ce sont tous des opérateurs de type binaire

Les Opérateurs de comparaisons

Les tests d’égalités Les Opérateurs d’égalité == et != comparent les valeurs des Opérandes.

Ces valeurs sont convertie si nécessaire Sur des ensembles de données structurées

(Tableau, Objet), ils testent si l’on fait référence au même ensemble de données.

On ne peu tester l’égalité des données de deux ensembles qu’en faisant les comparaisons une à une.

Il existe également les opérateurs === et !== qui teste l’égalité des données ET de leurs types

Les Opérateurs booléens

Comme leurs nom l’indique, il opèrent sur des booléens. Ils servent à concevoir des expression logique.

Il sont principalement employer avec les Opérateurs de comparaison. Exemple :if ((1<a)&&(a<5)) {alert('a et un Nbr de 2 à 4');}

Ils appartiennent à l’algèbre booléennes

Les Opérateurs booléens

En JavaScript il existe : De type binaire

&& le « et » logique || le « ou » logique

De type unaire ! la négation logique (retourne vrai si

c’est faux) Rq : le caractère | s’obtient par AltGr + 6

Les Opérateurs binaire (bit à bit) Il traitent toutes les données dans leurs

format « informatique » : Les bits. Il ont peut d’utilité en JavaScript, c’est surtout

un risque de confusion avec les opérateurs de comparaison et booléens.

Il existe de type binaire :& « et », | « ou », ^ « ou exclusif », << « décalage à gauche », >> « décalage à droite », >>> « décalage à droite non signé »

De type unaire : ~ « négation binaire »

Les Opérateurs d’affectation = L’affectation est un opérateur, on l’emploie

généralement pour affecté une valeur à une variable.

Exemple : i=(1+2) l’expression de droite (1+2) est évalué la valeur retourné est « copier » dans la variable de gauche i.

Opérateurs d’affectation combiner avec une opération Il est possible de combiner une

affection et une opération Ce sont des raccourcis d’écriture

i+=1 équivalent à i=i+1 i-=1 équivalent à i=i-1 i*=1 équivalent à i=i*1 i/=1 équivalent à i=i/1

Les Opérateurs unaires spéciaux Il s’appliquent à des variables. Ils font deux chose à la foi, une opération

d’incrémentation ou décrémentation ET une affectation à leur opérande,

tout en retournant un résultat. Il peuvent être :

Préfixé : le résulta est retourné après l’opération Postfixé : le résulta retourné est la contenu de la

variable avant l’opération.

Les Opérateurs unaires spéciaux

a++ retourne la valeur de a puis incrémente a ++a incrémente a puis retourne le résultat a-- retourne la valeur de a puis décrémente a --a décrémente a puis retourne le résultat

Vraiment très spécial, l’Opérateur conditionnel C’est un opérateur de type ternaire, il évalue

un test et en fonction du résultat il retourne l’une ou l’autre des autres opérandes.

a=1;b=2;c=3;d=4;x=(a>b)?c:d; // x prend la valeur 4

Les conversion implicite JavaScript est un langage faiblement typé Quand un opérateur doit faire une opération avec

des opérateurs, ceux-ci ne sont pas nécessairement adéquats.

Il va alors les convertir de manière automatique Exemple : "3"<25 "3" est converti en nombre 3 avant d’effectuer la

comparaison C’est un source fréquente d’erreur et comme les

variables ne sont pas typé, il n’existe pas de solution

Contrôle de flux

Par défaut un programme exécute les instructions dans l’ordre de leurs écritures, cela offre des possibilités très limitées.

Par contrôle de flux on entend la possibilité de modifier la séquence et l’ordre d’exécution.

Exemple : exécuter une séquence alternative (si) Répéter des instructions (tant que)

IF…ELSE... Si … Alors …

if (condition){ // exécuté si condition est vraie }else{ // exécuté si condition est fausse }

l’un ou l’autre, jamais les deux.

FOR … Pour … variant de … à … for(initialisation; condition; pas){

// exécuté à chaque tour de boucle }

initialisation : mettre le compteur à zéro condition : vérifier le compteur pas : incrémenter le compteur

WHILE Tant que …

while (condition){ // répété tant que condition est vrai

action }

action doit, à terme, modifier condition sinon la boucle est infinie

DO … WHILE Répéter …Tant que … Attention

Répéter Tant que n’est pas Répeter Jusqu’à

do {// répété tant que condition est vrai action } while (condition)

action doit, à terme, modifier condition sinon la boucle est infinie

Les Eléments de Structurations Structuré des programmes, c’est pour

pouvoir écrire des programmes complexes. Un programmes est très complexe quand il

dépasse 100 lignes. En JavaScript il existe :

Les fonctions Les objets

Les objets

Les objets sont : une structure de données et une structure de programmation

Le concept d’objet en informatique est bâti sur cette union

Les objets seront vu ultérieurement

Les fonctions

Le but des fonctions est de regrouper des instructions pour pouvoir les réemployer à plusieurs endroit sans avoir à les réécrire.

On peut passer à une fonction des paramètres, ceux-ci serviront à moduler l’action de la fonction.

La fonction peut retourner un résultat, celui-ci étant alors directement exploitable dans une expression.

Les fonctions

function nom (paramètre){ // exécuté a chaque appel de la fonction

return (résultat) }

nom : au choix de l’utilisateur paramètre : optionnel return : renvoie un résultat

L’interaction avec le navigateur document.write("<h1>Bonjour</h1>\n");

écrit directement dans la page au moment de sont chargement à l’endroit ou le script à été lancer.

alert('montant insuffisant');ouvre un dialogue affichant un message

Il est possible d’accéder à l’ensemble de la page par l’objet document

L’interaction avec le navigateur

A suivre…

javascript

Documents