Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
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.x MS 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 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
7
Les bases de JavaScript
Les règles de bases
8
Pour être complet : 188 Pages !
188 Pages ! Est en plus les navigateurs ne sont pas standard Il vaut mieux se baser sur l’usage que la théorie !
9
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>
10
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>
11
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
12
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
13
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
14
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
15
Comme beaucoup de langage, JavaScript se base sur des fondamentaux.
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 commentaire i=1; /* tout cela est un commentaire */ i=2;
18
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
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 : var Somme = 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 implicitement Somme = 0 Si la variable Somme n’existe pas, une variable Somme est créée automatiquement
21
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
22
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 = ; // en base 8 (0 devant) var h = 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 = ; 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 : var c="012'abcd\nefgh\\ijkl\'mnop\"rstu'345"; Représente : 012'abcd efgh\ijkl'mnop"rstu'345
25
Les booléens Ne prenent que deux valeurs : true (vrai) false (faux)
Exemple : var b = 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 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
28
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');
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 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";
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 : { var P20 = 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é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
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érandes v=!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 : Somme 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)
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ées ET 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 de droite (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 ++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
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.
51
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
52
WHILE Tant que … while (condition){ // répété tant que condition est vrai action } action doit, à terme, modifier condition sinon la boucle est infinie
53
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
54
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
55
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
56
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.
57
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
58
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
59
L’interaction avec le navigateur
A suivre…
Présentations similaires
