Cross-Plateform Cours JavaScript

Présentation au sujet: "Cross-Plateform Cours JavaScript"— Transcription de la présentation:

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

2 Introduction JavaScript est un langage de programmation qui peut être inclus dans des pages HTML. Grâce à ce langage, il est possible d’écrire des pages interactives.

3 Conseils de codage Ajouter des points virgules (semilicons) à la fin de vos déclarations. Fermer toujours une accolade ouverte. Nous pouvons créer des strings en utilisant des simples ou doubles quotes.

4 JavaScript : Les types de base
Voici les sept principaux types JavaScript qui font partie de la norme ECMA (*): Object String Number Array Date RegExp Function

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

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" ] syntax :

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.

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

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

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.

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.

12 Déclaration

13 Déclaration La syntaxe précédente peut également s’écrire comme suit :
Plusieurs développeurs préfèrent cette approche, mais vous perdez la possibilité de référencer les membres privés de la classe.

14 Web SQL Les Web Databases sont hébergés dans le navigateur
Les données ne sont pas incluses avec chaque demande de serveur, mais utilisées uniquement en cas de besoin. Les méthodes de base : - openDatabase - transaction - executeSql

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

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

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]);

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.

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.

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

21 Web Storage avantages Stocker rapidement des données en cache sans faire intervenir le serveur Augmenter la performance ressentie et faciliter les développements, 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.