Scribd
Importer
414 vues18 pages

Chapitre 4 - JavaScript

Ce document introduit JavaScript en expliquant ce qu'il permet de faire, sa syntaxe et sa structure. Il décrit comment insérer du code JavaScript dans une page HTML et comment utiliser des variables, boîtes de dialogue et entrées/sorties de données en JavaScript.

Transféré par

mohammed kharaz
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
414 vues18 pages

Chapitre 4 - JavaScript

Ce document introduit JavaScript en expliquant ce qu'il permet de faire, sa syntaxe et sa structure. Il décrit comment insérer du code JavaScript dans une page HTML et comment utiliser des variables, boîtes de dialogue et entrées/sorties de données en JavaScript.

Transféré par

mohammed kharaz
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 18

03/02/2021

Université Cadi Ayyad ‫جامعة القاضي عياض‬


Faculté Polydisciplinaire
‫الكلية المتعددة التخصصات‬
Département Mathématiques et
Informatique ‫شعبة الرياضيات واإلعالميات‬
Safi ‫آسفي‬

JavaScript : Introduction

Pr. YOUSSEF MOURDI


[email protected]

Introduction

• Javascript permet de rendre interactif un site internet développé en


HTML.
• Javascript permet de développer de véritables applications
fonctionnant exclusivement dans le cadre d'Internet.
• Le Javascript est un langage de script simplifié orienté objet dont la
syntaxe est basée sur celle du Java.
• Javascript a été initialement élaboré par Netscape en association avec
Sun Microsystem.
• Plus tard, Microsoft développera son propre langage Javascript officiellement connu sous le
nom de JScript.

03/02/2021 Pr. Y. MOURDI 2

1
03/02/2021

Introduction

• Contrairement à un applet Java qui est un programme compilé, les


scripts écrits en Javascript sont interprétés
• Le Java, représenté par un ou plusieurs fichiers autonomes dont l'extension
sera *.class ou *.jar, est invoqué par une balise HTML spécifique
• Le JavaScript est écrit directement au sein du document HTML sous forme
d'un script encadré par des balises HTML spéciales ou bien dans un fichier
séparé appelé avec des balises HTML spéciales.

• Javascript est standardisé par un comité spécialisé, l'ECMA (European


Computer Manufactures Association).

03/02/2021 Pr. Y. MOURDI 3

HTML et JavaScript

• la page HTML devra TOUJOURS contenir les deux balises


spécifiques et indispensables
<script language="JavaScript">
............
</script>

• Le code JavaScript s’intègre de deux manière avec le code


HTML
• 1. Insertion directe dans le code HTML
• Le code JavaScript s'insère le plus souvent dans la page HTML elle même.
• C'est la méthode la plus simple et la plus fréquemment utilisée par les développeurs de
sites Internet.

• 2. Insertion comme un module externe


03/02/2021 Pr. Y. MOURDI 4

2
03/02/2021

1. Insertion dans une page HTML

• Il existe 2 manières d'insérer du code JavaScript dans une page HTML


• 1.1 Insertion pour exécution directe
<html>
• Le code s'exécute automatiquement <head>
lors du chargement de la page HTML <title>..... </title>
dans le navigateur en même temps que </head>
<body>
le contenu de la page HTML <script language="JavaScript">
s'affiche à l'écran. alert(‘bonjour’);
</script>
• Le code JavaScript est placé </body>
dans le corps même de la page HTML, </html>
entre les balises <body> .......... Et
......... </body>
03/02/2021 Pr. Y. MOURDI 5

2. Insertion par appel de module externe

• On peut insérer du code JavaScript en faisant appel à un module externe


se trouvant à n’importe quelle adresse (URI).
<script src="URL du module externe">
............
</script>

• Les deux balises de Javascript doivent être placés entre les Tags <body> et </body>
dans le cas d'une exécution directe ou entre les Tags <head> et </head> de la page
HTML pour une exécution différée.
• Stocké dans un fichier sur le serveur à son adresse d'appel sous forme de TEXTE
SIMPLE portant l'extension .txt ou .js
• Simplifie la maintenance des sites faisant appel à des modules JavaScript communs
à plusieurs pages HTML.

03/02/2021 Pr. Y. MOURDI 6

3
03/02/2021

Entrée et sortie de données avec JavaScript

• 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

• La méthode document.write permet d ’écrire du code HTML dans la page WEB


03/02/2021 Pr. Y. MOURDI 7

Entrée et sortie de données avec JavaScript

<html>
<head>
<title> une page simple </title>
</head>
<body>
Bonjour
<script language='javascript'>
alert('bonjour');
document.write (
prompt('quel est votre nom ?','Indiquer votre nom ici')
);
confirm('quel bouton allez-vous choisir ?');
</script>
</body>
</html>
03/02/2021 Pr. Y. MOURDI 8

4
03/02/2021

La structure d’un script en JavaScript

• La syntaxe du langage Javascript s'appuie sur le modèle de Java et C


• Règles générales
• L'insertion des espaces peut s'effectué n'importe où dans le script
• Chaque commande doit être terminée par un point-virgule (;).
• Un nombre à virgule est séparé par un point (.) et non par une virgule
• Le langage Javascript y est sensible à la casse
• Il existe deux méthodes permettant d'intégrer des commentaires à vos
scripts.
• Placer un double slash (//) devant le texte
• Encadrer le texte par un slash suivi d'une étoile (/*) et la même séquence inversée
(*/)

03/02/2021 Pr. Y. MOURDI 9

Les variables

• Déclaration et affectation
• Le mot-clé var permet de déclarer une ou //Déclaration de i, de j et de k.
plusieurs variables. var i, j, k;

• Après la déclaration de la variable, il est //Affectation de i.


possible de lui affecter une valeur par i = 1;
l'intermédiaire du signe d'égalité (=). //Déclaration et affectation de prix.
var prix = 0;
• Si une valeur est affectée à une variable
//Déclaration et affectation de caractere
sans que cette dernière ne soit déclarée, var caractere = ["a", "b", "c"];
alors Javascript la déclare
automatiquement.

03/02/2021 Pr. Y. MOURDI 10

5
03/02/2021

Les variables

• Déclaration et affectation
• La lecture d'une variable non déclarée provoque une erreur

• Une variable correctement déclarée mais dont aucune valeur n'est affectée, est indéfinie
(undefined).

• La portée
• les variables peuvent être globales ou locales.

• Une variable globale est déclarée en début de script et est accessible à n'importe quel
endroit du programme.

• Une variable locale est déclarée à l'intérieur d'une fonction et n'est utilisable que dans la
fonction elle-même.
03/02/2021 Pr. Y. MOURDI 11

Les variables
• Le type d’une variable dépend de la valeur stockée dans cette variable. Pas de
déclaration de type.
• var maVariable = ‘ Philippe ’;
maVariable =10;
• trois principaux types de valeurs
• String
• Number : 10^-308 >nombre < 10^308
• Les nombres entiers
• les nombres décimaux en virgule flottant
• 3 valeurs spéciales :
• Positive Infinity ou +Infinity (valeur infini positive)
• Negative Infinity ou –Infinity (valeur infinie négative)
• Nan (Not a Number) habituellement générée comme résultat d’une opération
mathamatique incohérente
• Boolean
• deux valeurs littérales : true (vrai) et false (faux).

03/02/2021 Pr. Y. MOURDI 12

6
03/02/2021

Valeurs spéciales

• JavaScript inclut aussi deux types de données spéciaux :


• Null : possède une seule valeur, null, qui signifie l’absence e données dans une variable

• Undefined : possède une seule valeur, undifined. Une variable dont le contenu n’est pas
clair car elle n’a jamais stocké de valeur, pas même null est dite non définie (undifined).

03/02/2021 Pr. Y. MOURDI 13

Les opérations sur les chaînes


• La concaténation
• Var chaine = " bonjour " + " FI3/FCD1 ";

• Déterminer la longueur d’une chaîne


• Var ch1 = " bonjour ";
• Var longueur = ch1.length;

• Identifier le nième caractère d’une chaîne


• Var ch1 =" Rebonjour ! ";
• Var carac = ch1.charAt(2);

• Extraction d’une partie de la chaîne


• Var dateDuJour = " 04/04/03 "
• Var mois = datteDuJour.substring(3, 5);
• 3: est l’indice du premier caractère de la sou-chaîne à extraire
• 5 : indice du dernier caractère à prendre en considération ; ce caractère ne fera pas
partie de la sous-chaîne à extraire
03/02/2021 Pr. Y. MOURDI 14

7
03/02/2021

Les fonctions prédéfinie

• eval
• Cette fonction exécute un code Javascript à partir d'une chaîne de caractères.

...
<SCRIPT LANGUAGE="JavaScript">
function evaluation() {
document.formulaire.calcul.value=eval(document.formulaire.saisie.value); }
</SCRIPT>
...
<FORM NAME="formulaire">
Saisissez une expression mathématique : <INPUT TYPE="text" NAME=saisie MAXLENGTH=40 SIZE=40>
<INPUT TYPE="button" VALUE="evaluation." onClick="evaluation()">
<INPUT TYPE="text" NAME=calcul MAXLENGTH=40 SIZE=40>
</FORM>...

03/02/2021 Pr. Y. MOURDI 15

Les fonctions prédéfinies


• Number
• convertit l'objet spécifié en valeur numérique
var jour = new Date("December 17, 1995 03:24:00");//converit la date en millisecondes
alert (Number(jour));

• String
• convertit l'objet spécifié en chaîne de caractères
jour = new Date(430054663215);//Convertit le nombre en date Mois jour, Annéee etc.
alert (String(jour));

• Escape
• retourne la valeur hexadécimale à partir d'une chaîne de caractère codée en ISO-Latin-1.

escape("!&") //retourne %21%26%

03/02/2021 Pr. Y. MOURDI 16

8
03/02/2021

Les Objets
• Les objets de JavaScript, sont soit des entités pré définies du langage, soit
créés par le programmeur.
• Par exemple, le navigateur est un objet qui s'appelle "navigator".
• La fenêtre du navigateur se nomme "window"
• La page HTML est un autre objet, que l'on appelle "document".
• Un formulaire à l'intérieur d'un "document", est aussi un objet.
• Un lien hypertexte dans une page HTML, est encore un autre objet. Il s'appelle "link".
etc...
• Les objets javascript peuvent réagir à des "Evénements".
• Tous les navigateurs ne supportent pas les mêmes objets
• Accès aux propriétés d’un objet
• voiture.couleur.value
• voiture.couleur.value = verte
03/02/2021 Pr. Y. MOURDI 17

Les Objets

• L’opérateur New
• L'opérateur new est utilisé pour créer une nouvelle instance ou un nouveau type d'objet
défini par l'utilisateur ou de l'un des types d'objets prédéfinis, Array, Boolean, Date, Function,
Image, Number, Object, ou String.

• nouvel_objet = new type_objet(parametres)

texte = new String("Une chaîne de caractère");

03/02/2021 Pr. Y. MOURDI 18

9
03/02/2021

Les Objets

• L’opérateur Typeof
• L'opérateur typeof renvoie une chaîne de caractères indiquant quel est le type de
l'opérande.

var i = 1;
typeof i; //retourne number
var titre="Les raisins de la colère";
typeof titre; //retourne string
var jour = new Date();
typeof jour; //retourne object
var choix = true; typeof choix; //retourne boolean
var cas = null; typeof cas; //retourne object
typeof parseFloat; //retourne function
typeof Math; //retourne object (IE 5.*, NS 6.*, NS 4.78, Opera 6.*, Opera 5.*
typeof Math; //retourne function NS 3.*, Opera 3.*

03/02/2021 Pr. Y. MOURDI 19

L'objet string
• Propriété :
• length : retourne la longueur de la chaîne de caractères;
• Méthodes :
• anchor( ) : formate la chaîne avec la balise <A> nommée;
• b( ) : formate la chaîne avec la balise <B>; a revoir !!
• big( ) : formate la chaîne avec la balise <BIG>;
• charAt( ) : renvoie le caractère se trouvant à une certaine position;
• charCodeAt( ) : renvoie le code du caractère se trouvant à une certaine position;
• concat( ) : permet de concaténer 2 chaînes de caractères;
• fromCharCode( ) : renvoie le caractère associé au code;
• indexOf( ) : permet de trouver l'indice d'occurrence d'un caractère dans une chaîne;

03/02/2021 Pr. Y. MOURDI 20

10
03/02/2021

L'objet string

• italics( ) : formate la chaîne avec la balise <I>;


• lastIndexOf( ) : permet de trouver le dernier indice d'occurrence d'un caractère;
• link( ) : formate la chaîne avec la balise <A> pour permettre de faire un lien;
• slice( ) : retourne une portion de la chaîne;
• substr( ) : retourne une portion de la chaîne;
• substring( ) : retourne une portion de la chaîne;
• toLowerCase( ) : permet de passer toute la chaîne en minuscule;
• toUpperCase( ) : permet de passer toute la chaîne en majuscules;

03/02/2021 Pr. Y. MOURDI 21

L'objet array

• Propriété :
• length : retourne le nombre d'éléments du tableau;
• Méthodes :
• concat( ) : permet de concaténer 2 tableaux;
• join( ) : converti un tableau en chaîne de caractères;
• reverse( ) : inverse le classement des éléménts du tableau;
• slice( ) : retourne une section du tableau;
• sort( ) : permet le classement des éléments du tableau;

03/02/2021 Pr. Y. MOURDI 22

11
03/02/2021

Les objets du navigateur

• L'objet le plus haut dans la hiérarchie est window qui correspond à la fenêtre
même du navigateur.
• L'objet document fait référence au contenu de la fenêtre.
• document regroupe au sein de propriétés l'ensemble des éléments HTML
présents sur la page. Pour atteindre ces différents éléments, nous utiliserons :
• soit des méthodes propres à l'objet document, comme la méthode getElementById( ),
qui permet de trouver l'élément en fonction de son identifiant (ID);
• soit des collections d'objets qui regroupent sous forme de tableaux Javascript tous les
éléments de type déterminé.
03/02/2021 Pr. Y. MOURDI 23

Les objets du navigateur

03/02/2021 Pr. Y. MOURDI 24

12
03/02/2021

L'objet window

• Propriétés : (accessibles avec IE et N)


• closed : indique que la fenêtre a été fermée;

• defaultStatus : indique le message par défaut dans la barre de status;

• document : retourne l'objet document de la fenêtre;

• frames : retourne la collection de cadres dans la fenêtre;

• history : retourne l'historique de la session de navigation;

• location : retourne l'adresse actuellement visitée;

• name : indique le nom de la fenêtre;

03/02/2021 Pr. Y. MOURDI 25

L'objet window

• navigator : retourne le navigateur utilisé;

• opener : retourne l'objet window qui a créé la fenêtre en cours;

• parent : retourne l'objet window immédiatemment supérieur dans la hiérarchie;

• self : retourne l'objet window correspondant à la fenêtre en cours;

• status : indique le message affiché dans la barre de status;

• top : retourne l'objet window le plus haut dans la hiérarchie.

03/02/2021 Pr. Y. MOURDI 26

13
03/02/2021

L'objet window

• Méthodes :
• blur( ) : enlève le focus de la fenêtre;
• close( ) : ferme la fenêtre;
• focus( ) : place le focus sur la fenêtre;
• moveBy( ) : déplace d'une distance;
• moveTo( ) : déplace la fenêtre vers un point spécifié;
• open( ) : ouvre une nouvelle fenêtre;
• print( ) : imprime le contenu de la fenêtre;
• resizeBy( ) : redimensionne d'un certain rapport;
• resizeTo( ) : redimensionne la fenêtre;
• setTimeout( ) : évalue une chaîne de caractère après un certain laps de temps.

03/02/2021 Pr. Y. MOURDI 27

L'objet document
• Propriétés :
• applets : retourne la collection d'applets java présente dans le document;
• cookie : permet de stocker un cookie;
• domain : indique le nom de domaine du serveur ayant apporté le document;
• forms : retourne la collection de formulaires présents dans le document;
• images : retourne la collection d'images présentes dans le document;
• links : retourne la collection de liens présents dans le document;
• referrer : indique l'adresse de la page précédente;
• title : indique le titre du document.
• Méthodes :
• close( ) : ferme le document en écriture;
• open( ) : ouvre le document en écriture;
• write( ) : écrit dans le document;
• writeln( ) : écrit dans le document et effectue un retour à la ligne
03/02/2021 Pr. Y. MOURDI 28

14
03/02/2021

Les événements

• Javascript est dépendant des événements


• se produisent lors d'actions diverses sur les objets d'un document HTML.
• onLoad;
• onClick
• onMouseover
• onMouseout
• onChange
• …

• Il est possible de baser l’exécution de fonctions sur des événements

03/02/2021 Pr. Y. MOURDI 29

Les événements
• Evénement onLoad
• Se produit lorsque une page web est chargée dans la fenêtre du navigateur

• Toute la page (y compris les images qu’elle contient si leur chargement est prévu) doit
avoir été chargée pour qu’il ait lieu

• Cet événement peut être associé à une image seulement ; auquel cas, il se produit une
fois son chargement terminé

<HTML><BODY onLoad="alert('page chargée');">


Exemple de l'événement onLoad
</BODY></HTML>

03/02/2021 Pr. Y. MOURDI 30

15
03/02/2021

Les événements
• Evénement onClick
• Se produit lorsque l’utilisateur clique sur un élément spécifique dans une page, comme
un lien hypertexte, une image, un bouton, du texte, etc.

• Ces éléments sont capables de répondre séparément à cet événement

• Il peut également être déclenché lorsque l’utilisateur clique n’importe où sur la page s’il
a été associé non pas à un élément spécifique, mais à l’élément body tout entier

<HTML><BODY>
<INPUT TYPE="Button" Value="cliquer ici” onClick="alert('Clic')">
</BODY></HTML>

03/02/2021 Pr. Y. MOURDI 31

Les événements

• Événement onMouseover
• Analogue à onClick sauf qu’il suffit que l’utilisateur place le pointeur de sa souris sur l’un
des éléments précités (lien hypertexte, image, bouton, texte, etc.) pour qu’il ait lieu

• Événement onMouseout
• A l’inverse de onMouseover, cet événement se produit lorsque le pointeur de la souris
quitte la zone de sélection d’un élément.

<HTML><BODY>
<IMG SRC="image.gif" onMouseOver="src='image2.gif';"
onMouseOut="src='image.gif';">
</BODY></HTML>

03/02/2021 Pr. Y. MOURDI 32

16
03/02/2021

Nommage des objets


• Pour pouvoir manipuler un objet en javaScript, il doit posséder un nom

• Pour pouvoir distinguer les différents objets-éléments d’une page web, il suffit de leur
donner un nom à travers de l’attribut NAME
• <Table Name="tableau1">…
• <Table Name="tableau2">…
• <Form Name = "formulaire1 ">…
• <Form Name ="formulaire2 ">…
• <Textarea Name ="texte1">…

• Dans le cas où l’objet serait unique alors pas besoin de nom pour désigner cet objet
• Exemple : le cas de BODY(une seul BODY par document), DOCUMENT (un seul DOCUMENT
par fenêtre)

03/02/2021 Pr. Y. MOURDI 33

Manipulation des objets


• Pour adresser un objet, il ne suffit pas de donner son nom : il faut aussi
préciser son « chemin d’accès » dans l’arborescence de la structure

<HTML><BODY
onLoad="window.document.formulaire.zone.value='Bonjour';">
<FORM name="formulaire"><INPUT NAME="zone" TYPE="text">
</FORM></BODY></HTML>

• Si le nom de la fenêtre est omis, le navigateur utilisera par défaut la fenêtre


courante
• Dans le cas de cadres (frames), il est pertinent de donner le nom de la fenêtre
• Il est possible aussi d’omettre window.document : l’adressage réussi puisqu’il
n’y a qu’un seul objet « document» dans la fenêtre
03/02/2021 Pr. Y. MOURDI 34

17
03/02/2021

Manipulation des objets formulaire


Elément <input … >

• Propriétés • Méthodes
• name :nom du champ • focus : donne le focus (curseur)
• blur : enlève le focus
• type : type du champ (text, button, radio,
• click : simule un click (sur un bouton)
checkbox, submit, reset)
• value : valeur textuelle
• Événements
• onFocus : détecte la prise de focus
• size : taille du champ • onBlur : détecte la perte de focus
• maxlength : taille maximale d’un champ texte • onClick : détecte un click
• checked : case à cocher / bouton radio coché ou non • onChange : détecte les changements
• disabled : grisé (modification impossible)
• readOnly : lecture seule
• class : nom de la classe de style
• style : nom du style
03/02/2021 Pr. Y. MOURDI 35

Manipulation des objets formulaire


Elément <input … >

Elément <input type="text">

• Propriétés acceptées
• name, value, defaultvalue, size, maxlength, disabled, readOnly, class, style
• Méthodes acceptées
• focus, blur
• Événements acceptés
• onFocus, onBlur, onChange

03/02/2021 Pr. Y. MOURDI 36

18

Vous aimerez peut-être aussi