Ch2 JavaScript (Complet) PDF

Cours Développement web dynamique
Chapitre 2 : Introduction au JavaScript

Filière : 2ème année Licence Multimédia
Enseignant : Amen Ajroud

amen.ajroud.isitcom@gmail.com
Année Universitaire 2018-2019

Plan
• Définition
• Déclaration du code JavaScript
• Les variables et fonctions
• Les boîtes de dialogues
• Les objets de programmation
• Les événements
• Le DOM : Document Object Model
• Les expressions régulières
A. Ajroud 2LM (ISITCOM) 2
Définition
• JavaScript est un langage de script inséré dans une page
HTML.
• Un langage de script est plus léger qu’un langage de
programmation car il ne nécessite pas une phase de
compilation mais il sera interprété.
• Le JavaScript est donc un langage de script qui est
interprété par le navigateur web (côté client).
• Le JavaScript a pour but :
– D’améliorer l’interactivité de la page web (ajout de contrôle,
animation, …)
– Traiter les événements provoqués par l’internaute (clic, survol,
…)
• Le JavaScript est un langage de script orienté objet dont la
syntaxe est proche de Java et C.
Déclaration du code JavaScript
On peut placer du code JavaScript dans une page HTML
selon des façons et des formes bien différentes.
1. Entre des balises <script> et </script>
– Quand ces balises sont placées à l’intérieur du <body>
le code JavaScript sera directement interprété au
chargement de la page.
– Quand ces balises sont placées dans le <head> le code
ne sera pas interprété directement. Il le sera lorsque on y
référence dans le <body>. Généralement, on définit des
fonctions JavaScript dans le <head> qui seront appelées
dans le <body>.
2. Code associé à un fichier d'extension .js
— On peut séparer le code JavaScript dans un fichier
ayant l’extension .js puis l’insérer dans la page web.
— Syntaxe : <script src="fichier.js"></script>
— Cela permet de réutiliser le code JavaScript dans
plusieurs pages web.
— Ces fichiers contiennent, généralement, la définition
des fonctions JavaScript qui seront appelées dans le
body des pages web.

3. Code associé à une balise HTML
— Le code JavaScript peut s’insérer sous forme d'un
appel de fonction, affectée à un gestionnaire
d'événement qui apparaît comme un attribut dans
une balise .
— Syntaxe :
<balise onevenement="fonction JS" >
— Exemple 1:
<button onclick="verif()" />
– Exemple 2 :
<body onload="aff_time()" />
Les variables
• Le mot-clé var permet de déclarer une ou plusieurs
variables.
• Après la déclaration de la variable, il est possible de lui
affecter une valeur par l'intermédiaire du signe
d'égalité (=).
• La valeur affectée définit le type de la variable.
• 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 de ce code.
– Une variable locale est déclarée à l'intérieur d'une fonction
et n'est utilisable que dans la fonction elle-même.
Les fonctions
• En JavaScript les fonctions sont définis soit dans le <head>
ou dans un fichier js et l’appel se fait en <body>.
• Syntaxe de définition :
<script>
function nom_De_La_Fonction(argument1, argument2, ...)
{
liste d'instructions
}
</script>
• Syntaxe d’appel :
<script>
nom_De_La_Fonction(x,y,...);
</script>

Les boites de dialogues
• Une boîte de dialogue est une fenêtre qui s'affiche
à l’écran, et qui permet :
– Soit d'avertir l'utilisateur (alert)
– Soit de confirmer un choix (confirm)
– Soit de lui demander de saisir une information

(prompt)

• La méthode alert() permet d'afficher une boîte
composée d'une fenêtre d'un bouton OK et le texte
qu'on lui fournit en paramètre.
• Dès que cette boîte est affichée, l'utilisateur n'a
d'autre alternative que de cliquer sur le bouton OK.
• Syntaxe : alert("Attention!");

• La méthode confirm() permet à l’utilisateur de
choisir entre les boutons "OK" et "Annuler".
• Lorsque l'utilisateur appuie sur "OK" la méthode
renvoie la valeur true. Elle renvoie false dans le cas
contraire....
• Syntaxe : var c = confirm("message");

• La méthode prompt() fournit un moyen simple de
récupérer une information provenant de l'utilisateur. La
méthode prompt() requiert deux arguments :
– le texte d'invite
– la chaîne de caractères par défaut dans le champ de saisie
• Syntaxe : rep = prompt('Question','valeur par
défaut');

Les objets de programmation
• La classe Array : représente un tableau en
JavaScript. Les éléments d’un tableau peuvent
être de type différent.
• La classe Date permet de représenter avec
des méthodes, la date et l’heure système.
• La classe String contient un certain nombre
de propriétés et de méthodes permettant la
manipulation de chaînes de caractères.

Les événements
• Les événements sont des actions de l'utilisateur, qui vont pouvoir
aboutir à une interactivité. On peut associer des appels de fonctions à
des événements.
Evénement Description
Change
Se produit lorsque l'utilisateur modifie l’état d’un élément d’un formulaire
(onChange)
Click
Se produit lorsque l'utilisateur clique sur l'élément associé à l'événement.
(onClick)
Load
Se produit lorsque le navigateur de l'utilisateur charge la page en cours
(onLoad)
MouseOver Se produit lorsque l'utilisateur positionne le curseur de la souris au-dessus d'un
(onMouseOver) élément
MouseOut Se produit lorsque le curseur de la souris quitte un élément.
(onMouseOut) Cet événement fait partie du Javascript 1.1.
Select Se produit lorsque l'utilisateur sélectionne un texte (ou une partie d'un texte) dans
(onSelect) un champ de type "text" ou "textarea"
Submit Se produit lorsque l'utilisateur clique sur le bouton de soumission d'un formulaire
(onSubmit) (le bouton qui permet d'envoyer le formulaire)
Unload
Se produit lorsque le navigateur de l'utilisateur quitte la page en cours
(onUnload)
Ecrire du texte
• La méthode write() de l'objet document
permet de modifier de façon dynamique le
contenu d'une page HTML. Voici la syntaxe de la
méthode write() :
document.write("texte à écrire") ;
document.write(Nom_variable) ;

Le Document Object Model (DOM)
• Le DOM fournit une représentation hiérarchique des
éléments (balises) d’une page web et permettant à
JavaScript l’accès aux propriétés de ces balises.
– L'objet le plus grand est l'objet fenêtre (window)
– Dans la fenêtre s'affiche une page, c'est l'objet document
– Cette page peut contenir plusieurs objets, comme des
formulaires, des images, des paragraphes, etc.
– Le formulaire contient des objets inputs et autres
– Exemple : pour récupérer la valeur d’un input de type texte
nommé nom placé dans un formulaire nommé form1 :
document.form1.nom.value

• Ainsi avec l’objet document (qui représente la
page web) on peut accéder aux différents éléments
de la page grâce essentiellement aux méthodes :
– La méthode getElementById("idname")
– La méthode getElementsByTagName("tagname")

• La méthode getElementById permet de
sélectionner un élément d'identifiant donné dans
une page. Par exemple
– si on a dans une page <div id="intro">...</div>,
– document.getElementById("intro") permettra
de sélectionner précisément l'élément div en
question.

• La méthode getElementsByTagName permet
de sélectionner les éléments portant un nom de
balise donné dans une page. Par exemple :
– Si on a dans une page <h1> ………</h1>…
<h1> ………</h1>
• var t = document.getElementsByTagName("h1")
retournera (dans un tableau t) la liste des
éléments (balises) dont la nom est h1. Dans cet
exemple il y a 2.
• innerHTML est une propriété des éléments HTML
pour insérer un contenu dynamiquement dans ces
éléments.
• Cette propriété est essentiellement utilisée pour les
balises HTML ayant un contenu textuel : p, h1, li,
option, ….
• Cette propriété permet de lire ou écrire le contenu
d’un élément pointé par l’une des méthodes
précédentes. Sa syntaxe est la suivante :
element.innerHTML
Les expressions régulières
• HTML5 a apporté un nouveau attribut nommé
pattern utilisé avec les balises <input>. Cet
attribut a pour rôle de définir un modèle des
valeurs à saisir dans le champ input.
• Ces modèles sont exprimés comme des
expressions régulières JavaScript.
• Ces expressions régulières suivent un
vocabulaire définit comme suit :

Caractère Utilité
Le caractère antislash représente lui-même ou le caractère spécial qui le
\
suit.
[] Les crochets définissent une liste de caractères. Ex : [0-9]
Les accolades lorsqu'elles contiennent un ou plusieurs chiffres séparés
{} par des virgules représentent le nombre d'occurences de l'élément les
précédant (par exemple p{2,5} correspond à ppp, pppp ou ppppp
Un moins entre deux caractères dans une liste représente un intervalle
-
(par exemple [a-d] représente [abcd]).
. Le caractère point représente un caractère quelconque.
Le caractère astérisque indique un nombre d'occurrences indéterminé (y
*
A. Ajroud compris aucune) de l'élément le précédant.
2LM (ISITCOM) 23
Caractère Utilité
Le caractère plus indique une ou plusieurs occurrences de l'élément le
+
précédant.
Le caractère "point d'interrogation" indique une occurrence éventuelle
?
(0 ou 1) de l'élément le précédant.
La barre verticale signifie l'occurrence de l'élément situé à sa gauche

|
ou de celui situé à sa droite
\s Le caractère espace.
^ Placé en début d'expression il signifie "chaîne commençant par .. "
$ Placé en fin d'expression il signifie "chaîne finissant par ... "

Exemples d’expression régulière
• Numéro de téléphone : XX XXX XXX
^[0-9]{2}\s[0-9]{3}\s[0-9]{3}$
• Adresse mail :
^[a-z0-9._-]+@[a-z0-9]{2,}\.[a-z]{2,3}$

Ch2 JavaScript (Complet) PDF

Transféré par

Informations du document

Titre original

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

Ch2 JavaScript (Complet) PDF

Transféré par

Droits d'auteur :

Formats disponibles

Cours Développement web dynamique

Chapitre 2 : Introduction au JavaScript

Enseignant : Amen Ajroud

Année Universitaire 2018-2019

A. Ajroud 2LM (ISITCOM) 5

A. Ajroud 2LM (ISITCOM) 8

– Soit de confirmer un choix (confirm)

– Soit de lui demander de saisir une information

A. Ajroud 2LM (ISITCOM) 9

A. Ajroud 2LM (ISITCOM) 10

A. Ajroud 2LM (ISITCOM) 11

A. Ajroud 2LM (ISITCOM) 12

A. Ajroud 2LM (ISITCOM) 13

A. Ajroud 2LM (ISITCOM) 15

A. Ajroud 2LM (ISITCOM) 17

A. Ajroud 2LM (ISITCOM) 18

A. Ajroud 2LM (ISITCOM) 19

A. Ajroud 2LM (ISITCOM) 22

La barre verticale signifie l'occurrence de l'élément situé à sa gauche

^ Placé en début d'expression il signifie "chaîne commençant par .. "

$ Placé en fin d'expression il signifie "chaîne finissant par ... "

A. Ajroud 2LM (ISITCOM) 25

Vous aimerez peut-être aussi