ecole supérieure privée de ingénierie et de technologie année universitaire :2013/2014...
TRANSCRIPT
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