2018 Javascript Partie 1

DAW
Développement Applications Web
Ouadfel Salima
Site du cours: http://salimaouadfel.e-monsite.com/
http://salimaouadfel.e
Partie 2
Conception de sites dynamiques
avec Javascript (1)
O bjectifs du chapitre
Être capable de :
• Ecrire un programme JavaScript mettant en œuvre des
structures de contrôle, des fonctions et des objets
• Utiliser JavaScript pour traiter des événements liés à
l'interaction de l'utilisateur avec une page web
• Utiliser JavaScript et DOM pour modiﬁer le contenu
d'une page web
Définition
Présentation de JavaScript
JavaScript est un langage de programmation de scripts
C’est un langage orienté objet inspiré de nombreux langages dont

Java mais il reste très différent de celui-ci.
celui
Le langage est maintenant une implémentation de la norme
ECMA-262 (standard ECMAScript).
ECMAScript
Le langage a été créé en 1995 par Brendan Eich, membre de la fondation

Mozilla, pour le compte de Netscape Communications Corporation.
Corporation
Comment utiliser javaScript
Côté client :
• Le code javaScript est exécuté par le
navigateur Web.
Côté serveur :
• On peut maintenant utiliser JavaScript sur le
serveur grâce à l'interpréteur Node.js
Dans ce cours javaScript sera utilisé

comme un langage côté client
Pour exécuter javaScript côté client, nous avons
besoin du navigateur quii co
contient un interpréteur de
javaScript
Faiblesses:
• non sécurisé: code visible
• peut être désactivé par le client
• Dépend du navigateur
insertion de code JS dans la page web
<!DOCTYPE HTML>
<html> function pair(){
<head> nb = prompt('entrez un nombre', ''); (nb%2
<title>test JS</title>
<script src="script.js"></script>
1 == 0) ? alert('pair') : alert('impair');
}
</head>
<body>
script.js 11
<script
function affiche_date(){ entrez un nombre
mercredi26 octobre 2011 23:10:18 impair
2
2
var aujourdhui = new Date();
alert(aujourdhui.toLocaleString());
}
</script>
<noscript><p>activez JS !</p></noscript>
<div> Le code peut être placé dans:
<h1>Test jS</h1> hello
(1) fichier externe .js
3 <form action="test.php">
<a href="javascript:affiche_date()">date</a>
(2) élément script
<div><input type="button" value="clic" onclick="pair()"></
="pair()"></div>
</form> (3) attribut contenant URL
</div>
</body>
4 (4) attribut événementiel
Entrées/Sorties
• 3 types de boites de messages peuvent être affichés en utilisant

Javascript : Alerte, Confirmation et Invite
– Méthode alert()
• sert à afficher à l’utilisateur des informations simples de type texte. Une fois que
ce dernier a lu le message, il doit cliquer sur OK pour faire disparaître la boîte
– Méthode confirm()
• permet à l’utilisateur de choisir entre les boutons OK et Annuler.
– Méthode prompt()
• La méthode prompt() permet à l’utilisateur de taper son propre message en
réponse à la question posée
Entrées/Sorties
Une alternative à alert()
() qui bloque le chargement
de la page, on peut utiliser console.log().
Entrée et sortie de données avec JavaScript
Entrées/Sorties
– Méthode document.write()
• La méthode document.write()() permet à l’utilisateur
d’afficher du CODE HTML sur le document
ouvert.
bases du langage
Les types primitifs
bases du langage
Instructions conditionnelles
Instructions itératives
if (expr){
while (expr){ do{
// code si expression true
… …
}
} } while (expr);
else {// code si expression false}
var today = new Date();

switch (today.getDay()){
case 0 : Instructions
case 6 : jour = "week-end"; break;
case 1 :
d’interruption :
case 2 : break, continue
case 4 :
case 5 : jour = "semaine"; break;
case 3 : jour = "mercredi"; break;
default : jour = "non defini"; } alert(jour);
bases du langage:: les fonctions
Définition
function maFonction(arg1,arg2) {instr
instr;}
Appel :
maFonction("12",13);
function triBulle(tab){
var echange;
do {
echange = false;
for(var i = 0; i < tab.length-1 ; i++) {
if(tab[i] > tab[i+1]) {
var tmp = tab[i];
tab[i] = tab[i+1];
tab[i+1] = tmp;
echange = true;}
}
} while (echange);}
var monTab = [9,6,8,7,10,1,3,4,2,5];

triBulle(monTab);
alert(monTab); // [1,2,3,4,5,6,7,8,9,10]
bases du langage:: les variables
• Le nom d'une variable est une suite de lettres ou de

chiffres, qui commence par une lettre ou le symbole de
soulignement, ou le symbole $.
• Ne peut pas utiliser de mots-clés
mots utilisé par JavaScript.
• Une variable devient une constante si elle est déclarée
avec le mot réservé const
const Chaine= " Bonjour "
• Attention JavaScript est un langage sensible à la casse.
bases du langage
Javascript est faiblement (dynamiquement) typé.
La méthode typeof : Permet de déterminer le type d'une variable.

• var Nombre = 2;
– Chaine = typeof Nombre // chaine contient "number"
"
• var UnTexte = "un texte exemple";
– Chaine = typeof UnTexte // chaine contient "string"
• var UnBooleen = true;
– Chaine = typeof UnBooleen // chaine contient "boolean"
"
• Chaine = typeof UneVariable // la variable UneVariable n'est pas
initialisée // la chaine contient "undefined
" "
bases du langage
Typage des variables à l’affectation
var v ; undefined
alert("Type de " + v + " : " + typeof v) ;
v = 12 ; number
v = 12.42 ; number
v = 'hello' ; string
v = true ; boolean
bases du langage
Portée des variables
Déclaration avec var: introduit un scope par fonction
bases du langage
Portée des variables : illustration
var a = 'contenu variable a' ;
function f() {
b = 'contenu variable b' ;
string
var c = 'contenu variable c' ;
alert("Dans f() a est de type " + typeof a) ;
string exemple
alert("Dans f() b est de type " + typeof b) ;string
alert("Dans f() c est de type " + typeof c)undefined
;
alert("Dans f() i est de type " + typeof i) ;
}
function g() {
.write(i) string
for (var i=0; i<1; i++) { document.write ; }
alert("Dans g() a est de type " + typeof a) ;string
undefined
alert("Dans g() b est de type " + typeof b) ;
number
alert("Dans g() c est de type " + typeof c) ;
alert("Dans g() i est de type " + typeof i) ;
} string
"Au niveau global a est de type " + typeof a)undefined
alert("Au ;
alert("Au
"Au niveau global b est de type " + typeof b) ; undefined
"Au niveau global c est de type " + typeof c)undefined
alert("Au ;
alert("Au
"Au niveau global i est de type " + typeof i) ;
f() ;
g() ;
Portée des variables
Globale :
• Variable déclarée en début de script
• Accessible à n'importe quel endroit du programme
Locale :
• Variable déclarée à l'intérieur d'une fonction
• Accessible uniquement dans la fonction
bases du langage: conversion
sion de ty
types quand c’est possible
• " 12.5 " *3; // ->

- 37.5
• "99" -5; // ->
- 94
• "99"+5 ; // ->
- "995"
• " 1sz2" *4; // ->
- NaN
• " deux " *3; // ->
- NaN
• isNaN (" deux " *3) ; // -> true
• (" 2 " ==2); // ->
- true
• (" 2 " = ==2); // ->
- false
bases du langage Conversion de type
parseInt() Chaine entier
parseFloat() Chaine flottant
parseFloat (" 1.24 "); // -> 1.24

parseInt ("42") ; // -> 42
parseInt ("42 est la reponse ") ; // -> 42
parseInt ("42 43 44"); // -> 42
parseInt (" reponse = 42"); // -> NaN
bases du langage: les tableaux
var tableau = [12, "texte", 3.5 , true]; 0 12
alert(tableau);
alert(tableau[0]); 1 texte
tableau
alert(tableau.length); 2 3.5
3 true
• Lestableaux sont en fait des objets

alert(typeof tableau); // object
• Autre façon de créer un tableau

var tableau = new Array(12, "texte",
"texte" 3.5, true);
• Exemples de méthodes prédéfinies des tableaux

var tab = [1,2,3];
tab.pop(); // [1,2]
tab.push(4); // [1,2,4]
tab.reverse(); // [4,2,1]
bases du langage
Création d’objets
•On
On peut utiliser le mot clef new et créer un
objet à partir de Object() ;
•On
On peut créer un objet littéral ;
•On
On peut définir un constructeur puis créer des
objets à partir de celui-ci.
ci.
bases du langage
Création d’objets: Object
bases du langage
Création d’objets: Créer un objet littéral
bases du langage
Création d’objets: Créer à partir d’un constructeur

2018 Javascript Partie 1

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

2018 Javascript Partie 1

Transféré par

Droits d'auteur :

Formats disponibles

DAW

Développement Applications Web

C’est un langage orienté objet inspiré de nombreux langages dont

Le langage a été créé en 1995 par Brendan Eich, membre de la fondation

Dans ce cours javaScript sera utilisé

• 3 types de boites de messages peuvent être affichés en utilisant

var today = new Date();

var monTab = [9,6,8,7,10,1,3,4,2,5];

• Le nom d'une variable est une suite de lettres ou de

Javascript est faiblement (dynamiquement) typé.

La méthode typeof : Permet de déterminer le type d'une variable.

• " 12.5 " *3; // ->

parseFloat (" 1.24 "); // -> 1.24

• Lestableaux sont en fait des objets

• Autre façon de créer un tableau

• Exemples de méthodes prédéfinies des tableaux

Vous aimerez peut-être aussi