Cours JavaScript

Ecole Supérieure Privée de ingénierie et de technologie
Cross-Plateform
Cours JavaScript
année universitaire :2013/2014
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.
2
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.
3
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
4
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).
5
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 :
6
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.
7
Les fonctions
Les fonctions peuvent être anonymes ou non:
8
Private / Public *
Les fonctions sont aussi utilisées pour présenter des classes :
9
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.
10
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.
11
Déclaration
12
Déclaration
La syntaxe précédente peut également s’écrire comme suit :
13
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
14
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
15
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
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]);
17
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.
18
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
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
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.
21