49
Cours: Développement Web Enseignants : Mme Z. CHANNOUF 1 Année universitaire :2014-2015

Cours JS Part1

Embed Size (px)

DESCRIPTION

cours javascript

Citation preview

Page 1: Cours JS Part1

Cours: Développement Web

Enseignants : Mme Z. CHANNOUF

1

Année universitaire :2014-2015

Page 3: Cours JS Part1

Sommaire

Introduction à JavaScript

Où placer le code Javascript

Types, variables et opérateurs

Possibilités d’affichage en Javascript

Structures de contrôle

Fonctions en Javascript

Classe et objet

Événements en JavaScript

3

Page 4: Cours JS Part1

Types de langages Deux types:

Un langage client-side : les scripts sont exécutés par le navigateur chez l'internaute (le client).

Un langage server-side : les scripts sont exécutés par le serveur Web. C'est le cas des langages comme le PHP.

Un script server-side va s'occuper de « créer » la page Web qui sera envoyée au navigateur. Ce dernier va alors afficher la page puis exécuter les scripts client-side tel que le JavaScript.

4

Introduction à JavaScript

Page 5: Cours JS Part1

5

Introduction à JavaScript

Page 6: Cours JS Part1

JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives côté client.

C’est un langage orienté objet inspiré de nombreux langages dont Java mais il reste très différent de celui-ci.

Le langage a été créé en 1995 par Brendan Eich, membre de la fondation Mozilla, pour le compte de Netscape

Communications Corporation.

6

Introduction à JavaScript

Page 7: Cours JS Part1

Introduction à JavaScript

Pourquoi JavaScript

Simple et interprétable par les langages de programmation

Permet une interactivité au Web

Contrôle des valeurs saisies dans un formulaire

Exécution lors de la survenue d’événement (chargement, utilisation de la souris, etc.)

Les scripts populaires sont: Javascript, VBScript, JScript, etc

7

Page 8: Cours JS Part1

Introduction à JavaScript

JavaScript ≠ Java

◦ java : véritable langage de programmation, compilé,

code protégé, typage fort, objet (classes, instances,

héritage..)

◦ JavaScript : facile à utiliser, typage faible, intégré dans

html, interprété, basé sur les objets html

8

Page 9: Cours JS Part1

Où placer le code Javascript ?

9

Code Javascript placé dans la page HTML :

<script type=text/javascript> … </script>

Importation d'un code Javascript externe (dans le fichier

moncode.js) :

<script type=text/javascript src=moncode.js></script>

Page 10: Cours JS Part1

Cas des événements : il faut simplement insérer le code à l’intérieur de la

balise HTML comme un attribut de celle-ci.

10

Où placer le code Javascript ?

<BODY onLoad="message()">

<A HREF="javascript:message()">une fonction js</A>

Cas des liens HREF : on peut insérer du code javascript dans un lien href

en précisant le mot clé javascript :

Dans certains cas, l’usage de la balise <SCRIPT> n’est pas obligatoire :

Page 11: Cours JS Part1

Utilisation de la console de debug JavaScript des navigateurs

Très pratiques pour tester la syntaxe JavaScript

11

Page 12: Cours JS Part1

Les variables Pas de déclaration de types

Utiliser var pour déclarer les variables (optionnel )

Noms de variables doivent débuter avec une lettre ou un tiret "_ “ et ils sont sensibles à la casse Exemples :

var a;

var ceciEstUneVariable;

var _et_ceci_aussi;

var mix12trois;

var 2three4five; // Invalide , une variable ne peut commencer par un chiffre !

var a = 1

var v1, v2, v3 = 'hello', v4 = 4, v5;

// Attentions aux majuscules/minuscules

var case_matters = 'lower';

var CASE_MATTERS = 'upper';

12

Types, Variables et Opérateurs

Page 13: Cours JS Part1

Arithmétiques : + - / * ++ --

Comparaison: < <= == != >= >

Concaténation des chaînes : +

Assignation : =

Spéciales:

◦ == et != convertissent les opérandes de même

type avant la comparaison

◦ === et !== considèrent ses opérandes inégales si

leurs types sont différents

13

Types, Variables et Opérateurs

Les opérateurs

Page 14: Cours JS Part1

14

>>> 1 + 2

3

>>> var a = 1;

>>> var b = 2;

>>> a + 1

2

>>> b + 2

4

>>> a + b

3

>>> var c = a + b;

>>> c

3

>>> var a = 123;

var b = a++;

>>> b

123

>>> a

124

>>> var a = 123;

var b = ++a;

>>> b

124

>>> a

124

>>> var a = 123;

var b = a--;

>>> b

123

>>> a

122

Types, Variables et Opérateurs

Les opérateurs

Page 15: Cours JS Part1

15

Symbole Description Exemple

== Egalité avec

conversion de type

>>> 1 == 1

True

>>> 1 == 2

false

>>> 1 == '1‘

true

=== Egalité sans

conversion de type

>>> 1 === '1‘

false

>>> 1 === 1

true

Types, Variables et Opérateurs

Les opérateurs

Page 16: Cours JS Part1

Les types

16

Types, Variables et Opérateurs

String, Number, Boolean, NaN, Infinity, undefined et null

NaN est le sigle de "Not a Number",

INFINITY est un nombre qui est trop grand (ou trop petit)

INFINITY, NEGATIVE_INFINITY ou POSIVE_INFINITY

UNDEFINED pour créer une variable sans lui donner une valeur,

elle est de ce type jusqu'à temps qu'on lui donne une valeur

NULL sert à spécifier une variable sans valeur

Page 17: Cours JS Part1

typeof : renvoie un objet de stype String, qui peut valoir

"number", "string", "boolean", "undefined", "object", ou

"function"

17

Types, Variables et Opérateurs

l'opérateur typeof

>>> var n0;

>>>typeof n0

« undefined »

>>>var n1 = 1234;

>>> typeof n1;

« number »

>>> var n2 = 1.23;

>>> typeof n2;

« number »

>>> typeof 123;

« number »

>>> var s = "quelques caractères";

>>> typeof s;

« string »

>>>var n3= 2e+3 // nombre avec exposant

>>> typeof n3;

« number »

>>> var n4 = 6 / 0;

>>> n4

Infinity

>>> typeof n4

« number »

Page 18: Cours JS Part1

Possibilités d’affichage en JavaScript

On peut afficher les données de différentes façons:

L'écriture dans une boîte d'alerte, en utilisant window.alert () .

L'écriture dans la sortie HTML en utilisant document.write () .

L'écriture dans un élément HTML, en utilisant innerHTML .

L'écriture dans la console de navigateur, en utilisant console.log () .

18

Page 19: Cours JS Part1

window.alert ()

Vous pouvez utiliser une boîte d'alerte pour afficher les

données :.

Exemple

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

<script>

window.alert(5 + 6);

</script>

</body>

</html>

19

Possibilités d’affichage en JavaScript

Page 20: Cours JS Part1

document.write ()

Exemple

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

<script>

document.write(5 + 6);

</script>

</body>

</html>

20

Possibilités d’affichage en JavaScript

Page 21: Cours JS Part1

innerHTML

Pour accéder à un élément HTML, JavaScript peut utiliser

document.getElementById (id).

L' id est un attribut qui définit l'élément HTML.

Le innerHTML est une propriété qui définit le contenu HTML:

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

<p>My First Paragraph</p>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = 5 + 6;

</script>

</body>

</html>

21

Possibilités d’affichage en JavaScript

Page 22: Cours JS Part1

console.log () Exemple

<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> console.log(5 + 6); </script> </body> </html>

22

Possibilités d’affichage en JavaScript

Page 23: Cours JS Part1

Conditions:

If (condition) instruction

If (condition) instruction else instruction

23

Les structures de contrôle

Structures conditionnelles

Exemple 1: sc simple

var a= 187, b = 173;

if(a > b)

{

text=(‘a est supérieur à b’);

}

Exemple 2 : sc simple

var a= 187, b = 173;

if(a > b)

{

text=(‘a est supérieur à b’);

}

else{

text=(‘ a est inférieur ou égal à

b’);

}

Page 24: Cours JS Part1

Exemple 3 : sc imbriquée

var a= 17, b = 173;

if(a > b)

{

text=('a est supérieur à b');

}

else if (a<b)

{

text=(' a est inférieur à b');

}

else

{

text=(' a est égal à b');

}

24

Exemple 4 : switch

var grade='A';

switch (grade)

{

case 'A': text=(‘Professeur’); break;

case 'B': text=(‘Assistant’); break;

case 'C': text=(‘Technicien’); break;

case 'D': text=(‘Ouvrier’); break;

default: text=(‘Grade inconnu’)

}

Les structures de contrôle

Structures conditionnelles

Page 25: Cours JS Part1

While (condition) instruction

Do instruction While (condition)

For (initialisation; condition; incrémentation)

instructions

Exemples :

25

Les structures de contrôle

Structures répétitives

Exemple 1: Boucle FOR

for (i = 0; i < 10; i++) {

text = “Le nombre est “

+ i+ “\n”;

}

Exemple 2: Boucle

WHILE

var text = "";

var i = 0;

while (i < 10) {

text += “le nombre

est” +

i+”\n”;

i++;

}

Exemple 3: Boucle DO…

WHILE

text="";

i=0;

do {

text += “Le nombre est " +

i+"\n";

i++;

}

while (i < 10);

Page 26: Cours JS Part1

Définie préférablement dans la partie <head> surtout avant

l’appel de la fonction

Syntaxe

function nom (arg1, …, argn)

{ instructions}

Appelée dans la partie <body>

Syntaxe de l’appel: nom (arg1, …, argn)

Variables déclarées dans une fonction resteront locales à

cette fonction

On pourra utiliser la commande RETURN (optionnel)

26

Les Fonctions en JavaScript

Syntaxe d’une fonction

Page 27: Cours JS Part1

<html>

<head>

<script type=text/javascript>

function Saluer (nom)

{ document.write (“Bonjour” + nom) }

</script>

</head>

<body>

< script type=text/javascript >

var votreNom = prompt("Quel est votre nom?");

Saluer(votreNom);

</script>

</body>

</html>

27

Les Fonctions en JavaScript

Exemple de déclaration

Page 28: Cours JS Part1

On pourra mettre dans un fichier à part: fonctions.js toutes les fonctions déclarées

Pour les charger et les utiliser dans différentes pages Web

< script type=text/javascript src=fonctions.js >

</script>

ATTENTION! : Pas de balise <script> dans fonctions.js

28

Les Fonctions en JavaScript

Fonctions en fichier externe

Page 29: Cours JS Part1

eval(): interpréte une expression

escape():transforme des signes ASCII en nombres

isFinite():vérifie le domaine numérique de valeurs

isNaN():vérifie si la valeur n'est pas un nombre

parseFloat():transforme en nombre avec décimales

parseInt():transforme en nombre entier

Number():transforme un objet en nombre

String():transforme le contenu d'un objet en une chaîne

de caractères 29

Les Fonctions en JavaScript

Page 30: Cours JS Part1

eval ("document.write(Bonjour !);")

Résultat: Bonjour !

30

Les Fonctions en JavaScript

Fonction eval()

Fonction escape()

var exemple = "\n\r\t";

document.write(escape(exemple));

Résultat : %0A%0D%09

//Transforme les caractères de commande avec des codes ASCII de 0 à 31)

// dans leurs valeurs ASCII numériques et cela sous forme hexadécimale

Page 31: Cours JS Part1

31

Fonction isNaN()

Les Fonctions en JavaScript

if(isNaN(x))

{ alert(x + " n'est pas un nombre."); }

Fonction isFinite()

if(isFinite(x + 5 * y))

{ alert("Le résultat est un nombre fini.");

//Si la valeur assignée est NaN,

//le résultat retourné par isFinite sera false.

}

Page 32: Cours JS Part1

var a = "54 a ", b = "d 54 " , c = 12.5, d = "toto";

document.write(parseFloat(a));

document.write(parseFloat(b));

document.write(parseFloat(c));

document.write(parseFloat(d));

32

Les Fonctions en JavaScript

Fonction parseFloat()

54

NaN

12.5

NaN

var a = "54 a ", b = "d 54 " , c = 12.5, d = "toto";

document.write(parseInt(a));

document.write(parseInt(b));

document.write(parseInt(c));

document.write(parseInt(d));

Fonction parseInt()

54

NaN

12

NaN

Page 33: Cours JS Part1

var a = 54, b = 44, c = 12.5, d = true;

a = String(a); b = String(b); c = String(c);d = String(d);

document.write(typeof (a));

document.write(typeof (b));

document.write(typeof (c));

document.write(typeof (d));

33

Les Fonctions en JavaScript

Fonction String()

String

String

String

String

var a = "54 " , b = "d54", c = "54d";

document.write(Number(a));

document.write(Number(b));

document.write(Number(c));

Fonction Number()

54

NaN

NaN

Page 34: Cours JS Part1

34

Exercice 1

Page 35: Cours JS Part1

<HTML>

<HEAD>

<SCRIPT>

var firstNumber, secondNumber,number1, number2, sum;

firstNumber = window.prompt( "Entrer le premier entier", "0" );

secondNumber = window.prompt( "Entrer le deuxieme entier",

"0" );

number1 = parseInt( firstNumber );

number2 = parseInt( secondNumber );

sum = number1 + number2;

document.write( "<H1>La somme est " + sum + "</H1>" );

</SCRIPT>

</HEAD>

35

Solution

Page 36: Cours JS Part1

36

Exercice 2

Page 37: Cours JS Part1

<html> <head>

<script>

function controle() {

var test = document.form1.moninput.value;

alert("Vous avez tapé : " + test); }

</script>

</head>

<body>

<form name="form1">

<input type="text" name="moninput’’ ><BR>

<input type="button" name="bouton" value="Contrôler" onClick= "controle()">

</form>

</body>

</html>

37

Solution 1

Page 38: Cours JS Part1

<html> <head>

<script>

function controle() {

var test = document.getElementById (‘’txt’’).value;

alert("Vous avez tapé : " + test); }

</script>

</head>

<body>

<form >

<input type="text’’ id= ‘’txt’’><BR>

< input type ="button" name="bouton" value="Contrôler" onClick= "controle()">

</form>

</body>

</html>

38

Solution 2

Page 39: Cours JS Part1

Classe et Objet

Une classe est un type qui est la description

d’un ensemble de :

◦ propriétés (les données) et de

◦ méthodes (les fonctions).

Un objet est une instance de classe (c’est à

dire une variable de type classe). On écrira :

◦ o.p pour accéder à une propriété p d’un objet o

◦ o.m() pour appeler une méthode m d’un objet o

39

Page 40: Cours JS Part1

DOM

Lorsqu’un document HTML est chargé dans un

navigateur, celui-ci fournit une interface DOM

(Document Object Model) pour accéder aux objets le

composant :

◦ Ces objets sont classés de manière hiérarchique

(notion d’arbre).

◦ L’objet le plus haut dans la hiérarchie est l’objet de la

classe window (fenêtre).

◦ Dans cette fenêtre, il y a un document HTML : c’est

l’objet document. Donc, L’objet window contient

l’objet document.et ainsi de suite ...

40

Classe et Objet

Page 41: Cours JS Part1

41

Classe et Objet

DOM

Page 42: Cours JS Part1

Lorsqu’une page Web est chargée dans un

navigateur, Javascript identifie plusieurs objets pour y

représenter les informations.

Ces objets sont classés de manière hiérarchique.

L’objet le plus haut dans la hiérarchie est l’objet de

la classe window (fenêtre).

42

Classe et Objet

DOM

Page 43: Cours JS Part1

Dans cette fenêtre, il y a un document

HTML : c'est l'objet document. Donc, L'objet fenêtre contient l'objet document (c’est la notion de hiérarchie).

Dans ce document, on trouve un formulaire au sens HTML : c'est l'objet formulaire. Donc, l'objet fenêtre contient un objet document qui lui contient un objet formulaire (hiérarchie des objets).

43

Classe et Objet

DOM

Page 44: Cours JS Part1

Dans ce document, on trouve trois objets : l'objet radio, l'objet bouton, et l'objet texte. Donc, l'objet fenêtre contient : ◦ Le modèle hiérarchique

des objets en Javascript.

44

Classe et Objet

DOM

Page 45: Cours JS Part1

Dans un document HTML, on pourrait donc accéder aux objets de

la manière suivante :

45

// Accès à une propriété de l’objet button

window.document.form.button.value = "Déterminer"; // Accès à une méthode de l’objet button

window.document.form.button.focus(); // Accès à une méthode de l’objet window

window.alert("Hello world");

Remarque : l’objet window est souvent facultatif. On ne doit pas

forcément préciser son nom pour utiliser ses méthodes ou ses

propriétés.

Classe et Objet

DOM

Page 46: Cours JS Part1

On recommande d’utiliser la méthode

getElementById() pour accéder aux objets par

leur identifiant (attribut ID de l’élément HTML) :

46

var bouton = document.getElementById(’id_button’);

bouton.click(); // pour simuler un clic de souris sur ce bouton

Classe et Objet

DOM

Page 47: Cours JS Part1

Le script est exécuté chaque fois que l’événement survient

<HTML>

<HEAD>

<SCRIPT LANGUAGE= "Javascript">

function bienvenue() {alert("Bienvenue à cette page"); }

function au_revoir() {alert("Au revoir"); }

</SCRIPT>

</HEAD>

<BODY onload='bienvenue()' onunload='au_revoir()'>

Salut étudiants ISI

</BODY>

</HTML>

47

Les évènements en JavaScript

Exemple

Page 48: Cours JS Part1

onAbort (en cas d'interruption)

onChange (après modification)

onClick (en cliquant)

onDblClick (en double-cliquant)

onError (en cas d'erreur)

onFocus (en activant)

onKeydown (en appuyant sur une touche)

onKeypress (en appuyant sur une touche)

onKeyup (en relâchant la touche)

48

Les évènements en JavaScript

Liste des évènements (1)

Page 49: Cours JS Part1

onLoad (en chargeant un fichier)

onMousedown (en maintenant la touche de souris appuyée)

onMousemove (en bougeant la souris)

onMouseout (En quittant l'élément avec la souris)

onMouseover (en passant sur l'élément avec la souris)

onMouseUp (en relâchant la touche de souris)

onReset (en initialisant le formulaire)

onSelect (En sélectionnant du texte)

onSubmit (en envoyant le formulaire)

onUnload (en quittant le fichier)

49

Les évènements en JavaScript

Liste des évènements (2)