Computing">
[Go to site: main page, start]
Scribd
Importer
2 vues51 pages

Java Script

Ce document est un cours de JavaScript qui couvre les fondamentaux du développement web dynamique, y compris la syntaxe de base, la manipulation des objets et des cookies. Il aborde également l'intégration de JavaScript dans HTML, les types de données, les variables, ainsi que les fonctions prédéfinies. Le formateur, Dr Diako Jerome, présente les concepts de manière structurée pour aider les apprenants à maîtriser le langage.

Transféré par

Ibrahim Bazi
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
2 vues51 pages

Java Script

Ce document est un cours de JavaScript qui couvre les fondamentaux du développement web dynamique, y compris la syntaxe de base, la manipulation des objets et des cookies. Il aborde également l'intégration de JavaScript dans HTML, les types de données, les variables, ainsi que les fonctions prédéfinies. Le formateur, Dr Diako Jerome, présente les concepts de manière structurée pour aider les apprenants à maîtriser le langage.

Transféré par

Ibrahim Bazi
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

COURS DE JAVASCRIPT

JS Maîtrisez les fondamentaux du développement web


dynamique : de la syntaxe de base à la manipulation des
objets et des cookies.
Formateur :Dr DIAKO JEROME

// [Link]("Prêt à coder ?");


JS_CORE_01

Introduction (1)
Dynamisme Web Applications Web
JavaScript permet de rendre dynamique un site internet développé en Permet de développer de véritables applications fonctionnant
HTML, transformant des pages statiques en expériences interactives. exclusivement dans le cadre d'Internet.

Syntaxe & Structure Origines & Acteurs


Un langage de script simplifié orienté objet dont la syntaxe est basée • Netscape & Sun: Créateurs originaux.
sur celle du langage Java. • Microsoft: JScript.

ÉCOSYSTÈME INITIAL

Netscape Navigator JAVASCRIPT Microsoft JScript


Naissance Alternative

// "Le Javascript est un langage de script simplifié..."


Introduction (2) UNIVERSITÉ DE FRANCHE -COMTÉ
// JavaScript_Core_Module

Java JavaScript
Programme compilé Script interprété
Fichiers autonomes : .class ou .jar Écrit directement au sein du document HTML
Invoqué par une balise HTML spécifique Encadré par des balises HTML spéciales

Standardisation
Le langage est standardisé par le comité ECMA (European Computer Manufacturers Association).

JS JAVASCRIPT ESSENTIALS DIFFÉRENCES & STANDARDS


HTML et JavaScript UNIVERSITÉ DE FRANCHE -COMTÉ
// Structure_Integration

BALISES INDISPENSABLES

01 <script language="JavaScript">
02 // Votre code JavaScript ici

MÉTHODES D'INTÉGRATION

1. Insertion Directe 2. Module Externe

Le code s'insère directement dans la page HTML elle-même. Le code JavaScript est stocké dans un fichier séparé et appelé via une URL.

Méthode la plus simple et fréquente. URL.

Permet de modulariser et réutiliser le code.

JS SYNTAXE & INTÉGRATION SLIDE 04


1. Insertion dans une page HTML UNIVERSITÉ DE FRANCHE -COMTÉ
// JavaScript_Insertion_Directe

Exécution Directe
[Link]
Le code s'exécute automatiquement lors du chargement de
la page HTML dans le navigateur.
<html>
<head>
Emplacement Structurel <title>Exemple Direct</title>
</head>
Le script est placé dans le corps même de la page, entre les <body>
<!-- Le code s'exécute ici -->
balises :
<script language="JavaScript">
<body> ... </body> alert('bonjour');
</script>
</body>
</html>
L'affichage du contenu HTML et l'exécution du script se font
simultanément à l'écran.

JS INSERTION DIRECTE STRUCTURE & SYNTAXE


2. Insertion par module externe JS ARCHITECTURE

Localisation Format Fichier Placement HTML


Hébergé à n'importe quelle adresse (URI). Texte simple avec extension : • <head> : Différée
.js .txt • <body> : D irecte

Analyse comparative
AVANTAGES INCONVÉNIENTS

Maintenance Simplifiée Performance Réseau


Centralise le code commun à plusieurs pages. Une modification met à jour Génère une requête HTTP supplémentaire. Peut encombrer le réseau.
à jour l'ensemble du site.

JS Insertion & Modules path: server/modules/[Link]


Entrée et sortie de données COMMUNICATION UTILISATEUR

Les 3 types de boîtes de messages

alert() confirm() prompt()

Affiche une information simple. L'utilisateur doit cliquer Permet un choix binaire. Retourne true pour OK et Demande une saisie de texte. L'utilisateur tape sa
sur OK. false pour Annuler. réponse à une question.

alert('Bonjour !'); confirm('Continuer ?'); prompt('Votre nom ?');

Sortie dans le document


// SYNTAXE

La méthode [Link]() permet d'écrire du contenu


HTML directement dans la page Web. [Link]( "<h1>Bienvenue</h1>" );
UNIVERSITÉ DE FRANCHE -COMTÉ
Exemple d'entrée et sortie
Mise en pratique des interactions utilisateur

[Link] Méthodes Utilisées

<html> alert()
Affiche une boîte de message simple.
<body>

<script Bonjour
language='javascript'> prompt()
alert('bonjour'); Demande une saisie de texte à l'utilisateur.

[Link](
prompt('quel est votre nom?'
, 'Indiquer votre nom ici'
) confirm()
); Demande une validation (OK ou Annuler).
confirm('quel bouton allez-vous choisir?'
);
</script> [Link]()
</body> Écrit dynamiquement du contenu dans le document HTML.
</html>

SECTION 3: INTERACTIONS PROGRAMMATION WEB


La structure d'un script UNIVERSITÉ DE FRANCHE -COMTÉ
// Syntaxe & Règles

Modèle de base
S'appuie sur la syntaxe du Java et du C.

Espaces & Séparateurs // Commentaire sur une ligne


Espaces lib res. C haq ue co m m and e se term ine par un ;. Décimales var maVariable = 10.5;
par un .
/* Commentaire sur

plusieurs lignes */
Sensibilité à la casse alert(maVariable);
JavaScript distingue les majuscules des minuscules.
STRUCTURE TYPE

Commentaires
Note : La rigueur sur le point-virgule et la casse évite la majorité des erreurs d'exécution
// p o ur une lig ne uniq ue. initiales.
/* ... */ pour un bloc multi-lignes.

JS SYNTAXE FONDAMENTALE SLIDE 09 / 51


Les variables (1) UNIVERSITÉ DE FRANCHE -COMTÉ
// Variables_Part_1

Déclaration EXEMPLES DE SYNTAXE

Le mot-clé var p erm et d e réserver un espace m ém oire


// Déclaration multiple
p o ur d es variab les.
var i, j, k;
Plusieurs variables peuvent être déclarées simultanément.
// Affectation
Affectation i = 1;
On utilise le signe = p our d onner une valeur à la variab le. // Déclaration et affectation immédiate
var prix = 0;
Note : Une variable non déclarée est automatiquement déclarée en JavaScript.
// Tableau de caractères
var caractere = ["a", "b", "c"];

ÉTAPE 1 ÉTAPE 2
Déclarer Affecter
var x; x = 10;

JS JAVASCRIPT ESSENTIALS LES FONDAMENTAUX


Les variables (2) UNIVERSITÉ DE FRANCHE -COMTÉ
Section: Déclaration & Portée

La Portée des Variables États et Erreurs

VARIABLES GLOBALES
Non Déclarée
Déclarée en début de script.
La lecture d'une variable non déclarée provoque immédiatement
Accessible à n'importe quel endroit du programme.
une erreur d'exécution.

VARIABLES LOCALES
Undefined
Déclarée à l'intérieur d'une fonction.

Utilisable uniquement dans la fonction elle-même. Une variable correctement déclarée mais sans valeur affectée est
affectée est considérée comme undefined.

JAVASCRIPT FUNDAMENTALS VAR STATEMENT PORTÉE & CYCLE DE VIE


Les variables (3) UNIVERSITÉ DE FRANCHE -COMTÉ
// naming_conventions.js

Contraintes de nommage des identifiants

CARACTÈRES AUTORISÉS SENSIBILITÉ À LA CASSE

Un nom de variable ne peut contenir que : // Ces deux variables sont différentes
var MonPrenom;
Lettres [a-z] Chiffres [0-9] Underscore [ _ ]
var monprenom;

CARACTÈRES INTERDITS EXEMPLES PRATIQUES


Accents & Spéciaux : Interdiction des (é, à, ç, etc.)
Mon_Prenom
Espaces : Un nom ne peut pas contenir d'espaces.

Mots Réservés : Utilisation impossible des mots clés JS. Mon_Prénom

Mon Prenom

JS VARIABLES & SYNTAXE Remarque : Les noms de variables doivent être explicites et concis.
Les variables (4) UNIVERSITÉ DE FRANCHE -COMTÉ
Section: Types de Données

TYPAGE DYNAMIQUE

Le type d'une variable dépend de la valeur stockée. Pas de déclaration de type explicite.

String Number Boolean


Chaînes de caractères délimitées par des • Entiers et décimaux Valeurs logiques fondamentales pour les
guillemets simples ou doubles. • Plag e: 10⁻³⁰⁸ à 10³⁰⁸ structures de contrôle.
Valeurs spéciales:
• Infinity, -Infinity, NaN

true false

var maVariable = 'Philippe'; maVariable = 10; var isActive = true;

VARIABLES & TYPES | SLIDE 13/51 NAN = NOT A NUMBER


Valeurs spéciales UNIVERSITÉ DE FRANCHE-COMTÉ
// JavaScript_Data_Types

null undefined
L'ABSENCE INTENTIONNELLE L'ABSENCE DE DÉFINITION

Signifie l'absence de données dans une variable. C'est une valeur Une variable dont le contenu n'est pas clair car elle n'a jamais
qui peut être assignée. jamais stocké de valeur.

var monObjet = null; var maVariable;


// valeur: undefined

• Représente un "rien" connu.


• État par défaut après déclaration.
• Possède une seule valeur : null.
• Différent de null.

RÉSUMÉ Une variable déclarée sans valeur est undefined On utilise null pour vider explicitement un contenu
Les opérations sur les chaînes
M anip ulatio n et transfo rm atio n d e l'o b jet String UNIVERSITÉ DE FRANCHE -COMTÉ

1. La concaténation 2. Longueur de chaîne


Fusionner plusieurs chaînes de caractères. Propriété retournant le nombre de caractères.

var ch1 = "bonjour";


var chaine = "bonjour " + "FI3/FCD1"; var longueur = [Link];
// Résultat: "bonjour FI3/FCD1" // Résultat: 7

3. n-ième caractère 4. Extraction (substring)


Identifier un caractère à une position spécifique. Extraire une portion entre deux indices.

var ch1 = "Rebonjour !"; var dateDuJour = "04/04/03";


var carac = [Link](2); var mois = [Link](3, 5);
// Résultat: "b" (indice commence à 0) // Résultat: "04" (indice 3 inclus, 5 exclus)

Note: Les indices en JavaScript commencent toujours à 0. PROG_JS_SLIDE_15


Les fonctions prédéfinies (1) UNIVERSITÉ DE FRANCHE -COMTÉ
// Built-in_Functions_Part_1

eval()

[Link]
La fonction eval
Cette fonction permet d'exécuter un code JavaScript à // Fonction de calcul dynamique

JavaScript à partir d'une chaîne de caractères. function evaluation() {


[Link] =
eval([Link]);
Entrée Fonction Résultat }

"2 + 2" eval() 4

<!-- Exemple de formulaire -->

<input type="button"
value="Évaluer"
Usage courant : Évaluation dynamique d'expressions mathématiques
saisies par l'utilisateur. >

JS JAVASCRIPT ESSENTIALS MODULE : FONCTIONS PRÉDÉFINIES


Les fonctions prédéfinies (2) JAVASCRIPT ESSENTIALS
// Built-in Functions

isFinite() isNaN()

Détermine si le paramètre est un nombre fini. Détermine si le paramètre n'est pas un nombre.

• Retourne false si le param ètre est : • NaN sig nifie "N o t a N um b er".

• - Pas un nombre (NaN) • Utile pour valider des entrées utilisateur avant calcul.

• - L'infini positif ou négatif

isFinite(240) // retourne true isNaN("un nombre") // retourne true


isFinite("Un nombre") // retourne false isNaN(20) // retourne false

VALIDATION DE DONNÉES | TYPE CHECKING UNIVERSITÉ DE FRANCHE-COMTÉ


Les fonctions prédéfinies (3) ANALYSE & CONVERSION
// parseFloat & parseInt

parseFloat() parseInt()
Analyse une chaîne de caractères et retourne un nombre décimal. Analyse une chaîne et retourne un nombre entier selon une base
spécifiée.

Base 2 Base 8 Base 10 Base 16


Si l'argument n'est pas un nombre, la fonction renvoie NaN. (Binaire) (Octal) (Décimal) (Hexa)

var numero = "125.5"; var prix = 30.75;


var nombre = parseFloat(numero); var arrondi = parseInt(prix, 10);
// retourne 125.5 // retourne 30

Conseil : Toujours spécifier la base (radix) pour parseInt. JAVASCRIPT REFERENCE


Les fonctions prédéfinies (4) UNIVERSITÉ DE FRANCHE -COMTÉ
// Built-in_Functions_Part_IV

Number() String() Escape()


Convertit l'objet spécifié en valeur Convertit l'objet spécifié en chaîne de Retourne la valeur hexadécimale d'une
numérique. Utile pour transformer des caractères. Transforme des nombres ou d'une chaîne codée en ISO-Latin-1 pour
dates en millisecondes. dates en texte lisible. pour l'encodage URL.

var d = new Date(); var d = new Date(); var res = escape("!&");


alert(Number(d)); alert(String(d)); alert(res);
// Sortie: 1625097600000 // Sortie: "Wed Dec 17..." // Sortie: "%21%26%"

JS CONVERSION & ENCODAGE Remarque : escape() est désormais dépréciée au profit de encodeURI().
PARTIE 03

Les Objets (1) UNIVERSITÉ DE FRANCHE -COMTÉ

Origine des Objets Événements

Les objets JavaScript peuvent provenir de deux sources : Les objets JavaScript réagissent à des actions extérieures
appelées événements.
PRÉDÉFINIS UTILISATEUR
Inclus nativement dans le langage. Créés par le programmeur.

Accès aux Propriétés


Utilisation de la notation pointée :
Exemples d'Objets Navigateur
// Lecture de valeur
navigator window document link form [Link]
// Affectation
Note : Le support peut varier selon les navigateurs.
[Link] = "verte"

Le chemin doit être précis dans la hiérarchie de l'objet.

MODULE : PROGRAMMATION WEB INTRODUCTION AUX OBJETS


Les objets (2) UNIVERSITÉ DE FRANCHE -COMTÉ
// JavaScript_Objects_Module

L'opérateurNew
Types d'objets prédéfinis
Utilisé pour créer une nouvelle instance d'un type Array Boolean Date Function
d'objet prédéfini ou défini par l'utilisateur.
Image Number Object String

Exemple d'instanciation
SYNTAXE GÉNÉRALE

nouvel_objet = new // Création d'un objet String


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

JS JAVASCRIPT ESSENTIALS MODULE: OBJETS SECTION: INSTANCIATION


Les objets (3) UNIVERSITÉ DE FRANCHE -COMTÉ
// JavaScript_Objects_DeepDive

EXEMPLE DE CODE VALEUR RETOURNÉE


L'opérateurtypeof
var i = 1;
Renvoie une chaîne de caractères indiquant le type de typeof i; "number"
l'opérande fourni.
var titre = "Les raisins...";
typeof titre; "string"
// Syntaxe
var jour = new Date();
typeof opérande; typeof jour; "object"

var choix = true;


typeof choix; "boolean"
Utile pour valider les types de données avant d'effectuer des
opérations spécifiques.
typeof parseFloat;
"function"

typeof Math;
"object"

JS DÉTERMINATION DES TYPES NOTE: TYPEOF NULL RETOURNE "OBJECT" (COMPORTEMENT HISTORIQUE)
L'objet String (1) UNIVERSITÉ DE FRANCHE -COMTÉ
// Core_Objects_Module

PROPRIÉTÉ UNIQUE
length | Retourne la longueur de la chaîne de caractères.

MÉTHODES DE MANIPULATION
anchor() Formate avec la balise <A> nommée charCodeAt() Code du caractère à une position

b() Formate avec la balise <B> concat() Concatène 2 chaînes

big() Formate avec la balise <BIG> fromCharCode() Caractère associé à un code

charAt() Caractère à une position donnée indexOf() Indice d'occurrence d'un caractère

JS JAVASCRIPT REFERENCE PROPRIÉTÉS ET MÉTHODES (1/2)


L'objet String (2) UNIVERSITÉ DE FRANCHE -COMTÉ
// Methods_Part_II

FORMATAGE & LIENS RECHERCHE & EXTRACTION CONVERSION DE CASSE

italics() lastIndexOf() toLowerCase()

Formate la chaîne avec la balise HTML <i>. Trouve le dernier indice d'occurrence d'un caractère Convertit l'intégralité de la chaîne de caractères en
caractère spécifié. en minuscules.
link()
slice() / substr()
toUpperCase()
Encapsule la chaîne dans une balise <A> p o ur créer un
Retournent une portion ou une sous-section de la
lien hyp ertexte. Convertit l'intégralité de la chaîne de caractères en
la chaîne.
en majuscules.

substring()

Extrait les caractères entre deux indices donnés.

Astuce : Les méthodes de formatage (italics, link) génèrent directement du code HTML à partir de la variable String.
L'objet Array UNIVERSITÉ DE FRANCHE -COMTÉ
// JavaScript_Objects_Module

Propriété

.length
L'objet Math (1) UNIVERSITÉ DE FRANCHE -COMTÉ
[Link]

Propriétés : Les constantes mathématiques

[Link] Math.E Math.SQRT2 Math.SQRT1_2

π e √2 1/√2
Cercle (~3.14159) Euler (~2.718) Racine de 2 (~1.414) 1 / Racine de 2 (~0.707)

LOGARITHMES

Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E

ln(2) ln(10) log2(e) log10(e)


~0.693 ~2.302 ~1.442 ~0.434

Note de Syntaxe :
C es p ro p riétés so nt statiq ues. V o us n'avez p as b eso in d e créer une instance d e l'o b jet M ath p o ur les utiliser. Exem p le: [Link]([Link]);
L'objet Math (2) UNIVERSITÉ DE FRANCHE -COMTÉ
[Link]()

Méthodes de calcul et de transformation

OPÉRATIONS & TRIG GESTION DES ARRONDIS UTILITAIRES

Opérations mathématiques habituelles [Link](x)


Plus petit entier supérieur à un nombre. [Link](x, y)
abs() sqrt() exp() log() Retourne le résultat d'un nombre mis à une

sin() cos() tan() asin()


[Link](x) certaine puissance.
Plus grand entier inférieur à un nombre.
acos() atan() atan2()
[Link](x)
Arrondi à l'entier le plus proche. [Link]()
min() / max() Valeurs extrêmes Retourne un nombre aléatoire entre 0 et 1.

JAVASCRIPT REFERENCE OBJET STATIQUE MATH


L'objet Date (1) UNIVERSITÉ DE FRANCHE -COMTÉ
// Built-in Objects

Propriété : Aucune

ACCÈS LOCAL ACCÈS UNIVERSEL MODIFICATION

getFullYear() getYear() getUTCFullYear() getUTCYear() setFullYear() setYear()

getMonth() getDate() getDay() getUTCMonth() getUTCDate() setMonth() setDate() setHours()

getHours() getMinutes() getUTCHours() getUTCMinutes()

getSeconds() getMilliseconds()

Retourne les valeurs stockées selon l'heure locale du Retourne les valeurs stockées en Temps Universel (UTC). Remplace les valeurs spécifiées dans l'objet Date
du client. existant.

MANIPULATION DU TEMPS new Date() // Instance creation required


L'objet Date (2) UNIVERSITÉ DE FRANCHE -COMTÉ

Manipulation et Conversion

Modification Temps Universel Conversions

setUTCFullYear() Convertissent la date en chaîne de caractères selon


getTimezoneOffset() différentes conventions :
Remplace l'année complète dans l'objet Date en
temps universel. Retourne la différence entre l'heure du client toGMTString()
client et le temps universel (UTC).
setUTCYear() Convention GMT

Remplace l'année (2 chiffres) en temps universel. Autres méthodes UTC : toLocaleString()


universel.
• getUTCFullYear() Convention Locale

getTime() • getUTCYear() toUTCString()


• setUTCHours() ...
Retourne le temps stocké (timestamp en Temps Universel
millisecondes).

JS RÉFÉRENCE OBJETS STANDARD SLIDE 29 / 51


Les objets du navigateur (1) UNIVERSITÉ DE FRANCHE -COMTÉ
// Browser_Object_Model

HIÉRARCHIE

ACCÈS AUX ÉLÉMENTS


window
Niveau le plus haut : Fenêtre du navigateur

Via l'Identifiant (ID)


Recherche précise d'un élément unique.

[Link]("monID")

document
Contenu de la fenêtre (Page HTML)
UNIVERSITÉ DE FRANCHE -COMTÉ
Les objets du navigateur (2)
Hiérarchie et Arborescence des Objets JavaScript

WINDOW

navigator history location frames document


Plugin anchor link

MimeType
image applet

form
Text Radio Select

Button Hidden Reset

L'objet Window est la racine de toute la hiérarchie du Accès au DOM : L'objet document p erm et d e Collections : Les éléments (images, liens, formulaires)
hiérarchie du navigateur. m anip uler le co ntenu H TM L. sont accessibles via des tableaux.

JS BROWSER OBJECT MODEL (BOM) PAGE 31 / 51


L'objet window (1) Object: Window

Propriétés principales et hiérarchie

L'objet window est le som m et d e la hiérarchie d u navig ateur. Il rep résente la fenêtre elle - m êm e.

document location history


Retourne l'objet document associé à la fenêtre (contenu Retourne l'adresse (URL) actuellement visitée dans la Retourne l'historique de la session de navigation
HTML). dans la fenêtre. actuelle.

frames closed name / status


Retourne la collection de cadres (iframes) présents dans Indique par un booléen si la fenêtre a été fermée ou Indique le nom de la fenêtre ou le message dans la barre
la fenêtre. non. de statut.

JS PROPRIÉTÉS DE L'INTERFACE UNIVERSITÉ DE FRANCHE-COMTÉ — MODULE JS


L'objet window (2) UNIVERSITÉ DE FRANCHE -COMTÉ
[Link][advanced]

PROPRIÉTÉS DE NAVIGATION ET DE HIÉRARCHIE

.navigator .opener .parent

Retourne l'objet représentant le navigateur Retourne l'objet window qui a créé ou ouvert la Retourne l'objet window immédiatement
utilisé par l'internaute. fenêtre en cours. supérieur dans la hiérarchie.

.self .status .top

Retourne l'objet window correspondant à la Indique le message affiché dans la barre de Retourne l'objet window le plus haut dans la
la fenêtre actuellement en cours. status du navigateur. hiérarchie des fenêtres.

Hierarchy & Navigation PAGE 33 / 51


L'objet window (3) UNIVERSITÉ DE FRANCHE -COMTÉ
[Link]()

FOCUS & VISIBILITÉ DÉPLACEMENT

blur() Enlève le focus de la fenêtre moveBy() Déplace d'une distance relative (x, y)

focus() Place le focus sur la fenêtre moveTo() Déplace vers un point absolu

DIMENSIONNEMENT OUTILS & TEMPS

resizeBy() Redimensionne d'un certain rapport setTimeout() Évalue après un laps de temps

resizeTo() Redimensionne à des dimensions fixes print() Imprime le contenu de la fenêtre

JS BOM - BROWSER OBJECT MODEL Note: Certaines méthodes peuvent être restreintes par les navigateurs modernes.
L'objet document (1) UNIVERSITÉ DE FRANCHE -COMTÉ
DOM_Object_Model_v1

Les Propriétés Essentielles

applets cookie domain

Retourne la collection d'applets Java présentes dans le Permet de stocker et de récupérer un cookie sur le Indique le nom de domaine du serveur ayant fourni le
document. poste client. document.

forms images links

Retourne la collection de tous les formulaires présents Retourne la collection de toutes les images présentes Retourne la collection de tous les liens hypertexte du
présents dans la page. dans le document. document.

NOTE
Ces propriétés permettent d'accéder aux collections d'objets spécifiques sans utiliser getElementById().

JS JAVASCRIPT OBJECTS Structure & Hiérarchie


L'objet document (2) PAGE 36 / 51
DOM_Interface_Level_1

PROPRIÉTÉS MÉTHODES DE FLUX (I/O)

referrer write() writeln()


Écrit une chaîne de caractères dans le flux du document. Identique à write(), mais ajoute un retour à la ligne à la
Indique l'adresse URI de la page précédente (celle qui a mené document. fin.
l'utilisateur au document actuel).
[Link]("Hello!"); [Link]("Ligne");

title
open() close()
Indique le titre du document (le contenu de la balise <title>). Ouvre le document en mode écriture. Efface le contenu Ferme le flux d'écriture et force l'affichage des données
existant si le document était déjà chargé. envoyées au document.

PRO-TIP JS
Utilisez write() avec p récautio n ap rès le charg em ent co m p let d e la p ag e. JAVASCRIPT UNIVERSITY
L'objet navigator UNIVERSITÉ DE FRANCHE -COMTÉ
// Browser_Object_Model

Identification et capacités du navigateur client

[Link]

IDENTITÉ ENVIRONNEMENT CAPACITÉS

.appName .platform .plugins


Ex: Netscape, Internet Explorer Système d'exploitation (ex: Win32) Collection des plugins installés

.appVersion .language .mimeTypes


Numéro de version complet Code langue (ex: fr, en-US) Types de fichiers supportés

Méthode de vérification [Link]()


Vérifie si l'environnement Java est activé sur le client.

OBJETS DE NAVIGATION JAVASCRIPT ESSENTIALS // MODULE 5


Les événements (1) UNIVERSITÉ DE FRANCHE -COMTÉ
// interaction_model.js

LE CONCEPT DE PROGRAMMATION ÉVÉNEMENTIELLE

ACTION UTILISATEUR
Clic, survol, chargement... ÉVÉNEMENT DÉCLENCHÉ EXÉCUTION SCRIPT
Objet HTML (Button, Img...) Fonctions associées

Principes Fondamentaux Exemples Clés


JavaScript est intrinsèquement dépendant des événements.
onLoad onClick
Les événements surviennent lors d'actions sur les objets d'un document Chargement de la page/image Clic sur un élément

HTML.

L'exécution de fonctions spécifiques peut être liée à ces moments précis. onMouseover onMouseout
Survol par le curseur Sortie de la zone

JS INTERACTIVITÉ & DYNAMISME CHAPITRE : MODÈLE ÉVÉNEMENTIEL


Les événements (2) UNIVERSITÉ DE FRANCHE -COMTÉ
// Event_Handling_Module

L'événementonLoad EXEMPLE D'IMPLÉMENTATION

Se produit lorsque une page web est entièrement chargée. // Dans la balise body
<html>
<body chargée');">
Comprend le chargement de tous les éléments, y compris Exemple de l'événement onLoad
images et ressources externes. </body>
</html>
Peut être associé à une image individuelle.

Note Importante :
1 2 3
L'événement se déclenche lorsque le DOM est prêt ET que toutes les ressources
REQUÊTE CHARGEMENT ONLOAD ont fini de télécharger.

JS GESTION DES ÉVÉNEMENTS PAGE 39 SUR 51


Les événements (3) UNIVERSITÉ DE FRANCHE -COMTÉ
// JavaScript_Events_Interaction

onClick

Déclenchement Exemple de Syntaxe

Se produit lorsque l’utilisateur clique sur un élément spécifique de <input type="Button"


la page. value="cliquer ici"
>

Cibles Spécifiques
Lien hypertexte, image, bouton, texte. Chaque élément peut répondre
séparément.
Éléments Réceptifs

Button Anchor Image Text

Portée Globale
Peut être associé à l'élément <body> p o ur d étecter un clic n'im p o rte o ù
sur la pag e.

JS GESTION DES ÉVÉNEMENTS


Les événements (4) UNIVERSITÉ DE FRANCHE -COMTÉ
// Interaction_Souris

onMouseover onMouseout
Déclenché lorsque le pointeur de souris passe sur un élément. Se produit lorsque le pointeur quitte la zone d'un élément.

• Liens hypertextes Inverse de onMouseover.


• Images & Boutons

Exemple d'implémentation

<HTML><body>
<IMG src="[Link]"
> >
</BODY></HTML>

GESTION DES ÉVÉNEMENTS DE SURVOL JAVASCRIPT CORE // PAGE 41


Nommage des objets-éléments UNIVERSITÉ DE FRANCHE -COMTÉ
// JavaScript_DOM_Objects

EXEMPLES DE SYNTAXE HTML


La Règle d'Identification
Pour manipuler un objet via JavaScript, celui-ci doit < Table Name="tableau1">
doit posséder un Nom unique.
< Form Name="formulaire1">

< Textarea Name="texte1">

L'attribut NAME
Cet attribut permet de distinguer les différents objets-
éléments (formulaires, tableaux, zones de texte) au sein Exception : Objets Uniques
Aucun nom n'est nécessaire pour les objets intrinsèquement uniques dans le document
d'une page web.
document : BODY, DOCUMENT.

JS MANIPULATION DES OBJETS STRUCTURE & ARBORESCENCE


Manipulation des objets UNIVERSITÉ DE FRANCHE -COMTÉ
DOM_HIERARCHY_TRAVERSAL

// EXEMPLE D'ACCÈS COMPLET


Règles d'adressage
[Link] = 'Bonjour';
Préciser le chemin d'accès complet.

window est utilisé par défaut si nommé omis.

Omission de [Link] p ossib le.


Les Cookies (1) UNIVERSITÉ DE FRANCHE -COMTÉ
// Module_Data_Persistence

Qu'est-ce qu'un "Cookie" ?


C'est une chaîne de caractères qu'une page HTML peut écrire à un emplacement UNIQUE sur le disque dur du client.

Sécurité : Lecture autorisée uniquement par le serveur.

?Que faire avec un cookie ?

Transmission de données Personnalisation


Passer des valeurs d'une page à une autre sans serveur. Adapter l'affichage en fonction des préférences.
Ex: Gestion d'un caddie. Ex: Nom de l'utilisateur.

JS CLIENT-SIDE STORAGE STOCKAGE DISQUE LOCAL


Les Cookies (2) JS
LIMITATIONS & STOCKAGE

PAR SERVEUR / DOMAINE TAILLE MAXIMALE TOTAL POSTE CLIENT

20 Cookies 4 Ko / Cookie 300 Cookies

CAPACITÉ DE STOCKAGE (VOLUME) Emplacement Netscape

/user_profile/[Link]

Emplacement MS Internet Explorer

• C:\WINDOWS\Cookies

• C:\WINDOWS\TEMP\Cookies

COURS JAVASCRIPT // COOKIES UNIVERSITÉ DE FRANCHE -COMTÉ


Les Cookies (3) UNIVERSITÉ DE FRANCHE -COMTÉ
// Cookie_Structure_Protocol

Structure Complète d'un Cookie

Nom=Contenu; expires=expdate; path=Chemin; domain=NomDeDomaine; secure

En-tête du Cookie Séparateurs Exemple Pratique

Composé de deux variables essentielles Chaque paire attribut-valeur est délimitée par
var mon_cookie = "oui:visite";
suivies d'un point-virgule. délimitée par un caractère spécifique.

• Nom : L'identifiant du cookie. Représente les données binaires ou textuelles transmises au

• Contenu : La valeur stockée. ; POINT-VIRGULE navigateur.


Les Cookies (4) UNIVERSITÉ DE FRANCHE -COMTÉ
page_47 // cookie_attributes

PARAMÈTRE D'EXPIRATION

expires=expdate; Format Standard GMT


Définit la date à laquelle le cookie sera supprimé du client.
Wdy, DD-Mon-YYYY HH:MM:SS GMT
JOUR DATE MOIS ANNÉE HEURE

Règle Générale
Indiquer un délai en nombre de jours ou d'années avant Notes Techniques
disparition. expires suivi du "=" sans espaces.

Sans ce paramètre, le cookie est une "session" et disparaît à la fermeture du navigateur.

Méthode recommandée
Utiliser les fonctions natives de l'objet Date.

GESTION DES DONNÉES PERSISTANTES MODULE : PROGRAMMATION CLIENT -SIDE


Les Cookies (5) UNIVERSITÉ DE FRANCHE -COMTÉ
// cookie_attributes_config

Attributs de portée et de sécurité

path domain secure

Définit le chemin d'accès du cookie sur le Représente le nom de domaine associé au Spécifie que le cookie est envoyé
serveur. cookie. uniquement via HTTPS.

path=/repertoire; domain=[Link]; secure=true/false;

PATH / DOMAIN SECURE


VALEURS PAR DÉFAUT
Récupérés de la page courante False (par défaut)

JS GESTION DES COOKIES SECTION 48 / 51


Les Cookies (6) UNIVERSITÉ DE FRANCHE -COMTÉ
// document.cookie_API

EXEMPLE PRATIQUE
Écrire un cookie
Un cookie est une propriété de l'objet document. Pour var Nom = "MonCookie";
l'enreg istrer sur le d isq ue d ur d u client, on utilise var Contenu = "Hé... Vous avez un cookie !";
l'instruction d 'écriture suivante : var expdate = new Date();

// Ajout de 10 jours (10j * 24h * 60m * 60s * 1000ms)


[Link]([Link]() + (10 * 24 * 60 * 60 *
SYNTAXE GÉNÉRALE
1000));
[Link] = N o m + "= " + C o ntenu
exp ires= " + exp d [Link] G M TS tring (); // Écriture finale
[Link] = Nom + "=" + Contenu + "; expires=" +
[Link]();

Note : La date d'expiration doit être convertie au format GMT pour


être valide dans l'en-tête du cookie.

JS PERSISTANCE DES DONNÉES STOCKAGE CÔTÉ CLIENT


Les Cookies (7) UNIVERSITÉ DE FRANCHE -COMTÉ
// Lecture & Modification

Lecture d'un cookie Modification d'un cookie

Pour accéder aux cookies, on utilise la propriété [Link] d e Il suffit de modifier la variable Contenu p uis d e réécrire le cookie sur le
[Link] de l'objet document. disque.

var LesCookies; // pour voir les cookies Contenu = "Le cookie a été modifié...";
LesCookies = [Link]; [Link] = Nom + "=" + Contenu +
// On stocke la chaîne dans une variable "; expires=" + [Link]();

Note : Cette propriété retourne tous les cookies sous forme d'une seule chaîne de ÉTAPE 1 ÉTAPE 2 ÉTAPE 3

caractères. Modifier Réécrire Mise à jour

JS JAVASCRIPT ADVANCED GESTION DE LA PERSISTANCE LOCALE


Les Cookies (8) UNIVERSITÉ DE FRANCHE -COMTÉ
// Final_Module_Summary

IMPLÉMENTATION JAVASCRIPT

SUPPRESSION
// 1. Définir une date passée
Pour supprimer un cookie, il n'existe pas de commande
[Link]([Link]() - (1000));
delete.

// 2. Écrire le cookie avec cette date


[Link] = Nom + "=" + Contenu + "; expires=" +
[Link]();
LA MÉTHODE
Il suffit de positionner la date de péremption à une
valeur inférieure à celle du moment actuel. 1 2

CALCUL DATE MISE À JOUR SUPPRIMÉ

Une soustraction d'une seule seconde (1000ms) suffit pour invalider le


cookie immédiatement.

JS JAVASCRIPT ESSENTIALS - FIN DU COURS GESTION DES COOKIES : CONCLUSION

Vous aimerez peut-être aussi