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 : 188 Pages ! 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 On peut le placer dans les entêtes <script type="text/javascript"> Introduit le passage JavaScript <!-- Place le code en commentaire //--> Ferme le commentaire alert("Hello monde!"); Le code <html> <head> <title>Test</title> <script type="text/javascript"> <!-- alert("Hello monde!"); //--> </script> </head> <body> </body> </html>
JavaScript prend place dans la page On peut le placer en pleine page document.write("<h1>Bonjour, le monde</h1>\n"); Ajoute du code HTML à la page Résultat : Avant le script Bonjour, le monde Après le script html> <head><title>Test</title> </head> <body> Avant le script <script type="text/javascript"> <!-- document.write("<h1>Bonjour, le monde</h1>\n"); //--> </script> Après le script </body> </html>
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
Comme beaucoup de langage, JavaScript se base sur des fondamentaux. 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 commentaire i=1; /* tout cela est un commentaire */ 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 implicitement Somme = 0 Si la variable Somme n’existe pas, une variable Somme est créée automatiquement
Les Types primitifs Les nombres : Les chaînes de caractères 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'abcd efgh\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 objets Mais 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 indice var t=new Array(3);//tableau de 3 éléments t[0] = 'a'; // 1er élément indice 0 t[1] = 'b'; // 2nd élément indice 1 t[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érandes v=!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…