1 / 59

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

scott-miles
Download Presentation

JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript Un langage dans la page

  2. 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

  3. Le Fonctionnement de JavaScript • Un langage interprété • Ecrit directement dans les pages WEB • Evénementiel • A base d ’objets • Faiblement typé

  4. 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

  5. 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.xMS 5.5

  6. 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 DocumentIl 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

  7. Les bases de JavaScript Les règles de bases

  8. 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 !

  9. <html><head><title>Test</title><scripttype="text/javascript"><!--alert("Hello monde!");//--></script></head><body></body></html> <scripttype="text/javascript">Introduit le passage JavaScript <!--Place le code en commentaire //-->Ferme le commentaire alert("Hello monde!");Le code JavaScript prend place dans la page • On peut le placer dans les entêtes

  10. html><head><title>Test</title></head><body>Avant le script<scripttype="text/javascript"><!--document.write("<h1>Bonjour, le monde</h1>\n");//--></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 JavaScript prend place dans la page • On peut le placer en pleine page

  11. JavaScript prend place dans la page • On peut placer le code JavaScript dans un fichier externe : • calcul.js : functioncarre(){ … } • externe.html : <scriptsrc="carre.js"type="text/javascript"></script> • Permet de réemployer des fonctions • Usage semblable aux feuilles de styles

  12. JavaScript prend place dans la page • On peut le placer dans des balises HTML • <inputtype="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

  13. Java script dans des balises HTML • Le code placer dans un gestionnaire d’événement peut être long : • <INPUTNAME="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

  14. Appeler une fonction JavaScript dans un lien hypertexte • <ahref="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

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

  16. 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 !

  17. 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;

  18. Les Variables • Elles se déclarent par le mot clé var • Elles sont référencées par un nomCe nom doit débuter une lettre et ne comporter que des lettres, chiffres et _ • Exemple : varCoupure_de_10_Euros • Ne pas oublier que JavaScript est sensible à la case c-à-d aux majuscules/minuscules

  19. 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 : varSomme = 0; • Les données on toujours un type

  20. 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

  21. Les Types primitifs • Les nombres : • Entiers • Réels (virgules flottante) • Les chaînes de caractères • Les booléens

  22. Les entiers • Simplement un nombre sans virgule :vard = 6836; // en base 10 (non nul devant) • Accessoirement on peut noter dans une base différente :varo = 015264; // en base 8 (0 devant) varh = 0X1AB4; // en base 16 (0x devant)

  23. 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;

  24. Les chaînes de caractères • Une suite de caractères encadré de guillemets 'simple' ou "double". • \ sert de caractère d’échappement • Exemple : varc="012'abcd\nefgh\\ijkl\'mnop\"rstu'345";Représente :012'abcdefgh\ijkl'mnop"rstu'345

  25. Les booléens • Ne prenent que deux valeurs :true (vrai)false (faux) • Exemple :varb = true;b = false;

  26. 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

  27. 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

  28. 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 à :vart = newArray('a','b','c');

  29. 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 • varemploye=newArray();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";

  30. 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

  31. 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

  32. Les instructions et bloc • Exemple de bloc d’instructions :{varP20 = Math.floor(Rendre / 20);Rendre = Rendre - (P20 * 20);document.formulaire.Nb20.value = P20;}

  33. 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érandes1 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

  34. 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 …

  35. 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;

  36. 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

  37. 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 + 2Somme • 1 - 2Soustraction • 1 * 2Multiplucation • 1 / 2Division • 1 % 2Modulo • Opérateur de type unaire : • - 1négation numérique (le signe) • + 1ne fait rien (mais converti en nombre)

  38. 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

  39. 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éesET de leurs types

  40. 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

  41. 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

  42. 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 »

  43. 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 dedroite (1+2) est évalué la valeur retourné est « copier » dans la variable de gauche i.

  44. 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

  45. 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.

  46. Les Opérateurs unaires spéciaux • a++ retourne la valeur de a puis incrémente a • ++aincrémente apuis retourne le résultat • a-- retourne la valeur de a puis décrémente a • --adécrémente apuis retourne le résultat

  47. 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

  48. 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

  49. 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)

  50. 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.

More Related