Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014...
-
Upload
danette-jourdain -
Category
Documents
-
view
107 -
download
2
Transcript of Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014...
![Page 1: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/1.jpg)
Ecole Supérieure Privée de ingénierie et de technologie
année universitaire :2013/2014
Cross-Plateform
Cours JavaScript
![Page 2: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/2.jpg)
2
Introduction
• JavaScript est un langage de script (programmation) qui peut être inclus dans des pages HTML.
• Grâce à ce langage, il est possible d’écrire des pages interactives.
![Page 3: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/3.jpg)
3
Conseils de codage
• Ajouter des points virgules (semicolons) à la fin de vos déclarations.
• Fermer toujours une accolade ouverte.
• Nous pouvons créer des strings en utilisant des simples ou doubles quotes.
![Page 4: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/4.jpg)
4
JavaScript : Les types de base
Voici les sept principaux types JavaScript qui font partie de
la norme ECMA (European Computer Manufacturers
Association):
• Object• String• Number• Array• Date • RegExp• Function
![Page 5: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/5.jpg)
5
Orienté Objet
• JavaScript est un langage orienté objet sans l’utilisation des classes (langage prototypé)
• Les objets sont manipulés comme étant des classes
• Aspect dynamique permettant de modifier la structure des objets après leur création (orienté objet par prototype).
![Page 6: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/6.jpg)
6
Déclarer un objet JavaScript
• Chaque objet JavaScript est considéré comme étant une map.
• On peut accéder aux propriétés d’un objet en utilisant la syntaxe: dot.syntax ou bien la [" array" ] syntaxe :
![Page 7: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/7.jpg)
7
Parcourir un objet JavaScript
Puisque les deux méthodes sont équivalentes, il est recommandé d’utiliser la méthode des points car c’est plus rapide.
![Page 8: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/8.jpg)
8
Les fonctions
Les fonctions peuvent être anonymes ou non:
![Page 9: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/9.jpg)
9
Private / Public Les fonctions sont aussi utilisées pour présenter des classes :
![Page 10: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/10.jpg)
10
Private / Public• La variable self dans le code précédent qui est égale à this,
permet à la méthode privée d’accéder aux méthodes publique de la même classe Thing :
• Dans ce contexte, this signifie la fonction privée privatemethod();
• Une méthode privée en JavaScript n’accède pas aux autres méthodes mais peut accéder aux variables.
![Page 11: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/11.jpg)
11
Déclaration
Vous pouvez définir la classe Thing
précédente autrement, mais l’inconvénient
est que vous ne pouvez plus accéder aux
membre privés de la classe.
![Page 12: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/12.jpg)
12
Déclaration
![Page 13: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/13.jpg)
13
DéclarationLa syntaxe précédente peut également s’écrire comme suit :
![Page 14: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/14.jpg)
14
Web SQL
• Les Web Databases sont hébergés dans le navigateur
• Les méthodes de base : - openDatabase- transaction- executeSql
![Page 15: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/15.jpg)
15
Création d’une base de données
• Pour créer et ouvrir une base de données : var db = openDatabase('mydb', '1.0', 'my first
database', 2 *1024 * 1024);
1- Database name2- Version number3- Text description4- Estimated size of database
![Page 16: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/16.jpg)
16
Les transactions
• Les transactions sont simplement des fonctions qui contiennent du code:
var db = openDatabase('mydb', '1.0', 'my first database', 2 *1024 * 1024);
db.transaction(function (tx) { // here be the transaction // do SQL magic here using the tx object});
![Page 17: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/17.jpg)
17
Création d’une table
var db = openDatabase('mydb', '1.0', 'my first database', 2 *1024 * 1024);db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)'); tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")');});
Ou bien :
tx.executeSql('INSERT INTO foo (id, text) VALUES (?, ?)', [id,userValue]);
![Page 18: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/18.jpg)
18
Web Storage
• Il existe deux nouveaux objets de stockage de données :
localStorage : Les données persistent même si on quitte l’application.
sessionStorage : Les données seront enregistrées pour une seule session lors de l’exécution.
![Page 19: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/19.jpg)
19
Web Storage
• les méthodes d'accès sont communes :setItem(clé,valeur) : stocke une paire clé/valeurgetItem(clé) : retourne la valeur associée à une cléremoveItem(clé) : supprime la paire clé/valeur en
indiquant le nom de la clékey(index): retourne la clé stockée à l'index spécifiéclear(): efface toutes les paires
Pour agrémenter le tout, la propriété .length renvoie le nombre de paires stockées.
![Page 20: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/20.jpg)
20
Web Storage
– Stockage : sessionStorage.setItem("couleur","vert")– Récupération : var couleur = sessionStorage.getItem("couleur");– Suppression: sessionStorage.removeItem("couleur");– Suppression totale: sessionStorage.clear();– Accès directe: sessionStorage.couleur = "vert";
![Page 21: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/21.jpg)
21
Web Storage avantages
• Stocker rapidement des données en cache sans faire intervenir le serveur
• Augmenter la performance• Se passer des cookies et du trafic HTTP
supplémentaire• Exploiter un espace alloué plus important que la
limite imposée par les cookies (fixée à 4 Ko),• Retrouver des données immédiatement à la
reconnexion ou les mémoriser pour éviter la perte s'il y a une déconnexion.
![Page 22: Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.](https://reader035.fdocument.pub/reader035/viewer/2022062511/551d9da3497959293b8d30be/html5/thumbnails/22.jpg)
22