Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript.

Présentation au sujet: "Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript."— Transcription de la présentation:

1 Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014 Cross-Plateform Cours JavaScript

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

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

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 4

5 Orienté Objet JavaScript est un langage orienté objet sans lutilisation 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). 5

6 Déclarer un objet JavaScript Chaque objet JavaScript est considéré comme étant une map. On peut accéder aux propriétés dun objet en utilisant la syntaxe: dot.syntax ou bien la [" array" ] syntaxe : 6

7 Parcourir un objet JavaScript 7 Puisque les deux méthodes sont équivalentes, il est recommandé dutiliser la méthode des points car cest plus rapide.

8 Les fonctions Les fonctions peuvent être anonymes ou non: 8

9 Private / Public Les fonctions sont aussi utilisées pour présenter des classes : 9

10 Private / Public La variable self dans le code précédent qui est égale à this, permet à la méthode privée daccé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 naccède pas aux autres méthodes mais peut accéder aux variables. 10

11 Déclaration Vous pouvez définir la classe Thing précédente autrement, mais linconvénient est que vous ne pouvez plus accéder aux membre privés de la classe. 11

12 Déclaration 12

13 Déclaration La syntaxe précédente peut également sécrire comme suit : 13

14 Web SQL Les Web Databases sont hébergés dans le navigateur Les méthodes de base : - openDatabase - transaction - executeSql 14

15 Création dune 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 name 2- Version number 3- Text description 4- Estimated size of database 15

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 }); 16

17 Création dune 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]); 17

18 Web Storage Il existe deux nouveaux objets de stockage de données : localStorage : Les données persistent même si on quitte lapplication. sessionStorage : Les données seront enregistrées pour une seule session lors de lexécution. 18

19 Web Storage les méthodes d'accès sont communes : setItem(clé,valeur) : stocke une paire clé/valeur getItem(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. 19

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"; 20

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

22 22