étude

Notes de programmation Web

Programmation Web (Université de Bangalore)

Studocu n'est ni sponsorisé ni approuvé par aucun collège ou

universitéTéléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

UNITÉ 1

LES FONDAMENTAUX DU WEB, XHTML - 1

Origines : années 1960

• NOUS. Le ministère de la Défense (DoD) s'est intéressé au développement d'un nouveau

réseau informatique à grande échelle
• Les objectifs de ce réseau étaient les communications, le partage de programmes et
l’accès à distance aux ordinateurs pour les chercheurs travaillant sur des contrats liés à la
défense.
• L'Agence des projets de recherche avancée du DoD (ARPA) a financé la construction du
premier réseau de ce type, d'où son nom ARPAnet.
• L'utilisation principale et précoce d'ARPAnet était la communication textuelle simple par
courrier électronique.

fin des années 1970 et début des années 1980

• B1TNET, qui est l'acronyme de Because It's Time NETwork, a débuté à la City
University de New York
• Il a été construit initialement pour fournir du courrier électronique et des transferts de
fichiers.
• CSNET est un acronyme pour ComputerScience NETwork. Son objectif initial était de
fournir du courrier électronique.

Années 1990

• NSFnet, créé en 1986, a remplacé ARPAnet en 1990.

• Il a été sponsorisé par la National Science Foundation (NSF).
• En 1992, NSFnet connectait plus d'un million d'ordinateurs dans le monde.
• En 1995, une petite partie du NSFnet est redevenue un réseau de recherche

Ces noms commencent par les noms de la machine hôte, suivis d'un ensemble de machines de
plus en plus grand, appelé domaines.

• Il peut y avoir deux, trois ou plusieurs noms de domaine.

• Le DNS est de la forme |nom d'hô[Link] de [Link] de domaine|. Exemple :
[Link]

1 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Les étapes de la conversion de DNS en IP :

• Le DNS doit être converti en adresse IP avant que la destination ne soit atteinte.
• Cette conversion est nécessaire car l’ordinateur ne comprend que les nombres.
• La conversion est effectuée à l'aide du serveur de noms.
• Dès que le nom de domaine est fourni, il sera envoyé sur Internet pour contacter les
serveurs de noms.
• Ce serveur de noms est responsable de la conversion du nom de domaine en IP
• Si l’un des serveurs de noms n’est pas en mesure de convertir DNS en IP, il contacte
un autre serveur de noms.
• Ce processus se poursuit jusqu’à ce que l’adresse IP soit générée.
• Une fois l’adresse IP générée, l’hôte est accessible.
• Le nom d'hôte et tous les noms de domaine forment ce que l'on appelle FULLY
QUALIFIED
NOM DE DOMAINE.

Ceci est illustré ci-dessous :

• On les appelle navigateurs car ils permettent à l'utilisateur de parcourir les ressources disponibles sur
les serveurs.
• Mosaic a été le premier navigateur doté d'une interface utilisateur graphique.
• Un navigateur est un client sur le Web car il initie la communication avec un serveur, qui attend une
requête du client avant de faire quoi que ce soit.
• Dans le cas le plus simple, un navigateur demande un document statique à un serveur.

2 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

• Le serveur localise le document parmi ses documents exploitables et l'envoie au navigateur,

qui
• l'affiche pour l'utilisateur.
• Parfois, un navigateur demande directement l’exécution d’un programme stocké sur le
serveur. La sortie du programme est ensuite renvoyée au navigateur.
• Exemples : Internet Explorer, Mozilla Firefox, Netscape Navigator, Google Chrome.
Opéra etc.,

SERVEURS WEB

Les serveurs Web sont des programmes qui fournissent des documents aux navigateurs
demandeurs. Exemple : Apache

Opérations du serveur Web :

• Toutes les communications entre un client Web et un serveur Web utilisent le protocole
HTTP
• Lorsqu'un serveur Web commence son exécution, il informe le système d'exploitation sous
lequel il s'exécute et il s'exécute en tant que processus d'arrière-plan.
• Un client Web ou un navigateur ouvre une connexion réseau à un serveur Web, envoie des
demandes d'informations et éventuellement des données au serveur, reçoit des
informations du serveur et ferme la connexion.

• La tâche principale du serveur Web est de surveiller un port de communication sur la

machine hôte, d'accepter les commandes HTTP via ce port et d'effectuer les opérations
spécifiées par les commandes.
• Lorsque l'URL est reçue, elle est traduite soit en un nom de fichier, soit en un nom de
programme.

Caractéristiques générales du serveur Web :

• Ce programme permet au gestionnaire du site de définir les paramètres du serveur.

• Sous Windows XP et Vista, le composant logiciel enfichable IIS est accessible en allant dans
Panneau de configuration, Outils d’administration et IISAdmin.

3 | Page VSISCM
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique
Ce document est disponible gratuitement sur C
studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

LOCALISATEURS DE RESSOURCES UNIFORMES

• Les localisateurs de ressources uniformes (URL) sont utilisés pour identifier différents
types de ressources sur Internet
• Si le navigateur Web souhaite obtenir un document du serveur Web, il ne suffit pas de
fournir le nom de domaine, car le nom de domaine ne peut être utilisé que pour localiser
le serveur.
• Il ne contient aucune information sur le document dont le client a besoin. Par conséquent,
l'URL doit être fournie.
• Le format général de l'URL est : {scheme: object-address}
• Exemple : [Link]
• Le schéma indique les protocoles utilisés (http, ftp, telnet...)
• Dans le cas de http, la forme complète de l'adresse d'objet d'une URL est la suivante :
• //nom-de-domaine-complet/chemin-vers-le-document
• Les URL ne peuvent jamais contenir d'espaces intégrés
• Il ne peut pas utiliser de caractères spéciaux tels que les points-virgules, les esperluettes et
les deux points. Le chemin d'accès au document pour le protocole http est une séquence
de noms de répertoire et un nom de fichier, tous séparés par le caractère spécial utilisé par
le système d'exploitation (barres obliques avant ou arrière).

• Le chemin d'accès dans une URL peut différer d'un chemin d'accès à un fichier car une
URL n'a pas besoin d'inclure tous les répertoires du chemin
• Un chemin qui inclut tous les répertoires le long du chemin est appelé un chemin complet.
• Dans la plupart des cas, le chemin d'accès au document est relatif à un chemin de base
spécifié dans le

Fichiers de configuration du serveur. De tels chemins sont appelés chemins partiels.

• Exemple : [Link]
1. Méthode HTTP Partie domaine de l'URL Version HTTP
2. Champs d'en-tête
3. Ligne vide
4. Corps du message

• Voici un exemple de la première ligne d’une requête HTTP :

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

4 | Page VSISCM
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

• OBTENIR /[Link] HTTP/1.1

Le format d'un champ d'en-tête est le nom du champ suivi de deux points et de la valeur du
champ. Il existe quatre catégories de champs d'en-tête :

1. Général : Pour des informations générales, telles que la date

2. Requête : incluse dans les en-têtes de la requête

3. Réponse- . Pour les en-têtes de réponse

4. Entité : utilisée dans les en-têtes de demande et de réponse

Un caractère générique, l'astérisque (*), peut être utilisé pour spécifier qu'une partie d'un type MIME
peut être n'importe quoi.

SÉCURITÉ

La sécurité est l'une des principales préoccupations sur Internet. Le système serveur est
facilement accessible avec un support matériel de base, une connexion Internet et un navigateur
Web.

Le client peut récupérer des informations très importantes depuis le serveur. De même, le
système serveur peut introduire un virus sur le système client. Ces virus peuvent détruire le
matériel et les logiciels du client. Lors de la programmation du Web, les exigences suivantes
doivent être prises en compte :

5 | Page VSISCM
Ce document est disponible gratuitement sur C
studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• Confidentialité : cela signifie que le message doit être lisible uniquement par les parties
communicantes et non par un intrus.
• Intégrité : cela signifie que le message ne doit pas être modifié pendant la transmission.
• Authentification : cela signifie que les parties communicantes doivent pouvoir connaître
l'identité de l'autre
• Non-répudiation : cela signifie qu'il devrait être possible de prouver que le message a été
envoyé et reçu correctement.

La sécurité peut être assurée à l'aide d'un algorithme cryptographique. Ex : clé privée. La
protection contre les virus et les vers est assurée par un logiciel antivirus, qui doit être mis à
jour fréquemment afin de pouvoir détecter et protéger contre le flux continu de nouveaux
virus et vers.

LA BOÎTE À OUTILS DU PROGRAMMEUR WEB

• Les programmeurs Web utilisent plusieurs langages pour créer les documents que les serveurs
peuvent fournir aux navigateurs.
• Le plus basique d’entre eux est XHTML, le langage de balisage standard permettant de décrire
la manière dont les documents Web doivent être présentés par les navigateurs. Des outils
pouvant être utilisés sans connaissance spécifique du XHTML sont disponibles pour créer des
documents XHTML.

• Un plug-in est un programme qui peut être intégré à un traitement de texte pour permettre
d'utiliser le traitement de texte pour créer du XHTML. Un filtre convertit un document écrit
dans un autre format en XHTML.

• XML est un langage de méta-balisage qui fournit un moyen standard de définir de nouveaux
langages de balisage.

ORIGINES ET ÉVOLUTION DU HTML ET DU XHTML

1. HTML -> Langage de balisage hypertexte
2. XHTML -> langage de balisage hypertexte extensible

6. | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

HTML XHTML
Le HTML est beaucoup plus facile à écrire XHTML nécessite un niveau de discipline
auquel beaucoup d’entre nous résistent
naturellement
Un grand nombre de documents HTML sont certains navigateurs plus anciens ont des
disponibles sur le Web et les navigateurs problèmes avec certaines parties du
continueront à prendre en charge le HTML XHTML.
aussi loin que l'on puisse voir dans le futur.
Le HTML comporte peu de règles XHTML a des règles syntaxiques strictes qui
syntaxiques et les processeurs HTML (par imposent une structure cohérente à tous les
exemple, les navigateurs) n'appliquent pas documents XHTML. Une autre raison
les règles qu'il comporte. Par conséquent, les importante d'utiliser XHTML est que
auteurs HTML disposent d’un degré élevé de lorsque vous créez un document XHTML,
liberté pour utiliser leurs propres son exactitude syntaxique peut être vérifiée,
préférences syntaxiques pour créer des soit par un navigateur XML, soit par un outil
documents. En raison de cette liberté, les de validation.
documents
Utilisé pourHTML
affichermanquent de cohérence, à Utilisé pour décrire les données
les données

SYNTAXE DE BASE
O Les unités syntaxiques fondamentales du HTML sont appelées balises.
O En général, les balises sont utilisées pour spécifier des catégories de contenu
O La syntaxe d'une balise est le nom de la balise entouré de crochets angulaires (< et >).
• Les noms des balises doivent être écrits en minuscules.
• La plupart des balises apparaissent par paires : une balise d'ouverture et une balise de
fermeture.

Structure de document XHTML standard

• Chaque document XHTML doit commencer par un élément de déclaration XML qui
identifie simplement le document comme étant basé sur XML. Cet élément inclut un
attribut qui spécifie le numéro de version 1.0.

• La déclaration XML inclut généralement un deuxième attribut, encoding, qui spécifie

l'encodage utilisé pour le document [utf-8].

7 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• Voici l'élément de déclaration XML, qui devrait être la première ligne de chaque
document XHTML :

<?xml version = "1.0" encoding = "utf-8"?>

•Notez que cette déclaration doit commencer à la première position de caractère du fichier
de document.
• L'élément de déclaration xml est immédiatement suivi d'une commande SGML DOCTYPE,
qui spécifie, entre autres, la définition de type de document SGML (DTD) particulière à
laquelle le document est conforme.

• La commande suivante indique que le document dans lequel elle est incluse est conforme à
la norme XHTML 1.0

Norme stricte :

<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="[Link]

• Un document XHTML doit inclure les quatre balises<html> ,<head> ,<title> , et <corps>
• Le<html> La balise identifie l'élément racine du document. Ainsi, les documents XHTML
ont toujours un<html> balise suivant immédiatement la commande DOCTYPE, et elles se
terminent toujours par la balise HTML de fermeture,</html> .

• L'élément html inclut un attribut, xmlns, qui spécifie l'espace de noms XHTML, comme
indiqué dans l'élément suivant :

<html xmlns = "[Link]

• Bien que la valeur de l'attribut xmlns ressemble à une URL, elle ne spécifie pas de document.
Il s’agit simplement d’un nom qui se présente sous la forme d’une URL.
• Un document XHTML se compose de deux parties, appelées l'en-tête et le corps.

Mes chers amis de V TU, tout mon meilleur..!! Bonne lecture de mes notes..!!

8 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

ATTENTION : A partir de maintenant, la programmation en XHTML va commencer.

Veuillez ajouter la structure de document obligatoire suivante à tous les programmes dans les
4 premières lignes et ignorer le simple<html> balise de première ligne car j'ai commencé
directement la partie codage.
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
<html xmlns = "[Link]

Paragraphes:

Cela commence par<p> et se termine par</p>

Plusieurs paragraphes peuvent apparaître dans un seul document.

<html>
<head>
<title>Paragraphe</title>
</head>
<body>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
</body>
</html>

Préserver l'espace blanc

9 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Il est parfois souhaitable de conserver les espaces blancs dans le texte, c'est-à-dire
d'empêcher le navigateur d'éliminer plusieurs espaces et d'ignorer les sauts de ligne
intégrés. Cela peut être spécifié avec le<pre> étiqueter.

<html> <head>
<title>Pré-balise</title>
</head>
<body>
<pre>Je m'appelle DIVYA KI, je viens du département ISE RNSIT, Bangalore
</pre>
</p>
</body>
</html>

Titre I
Titre 2
Titre 3

Titre 4

Titre 5

Il adimg 6

Citations en bloc :

Le<blockquote> la balise est utilisée pour rendre le contenu différent du texte environnant

10 | Page VSISCM
<html>

<head><title>Citations en bloc</title>

</head>

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

<body>

<p>Swami Vivekananda dit</p>

<blockquote>

<p>"Surgir..

•! Éveillé..!!"</p>

</blockquote>

<p>Il est mon modèle</p>

<b>C'est audacieux</b>

<i>Ceci est en italique</i>

<u>C'est souligné</u>

<em>C'est l'emphase</em>

<strong>C'est fort</strong>

<code> Total = Internals + Externals //this is code</code>

</pre>

</p>

<p><pre>

Illustration des tailles de police (indices et exposants)

x ₂ ³ + y _l ²

</pre></p>

</body>

11 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

</html>

Règles
horizontales :
• Les parties d'un document peuvent être séparées les unes des autres, rendant le document
plus facile à lire, en plaçant des lignes horizontales entre elles. De telles lignes sont appelées
règles horizontales. La balise de bloc qui les crée est<hr/> .

• Le<hr /> tag provoque un saut de ligne (mettant fin à la ligne actuelle) et place une ligne
sur l'écran.
• Notez à nouveau la barre oblique dans le<hr /> balise, indiquant que cette balise n'a pas de
contenu et pas de balise de fermeture.

<html>

<head>

<title>Règle horizontale</title>

</head>

12 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique
<body>

<p>RNSIT a été créé en 2001<hr/>

Elle a été fondée par notre président, le Dr RN Shetty<hr/>

Le Dr HN Shivshsnkar est notre directeur<hr/>

</p>

</html>

IMAGES

• L'image peut être affichée sur la page Web à l'aide de<img> étiqueter.
• Lorsque le<img> Si la balise est utilisée, il convient également de mentionner quelle
image doit être affichée. Cela se fait en utilisant l'attribut src.
• L'attribut signifie des informations supplémentaires fournies au navigateur
• Chaque fois que<img> la balise est utilisée, l'attribut alt est également utilisé. Alt
signifie alerte.
• Certains navigateurs très anciens n'auraient pas la capacité d'afficher les images.

Dans ce cas, quel que soit le message donné à l'attribut alt, celui-ci sera affiché.

• Une autre utilisation d'alt est -> lorsque l'option d'affichage de l'image a été désactivée
par l'utilisateur. L'option est normalement désactivée lorsque la taille de l'image est
énorme et que le téléchargement prend du temps.

<html>

<head>

<title>afficher l'image</title>

13 | Page VSISCM
Ce document est disponible gratuitement sur C
studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

</head>

<body>

<img src="[Link]" alt="ne peut pas afficher"/>

</body>

</html>

LIENS HYPERTEXTES

Links:

■ Les hyperliens sont le mécanisme qui permet la navigation d'une page à une autre.

■ Le terme « hyper » signifie au-delà et « lien » signifie connexion

■ Tout texte qui aide à la navigation est appelé hypertexte.

Les hyperliens peuvent être créés à l'aide de <a>(balise d'ancrage)</a>

■ L'attribut qui doit être utilisé <a>est href</a>

Programme : hyperJitml___________________
« htmi >
<head-
lien hypertexte etitle c/title>
</head>
<a href = " [Link] ">CLIQUEZ ICI</a>
</htmi>|
Programme- lienJitml
chtmb
cbody Ceci est de la programmation Web c/body c/htmb

Listes ordonnées :

14 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

1. Les listes ordonnées sont des listes dans lesquelles l’ordre des éléments est important. Cet
ordre d'une liste est montré dans l'affichage de la liste par l'attachement implicite d'une
valeur séquentielle au début de chaque élément. Les valeurs séquentielles par défaut sont
des chiffres arabes, commençant par 1.
2. Une liste ordonnée est créée dans la balise de bloc<ol> . Les éléments sont spécifiés et
affichés comme ceux des listes non ordonnées, sauf que les éléments d'une liste ordonnée
sont précédés de valeurs séquentielles au lieu de puces.

Listes de définitions :
Comme son nom l'indique, les listes de définitions sont utilisées pour spécifier des listes de
termes et leurs définitions, comme dans les glossaires. UN
la liste de définitions est donnée comme le contenu d'un<dl> tag, qui est une balise de bloc.
Chaque terme à définir dans la définition
la liste est donnée comme contenu d'un<dt> étiqueter. Les définitions elles-mêmes sont
spécifiées comme le contenu de<dd> balises.
Les termes définis d'une liste de définitions sont généralement affichés dans la marge de gauche ;
les définitions sont généralement indiquées
en retrait sur la ou les lignes suivant le terme.

15 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

<html>
<head>
<title>Liste de définitions</title>
</head>
<body>
<hl>Héros du cinéma sud-indien</hl>
<dl>
<dt>Puneeth Rajkumar</dt>
<dd>Meilleur film de l'industrie cinématographique kannada*/dd>
<dt>Mahesh Babu</dt>
<dd>Les meilleurs de l'industrie cinématographique en télougou*/dd>
<dt>Suriya</dt>

<dd>Le meilleur de l'industrie cinématographique tamoule</dd>

</dl>
</body>
</html>

Les attributs align et valign :

Le placement du contenu dans une cellule de tableau peut être spécifié avec les attributs align et
valign dans le<tr> ,
<th>, et<td> balises.
L'attribut align a les valeurs possibles left, right et center, avec les significations évidentes pour
le placement horizontal du contenu dans une cellule. L'alignement par défaut pour les cellules th
est centré ; pour les cellules td, il est à gauche. L'attribut valign de la<th> et<td> tags a les
valeurs possibles top et bottom. L'alignement vertical par défaut pour les titres et les données est
centré.

<html>
<head>
<title>Aligner et valider</title>

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

16. | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique
</head>
<body>
<p>Tableau contenant des entrées avec des alignements différents</p>
<table border="border">
<tr align = "center">
<th> </th>
<th>Puneeth Rajkumar</th>
<th>Darshan Thoogudeep</th>
<th>Kichcha Sudeep</th>
</tr>
<tr>
<th>Ramya</th>
<td align = "left">Akaash</td>
<td align = "center">Données</td>
<td align = "right">Rang</td>
</tr>
<tr>
<th><br/>Rakshitha<br/><br/><br/></th>
<td>Appui</td>
<td valign = "top">Kalasipalya</td>
<td valign = ”bottomH>Kaashi du village</td>
</tr>
</table>
</body>
</html>

17 | Page VSISCM
Ce document est disponible gratuitement sur C
studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Les attributs cellpadding et cellspacing :

• L'espacement des cellules est la distance entre les cellules.
• Le cellpadding est la distance entre les bords de la cellule et son contenu.

<html>
<head>
<title>espacement et remplissage des cellules</title>
</head>
<body>
<h3>Tableau avec espace = 10, pad = 50</h3>
<table border = "7" cellspacing = "10" cellpadding = "50">
<tr>
<td>Divya</td>
<td>Chethan</td>
</tr>
</table>
<h3>Tableau avec espace = 50, pad = 10</h3>
<table border = "7" cellspacing = "50“ cellpadding = "10">
<tr>
<td>Divya</td>
<td>Chethan</td>
</tr>
</table></body></html>

18 | Page VSISCM
UNITÉ 2

HTML et XHTML

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

FORMULAIRES
Le moyen le plus courant pour un utilisateur de communiquer des informations d'un navigateur Web au
serveur est via un
formulaire. XHTML fournit des balises pour générer les objets couramment utilisés sur un formulaire à
l'écran. Ces objets sont appelés
contrôles ou widgets. Il existe des contrôles pour la collecte de texte sur une ou plusieurs lignes, des
cases à cocher, des cases radio
boutons et menus, entre autres. Toutes les balises de contrôle sont des balises en ligne.

Le<form> Étiqueter:
1. Tous les contrôles d'un formulaire apparaissent dans le contenu d'un<form> étiqueter.
2. Une balise de bloc,<form> , peut avoir plusieurs attributs différents, dont un seul, l'action, est
requis.
3. L'attribut action spécifie l'URL de l'application sur le serveur Web qui doit être appelée lorsque
l'utilisateur clique sur le bouton Soumettre.
4. Nos exemples d'éléments de formulaire n'auront pas de programmes d'application correspondants,
donc la valeur de leurs attributs d'action sera la chaîne vide ("").

Le<input> Étiqueter:
La plupart des contrôles couramment utilisés sont spécifiés avec la balise inline<input> , y compris
ceux pour le texte, les mots de passe, les cases à cocher, les boutons radio et les boutons d'action
Réinitialiser Soumettre et Simple.

✓ Zone de texte

✓ C'est un type d'entrée qui prend le texte.

✓ Tout type d'entrée peut être créé à l'aide<input>

J L'attribut type indique quel type d'entrée est nécessaire pour la zone de texte, la valeur doit être
donnée sous forme de texte

19 | Page VSISCM

Ce document est disponible gratuitement sur • studocu

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

✓ Pour tout type d'entrée, un nom doit être fourni, ce qui est fait à l'aide de l'attribut name.

La taille du texte peut être contrôlée à l'aide de l'attribut size.

✓ Chaque navigateur a une limite sur le nombre de caractères qu'il peut collecter. Si cette limite est
dépassée, les caractères supplémentaires sont supprimés. Pour éviter ce hachage, l'attribut maxlength
peut être utilisé. Lorsque maxlength est utilisé, les utilisateurs ne peuvent saisir que le nombre de
caractères donné comme valeur à l'attribut.

Sections du tableau :
1. Les tableaux se présentent naturellement en deux et parfois trois parties : en-tête, corps et pied
de page. (Tous les tableaux n'ont pas de pied de page naturel.)
2. Ces trois parties peuvent être respectivement désignées en XHTML par les éléments thead,
tbody et tfoot. L'en-tête inclut les étiquettes des colonnes, quel que soit le nombre de niveaux
dans ces étiquettes. Le corps comprend les données du tableau, y compris les étiquettes des
lignes.
3. Le pied de page, lorsqu'il apparaît, a parfois les étiquettes des colonnes répétées après le corps.
Dans certains tableaux, le pied de page contient les totaux des colonnes de données ci-dessus.
4. Un tableau peut avoir plusieurs sections de corps, auquel cas le navigateur peut les délimiter
avec des lignes horizontales plus épaisses que les lignes de règle dans une section de corps.

20 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Le<select> Étiqueter:
• Les éléments de menu sont un autre type d’entrée qui peut être créé sur la page.
• Pour créer l'élément de menu,<select> la balise est utilisée.
• Pour insérer l'élément dans le menu,<option> la balise est utilisée.

<html>
<head><title>Menu</title>
</head>
<body>
<p>
Filières RNSIT - Sciences de l'information, Informatique, Électronique, Électricité, Mécanique
</p>
<form action = "">
<p>
<label><input type="checkbox" name='act" value="three"/>Aindritha</label>
<label><input type="checkbox" name="act" value="four"/>Radhika</label>
<label><input type=”checkbox" name="act" value="four"/>Rakshitha</label>
</p>
</form></body></html>

Le<textarea> Étiqueter:
• La zone de texte est un type d'entrée à l'aide duquel plusieurs instructions peuvent être saisies.
• La zone de texte est créée à l'aide de<textarea> étiqueter.
• La zone de texte doit avoir le nom.

21 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• Lors de la création de la zone de texte, il convient de mentionner le nombre de phrases pouvant

être saisies. Cela se fait en utilisant l’attribut rows.
• De même, il convient également de mentionner le nombre de caractères qui peuvent être saisis
sur une ligne. Cela se fait en utilisant l'attribut cols.
• Si la valeur donnée aux lignes est dépassée, c'est-à-dire si les utilisateurs saisissent plus de
phrases que spécifié, la barre de défilement apparaît automatiquement.

<html>
<head>
<title>zone de texte</title>
</head>
<body>
<form action=" ">
<h3>Entrez vos commentaires</h3>
<p>
<textarea name="feedback" rows="5" cols=”100">
</textarea>
</p>
</form>
</body>
</html>

22 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Les boutons d'action :

• Le bouton Réinitialiser réinitialise tous les contrôles du formulaire à leur état initial. Le
bouton Soumettre a deux actions :
• Tout d'abord, les données du formulaire sont codées et envoyées au serveur ; ensuite, le
serveur est invité à exécuter le programme résident du serveur spécifié dans l'attribut
action du formulaire.<form> étiqueter.
• Le but d’un tel programme résident sur le serveur est de traiter les données du
formulaire et de renvoyer une réponse à l’utilisateur.
• Chaque formulaire nécessite un bouton Soumettre. Les boutons Soumettre et
Réinitialiser sont créés avec le<input> étiqueter.

<html>
<head>
<title>boutons d'action</title>
</head>
<body>
<form action=" ">
<p>
<input type="SUBMlT" value="SUBMlT"/>
<input type="RESET'' value="RESET"/>
</p>
</form>
</body>
</html>

23 | Page VSISCM
Ce document est disponible gratuitement sur C
studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

Exemple de formulaire complet :

<html>
<head>
<title>Formulaire complet</title>
</head>
<body>
<hl>Formulaire d'inscription</hl>
<form action=" ">
<p>
<label>Entrez votre adresse email :</label>
<input type = "text" name = "myname" size = "24" maxlength = "25" />
</label>
</p>
<p>
<label>Entrez le mot de passe:</label>
<input type = "password" name = "mypass" size = "20" maxlength = "20" />
</label*
</p>
<p>Sexe</p>
<p>
<label><input type="radio" name="act" value="one"/*MaIe</label>
<label><input type="radio" name="act" value="two"/*Female</label>
</p>
<p>Lequel des comptes suivants possédez-vous ?</p>
<p>
<label><input type="checkbox" name="act" value="one'/*Gmail</label>
<label><input type="checkbox" name="act" value=”two"/*Facebook</IabeI>
<label><input type="checkbox" name="act" value="three"/*Twitter</label*
<label><input type="checkbox" name="act" value="four"/*Google+</label>
</p>

24 | Page VSISCM
<p>Des suggestions ?</p\>
<p>

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

<textarea name="feedback" rows="5” cols="100">

</textarea>
</p>
<p>Cliquez sur Soumettre si vous souhaitez vous inscrire</p>
<p>
<input type="SU BM1T" value="SUBMlT"/>
<input type="RESET" value="RÉINITIALISER"/>
</p>
</form>
</body>
</html>

CADRES

• La fenêtre du navigateur peut être utilisée pour afficher plusieurs documents à la fois. La
fenêtre peut être divisée en zones rectangulaires, chacune étant un cadre. Chaque cadre est
capable d'afficher son propre document.
Cadres:

25 | Page VSISCM

• Le nombre de cadres et leur disposition dans la fenêtre du navigateur sont spécifiés avec
le<frameset> étiqueter.
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

• Un élément frameset remplace l'élément body dans un document. Un document possède

soit un corps, soit un jeu de cadres, mais ne peut pas avoir les deux.
• Le<frameset> la balise doit avoir soit un attribut rows, soit un attribut cols (ou les deux)
• Pour créer des cadres horizontaux, l'attribut rows est utilisé.
• Pour créer des cadres verticaux, l'attribut cols est utilisé.
• Les valeurs de ces attributs peuvent être des nombres, des pourcentages et des astérisques.

Pour démontrer les cadres verticaux à l'aide de l'attribut cols

<html>
<head>
<title>Cadres de montage</title>
</head>
<frameset cols = "25%,25%,25%,25%">
<frame src = "[Link]"/>
<frame src = "[Link]'7>
<frame src = "[Link]/*
<frame src = "[Link]'7>
</frameset>
</html>

26 | Page VSISCM

Pour démontrer les cadres verticaux à l'aide de l'attribut rows

< html>
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

<head>
<title>Lignes et colonnes du cadre</title>
</head>
<frameset rows = "50, 50” cols = "*,*,*">
<frame src = "[Link]"/*
<frame src = "[Link]"/*
<frame src = "[Link]"/*
<frame src = "[Link]/>
<frame src = "[Link]"/>
<frame src = "[Link]/>
</framset>
</html>

Pour démontrer les cadres horizontaux à l'aide de l'attribut rows

<html>
<head>

27 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

<title>Lignes de Frameset</title>
</head>
<frameset rows =””>
<frame src = "[Link]"/>
<frame src = "[Link]'7>
</frameset>
</html>

Pour démontrer les cadres verticaux à l'aide de

l'attribut cols
<html>
<head>
<title*Frameset Cols</title>
</head>
<frameset cols = "25%,25%,25%,25%">
<frame src = "[Link]"/*
<frame src = "[Link]'7>
<frame src = "FrameCoi3.htmr7>
<frame src = "[Link]'7>
</frameset>
</html>

28 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

DIFFÉRENCES SYNTAXIQUES ENTRE HTML ET XHTML

PARAMÈTRES HTML XHTML
Sensibilité à la casse Les noms des balises et des Les noms des balises et des
attributs ne sont pas attributs doivent être en
sensibles à la casse. minuscules II
Balises de fermeture Les balises de fermeture Tous les éléments doivent
peuvent être omises avoir une balise de
Valeurs d'attribut entre Les caractères spéciaux fermeture
Toutes les valeurs
guillemets
sont entre guillemets. d'attribut doivent être
Valeurs numériques explicitement indiquées
Valeurs d'attribut explicites Les deux/(/et nom L'utilisation de l'identifiant
les attributs sont est encouragée et
encouragés
l'utilisation du nom est
Imbrication d'éléments Les règles contre déconseillée.
Toutes les règles de
l'imbrication incorrecte nidification sont
d'éléments (par exemple : strictement appliquées
un élément de formulaire
ne peut pas contenir un
autre élément de
formulaire) ne sont pas

29 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

EXEMPLE QUI UTILISE LA FEUILLE DE STYLE AU NIVEAU DU DOCUMENT

<html>
<head>
<title>Exemple de CSS</title>

<style type = "text/css">

famille de polices : « Écriture manuscrite Lucida » ;

taille de police : 50 pt ;

couleur rouge;

</style>

</head>

<hl>Puneeth Rajkumar</hl>
</html>

VSISCM
30 | Page

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

FORMULAIRES DE SÉLECTION
Formulaires de sélection simples :
Dans le cas d'un sélecteur simple, une balise est utilisée. Si les propriétés de la balise sont modifiées, elles se
reflètent à tous les endroits où elles sont utilisées dans le programme. Le sélecteur peut être n'importe quelle
balise. Si les nouvelles propriétés d'une balise ne sont pas mentionnées dans la liste des règles, le navigateur
utilise le comportement par défaut d'une balise.

<html>
<head>
<title>Exemple de CSS</titleIe>
<style type = "text/css">
P
{
famille de polices : « Écriture manuscrite Lucida » ;
taille de police : 5Opt ;
couleur : Rouge ;
}
</style>
</head>
<body>
<p>Puneeth Rajkumar</p>
<p>Mahesh Babu</p>
<p>Suriya</p>
</body>
</html>

31 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Sélecteurs de classe :
Dans le sélecteur de classe, il est possible de donner des propriétés différentes pour différents
éléments

<html>
<head>
<title>Exemple de CSS</title>
</head>
<hl style ="font-family: 'Lucida Handwriting'; font-size: 5Opt; color: Red;“>
Puneeth Rajkumar</hl>
</html>

Spécification de style en ligne :

Style = "Propriété 1 : Valeur ; Propriété 2 : Valeur 2 ; Propriété 3 : Valeur 3 ; Propriété.!!:

Valeur.n;"
Spécification de style de document :
<style type = "text/css">
Liste des règles
</styie>
Chaque règle de style dans une liste de règles comporte deux parties : un sélecteur, qui indique la
ou les balises affectées par la règle, et un
liste des paires propriété-valeur. La liste a la même forme que la liste citée pour les feuilles de
style en ligne, sauf qu'elle est
délimité par des accolades plutôt que par des guillemets doubles. Ainsi, la forme d’une règle de
style est la suivante :
Sélecteur {Propertyl: Valuel;Property?: Value2;Property3: Value3;Property_n: Value_n;}

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

32 | Page VSISCM
Sélecteurs de classe :
Dans le sélecteur de classe, il est possible de donner des propriétés différentes pour différents
éléments
<html>
<head>
<title>Exemple de CSS</title>
<style type = "text/css">
[Link]

{
famille de polices : « Écriture manuscrite Lucida » ;
taille de police : 25 pt ;
côlon rouge;
}
[Link]
{
famille de polices : 'Monotype Corsiva' ;
taille de police : 50 pt ;
côlon vert;
}</style>
</head>
<body>
<p class = "one">Puneeth Rajkumar</p>
<p class = ”two">Puneeth Rajkumar</p>
</body>
</html>

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

33 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

Sélecteurs génériques :
Dans le cas d'un sélecteur générique, lorsque la classe est créée, elle ne sera associée à aucune
balise particulière. En d’autres termes, il est de nature générique.

<html>
<head>
<title>Exemple de CSS</title>
<style type = "text/css">
.un
{
famille de polices : 'Monotype Corsiva' ;
côlon vert;
}
</style>
</head>
<body>
<p class = "one">Puneeth Rajkumar</p>
<hl class = "one">Puneeth Rajkumar</hl>
<h6 class = "one''>Puneeth Rajkumar</h6>
</body>
</html>

VSISCM
34 | Page

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Sélecteurs d'identifiants :
Un sélecteur d'identifiant permet l'application d'un style à un élément spécifique.

<html>
<head>
<title>Exemple de CSS</title>
<style type = "text/css">
#un
{
font-family: 'calligraphie lucida';
couleur : violet ;
}
famille de polices : « comic sans ms » ;
couleur: orange;
}
</style>
</head>
<body>
<p id = ''two''>Puneeth Rajkumar</p>
<hl id = "one">Puneeth Rajkumar</hl>
</body>
</html>

35 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

Sélecteurs universels :
Le sélecteur universel, indiqué par un astérisque (*), applique son style à tous les éléments d'un
document.

<html>
<head>
<title>Exemple de CSS</title>
<style type = “text/css">
{
font-family: 'calligraphie lucida';
couleur violet;
}
</style>
</style>
</head>
<body>
<hl>Puneeth Rajkumar</hl>
<h2>Puneeth Rajkumar</h2>
<h3>Puneeth Rajkumar</h3>
<p>Puneeth Rajkumar</p>
</body>
</html>

PuneetA "Rajkumar
PunrelU 'RajUumar
Puneeth Rajkumar

36 | Page VSISCM
Pseudo-classes :
Les sélecteurs de pseudo-classe sont utilisés si les propriétés doivent être modifiées de manière
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

dynamique.
Par exemple : lorsque le mouvement de la souris se produit, en d'autres termes, le survol se
produit ou la mise au point se produit.

<html>
<head>
<title>Exemple de CSS
<style type = "text/css">
entrée:focus
{
famille de polices : calligraphie lucida ;
couleur : violet ;
taille de police : 100 ;
}
entrée : survol
{
font-family: 'écriture manuscrite lucida';
couleur : violet ;
taille de police : 40 ;
)
</style>
</head>
<body>
<form action = " ">
<p>
<label>

37 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

NOM:
<input type = "text" />
</label>
</p>
</form>
</body>
</html>

FORMULAIRES DE VALEUR IMMOBILIÈRE

CSS comprend 60 propriétés différentes dans sept catégories : polices, listes, alignement du
texte, marges, couleurs, arrière-plans et bordures. Les valeurs immobilières peuvent apparaître
sous diverses formes.
• Les valeurs de propriété de mot-clé sont utilisées lorsqu'il n'y a que quelques valeurs possibles
et qu'elles sont prédéfinies.

• Une valeur numérique peut être soit un entier, soit une séquence de chiffres avec un point
décimal et peut être précédée d'un signe (+ ou -).

• Les valeurs de longueur sont spécifiées sous forme de valeurs numériques suivies
immédiatement d'une abréviation à deux caractères d'un nom d'unité. Les noms d'unités possibles
sont px, pour les pixels ; in, pour les pouces ; cm, pour les centimètres ; mm, pour les millimètres
; pt, pour les points.

38 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• Les valeurs de pourcentage sont utilisées pour fournir une mesure relative à la mesure
précédemment utilisée pour une valeur de propriété. Les valeurs de pourcentage sont des
nombres suivis immédiatement d'un signe de pourcentage p). Les valeurs de pourcentage peuvent
être signées. Si précédé d'un signe plus, le pourcentage est ajouté à la valeur précédente ; s'il est
négatif, le pourcentage est soustrait.

• Il ne peut y avoir aucun espace entre l'URL et la parenthèse gauche.

• Les valeurs des propriétés de couleur peuvent être spécifiées sous forme de noms de couleurs,
de nombres hexadécimaux à six chiffres ou sous forme RVB. La forme RVB est simplement le
mot RVB suivi d'une liste entre parenthèses de trois nombres qui spécifient respectivement les
niveaux de rouge, de vert et de bleu.

Les valeurs RVB peuvent être données soit sous forme de nombres décimaux compris entre 0 et
255, soit sous forme de pourcentages. Les nombres hexadécimaux doivent être précédés de
signes dièse (#), comme dans I43AF00.

Propriétés de la police :
La propriété font-family est utilisée pour spécifier une liste de noms de polices. Le navigateur
utilise la première police de la liste qu'il prend en charge.

En CSS, il existe deux types de noms de familles de polices :

• famille générique - un groupe de familles de polices ayant une apparence similaire

(comme « Serif » ou « Monospace »)
• famille de polices - une famille de polices spécifique (comme « Times New Roman » ou «
Arial »)

Famille
Famille de
Description
générique polices

Serif Le temps Les polices Roman Serif ont de petites lignes aux
nouveau
extrémités de certains caractères
Géorgie
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique
39 | Page VSISCM
Ce document est disponible gratuitement sur C
studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

Sans serif Aérien « Sans » signifie sans – ces polices n'ont pas
Verdana de lignes à la fin des caractères

Monospace Courrier Nouveau Tous les caractères monospace ont la

Console Lucida même largeur

<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
famille de polices : « Times New Roman », Times, serif ;
}

[Link] {
famille de polices : Arial, Helvetica, sans-serif ;
}
</style>
</head>
<body>

<h1>Famille de polices CSS</h1>

<p class="serif">Il s'agit d'un paragraphe, affiché dans la police Times New Roman.</p>
<p class="sansserif">Il s'agit d'un paragraphe, affiché en police Arial.</p>

</body>
</html>

40 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

Famille de polices CSS

Il s'agit d'un paragraphe, affiché dans la police Tinies New Roman.

Il s'agit d'un paragraphe, affiché en police Arial.

Propriété de taille de police :

La propriété font-size définit la taille d'une police.

Syntaxe:
font-size:medium|xx-small|x-small|small|large|x-large|xx- large|smaller|larger|length|initial|
inherit;

Propriété Font-variants :
La propriété font-variant spécifie si un texte doit ou non être affiché dans une police en petites
capitales.
Syntaxe:
font-variant: normal|petites capitales|initial|hériter;

Propriété de style de police :

La propriété font-style spécifie le style de police d'un texte.
Syntaxe:
style de police : normal|italique|oblique|initial|hériter ;

Poids des polices :

La propriété font-weight est utilisée pour spécifier le degré de gras, comme dans [font-weight:
bold;]. Outre bold, les valeurs normal, bolder et stronger peuvent être spécifiées. Des nombres
spécifiques peuvent également être donnés en multiples de 100, de 100 à 900, où 400 correspond
à la valeur normale et 700 correspond à la valeur en gras.

41 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

Abréviations de polices :
Si plusieurs propriétés de police doivent être spécifiées, les valeurs peuvent être indiquées dans
une liste comme valeur de la propriété de police. L'ordre dans lequel les valeurs de propriété sont
données dans une liste de valeurs de police est important. L'ordre doit être le suivant : les noms
de police doivent être en dernier, la taille de police doit être l'avant-dernière et le style de police,
la variante de police et l'épaisseur de police, lorsqu'ils sont inclus, peuvent être dans n'importe
quel ordre mais doivent précéder la taille de police et les noms de police. [ police : gras 14 pt
« Times New Roman » ;]

<html>
<head>
<title>Propriétés de la police</title>
<style type = "text/css">
[Link]
{
font-family: 'calligraphie lucida';
poids-police:gras;
taille de police : 75 pt ;
couleur violet;
}h
[Link]
{
famille de polices : « cambria » ;
couleur violette;
style de police : italique ;
}
p. trois
{
police : petites capitales italiques gras 50pt 'times new roman'
}
</style>
</head>
<body>
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

42 | Page VSISCM

<p class = "one">Puneeth Rajkumar</p>

<hl class = "two">Puneeth Rajkumar</hl>
<p class = “three" >Jeu de mots avec Rajkumar</p>
</body>
</html>

Décoration de texte :
La propriété text-decoration est utilisée pour spécifier certaines caractéristiques spéciales du
texte. Les valeurs disponibles sont line-through, over line, underline et none, qui est la valeur par
défaut.
<html>
<head>
<title>Décoration de texte</title>
<style type = "text/css^
[Link]
{text-decoration: ligne-traversante;}
[Link]
(décoration de texte : surlignement ;}
[Link]
{text-decoration: soulignement;}
</style>
</head>
<body>
<h 1 class = “one">Puneeth Rajkumar</h 1 ><p> [C'est une ligne directe]</p><br/>
<hl class = "two’’>Puneeth Rajkumar</hl> <p>(This is overline]</p><br/>
<hl class = "three">Puneeth Rajkumar</hlxp> [Ceci est souligné]</p><br/>
</body>
</html>

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

43 | Page VSISCM

LISTE DES PROPRIÉTÉS

Deux détails de présentation des listes peuvent être spécifiés dans les documents XHTML : la
forme des puces qui précèdent les éléments dans une liste non ordonnée et les valeurs de
séquençage qui précèdent les éléments dans une liste ordonnée. La propriété liststyle-type est
utilisée pour spécifier ces deux éléments.
La propriété list-style-type d'une liste non ordonnée peut être définie sur disque, cercle, carré
ou aucun.

<html>
<head>
<tit!e>Puces CSS</title>
<style type = "text/css">
[Link] {type-de-style-de-liste:disque}
[Link](liste-style-type:carré}
[Link]{liste-style-type:cercle}
</style>
</head>
<body>
<h3>Rois de l'Inde du Sud</h3>
<ul>
<li class = "one">Puneeth Rajkumar</li>
<11 classe = "deux"> Mahesh Babu</li>

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

<li class = "three"<Suriya</li>

44 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

</ul>
</body>
</html>

COULEUR
Groupes de couleurs :
Trois niveaux de collections de couleurs peuvent être utilisés par un document XHTML. Le plus petit
ensemble utile de couleurs comprend uniquement celles qui ont des noms standard et dont l'affichage
est garanti par tous les navigateurs sur tous les moniteurs couleur. Cette collection de 17 couleurs est
appelée les couleurs nommées.

45 | Page VSISCM
Ce document est disponible gratuitement sur C
studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

■■■■■■■■■■■■■■■
■■
000099 003399 006699 009999 00CC99 00FF99 99FF99 99CC99 999999 996699 993399 990099 CC0099 CC3399 CC6699 CC9999 CCCC99

■■■■■■■■■■■■■■■
CCFF99

■
000066 003366 006666 009966 00CC66 00FF66 99FF66 99CC66 999966 996666 993366 990066 CC0066 CC3366 CC6666 CC9966 CCCC66

■■■■■■■■■■■■■■■
CCFF66

■■
000033 003333 006633 009933 00CC33 00FF33 99FF33 99CC33 999933 996633 993333 990033 CC0033 CC3333 CC6633 CC9933 CCCC33
CCFF33

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

■■■■■■■■■■■■■■■
■■
000000 003300 006600 009900 00CC00 OOFFOO 99FF00 99CC00 999900 996600 993300 990000 CC0000 CC3300 CC6600 CC9900 CCCCOO
CCFFOO

000000 333333 666666 999999 CCCCCC

FFFFFF

46 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

Propriétés de couleur :
La propriété color est utilisée pour spécifier la couleur de premier plan des éléments XHTML.
<html>
<head>
<title>Couleurs</title>
<style type = ”text/css">
[Link]
{couleur: rose;}
[Link]
{couleur: # 9900FF;}
[Link]
{couleur-d'arrière-plan:#99FF00;}
</style>
</head>
<body>
<p class = "one">Puneeth Rajkumar</p>
<p class = ”two">Puneeth Rajkumar</p>
<p class = "three">Puneeth Rajkumar</p>
</body></html>

Puneeth Rajkumar

Puneeth Rajkumar

Alignement du texte
* La propriété text-indent peut être utilisée pour indenter la première ligne d'un paragraphe. Cette
propriété prend soit une longueur, soit une valeur de pourcentage. La propriété text-align, pour
laquelle les valeurs de mot-clé possibles sont left, center, right et justify, est utilisée pour
organiser le texte horizontalement.
■ La propriété float est utilisée pour spécifier que le texte doit s'écouler autour d'un élément,
souvent une image ou un tableau. Les valeurs possibles pour float sont left, right et none, qui est
la valeur par défaut.

47 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

<html>
<head>
<title>Alignement du texte</title>
<style type = "text/css">
[Link]
{text-align: centre)
[Link]
{text-indent: 0.5in; text-align: justifier;}
img{float: droite)
</style>
</head>
<body>
<hl class = "one">Kannadada Kotyadhipathi</hl>
<p>
<img src = "[Link]" alt="erreur"/>
</p>
<p class = "two">Kannadada Kotyadhipathi est un quiz en kannada aux heures de grande
écoute animé par la star du cinéma kannada, M. Puneet Rajkumar. Il s’agit du plus grand
jeu télévisé jamais diffusé sur Kannada Television. Cette émission sera diffusée sur Suvama
TV. Cette émission donne à l'homme ordinaire l'opportunité de gagner Rs 1 crore.
Kannadada Kotyadipathi est un quiz et une émission dramatique humaine en kannada aux
heures de grande écoute animé par l'idole de la matinée Puneeth Rajkumar sur Suvarna
TV. Les candidats participent à un jeu qui leur permet de gagner jusqu'à Rs. 1 crore. Les
candidats présélectionnés jouent un tour « Fastest Finger First » pour accéder au jeu
principal. À partir de là, ils jouent des parties avec des niveaux de difficulté croissants et
gagnent des sommes d'argent plus importantes, culminant avec le prix de Rs. 1 crore. Les
candidats peuvent arrêter à tout moment après avoir consulté la question suivante. Ou bien
ils peuvent profiter d'une « ligne de vie » et continuer à jouer. Bienvenue dans le monde des
frissons et des enjeux élevés ! Bienvenue dans le monde des crorepati !</p>
</body>
</html>

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

48 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

LE MODÈLE DE BOÎTE
• Dans une page Web ou un document donné, tous les éléments peuvent avoir des bordures.
• Les bordures ont des styles, des couleurs et des largeurs variés.
• La quantité d'espace entre le contenu de l'élément et sa bordure est appelée remplissage.
• L'espace entre la bordure et l'élément adjacent est appelé marge.

Frontières:
Style de bordure
Il peut être pointillé, tireté, double
► Style de bordure supérieure
► Style de bordure inférieure
► Style bordure gauche
► Style de bordure droite

49 | Page VSISCM
Ce document est disponible gratuitement sur C
studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Largeur de la bordure
Il peut être fin, moyen, épais ou de n'importe quelle longueur
► Largeur de la bordure supérieure
► Largeur de la bordure inférieure
► Largeur de la bordure gauche
► Largeur de la bordure droite

Couleur de bordure
► Couleur de la bordure supérieure
► Couleur de bordure inférieure
► Couleur de bordure gauche
► Couleur de bordure droite

<html>
<head>
<title>Tableau avec effets de bordure</title>
<style type = "text/css">
tableau {
largeur de la bordure : épaisse ;
bordure-haut-couleur:rouge;
bordure-gauche-couleur:orange;
bordure-inférieure-couleur: violet; bordure-droite-couleurvert;
border-bottom-style:double; border-right- style:pointillé;
}
</style>
</head>

50 | Page VSISCM
<body>
<table border = "border">
<caption>PARAMATHME</caption>
<tr>
<td>Puneeth Rajkumar</td>
<td><img src = “[Link]" alt="ne peut pas afficher"/></td>
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

</tr></table>
</body></html>

Marges et remplissage :
Les propriétés de marge sont nommées margin, qui s'applique aux quatre côtés d'un élément :
marginleft, margin-right, margin-top et margin-bottom. Les propriétés de remplissage sont
nommées padding, qui s'applique aux quatre côtés : padding-left, padding-right, padding-top et
padding-bottom.

<html>
<head>
<title>Marges et remplissage</title>
<style type = "text/css">
[Link]
{
[Link];
rembourrage : 0,5 po ;
couleur d'arrière-plan : # FF33FF ;
style de bordure : pointillé ;

51 | Page

VSISCM

}
[Link]
{
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

marge : 0,5 po ;
rembourrage : 0,1 po ;
couleur d'arrière-plan : #00FF33 ;
style de bordure : pointillé ;
}
[Link]
marge : 0,3 po ;
couleur d'arrière-plan:#FFFFOO;
}
[Link]
{
rembourrage : 0,3 po ;
couleur d'arrière-plan : # FF9900 ;
}
</style>
</head>
<body>
<p class = "one">Puneeth Rajkumar est la star du bois de santal<br/> [marge=0,1 po,
remplissage=0,5 po]</p>
<p class = "two”> Puneeth Rajkumar is the Power Star of Sandalwood<br/> [margin=0.5in,
padding=0.1in]</p>
<p class = "three">Puneeth Rajkumar est la star de Sandalwood<br/> [marge=0,3in, pas de
remplissage, pas de bordure]</p>
<p class = "four">Puneeth Rajkumar est l'étoile puissante du bois de santal<br/> [pas de marge,
padding=03in, pas de bordure]</p>
</body>
</html>

52 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

IMAGES D'ARRIÈRE-PLAN
La propriété background-image est utilisée pour placer une image en arrière-plan d'un élément.
<html>
<head>
<title>Image d'arrière-plan</title>
<style type = "text/css">
corps {background-image:url([Link]);}
p{text-align:justify; couleur:blanc;taille-de-police:25pt;}
</style>
</head>
<body>
<p >Kannadada Kotyadhipathi est un quiz en kannada aux heures de grande écoute animé
par la star du cinéma kannada, M. Puneet Rajkumar. Il s’agit du plus grand jeu télévisé
jamais diffusé sur Kannada Television. Cette émission sera diffusée sur Suvarna TV. Cette
émission donne à l'homme ordinaire l'opportunité de gagner Rs 1 crore. Kannadada
Kotyadipathi est un quiz kannada aux heures de grande écoute et une émission dramatique
humaine animée par l'idole de la matinée Puneeth Rajkumaron Suvarna TV. Les candidats
participent à un jeu qui leur permet de gagner jusqu'à Rs. 1 crore. Les candidats
présélectionnés jouent un tour « Fastest Finger First » pour accéder au jeu principal. À
partir de là, ils jouent des parties avec des niveaux de difficulté croissants et gagnent des
sommes d'argent plus importantes, culminant avec le prix de Rs. 1 crore. Les candidats
peuvent arrêter à tout moment après avoir consulté la question suivante. Ou ils

53 | Page Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

VSISCM
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique
Ce document est disponible gratuitement sur C
studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

Vous pouvez bénéficier d'une « ligne de vie » et continuer à jouer. Bienvenue dans le monde
des frissons et des sensations fortes à enjeux élevés ! Bienvenue dans le monde des crorepati
!</p>
</body></html>

LES <span><div>BALISES</div> ET</span>

Dans de nombreuses situations, nous souhaitons appliquer des propriétés de police spéciales à
moins d’un paragraphe entier de texte.
L' <span>étiquette est conçue précisément à cette fin.</span>

<html>
<head><title>portée</title>
<style type = "text/css">
.spanviolet {font-size:25pt;font-family:'calligraphie lucida';color:violet;}
</style>
</head>
<body>
<p >Kannadada Kotyadhipathi est un quiz en kannada aux heures de grande écoute animé
par
</body>
</html>

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

54 | Page VSISCM
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

RÉSOLUTION DE CONFLITS

• Parfois, sur une page Web, il peut y avoir deux valeurs différentes pour la même propriété
sur le même élément, ce qui entraîne un conflit.
h3 {couleur: bleu;}
corps h3 {deux points rouges;)

• Le navigateur doit résoudre ce conflit.

• Il peut y avoir un ou plusieurs types de conflit : par exemple, lorsque les feuilles de style
à 2 niveaux ou plus spécifient des valeurs différentes pour la même propriété sur un
élément.
• Ce conflit est résolu en donnant la priorité aux différents niveaux de feuilles de style.
• Le niveau en ligne obtient la priorité la plus élevée par rapport au niveau du document.
• Le niveau du document obtient une priorité plus élevée que le niveau externe
• Mais le navigateur doit être capable de résoudre le conflit dans le premier exemple en
utilisant la même technique.
• Il peut y avoir plusieurs origines différentes à la spécification des valeurs de propriété.
• L'une des valeurs peut provenir d'une feuille de style créée par l'auteur ou elle peut être
spécifiée par l'utilisateur à l'aide des options fournies par le navigateur.
• Les valeurs de propriété d'origine différente ont une priorité différente.
• La priorité peut également être définie pour une propriété en la marquant comme
importante.
• [Link]écial {font-style: italic {important; font-size: 14}
• Cela signifie que font-style:italic est important [c'est ce qu'on appelle le poids de la
spécification]
• Le processus de résolution des conflits est un processus de tri en plusieurs étapes.
• La première étape consiste à collecter des informations sur les niveaux de feuille de style
• Ensuite, toutes les origines et tous les poids sont triés. Les règles suivantes sont prises en
compte :
1. Déclarations importantes concernant l'origine de l'utilisateur
2. Déclarations importantes concernant l'origine de l'auteur
3. Déclarations normales avec origine de l'auteur
4. Déclarations normales avec origine utilisateur
5. Toutes les déclarations avec l'origine du navigateur (ou autre agent utilisateur)
■ S’il existe d’autres conflits même après le tri, l’étape suivante consiste à trier par
spécificité. Les règles sont :

55 | Page VSISCM
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique
Ce document est disponible gratuitement sur C
studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

1. sélecteurs d'identifiants
2. Sélecteurs de classe et de pseudo-classe
3. Sélecteurs contextuels (plus il y a de noms de types d'éléments, plus ils sont
spécifiques)
4. Sélecteurs universels
■ S’il reste des conflits, ils sont résolus en donnant la priorité à la spécification la plus
récemment vue.

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

56 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

UNITÉ-3
JAVASCRIPT

VUE D'ENSEMBLE DE JAVASCRIPT

ORIGINES

• JavaScript, développé par Netscape, s'appelait à l'origine Mocha mais a rapidement été
renommé LiveScript.
• Fin 1995, LiveScript est devenu une coentreprise de Netscape et Sun Microsystems, et
son nom a de nouveau été changé, cette fois en JavaScript.
• Une norme de langage pour JavaScript a été développée à la fin des années 1990 par
l'Association européenne des fabricants d'ordinateurs (ECMAJ) sous le nom d'ECMA-
262.
• Le nom officiel du langage standard est ECMAScripL
• JavaScript peut être divisé en trois parties : le cœur, le côté client et le côté serveur.
O Le noyau est le cœur du langage, y compris ses opérateurs, expressions,
instructions et sous-programmes.

• JavaScript côté client est une collection d'objets qui prennent en charge le contrôle d'un
navigateur et les interactions avec les utilisateurs.
• JavaScript côté serveur est une collection d'objets qui rendent le langage utile sur un
serveur Web.

JAVA VS JAVASCRIPT

1) Environnement d'exécution
La première différence entre Java et JavaScript est que Java est un langage compilé + interprété,
le code Java est d'abord compilé dans des fichiers de classe contenant du byte code puis exécuté
par la JVM, d'autre part le code JavaScript est directement exécuté par le navigateur. Une autre
différence qui découle de ce fait est que Java est exécuté à l'intérieur de la JVM et nécessite JDK
ou JRE pour fonctionner, d'autre part

57 | Page VSISCM
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Ce document est disponible gratuitement sur C

studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

JavaScript s'exécute dans le navigateur et presque tous les navigateurs modernes prennent en
charge JavaScript.

2) Langage typé statique ou dynamique

Une autre différence clé entre JavaScript et Java est que JavaScript est un langage typé
dynamique, tandis que Java est un langage typé statiquement. Ce qui signifie que les variables
sont déclarées avec le type au moment de la compilation et ne peuvent accepter que les valeurs
autorisées pour ce type, d'autre part, les variables sont déclarées à l'aide du mot-clé vary en
JavaScript et peuvent accepter différents types de valeurs, par exemple une chaîne, un numérique
et un booléen, etc. Lorsqu'une variable ou une valeur est comparée à une autre à l'aide de
l'opérateur ==, JavaScript effectue une coercition de type. Bien qu'il fournisse également
l'opérateur === pour effectuer une vérification d'égalité stricte, qui vérifie également le type.

3) Soutien aux fermetures

JavaScript prend en charge les fermetures, sous forme de fonction anonyme. En termes simples,
vous pouvez passer une fonction comme argument à une autre fonction. Java ne traite pas la
méthode comme un citoyen de première classe et la seule façon de simuler la fermeture est
d'utiliser une classe anonyme. Au fait, Java 8 a apporté un véritable support de fermeture en Java
sous la forme d'expression lambda et cela a rendu les choses beaucoup plus faciles. Il est très
facile d’écrire du code expressif sans trop d’encombrement dans Java 8.

4) POO

Java est un langage de programmation orienté objet, et bien que JavaScript prenne également en
charge les classes et les objets, il s'apparente davantage à un langage de script orienté objet. Il est
beaucoup plus facile de structurer le code d'une grande application d'entreprise en Java qu'en
JavaScript. Java fournit des packages pour regrouper les classes associées et offre un bien
meilleur contrôle de déploiement à l'aide de JAR, WAR et EAR également.

5) Courez n'importe où une fois pour toutes

Java utilise du byte code pour obtenir l'indépendance de la plate-forme, JavaScript s'exécute

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

directement sur le navigateur, mais le code écrit en JavaScript est sujet à des problèmes de
compatibilité avec le navigateur, c'est-à-dire que certains codes qui fonctionnent dans Mozilla
Firefox peuvent ne pas fonctionner dans Internet Explorer 7 ou 8. C'est à cause de la navigation
basée sur

58 | Page VSISCM
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

implémentation de JavaScript. C'était vraiment mauvais jusqu'à l'arrivée de jQuery. Il s'agit d'une
bibliothèque JavaScript qui aide à libérer les développeurs Web de ces problèmes de
compatibilité avec les navigateurs. C'est pourquoi je préfère écrire du code en utilisant jQuery
plutôt que d'utiliser du simple code JavaScript, même si c'est aussi simple que d'appeler les
méthodes getElementById() ou getElementByName() pour récupérer les éléments DOM.

6) Portée basée sur les blocs et les fonctions

Java utilise principalement une portée basée sur des blocs, c'est-à-dire qu'une variable sort de la
portée dès que le contrôle sort du bloc, à moins qu'il ne s'agisse pas d'une variable d'instance ou
de classe. D'autre part, JavaScript utilise principalement une portée basée sur des fonctions, une
variable est accessible dans la fonction dans laquelle elle est déclarée. Si vous avez une variable
globale et une variable locale portant le même nom, local aura la priorité dans JavaScript.

7) Constructeurs

Java a un concept de constructeurs, qui a des propriétés spéciales, par exemple le chaînage des
constructeurs et la garantie que le constructeur de la super classe s'exécute avant la sous-classe.
D'autre part, les constructeurs JavaScript ne sont qu'une autre fonction. Il n'y a pas de règles
spéciales pour les constructeurs en JavaScript, par exemple, ils ne peuvent pas avoir de type de
retour ou leur nom doit être le même que celui de la classe.

8) Exception NullPointer

JavaScript est beaucoup plus indulgent que Java, vous n'avez pas de NullPointerException en
JavaScript, votre variable peut accepter différents types de données car JavaScript est un langage
typé dynamiquement.

9) Applicabilité

Enfin et surtout, JavaScript a son propre espace, confortablement installé aux côtés de HTML et
CSS dans le développement Web, tandis que Java est partout. Bien que les deux disposent d'un
bon nombre de bibliothèques open source pour lancer le développement, jQuery a certainement
mis JavaScript au premier plan.

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

59 | Page VSISCM
Ce document est disponible gratuitement sur C
studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

UTILISATIONS DE JAVASCRIPT

• JavaScript a été initialement introduit pour fournir des capacités de programmation aux
extrémités serveur et client de la connexion Web.
• JavaScript est donc implémenté à 2 extrémités :
1. Côté client
2. Côté serveur

• Le JavaScript côté client est intégré dans les documents XHTML et est interprété par le
navigateur
• Il fournit également des moyens de calcul, qui servent d'alternative à certaines tâches
effectuées côté serveur.
• Les interactions avec les utilisateurs via des éléments de formulaire, tels que des boutons
et des menus, peuvent être facilement décrites en JavaScript. Étant donné que les clics sur
les boutons et les mouvements de la souris sont facilement détectés avec JavaScript, ils
peuvent être utilisés pour déclencher des calculs et fournir des commentaires à
l'utilisateur.

• Par exemple, lorsqu’un utilisateur déplace le curseur de la souris depuis une zone de texte.
JavaScript peut détecter ce mouvement et vérifier la pertinence de la valeur de la zone de
texte (qui vient vraisemblablement d'être remplie par l'utilisateur).

• Même sans formulaires, les interactions utilisateur sont à la fois possibles et simples à
programmer en JavaScript. Ces interactions, qui se déroulent dans des fenêtres de
dialogue, incluent l'obtention de données de la part de l'utilisateur et la possibilité pour
celui-ci de faire des choix via des boutons. Il est également facile de générer
dynamiquement du nouveau contenu dans l'affichage du navigateur.

• Ce transfert de tâches garantit que le serveur n'est pas surchargé et n'exécute que les
tâches requises.
• Mais le JavaScript côté client ne peut pas remplacer le JavaScript côté serveur, car le
logiciel côté serveur prend en charge les opérations sur les fichiers, l'accès aux bases de
données, la sécurité, la mise en réseau, etc.
• JavaScript est également utilisé comme alternative aux applets Java.
• La programmation en JavaScript est beaucoup plus simple que celle en Java
• JavaScript prend en charge DOM [Document Object Model] qui permet à JavaScript
d'accéder et de modifier les propriétés CSS et le contenu de tout élément d'un document
XHTML affiché

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

60 | Page VSISCM
ORIENTATION DES OBJETS ET JAVASCRIPT

• JavaScript est un langage basé sur les objets

• Il prend en charge l'héritage basé sur un prototype
• Sans héritage basé sur les classes, JavaScript ne peut pas prendre en charge le
polymorphisme.
• Une variable polymorphe peut référencer des méthodes liées à des objets de différentes
classes au sein de la même hiérarchie de classes

OBJETS JAVASCRIPT

• En JavaScript, les objets sont des collections de propriétés, qui correspondent aux
membres des classes en Java et C++.
• Chaque propriété est soit une propriété de données, soit une propriété de fonction ou de
méthode.
• Les propriétés de données apparaissent dans deux catégories : les valeurs primitives et les
références à d’autres objets.
• JavaScript utilise des types non-objets pour certains de ses types les plus simples ; ces
types non-objets sont appelés primitifs.
• Les primitives sont utilisées car elles peuvent souvent être implémentées directement dans
le matériel, ce qui permet des opérations plus rapides sur leurs valeurs.
• Tous les objets d'un programme JavaScript sont accessibles indirectement via des
variables.
• Toutes les valeurs primitives en JavaScript sont accessibles directement : elles sont
similaires aux types scalaires en Java et C++.
• Ceux-ci sont souvent appelés types de valeur.
• Les propriétés d'un objet sont référencées en attachant le nom de la propriété à la variable
qui référence l'objet.
• Un objet JavaScript apparaît, à la fois en interne et en externe, sous la forme d'une liste
de paires propriété-valeur.
• Les propriétés sont des noms ; les valeurs sont des valeurs de données ou des fonctions.
• Toutes les fonctions sont des objets et sont référencées via des variables.
• La collection de propriétés d'un objet JavaScript est dynamique : les propriétés peuvent
être ajoutées ou supprimées à tout moment.

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

61 | Page VSISCM

Ce document est disponible gratuitement sur • studocu

CARACTÉRISTIQUES SYNTAXIQUES GÉNÉRALES

• Les scripts peuvent apparaître directement comme contenu d'un<script> tag.

• L'attribut type de<script> must be set to “text/javascript”.
• Le script JavaScript peut être indirectement intégré dans un document XHTML avec
l'attribut src d'un<script> tag, whose value is the name of a file that contains the script—
for example,________________
<script type = "text/javascript" src = ”tst_nuinber. js" > </script>

• Notez que l'élément script nécessite la balise de fermeture, même s'il n'a aucun contenu
lorsque l'attribut src est inclus.
• En JavaScript, les identifiants, ou noms, doivent commencer par une lettre, un trait de
soulignement (_) ou un signe dollar ($).
• Les caractères suivants peuvent être des lettres, des traits de soulignement, des signes
dollar ou des chiffres. Il n'y a pas de limitation de longueur pour les identifiants.
• JavaScript a 25 mots réservés
Casser supprime fonction retour type
r de
cas faire si changer var
attraper autre dans ce vide
continuer enfin instance de lancer alors
que
défaut pour nouveau essayer avec

• De plus, JavaScript dispose d'une grande collection de mots prédéfinis, notamment alert,
open, java et self.
• JavaScript possède deux formes de commentaires, toutes deux utilisées dans d'autres
langages. Premièrement, chaque fois que deux barres obliques adjacentes (//)
apparaissent sur une ligne, le reste de la ligne est considéré comme un commentaire.
Deuxièmement, /* peut être utilisé pour introduire un commentaire et */ pour le
terminer, dans les commentaires sur une ou plusieurs lignes.
• Le commentaire XHTML utilisé pour masquer JavaScript utilise la syntaxe de début
normale,
• Le formulaire de commentaire XHTML suivant masque le script inclus aux navigateurs
qui n'ont pas
• Interpréteurs JavaScript, mais le rend visible aux navigateurs qui prennent en charge
JavaScript :

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

62 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• L'utilisation de points-virgules dans JavaScript est inhabituelle. L'interpréteur JavaScript

essaie de rendre les points-virgules inutiles, mais cela ne fonctionne pas toujours.
• Lorsque la fin d’une ligne coïncide avec ce qui pourrait être la fin d’une instruction,
l’interpréteur insère effectivement un point-virgule à cet endroit. Mais cela peut entraîner
des problèmes. Par exemple,

<!DOCTYPE htrnl PUBLIC “-//W3C//DTD XHTML 1.0 StrlCt//EN”

« [Link] »>
<1— [Link]
Un exemple trivial de « bonjour le monde » avec XHTML/JavaScript
—>
<html xml ns =”http//[Link]/1999/xhtml">
<head>
<title>Bonjour le monde</title>
</head>
<body>
<script type • "text/javascript*>
<1—
[Link])"Bonjour, collègues programmeurs Web !*);
// —>
</script>
</body>
</html>

63 | Page VSISCM
Ce document est disponible gratuitement sur C
studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

PRIMITIVES, OPÉRATIONS ET EXPRESSIONS

TYPES PRIMITIFS

• JavaScript possède cinq types primitifs : Number, String, Boolean, Undefined et Null.
• Chaque valeur primitive possède l’un de ces types.
• JavaScript inclut des objets prédéfinis étroitement liés aux types Number, String et Boolean,
nommés respectivement Number, String et Boolean.
• Ces objets sont appelés objets wrapper.
• Chacun contient une propriété qui stocke une valeur du type primitif correspondant.
• Le but des objets wrapper est de fournir des propriétés et des méthodes pratiques à utiliser
avec les valeurs des types primitifs.

LITTÉRAUX NUMÉRIQUES ET DE CHAÎNE

• Tous les littéraux numériques sont des valeurs de type Nombre. Les valeurs de type
numérique sont représentées en interne sous forme de nombres à virgule flottante double
précision.
• Les littéraux entiers sont des chaînes de chiffres.
• Les littéraux à virgule flottante peuvent avoir des points décimaux, des exposants ou les deux.
• Les exposants sont spécifiés avec un e majuscule ou minuscule et un littéral entier
éventuellement signé.
• Les éléments suivants sont des littéraux numériques valides :
72 7.2 .72 72. 7E2 7e2 7e2 7^2 7.2E-2
• Les littéraux entiers peuvent être écrits sous forme hexadécimale en précédant leur premier
chiffre par Ox ou OX.
• Une chaîne littérale est une séquence de zéro ou plusieurs caractères délimités par des
guillemets simples (') ou des guillemets doubles ('9.
• Les littéraux de chaîne peuvent inclure des caractères spécifiés avec des séquences
d'échappement, telles que \n et \t. Si vous souhaitez un caractère guillemet simple réel dans
une chaîne littérale délimitée par des guillemets simples, le guillemet simple intégré doit être
précédé d'une barre oblique inverse :
• « Tu es la personne la plus adorable que j'ai jamais rencontrée »
• Un guillemet double peut être intégré dans une chaîne littérale entre guillemets doubles en le
précédant d'une barre oblique inverse. Un caractère de barre oblique inverse réel dans
n'importe quelle chaîne littérale doit lui-même être barré d'une barre oblique inverse, comme
dans l'exemple suivant :
• "D:\\fichiersdulivre"
• Il n'y a aucune différence entre les chaînes littérales entre guillemets simples et entre
guillemets doubles.
• La chaîne nulle (une chaîne sans caractères) peut être indiquée par « ou ».

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

64 | Page VSISCM
AUTRES TYPES PRIMITIFS

■ La seule valeur de type Null est le mot réservé null, qui indique aucune valeur.
■ La seule valeur de type Undefined est undefined.
■ Les seules valeurs de type booléen sont vrai et faux.

DÉCLARER DES VARIABLES

• Une variable peut être déclarée soit en lui attribuant une valeur, auquel cas l'interpréteur la
déclare implicitement comme étant une variable, soit en la répertoriant dans une instruction
de déclaration qui commence par le mot réservé var. Les valeurs initiales peuvent être
incluses dans une déclaration var, comme avec certaines des variables de la déclaration
suivante :
compteur var,
indice,
pi - 3.14159265, quart-arrière
■ "Elway", au sommet du drapeau
■ vrai;

• Une variable qui a été déclarée mais à laquelle aucune valeur n'a été attribuée a la valeur
undefined.

OPÉRATEURS NUMÉRIQUES
■ JavaScript possède la collection typique d'opérateurs numériques : les opérateurs binaires +
pour l'addition, - pour la soustraction,* pour la multiplication, / pour la division et % pour le
module.
■ Les opérateurs unaires sont plus (+), négation (-), décrémenter (--) et incrémenter (++). Les
opérateurs d'incrémentation et de décrémentation peuvent être soit préfixés, soit postfixés.
■ Par exemple, si la variable a a la valeur 7, la valeur de l'expression suivante est 24 :
(■Ha) *3
■ Mais la valeur de l'expression suivante est 21 :
(a++) *3
■ Dans les deux cas, a est fixé à 8.
■ Mais la valeur de l'expression suivante est 21 :
(a++) * 3

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

65 | Page

VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

■ Dans les deux cas, a est fixé à 8.

■ Toutes les opérations numériques sont effectuées en virgule flottante double précision
Les règles de priorité d'un langage spécifient quel opérateur est évalué en premier lorsque deux opérateurs
avec une priorité différente sont adjacents dans une expression.
Les règles d'associativité d'un langage spécifient quel opérateur est évalué en premier lorsque deux
opérateurs ayant la même priorité sont adjacents dans une expression.

division . multiplication les deux ont la même priorité mais

opérateur l'associativité de gauche à droite (LTR)

L'OBJET Mathématique
• L'objet Math fournit une collection de propriétés
d'objets Number et de méthodes qui fonctionnent sur les objets Number. L'objet Math possède des
méthodes pour les fonctions trigonométriques, telles que sin (pour sinus) et cos (pour cosinus), ainsi
que pour d'autres opérations mathématiques couramment utilisées.

• Parmi ceux-ci, on trouve floor, pour tronquer un nombre ; round, pour arrondir un nombre ; et max,
pour renvoyer le plus grand de deux nombres donnés.

L'OBJET NUMÉRIQUE
L'objet Number inclut une collection de propriétés utiles qui ont des valeurs constantes. Le tableau 4.3
répertorie les propriétés de Number. Ces propriétés sont référencées par le numéro.

66 | Page VSISCM
PROPRIÉTÉ : Signification
MAX. VALEUR :Plus grand nombre représentable
MIN. VALEUR : Le plus petit nombre représentable
NaN : Pas un numéro
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

POSITIF-INFINI :Valeur spéciale pour représenter l'infini

PI NÉGATIF-INFINI :Valeur spéciale pour représenter l'infini négatif : La valeur de π

La méthode toString convertit le nombre par lequel elle est appelée en une chaîne. Exemple : var price =
427, str_price ;
Btr_price = [Link]();
str_price = [Link]() ;

L'OPÉRATEUR DE CATÉNATION DE CHAÎNES

• Les chaînes JavaScript ne sont pas stockées ou traitées comme des tableaux de caractères ; ce sont
plutôt des valeurs scalaires unitaires.
• La chaîne de caractères est spécifiée avec l'opérateur indiqué par un signe plus (+). Par exemple, si la
valeur de first est « Divya »,
la valeur de l'expression suivante est « Divya Gowda » :
premier + " Gowda "

CONVERSIONS DE TYPE IMPLICITES

• L'interpréteur JavaScript effectue plusieurs conversions de types implicites différentes. De telles

conversions sont appelées conversions.
• Si l'un des opérandes d'un opérateur + est une chaîne, l'opérateur est interprété comme un opérateur
de chaîne.
• Si l’autre opérande n’est pas une chaîne, il est contraint en chaîne.
Exemple 1 : « Août » + 1977 -> « Août 1997 »
Exemple 2 : 7 * « 3 » -> 21 et ne sera pas évalué comme une chaîne

67 | Page VSISCM

CONVERSIONS DE TYPE EXPLICITES

• Les chaînes contenant des nombres peuvent être converties en nombres avec le constructeur String,
comme dans le code suivant :
var str_value = Chaîne (valeur);

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• Cette conversion pourrait également être effectuée avec la méthode toString, qui présente l'avantage
de pouvoir recevoir un paramètre pour spécifier la base du nombre résultant.
var num = 6;
var str_value ■ [Link](); //le résultat est "6"
var str_value_binary = [Link](2); //le résultat est "110"

• Un nombre peut également être converti en chaîne en le reliant à la chaîne vide. De plus, var
number = Number(aString);
• Le nombre dans la chaîne ne peut être suivi d'aucun caractère, à l'exception d'un espace. JavaScript
dispose de deux fonctions de chaîne prédéfinies qui ne présentent pas ce problème.
• La fonction parselnt recherche dans son paramètre de chaîne un littéral entier. Si un
est trouvé au début de la chaîne, il est converti en nombre et renvoyé. Si la chaîne ne
commence pas par un littéral entier valide, NaN est renvoyé.

• La fonction parseFloat est similaire à parselnt, mais elle recherche un littéral à virgule
flottante, qui peut avoir un point décimal, un exposant ou les deux. Dans parselnt et
parseFloat, le littéral numérique peut être suivi de n'importe quel caractère non
numérique sans causer de problème

Propriétés et méthodes de la chaîne

L'objet String comprend une propriété, une longueur et une grande collection de méthodes. Le nombre de
caractères d'une chaîne est stocké dans la propriété length comme suit :
var str = "Georges";
var len = [Link]; //maintenant, len=6

68 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

AAALA [Link]
MCUVOG TolerEUel Résultat
Renvoie le caractère de l'objet String qui se trouve à la position spécifiée
char À un certain nombre

। Renvoie la position dans l'objet String du paramètre

indexOf Chaîne d'un caractère
Renvoie la sous-chaîne de l'objet String de la première position du
sous-chaîne Deux nombres paramètre à la deuxième

Convertit toutes les lettres majuscules de la chaîne en minuscules

en minuscules Aucun
। Convertit toutes les lettres minuscules de la chaîne en majuscules
en majuscules Aucun Tableau 4.4 Méthodes de strina

Considérez, var str = "George";

Maintenant, [Link](2) est 'o' [Link]('r') est 3 [Link](2, 4) est 'org' [Link]() est
'george'

LE type d'OPÉRATEUR
• L'opérateur typeof renvoie le type de son opérande unique.
• typeof produit « number », « string » ou « boolean » si l'opérande est respectivement de type
primitif Number, String ou Boolean.
• Si l'opérande est un objecteur nul, typeof produit "object".
• Si l'opérande est une variable à laquelle aucune valeur n'a été attribuée, typeof produit « undefined »,
• Reflétant le fait que les variables elles-mêmes ne sont pas typées.
• Notez que l’opérateur typeof renvoie toujours une chaîne.
• L'opérande pour typeof peut être placé entre parenthèses, ce qui lui donne l'apparence d'une fonction.
• Par conséquent, typeof x et typeof (x) sont équivalents.

DÉCLARATIONS D'ATTRIBUTION
• Il existe un opérateur d'affectation simple, noté =, et une multitude d'opérateurs d'affectation composés,
tels que += et Par exemple, l'instruction a += 7; a le même sens que a = a + 7;

69 | Page VSISCM
Ce document est disponible gratuitement sur étude
L'OBJET Date
• Un objet Date est créé avec l'opérateur new et le constructeur Date, qui a plusieurs formes,
• var aujourd'hui = nouvelle Date();

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

• Les propriétés de date et d'heure d'un objet Date se présentent sous deux formes : temps local et temps
universel coordonné (UTC, anciennement appelé temps moyen de Greenwich).
• Le tableau 4.5 présente les méthodes, ainsi que les descriptions, qui permettent de récupérer des
informations à partir d'un
Objet Date.

Méthode Description

obtenirDate() Renvoie le jour du mois (de 1 à 31)

obtenir le jour() Renvoie le jour de la semaine (de 0 à 6)

obtenir l'année complète() Renvoie l'année

obtenir les heures() Renvoie l'heure (de 0 à 23)

obtenir des millisecondes () Renvoie les millisecondes (de 0 à 999)

obtenir les minutes() Renvoie les minutes (de 0 à 59)

obtenirMois() Renvoie le mois (de 0 à 11)

obtenirSecondes() Renvoie les secondes (de 0 à 59)

obtenir l'heure() Renvoie le nombre de millisecondes depuis minuit le 1er janvier 1970
et une date spécifiée

70 | Page VSISCM

SORTIE D'ÉCRAN ET ENTRÉE AU CLAVIER

• JavaScript modélise le document XHTML avec l'objet Document.
• La fenêtre dans laquelle le navigateur affiche un document XHTML est modélisée avec l'objet
Window.

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• L'objet Window comprend deux propriétés, document et window.

• La propriété document fait référence à l'objet Document.
• La propriété window est autoréférentielle ; elle fait référence à l'objet Window.
• write est utilisé pour créer du code XHTML, la seule ponctuation utile dans son paramètre est sous la
forme de balises XHTML. Par conséquent, le paramètre d'écriture inclut souvent<br /> .
• La méthode writeln ajoute implicitement « \n » à son paramètre, mais comme les navigateurs ignorent
les sauts de ligne
• lors de l'affichage de XHTML, cela n'a aucun effet sur la sortie.
• Le paramètre d'écriture peut inclure n'importe quelle balise et contenu XHTML.
• La méthode d'écriture peut en fait prendre n'importe quel nombre de paramètres.
• Plusieurs paramètres sont concaténés et placés dans la sortie
• Exemple : document .write (« Le résultat est : », résultat, « <br />") ;

Il existe 3 types de boîtes pop-up :

► Alert
► Confirm
► Invite

• La méthode d'alerte ouvre une fenêtre de dialogue et affiche son paramètre dans cette fenêtre. Il affiche
également un bouton OK.
• Le paramètre de chaîne d'alerte n'est pas du code XHTML ; c'est du texte brut. Par conséquent, le
paramètre de chaîne d'alerte peut inclure\n mais ne doit jamais inclure<br /> .
alert("La somme est :" + somme + "\n");

71 | Page VSISCM

Ce document est disponible gratuitement sur • studocu

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• La méthode confirm ouvre une fenêtre de dialogue dans laquelle la méthode affiche son paramètre de
chaîne, ainsi que deux boutons : OK et Annuler. confirm renvoie une valeur booléenne qui indique la
saisie du bouton de l'utilisateur : true pour OK et false pour Annuler.
• Cette méthode est souvent utilisée pour offrir à l’utilisateur le choix de poursuivre un processus.
• var question = confirm("Voulez-vous continuer ce téléchargement ?");
• Une fois que l'utilisateur a appuyé sur l'un des boutons de la fenêtre de dialogue de confirmation, le
script peut tester la variable, la question et réagir en conséquence.

• La méthode prompt crée une fenêtre de dialogue qui contient une zone de texte utilisée pour collecter une
chaîne d'entrée de l'utilisateur, que l'invite renvoie comme valeur.

DÉCLARATIONS DE CONTRÔLE

• Une instruction composée en JavaScript est une séquence d'instructions délimitées par des accolades.
• Une construction de contrôle est une instruction de contrôle accompagnée de l'instruction ou de l'instruction
composée dont elle contrôle l'exécution.
EXPRESSIONS DE CONTRÔLE

• Le résultat de l’évaluation d’une expression de contrôle est l’une des valeurs booléennes true et false. Si la
valeur d'une expression de contrôle est une chaîne, elle est interprétée comme vraie, sauf s'il s'agit d'une
chaîne vide (" ") ou d'une chaîne nulle ("0").

• Si la valeur est un nombre, elle est vraie à moins qu'elle ne soit zéro (0). Une expression relationnelle possède
deux opérandes et un opérateur relationnel. Le tableau 4.6 répertorie les opérateurs relationnels.

VSISCM 72 | Page

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Opérateur Description Exemples

retournant vrai

Égal (==) Renvoie vrai si les opérandes sont égaux. 3 == VAR1

"3" == VAR1
3 == '3'

Pas égal (!=) Renvoie vrai si les opérandes ne sont pas égaux. VAR1 != 4
VAR2 != "3"

Égalité stricte (===) Renvoie vrai si les opérandes sont égaux et du même type. 3 === VAR1

Voir aussi [Link] et sameness en JS.

Strict pas Renvoie vrai si les opérandes sont du même type mais pas VAR1 !== "3"
3 !== '3'
égal (!==) égaux, ou sont de type différent.
Supérieur à (>) Renvoie vrai si l'opérande de gauche est supérieur à l'opérande VAR2 > VAR1
"12" > 2
de droite.
Supérieur ou égal Renvoie vrai si l'opérande de gauche est supérieur ou égal à VAR2 >= VAR1

VAR1 >= 3
(>=) l'opérande de droite.

Moins de (<) Renvoie vrai si l'opérande de gauche est inférieur à l'opérande VAR1 < VAR2
de droite. "2" < 12

Inférieur ou égal Renvoie vrai si l'opérande de gauche est inférieur ou égal à

(<=) l'opérande de droite.

• JavaScript dispose d'opérateurs pour les opérations booléennes AND, OR et NOT. Ce sont && (ET), | I (OU) et !
(NON). && et | I sont tous deux des opérateurs de court-circuit.

DÉCLARATIONS DE SÉLECTION
Les instructions de sélection (if-then et if-then-else) de JavaScript sont similaires à celles des langages de
programmation courants. Il est possible de sélectionner des instructions simples ou composées, par exemple :
Si (a > b)
document, .write <« a est supérieur à b<br /> ”);
sinon { a = b;

73 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

[Link]("a n'était pas supérieur à b<br /> ",

« Maintenant, ils sont égaux<br /> ");
}

DÉCLARATION DE L'INTERRUPTEUR
• JavaScript possède une instruction switch similaire à celle de Java. Dans tous les cas, le segment, l'instruction(s)
peut être soit une séquence d'instructions, soit une instruction composée ; l'instruction break transfère le contrôle
hors de l'instruction composée dans laquelle elle apparaît.

• L'expression de contrôle d'une instruction switch peut être évaluée comme un nombre, une chaîne ou une valeur
booléenne. Les étiquettes de cas peuvent également être des nombres, des chaînes ou des booléens, et différentes
valeurs de cas peuvent être de types différents.

//commutateur, js //[Link]
var choice = prompt("Sélectionnez votre étoile préférée \n" <html>
+ <body>
"1 Puneeth Rajkumar \n" + type de script = "texte/javascript" src = "[Link]">
"2 Mahesh Babu\n" + </script>
"3 Suriya \n"); </body>
</html>
(choix de commutation)
{ Choisissez votre star préférée
1 Puneeth Rajkumar
cas "1": documentwrite("Puneeth"); 2 Mahesh Babu
casser: 3 Suriya
cas "2": documentwrite("Mahesh Babu");
casser;
1
cas « 3 » : documentwrite("Suriya");
casser;
par défaut : [Link]("choix
OK ' Annuler
invalide");
}

74 | Page VSISCM
DÉCLARATIONS DE BOUCLE :

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• La forme générale de l'instruction while

• La forme générale de l'instruction while

// Récupérer les différentes parties de la date

var datestring =aujourd'[Link]();

var jour = aujourd'[Link]();
var mois = aujourd'[Link]();
var année = aujourd'[Link]();
var timeMi11iseconds = aujourd'[Link]();
var heure = aujourd'[Link]);
var minute = aujourd'[Link]();
var seconde = aujourd'[Link]();
var milliseconde = aujourd'hui.getMi11iseconds();

// Afficher les pièces

document.écrire(
"Date : " + chaîne de date + "<br /> ",
"Jours " + jour + "<br /> •,
« Mois : « + mois + »<br /> *,
•Année : « + année « »<br /> ",

75 | Page VSISCM

•Temps en millisecondes : « +timeMi11iseconds + »<br /> ",

•Heure : « +heure+ »<br /> ”);
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

« Minutes : • ♦ minutes ♦ »<br /> ",

•Deuxièmement : • ♦ deuxième ♦ "<br /> *,
« Milliseconde : • ♦ milliseconde ♦ »<br /> •);

JavaScript possède une instruction do-while, dont la forme est la suivante :

• instruction do ou composée
• while (expression de contrôle)while (expression de contrôle)
JavaScript inclut une autre instruction de boucle, l'instruction for-in, qui est le plus souvent utilisée avec des
objets, for (identifiant dans l'objet)
déclaration ou déclaration composée

CRÉATION ET MODIFICATION D'OBJET

• Les objets sont souvent créés avec une nouvelle expression, qui doit inclure un appel à une méthode constructeur.
Le constructeur appelé dans la nouvelle expression crée les propriétés qui caractérisent le nouvel objet.

• En JavaScript, cependant, l’opérateur new crée un objet vide, c’est-à-dire sans propriétés.
• L'instruction suivante crée un objet qui n'a aucune propriété :
var mon_objet = nouvel objet ();

• Dans ce cas, le constructeur appelé est celui de Object, qui ne confère au nouvel objet aucune propriété, bien qu'il
ait accès à certaines méthodes héritées.

76 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• La variable my_object fait référence au nouvel objet. Les appels aux constructeurs doivent inclure des
parenthèses, même s'il n'y a pas de paramètres.
• Les propriétés d'un objet sont accessibles avec la notation par points, dans laquelle le premier mot est le nom de
l'objet et le second est le nom de la propriété. Étant donné que les propriétés ne sont pas des variables, elles ne
sont jamais déclarées dans javabcnpr. Cependant, l'opérateur new crée un objet DianK, c'est-à-dire un objet sans
propriétés.
• L'instruction suivante crée un objet qui n'a aucune propriété :
var mon_objet - nouvel objet ();

• Dans ce cas, le constructeur appelé est celui de Ob j ect, qui ne dote le nouvel objet d'aucune propriété, bien qu'il
ait accès à certaines méthodes héritées.
• La variable my_object fait référence au nouvel objet. Les appels aux constructeurs doivent inclure des
parenthèses, même s'il n'y a pas de paramètres.
• Les propriétés d'un objet sont accessibles avec la notation par points, dans laquelle le premier mot est le nom de
l'objet et le second est le nom de la propriété. Parce que les propriétés ne sont pas des variables, elles ne sont
jamais déclarées.

• Le nombre de membres d'une classe dans un langage orienté objet typique est fixé au moment de la compilation.
Le nombre de propriétés dans un objet JavaScript est dynamique.
• À tout moment au cours de l’interprétation, des propriétés peuvent être ajoutées ou supprimées d’un objet. Une
propriété pour un objet est créée en attribuant une valeur au nom de cette propriété. Considérez l’exemple
suivant :
var ma voiture = {marque : « Ford », modèle : « Contour SVT »};
Les propriétés sont accessibles de deux manières.
var propl = ma [Link];
var prop2 = ma_voiture["marque"];
les variables propl et prop2 ont toutes deux la valeur "Ford".

• Une propriété peut être supprimée avec delete, comme dans l'exemple suivant : delete my_car.model ;

• JavaScript dispose d'une instruction de boucle, for-in, qui est parfaite pour lister les propriétés d'un objet, for (var
prop in my_car>
[Link]("Nom : ", prop, Valeur : ", my_car[prop], "<br /> « );

77 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

TABLEAUX
CRÉATION D'OBJETS DE Matrice

• La manière habituelle de créer un objet est d'utiliser l'opérateur new et d'appeler un

constructeur. Dans le cas de tableaux, le constructeur est nommé Array :
var ma_liste = new Array(1, 2, "trois", "quatre");
var votre_liste = new Array(100);

• La deuxième façon de créer un objet Array consiste à utiliser une valeur de tableau littérale,
qui est une liste de valeurs entre parenthèses :
var ma_liste_2 = [1, 2, "trois", "quatre"];

CARACTÉRISTIQUES DES OBJETS DE TABLEAU

• L'index le plus bas de chaque tableau JavaScript est zéro. L'accès aux éléments d'un tableau
est spécifié avec des expressions d'indice numérique placées entre parenthèses.
• La longueur d'un tableau est l'indice le plus élevé auquel une valeur a été attribuée, plus 1.
• Par exemple, si ma_liste est un tableau avec quatre éléments et que l'instruction suivante est
exécutée, la nouvelle longueur de ma liste sera de 48.
ma_liste[47] = 2222;

• La longueur d'un tableau est accessible en lecture et en écriture via la propriété length, qui est
créée pour chaque objet tableau par le constructeur Array. Par exemple, ma_liste.length =
1002 ;

• Un tableau est allongé en définissant sa propriété de longueur sur une valeur plus grande,
raccourci en définissant sa propriété de longueur sur une valeur plus petite.
• L'exemple suivant, insert_names js, illustre les tableaux JavaScript. Ce script contient un
tableau de noms, classés par ordre alphabétique. Il utilise l'invite pour obtenir de nouveaux
noms, un à la fois, et les insère dans le tableau existant. Notez que chaque nouveau nom
entraîne l’agrandissement du tableau d’un élément.

78 | Page VSISCM
// La liste originale des noms

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

var name_list =new Array("Al", "Betty", "Kasper", "Michael", "Roberto", "Zimbo*);

var nouveau_nom, index, dernier ;
// Boucle pour obtenir un nouveau nom et l'insérer
while (new_name= prompt!"Veuillez saisir un nouveau nom", ““)) {
dernier = nom_liste.longueur - 1;
// Boucle pour trouver l'emplacement du nouveau nom
while (dernier >= 0 && liste_de_noms[dernier ] > nouveau_nom) ( liste_de_noms(dernier + 1)=
liste_de_noms(dernier]; dernier—;
}

// Insérer le nouveau nom à son emplacement dans le tableau

nom_liste(dernier + 1] = nouveau_nom;
// Afficher le nouveau tableau
document.écrire(“<p> <b>La nouvelle liste de noms est «</b> »,</br> ”);

while (new_name= prompt("Veuillez saisir un nouveau nom", "")) {

dernier = nom_liste.longueur - 1;
// Boucle pour trouver l'emplacement du nouveau nom
tandis que (dernier >= 0 && nane_list(dernier] > nouveau_nom) {
nom_liste(dernier + 1) = nom_liste[dernier ];
dernier-;
// Insérer le nouveau nom à son emplacement dans le tableau
nom_liste(dernier + 1] “ nouveau_nom ;
// Afficher le nouveau tableau
document.écrire( "<p> <b>La nouvelle liste de noms est :</b> ",
"<br /> ");
pour (index = 0; index < nom_liste.length; index++)
[Link](liste_noms(index), "<br /> ”);
document.écrire("</p> ");
} //** fin de la boucle while externe

79 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

MÉTHODES de tableau

• Les objets de tableau ont une collection de méthodes utiles, dont la plupart sont décrites dans
cette section.
• La méthode join convertit tous les éléments d'un tableau en chaînes et les caténaire en une
seule chaîne. Si aucun paramètre n'est fourni pour la jointure, les valeurs de la nouvelle chaîne
sont séparées par des virgules. Si un paramètre de chaîne est fourni, il est utilisé comme
séparateur d'éléments.

• La méthode reverse inverse l'ordre des éléments de l'objet Array par lequel elle est appelée.

• La méthode de tri force les éléments du tableau à devenir des chaînes s'ils ne sont pas déjà des
chaînes et les trie par ordre alphabétique
• La méthode concat enchaîne ses paramètres réels à la fin de l'objet Array sur lequel elle est
appelée.
• Lorsque la méthode toString est appelée via un objet Array, chacun des éléments de l'objet est
converti (si nécessaire) en chaîne. Ces chaînes sont enchaînées, séparées par des virgules.
Ainsi, pour les objets Array, la méthode toString se comporte un peu comme join.
• Les méthodes push, pop, unshift et shift de Array permettent l'implémentation facile de piles
et de files d'attente dans les tableaux. Les méthodes pop et push suppriment et ajoutent
respectivement un élément à l'extrémité supérieure d'un tableau.

FONDAMENTAUX

• Une définition de fonction se compose de l'en-tête de la fonction et d'une instruction

composée qui décrit les actions de la fonction. Cette instruction composée est appelée le
corps de la fonction.

• Un en-tête de fonction se compose du mot réservé fonction, du nom de la fonction et d'une

liste de paramètres entre parenthèses s'il y en a.
• Une instruction de retour renvoie le contrôle de la fonction dans laquelle elle apparaît à
l'appelant de la fonction.
• Un corps de fonction peut inclure une ou plusieurs instructions de retour. S'il n'y a aucune
instruction de retour dans une fonction ou si le retour spécifique qui est exécuté n'inclut
pas d'expression, la valeur renvoyée est indéfinie.

• Les fonctions JavaScript sont des objets, donc les variables qui les référencent peuvent
être traitées comme d’autres références d’objet : elles peuvent être transmises en tant que
paramètres, être affectées à d’autres variables et être les éléments d’un tableau. L'exemple
suivant est illustratif :

80 | Page VSISCM

fonction fun() { [Link] {

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Ce surley est amusant1<br/> ");}

ref_fun = fun; // Maintenant, ref_fun fait référence à l'objet fun
fun(); // Un appel à fun
ref_Eun(); // Également un appel à fun

• Étant donné que les fonctions JavaScript sont des objets, leurs références peuvent être des
propriétés dans d’autres objets, auquel cas elles agissent comme des méthodes.

VARIABLES LOCALES

• La portée d'une variable est la plage d'instructions sur laquelle elle est visible.

• Lorsque JavaScript est intégré dans un document XHTML, la portée d'une variable est la
plage de lignes du document sur laquelle la variable est visible.

• Les variables déclarées implicitement ont une portée globale, c'est-à-dire qu'elles sont visibles
dans l'ensemble du document XHTML

• Il est généralement préférable que les variables utilisées uniquement dans une fonction aient
une portée locale, ce qui signifie qu'elles sont visibles et ne peuvent être utilisées que dans le
corps de la fonction. Toute variable explicitement déclarée avec var dans le corps d'une
fonction a une portée locale.

• Si une variable définie à la fois comme variable locale et comme variable globale apparaît
dans une fonction, la variable locale a la priorité, masquant ainsi efficacement la variable
globale portant le même nom. C'est l'avantage des variables locales.

PARAMÈTRES

• Les valeurs de paramètres qui apparaissent dans un appel à une fonction sont appelées
paramètres réels.
• Les noms de paramètres qui apparaissent dans l'en-tête d'une définition de fonction, qui
correspondent aux paramètres réels dans les appels à la fonction, sont appelés paramètres
formels.
• JavaScript utilise la méthode de passage de paramètres par valeur.
• Lorsqu'une fonction est appelée, les valeurs des paramètres réels spécifiés dans l'appel
sont, en effet, copiées dans leurs paramètres formels correspondants, qui se comportent
exactement comme des variables locales.

• En raison du typage dynamique de JavaScript, il n'y a pas de vérification de type des

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

paramètres. La fonction appelée elle-même peut vérifier les types de paramètres avec
l'opérateur typeof.

81 | Page VSISCM

Ce document est disponible gratuitement sur • études

• Le nombre de paramètres dans un appel de fonction n'est pas vérifié par rapport au
nombre de paramètres formels dans la fonction appelée.
• Dans la fonction, les paramètres réels excédentaires transmis sont ignorés ; les paramètres
formels excédentaires sont définis comme indéfinis.
• Tous les paramètres sont communiqués via un tableau de propriétés, des arguments, qui,
comme les autres objets de tableau, possède une propriété nommée longueur.
• En accédant à la longueur des arguments, une fonction peut déterminer le nombre de
paramètres réels qui ont été transmis.

// paramè[Link]
// La fonction params et un pilote de test pour celle-ci.
// Cet exemple illustre un nombre variable de
// paramètres de fonction
// Paramètres de la fonction
// Paramètres : un nombre variable de paramètres
II Retours : rien
// Affiche ses paramètres
fonction paramètres(a, b) {
[Link]("Les paramètres de fonction ont été transmis",
[Link], " paramètre(s)<br /> ");
[Link]"Les valeurs des paramètres sont :<br /> ");
pour (var arg = 0; arg < [Link]; arg++)
[Link](arguments(arg|, "<br /> ");
document.écrire("<br /> ");
}
// Un pilote de test pour les paramètres de fonction
paramètres("Mozart");
paramètres("Mozart", "Beethoven");

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

params("Mozart", "Beethoven", "Tchaïkovski");

82 | Page VSISCM
CONSTRUCTEURS

• Les constructeurs JavaScript sont des méthodes spéciales qui créent et initialisent les
propriétés des objets nouvellement créés.
• Chaque nouvelle expression doit inclure un appel à un constructeur dont le nom est le même
que celui de l'objet en cours de création.
• Les constructeurs sont en fait appelés par l'opérateur new, qui les précède immédiatement
dans la nouvelle expression.
• De toute évidence, un constructeur doit pouvoir référencer l’objet sur lequel il doit opérer.
JavaScript dispose d'une variable de référence prédéfinie à cet effet, nommée ceci.
• Lorsque le constructeur est appelé, il s'agit d'une référence à l'objet nouvellement créé. La
variable this est utilisée pour construire et initialiser les propriétés de l'objet.
• Par exemple, le constructeur
fonction voiture(nouvelle_marque, nouveau_nœud, nouvelle_année) { [Link] “
nouvelle_marque;
[Link]èle - nouveau_modèle;
[Link]ée ■ nouvelle_année;
}
pourrait être utilisé comme dans l'énoncé suivant :
ma_voiture = nouvelle voiture("Ford", "Contour SVT", "2000");

CORRESPONDANCE DE MODÈLES À L'AIDE D'EXPRESSIONS RÉGULIÈRES

• JavaScript dispose de puissantes capacités de recherche de modèles basées sur des

expressions régulières.
• Il existe deux approches de la recherche de motifs en JavaScript : l'une basée sur l'objet
RegExp et l'autre basée sur les méthodes de l'objet String.
•
La méthode de recherche de modèles la plus simple est la recherche, qui prend un modèle
comme paramètre.
• La méthode de recherche renvoie la position dans l'objet String (par lequel elle est appelée) à
laquelle le modèle correspond.
• S'il n'y a pas de correspondance, la recherche renvoie -1.
• La plupart des personnages sont normaux, ce qui signifie que, selon un modèle, ils
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

correspondent à eux-mêmes.
• La position du premier caractère de la chaîne est 0.

83 | Page VSISCM

À titre d’exemple, les déclarations suivantes

var str — « Les lapins sont poilus » ;
var position “ [Link]!/bits/);
si !position >= O)
[Link]!"'bits' apparaît en position", position,
"<br /> ");
autre
[Link]("** bits' n'apparaît pas dans str<br /> ”);
@@@@@@@@@@@@@@@
produire le résultat suivant :
« bits » apparaît en position 3
@@@@@@@@@@@@@@

MODÈLES DE CARACTÈRES ET DE CLASSE DE CARACTÈRES

• Les métacaractères sont des caractères qui ont des significations particulières dans certains
contextes dans les modèles.
• Voici les métacaractères du modèle :
• \l () []{}A$* + ?.
• Les métacaractères peuvent eux-mêmes être mis en correspondance en étant immédiatement
précédés d'une barre oblique inverse.
• Un point correspond à n’importe quel caractère sauf une nouvelle ligne.
• /snow./ correspond à « snowy », « snowe » et « snowd »
• /3\.4/ correspond à 3.4. mais /3Af correspondrait à 3.4 et 37 4, entre autres.
• [abc] correspond à « a », « b » et « c »
• [ah] correspond à n'importe quelle lettre minuscule de « a » à « h »
•». [^aeiou] correspond à n'importe quelle lettre minuscule sauf « a », « e », « i », « o » et « u
ANCRES
•
Un motif est lié à une position de chaîne avec une ancre. Un modèle peut être spécifié
pour correspondre uniquement au début de la chaîne en le précédant d'une ancre
circonflexe (').
•
Par exemple, le modèle suivant correspond à « les perles sont jolies » mais ne correspond
pas à « mes perles sont jolies » :
•
/^perle/
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• Un modèle peut être spécifié pour correspondre à la fin d'une chaîne uniquement en
suivant le modèle avec une ancre de signe dollar. Par exemple, le modèle suivant
correspond à « J'aime l'or » mais ne correspond pas à « doré » :

84 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• /or$/
• Les caractères d'ancrage sont comme des modèles nommés par limite : ils ne
correspondent pas à des caractères spécifiques dans la chaîne ; ils correspondent plutôt à
des positions avant, entre ou après des caractères.

MODIFICATEURS DE MODÈLE
• Les modificateurs sont spécifiés sous forme de lettres juste après le délimiteur droit du
modèle.
• Le modificateur i fait correspondre les lettres du motif aux lettres majuscules ou
minuscules de la chaîne.
• Par exemple, le modèle /Apple/i correspond à « APPLE », « apple », « APPle » et toute
autre combinaison d'orthographes majuscules et minuscules du mot « apple ».
• Le modificateur x permet à un espace blanc d'apparaître dans le motif.

ERREURS DANS LES SCRIPTS

L'interpréteur JavaScript est c à partir du débogage d'un programme dans l'interpréteur
JavaScript, les erreurs de script provoquent le message de diagnostic de navigation, vous devez
être capable de détecter divers programmes plus typiques trouvés pendant la navigation pour ne
pas afficher le document, examinez simplement le code

//démo de débogage.
// Un exemple pour illustrer l'aide au débogage
var ligne;

ligne = 0;
tandis que(ligne != 4 {
[Link]("la ligne est",ligne "<br /> ”);
ligne++;
}

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

85 | Page VSISCM
Ce document est disponible gratuitement sur C

studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Unité - 4
Script Java et documents HTML

L'ENVIRONNEMENT D'EXÉCUTION D'IAVASCRIPT

• Un navigateur affiche un document XHTML dans une fenêtre sur l'écran du client
• L'objet JavaScript Window représente la fenêtre qui affiche le document.
• Les propriétés de l'objet Window sont visibles par tous les scripts JavaScript qui apparaissent
implicitement ou explicitement dans le document XHTML de la fenêtre, ils incluent donc
toutes les variables globales.
• Chaque objet Window possède une propriété nommée document, qui est une référence à
l'objet Document que la fenêtre affiche.
• Chaque objet Document possède un tableau de formulaires, dont chaque élément représente un
formulaire dans le document
• Chaque élément de tableau de formulaires possède un tableau d'éléments comme propriété, qui
contient les objets qui représentent les éléments de formulaire XHTML, tels que les boutons et
les menus.
• Les objets de document ont également des tableaux de propriétés pour les ancres, les liens, les
images et les applets.

LE MODÈLE D'OBJET DE DOCUMENT

• La motivation originale du DOM standard était de fournir une spécification qui permettrait
aux programmes Java et aux scripts JavaScript qui traitent des documents XHTML d'être
portables entre différents navigateurs.
• Le DOM est une interface de programmation d'application (API) qui définit une interface
entre les documents XHTML et les programmes d'application.
• Il s’agit d’un modèle abstrait car il doit s’appliquer à une variété de langages de
programmation d’application.
• Chaque langage qui s'interface avec le DOM doit définir une liaison à cette interface.
• La spécification DOM actuelle se compose d'une collection d'interfaces, dont une pour
chaque type de nœud d'arborescence de document.
• Ils définissent les objets, les méthodes et les propriétés associés à leurs types de nœuds
respectifs.

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique
86 | Page VSISCM
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• Avec le DOM, les utilisateurs peuvent écrire du code dans des langages de programmation
pour créer des documents, se déplacer dans leurs structures et modifier, ajouter ou
supprimer des éléments et leur contenu.
• Les documents dans le DOM ont une structure arborescente, mais il peut y avoir plusieurs
arborescences dans un document
• Étant donné que le DOM est une interface abstraite, il n’impose pas que les documents
soient implémentés sous forme d’arbres ou de collections d’arbres.
• <html xmlns = “[Link]
• <head><title>Un tableau simple</title>
• </head>
• <body>
• <table border = "border">
• <tr>

• <th> </th>
• <th>Pomme</th>
• <th>Orange</th>
• </tr>
• <tr>

• <th>Petit-déjeuner</th>
• <td>0</td>
• <td>1</td>
• </tr>
• </table>
• </body>
• </html>

87 | Page VSISCM
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique
Ce document est disponible gratuitement sur C

studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

"une table simple" <tr> <tr>

ACCÈS AUX ÉLÉMENTS EN JAVASCRIPT

Les éléments d’un document XHTML ont des objets correspondants qui sont visibles par un
script JavaScript intégré. Il existe plusieurs façons d'adresser l'objet associé à un élément de
formulaire XHTML en JavaScript. La méthode originale (DOM 0) consiste à utiliser les tableaux
de formulaires et d'éléments de l'objet Document, qui est référencé via la propriété document de
l'objet Window.

L'adresse DOM du bouton dans cet exemple, utilisant les tableaux forms et elements, est la
suivante : var dom — [Link][0].elements[0];
Le problème avec cette approche de l’adressage des éléments est que l’adresse DOM est définie
par des éléments d’adresse qui peuvent changer, à savoir les tableaux de formulaires et
d’éléments.

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

88 | Page VSISCM

En utilisant les attributs de nom, l'adresse DOM du bouton est la suivante :

var dom = [Link];
L’un des inconvénients de cette approche est que la norme XHTML 1.1 n’autorise pas
l’attribut name dans l’élément de formulaire, même si l’attribut est désormais valide pour les
éléments de formulaire. Il s’agit d’un problème de validation, mais il ne pose aucune
difficulté aux navigateurs. Par conséquent, nous utilisons alternativement, var dom =
[Link](”turnItOn");
Les boutons d’un groupe de cases à cocher partagent souvent le même nom. Les boutons d’un
groupe de boutons radio ont toujours le même nom. Dans ces cas, les noms des boutons
individuels ne peuvent évidemment pas être utilisés dans leurs adresses DOM. Pour accéder
aux tableaux, l'adresse DOM de l'objet de formulaire doit d'abord être obtenue, comme
indiqué :
<form id » "vehicleGroup">
<input type = "checkbox" name = "vehicles1
valeur = "voiture" /> Voiture
<input type - "checkbox" name = "vehicles’
valeur = "camion" /> Camion
<input type = "checkbox" name = "vehicles'
valeur = « vélo » /> Vélo
</form>
La propriété verified d'un objet checkbox est définie sur true si le bouton est coché. Pour
l'échantillon précédent
groupe de cases à cocher, le code suivant compterait le nombre de cases à cocher cochées :
var numChecked = 0 ;
var dom =[Link]("vehicleGroup");
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

pour (index = 0; index < [Link]; index*+)

89 | Page VSISCM

si ([Link]!index].checked)
numChecked++;
Les boutons radio peuvent être adressés et traités exactement comme les cases à cocher dans
le code précédent.

ÉVÉNEMENTS ET GESTION D'ÉVÉNEMENTS

CONCEPTS DE BASE DE LA GESTION DES ÉVÉNEMENTS
• L’une des utilisations importantes de JavaScript pour la programmation Web est de
détecter certaines activités du navigateur et de l’utilisateur du navigateur et de fournir des
calculs lorsque ces activités se produisent. Ces calculs sont spécifiés avec une forme
spéciale de programmation appelée programmation événementielle.

• Dans la programmation conventionnelle (non pilotée par les événements), le code lui-
même spécifie l'ordre dans lequel il est exécuté, bien que l'ordre soit généralement affecté
par les données d'entrée du programme.
• Dans la programmation pilotée par événements, des parties du programme sont exécutées à
des moments totalement imprévisibles, souvent déclenchées par les interactions de
l'utilisateur avec le programme en cours d'exécution.
• Un événement est une notification indiquant qu'un événement spécifique s'est produit, soit
avec le navigateur, comme la fin du chargement d'un document, soit en raison d'une action
de l'utilisateur du navigateur, comme un clic de souris sur un

• Un gestionnaire d’événements est un script qui est implicitement exécuté en réponse à

l’apparition d’un événement. Les gestionnaires d’événements permettent à un document
Web de réagir aux activités du navigateur et de l’utilisateur.
• L’une des utilisations les plus courantes des gestionnaires d’événements est de vérifier les
erreurs simples et les omissions dans la saisie de l’utilisateur dans les éléments d’un
formulaire, soit lorsqu’ils sont modifiés, soit lorsque le formulaire est soumis.
• Ce type de vérification permet d'économiser le temps d'envoi de données de formulaire
incorrectes au serveur.
• Étant donné que les événements sont des objets JavaScript, leurs noms sont sensibles à la
casse. Les noms de tous les objets événement comportent uniquement des lettres

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

minuscules.
• Les événements sont créés par des activités associées à des éléments XHTML spécifiques.
• Le processus de connexion d'un gestionnaire d'événements à un événement est appelé
enregistrement.
• Il existe deux approches distinctes pour l'enregistrement du gestionnaire d'événements,
l'une qui attribue des attributs de balise et l'autre qui attribue des adresses de gestionnaire
aux propriétés d'objet.

90 | Page VSISCM
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Attribut Description

surblur Le script a été exécuté lorsque l'élément de formulaire perd le focus.

surchange Exécuter le script lorsque la valeur de l'élément est modifiée.

ment

surfocus Déclencher un événement lorsque l'élément est focalisé.

sur Le script est exécuté lorsque l'utilisateur saisit une entrée dans l'élément.
l'entrée

surinvalid Exécuter le script lorsque l'élément ne satisfait pas ses contraintes prédéfinies.
e

sur Déclenche l'événement lorsque l'utilisateur réinitialise les valeurs des éléments du
réinitialisation formulaire.

en Déclenche l'événement lorsqu'un champ de recherche reçoit une entrée.

recherche

sursélectio Déclenche l'événement lorsque l'utilisateur a sélectionné du texte.

nner

en cours Déclenche l'événement lorsqu'un formulaire est soumis.

de soumission

Attribut Description

touche Déclenche l'événement lorsque l'utilisateur appuie sur une touche du clavier.
enfoncée

pression Déclenchez l'événement lorsque l'utilisateur appuie sur la touche qui affiche un
de touche caractère.

91 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

clé en place Déclencher l'événement lorsque l'utilisateur relâche la touche actuellement

enfoncée.

Attribut Description

Cliquez Déclencher l'événement lorsque la souris clique sur l'élément.

double clic Déclencher l'événement lorsqu'un double-clic de la souris se produit sur

l'élément.

souris enfoncée Déclencher l'événement lorsque le bouton de la souris est appuyé sur
l'élément.

déplacer la Déclencher l'événement lorsque le pointeur de la souris se déplace sur

souris l'élément.

sortie de la Déclencher l'événement lorsque la souris se déplace en dehors de l'élément.

souris

survol de la Déclencher l'événement lorsque la souris se déplace sur l'élément.

souris

souris vers le
Déclencher l'événement lorsque le bouton de la souris est relâché.
haut

sur la molette de Obsolète. Utilisez l'attribut onwheel.

la souris

sur roue Déclencher l'événement lorsque la molette de la souris monte ou descend sur
l'élément

GESTION DES ÉVÉNEMENTS À PARTIR D'ÉLÉMENTS DU CORPS

Les événements les plus souvent créés par les éléments du corps sont le chargement et le déchargement.
Comme premier exemple de gestion d’événements, nous considérons le cas simple de la production
d’un message d’alerte lorsque le corps du document a été chargé. Dans ce cas, nous utilisons l'attribut
onload de<body> pour spécifier le gestionnaire d'événements :

92 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

93 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

GESTION DES ÉVÉNEMENTS À PARTIR DES ÉLÉMENTS DE ZONE DE TEXTE ET DE MOT

DE PASSE
Les zones de texte et les mots de passe peuvent créer quatre événements différents : flou, mise au point,
modification et sélection.

L'ÉVÉNEMENT FOCUS
//pas de [Link] //nochangejs
ehh ... fonction computeCostO
[Link]/titre-
type d'escript • "text/java script' sre • "nochangejs"> {
/scénario var poulet - documentgetElementByld("chickcn").valuc;
"/tête" var mouton = document getElementByld("mouton") valeur :
ccorps
var poisson = documentgetElementByld("poisson")valeur.
<torm jetton ="">
h3> Formulaire de commande d'articles non végétariens/h-
frontière stable - « frontière »»
«tr> document getElementByd("cost"[Link] = totalCost = poulet'150 + mouton'250 ♦
«th»lteme/th>
<th -Pricee /th poisson*100;
<th»Quantity«/th» J
</tr
<tr>
«th-Kebab au poulet (complet)</th>
etd-Rs 150e/td»
« td-cintype d'entrée • « texte » id - « poulet » taille • « 2 »/«/td-
4/tr Formulaire de commande d'articles
<tr> non végétariens
«th-Mouton Kaima (demi)c/th-
« td » Rs 2S0</td>
<td>< input type = 'texte" id = "mouton" size = "2"/>s/td» < Poulet Kabah (Tull) Il ISO
e/tr Niutton Kalmachaln Ra 250
<tr>
«th»Poisson frit (2 pièces) Fil Fry <2 pièces) 100 Ru
« td » Rs. 100c/à
« td x type d'entrée = "texte" Id = "poisson" taille = "2"/>c/td-
«/tr
"/tableau
<p> Soumettre le formulaire de commande Qselot Cier
type d'entrée * valeur du "bouton" = « Coût total »* sur clic =
"computeCostO:/ Après avoir pris les entrées, nous
<lnput type = 'texte" taille = "5" id = "coût" surfocus = obtenons.
"thishlurO:"/-
«/p
<p»
cinput type = 'submit' value • "Soumettre la commande"/ Formulaire de commande d'articles
'type d'entrée - valeur « réinitialiser » • « Effacer le formulaire de non végétariens
commande »/
Article Prix Quantité
Poulet Kabab (rul) Rs 150 2
Mouton Kaima (moitié) Rs. 250 1
Poisson frit (2 pièces) Rs.100 3

Manteau II otm 850

• Tout d’abord, il détermine si l’utilisateur a tapé le mot de passe initial (dans la première zone de
saisie) en testant la valeur de l’élément par rapport à la chaîne vide. Si aucun mot de passe n'a été
saisi dans le premier champ, la fonction appelle alert pour produire un message d'erreur et renvoie
false.
• Le deuxième test détermine si les deux mots de passe saisis sont identiques. S'ils sont différents, la
fonction appelle à nouveau alert pour générer un message d'erreur et renvoie false.

94 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• S'ils sont identiques, il revient •

//pswd_chkhtml //pswd_chkjs
<html> fonction chkPass( }
<head»
<title»Password Checkings/title- var dans it-d ocumen t getElem ent Byld( "initial");
type de script = "texte/javascript" sre = "pswd [Link]"> var fin=[Link]("tinal3;
</script> si(initvalue==")
«/tête>
corps-
alert("Vous n'avez pas saisi de mot de passe\n" ♦ "Veuillez en saisir au
<h3>Saisie du mot de passe«/h3- moins maintenant") :
■<form id=“ my Form' action= ""> [Link]( );
<p> renvoie faux :
<labelYour Password: <input type="password
id="initial" size="10"/>e/labelebr/><br/>
« labeb-Vérifier le mot de passe : < in put type="password id="final"
ssi dans [Link] uc!
size="10"/>s/label » cbr/>cbr/> =fin. val ue)
cinput type="réinitialiser" nom="Réinitialiser"/> alert("Les mots de passe que vous avez saisis ne correspondent pas...
<inputtype="submit" name="Submit"/>
Essayer à nouveau"):
«/p- [Link]( ),
je</form> initselect ):
<script type = "text/javascript" src -
retourner faux;
</script>

; /corps
|</html>

Sortir
:

1 cr PAnrw grc

LE MODÈLE D'ÉVÉNEMENT DOM 2

Le modèle DOM 2 est une interface modularisée. L'un des modules DOM 2 est Events, qui
comprend plusieurs sous-modules. Les plus couramment utilisés sont HTMLEvents et
MouseEvents. Les interfaces et événements définis par ces modules sont les suivants :

PROPAGATION DE L'ÉVÉNEMENT :
• Un navigateur qui comprend DOM, lors de la réception du document XHTML du serveur,
crée une arborescence appelée arborescence de documents.
• L'arbre construit est constitué d'éléments du document à l'exception du HTML
• La racine de l'arborescence du document est l'objet document lui-même
• Les autres éléments formeront le nœud de l'arbre

95 | Page VSISCM
Ce document est disponible gratuitement sur C

studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

• Dans le cas de DOM2, le nœud qui génère un événement est appelé nœud cible
• Une fois l'événement généré, il démarre la propagation à partir du nœud racine
• Pendant la propagation, s'il y a des gestionnaires d'événements sur un nœud et s'il est activé,
le gestionnaire d'événements est exécuté.
• Une fois l'événement généré, il démarre la propagation à partir du nœud racine
• Pendant la propagation, s'il existe des gestionnaires d'événements sur un nœud et s'il est
activé, le gestionnaire d'événements est exécuté
• L'événement se propage davantage et atteint le nœud cible.
• Lorsque le gestionnaire d'événements atteint le nœud cible, le gestionnaire d'événements est
exécuté
• Après cette exécution, l'événement est à nouveau propagé dans le sens inverse
• Au cours de cette propagation, s'il y a des gestionnaires d'événements activés, ils seront
exécutés.
• La propagation de l'événement depuis le nœud racine vers le nœud feuille ou le nœud cible
est appelée phase de capture.
• L’exécution du gestionnaire d’événements sur le nœud cible est appelée phase d’exécution.
• Cette phase est similaire au mécanisme de gestion des événements dans DOM - 0
• La propagation de l'événement à partir de la feuille ou du nœud cible est connue sous le
nom de phase de bouillonnement.
• Tous les événements ne peuvent pas être mis en bulle, par exemple : événement de
chargement et de déchargement
• Si l'utilisateur souhaite arrêter la propagation d'un événement, il doit exécuter l'arrêt de la
propagation.

Parcours et manipulation du DOM en JavaScript

• Qu'est-ce que DOM ?

• Traversée du DOM
• Manipulation du DOM

Qu'est-ce que DOM ?

Le Document Object Model (DOM) est une API de programmation pour HTML et XML.
Spécification API définie par le World Wide Web Consortium (W3C). DOM représente
comment écrire du HTML et du XML dans une structure arborescente, en parcourant et en

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
manipulant également la structure afin de créer une application Webinformatique
dynamique.

96 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Voici l'arborescence des objets DOM

Pour parcourir et manipuler la structure DOM, nous nous appuyons sur un langage de script côté client
comme JavaScript. Ici, nous pouvons ajouter, modifier, supprimer et attacher des événements dans la
structure DOM.

Traversée du DOM
La traversée DOM, qui signifie « se déplacer à travers », est utilisée pour « trouver » (ou sélectionner)
des éléments HTML en fonction de leur relation avec d'autres éléments. Ici, la traversée s'effectue dans
les deux sens, de haut en bas ou de bas en haut. Commencez par une sélection et parcourez cette
sélection jusqu’à ce que vous atteigniez les éléments que vous désirez.

97 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL
Maître de conférences en informatique

Page HTML sous forme d'arbre (DOM)

Sur la base de la sélection, nous pouvons facilement nous déplacer vers le haut (ancêtres), vers le bas
(descendants) et latéralement (frères et sœurs) dans l'arbre, en partant de l'élément sélectionné (actuel).
Ce mouvement est appelé traverser – ou se déplacer à travers – l’arbre DOM.

98 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

UNITÉ 5
DOCUMENTS DYNAMIQUES AVEC JAVASCRIPT
INTRODUCTION
• De manière informelle, un document XHTML dynamique est un document XHTML qui,
d'une certaine manière, peut être modifié pendant qu'il est affiché par un navigateur.
• Dynamic XHTM L n'est pas un nouveau langage de balisage.
• Il s'agit d'un ensemble de technologies qui permettent des modifications dynamiques des
documents définis avec XHTML
• Plus précisément, un document XHTML dynamique est un document XHTML dont les
attributs de balise, le contenu de balise ou les propriétés de style d'élément peuvent être
modifiés par l'interaction de l'utilisateur ou l'occurrence d'un événement de navigateur après
que le document a été, et est toujours, affiché.
• De telles modifications peuvent être effectuées à l'aide d'un script intégré qui accède aux
éléments du document en tant qu'objets dans la structure DOM associée.

ÉLÉMENTS DE POSITIONNEMENT
• Une feuille de style en cascade - Positionnement (CSS-P) est entièrement prise en charge
par IE8 et FX3.
• Car il fournit les moyens non seulement de positionner n'importe quel élément n'importe où
dans l'affichage d'un document, mais également de déplacer un élément vers une nouvelle
position dans l'affichage de manière dynamique, en utilisant JavaScript pour modifier les
propriétés de style de positionnement de l'élément.
• Ces propriétés de style, nommées à juste titre left et top, dictent la distance entre la gauche et
le haut d'un point de référence et l'endroit où l'élément doit apparaître.
• Une autre propriété de style, la position, interagit avec la gauche et le haut pour fournir un
niveau de contrôle plus élevé du placement et du mouvement des éléments.
• La propriété position a trois valeurs possibles : absolue, relative et statique.

POSITIONNEMENT ABSOLU
• La valeur absolue est spécifiée pour la position lorsque l'élément doit être placé à un endroit
spécifique dans l'affichage du document sans tenir compte des positions des autres éléments.
• L’une des utilisations du positionnement absolu consiste à superposer un texte spécial sur un
paragraphe de texte ordinaire pour créer un effet similaire à un filigrane sur du papier.
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

99 | Page VSISCM
Ce document est disponible gratuitement sur C

studoeuTéléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

POSITIONNEMENT RELATIF
• Un élément dont la propriété position est définie sur relative, mais qui ne spécifie pas les
valeurs de propriété top et left, est placé dans le document comme si l'attribut position n'était
pas défini du tout.
• Cependant, un tel élément peut être déplacé ultérieurement.

POSITIONNEMENT STATIQUE
La valeur par défaut de la propriété position est statique. Un élément positionné statiquement est
placé dans le document comme s'il avait une valeur de position relative mais aucune valeur pour
le haut ou la gauche n'était donnée. La différence est qu'un élément positionné statiquement ne
peut pas avoir ses propriétés top ou left initialement définies ou modifiées ultérieurement. Par
conséquent, un élément placé statiquement ne peut pas être déplacé de sa position normale et ne
peut pas être déplacé de cette position ultérieurement.

ÉLÉMENTS EN MOUVEMENT
Déplacer un élément est simple :
• La modification des valeurs des propriétés supérieure ou gauche entraîne le déplacement
de l'élément sur l'écran.
• Si sa position est définie comme absolue, l'élément se déplace vers les nouvelles valeurs
de haut et de gauche ; si sa position est définie comme relative, il se déplace de sa position
d'origine sur des distances données par les nouvelles valeurs de haut et de gauche.

VISIBILITÉ DES ÉLÉMENTS

• Les éléments du document peuvent être spécifiés comme étant visibles ou masqués avec la
valeur de leur propriété de visibilité.
• Les deux valeurs possibles pour la visibilité sont, tout naturellement, visible et cachée.
• L'apparition ou la disparition d'un élément peut être contrôlée par l'utilisateur via un
widget.

• //[Link]
• <html>
• <head>

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

100 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• <title>Contrôle de la visibilité</title>
• <script type="text/javascript" src="[Link]">
• </script>
• </head>
• <body>
• <form action="">
• <div id="rnsit" style="position:relative; visibility: visible;">
• <img src = "CLASS [Link]" alt="RNSIT ISE 2009-2013" />
• </div>
• <p><br><input type="button" value="Toggle Rnsit" ondick = "fliplmagO" /></p>
• </form>
• </body>
• </html>

• //[Link]
• fonction fliplmag( ) {
• dom=[Link]("rnsit").style;
• si([Link] == "visible")
• [Link] = "caché";
• autre
• [Link] = "visible";
• }

101 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

CHANGER LES COULEURS ET LES POLICES

Les couleurs d'arrière-plan et de premier plan de l'affichage du document peuvent être modifiées
de manière dynamique, tout comme les propriétés de police du texte.

CHANGEMENT DE COULEURS
• Les changements dynamiques de couleurs sont relativement simples.
• Dans l'exemple suivant, l'utilisateur se voit présenter deux zones de texte dans lesquelles les
spécifications de couleur
peut être saisi : un pour la couleur d’arrière-plan du document et un pour la couleur de
premier plan.
• Les couleurs peuvent être spécifiées de l'une des trois manières dont les propriétés de couleur
peuvent être données dans
Feuille de style en cascade.
• Une fonction JavaScript qui est appelée chaque fois qu'une des zones de texte est modifiée
effectue la modification dans la propriété de couleur appropriée du document : background-
groundColor ou color.
• Le premier des deux paramètres de la fonction spécifie si la nouvelle couleur est destinée à
l'arrière-plan ou au premier plan ; le second spécifie la nouvelle couleur.
• La nouvelle couleur est la propriété de valeur de la zone de texte qui a été modifiée par
l'utilisateur,

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

102 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

<html><title>Couleurs dynamiques</title>
<scripttype="text/javascript" src = "[Link]">
</script>
</head>
<body>
<form action="">
<p>
<label>Arrière-plan</label> Couleur: <input type="texte" nom="bg" "20"
taille
onchange="setColorCbg', [Link])" /> "20"
<label>Premier plan</label> Couleur: entrée c type="texte" nom="fg"taille
onchange="setColor('fg', [Link])" /><br/> /p></form></body></html>

//dyn Couleur. js
fonction setColorf où, newColor)
{
si( où == "bg")
[Link] = nouvelle couleur; sinon
[Link] = nouvelle couleur;

103 | Page VSISCM

CONTENU DYNAMIQUE

• Nous développons maintenant un exemple qui illustre une utilisation du contenu dynamique.

• Une assistance à l'utilisateur d'un navigateur lors du remplissage d'un formulaire peut être
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

fournie à l'aide d'une zone de texte associée, souvent appelée boîte d'aide.

• Le contenu de la boîte d'aide peut changer en fonction du placement du curseur de la souris.

• Lorsque le curseur est placé sur un champ de saisie particulier, la boîte d'aide peut afficher des
conseils sur la manière de remplir le champ.

• Lorsque le curseur est déplacé loin d'un champ de saisie, le contenu de la boîte d'aide peut
être modifié pour indiquer simplement qu'une assistance est disponible.

• Dans l'exemple suivant, un tableau de messages pouvant être affichés dans la boîte d'aide est
défini en JavaScript.

• Lorsque le curseur de la souris est placé sur un champ de saisie, l'événement mouseover est
utilisé pour appeler une fonction de gestionnaire qui modifie le contenu de la zone d'aide en
fonction de la valeur appropriée.

• La valeur appropriée est spécifiée avec un paramètre envoyé à la fonction gestionnaire.

• L'événement mouseout est utilisé pour déclencher le changement du contenu de la boîte d'aide
à la valeur « standard ».

• //[Link]
• <html>
• <head>
• <title>Valeurs dynamiques</title>
• <script type = "text/javascript" src = ”[Link]">
• </script>
• </hcad>
• <body>
• <form action="">
• <p style = "font-weight: bold">
• <span style = "font-style: italic">
• Informations client
• </span>

104 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• <br>
• <label>Nom:</label>
• <input type="text" onmouseover="messages(0)" onmouseout=”messages(4)" />
• </label>
• <br>
• <label>E-mail:</label>
• <inputtype="text" onmouseover="messages(1)”onmouseout="messages(4)" />
• </label>
• <brxbr><br>
• <span style = "font-style:italic">
• Pour créer un compte, fournissez les informations suivantes :
• </span>
• <brxbr>
• <label>ID de l'utilisateur:</label>
• <inputtype="text" onmouseover=“messages(2)" onmouseout=”messages(4J" />
• </label>
• <br>
• <label>Mot de passe:</label>
• <inputtype="text" onmouseover="messages(3)" onmouseout="messages(4)" />
• </label>
• <br>
• <textarea id="adviceBox" rows="3" cols="50" style=”position:absolute; !eft:250px;
top:0px">
• Cet encadré fournit des conseils pour remplir le formulaire de cette page. Placez le
curseur de la souris sur n'importe quel champ de saisie pour obtenir des conseils.
• </textarea>
• <brxbr>
• <input type="submit" value="Soumettre" />
• <input type="reset" value="Réinitialiser" />
• </p>
• </form>

105 | Page

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• </body>
• </html>
• //[Link]
• var helpers = ("Votre nom doit être sous la forme : \n prénom, initiale du deuxième
prénom, nom de famille",
• "Votre adresse email doit avoir la forme : \utilisateur@domaine",
• "Votre identifiant d'utilisateur doit comporter au moins six caractères et doit inclure un
chiffre",
• "Cette case fournit des conseils pour remplir le formulaire de cette page. Placez le
curseur de la souris sur n'importe quel champ de saisie pour obtenir des conseils"]
• messages de fonction (adviceNumber)
• {
• [Link]("adviceBox").value=helpers[ad viceNumber];
• }

106 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

EMPILAGE D'ÉLÉMENTS
• Les propriétés top et left permettent de placer un élément n'importe où dans les deux dimensions de
l'affichage d'un document.
• Bien que l'affichage soit limité à deux dimensions physiques, l'effet d'une troisième dimension est
possible grâce au concept simple d'éléments empilés, comme celui utilisé pour empiler les fenêtres
dans les interfaces utilisateur graphiques.
• Bien que plusieurs éléments puissent occuper le même espace dans le document, l'un d'eux est
considéré comme étant au-dessus et est affiché.
• L'élément supérieur cache les parties des éléments inférieurs sur lesquels il se superpose.
• Le placement des éléments dans cette troisième dimension est contrôlé par l'attribut z-index de
l'élément.
• Un élément dont l'index z est supérieur à celui d'un élément dans le même espace sera affiché sur
l'autre élément, masquant ainsi efficacement l'élément avec la valeur d'index z la plus petite.
• La propriété de style JavaScript associée à l'attribut z-index est zIndex,

107 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• //pilehtml
• <html >
• <head><title>Empiler des paragraphes
• <style type="text/css">
• .para1
• {
• bordure : solide épaisse #C0C0C0 ;
• rembourrage : 1 po;
• largeur : 180px ;
• arrière-plan -couleur : #0000 DO ;
• couleurblanche;
• position:absolue;
• haut:70px;
• gauche : 4 po ;
• z-index: 1;
• }
• .para2
• {
• bordure : solide épaisse #808000 ;
• rembourrage : lin ;
• largeur : 180px ;
• arrière-plan -couleur:rouge;
• couleurblanche;
• position:absolue;
• haut:105px;
• gauche : 5 po ;
• z-index:2;
• }
• .paragraphe 3
• {
• bordure : solide épaisse #00ffff ;

108 | Page VSISCM

• rembourrage : lin ;
• largeur : 180px ;
• arrière-plan-colongreen;
• couleur : blanc ;

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• position:absolue;
• haut:140px;
• gauche : 6 po ;
• z-index:3;
• }
• .afficher
• {
• taille de police : 25 pt ;
• colonbleu;
• alignement du texte : centre ;
• }
• p:hover{background-color:rgb(250,200,150);font-size:25px;color:white;};
• </style>
• <script type="text/javascript">
• var stackl="stackl";
• fonction déplacer(curStack)
• {var oldStack=[Link](stackl).style;
• [Link] = « 0 » ;
• var newStack=[Link](curStack).style;
• [Link]="10";
• stackl=[Link](curStack).id;
• }
• </script>
• </head>
• <body>
• <h2 class=”display">Empilement de paragraphes les uns sur les autres</h2>
• <p class="paral" id="stackl" onmouseover="move(’stackr)">

109 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

• Dr RN Shetty
• </p>
• <p class="para2" id="stack2" onmouseover="move('stack2‘)">
• Dr H.N. Shiv Shankar
• </p>
• <p class="para3" id="stack3" onmouseover="move(’stack3’)">
• Docteur MK Venkatesha
• </p>
• </body>
• </html>

110 | Page

VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

LOCALISATION DU CURSEUR DE LA SOURIS

• Un événement de clic de souris est une implémentation de l'interface Mouse-Event, qui
définit deux paires de propriétés qui fournissent les coordonnées géométriques de la
position de l'élément dans l'affichage qui a créé l'événement.
• L'une de ces paires, clientX et clientY, donne les coordonnées de l'élément par rapport au
coin supérieur gauche de la fenêtre d'affichage du navigateur, en pixels.
• L'autre paire, screenX et screenY, donne également les coordonnées de l'élément, mais
par rapport à l'écran de l'ordinateur client.
• Dans l'exemple suivant, [Link], deux paires de zones de texte sont utilisées pour
afficher ces quatre propriétés à chaque fois que le bouton de la souris est cliqué.
• Le gestionnaire est déclenché par l'attribut onclick de l'élément body.
• L'appel au gestionnaire dans cet exemple envoie un événement, qui est une référence à
l'objet événement qui vient d'être créé dans l'élément, en tant que paramètre.

RÉAGIR À UN CLIC DE SOURIS

L’exemple suivant est un autre exemple lié à la réaction aux clics de souris. Dans ce cas, les
événements mousedown et mouseup sont utilisés, respectivement, pour afficher et masquer le
message « Veuillez ne pas cliquer ici ! » sur l'écran sous le curseur de la souris chaque fois que le
bouton de la souris est cliqué, quel que soit l'endroit où se trouve le curseur à ce moment-là. Les
décalages (-130 pour la gauche et -25 pour le haut) modifient la position réelle du curseur de
sorte que le message soit approximativement centré dessus.

111 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• //n'importe où.html
• <html>
• <head>
• <title>Détectez les événements n'importe où</title>
• <script type= "text/javascript" >
• fonction displaylt(evt){
• vardom=documentgetElementByld("message");
• [Link]=([Link] -130) + "px";
• [Link]=([Link] - 25 ) + "px";
• [Link]= "visible";
• }
• fonction hidelt()
• {
• [Link]("message").[Link]="caché";
• }</script>
• </head>
• <body onmousedown="displaylt(event);" onmouseup="hidelt();">
• <P>
• <span id="message”
• style = "coloré; visibilité:caché; position:relative; taille-de-police:20pt; épaisseur-de-
police:gras;">
• S'il vous plaît, ne cliquez pas ici..!!
• </span>
• <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>< br><br> <b rx br>< br><br><br
> <b r>< br><br> <b rxb r>< br>< br><br><br> < br>< br><br><br> < br>< br><br>
<b r><brxbr><br> <b r>< br><br> <b r>< br>< br><br><br > <b r>< br><br><br> <b
r>< br>< br><br> <b r><br><br>< br>< br><br ><br > < br><
br><br><br></b></b></b></b></b></b></b></b></b>
• < br>
• </p>
• </body>
• </html>

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

112 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

MOUVEMENT LENT DES ÉLÉMENTS

• La seule façon de déplacer un élément lentement est de le déplacer par petites
quantités plusieurs fois, avec des mouvements séparés par de petits laps de temps.
• JavaScript dispose de deux méthodes Window capables d'effectuer cette tâche :
setTimeout et set Interval.
• La méthode setTimeout prend deux paramètres : une chaîne de code JavaScript à
exécuter et un nombre de millisecondes de délai avant l'exécution du code donné.
• La méthode Set Interval a deux formes. Un formulaire prend deux paramètres,
exactement comme setTimeout.
• Il exécute le code donné de manière répétée, en utilisant le deuxième paramètre
comme intervalle, en millisecondes, entre les exécutions.
• La deuxième forme d’intervalle défini prend un nombre variable de paramètres.
• Le premier paramètre est le nom d'une fonction à appeler, le second est l'intervalle en
millisecondes entre les appels à la fonction, et les paramètres restants sont utilisés
comme paramètres réels de la fonction appelée.
• La position initiale du texte est définie dans l'élément span qui spécifie le texte.
• L'attribut onload de l'élément body est utilisé pour appeler une fonction, initText,
pour initialiser les coordonnées x et y de la position initiale des propriétés left et top
de l'élément et appeler la fonction mover.
• ★ La fonction mover, nommée moveText, prend les coordonnées actuelles du texte
comme paramètres, les déplace d'un pixel vers la position finale, puis, en utilisant
setTimeout, s'appelle elle-même avec les nouvelles coordonnées.

113 | Page VSISCM

Ce document est disponible gratuitement sur étude
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

GLISSER-DÉPOSER DES ÉLÉMENTS

• Les événements mouseup, mousedown et mousemove peuvent être utilisés pour
implémenter le glisser-déposer.
• Pour illustrer le glisser-déposer, un document XHTML et un fichier JavaScript qui
crée un système de poésie magnétique sont développés, montrant deux lignes statiques
d'un poème et permettant à l'utilisateur de créer les deux dernières lignes à partir d'une
collection de mots mobiles.
• Le modèle DOM 0 est utilisé pour l'appel au gestionnaire de l'événement mousedown.
• Le reste du processus est conçu avec le modèle DOM 2.
• Le gestionnaire d'événements mousedown, grabber, prend l'objet Event comme
paramètre.
• Il récupère l'élément à déplacer de la propriété currentTarget de l'objet Event et le
place dans une variable globale afin qu'il soit disponible pour les autres gestionnaires.
• Il détermine ensuite les coordonnées de la position actuelle de l'élément à déplacer et
calcule la différence entre chacune d'elles et les coordonnées correspondantes de la
position du curseur de la souris.
• Le gestionnaire de capture enregistre également les gestionnaires d'événements pour
mousemove et mouseup.
• Ces deux gestionnaires sont nommés respectivement mover et dropper.
• Le gestionnaire de compte-gouttes déconnecte les mouvements de la souris du
processus de déplacement des éléments en désenregistrant les gestionnaires mover et
dropper.

INTRODUCTION AU XML
SYNTAXE DE XML
• XML impose deux niveaux de syntaxe distincts :
• Il existe une syntaxe générale de bas niveau qui est appréciable sur tous les documents
XML
• L'autre niveau syntaxique est spécifié par des schémas DTD (Document Type
Definition) ou XML.
• Les DTD et les schémas XML spécifient un ensemble de balises et d'attributs qui
peuvent apparaître dans un document particulier ou dans une collection de documents.
• Ils précisent également l’ordre d’apparition dans le document.
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• Les documents XML sont constitués d'éléments de données qui forment les
déclarations du document XML
• Le document XML peut également être constitué d'une déclaration de balisage, qui
agit comme des instructions pour l'analyseur XML.

114 | Page

VSISCM
• Tous les documents XML commencent par une déclaration XML. Cette déclaration
identifie que le document est un document XML et spécifie également le numéro de
version de la norme XML.
• Il spécifie également la norme de codage.
• <?xml version = "1.0" encoding = "utf-8"?>
• Les commentaires en XML sont similaires à ceux en HTML
• Les noms XML sont utilisés pour nommer les éléments et les attributs.
• Les noms XML sont sensibles à la casse.
• Il n'y a aucune limitation sur la longueur des noms.
• Tous les documents XML contiennent un seul élément racine dont la balise
d'ouverture apparaît sur la première ligne du code
• Toutes les autres balises doivent être imbriquées à l'intérieur de l'élément racine
• Comme dans le cas du XHTML, les balises XML peuvent également avoir des
attributs
• Les valeurs des attributs doivent être entre guillemets simples ou doubles.

Exemple:
1. (version xml ■ "1.0" encodage ■ "utf-8" ?
<student>
<name>Santhosh BS</name>
cusn>1RN10CS090</usn>
</student>
2. Balises avec attributs
Le code ci-dessus peut également être écrit comme
< nom de l'étudiant ■ « Santhosh B 3 » usn ■ « 1RN10CS090 »">
c/étudiant»

Structure d'un document XML

La recommandation XML stipule qu'un document XML possède une structure à la fois
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

logique et physique. Physiquement, il est composé d'unités de stockage appelées entités,

chacune pouvant faire référence à d'autres entités, de la même manière que fonctionne
include dans le langage C. Logiquement, un document XML se compose de déclarations,
d'éléments, de commentaires, de références de caractères et d'instructions de traitement,
collectivement appelés balisage.

115 | Page VSISCM

Un document XML se compose de trois parties, dans l'ordre indiqué :

• Une déclaration XML (qui est techniquement facultative, mais recommandée dans la
plupart des cas normaux)
• Une déclaration de type de document qui fait référence à une DTD (ce qui est
facultatif, mais obligatoire si vous souhaitez une validation)
• Une instance de corps ou de document (obligatoire)

Déclaration XML
• La déclaration XML est un élément de balisage (qui peut s'étendre sur plusieurs lignes
d'un fichier) qui identifie celui-ci comme un document XML. La déclaration indique
également si le document peut être validé en faisant référence à une définition de type
de document (DTD) externe. Les DTD font l’objet du chapitre 4 ; pour l’instant,
considérez simplement une DTD comme un ensemble de règles décrivant la structure
d’un document XML.

• La déclaration XML minimale est :

<?xml version="1.0" ?>

• XML est sensible à la casse (plus d'informations à ce sujet dans la sous-section

suivante), il est donc important d'utiliser des minuscules pour xml et version. Les
guillemets autour de la valeur de l'attribut version sont obligatoires, tout comme les ?
Personnages. Au moment de la rédaction de cet article, « 1.0 » est la seule valeur
acceptable pour l'attribut version, mais cela va certainement changer lorsqu'une version

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

ultérieure de la spécification XML apparaîtra.

• La déclaration suivante signifie qu'il existe une DTD externe dont dépend ce
document. Voir la sous-section suivante pour la DTD qu’implique cette valeur
autonome négative.
• <?xml version="1.0" standalone="no" ?>
• En revanche, si votre document XML n'a pas de DTD associée, la déclaration XML
correcte est :
• <?xml version="1.0" standalone="yes" ?>

116 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Déclaration de type de document

• La déclaration du type de document suit la déclaration XML. Le but de cette déclaration est
d'annoncer l'élément racine (parfois appelé élément document) et de fournir l'emplacement
de la DTD.4 La syntaxe générale est :

• <!DOCTYPE RootElement (SYSTEM | PUBLIC)

DéclarationsExternes ? [DéclarationsInternes] ? >
où La partie facultative ExternalDeclarations correspond généralement au chemin relatif ou à
l'URL de la DTD qui décrit votre type de document. (Elle n'est réellement facultative que si la
DTD entière apparaît comme une InternalDeclaration, ce qui n'est ni probable ni souhaitable.)

Dans cet exemple, nous indiquons que la DTD et le document XML résident dans le même
répertoire (c'est-à-dire que les ExternalDeclarations sont contenues dans le fichier
[Link]) et que l'élément racine est Employees :

<!DOCTYPE Employees SYSTEM "[Link]">

De la même manière,

<!DOCTYPE PriceList SYSTEM "[Link]">

indique un élément racine PriceList et le DTD est dans le fichier local : [Link].

Dans l'exemple suivant, nous utilisons la syntaxe de chemin de répertoire normale pour
indiquer un emplacement différent pour la DTD.

<!DOCTYPE Employees SYSTEM "../dtds/[Link]">

117 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Corps du document
• Le corps du document, ou instance, constitue l'essentiel du contenu informationnel du
document. Alors que dans plusieurs instances d'un document d'un type donné (tel qu'identifié
par le DOCTYPE), le prologue XML reste constant, le corps du document change à chaque
instance de document (en général).
• Étant donné que la déclaration de type de document spécifie l’élément racine, celui-ci doit
être le premier élément rencontré par l’analyseur. Si un autre élément que celui identifié par
la ligne DOCTYPE apparaît en premier, le document est immédiatement invalide.

Liste 3-1 Document XHTML 1.0 simple avec prologue XML et corps du document

<?xml vers ion=" 1.0" encoding=" UTF-8" ?>

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.6 Transitional//FR"
"[Link] dtd11 >
html xmlns="[Link] xml:lang="fr" lang="fr">
<head>
<title>XHTML 1.0</title>
</head>
<body>
<hl>Exemple simple de XHTML 1.0</h1>
<p>5ee le
"[Link] Transitionnel, dtd" >DTD ,</p>
</body>

DÉCLARER DES ÉLÉMENTS

• La DTD suit les règles de la grammaire sans contexte pour la déclaration des éléments
• Une DTD décrit la structure syntaxique d'un ensemble particulier de documents
• Chaque déclaration d'élément dans une DTD spécifie la structure d'une catégorie d'éléments
• Un élément est un nœud dans un tel arbre, soit un nœud feuille, soit un nœud interne
• Si un élément est un nœud feuille, sa description syntaxique est son modèle de caractère
• Si l'élément est un nœud interne, sa description syntaxique est une liste de ses éléments
enfants
• La forme d'une déclaration d'élément pour les éléments qui contiennent des éléments est la
suivante :

118 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

• <!ELEMENT element_name (list of names of child elements)>

• Par exemple, considérons la déclaration suivante :
• <!ELEMENT memo (from, to, date, re, body)>

• Dans de nombreux cas, il est nécessaire de spécifier le nombre de fois qu'un élément enfant
peut apparaître.
• Cela peut être fait dans une déclaration DTD en ajoutant un modificateur à la spécification
de l'élément enfant. Ces modificateurs, décrits dans le tableau 7.1, sont empruntés aux
expressions régulières.
• Toute spécification d’élément enfant peut être suivie par l’un des modificateurs.

Attributs XML.

• Les attributs font partie des éléments XML. Un élément peut avoir plusieurs attributs
uniques.

• L'attribut donne plus d'informations sur les éléments XML. Pour être plus précis, ils
définissent les propriétés des éléments. Un attribut XML est toujours une paire nom-
valeur.

Syntaxe

Un attribut XML a la syntaxe suivante :

<element-name attribute1 attribute2 >

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

119 | Page VSISCM

...contenu..
< /nom-élément>

où l'attribut1 et l'attribut2 ont la forme suivante -

nom = "valeur"

la valeur doit être entre guillemets doubles (" ") ou simples (' '). Ici, attribute1 et attribute2 sont
des étiquettes d’attribut uniques.

Les attributs sont utilisés pour ajouter une étiquette unique à un élément, placer l'étiquette dans
une catégorie, ajouter un indicateur booléen ou l'associer à une chaîne de données. L'exemple
suivant illustre l'utilisation des attributs -

<?xml version = "1.0" encoding = "UTF-8"?>

<!DOCTYPE garden [
<!ELEMENT garden (plants)*>
<!ELEMENT plants (#PCDATA)>
<!ATTLIST plants category CDATA #REQUIRED>
]>

<garden>
<plants category = "flowers" />
<plants category = "shrubs">
</plants>
</garden>

Les attributs sont utilisés pour distinguer les éléments du même nom, lorsque vous ne souhaitez
pas créer un nouvel élément pour chaque situation. Par conséquent, l’utilisation d’un attribut peut
ajouter un peu plus de détails pour différencier deux ou plusieurs éléments similaires.

Dans l'exemple ci-dessus, nous avons catégorisé les plantes en incluant la catégorie d'attribut et
en attribuant des valeurs différentes à chacun des éléments. Nous avons donc deux catégories de
plantes, l'une des fleurs et l'autre des arbustes. Nous avons donc deux éléments végétaux aux
attributs différents.

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

120 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Vous pouvez également observer que nous avons déclaré cet attribut au début du XML.

Types d'attributs

Le tableau suivant répertorie les types d'attributs -

Description du type d'attribut

StringType Il prend n'importe quelle chaîne littérale comme valeur. CDATA est un StringType.
CDATA est une donnée de type caractère. Cela signifie que toute chaîne de
caractères non balisés est une partie légale de l'attribut.

Il s’agit d’un type plus restreint. Les contraintes de validité notées dans la grammaire sont appliquées
après la normalisation de la valeur de l'attribut. Les attributs TokenizedType sont
Type tokenisé
donnés comme suit :

• ID - Il est utilisé pour spécifier l'élément comme unique.

121 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• IDREF - Il est utilisé pour référencer un ID qui a été nommé pour un autre
élément.

• IDREFS - Il est utilisé pour référencer tous les ID d'un élément.

• ENTITY - Indique que l'attribut représentera une entité externe dans le

document.

• ENTITÉS - Indique que l'attribut représentera des entités externes dans le

document.

• NMTOKEN - Il est similaire à CDATA avec des restrictions sur les données
qui peuvent faire partie de l'attribut.

• NMTOKENS - Il est similaire à CDATA avec des restrictions sur les

données qui peuvent faire partie de l'attribut.

Celui-ci contient une liste de valeurs prédéfinies dans sa déclaration, parmi

lesquelles il doit attribuer une valeur. Il existe deux types d'attributs énumérés :

Type énuméré • NotationType - Il déclare qu'un élément sera référencé à une NOTATION
déclarée ailleurs dans le document XML.

• Énumération - L'énumération vous permet de définir une liste spécifique de

valeurs auxquelles la valeur de l'attribut doit correspondre.

Règles d'attributs d'éléments

Voici les règles à suivre pour les attributs :

• Un nom d’attribut ne doit pas apparaître plus d’une fois dans la même balise de début ou dans la même
balise d’élément vide.

122 | Page VSISCM

• Un attribut doit être déclaré dans la définition de type de document (DTD) à
l'aide d'une déclaration AttributeList.

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• Les valeurs d’attribut ne doivent pas contenir de références d’entité directes ou indirectes à des entités
externes.
• Le texte de remplacement de toute entité référencée directement ou indirectement dans une valeur
d'attribut ne doit pas contenir de signe inférieur à (<)

ENTITÉS DÉCLARANTES

• Les entités peuvent être définies de manière à pouvoir être référencées n'importe où dans le contenu
d'un document XML, auquel cas elles sont appelées entités générales. Les entités prédéfinies sont
toutes des entités générales.
• Les entités peuvent également être définies de manière à pouvoir être référencées uniquement dans
les DTD, auquel cas elles sont appelées entités paramètres.
• La forme d'une déclaration d'entité est<!ENTITY [%] entity_name "entity_yalue">
• Lorsque le signe de pourcentage facultatif (A) est présent dans une déclaration d'entité, il spécifie
que l'entité est une entité paramètre plutôt qu'une entité générale.
• Exemple : <! ENTITÉ sbs "Santhosh B Suresh">

• Lorsqu'une entité est plus longue que quelques mots, son texte est défini en dehors de la DTD. Dans
de tels cas, l’entité est appelée une entité texte externe. La forme de la déclaration d'une entité de
texte externe est<!ENTITY entity_name SYSTEM "file_location">

• Certains analyseurs XML vérifient les documents contenant des DTD afin de garantir que les
documents sont conformes à la structure spécifiée dans les DTD. Ces analyseurs sont appelés
analyseurs de validation.
• Si un document XML spécifie une DTD et est analysé par un analyseur XML de validation, et que
l'analyseur détermine que le document est conforme à la DTD, le document est dit valide.
• Les documents XML manuscrits ne sont souvent pas bien formés, ce qui signifie qu'ils ne suivent
pas les règles syntaxiques du XML.
• Toutes les erreurs qu’ils contiennent sont détectées par tous les analyseurs XML, qui doivent les
signaler.
• Les analyseurs XML ne sont pas autorisés à réparer ou à ignorer les erreurs.

123 | Page VSISCM

• Les analyseurs XML de validation détectent et signalent toutes les incohérences dans les documents
par rapport à leurs
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

DTD.

Un exemple de DTD
-version xm1 - encodage « 1.0 » - « ut£-8*?-

-[Link] — une définition de type de document pour

le document planes . xml, qui spécifie une liste d'avions d'occasion à vendre ——>

« Les avions I ELEMENT_______à vendre (annonce+)>

e I ELEMENT ad cyoar. marque, modèle. couleur. description, prix?. vendeur, emplacement)*
* I ÉLÉMENT année (« PCDATA »-
= i ÉLÉMENT faire ( • PC DONNÉES A » >-
- Modèle I ELEMErT (»PCDATA)>
« Je suis un ÉLÉMENT de couleur <•PCDATA)-
-Description de l'IELEMEN (•PCDATA)>
« Prix de l'ÉLÉMENT (»PCDATA)>
- 1 vendeur d'ÉLÉMErr (tPCDATA)>
= 1 ELEMENT emplacement (ville, état»>
< I ÉLÉMENT ville (ePCDATA>>
-État d'erreur élémentaire (»PCDATA)>

« Téléphone du vendeur IATTLIST COATA •REQUIS>-

« J'ATTL. Je suis le vendeur par e-mail de CO AT A • IMPLIQUÉ >

- 1 ENTITÉ c -cessna--
« IEHTITY p "Piper
- I ENTITY b "Beocheraft--

DTD INTERNES ET EXTERNES

• Exemple de DTD interne :
• <?xml version “ "1.0" encoding =”utf-8”>
• <DOCTYPE planes [
• <!— The DTD for planes —>
• ]>
• <!— The planes XMT. document —>
• Exemple de DTD externe : [en supposant que la DTD est stockée dans le fichier nommé [Link]]
• <'DOCTYPE avions_à_vendre SYSTEM "[Link]">
• //é[Link]
• <?xml version = "1.0" encoding = “utf-8"?>
• <!DOCTYPEvtu_stud_info SYSTEM ”[Link]“>

124 | Page VSISCM

• <VTU>
• <students>
• <USN>1RN10CS090</USN>
• <name>Santhosh BS</name>
• <college>RNSIT</college>
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• <branch>CSE</branch>
• <year>2010</year>
• <email>[Link]@[Link]</email>
• </students>
• <students>
• <USN>1RN0IS016</USN>
• <name>Divya K</name>
• <college>RNSIT</college>
• <branch>ISE</branch>
• <year>2009</year>
• <email>divya@[Link]</email>
• </students>
• <students>
• <USN>1RN0IS016</USN>
• <name>Divya K</name>
• <college>RNSIT</college>
• <branch>ISE</branch>
• <year>2009</year>
• <email>divya@[Link]</email>
• </students>
• </VTU>

ESPACES DE NOMS
• L’un des problèmes liés à l’utilisation de vocabulaires de balisage différents dans le même document est que
des collisions entre des noms définis dans deux ou plusieurs de ces ensembles de balises peuvent se produire.
• Un exemple de cette situation est d'avoir un<table> tag pour une catégorie de meubles et
un<table> étiquette de
• XHTML pour les tableaux d'informations.
• De toute évidence, les systèmes logiciels qui traitent les documents XML doivent être capables de
reconnaître sans ambiguïté les noms des éléments dans ces documents.

125 | Page VSISCM

• Pour faire face à ce problème, le W3C a développé une norme pour les espaces de noms XML (à
• [Link]
• Un espace de noms XML est une collection de noms d'éléments et d'attributs utilisés dans les
documents XML. Le nom d’un espace de noms a généralement la forme d’un identifiant de
ressource uniforme (URI).
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• Un espace de noms pour les éléments et les attributs de la hiérarchie enracinée dans un élément
particulier est déclaré comme valeur de l'attribut xmlns.
• La forme d'une déclaration d'espace de noms pour un élément est
• <element_name xmlns [-.prefix] = URI>
• Les crochets indiquent que ce qu'ils contiennent est facultatif. Le préfixe, s'il est inclus, est le nom
qui doit être attaché aux noms dans l'espace de noms déclaré.
• Si le préfixe n'est pas inclus, l'espace de noms est la valeur par défaut du document.
• Un préfixe est utilisé pour deux raisons. Premièrement, la plupart des URL sont trop longues pour
être saisies à chaque occurrence de chaque nom de l’espace de noms. Deuxièmement, un UR1
inclut des caractères qui ne sont pas valides dans XML.
• Notez que l’élément pour lequel un espace de noms est déclaré est généralement la racine d’un
document.
• Par exemple : tous les documents XHTML dans ces notes déclarent l'espace de noms xmlns sur
l'élément racine, html :<html xmlns = "[Link]
• Cette déclaration définit l'espace de noms par défaut pour les documents XHTML, qui est
• [Link]
• L'exemple suivant déclare deux espaces de noms. Le premier est déclaré comme étant l'espace de
noms par défaut : le second définit le préfixe, cap :
• <states>

• xmlns = "[Link]
• xmlns:cap - "[Link]
• </state>
• <name>Dakota du Sud
• <population>754844</population>
• <capital>
• <cap:name>Pierre</cap:name>
• <cap:population>12429</cap:population>

126 | Page VSISCM

• </capital>
• </state>
• <!— More states —>
• </states>

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

SCHÉMAS XML
• Les schémas XML sont similaires aux DTD, c'est-à-dire que les schémas sont utilisés pour définir la
structure du document
• Les DTD présentaient plusieurs inconvénients :
> La syntaxe de la DTD n'était pas liée à XML, elle ne pouvait donc pas être analysée avec un
processeur XML
> Il était très difficile pour les programmeurs de gérer 2 types de syntaxes différents
> Les DTD ne prennent pas en charge le type de données du contenu de la balise. Ils sont tous
spécifiés sous forme de texte
• C'est ainsi que des schémas ont été introduits

FONDAMENTAUX DU SCHÉMA
• Les schémas peuvent être considérés comme une classe dans la programmation orientée objet
• Un document XML conforme à la norme ou à la structure du schéma est similaire à un objet
• Les schémas XML ont deux objectifs principaux.
• Ils sont utilisés pour spécifier la structure de son instance de document XML, y compris laquelle
• des éléments et des attributs peuvent apparaître dans le document d'instance. Il précise également où
et à quelle fréquence les éléments peuvent apparaître
• Le schéma spécifie le type de données de chaque élément et les attributs de XML
• Les schémas XM L sont centrés sur l'espace de noms

DÉFINITION D'UN SCHÉMA

Les schémas eux-mêmes sont écrits à l’aide d’une collection de balises, ou d’un vocabulaire, provenant
d’un espace de noms qui est, en fait, un schéma de schémas. Le nom de cet espace de noms est
[Link]
• Chaque schéma a un schéma comme élément racine. Cette spécification d'espace de noms apparaît
comme suit : xmlns:xsd =
"[Link]

127 | Page VSISCM

• Le nom de l'espace de noms défini par un attribut de l'élément de schéma.

• espace targetName = [Link]

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• Si les éléments et attributs qui ne sont pas définis directement dans l'élément de schéma doivent être
inclus dans l'espace de noms cible, l'élément elementFormDefault du schéma doit être défini sur
qualifié, comme suit :
• elementFormDefault = "qualifié"
• L'espace de noms par défaut, qui est la source des noms non préfixés dans le schéma, est donné
avec une autre spécification xmlns, mais cette fois sans le préfixe :
• xmlns = [Link]

DÉFINITION D'UNE INSTANCE DE SCHÉMA

• Un document d'instance définit normalement son espace de noms par défaut comme étant celui défini
dans son schéma.
• Par exemple, si l'élément racine est un plan, nous pourrions avoir
• <planes xmlns = [Link] . . . >
• La deuxième spécification d'attribut dans l'élément racine d'un document d'instance est pour le
• attribut schemaLocation. Cet attribut est utilisé pour nommer l'espace de noms standard pour les
instances, qui inclut le nom XMLSchema-instance.
• xmlns:xsi = "[Link]
instance[Link]
• Troisièmement, le document d’instance doit spécifier le nom de fichier du schéma dans lequel
l’espace de noms par défaut est défini. Ceci est réalisé avec l'attribut schemaLocation, qui prend deux
valeurs : l'espace de noms du schéma et le nom de fichier du schéma.
• xsi:schemaLocation = '[Link]
• Par exemple, si l'élément racine est un plan, nous pourrions avoir
<planes xmlns « [Link] . . . >
• La deuxième spécification d'attribut dans l'élément racine d'un document d'instance est pour le
• attribut schemaLocation. Cet attribut est utilisé pour nommer l'espace de noms standard pour les
instances, qui inclut le nom XMLSchema-instance.
• xmlns:xsi = [Link]

128 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• Troisièmement, le document d’instance doit spécifier le nom de fichier du schéma dans lequel l’espace
de noms par défaut est défini. Ceci est réalisé avec l'attribut schemaLocation, qui prend deux valeurs :
l'espace de noms du schéma et le nom de fichier du schéma.
• xsi:schemaLocation = '[Link]

• En combinant tout cela, nous obtenons,

<[Link]
xmlns - "[Link]
xmlns:xsi - "[Link]
xsi :schemaLocation - '[Link]
| avions. xsd">

TYPES SIMPLES
• Les éléments sont définis dans un schéma XML avec la balise d'élément.
• <xsd:element name = "engine" type = "[Link]" />
• Une instance du schéma dans lequel l'élément moteur est défini pourrait avoir l'élément
suivant :<engine> six cylindres en ligne à injection de carburant</engine>
• Un élément peut recevoir une valeur par défaut avec l'attribut default :
• <xsdselement name = "engine" type « "xsdsstring"
• par défaut » « V-6 à injection de carburant » />
• Les valeurs constantes sont données avec l'attribut fixe, comme dans l'exemple suivant :
• <xsd:element name - "plane" type - "xsdsstring" fixed = "single wing" />
• Un type de données simple défini par l'utilisateur est décrit dans un élément simpleType à l'aide de
facettes.
• Les facettes doivent être spécifiées dans le contenu d'un élément de restriction, qui donne le nom du
type de base.
• Les facettes elles-mêmes sont données dans des éléments nommés pour les facettes : l'attribut value
spécifie la valeur de la facette.

129 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

TYPES COMPLEXES
Les types complexes sont définis avec la balise complexType. Les éléments qui constituent le
contenu de
un élément uniquement doit être contenu dans un groupe ordonné, un groupe non ordonné, un choix ou un
groupe nommé. L'élément de séquence est utilisé pour contenir un groupe ordonné d'éléments. Exemple:
<xsd:complexType name = "sports_car">
cxsd:séquence-
<xsd:element name - "make" type = "xsd:string" !>
<xadi element name - "model* type - "xsd:string" !>
« xsd:element nano = "engine* type - "xad:etrlng" />
<xsd:element name - "year* type - "xsd:decimal" />
</xsd:sequence-
</xsd:complexType>
Un type complexe dont les éléments sont un groupe non ordonné est défini dans un élément all. Éléments en tout et occurrences.
les groupes de séquences peuvent inclure les attributs minOccurs et maxOccurs pour spécifier le nombre de
Exemple:
<?xml version = "1.0" encoding = "utf-8"?>
<xsd:schema
[Link]
xmlns:xsd = "

targetNamespace - '[Link] xmlns - *[Link]

elementFormDefault - "qualifié-

sxsd:nom de l'élément - "plans">

<xsd: complexType >
<xsd:all> <xsd element name = "make* type = "xsd:string* minOccurs - *1* maxoccurs - “unbounded* />
</xsd:a11>/xsd:-______________________________ 5

VALIDATION DES INSTANCES DE SCHÉMAS

* XSV est l'abréviation de XML Schema Validator. Si le schéma et le document d'instance sont
disponibles sur le Web, xsv peut être utilisé en ligne, comme l'outil de validation XHTML sur le
site Web du W3C. Cet outil peut également être téléchargé et exécuté sur n’importe quel
ordinateur.
• Le site Web de xsv est [Link] VSISCM

130 | Page
Téléchargé par Ashwani kumari (kumariashwani1371@[Link])
PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

• La sortie de xsv est un document XML. Lorsque l'outil est exécuté à partir de la ligne de
commande, le document de sortie apparaît à l'écran sans formatage, il est donc un peu
difficile à lire. Voici le résultat de xsv exécuté sur planes. xml :

FEUILLES DE STYLE XSLT

• Le langage de feuille de style extensible (XSL) est une famille de recommandations
permettant de définir la présentation et les transformations des documents XML.
• Il se compose de trois normes connexes :
Transformations XSL (XSLT),
Langage de chemin XML (XPath) et objets de formatage XSL (XSL-FO).
• Les feuilles de style XSLT sont utilisées pour transformer des documents XML en différentes
formes ou formats, peut-être en utilisant différentes DTD.
• Une utilisation courante de XSLT est de transformer des documents XML en documents
XHTML, principalement pour l'affichage. Lors de la transformation d'un document XML, le
contenu des éléments peut être déplacé, modifié, trié et converti en valeurs d'attribut, entre
autres.

131 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

 PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

• Les feuilles de style XSLT sont des documents XML, elles peuvent donc être validées par
rapport aux DTD.
• Ils peuvent même être transformés avec l'utilisation d'autres feuilles de style XSLT.
• La norme XSLT est donnée à l'adresse [Link]
• XPath est un langage d'expressions, souvent utilisé pour identifier des parties de documents
XML, telles que des éléments spécifiques qui se trouvent à des positions spécifiques dans le
document ou des éléments qui ont des valeurs d'attribut particulières.
• XPath est également utilisé pour les langages d'interrogation de documents XML, tels que
XQL, et pour créer de nouvelles structures de documents XML avec XPointer.
• La norme XPath est donnée à l'adresse [Link]

XSLT
• XSLT est en fait un langage de programmation simple de style fonctionnel.
• XSLT comprend des fonctions, des paramètres, des noms auxquels des valeurs peuvent être
liées, des constructions de sélection et des expressions conditionnelles pour la sélection
multiple.
• Les processeurs XSLT prennent à la fois un document XML et un document XSLT en entrée
T
• Le document XSLT est le programme à exécuter ; le document XML est les données d'entrée
du
programme.

• Des parties du document XML sont sélectionnées, éventuellement modifiées et fusionnées

avec des parties du document XSLT pour former un nouveau document, parfois appelé
document XSL.
• Le processus de transformation utilisé par un processeur XSLT est illustré dans la Figure 7.5.
• Figure 7.5 Traitement XSLT

• Un document XSLT se compose principalement d’un ou de plusieurs modèles.

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• Chaque modèle décrit une fonction qui est exécutée chaque fois que le processeur XSLT
trouve une correspondance avec le modèle du modèle.

132 | Page VSISCM

• Un modèle XSLT de traitement des données XML est appelé modèle piloté
par modèle, qui fonctionne bien lorsque les données se composent de plusieurs instances de
collections de données très régulières, comme avec des fichiers contenant des
enregistrements.
• XSLT peut également traiter des données irrégulières et récursives, en utilisant des fragments
de modèle dans ce qu'on appelle le modèle piloté par les données.
• Une seule feuille de style XSLT peut inclure les mécanismes pour les modèles basés sur des
modèles et des données.

PROCESSEURS XML
• Le processeur XML prend le document XML et le DTD et traite les informations afin qu'elles
puissent ensuite être utilisées par les applications demandant les informations.
• Le processeur est un module logiciel qui lit le document XML pour connaître la structure et le
contenu du document XML.
• La structure et le contenu peuvent être dérivés par le processeur car les documents XML
contiennent des données explicites.

LES OBJECTIFS DES PROCESSEURS XML

• Tout d’abord, le processeur doit vérifier la syntaxe de base du document pour s’assurer
qu’elle est bien formée.
• Deuxièmement, le processeur doit remplacer toutes les références aux entités dans un
document XML par leurs définitions.
• Troisièmement, les attributs dans les DTD et les éléments dans les schémas XML peuvent
spécifier que leurs valeurs dans un document XML ont des valeurs par défaut, qui doivent
être copiées dans le document XML pendant le traitement.
• Quatrièmement, lorsqu’une DTD ou un schéma XML est spécifié et que le processeur inclut
un analyseur de validation, la structure du document XML doit être vérifiée pour garantir sa
légitimité.

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en informatique

L'APPROCHE SAX
• L’approche Simple API for XML (SAX) du traitement est appelée traitement d’événements.
• Le processeur analyse le document XML du début à la fin.
• Chaque fois qu'une structure syntaxique du document est reconnue, le processeur signale un
événement à l'application en appelant un gestionnaire d'événements pour la structure
particulière trouvée.

• 33 | Page VSISCM

Ce document est disponible gratuitement sur STUCLOCU

• Les structures syntaxiques intéressantes incluent naturellement les balises d’ouverture, les
attributs, le texte et les balises de fermeture.
• Les interfaces qui décrivent les gestionnaires d’événements forment l’API SAX.

L'APPROCHE DOM
• Le Document Object Model (DOM) est une interface de programmation d'application (API)
pour les documents HTML et XML.
• Il définit la structure logique des documents et la manière dont un document est consulté et
manipulé.
• Propriétés du DOM
O Les programmeurs peuvent créer des documents, parcourir leur structure et ajouter,
modifier ou supprimer des éléments et du contenu.
O Fournit une interface de programmation standard qui peut être utilisée dans une grande
variété d’environnements et d’applications.
O Isomorphisme structurel.
• La représentation DOM d'un document XML présente plusieurs avantages par rapport à la
liste séquentielle fournie par les analyseurs SAX.
• Premièrement, cela présente un avantage évident si une partie du document doit être
consultée plusieurs fois par l’application.
• Deuxièmement, si l’application doit effectuer un réarrangement des éléments du document,
cela peut être fait plus facilement si l’ensemble du document est accessible en même temps.
• Troisièmement, des accès à des parties aléatoires du document sont possibles.
• Enfin, comme l’analyseur voit l’intégralité du document avant tout traitement, cette approche
évite tout traitement d’un document qui s’avère ultérieurement invalide.

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

SERVICES WEB
Un service Web est une méthode qui réside et est exécutée sur un serveur Web, mais qui peut être
appelée à partir de n’importe quel ordinateur sur le Web. Les technologies standard pour prendre
en charge les services Web sont WSDL, UDD1, SOAP et XML.
• WSDL - Il est utilisé pour décrire les opérations spécifiques fournies par le service Web,
ainsi que les protocoles pour les messages que le service Web peut envoyer et recevoir.

134 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

• UDDI - fournit également des moyens d'interroger un registre de services Web pour
déterminer quels services spécifiques sont disponibles.
• SOAP - était à l'origine un acronyme pour Standard Object Access Protocol, conçu pour
décrire les objets de données.
• XML - fournit un moyen standard permettant à un groupe d'utilisateurs de définir la structure
de leurs documents de données, en utilisant un langage de balisage spécifique au sujet.

135 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

Examen BCA du 6e semestre, mai 2017 (CBCS) (

2016-17 et au-delà)
INFORMATIQUE
BCA 604 : Programmation Web
Max. Notes : 70 Durée : 3
Instruction : Répondez à toutes les sections. heures

SECTION-A
Répondez à dix questions. Chaque question rapporte deux points (10x2=20)
1. Qu'est-ce qu'un navigateur Web ? Citez trois navigateurs Web.
2. Qu'est-ce qu'une DTD ? Mentionnez ses types.
3. A quoi sert<img> étiqueter? Donnez la syntaxe de<img> étiqueter.
4. Qu'est-ce qu'un sélecteur universel ?
5. Qu'est-ce qu'un sélecteur d'ID en CSS ?
6. Qu'entendez-vous par un objet Math et date dans Java Scrip ?
7. Qu'est-ce que DHTML ? Expliquer.
8. Que sont les types de données composites en JavaScript ?
9. Qu'est-ce qu'un schéma XML ?
10. Que sont les événements de souris ?
11. Qu'est-ce qu'un gestionnaire d'événements ?
12. Qu'est-ce que MIME ? Expliquer.
SECTION-B
Répondez à cinq questions. (5x10=50)
13. a) Qu'est-ce que le DNS ? Expliquez le domaine et le sous-domaine avec des exemples appropriés.
b) Quels sont les différents niveaux de titres en HTML ?
14. Quels sont les différents types de listes pris en charge dans XHTML ? Expliquer
15. a) Expliquez les différents niveaux de CSS.
b) Expliquez cinq types de sélecteurs en CSS.
16. a) Écrivez un code Java Script pour trouver la factorielle d'un nombre.
b) Qu'est-ce qu'un script Java ? Quels sont les types de données pris en charge par Java Script ?
17. Qu'est-ce qu'un formulaire ? Expliquez les composants du formulaire avec un exemple.
18. a) Quels sont les différents types de techniques de positionnement ? Expliquer.
b) Expliquez la balise de tableau avec un exemple.
19. a) Créer un formulaire pour les informations sur les étudiants. Écrivez du code Java Script pour trouver le total,
la moyenne, le résultat et la note.
b) Qu'est-ce que la DTD ? Expliquez la DTD interne et la DTD externe.
20. a) Expliquez les événements XHTML.
b) Écrivez une courte note sur DOM.

136 | Page VSISCM

Examen du sixième semestre du BCA, mai/juin 2018
(CBCS) (F+R) (2016-17 et suivants)

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])

PROGRAMMATION WEB SUHAS AITHAL V
Maître de conférences en
informatique

L'INFORMATIQUE
BCA 604 : Programmation Web
Durée : 3 heures Max. Notes : 70
Instruction : Répondez à toutes les sections.
SECTION - A
Répondez à dix questions. Chaque question rapporte deux points. (10x2=20)
1. Définir le navigateur Web.
2. Qu'entendez-vous par adresse IP ?
3. Définir l'URL. Donnez un exemple.
4. Qu'est-ce que MIME ?
5. Donnez deux différences entre HTML et XHTML.
6. Qu'est-ce qu'un objet navigateur ?
7. Qu'est-ce qu'un événement et un gestionnaire d'événements ?
8. Qu'est-ce qu'un schéma XML ?
9. Énumérez deux événements de souris.
10. Qu'entendez-vous par espaces de noms ?
11. Qu'est-ce qu'un constructeur en Javascript ?
12. Qu'est-ce qu'une feuille de style XSLT ?
SECTION - B
Répondez à cinq questions. Chaque question vaut 10 points.
13. a) Expliquez les listes en XHTML avec des exemples.
b) Illustrer la balise < frameset > avec un exemple.
c) Différenciez les balises < span > et < div > avec des exemples.
14. a) Qu'est-ce que CSS ? Expliquez les différents niveaux de CSS avec des exemples.
b) Écrivez un programme JavaScript pour implémenter toutes les opérations de chaîne.
15. a) Qu'est-ce qu'un sélecteur en CSS ? Distinguer les sélecteurs de classe et d’ID avec des exemples.
b) Qu'est-ce qu'une forme ? Illustrez les principaux attributs de la forme avec des exemples.
16. a) Qu'est-ce qu'un tableau en JavaScript ? Comment créer un objet tableau ? Donnez un exemple.
b) Quelle est la syntaxe générale d’une fonction JavaScript ? Donnez un exemple.
17. Expliquez la correspondance de modèles à l’aide d’expressions régulières en JavaScript.
18. a) Illustrer le DOM.
b) Écrivez un programme JavaScript pour implémenter les événements du clavier.
19. a) Qu'est-ce que la DTD ? Expliquez le type de DTD.
b) Écrivez un programme JavaScript pour trouver la factorielle d'une liste de nombres, en lisant l'entrée comme
argument de ligne de commande.
20. a) Expliquez le modèle de boîte CSS. b) Décrivez les processeurs XML.

137 | Page VSISCM

Téléchargé par Ashwani kumari (kumariashwani1371@[Link])