DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2017-javascript-syntaxe.pdf · Une alternative à alert() qui bloque le chargement de la page, on peut utiliser

DAWDéveloppement Applications Web

Ouadfel Salima

Site du cours: http://salimaouadfel.e-monsite.com/

Définition

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.

Le langage est maintenant une implémentation de la norme

ECMA-262 (standard ECMAScript).

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

Mozilla, pour le compte de Netscape Communications Corporation.

2 / 21

Présentation de 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

Comment exécuter javaScript

Dans ce cours javaScript sera utilisé

comme un langage côté client

javaScript est un langage côté client

Requête

Pour exécuter javaScript, nous avons besoin du

navigateur (il contient un interpréteur de javaScript),

de la page web qui contiendra le code javascript.

Faiblesses:

• non sécurisé

• peut être désactivé par le client

• Dépend du navigateur

Ce que javaScript peut faire:

Contenu vide du body

Après exécution

exemple

Ajouter du contenu à

la page web

Ce que javaScript peut faire:Ajouter du contenu à

la page web


Modifier le style du div

Après le clicexemple

Modifier le style de la

page web


Calcul le nbre de clic

Si on clique plus

d’une fois

Traiter un formulaire

exemple

Les scripts Javascript :

Sont de simples fichiers ”texte” (extension

conseillée .js) à créer avec un éditeur de texte.

Les scripts en Javascript sont ”débogables” avec l’outil kit de développement du navigateur et tout simplement avec la ”Console d’erreurs” de ce navigateur.

10 / 21


Deboguer les scripts Javascript

11 / 21


Pour ouvrir le kit de développement de votre

navigateur, appuyez sur la touche F12

Puis ouvrez la console en cliquant sur l'onglet

correspondant en haut du kit.

Balises spécifiques indispensables

<script> code ici </script>

JavaScript désactivé

<noscript> Cette page n’utilise pas JavaScript

</noscript>

insertion de code JS dans la page web

<!DOCTYPE HTML

<html><head>

<title>test JS</title><script src="script.js"></script>

</head><body>

<script

function affiche_date(){var aujourdhui = new Date();

alert(aujourdhui.toLocaleString());}

</script><noscript><p>activez JS !</p></noscript><div>

<h1>Test jS</h1>

<a href="javascript:affiche_date()">date</a>

<form action="test.php"><div><input type="button" value="clic" onclick="pair()"></div>

</form></div>

</body></html>

function pair(){nb = prompt('entrez un nombre', ''); (nb%2 == 0) ? alert('pair') : alert('impair');}

mercredi26 octobre 2011 23:10:18

script.js

entrez un nombreimpair

Le code peut être placé dans:

(1) fichier externe .js

(2) élément script

(3) attribut contenant URL

(4) attribut événementiel

2

1

3

4

hello

•Voir un exemple

1

2

4

3

1

Entrées/Sorties

Entrée et sortie de données avec JavaScript

<html><head>

<title> une page simple </title>

<script >

alert (" une alerte déclenchée par le script");

</script>

</head>

<body>

</body></html>

– 1. Méthode alert()• La méthode alert(TEXTE) 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

Entrées/Sorties

2. prompt()

Entrées/Sorties


<html>

<head>


<script language =" javascript ">

prompt( (" quel est votre nom ?" );

</script>

</head>

<body>

</body>

/html>

Entrées/Sorties


• 3. Méthode confirm()

• La méthode confirm() permet à l’utilisateur de choisir entre les boutons OK et Annuler.

Entrées/Sorties


– Méthode confirm()

<html>

<head>


</head>

<body>

<script>

confirm( (" c’est votre choix ? ");

</script>

</body>

/html>

Entrées/Sorties

Une alternative à alert() qui bloque le chargement

de la page, on peut utiliser console.log().

Entrées/Sorties

exemple


– Méthode Write()

• La méthode write() permet à l’utilisateur

d’afficher des informations sur le document

ouvert.

•Précautions exemple

Entrées/Sorties

bases du langage

var ne = 0; var age = 0; var txt = '';

/* tant que l'utilisateur n'a pas saisi uneannee correcte afficher boite dialogue */

do {ne = prompt('annee ', '');

} while ( !exp.test(ne ) || (ne > annee_courante));

age = annee_courante - ne;

marque de fin d’instruction

marques

de bloc

commentaires

txt= 'vous avez ' + age + ' ans';

(age%10 == 0) ? alert(txt+' ... nouvelle decennie') : alert(txt);

opérateur conditionnel

ternaire

variable

types booleannumberstring objectnullundefined

opérateursaffectation

= += -= *= /= %=

logiques ! && ||

relationnels

< <= > >= == != === !==

arithmétiques + -

*/ %

concaténation +

autres opérateurs

Règles sur les noms de variables

• ne peut contenir que des caractères alphanumériques, c-à-d les lettres de A à Z et les chiffres de 0 à 9.

• peut également contenir l'underscore _ et le dollar $.

• ne peut pas commencer par un chiffre. Ne peut pas utiliser de mots-clés utilisé par JavaScript.

• Attention JavaScript est un langage sensible à la casse.

• Javascript est faiblement (dynamiquement) typé.

bases du langage

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

Valeurs particulières • null permet d'initialiser les variables.

• undefined correspond à la valeur d'une variable non initialisée ou d'une propriété non existante pour un

objet.

• NaN: valeur de conversion pour toute expression qui ne peut être convertie en un nombre

Peut se tester avec fonction isNaN

bases du langage

Typage des variables à l’affectationvar v ;

window.alert("Type de " + v + " : " + typeof v) ;

v = 12 ;


v = 12.42 ;


v = 'hello' ;


v = true ;


undefined

number

number

string

boolean

bases du langage

Portée des variables

bases du langage

Déclaration avec var: introduit un scope par fonction

Portée des variables

bases du langage

function f (x, y) {

if (y !=0)

{ let result = x/y; };

return result; // erreur, result n'est pas défini

}

Déclaration avec let: introduit un scope par bloc

Portée des variables : illustrationvar a = 'contenu variable a' ;

function f() {

b = 'contenu variable b' ;

var c = 'contenu variable c' ;

window.alert("Dans f() a est de type " + typeof a) ;

window.alert("Dans f() b est de type " + typeof b) ;

window.alert("Dans f() c est de type " + typeof c) ;

window.alert("Dans f() i est de type " + typeof i) ;

}

function g() {

for (var i=0; i<1; i++) { document.write(i) ; }

window.alert("Dans g() a est de type " + typeof a) ;

window.alert("Dans g() b est de type " + typeof b) ;

window.alert("Dans g() c est de type " + typeof c) ;

window.alert("Dans g() i est de type " + typeof i) ;

}

window.alert("Au niveau global a est de type " + typeof a) ;

window.alert("Au niveau global b est de type " + typeof b) ;

window.alert("Au niveau global c est de type " + typeof c) ;

window.alert("Au niveau global i est de type " + typeof i) ;

f() ;

g() ;

string

undefined

undefined

undefined

string

string

string

undefined

string

string

undefined

number

exemple

bases du langage

Concaténation Conversion de typeParticularité de l'opérateur + :En plus de faire des additions, cet opérateur permet de faire des

opérations sur les chaines de caractères : la concaténation.

Exemple :

var Chaine1 = 'bonjour', Chaine2 = 'le monde';var Chaine3 = Chaine1 + " " + Chaine2;

// Chaine3 contient "bonjour le monde"

bases du langage

Conversion de type

Attention au type des variables lorsque vous utilisez l'opérateur +

Exemple

var Chaine = "Voici le résultat de 2x4 : " ;

Res = Chaine + 2*4;

Alert(Res);

bases du langage

Conversion de type

• " 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 typeparseInt()

parseFloat()

Chaine entier

Chaine flottant

bases du langage

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

parseInt ("42") ; // -> 42

parseInt ("42 est la reponse ") ; // -> 42

parseInt ("42 43 44"); // -> 42

parseInt (" reponse = 42"); // -> NaN

Les constantesIl est parfois nécessaire de définir une valeur une seule fois pour l'utiliser

en lecture sans jamais la modifier.

JavaScript propose pour cela le mot-clé const.

Exemple :

const Chaine= " Bonjour "

const Chaine= " Bonsoir "

bases du langage

bases du langage

while (expr){

…

}

do{

…

} while (expr);

for (exp1 ; exp2 ; exp3){

...

}

for (var i in objet){

...

}

Instructions

conditionnelles

if (expr){

// code si expression true

}

else {

// code si expression false

}

var today = new Date();

switch (today.getDay()){

case 0 :

case 6 : jour = "week-end"; break;

case 1 :

case 2 :

case 4 :

case 5 : jour = "semaine"; break;

case 3 : jour = "mercredi"; break;

default : jour = "non defini"; } alert(jour);

Instructions itératives

Instructions

d’interruption :break, continue

<input type="text" name="nb1"> +

<input type="text" name="nb2"> =

<input type="text" name="res">

<input type="button" value="calculer"

onclick="res.value = nb1.value + nb2.value">

<input type="button" value="calculer" onclick="res.value = parseFloat(nb1.value) +

parseFloat(nb2.value)">

bases du langage

Chaînes de caractères

Création

var ch1 = new String('hello !');

var ch2 = 'hello !';

ch2 = "test";

Caractères spéciaux

Caractère d’échappement : \

Caractères espacement : \n \t\f

Propriétés

Taille d’une chaîne : length

Méthodes

substring, toLowerCase, toUpperCase

split, …

Conversion :

bases du langage

Fonctions

Déclaration

function nom_fonction([arg1,...,argN]){

...

return expression; // optionnel

}

Appel

nom_fonction(arg1, arg2) ;

Méthodes

ceil, floor, round min, max randomabs, sqrt, powtrigonométrie : sin, cos, …

alert(Math.ceil(7.48));alert(Math.random());

bases du langage

Fonction anonyme

Une fonction peut être enfermée dans une

variable, puis ensuite appeler cette variable

comme une fonction.

bases du langage

Fonction auto-invoquée

C’est une fonction qui va s’appeler elle-même.

bases du langage

Table

auxCréation

var tab1 = new Array(val1, val2, …);

var tab2 = *val1, val2, …+;

var tab3 = new Array();

• var tab = new Array(125, 'hello', false);

• tab[0] = 'xxx';

• var contenu = '';• for (var i=0; i < tab.length; i++){

contenu += tab[i]+', ';• }

• alert(contenu);

• contenu = ''; tab.reverse(); for (i in tab){

• contenu += tab[i]+', ';

• }

• alert(contenu);

Méthodes

join, reverse, sort, …

Propriétés

Taille d’un tableau : length

Accès

tab[i] avec i >= 0

Parcours

for, for in, while

125 hello false

xxx hello false

2

length : 3

0 1

xxx, hello, false,

false hello xxx

false, hello, xxx,

•On peut utiliser le mot clef new et créer un

objet à partir de Object() ;

•On peut créer un objet littéral ;

•On peut définir un constructeur puis créer des

objets à partir de celui-ci.

Création d’objets

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 constructeurbases du langage

Documents

DAW - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2017-javascript-syntaxe.pdf · Une alternative à alert() qui bloque le chargement de la page, on peut utiliser