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. A. Ajroud 2LM (ISITCOM) 3 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>. A. Ajroud 2LM (ISITCOM) 4 Déclaration du code JavaScript 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.
A. Ajroud 2LM (ISITCOM) 5
Déclaration du code JavaScript 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()" /> A. Ajroud 2LM (ISITCOM) 6 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. A. Ajroud 2LM (ISITCOM) 7 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>
A. Ajroud 2LM (ISITCOM) 8
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)
A. Ajroud 2LM (ISITCOM) 9
Les boites de dialogues • 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!");
A. Ajroud 2LM (ISITCOM) 10
Les boites de dialogues • 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");
A. Ajroud 2LM (ISITCOM) 11
Les boites de dialogues • 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');
A. Ajroud 2LM (ISITCOM) 12
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.
A. Ajroud 2LM (ISITCOM) 13
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) A. Ajroud 2LM (ISITCOM) 14 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) ;
A. Ajroud 2LM (ISITCOM) 15
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 A. Ajroud 2LM (ISITCOM) 16 Le Document Object Model (DOM)
A. Ajroud 2LM (ISITCOM) 17
Le Document Object Model (DOM) • 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")
A. Ajroud 2LM (ISITCOM) 18
Le Document Object Model (DOM) • 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.
A. Ajroud 2LM (ISITCOM) 19
Le Document Object Model (DOM) • 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. A. Ajroud 2LM (ISITCOM) 20 Le Document Object Model (DOM) • 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 A. Ajroud 2LM (ISITCOM) 21 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 :
A. Ajroud 2LM (ISITCOM) 22
Les expressions régulières 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 Les expressions régulières 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 ... "
A. Ajroud 2LM (ISITCOM) 24 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}$