Ecole Supérieure Privée de ingénierie et de technologie année universitaire :2013/2014...

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.

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.

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

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

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éclarationLa syntaxe précédente peut également s’écrire comme suit :

14

Web SQL

• Les Web Databases sont hébergés dans le navigateur

• 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 name2- Version number3- Text description4- 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é/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.

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

22