Editions ENI Livres | Vidéos | e-Formations
Améliorer vos compétences web
Page HTML
1. L’indispensable
a. Balises
Vous trouverez dans cette partie un rappel succinct concernant la structure d’une page HTML. Si vous pratiquez régulièrement HTML/CSS alors vous pouvez sauter cette partie. Vous obtiendrez tous les détails concernant les balises et les attributs disponibles auprès du W3C (http://www.w3.org/standards/webdesign/htmlcss). Il existe plusieurs versions pour une page HTML ; la dernière version est la 5. Il existe deux familles pour les pages HTML : la famille SGML et la famille XML, les deux étant supportées par les navigateurs récents. La famille XML est plus stricte que la famille SGML mais les navigateurs font peu la différence car ils ont été conçus pour supporter un certain nombre d’erreurs.
Une page HTML est composée de balises. Une balise a la possibilité d’avoir un contenu si sa nature l’autorise. La somme des relations conteneur/contenus forme la structure de votre page. Tout en haut de cette structure il y a la balise html qui est donc unique et appelée balise racine ou élément racine. La syntaxe d’une balise est faite par une partie ouvrante via des chevrons et éventuellement si elle possède un contenu par une partie fermante, elle-même construite par des chevrons.
Exemple
<b>Hello</b> La balise b possède le texte Hello, elle sert à mettre du gras dans le texte. Elle a une partie ouvrante <b> et une partie fermante </b>. Ce qui est entre les deux parties est le champ d’application.
La balise peut, dans sa partie ouvrante, avoir un ou plusieurs attributs. Un attribut est une paire clé unique/valeur séparée par =. La valeur peut être placée entre guillemets ou bien entre apostrophes.
Exemple
<img src="images/hello.jpg"> La balise img n’a pas de contenu, elle possède un attribut src désignant la localisation d’un fichier image relatif à la page courante.
Dans la forme XML, nous devons écrire :
<img src="images/hello.jpg"/> Ce qui est équivalent à :
<img src="images/hello.jpg"></img> Lors de la construction d’une page HTML, vous avez généralement ce type de structure :
<html>
<head> ...Librairies JavaScript
1. L’objet window
a. Rôle
L’objet window a la particularité d’avoir ses propriétés et ses méthodes disponibles dans l’espace de noms global. Son usage est courant et vous avez déjà pu l’employer sans le savoir, par exemple en utilisant la méthode alert.
Exemple
alert( "bonjour" );
window.alert( "bonjour" ); // Equivalent Ces deux invocations sont équivalentes. À noter qu’en pratique seule la première forme sera employée pour une question d’efficacité.
Il existe de nombreuses propriétés et méthodes dans l’objet window. Nous allons présenter ci-dessous celles d’usage courant.
Dans la même lignée que la méthode alert, la méthode confirm sert à obtenir la confirmation auprès d’un utilisateur par une boîte de dialogue modale. La méthode prompt attend la saisie d’une valeur et null est retourné en cas de refus par l’utilisateur.
Exemple
if ( confirm( "Voulez-vous commencer le jeu ?" ) ) {
var nombreMagique = Math.round( Math.random() * 10 );
var coup = 0;
while ( true ) {
coup++;
var val = prompt( "Votre chiffre ?" );
if ( val ) {
if ( val == nombreMagique ) {
alert( "Félicitations, vous avez mis " + coup + " coup(s)" );
break;
} else
if ( val > nombreMagique ) {
alert( "Il est plus petit" );
} else
alert(...DOM
1. Document
a. Propriétés et méthodes
Nous avons déjà utilisé la méthode write pour l’écriture d’une ligne. Il existe également writeln qui ajoute un retour à la ligne. Ces méthodes ne sont pas dynamiques, au sens où elles ne peuvent fonctionner qu’une fois et lors de l’interprétation de la balise script. Elles sont d’usage plutôt rare hormis pour des bugs, tests et cas particuliers.
Comme nous l’avons vu en introduction, un document HTML est composé de balises. Le navigateur dispose en interne d’un parseur qui va convertir ces balises en une hiérarchie de nœuds (objets) correspondant à l’arborescence de vos balises. Cette organisation est représentée grâce à un standard défini par le W3C que l’on appelle DOM (Document Object Model). Ces nœuds représentent la structure de votre document et sont accessibles en JavaScript. Il est donc possible de modifier le document en modifiant les nœuds qui le composent. Un nœud qui peut avoir un contenu et/ou des attributs est un élément.
Concernant les nœuds, nous disposons des propriétés JavaScript principales suivantes :
|
Propriété |
Rôle |
|
attributes |
Tableau des attributs. |
|
childNodes |
Tableau des nœuds fils. |
|
data |
Texte du nœud. |
|
firstChild |
Premier nœud fils. |
|
lastChild |
Dernier nœud fils. |
|
nextSibling |
Prochain nœud frère. |
|
nodeName |
Nom du nœud. Soit le nom d’une balise, soit le nom d’un attribut. |
|
nodeType |
Type de nœud. 1 étant un élément, 2 un attribut, 3 un nœud texte… |
|
nodeValue |
Valeur du nœud pour un attribut ou un texte. |
|
parentNode |
Nœud parent. |
|
previousSibling |
Précédent nœud frère. |
Parmi les méthodes, nous trouvons principalement :
|
Méthode |
Rôle |
|
appendChild() |
Ajouter un nœud fils. |
|
appendData() |
Ajouter un texte au nœud. |
|
cloneNode() |
Cloner le nœud. Si un argument true est présent, le contenu est également cloné. |
|
deleteData() |
Effacer une partie du texte présent dans le nœud. |
|
getAttribute() |
Récupérer la valeur d’un attribut d’un élément. |
|
getAttributeNode() |
Récupérer... |
Formulaire
1. Validation simple
L’usage de JavaScript pour la gestion de formulaire étant courant, nous allons ici proposer quelques usages. Tout d’abord, c’est l’événement onsubmit sur la balise form qui sert au contrôle du contenu du formulaire avant l’envoi.
Exemple
<html>
<head>
<script type="text/javascript">
function valider( form ) {
var fields = form.getElementsByTagName( "input" );
for ( var i = 0;i < fields.length; i++ ) {
var f = fields[ i ];
if ( f.type == "text" && f.value == "" ) {
alert( "Merci de compléter le champ " + f.name );
f.focus();
return false;
}
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return valider(this)">
<input type="text" name="nom"> <br>
<input type="text" name="prenom"> <br>
<input type="submit" value="Valider">
</form>
</body>
</html> Dans cet exemple, nous parcourons tous les champs textes et nous vérifions s’ils sont vides ou non. Dans le cas d’un champ vide, nous avertissons l’utilisateur qu’il doit compléter le champ et plaçons le focus (le curseur) dans le champ en question par la méthode de même nom. La fonction qui effectue une validation doit retourner...
Étude de cas
1. Gestion de notes dans une page web, architecture MVC
a. Première étape
Cette étude de cas consiste à pouvoir ajouter et supprimer un ensemble de notes dans une page web. Nous essayons de suivre une architecture MVC (Modèle Vue Contrôleur) afin de pouvoir éventuellement changer la présentation au choix de l’utilisateur. Cette architecture consiste à bien séparer chaque composante de l’application. Ainsi, le modèle de données stockera toutes les notes de l’utilisateur, alors que la vue (présentation) ira parcourir ce modèle de données pour effectuer l’affichage.
Lorsque vous commencez un projet, vous pouvez ne vous focaliser que sur le squelette de l’application. Nous l’avons vu dans un chapitre précédent, c’est l’architecture en module qu’il faut favoriser. Nous avons donc comme point de départ quelque chose de ce style :
var notes = ( function() {
return {
ajoutItem : function() {
},
supprimerItem : function( index ) {
}
};
} )(); Ce module de base offre donc deux accès par les méthodes ajoutItem et supprimerItem. À noter que cette dernière possède un paramètre nommé index car il faut préciser quelle note supprimer.
b. Modèle de données
Comme nous l’avons vu, le modèle de données se doit de conserver toutes les données de l’utilisateur. Il doit pour cela avoir une méthode pour l’ajout ainsi que pour la suppression.
Exemple
var notes = ( function() {
var model = {
data : []
};
model.ajout = function( note ) {
this.data.push( { "texte" : note } );
}
model.supprimer = function( index ) {
this.data.splice( index, 1 );
}
return { ...