loading

Qu'est-ce que le JavaScript ?

C'est un langage de script, contenu dans une page HTML qui permet de la dynamise : il permet d'ajouter des interactions avec l'utilisateur, des animations, de l'aide à la navigation.

Le JavaScript est un langage dit client-side : les scripts sont exécutés par le navigateur chez l'internaute qui est le client. Cela diffère des langages de script dit server-side qui sont exécutés par les serveur Web. C'est le cas des langages comme le PHP.

La finalité n'est pas la même. Un script server-side va s'occuper de créer la page Web qui sera envoyé au navigateur. Il va alors afficher la page puis exécuter les scirpts client-side tel que le JavaScript.

Les propriétés

Les objets ont des propriétés (exemple : un chat à une fourrure).

Dans l'univers du JavaScript, les fenêtres ont un titre et les formulaires peuvent contenir des cases à cocher.

Le fait de modifier la propriété d'un objet affecte cet objet. La même propriété peut être associée à des objets complètements différents

Une propriété peut donc être appliquée partout ou elle s'aplique (exemple : le bolt du chat peut être vide, de même que le ventre du chat aussi).

  • velo.roues
  • chat.pattes.devant.gauche
  • guitare.manche
  • voiture.volant

Les méthodes

Les actions que les objets peuvent réaliser sont appelées des méthodes (exemple : les chats ronronnent). Les objets JavaScript possèdent aussi leurs méthodes : les boutons se cliquent (click()), les fenêtres s'ouvrent (open()) et le texte peut être sélectionné (selected()).

Les parenthèses signalent qu'il s'agit de méthodes et non de propriétés On peut considérer les objets et les propriétés comme des noms et les méthodes comme des verbes. Les premiers correspondent à des choses, les secondes à des actions que ces choses peuvent réaliser ou dont elle peuvent faire l'objet.

On peut rassembler des objets, des propriétés et des méthodes pour obtenir une meilleure description d'un objet ou pour décrire un processus. En JavaScript, ces éléments sont séparés par des points (syntaxe à points).

  • chat.ronronner
  • document.ecrire
  • voiture.rouler
  • navigateur.afficher

Le DOM : Document Object Model

Dans les pages Web, les objets qui composent le document sont représentés sous forme d'une structure arborescente. En construisant les pages HTML , le niveau supérieur de la page est contenu dans la balise . A l'intérieur se trouvent les balises et . Certains navigateurs permettent d'afficher une réprésentation de ces structures arborescentes. Le JavaScript considère chacun des éléments de l'arbre du document comme des objets et peut ainsi les manipuler.

La représentation des objets dans le document est appelée modèle objet du document (DOM : Document Object Model). Chacun des objets de l'arbre est aussi appelé "noeud". Le JavaScript peut être utilisé pour modifier n'importe quel aspect de l'arbre, notamment en ajoutant et supprimant des noeuds, en y accédant ou en les modifiant. Si le noeud contient une balise HTML, on l'appelle noeud "élément", sinon il s'agit d'un noeud "texte". Les noeuds éléments peuvent contenir des noeuds texte.

Gérer des événements

Les événements correspondent aux actions réalisées par les utilisateurs pendant qu'ils visitent les pages. L'envoi d'un formulaire et le survol d'une image avec la souris sont des exemples d'événements. Le JavaScript gère les événements à l'aide d'une commande appelées gestionnaire d'événements. Telle action de l'utilisateur dans la page peut ainsi déclencher un gestionnaire d'événements dans le script.

Evénement Signification
onabort l'utilisateur a annulé le chargement de la page
onblur l'utilisateur a quitté l'objet
onchange l'utilisateur a changé l'objet
onclick l'utilisateur a cliqué sur un objet
onerror le script a rencontré une erreur
onfocus l'utilisateur a activé un objet
onload l'objet a fini de se charger
onmouseover le curseur est passé au-dessus d'un objet
onmouseout le curseur à cessé de survoler un objet
onselect l'utilisateur a sélectionné le contenu d'un objet
onsubmit l'utilisateur a soumis un formulaire
onsubmit l'utilisateur a soumis un formulaire
onunload l'utilisateur a quitté la page

Valeurs et variables

En JavaScript, chaque élément d'information est appelé une valeur, il existe différents types de valeurs, les plus courantes sont les nombres. Les valeurs de chaînes correspondent à des mots entourrés de guillemets.

Nombre toute valeur numérique
Chaîne

caractères entre guillemets

var text = "Mon premier texte";

Boolean

vraie(true) ou faux(false)

var isTrue = true;
var isFalse = false;

Null vide et sans signification
Objet toute valeur associée à un objet
Fonction l'utilisateur a activé un objet

Les opérateurs arithmétiques

En JavaScript, chaque élément d'information est appelé une valeur, il existe différents types de valeurs, les plus courantes sont les nombres. Les valeurs de chaînes correspondent à des mots entourrés de guillemets.

  • x + y (numérique) : additionne x et y
    var result = 3 + 3;
    alert(result);

    Essayez
  • var number = 3;
    number = number + 5;
    alert(number);

    Essayez
  • x + y (chaîne) : concatène x et y
    var hi = 'Bonjour', name = 'toi', result;
    result = hi + name;
    alert(result);
    Affichera "Bonjourtoi"

    Essayez

    var text = 'Bonjour';
    text += ' toi';
    alert(text);
    Affichera "Bonjour toi"

    Essayez

Combiner les opérateurs

var condition1, condition2, result;
condition1 = 2 > 8; --> retourne "false"
condition2 = 8 > 2; --> retourne "true"
result = condition1 && condition2;
alert(result);

Essayez

Attributions et comparaisons

Lorsqu'on place une valeur dans une variable, on attribue cette valeur à la variable et on utilise un opérateur d'attribution à cet effet. L'opérateur égalité est utilisé pour réaliser des attributions comme sonNom = "Tom". Il existe tout un ensemble d'opérateurs d'attribution.

x = y postionne x à la valeur de y
x += y équivaut à x = x + y
x -= y équivant à x = x - y
x *= y équivant à x = x * y
x /= y équivaut à x= x / y
x %= y équivaut à x : x % y

Comparaisons

On aura souvent besoin de comparer la valeur d'une variable avec celle d'une autre ou avec une valeur littérale (une valeur tapée directement dans l'expression).

x == y retourne true si x est y sont égaux
x |= y retourne true si x et y ne sont pas égaux
x > y retourne true si x est supérieur à y
x >= y retourne true si x est supérieur ou égal à y
x < y retourne true si x est inférieur à y
x <= y retourne true si x est inférieur ou égal à y
x && y retourne true si x et y valent tous les deux true
x || y retourne true si x ou y vaut true
!x retourne true si x vaut false

Ecrire du HTML adapté au JavaScript

Puisqu'on utilise du JavaScript pour manipuler des objets des documents, il faut programmer le HTML de manière à ce qu'il puissent aisément être utilisé par les scripts. On doit donc écrire du XHTML moderne et comptabile avec les standards et utiliser des feuilles de style CSS pour séparer la structure du document de sa présentation. Les documents doivent non seulement passer par la validation du W3C (validator.w3.org) mais il convient également de réfléchir par avance à ce qu'on risque de réaliser avec nos pages et d'ajouter les balises et attributs appropriés qui permettront d'accéder aisément aux objets depuis le code JavaScript.

Structure, présentation et comportement

Il faut des feuilles de style CSS externes, ainsi que des fichiers JavaScript externes. Lorsqu'on effectue cette séparation, les sites contiendront trois types de fichiers texte :

  • fichiers XHTML : définissent le contenu de la structure de la page
  • fichiers CSS : contrôlent l'apparence et la présentation des pages
  • fichiers JavaScript : contrôlent le comportement des pages

Ou placer les scripts ?

Ils peuvent être placés à deux endroits :

  • dans les pages HTML : entre les balises et (script d'en-tête)
  • entre les balises

Ecrire un script


Script interne

La balise d'ouverture du script : elle indique au navigateur qu'il doit s'attendre à lire du code JavaScript et non du code HTML. L'attribut language = "JavaScript" indique au navigateur quel language est utilisé. L'attribut type="text/JavaScript" signale que le script est en texte brut, organisé sous forme de JavaScript.

document.write("Hello world !");
La première ligne de code JavaScript : elle récupère la fenêtre du document et y écrit "Hello world !". Le ";" indique à l'interpréteur JavaScript du navigateur que la ligne se termine. La balise "script" termine le bloc JavaScript et indique au navigateur qu'il peut s'attendre à rencontrer du HTML à nouveau.

Script externe

Le problème d'utilisation des scripts dans la page HTML est qu'ils ne sont disponibles que pour la page concernée). Souvent, on souhaitera que plusieurs pages HTML partagent un script. Il faut alors inclure un réglage à un script externe, à un fichier séparé qui ne contient que du code JavaScript. Les pages individuelles appelent le fichier .js en ajoutant simplement un nouvel attribut src à la balise script. Lorsqu'on doit apporter des changements à un script, on n'a qu'à changer le fichier .js pour que toutes les pages HTML qui le référence soit automatiquement mise à jour. L'attribut src de la balise script indique aux navigateurs qui supportent le JavaScript ou rechercher le fichier. La page web résultante a la même apparence que si le script se trouvait à sa place habituelle dans les balises 'script' de la page, alors qu'il se trouve dans un fichier .js externe.

Les fonctions

On fera souvent appel à des fonctions en JavaScript. Une fonction est un ensemble d'instructions JavaScript qui réalisent une tâche. Chaque fonction doit se voir attribuer un nom, à une rare exception près, et peut être invoquée ou appelée par d'autres parties du script. Les fonctions peuvent être appelées autant de fois que nécessaire durant l'exécution d'un script. Le retrait de la deuxième ligne facilite la lecture du code. Toutes les instructions entre l'accolade ouvrant et l'accolade fermante font partie de la fonction.

Pour rediriger un utilisateur à l'aide d'une fonction

Pour rediriger un utilisateur directement à l'aide d'un lien, sans fonction

Tester l'existence de variables avec "typeof"

var number = 2;
alert(typeof number);
Affichera "number".

Essayez

Conversion

Conversion d'une chaîne de caractère en nombre


var text = '1337', number;
number = parseInt(text);
alert(number);

Essayez

Convertir un nombre en chaîne de caractères


var text, number1 = 4, number2 = 2;
text = number1 + '' + number2;
alert(text);

Essayez

Les instructions conditionnelles

Elles se décomposent en trois parties : la section if ou s'effectue le test, la section alors ou intervient la partie du script à réaliser si le résultat est true et la section facultative else qui contient la partie du script à exécuter si le test retourne false. Le contenu du test dans la section if est entourré de paranthèses. Le contenu des deux autres section est entourré d'accolades.

Le structure "if"


Une condtion est est constituée de :

  • De la structure conditionnelle
  • De parenthèses qui contiennent la condition à analyser, ou plus précisément le booléen retourné par les opérateurs conditionnels
  • D'accolades qui permettent de définir la portion de code qui sera exécutée si la condition se vérifie. Si on place ici la première accolade à la fin de la première ligne de condition, mais vous on peut très bien la placer comme on le souhaite.

Pour confirmer un choix


La méthode confirm() prend en paramètre la question qu'on souhaite poser à l'utilisateur et retourne true ou false selon la réponse de l'utilisateur. Si l'utilisateur à cliqué "ok", confirm() retourne true et une alerte s'affiche avec le message "You said yes". Il s'agit de la section alors du code, bine qu'il n'existe pas d' opérateur then en JavaScript, les accolades permettent de délimiter cette section. Cette accolade termine la partie qui s'exécute lorsque la commande confirm() retourne la valeur true.

if(confirm("Are you sure you want to do that ?" )) {
alert("You said yes");
} else {
alert("You said no");
}

Essayez


var floor = parseInt(prompt("Entrez l'étage où l'ascenseur doit se rendre (de -2 à 30) :"));
if (floor == 0) {
alert('Vous vous trouvez déjà au rez-de-chaussée.');
} else if (-2 <= floor && floor <= 30) {
alert("Direction l'étage n°" + floor + ' !');
} else {
alert("L'étage spécifié n'existe pas.");
}

Essayez


Le switch case


L'instruction switch est utilisée pour effectuer différentes actions en fonction de différentes conditions. On l'utilise en général lorsqu'il y a trop de conditions imbriquées, cela simplifie l'écriture.
var car = prompt("Quelle marque de voiture aimez-vous ?");
var text;
switch(car){
case "BMW":
text="j'aime bien";
break;
case "Mercedes":
text="j'aime bien aussi";
break;
case "Opel":
text="j'aime moyennement bien";
break;
case "Audi":
text="j'aime pas";
break;
default:
text="Ah ben je connais pas"; }
alert(text);

Essayez


Les ternaires


Le dernier type de condition sont les ternaires, elle sont très particulières, parce qu'elles très rapides à écrire mais peu lisibles et surtout elles renvoient une valeur.

var startMessage = 'Votre catégorie : ',
endMessage,
adult = confirm('Êtes-vous majeur ?');
endMessage = adult ? '18+' : '-18';
alert(startMessage + endMessage);

Essayez

La portée des variables

La portée correspond au niveau auquel les variables sont la référence par défaut (la référence à laquelle on pensera automatiquement si aucune information d'identification supplémentaire n'est fournie). Si la portée est locale : à l'interieur d'une fonction, si la portée est globale : partout. Dans le code JavaScript, le moyen le plus simple d'éviter toute confusion concerant la portée des variables consiste à éviter d'utiliser deux variables du même nom à deux endroits différents pour réaliser deux choses différentes.

Les événements sans gestionnaires d'événements

Affiche une message avant une redirection

Parfois, on peut souhaiter réaliser une action particulière après que l'utilisateur clique sur un lien mais avant que la navigateur n'atteigne la destination du lien. Ce peut être le cas si on souhaite afficher une alerte avant que l'utilisateur n'accède à une page particulière du site ou pour indiquer clairement que l'utilisateur est sur le point deq quitter le site.

Essayez

Code

Afficher un message quand on clique sur une image

On applique une fonction au click sur une image. Lorsque l'on clique sur l'image, le nom de l'artiste apparaît en-dessous de l'image.

Code

Afficher un texte

On peut récupérer l'id d'un élément html et à l'aide d'un fonction JavaScript, afficher un texte dans cet élément.

Code

Afficher un texte en cliquant sur un bouton

A partir d'un switch case, on va afficher un message différent selon le bouton cliqué.

Code

Des boutons dynamiques

Il est possible de réaliser facilement une page web contenant des boutons dynamiques, qui change d'aspect lorsque l'on survole le bouton avec les souris, des boutons renvoyant vers différents sites. Il suffit de créer des liens en y ajoutant des images ayant l'aspect de boutons. Un script s'occupera de remplacer l'image au survol du bouton.


Essayer
Code

Une calculatrice

La calculatrice est une application de base en JavaScript, en définissant quelques fonctions, on y arrive facilement.


Essayer
Code

Une catalogue

A l'aide de tableau, on peut rapidement et facilement créer une gallerie d'articles en JavaScript.


Essayer
Code

Les animations

Une bannière dynamique

Il existe plusieurs manières de réaliser des bannières dynamiques : défilement de texte. On peut aussi choisir l'endroit de l'affichage, soit dans une boîte, soit dans la barre d'état du navigateur, etc. Dans chacun des scripts, il y a 3 paramètres à changer :

  • Du texte de la bannière
  • De la vitesse : banniere1(100)
  • De la longueur de la boîte : size = 40

Un alert personnalisé

Les boîtes d'alert permettent d'afficher un message lors d'un clic sur un bouton par exemple, il est tout à fait possible d'afficher une boîte d'alert personnalisée à l'aide du CSS. Il faut donc en JavaScript, créer une variable qui affichera le message, mais également un bouton permettant de fermer cette boîte de dialogue stylisée. On crée alors à l'aide d'une fonction une boîte de dialogue, qui permettra de redesigner l'alerte de base. La zone d'alerte est un objet set n'est pas soumise au CSS. Il faut donc créer un élément HTML et imiter la fonctionnalité alert().

Essayez Code

Bannière dans une boîte avec texte de défilement

Essayez Code

Afficher une image aléatoire (slider)

Un slider est un élément présentant du contenu de façon ergonomique, souvent sous forme de diaporama, avec ou sans navigation, il permet d'afficher des images de manière aléatoire. On peut également l'appeller carroussel, il peut être automatique (les images changent automatiquement ou manuel).

Code

Un carrousel d'images

Le carroussel d'image montré ici présente le même principe que le slider, sauf qu'ici les images doivent être changées manuellement.

Slideshow
1/3
Code

Créer des survols

Manipulation des images

Changement d'une image

Il est possible de changer une image au survol de la souris.

Passer la souris ICI pour le rouge.

Passer la souris ICI pour le bleu.

Passer la souris ICI pour le vert.

Code

Les compteurs

Un compteur de visites de pages avec des cookies

Les cookies ou témoins de connexion sont une possibilité pour un compteur de visites de pages en JavaScript. Ils permettent au JavaScript de sauvegarder des données sur le disque dur de l'utilisateur. Cela contrôle le navigateur de l'utilisateur. Mais les cookies ne peuvent pas écrire des quantités de données incontrôlées sur l'ordinateur de l'utilisateur mais un nombre limité de lignes. Chacune de ces lignes définit une variable et lui affecte une valeur. Un témoin de connexion peut donc être comparé à une inscription dans un fichier de configuration avec la différence que le cookie ne peut adresser des données de configuration sur l'ordinateur de l' utilisateur.

Le comptage des visites des pages personnelles diffère du comptage de toutes les visites des pages. Pour gérer tous les accès à une page, le programme doit avoir son compteur sur l'ordinateur serveur. Ce script ne compte que les visites d'un utilisateur déterminé à une page déterminée.

Nombre de visites sur ce site

Utilisez donc la fonction actualiser/recharger de votre navigateur ...

Code

Une minuterie

On peut créer un simple compteur numérique qui s'incrément e et qu'on peut lancer, stopper puis redémarrer d'un clic.

Cliquez pour lancer la minuterie.

Code

Les fenêtres

Ouvrir une nouvelle fenêtre pop-up

Ouvrir une pop-up n'est pas nécessaire utilisé pour faire de la publicité, les pop-up servent surtout à séparer de différents contenus, lorsque, par exemple, on veut afficher une image grand format, il est plus adapté de l'ouvrir dans une nouvelle fenêtre ou quand on clique sur un bouton d'aide, il est plus adapté d'avoir une fenêtre différente.

La méthode JavaScript pour ouvrir une fenêtre est "window.open", cette méthode peut avoir plusieurs arguments :

  • L'url de la fenêtre : l'url qui sera chargée dans la nouvelle fenêtre
  • Le nom de la nouvelle fenêtre : le nom de la nouvelle fenêtre, c'est très utile pour que deux fenêtres puissent communiquer entre elles.
  • Les options : différentes options permettant de configurer la nouvelle fenêtre : sa taille, sa position,...

Il existe différentes options, certaines sont désactivées dans les navigateurs pour des raisons de sécurité :

  • with :la largeur de la fenêtre en px
  • height : la hauteur de la fenêtre en px
  • left :la position de la fenêtre à partir de la droite en px
  • top :la position de la fenêtre à partir du haut en px
  • top :la position de la fenêtre à partir du haut en px
  • menubar :affichage du menu, yes pour oui, no pour non
  • toolbar :affichage de la barre d'outils, yes pour oui, no pour non
  • scrollbars :affichage de la barre de défilement, yes pour oui, no pour non

Code

Ouvrir plusieurs fenêtres pop-up simultanément

On peut ouvrir plusieurs fenêtres popup simultanément mais au risque d'agacer l'utilisateur qui navigue sur le site.

Code

Ouvrir et fermer une fenêtre

On peut ouvrir une fenêtre en JavaScript, à l'aide d'un bouton, par exemple, cela ouvrira la page dans un nouvel onglet et dans cette page nous aurons un lien pour fermer la fenêtre.

Code

Les formulaires

La validation d'un formulaire complet

La validation de formulaire normalement utilisée sur un serveur, après que l'utilisateur (le client) a entré toutes les données nécessaires, puis appuyé sur le bouton de soumission. Si les données entrée par l'utilisateur ne sont pas correctes ou sont manquantes, le serveur doit renvoyer toutes les données à l'utilisateur et demander que le formulaire soit soumis à nouveau avec des informations correctes. C'est un long processus qui est fardeau pour le serveur. JavaScript fournit un moyen de valider les données du formulaire sur l'ordinateur de l'utilisateur avant de l'envoyer au serveur web. La validation remplit généralement deux fonctions :

  • La validation de base : tout d'abord, le formulaire doit être vérifié pour s'assurer que tous les champs obligatoires soient remplis. Il faudrait simplement faire une boucle dans chaque champ du formulaire et vérifier les données.
  • La validation du format des données : deuxièmement, les données entrées doivent être vérifiées, on doit vérifier que ce sont des valeurs correctes. Le code doit inclure une logique appropriée pour tester l'exactitude des données.

Nom
EMail
Code postal
Pays
Code

Les propriétés

Les formulaire sont simple à utiliser, il faut d'abord mémoriser quelques propriétés de base. Il est possible d'accéder à n'importe quel propriété d'un élément HTML juste en tapant son nom, c'est pareil pour les propriétés spécifiques aux élements d'un formulaire comme "value","disabled","checked".

Nom :  

Cliquez sur le bouton pour changer la valeur du champ texte.


Code

Lire une valeur dans une zone de texte

Quand on entre une valeur et qu'on appuie sur le bouton pour contrôle celle-ci, elle affiche la valeur entrée dans un alert.

Code

Les booléens avec "disabled", "checked" et "readonly"

Contrairement à la propriété value, ces 3 propriétés ne s'utilisent pas de la même manière qu'en HTML où il suffit d'écrire, par exemple, "disabled=disabled" pour désactiver un champ texte. En JavaScript, ces 3 propriétés deviennent booléennes, on peut donc attribuer une valeur "true" ou "false" à chacun de ces propriétés pour activer ou désactiver un champ de texte. Pour vérifier quel bouton radio à été coché, il faudra utiliser une boucle "for".

Les boutons radio possèdent des propriétés qui s'appliquent aussi aux checkbox.

Propriété Description
name indique le nom du contrôle. Tous les boutons portent le même nom
index l'index ou le rang du bouton radio en commençant par 0
checked indique l'état en cours de l'élément radio
defaultchecked indique l'état du bouton sélectionné par défaut
value indique la valeur de l'élément radio
Entrez votre choix :
Choix numéro 1
Choix numéro 2
Choix numéro 3

Code

Ecrire une valeur dans une zone de texte

Quand on entre une valeur et qu'on appuie sur le bouton pour contrôle celle-ci, elle s'affiche dans la zone de texte de sortie.






Code

Les listes déroulantes

Les listes déroulantes possèdent leurs propriétés, il faut retenir que deux parmis toutes celles qui existent sont importantes : slectedIndex, qui donne l'index, donc l'identifiant de la valeur sélectionné et options, qui liste dans un tableau les éléments "option" de la liste déroulante.


Code

Marquer un champs requis

Lors du remplissage d'un formulaire, il arrive parfois que des champs particuliers doivent obligatoirement être remplis par l'utilisateur avant que le formulaire soit transmis. Un script JavaScript peut permettre de vérifier que certains champs sont bien remplis. Dans l'exemple, nous utiliserons le CSS directement dans le script pour mettre en évidence les champs qui ne sont pas remplis, en leur donnant une couleur de fond et on affichera une message d'avertissement à l'utilisateur, à l'aide d'une fenêtre d'alerte. La vérification survient lorsque l'utilisateur clique sur le bouton d'envoi du formulaire. Le principe de base est que les attributs class dans le code HTML déterminent les champs qu'on souhaite vérifier mais ici, on utilisera l'attribut name des champs texte pour atteindre les champs avec le JavaScript.

Code Javascript Code HTML

Comparer deux champs

C'est quasi systématique : les formulaires d'inscription demandent une double saisie de mot de passe et alert en cas de non correspondance. Une première sécurité face à l'oubli possible d'un caractère. Voici un script qui se charge de prendre le contenu des deux champs de type "password", de vérifier qu'ils sont tous les deux bien remplis, puis de les comparer. Si et seulement si ils sont identiques, le script valide le formulaire, sinon l'utilisateur revient à la case départ.

Code

Les cases à cocher

Les boutons case à cocher sont utilisés pour noter un ou plusieurs choix (pour rappel avec les boutons radio un seul choix) parmi un ensemble de propositions. A part cela, sa syntaxe et son usage est tout à fait semblable aux boutons radio sauf en ce qui concerne l'attribut name.

Entrez votre choix :
Choix numéro 1
Choix numéro 2
Choix numéro 3
Choix numéro 4

Code

Valider une url

La validation d'url en JavaScript présente quelques avantages para rapport à la validation d'une url en utilisant le PHP car le processus de validation se déroule dans le navigateur, cela signifie qu'aucune demande de serveur ou de rechargement du navigateur est nécessaire.

Veuillez entre une url de site web
Code

Les méthodes spécifiques à l'élément "form"

Un formulaire possède deux méthodes intéressantes : submit(), qui permet d'effectuer l'envoi d'un formulaire sans l'intervention de l'utilisateur et reset(), qui permet de réinitialiser tous les champs d'un formulaire. Ces deux méthodes ont le même rôle que les éléments "input" de type submit ou reset. L'utilisation de ces deux méthodes est simple, il suffit juste de les appeler sans aucun paramètre.



Code

La gestion du focus et de la sélection

Il existe 2 méthodes, focus() et blur(), permettant respectivement de donner et retirer le focus à un élément.



Code

La méthode select()

Dans le même genre, il existe la méthode select() qui, en plus de donner le focus à l'élément, sélectionne le texte si cela est possible.



Code

La validation d'un email

C'est un point très important lors de la valiation d'un formulaire HTML. Une email est une chaîne, un sous-ensemble de caractères ASCII, séparée en deux parties par le symbole "@", et un domaine. La longeur de la partie "texte" peut comporte jusqu'à 64 caractères et le nom du domaine peut comporter jusqu'à 253 caractères. La partie "texte" peut contenir : des lettres majuscules (A-Z) et/ou minuscules (a-z), des chiffres (0-9), des caractères.

Code

Exemple de formulaire complet

Voici un exemple de la vérification d'un formulaire complet


Essayer
Code

Le DOM

Ajouter un noeud : la méthode appendChild()

La méthode appendChild(nouveau noeud) de l'objet Node permet d'insérer un noeud enfant à la fin des noeuds enfants d'un noeud parent. Cette méthode accepte comme paramètre "nouveau noeud" qui représente le nouveau noeud. Elle renvoie l'objet Node qui représente le nouveau noeud enfant inséré.



Ajouter

Code

Supprimer un noeud : la méthode appendChild()

Pour supprimer un noeud, il faut utiliser la méthode removeChild() de l'objet Node qui permet de supprimer un noeud enfant. Cette méthode removeChild(Noeudenfant) accepte comme paramètre Noeudenfant, qui représente le noeud enfant à supprimer. Cette méthode renvoie le noeud supprimé.



Code

Remplacer un noeud : la méthode replaceChild()

La méthode replaceChild() remplace un noeud enfant par un nouveau noeud. Le nouveau noeud peut être un noeud existant dans le document, ou on peut créer un nouveau noeud.

On peut par exemple remplacer un noeud de texte "li" dans une liste avec un nouveau noeud de texte. On va créer un nouveau noeud texte et ensuite, on va remplacer le premier noeud enfant du premier élément de la liste par le noeud de texte nouvellement créé.

  • Coffee
  • Tea
  • Milk
Code

Créer des pages dynamiques

Pour que les pages soient agérables à consulter, elles doivent respecter un certain nombre de critères, en proposant notamment un bon contenu, une conception de qualité, un soin des détails et une bonne vitesse de chargement. L'une des méthodes pour accélérer le chargement des pages et proposer à l'utilisateur une interface intéressante et interactive, en utilisant le JavaScript pour mettre à jour les éléments de la page dans le navigateur. Au lieu que le serveur Web restitue les pages telles que l'utilisateur doit les apercevoir, il fournit un script au navigateur, qui exploite la puissance de l'ordinateur pour donner vie à la page. Les pages contrôlées par des scripts de ce genre sont appelés des pages dynamiques. En déplaçant le traitement du côté serveur vers le côté client, sur l'ordinateur de l'utilisateur, on obtient de meilleures performances et on peut personnaliser les interactions de l'utilisateur dans une certaine mesure.

Manipulation des dates/heures

  • L'objet Date

    Il permet d’accéder et de manipuler le format date et heure. Les méthodes sont très semblables au Java, elles enregistrent en milliseconde depuis le 1er Janvier 1970 00 :00 :00, Pour manipuller une date ou obtenir la date du jour vous devez créer un objet date. Il y a quatre façons de faire.

    • NomObjet = new Date() : permet d'obtenir la date du jour dans le format MM/JJ/AA
      var dAujourdhui = new Date();
    • NomObjet = new Date("mois Jour, année heures:minutes:secondes") : permet de forcer une date avec l'heure
      var dNoel = new Date("February 5, 2001 18:15:00");
    • Les formats integer : en n'initialisant pas l'heure (heures, minutes, secondes), leur valeur sera à 0.
      NomObjet = new Date(année, mois, jour)
      NomObjet = new Date(année, mois, jour, heures, minutes, secondes)
  • Les méthodes

    Une fois votre objet crée ou la date du jour obtenu, vous pouvez utiliser les méthodes suivantes pour manipuler l'objet.

    • getDate() : retourne le jour du mois pour une date spécifique.
    • getDay() : retourne le jour de la semaine pour une date spécifique. Zéro pour dimanche, 1 pour lundi et ainsi de suite.
    • getHours() : retourne l’heure d’une date spécifique. Entre 0 et 23.
    • getMinutes() : retourne les minutes d’une date spécifique. Nombre entre 0 et 59.
    • getMonth() : retourne le mois d’une date spécifique. Nombre entre 0 et 11.
    • getSeconds() : retourne les secondes d’une date spécifique. Nombre entre 0 et 59.
    • getTime() : retourne l’heure selon la norme "Greenwich Mean Time GMT" en minute.
    • getYear : retourne l’année d’une date spécifique. À partir de 1900.
    • setDate() : change la date d’un mois. Entre 1 et 31
    • setHours() : change l’heure d’une date spécifique. Entre 0 et 23.
    • setMinutes() : change les minutes d’une date spécifique. Entre 0 et 59.
    • setMonth(): change le mois d’une date spécifique. Entre 0 et 11.
    • setSeconds() : change les secondes d’une date spécifique. Entre 0 et 59.
    • setTime() : change la valeur de l’objet Date.
    • setYear() : change l’année d’une date spécifique. Entre 0 et 23.
    • setTimeout() et clearTimeout() : évalue une expression après un certain délais en milisecondes.

Afficher la date courante dans une page web

On peut utiliser l'objet Datae pour effectuer des tâches courantes de calendrier et d'horloge, telles que la comparaison des dates et le calcul du temps écoulé.

Lorsqu'on crée une instance de l'objet Date, sans spécifier de date, il retourne une valeur représentant la date et l'heure actuelle, y comrpis l'année, le mois, le jour, l'heure, la seconde et les millisecondes, on peut alors lire ou modifer cette date et l'heure. On peut, par exemple, instancier une date sans utiliser aucun paramètres et l'afficher au format dd-mm-yy.

Code

Définition d'une date spécifique

On peut définir une date spécifique en passant une chaîne de date au constructeur.

Code

Ajout et soustraction des jours, des mois et des années

On peut utiliser les méthodes getX et setX de l'objet Date pour définir des dates et des heures spécifiques. On peut définir une date à celle du jour précédent, si nécessaire les valeurs des mois et des années sont également modifiées.

Code

Utiliser des jours de la semaine

La méthode getDay obtient le jour de la semaine en tant que nombre compris entre 0(dimanche) et 6(samedi). Elle est différente de la méthode getDate, qui obtient le jour du mois sous forme d'un nombre compris entre 1 et 31. On va définir la date du jour de Thanksgiving aux Etats-Unis, comme étant le quatrième jeudi du mois de novembre. Le script recherche le 1er novembre de l'année actuelle, détermine le premier jeudi puis ajoute 3 semaines.

Code

Calcul du temps écoulé

La méthode getTime() retourne le nombre de millisecondes qui se sont écoulées depuis le 1er janvier 1970 à 0h00. Pour toute date antérieure, elle retourne un nombre négatif. On peut utiliser cette méthode pour définir une heure de début et de fin lors du calcul d'un temps écoulé. Il peut être utilisé pour mesurer de petites unités, telles que des secondes et des grandes unités, telles que des jours.

On va obtenir le nombre de millisecondes depuis la date zéro. Pour utiliser des unités plus pratiques, on peut diviser les millisecondes fournies par la méthode getTime() par un nombre approprié. Pour convertir des millisecondes en jours, il faut diviser le nombre par 86 400 000 : 1000 millisecondes x 60 minutes x 24heures. On va indiquer le temps qui s'est écoulé depuis le premier jour de l'année spécifiée, il utilise des opérations de division pour calculer le temps écoulé en jours, heures, minutes et secondes. Il ne tient pas compte de l'heure d'été.

Code

Déterminer l'âge d'un utilisateur

On va utiliser l'anniversaire de l'utilisateur et calculer l'âge en années. Il soustrait l'année de naissance de l'année actuelle, puis soustrait 1 si la date d'anniversaire n'a pas été dépassée dans l'année en cours. Si on veut que ce code s'applique dynamiquement, il faut utiliser un champ texte permettant à l'utilisateur d'entrer sa date d'anniversaire et la récupérer en JavaScript. On remplacera la date par la variable JavaScript qui récupère l'âge entré par l'utilisateur.

Code

Comparaison des dates

Lorsqu'on comparer des dates en JavaScript, il faut garder à l'esprit que l'opérateur == retourne "true" uniquement si les dates des deux côtés de l'opérateur font référence au même objet. Si on définit deux objets Date distincts à la même date, date1 == date2 retourne "false". Un objet Date défini avec uniquement la date mais pas l'heure est initialisé à cette même date à minuit. Si on compare une Date spécifique avec le paramètre Date.now, si on doit savoir que la première date est définie à 0h00 et que le paramètre Date.now ne l'est pas. On va vérifier si la date actuelle est la même qu'une date spécifiée ou si elle est antérieur ou postérieure. Pour définir la date actuelle dans todayAtMidn, le script crée un objet

Code

Vérifier si la date fournie appartient à une plage spécifique

En modifiant l'exemple précédent, on peut vérifier si une date fourni appartient à une plage spécifique.

Code

Horloge animée en s'aidant du CSS3

En s'aidant du CSS3, le JavaScript permet de créer une horloge animée. Il faudra s'occuper de la compatibilité de cette horloge.

Le fonctionnement de l'horloge se base sur les propriétés CSS3 transform, qui transforme un élément de la page et transform-origin, qui permet des transformations comme la mise à l'échelle, la rotation et la translation. A l'aide du CSS, on va mettre le cadran comme fond de l'horloge, on va arrondir les bords du div conteneur de l'horloge pour qu'il fasse un cercle entourrant le cadran et on va placer l'horloge en position relative pour pouvoir positionner les aguilles en fonction de la position de l'horloge.

Avec le JavaScript, on va commencer par déterminer le nombre de secondes écoulées depuis le début de la journée. Ensuite, on va faire tourner les agiuilles pour qu'elles indiquent l'heure du chargement de la page. Toutes les secondes, on va incrémenter le nombre de secondes écoulées, puis replacer les aiguilles en conséquences.


Essayer

Code

Les jeux

Un simple jeu de base en JavaScript

Il faut d'abord créer une arborescence de dossiers : un dossier "css" contenant le style du jeu, un dossier "js" contenant tous les fichiers JavaScript, un dossier maps qui comportera les fichiers définissant les carte du jeu, un dossier "sprites" pour le personnage du jeu, un dossier "classes" pour les classes et un dossier "tilesets" pour les tilesets.

Il faut aussi utiliser la balise "canvas" du HTML5 qui permet de dessiner via du code JavaScript. On aura également un fichier css qui sera inclut dans la page HTML.

Au niveau du JavaScript, on créera un premier fichier, lié au ficher HTML, qui permettra de récupérer l'élément DOM du "canvas". Ensuite, on réaliser un traitement des images à l'aide de méthodes de dessin permettant de dessiner une iamge, de dessiner une iamge avec une taille différente, de dessiner une partie de l'image. Une carte (map) est consituée de cases qu'on nomme "tiles" (tuiles), c'est en plaçant plusieurs tuiles les uns à côté des autres qu'on générera le monde du jeu. Chaque tile est une image carrée. L'objectif du "tileset" est de combiner plusieurs "tiles" sur une seule image, même si cela n'a pas d'impact en terme de taille, ça en aura en performances car il n'y aura qu'une seule image à charger.

Il faudra découper le "tileset" avant de le code, on peut numéroter le découpage.

Il faudra une classe JavaScript, dans son constructeur, on ajoutera un attribut à l'objet image afin qu'il sache à quel objet Tileset il appartient. On pourra alors terminer le constructeur du "tileset" de manière asynchrone, quand l'image sera chargée. Pour pouvoir déterminer les coordonées (x,y) d'un tile précis dans le "tileset" à partir de son numéro, on aura besoin de connaître la largeur en "tiles" du "tileset". Il manquera les coordonnées x et y du "tile" demandé dans le "tilset", il faut donc détrerminer sa position (x,y) en nombre de "tiles".

On va structurer les cartes : dans le fichier, on va devoir stocker pour le moments les éléments suivants : le terrain présent sur chaque case, les "tilesets" qu'on va utiliser, la taille de la carte. Pour la taille de la carte, les cases seront stockées dans des tableaux, il suffira donc de récupérer la taille des tableaux.

Quand on crée la classe Map dans le fichier, il faut donc l'inclure dans le HTML. Le constructeur chargera les données de la carte et interprétera le code JSON, on va donc utiliser Ajax, on va réutiliser la fonction existante de l'Ajax.


Essayer Code

Un jeu plus évolué

On va maintenant créer un jeu qui permet autre chose que de déplacer un personnage et qui a un vrai but, un premier jeu basique mais efficace, il consiste à casser des blocs à l'aide d'une balle.

Pour garder constamment à jour le dessin sur chaque image, on doit définir une fonction de dessin qui fonctionnera encore et encore, avec un ensemble différent de valeurs variables chaque fois pour changer les positions des sprites. On peut exécuter une fonction encore et encore à nouveau en utilisant une fonction de synchronisation JavaScript, telle que setInterval() ou requestAnimationFrame.
function draw() { // code du dessin }
setInterval(draw, 10);

Grâce à la nature infinie de setInterval, la fonction draw() sera appelée toutes les 10 millisecondes jusqu'à ce qu'on l'arrête. Ensuite, on dessinera la balle dans la fonction draw().
ctx.beginPath(); ctx.arc(50, 50, 10, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath();

La balle est repeinte en permanence car elle ne bouge pas, il faudra donc changer cela, au lieu d'une position codée en dur (50,50), on définira un point de départ dans la partie centrale inférieur du Canevas dans les variables appelées x et y et puis les utilisera pour définir la position dans laquelle le cercle est dessiné.
var x = canvas.width/2; var y = canvas.height-30;

La partie importante arrive : on doit ajouter une petite valeur à x et à y après que chaque image a été dessinée pour faire croire que la balle bouge. On va définir ces petites valeurs.
var dx = 2; var dy = -2;

La balle laisse une trace parce qu'on peint un nouveau cercle sur chaque image sans enlever la précédente. Il existe une méthode pour effacer le contenu du canvas : clearRect(). Toute la zone couverte par ce rectangle sera effacée de tout contenu précédemment peint là.

On va ajouter de plus en plus de commandes à la fonction draw(), on va déplacer le code de dessin vers une fonction séparée.


Essayer Code

jQuery

jQuery est la bibliothèque JavaScript la plus utilisée qui permet de créer des effets dynamiques sur les pages web comme des changements de couleur, des animations, et des effets de fondu. Les combinaisons sont illimitées. Il faut connaître un petit peu de JavaScript pour pouvoir utiliser jQuery, mais jQuery permet d'économiser énormément d'énergie en effectuant des choses qui prendraient une éternité en JavaScript ordinaire. Utiliser jQuery permet de profiter d'une plus grande compatibilité avec les différents navigateurs. Le JavaScript pur est réputé pour avoir des spécificités dans chaque navigateur comme Internet Explorer, Chrome, Safari, etc, qui vont potentiellement exécuter votre code JavaScript différemment les uns des autres. Cette compatibilité est rendue possible par l'utilisation que fait jQuery des sélecteurs CSS. Sélectionner des éléments devient plus rapide et plus direct qu'en JavaScript classique, et puisque la plupart des développeurs web comprennent déjà les sélecteurs CSS, ils n'ont aucun mal à se servir de jQuery.

Les sélecteurs CSS

Pour agir sur la page, il va falloir sélectionner les divers éléments la composant. L'une des grandes forces de jQuery réside tout justement en sa simplicité de sélection des éléments des pages. La bibliothèque réutilise le potentiel des sélecteurs CSS en les complétant de sélecteurs additionnels. Ils ont le même rôle qu'en CSS : ils permettent de cibler précisément n'importe quel élément d'une page. La librairie Sizzle de JavaScript permettant la sélection des éléments avec les sélecteurs CSS est donc intégrée à jQuery.

Sélectionner tous les paragraphes contenant un "span" et leur mettre une bordure rouge

Ceci est un 1er paragraphe

Ceci est un 2ème paragraphe

Ceci est un 3ème paragraphe

Ceci est un 4ème paragraphe

Sélectionner tous les éléments d'une liste ayant pour id celui sélectionné par jQuery et leur mettre une bordure rouge

  • Élément de liste 1
  • Élément de liste 2
  • Élément de liste 3
  • Élément de liste 4

Sélectionner tous les éléments qui ont pour classe "a" et leur mettre une bordure rouge

Ceci est un 1er paragraphe

Ceci est un 2ème paragraphe

Ceci est un 3ème paragraphe

Ceci est un 4ème paragraphe

Sélectionner tous les élements de la liste ayant pour class "b" et leur mettre une bordure

  • Élément de liste 1
  • Élément de liste 2
  • Élément de liste 3
  • Élément de liste 4

Sélectionner l'élément "p" directement précédé d'un élément ul et leur mettre une bordure rouge


Essayer Code


Modifier la position d'un élément

Il est possible de spécifier une nouvelle position à un élément, en passant par les méthodes précédentes. Il suffit de passer un objet en tant qu'argument, en donnant les nouvelles valeurs (en pixels) aux identifiants left et top.

$('p').offset({ left : 30, top : 200 }); $('p').position({ left : 200 });

Gérer les dimensions

Les positions d'un élément, les dimensions peuvent être gérées directement avec css(). Cependant, plusieurs autres méthodes sont très pratiques pour gérer la hauteur et la largeur d'un bloc. Il s'agit des fonctions suivantes :

  • height() : retourne la hauteur formatée en pixels
  • width() : fait la même chose avec la largeur ;
  • innerHeight() et innerWidth() : prennent en compte les marges intérieures
  • outerHeight() et outerWidth() : prennent en compte les marges intérieures et la bordure d'un élément.

$('p').height(); // retourne la hauteur stricte du paragraphe
$('p').innerWidth(); // retourne la largeur (avec marges intérieures) du paragraphe
$('p').outerWidth(); // retourne la largeur (avec marges intérieures + bordures) du paragraphe
$('p').outerHeight(true); // retourne la hauteur (avec marges intérieures + bordures + marges extérieures) du paragraphe

Les filtres

jQuery permet de filtrer des éléments du DOM afin de cibler très spécifiquement un élément selon sa position ou selon un certain critère.

Les méthodes first() et last() vont respectivement retourner le premier et le dernier élément d'une collection d'éléments. Ces deux méthodes n'ont pas besoin d'argument pour fonctionner.

La méthode odd() sélectionne chaque élément avec un numéro d'index impair et la méthode even() sélectionne chaque élément avec un numéro d'index pair.

La méthode lt() sélectionne tous les éléments ayant un index inférieur à l'index dans l'ensemble correspondant, la méthode gt() sélectionne tous les éléments supérieur à l'index dans l'ensemble correspondant.

La méthode eq() réduit l'ensemble des éléments correspondants à celui de l'index spécifié, la méthode not(eq()) sélectionne tous les éléments qui ne correspondent pas au sélecteur donné.

Sélectionner le premier paragraphe et lui mettre une bordure rouge


Essayer Code


Sélectionner le dernier paragraphe et lui mettre une bordure rouge


Essayer Code


Sélectionner le deuxième élément, le quatrième élément et ainsi de suite (cela se base sur l'index qui commence à "0")


Essayer Code


Sélectionne le premier élément et le troisième élément et ainsi de suite (cela se base sur l'index qui commence à "0")


Essayer Code


lt(less than) : sélectionner tous les éléments à indice inférieur à l'index


Essayer Code


gt(great than) : sélectionner tous les éléments à indice supérieur à l'index


Essayer Code


eq :sélectionne un élément ayant un numéro d'index spécifique


Essayer Code


Sélectionne tous les paragraphes sauf celui qui à l'indice 2 (ici, c'est le troisième paragraphe)


Essayer Code

Les attributs

En HTML, les attributs sont contenus dans des balises, ils définissent comment le navigateur doit interpréter un élément d'une page web.

Sélectionner les paragraphes qui ont un attribut 'class' et leur mettre une bordure rouge

Ceci est un 1er paragraphe

Ceci est un 2ème paragraphe

Ceci est un 3ème paragraphe

Ceci est un 4ème paragraphe

Ceci est un paragraphe caché



Sélectionner tous les paragraphes qui ont l'id "para" et leur mettre une bordure

Ceci est un 1er paragraphe

Ceci est un 2ème paragraphe

Ceci est un 3ème paragraphe

Ceci est un 4ème paragraphe

Ceci est un paragraphe caché

Code

Création de contenu à l'extérieur de l'élément

Mettre le texte ":INPUT" devant chaque champs de formulaire "input"


Essayer Code


Mettre le texte ":TEXT" devant chaque champs de formulaire de type "text"


Essayer Code


Mettre le texte "RADIO" devant chaque champs de formulaire de type "radio"


Mettre le texte "CHECKED" devant chaque champs de formulaire de type "checkbox" à l'état "checked"


Essayer Code

On peut également utiliser jQuery pour l'affichage

Affichage du nombre de paragraphes présents dans le document html

Affichage du nombre de paragraphe(s) caché(s)

Code

Les fonctions

En programmation, une fonction est un sous-programme qui permet d’exécuter un ensemble d’instructions dans le corps du programme principal. Les fonctions permettent d'exécuter dans plusieurs parties du programme une série d’instructions. Ce procédé permet une simplicité du code et donc une taille de programme minimale. Par ailleurs, une fonction peut faire appel à elle-même. On parle alors de fonction récursive.

Le sélecteur $(this)

Il représente, dans la plupart des langages orienté objet, l'objet courant, celui qui est actuellement traité par une fonction, jQuery permet la sélection d'objet. Outre le fait de sélectionner des éléments avec jQuery, il ne faut pas négliger le reste. La performance est un point primordial dans un code. Il faudra s'assurer que le code est le plus rapide, le plus optimisé et le plus ergonomique possible.

$('p').each(function(){ $(this).html('Hello World !'); // $(this) représente le paragraphe courant });

Les sélecteurs les plus rapides

Il y a une certaine différence de rapidité lorsqu'il s'agit de cibler des éléments de différentes façons car certains sélecteurs profitent de fonctions natives implémentées par JavaScript, car ils en descendent directement. Le sélecteur par identifiant, qui est le plus rapide des sélecteurs : c'est normal, il utilise directement la fonction getElementById(). Il est caractérisé par une rapidité 5 fois supérieure au deuxième sélecteur le plus rapide, qui est le sélecteur par balise. Vient ensuite le sélecteur par classe, les autres enregistrant une forte baisse de performance à l'utilisation. Ces différences proviennent en fait du parcours du DOM : alors que l'identifiant, étant normalement unique, est ciblé directement par jQuery à cause de sa singularité, les classes vont être traitées une à une, en parcourant tout le document HTML pour les trouver. Pour optimiser au maximum une requête par classe, il suffit de cibler tout d'abord le parent de l'élément avec un identifiant.

$('#menu .sections'); // sélection plus rapide que : $('.sections');

Les événements

Les évenements existent aussi en jQuery, comme en JavaScript : on lance un bout de code quand une action est remplie.

Ecoute de la souris

click : quand on clique avec la souris

$(document).keyup(function(touche){ // on écoute l'évènement keyup() if(appui == 13){ // si le code de la touche est égal à 13 (Entrée), on affiche une alerte alert('Vous venez d\'appuyer sur la touche Entrée !'); } });

dbclick : quand on double click avec la souris

$('#uneDiv').dbclick(function(){ alert('I like Cannibal Corpse'); });

hover : au passage avec la souris

$('#uneDiv').hover(function(){ alert('Survol de la souris'); });

dbclick : quand on double click avec la souris

$('#uneDiv').dbclick(function(){ alert('I like Cannibal Corpse'); });

mousenter() : quand on rentre dans l'élément

$('#uneDiv').mouseenter(function(){ $('p:first', this).text('mouse enter'); });

mouseleave() : quitter un élément

$('#uneDiv').mouseleave(function(){ $('p:first', this).text('mouse leave'); });

mousedown() : presser un bouton de la souris

$('#target').mousedown(function(){ alert('Vous avez cliqué sur un bouton de la souris'); });

mouseup : relâcher un bouton de souris

$('button').on({ click : function(){ alert('Vous avez cliqué'); }, mouseup: function(){ alert('Vous avez relâché le bouton'); } });

scroll : quand on utilise la roulette

$('div').scroll(function(){ $('span').text(x += 1); });


Ecoute du clavier

keydown() : qui se lance lorsqu'une touche du clavier est enfoncée

$('#target').keydown(function(){ alert('On appelle la fonction keydown'); });

keypress() : qui se lance lorsqu'on maintient une touche enfoncée

$('#maDiv').keypress(function(){ alert('Vous avez pressé une touche'); });

keyup : qui se lance lorsqu'on relâche une touche préalablement enfoncée

$('document').keyup(function(touche){ var appui = touche.wich || touche.keyCode; if(appui == 13){ alert('Vous avez appuyé sur la touche Enter'); } });


Le déclenchement virtuel

jQuery permet de simuler le déclenchement d'évènements grâce à une simple méthode. On n'a pas besoin d'attendre que l'utilisateur remplisse une action précise pour lancer du code : on peut exécuter virtuellement un évènement grâce à trigger(), il suffit de donner le type de l'évènement en tant qu'argument.

$('p').click(function(){ alert('Cliqué !'); }); $('p').trigger('click'); // déclenche l'action au chargement du script


Annuler le comportement d'un élément par défaut

Chaque évènement possède son propre groupe d'éléments spécifiques à traiter : la soumission de formulaire ne s'applique pas à tous les cas. Cependant, certains éléments ont un comportement par défaut, défini par le navigateur. Le cas le plus courant est le lien hypertexte : son comportement va être de rediriger l'utilisateur vers l'adresse donnée. Une méthode en jQuery permet d'annuler tous comportement par défaut. Il s'agit de preventDefault().

$('a').click(function(e){ e.preventDefault(); // annule l'action du lien });


Les gestionnaires d'événements

En jQuery, et même plus globalement en JavaScript, on peut faire appel aux gestionnaires d'évènements. Ce sont des fonctions auxquelles on donne un type d'évènement à écouter, ainsi qu'une fonction à exécuter à chaque fois que l'évènement est déclenché.

$('button').on('click',function(){ alert('Ce code fonctionne'); });


La délégation

Ce concept permet de créer un écouteur d'évènements sur un élément, et de s'adapter automatiquement aux éléments similaires créés plus tard, de façon dynamique. Si on a un paragraphe simple, sur lequel on veut appliquez un évènement. Si on créez d'autres paragraphes dans la page, ceux-ci ne seront pas pris en compte par l'écouteur.

La suppression

$('p').on('click', function(){ alert('Ecoute événement'); }); $('p').off('click'); $('p').off();

Les animations

C'est une des plus puissantes fonctionnalités de jQuery, le framework permet de lancer des effets sur absolument tout, le mécanisme est très simple : c'est simplement une propriété CSS qui se déroulera pendant un interval de temps.

La fonction animate() est très puissante car elle peut recevoir un nombre inimaginable d'arguments différents. Le principe d'utilisation le plus fréquent qu'on aura à appliquer sera de passer un objet à la méthode contenant les propriétés CSS à animer. animate() peut définir :

  • duration : le temps de déroulement de l'animation, toujours en millisecondes
  • easing : la façon d'accélerer de l'animation, c'est-à-dire comment va-t-elle évoluer au cours du temps
  • complete : une fonction de callback, qui est l'action appelée lorsque l'animation est terminée

$('p[id="anim"]').animate({ width : '150px', fontSize : '35px', marginTop : '50px' });

duration

Il est important de définir le temps de déroulement d'une animation : si l'animation est trop rapide, l'utilisateur risque de ne pas la voir mais si elle est trop lente, il s'ennuiera et trouvera le site web lourd et sans intérêt. Il faut donc trouver la bonne durée pour lancer l'animation. L'argument peut prendre deux types de valeur : une chaîne de caractère (string) ou un nombre entier (int) qui représentera le nombre de millisecondes. La chaîne de caractères ne peut être qu'un des trois mots :

  • slow : équivaut à une durée de 600 millisecondes
  • normal : la valeur par défaut, qui est égale à 400 millisecondes
  • fast : représente une durée de 200 millisecondes seulement.

$('p').animate({ width : '150px' }, 'fast'); // premier exemple avec la valeur fast (200ms) $('p').animate({ width : '150px' }, 1000); // second exemple avec 1000ms (= 1s)

easing

Il s'agit de l'évolution de l'animation, qui est la manière dont elle va se dérouler.

  • swing : valeur par défaut, fait aller l'animation de plus en plus vite au cours du temps et ralentit à la fin
  • linear : force l'animation à se dérouler à la même vitesse durant toute l'opération

$('p').animate({ width : '150px' }, 'linear'); // l'animation se déroulera de façon linéaire

complete

C'est la fonction de retour, appelée callback, qui est une action qui se lancera une fois l'animation terminée, il suffit de donner une fonction anonyme en guise d'argument.

$('p').animate({ width : '150px' }, function(){ alert('Animation terminée !'); });

step et queue

Ce sont deux arguments qui ne peuvent être modifiés qu'avec une certaine manière de régler les arguments de la méthode animate(), ils ne sont pas directement accessibles, il faudra passer par un objet comme second argument. step lancera une fonction à chaque étape de l'animation, à chaque propriété CSS traitée, queue déterminera si une animation doit se terminer avant d'en lancer une seconde et prendra un booléen en tant que valeur.

$('p').animate({ width : '150px' }, 1000, 'linear', function(){ alert('Animation terminée !'); });


Exemples d'animations

Voici comment créer des effets en jQuery.

Animer des carrés en cliquant sur un bouton


Essayer
Code

Démarrer une animation et la gérer au clic sur un bouton


Essayer
Code

Dessiner un carré à partir de dimension entrées


Essayer
Code

Ajax

Le concept d'Ajax

AJAX est l'acronyme d'Asynchronous JavaScript And XML, autrement dit JavaScript Et XML Asynchrones. AJAX n'est ni une technologie ni un langage de programmation; AJAX est un concept de programmation Web reposant sur plusieurs technologies comme le JavaScript et le XML, le XML tend à être délaissé au profit du JSON. L'idée même d'AJAX est de faire communiquer une page Web avec un serveur Web sans occasionner le rechargement de la page. C'est la raison pour laquelle JavaScript est utilisé, car c'est lui qui va se charger d'établir la connexion entre la page Web et le serveur. Le principe de fonctionnement d'AJAX a toujours existé, et ce par le biais de certaines astuces JavaScript, comme l'ajout d'un élément "script" après le chargement de la page. Mais il a fallu attendre l'arrivée de l'objet XMLHttpRequest pour que l'utilisation de l'AJAX se démocratise. L'objet XMLHttpRequest est un objet natif JavaScript, développé à l'origine en tant qu'ActiveX dans Internet Explorer, qui facilite grandement la communication JavaScript – Serveur.

Différence entre une page web et une application web

Site web

Tout d'abord le navigateur envoie une requête – via une URL – au serveur. Le serveur répond en renvoyant au navigateur le code HTML de la page ainsi que tout ce qui lui est associé comme les scripts JavaScript, les images ou les éventuels médias et autres objets embarqués – donc la réponse du serveur est beaucoup plus volumineuse que la requête. Le navigateur affiche la page et l'utilisateur peut la parcourir quelques instants avant de cliquer sur un lien hypertexte qui enverra une nouvelle requête au serveur qui lui-même renverra le HTML correspondant et ainsi de suite. D'un point de vue purement pratique, c'est assez aberrant comme principe car c'est extrêmement inefficace et couteux puisque le serveur va à chaque fois renvoyer tout, ce qui prend du temps et ce qui occasionne une charge pour le serveur. Ce principe de fonctionnement montre que le navigateur n'intervient pas dans le processus si ce n'est que pour afficher la page. Le gros du travail se fait du côté du serveur. Le pendule balance donc du côté du serveur.

Application Ajax

Quand on utilise le concept d'AJAX dans une page Web, on parle d'application Web (ou application AJAX).La première requête est la même – ça on ne sait rien y faire. La différence va résider dans le fait que quand l'utilisateur cliquera sur un lien – ou un autre élément cliquable – la page ne se rechargera pas et le navigateur enverra une requête au serveur, lequel renverra les données demandées dans un format léger – comme le format JSON. Dans ce cas, le serveur n'aura renvoyé qu'un minimum de données ce qui est beaucoup plus léger et donc plus rapide. Le navigateur, par le biais de JavaScript, peut alors mettre à jour une petite partie de la page avec les données reçues du serveur.

L'objet XMLHttpRequest

Le principe de fonctionnement d'XMLHttpRequest est d'envoyer une requête HTTP vers le serveur, et une fois la requête envoyée, les données renvoyées par le serveur peuvent être récupérées. Pour ce faire, il faut disposer d'un objet disposant de cette fonctionnalité.

Instancier un objet XHR

Il y a deux façons d'instancier un objet XHR : avec contrôle XHR et avec un contrôle ActiveX et elles dépendent de la version d'XMLHTTP utilisée, on va donc utiliser un try...catch, l'instanciation indiquée dans le try est la plus récente.

try { var xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); }

Pour faire un script homogène, il faut rassembler ce code en un seul, en prenant soin de tester la prise en charge des différentes méthodes d'instanciation.

var xhr = null; if (window.XMLHttpRequest || window.ActiveXObject) { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { xhr = new XMLHttpRequest(); } } else { alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest..."); return; }

Il est également plus pratique d'utiliser une fonction qui retournera l'objet XMLHTTRequest instancié.

function getXMLHttpRequest() { var xhr = null; if (window.XMLHttpRequest || window.ActiveXObject) { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { xhr = new XMLHttpRequest(); } } else { alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest..."); return null; } return xhr; }

Envoi d'une requête HTTP

Définir et envoyer

Il faut d'abord définir les modalités d'envoie avec la méthode "open" et on l'enverra ensuite avec la méthode "send".

var xhr = getXMLHttpRequest(); // Voyez la fonction getXMLHttpRequest() définie dans la partie précédente
xhr.open("GET", "handlingData.php", true);
xhr.send(null);

open s'utilise de cette façon : open(sMethod, sUrl, bAsync).

  • sMethod : la méthode de transfert : GET ou POST
  • sUrl : la page qui donnera suite à la requête. Ça peut être une page dynamique (PHP, CFM, ASP) ou une page statique (TXT, XML...);
  • bAsync : définit si le mode de transfert est asynchrone ou non (synchrone). Dans ce cas, mettez true . Ce paramètre est optionnel et vaut true par défaut, mais il est courant de le définir quand même (je le fais par habitude).

Passer des variables

On a la possibilité de passer des variables au serveur. Suivant la méthode d'envoi utilisée une petite différence fait son apparition. Dans le cas de GET les variables sont transmises directement dans l'URL.

xhr.open("GET", "handlingData.php?variable1=truc&variable2=bidule", true);
xhr.send(null);

Pour POST, il faut spécifier les variables dans l'argument de "send".

xhr.open("POST", "handlingData.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("variable1=truc&variable2=bidule");

Protéger les caractères

Avant de passer des variables, il est important de les protéger pour conserver les caractères spéciaux pour les espaces. Pour cela, il faut utiliser la fonction globale "encodeURIComponent".

var sVar1 = encodeURIComponent("contenu avec des espaces");
var sVar2 = encodeURIComponent("je vois que vous êtes un bon élève... oopa !");
xhr.open("GET", "handlingData.php?variable1=" + sVar1 + "&variable2= " + sVar2, true);
xhr.send(null);

Le changement d'état

Quand on envoie une requête HTTP via XMLHTTPRequest, elle passe par plusieurs état différents.

  • 0 : L'objet XHR a été créé, mais pas encore initialisé (la méthode open n'a pas encore été appelée)
  • 1 : L'objet XHR a été créé, mais pas encore envoyé (avec la méthode send )
  • 2 : La méthode send vient d'être appelée
  • 3 : Le serveur traite les informations et a commencé à renvoyer des données
  • 4 : Le serveur a fini son travail, et toutes les données sont réceptionnées

Il va donc falloir détecter les changements d'état pour savoir oùen est la requête, il faut utiliser la propriété "onreadystatechange" et à chaque changement d'état, on regardera duquel il s'agit.

var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) { alert("OK"); } };
xhr.open("GET", "handlingData.php", true);
xhr.send(null);

On utiliser readyState pour connaître l'état de la requête. En plus, on doit aussi vérifier le code de l'état de la requête pour vérifier si tout s'est bien passé. On utilise pour cela la propriété "status" : si elle vaut 200 ou 0, tout est ok.

Récupération des données

Il suffit d'utiliser deux propriétés disponibles :

  • responseText : pour récupérer les données sous forme de texte brut
  • responseXML : pour récupérer les données sous forme d'arbre XML

La fonction de callback

Le alert; à part vérifier si la réception est bonne, ne sert à rien. Si on récupére des données, c'est pour les traiter. Le traitement peut se faire directement dans la fonction anonyme définie dans onreadystatechange. Mais il vaut mieux séparer les codes pour avoir deux fonctions concises plutôt qu'une grosse. On va donc définir ce qu'on appelle une fonction dite "de callback". Une fonction de callback est une fonction de rappel, exécutée généralement après qu'un script a été exécuté. Il s'agit de passer à une fonction A le nom d'une fonction B qui sera lancée une fois que la fonction A aura été exécutée.

Récupération d'un fichier XML

On lira simplement le contenu d'un fichier XML.


Essayer Code

Contrôle d'état

Grâce à readyState, on sait connaître l'état de la requête, il peut donc être intéressant de dire à l'internaute que la requête est en train d'être traitée et affichant un texte "Chargement en cours" ou bien une image de progression. Si quand readyState vaut 4 tout est terminé, ça veut donc dire que si ça ne vaut pas 4, c'est en cours de traitement. Voyons un exemple qui montre qu'il n'y a pas que pour afficher une image de progression.


Essayer Code

Le Dynamic Script Loading

Le JavaScript permet de charger un fichier .js à partir d'un autre et à n'importe quel moment, il est donc possible de charger une autre page de script à partir d'une première en insérant un élément "script", pour lequel on utilisera le DOM. Le script créera et insérera un élément "script" avec un attribut src pointant vers la page JS dans le body de la page HTML. Ce bout de code, placé appele le le fichier JS exactement comme si l'élément "script" avait été écrit en HTML brutl, le script contenu dans ce fhcier JS est alors exécuté. On ajoute la fonction "callback" qui sera appelée par le fichier JS dès qu'il sera chargé, c'est la réponse que le script de départ attend.

var DSLScript = document.createElement("script");
DSLScript.src = "DynamicScriptLoading_1.js";
DSLScript.type = "text/javascript";
document.body.appendChild(DSLScript);

Essayer Code

Charger un objet statique JSON

JSON est un format de structuration des données, comme le XML, la syntaxe est identique à la syntaxe objet de JavaScript. Il est très facile de récupérer une variable et cette variable peut être un objet JSON, il y a deux avantages à cette importation d'un objet JSON via le Dynamic Script Loading :

  • Facilité de mise en place
  • L'objet récupér est de type object et non de type string, il n'y a donc pas besoin d'utiliser "eval", ou l'objet natif JSON pour parser la chaîne de caractères.

Pour charger l'objet statique JSON, on va utiliser la fonction "callback", il suffira ensuite de traiter les données et de les afficher.


Essayer Code

L'implémentation DOM

L'objet XMLHttpRequest est pratique pour récupérer n'importe quoi comme type de données mais il est généralement un peu lourd à utiliser. Si on veut justement récupérer une source de données au format XML, on peut le faire via le DOMImplementation. Cette interface est supporté par la plupart des navigateurs. On créera une fonction générique qui ira récupérer une source XML à l'adresse sUrl et qui renverra le contenu dans une fonction de callback "fCallback", ainsi on disposera d'une fonction qui ne s'occupera que de la gestion de DOMImplementation.


Essayer Code

L'iFrame Loading

Un iframe peut être symbolisé comme un document dans un document. Pour accéder au document contenu dans l'iframe, il faut d'abord accéder à l'iframe, puis à son contenu.

Chargement de contenu

Pour charger un fichier dans un iframe, il y a 3 façons :

  • En remplissant l'attribut src directement en HTML. Le fichier est alors chargé à l'ouverture de la page contenant l'iframe
  • En modifiant avec JavaScript l'attribut src
  • En ouvrant un lien dans l'iframe, au moyen de l'attribut target, lui aussi invalide XHTML.
Les deux dernières méthodes sont efficcaces dans le cas d'une utilisation de type Ajx, la méthode avec target, étant invalide, peut pourtant être très pratique.

L'événement onLoad

Il se déclenche quand le contenu de l'iframe vient d'être chargé. A chaque chargement de contenu, onload est déclenché, c'est un moyen efficace pour savoir si le document est chargé et ainsi pouvoir le récupérer.


Essayer Code

Récupérer du contenu

Elle est assez simple : maintenant qu'on sait accéder à l'iframe, il n'y a plus qu'à ajouter quelques points supplémentaires.

Récupérer des données textuelles : HTML et txt

Si on veut récupérer des données au format texte, on doit utiliser innerHTML. Un document chargé dans l'iframe possède un objet "body". Même si c'est un fichier texte, un élément "body" est présent vrituellement, c'est lui qui englobe la totalité des informations disponibles. Ainsi, on doit passer par le body pour utiliser innerHTML car il est impossible de faire innerHTML directement sur l'objet document. Si le fichier est un fichier HTML, tout ce qui est dans l'élément body est récupéré. En revanche, si c'est un fichier texte, le contenu est récupéré, mais est placé dans un élément "pre". Pour utiliser ce contenu, il suffit de faire un substring pour éliminer les balises d'ouverture et de fermeture de l'élément "pre".

var sContent = window.idFrame.document.body.innerHTML;
sContent = sContent.substring(5, sContent.length - 6);

Essayer Code

Les cookies

Les cookies sont un système qui permet à un site web de stocker les informations textuelles au sein du navigateur. La navigateur enregistre ces données dans des fichiers sur le disque dur de l'ordinateur. Les cookies peuvent être utilisés pour mettre en place un système Ajax. Il existe un objet cookie, sous-objet de document qui contient la liste des cookies enregistrés pour le domaine visité. Cette liste de cookies est données sous la forme d'une chaîne de caractères et JavaScript ne possède pas de méthodes, ni de propriétés pour récupérer la valeur d'un cookie présent dans cette chaîne de caractères.

Ecrire un cookie

C'est une chose assez simple : on formate une chaîne de caractères de façon à ce qu'elle corresponde au format de stockage d'un cookie, cette chaîne contient le nom du cookie et sa valeur. Il est important, lorsque l'on crée un cookie, de spécifier sa date d'expiration, elle est calculée en récupérant la date d'aujourd'hui en lui ajoutant un an de millisecondes. Pour que la da te d'expiration soit reconnue par le navigateur, elle doit être écrite au format GMT (méthode toGMTString).

// chaîne de caractère représentant un cookie
nomDuCookie=ValeurDuCookie;
// dès que la chaîne est formatée, on l'ajoute à l'objet cookie
document.cookie = sChaine;

La fonction setCookie

function setCookie(sName, sValue) {
var today = new Date(), expires = new Date();
expires.setTime(today.getTime() + (365*24*60*60*1000));
document.cookie = sName + "=" + encodeURIComponent(sValue) + ";expires=" + expires.toGMTString();
}

Lire un cookie

C'est plus compliqué : il va falloir analyser une chaîne de caractères contenu dans "document.cookie", il faut récupérer l'emplacement du point virgule et se débrouilller pour extraire la valeur du cookie recherché. Si il n'y a pas de cookie enregistré, la chaîne est simple à parcourir mais s'il y a plusieurs cookies, c'est plus compliqué. Il y a deux manières de récupérer la valeur d'un cookie donné : avec une analyse de chaîne simple ou avec une expression régulière.

Avec une analyse normale

function getCookie(sName) {
var cookContent = document.cookie, cookEnd, i, j;
var sName = sName + "=";
for (i=0, c=cookContent.length; i j = i + sName.length;
if (cookContent.substring(i, j) == sName) {
cookEnd = cookContent.indexOf(";", j);
if (cookEnd == -1) {
cookEnd = cookContent.length;
}
return decodeURIComponent(cookContent.substring(j, cookEnd));
}
}
return null; }

Avec une expression régulière

function getCookie(sName) {
var oRegex = new RegExp("(?:; )?" + sName + "=([^;]*);?");
if (oRegex.test(document.cookie)) {
return decodeURIComponent(RegExp["$1"]);
} else {
return null;
}
}

Un système de panier

L'utilisateur dispose d'un formulaire pour valider le panier d'une boutique en ligne, mais il faut au préalable s'être identifié, la page sait s'il l'est en stockant cette information dans un champ caché ou dans une variable. S'il n'est pas encore identifié, l'application lui propose de le faire à travers un autre formulaire dédié à cela. L'utilisateur remplit le petit formulaire et le valide. L'application interroge alors le serveur sans demander une nouvelle page. En attendant la réponse, si le serveur est lent, l'utilisateur peut changer la quantité des articles qu'il a choisit. Il faut alors l'avertir visuellement que la requête en cours de traitement, de même qu'il faudra l'avertir quand elle sera terminée. Un moyen simple pour réaliser cela consiste à changer l'apparence du bouton de validation, en remplaçant le texte par une image animée suggérant le chargement. Il faut en outre donner à l'utilisateur la possiblité d'abandonner la requête, comme pour le web classique, c'est le bouton "Annuler", qui s'en charge, qui devient activé. Si l'utilisateur annule la requête, le bouton "S'identifier", affiche à nouveau le texte initial, et le bouton "Annuler" est désactivé. S'il laisse le traitement se poursuivre, une fois qu'il est terminé, le bouton "Annuler" est à nouveau désactivé. Si l'utilisateur a saisi les bons identifiant et mot de passe, l'application l'en avertir, lui permettant de valider son panier en modifiant l'information correspondante stockée au niveau de la page. Dans le cas contraire, elle affiche un message d'erreur.


Essayer
Code

Angular JS : les bases

Définition

Angular JS est un framework JavaScript open-source développé par Google. Il facilite grandement le dévéloppement d'application web selon le modèle MVC. On produire du code HTML, JavaScript et CSS. Angular va permettre de rajouter des attributs aux balises HTML, ces nouveaux attributs commenceront par "ng-".

On va utiliser 2 attributs apportés par Angular JS : ng-app et ng-controller mais il existe beaucoup d'autres attributs. On va introduire des variables directement dans le code HTML, qui pourront être contrôlées par le JavaScript, ce qui rendra la page HTML dynamique, les données affichées pourront évoluer au cours du temps. Ces variables seront facilement reconnaissalbes car elles seront encadrées par des accolade : {{maVariable}}.

Premier exemple

{{maVariable}}


exercice 1
  • Il faut d'abord télécharger le frawework sur le site officiel : https://angularjs.org/, choisir "stable" et "minified" et cliquer sur Download. Ensuite récupérer le fichier "angular.min.js" et le place dans un dossier (ex : lib) et ensuite l'appeler dans la page HTML, cela permettra d'utiliser Angular JS.
  • L'attribut ng-app dans la balise body signifie qu'Angular JS sera actif dnas la balise "body" jusqu'à la balise "/body".
  • L'attribut ng-controller dans la balise h1 va permettre de définir un contrôleur, il sera actif de la balise "h1" à la balise "/h1". Tout ce qui se trouve entre ses 2 balises sera soumis à la surveillance du contrôleur "monControl" dans cette zone, c'est lui qui dirige tout. Un contrôleur correspond à une fonction JavaScript, la fonction "monControl" possède un argument "$scope" qui est fondamental, c'est un des principes de base et une des forces d'Angular JS, qui est le data-binding. Le data-binding, c'est la capacité à échanger des données entre la partie HTML et la partie JavaScript, cet échange peut se faire dans les 2 sens : du HTML vers le JavaScript et du JavaScript vers le HTML. Pour transporter ces données, Angular JS utilise un objet qui est l'argument de la fonction "monControl", "$scope".
  • $scope.maVariable="Hello World !"; : On a {{maVariable}} du côté HTML et "$scope.maVariable" du côté JavaScript, on pourra considérés ces 2 entités comme identiques. L'objet "$scope" n'arrête pas de faire des "aller-retour" entre le HTML et le JavaScript. Comme tous les objets, il possède des propriétés, "maVariable" est une de ses propriétés.

Manipulation des objets

Exemple

Fiche d'identité n°{{infoPerso.id}}

Nom : {{infoPerso.nom}}

Prénom : {{infoPerso.prenom}}

Date de Naissance : {{infoPerso.dateNaissance}}


exercice 1

Au lieu d'une simple variable, on manipule ici un objet "infoPerso" côté HTML et "$scope.infoPerso" coté serveur, le contrôleur qui est la fonction "monControl" ne compose qu'une ligne «$scope.infoPerso=maFiche;». Un objet1 est = à un objet2, cela permet d'attribuer à objet1 toutes les propriétés d'objet2, méthodes et attributs. Après exécution de la ligne, "infoPerso" se retrouve avec les attributs : id, nom, prenom, date de naissance, les attributs de l'objet maFiche.

Utilisation de ng-repeat

ng-repeat est la direction qui permet de dupliquer du code HTML automatiquement et intelligemment.

Exemple : afficher une liste de fruits


Voici ma liste de fruits

  • {{fruit}}

exercice 3

ng-repeat va permettre de répéter la balise "li" autant de fois que nécessaire pour que tous les éléments du tableau "mesFruits" soit traités. {{fruit}} sera successivement remplacé par banane, pomme, ananas, pêche et fraise.

Utilisation de ng-src

Les objets peuvent aussi contenir des URL, notamment des URL d'images.


Essayez
Code

La balise image "img" avec l'attribut classique "src" classique ne fonctionnera pas, il faut systèmatiquement utiliser "ng-src" à la place de "src".

L'interaction avec ng-click

Grâce à ng-click, il est possible de réagir au clic de l'utilisateur en appelant la fonction de notre choix, la balise qui aura pour attribut ng-click deviendra cliquable, un clic sur le contenu de la balise entraînera l'exécution de la fonction.

ng-show et ng-hide

Il est possible de masquer le contenu d'une balise en utilisant la directive ng-show dans la balise. Si dans le contrôleur, la variable "$scope.isVisible" est égale à "true", le contenu de la balise sera visible, si "$scope.isVisible" est égale à "false", le contenu de la balise sera invisible. La directive ng-hide fonctionne exactement de la même façon, mais à l'envers : visible si "false" et invisible si "true".

  • {{fruit}}

exercice 4

La balise input et la directive ng-modle

Les sites n'utilisant pas, à un moment ou à un autre, la balise input sont très rares. AngularJS va énormément simplifier la gestion des données entrées par le visiteur du site. La directive ng-model pourra être associé à une balise input : " ng-model="maValeur".

Ma liste de fruits

Ajouter un fruit:

  • {{fruit}}

exercice 5

Mini projet

On va mettre en place une application de saisie de nouveaux élèves dans un lycée, l'application devra proposer : le nom, le prénom, la date de naissance, la classe, il faut choisir une classe parmis une liste (utilisation de la balise select). La validation du formulaire devra se faire par l'intermédiaire d'un bouton. Les élèves nouvellement saisis devront apparaître sur la page au fur et à mesure de la saisie.

Checkbox

Il est possible d'utiliser une checkbox (balise input avec un « type="checkbox" ») Si la checkbox est cochée, on aura alors checked=true si elle est décochée on aura checked=false (vous pouvez utiliser un autre nom que «checked» pour la variable.

Les filtres

AngularJS prévoit l'application de filtres qui permet de sélectionner ou de mettre en forme l'information. En ajoutant un filtre à une directive ng-repeat, seuls les éléments correspondant au filtre seront affichés .

Voici le code en téléchargement pour essayer et pour que vous puissiez le refaire.


Code

Node JS

JavaScript côté serveur

JavaScript avait toujours été utilisé du côté du client, c'est-à-dire du côté du visiteur qui navigue sur me site. Le navigateur web du visiteur exécute le code JavaScript et effectue des actions sur la page web. Node.js offre un environnement côté serveur qui permet aussi d'utiliser le JavaScript pour générer des pages web : il vient en remplacement de langages serveur comme PHP. Node JS est basé, comme le JavaScript sur les événements, c'est toute la façon d'écrire des applications web qui change, c'est grâce à cela que Node JS est puissant et rapide.

Pour utiliser Node JS, il faut d'abord l'installer sur sa machine, sur le site officiel de Node JS. Lorsque l'installation est terminée, on verra deux programmes installés :

  • Node JS : interpréteur de commandes, on l'utilise peu en pratique, il sert à tester des commandes JavaScript.
  • Node Js command prompt : console de Windows configurée pour reconnaître Node JS, c'est par là qu'on passera pour lancer les programmes, c'est ce qu'on utilisera le plus souvent.

Construction d'un serveur HTTP

server http

  • var http = require('http' : require effectue un appel à la bibliothèque Node JS "http" qui permet de créer un serveur web, il existe beaucoup de librairies semblables, dont la plupart peuvent être téléchargées avec NPM, le gestionnaire de paquets de Node JS.
  • var server = http.createServer() : La variable "http" représente un objet JavaScript qui va permettre de lancer un serveur web. On appelle la fonction createServer() prend un paramètre qui est une fonction, c'est pour ça que l'instruction est un peu plus compliquée, elle s'étend sur plusieurs lignes.
  • req : La requête du visiteur est un objet qui contient toutes les informations sur ce que le visiteur a demandé. On y trouve le nomm de la page appelée, les paramètres et les éventuels champs de formulaire remplis.
  • res : La réponde est un objet qu'il faut remplir pour donner un retour au visiteur, "res" contiendra en général le code HTML de la page à renvoyer au visiteur.
  • res.writeHead(200); : On renvoie le code 200 dans l'en-tête de la réponse, qui dit au navigateur que tout va bien, en plus du code HTML, le serveur renvoie en général tout un tas de paramètres dans en en-tête. Il faut connaître la norme HTTP qui indique comment clients et serveurs doivent communiquer pour bien l'utiliser.
  • res.end('Salut tout le monde !'); : On termine la réponse avec "end()" en envoyant le message de notre choix au navigateur, dans l'exemple, on envoie du texte brut et non pas du HTML.

Tester serveur HTTP

Il suffit d'exécuter la commande : "node fichier_a_executer.js"; il faut ensuite ouvrir le navigateur et se rendre à l'adresse : http://localhost:8080. On se connecte alors sur notre propre machine sur le port 8080 sur lequel le programme Node JS est en train d'écouter.

Récupérer la page demandée par le visiteur

Pour récupérer la page demandée par le visiteur, il faut faire appel à un nouveau module Node JS appelé "url", on demande son inclusion :

var url = require("url");
Ensuite, il faut parser la requête du visiteur pour obtenir le nom de la page demandée.
url.parse(req.url).pathname;
Code qui permettra de tester :
test request page

Code complet affichant notre nom et notre prénom

displayname

Emettre des événements

Si on veut émettre des événements, il faut inclure le module EventEmitter et créer un objet basé sur EventEmitter.
événement emitter
Pour émettre un événement dans le code, il faut faire appel à "emit()" depuis l'objet basé sur EventEmitter et indiquer :

  • Le nom de l'événement qu'on veut générer
  • Un ou plusieurs éventuels parmaètres à passer

événement node js

Code complet pour tester l'émission d'événements

Ce code se contente d'émettre un événement, les événements seront émis depuis des fonctions imbriquées dans d'autres fonctions. événement node js

Les modules Node JS et NPM

Node JS est très riche grâce à son extensibilité : ces extensions sont les modules. Il en existe des miliers qui offrent des fonctionnalités variées.

Créer des modules

Les modules sont des fichier ".js", si on veut créer un module "first module", on doit créer un fichier "first_module.js" dans le même dossier que l'application et l'appeler :
var test = require('./test');

Création d'un module simple


On crée des fonctions qu'on place dans des varaiables : var direBonjour = function(), ensuit on exporte ces fonctions pour qu'elles soient utilisables de l'extérieur : exports.direBonjour = direBonjour;. module

Faire apel aux fonctions du module


module

Utiliser NPM pour installer des modules


Une simple commande suffit pour télécharger et installer un module avec NMP, qui gère les dépendances : si un module a besoin d'un autre module pour fonctionner, NPM ira le télécharger automatiquement.

Trouver un module

Si on sait ce qu'on cherche, le site web de NPM permet de faire une recherche mais on peut aussi faire une recherche dans la console avec la commande : npm search postgresql. Cela aura pour effet de chercher tous les modules en rapport avec la base de données PostgreSQL.

Installer le module

Pour installer un module, il faut se placer dans le dossier du projet et taper : npm install "nom_du_module". Le module sera installé localement pour le projet. Si on a un autre projet, il faudra donc relancer la commande pour l'installer à nouveau pour cet autre projet, cela permet d'utiliser des versions différentes d'un même module en fonction des projets.

Mettre à jour un module

Cela se fait avec la commande : npm update, qui va checher sur les serveurs s'il y a de nouvelles versions des modules puis va mettre à jour les modules installés sur la machine et il supprimera les anciennes versions.

Express.JS

Pour aller plus vite, on peut utiliser un framework, pour installer le framework Express.js, il faut taper la commande : npm install express.

Les routes

Quand on crée une application web, on manipule des routes, ce sont les différentes URL auxquelles l'application doit répondre. La gestion des routes doit être traité sérieusement.

Les routes simples

Application basique utilisant Express


application basique express

Il ne faut pas oublier : npm install express pour faire fonctionner le code. On commence par demander l'inclusion d'Express et on créer un objet app en appelant la fonction express(). Ensuite, il faut indiquer les différentes routes à laquelle l'application doit répondre (ici, on créer une seule route, la racine "/"). Une fonction de callback est appelée quand quelqu'un demande cette route.


routes

Les routes dynamiques

Express permet de gérer les routes dynamiques, des routes dont certaines portions peuvent varier, on doit écrire : nom_variable dans l'url de la route, ce qui aura pour effet de créer un paramètre accessible depuis req.params.nom_variable.
routes dynamiques

socket.io

Cette bibliothèque permet de faire très simplement de la communication synchrone dans une application, la communication en temps réel. Les possiblités offertes par socket.io sont immenses : tout ce qui nécessite une communication immédiate entre les visiteurs du site.

Installer socket.io

Cela se fait avec la commande : npm install socket.io.

Le serveur app.js


app.js

Le code fait 2 choses :

  • Il renvoie le fichier "index.html" quand un client demande à charger la page dans son navigateur
  • Il se préparer à recevoir des requêtes via socket.io, on s'attend ici à recevoir un seul type de message : connexion. Lorsqu'on se connecte via socket.io, on logge ici l'information dans la console
Le client effectue 2 types de connexion :
  • Une connexion classique au serveur en HTTP pour charger la page "index.html"
  • Une connexion "temps réel" pour ouvrir un tunnel via les WebSockets

Le client

Le fichier "index.html" est envoyé par le serveur node.js, c'est un fichier HTML classique mais il contient un peu de code JavaScript qui permettre ensuite de communiquer avec le serveur en temps réel via socket.io.
client

Emettre et recevoir des messages

Le client est connecté, on peut échanger des messages entre le client et le serveur, il y deux possiblités :

  • Le serveur veut envoyer un message au client
  • Le client veut envoyer un message au serveur

Le serveur envoi un message au client

Le serveur enverra un message au client lorsqu'il vient de se connecter pour lui confirmer que la connexion a bien fonctionné. Il faut rajouter ce code dans "app.js".
client
Lorsqu'on détecte une connexion, on émet un message au client avec socket.emit(), la fonction prend 2 paramètres :

  • Le type de message qu'on veut transmettre, cela permet de distinguer les différents types de message
  • Le contenu du message, on peut transmettre ce qu'on veut

L'index.html

On va écouter l'arrivée de messages de type "message".
message

Le chat

Pour tester les application, le plus simple est de télécharger le fichier de code, ensuite le décompresser et placer le dossier dans 'C:\Users\votre_nom_d_utilisateur\nom_de_l_application', le nom de l'application sera le nom du dossier qui contient l'application. Ensuite pour lancer l'application, ouvrez une console, à l'aide de la commande "cmd", que l'on tape dans l'explorateur de fichier, ensuite rendez-vous dans le dossier de l'application en tapant cd ./nom_de_l_application", ensuite tapez la commande "node index.js". Rendez-vous à l'url "http://localhost:8888/" (qui correspond à la configuration serveur du cas présent, comme je l'ai configurée).

Un système de chat avec socket.io

Le fichier app.js

Il renvoie une page web lorsqu'on appelle le serveur, on va renvoyer le fichier "index.html" aux visiteurs qui se connectent sur le site. En plus d'une page web classique, le serveur Node JS devra gérer les événements de socket.io, on a besoin de gérer deux événements :

  • nouvel_utilisateur : signale qu'un nouveau client vient de se connecter au Chat, il doit transmettre un pseudo pour pouvoir informer l'utilisateur avec des messages.
  • message : signale qu'un nouveau message a été posté, le rôle en tant que serveur sera de le redistribuer aux autres clients connectés avec un broadcast. On récupèrera le pseudo du posteur dans une variable de session


L'index.html

Son code doit contenir :

  • une connexion à socket.io
  • Demander le pseudo au visiteur lors du chargement de la page via un prompt() en JS et envoyer un signal nouvel_utilisateur.
  • Gérer la réception de signaux de type nouveau_client envoyés par le serveur. Cela signifie qu'un nouveau clientvient de se connecter. Afficher son nom dans un message
  • Gérer la réception de signaux de type message envoyés par le serveur. Cela signifie qu'un autre client vient d'envoyer un message sur le Chat et donc qu'il vous faut l'afficher dans la page.
  • Gérer l'envoi du formulaire, lorsque le client veut envoyer un message aux autres personnes connectées. Il faudra récupérer le message saisi dans le formulaire en JavaScript, émettre un signal de type message au serveur pour qu'il le distribue aux autres clients, et aussi insérer ce message dans notre propre page.


Code

Un formulaire de transfert de fichiers

Cas d'utilisation de l'application :

  • L'utilisateur doit pouvoir utiliser l'application depuis un navigateur
  • L'utisateur doit voir une page d'accueil affichant un formulaire de transfert de fichier
  • En soumettant le formulaire après avoir choisit une image, elle doit être uploadée à la même adrese, qui l'affichera une fois le transfert terminé.

Les couches de l'application

  • On a besoin d'un serveur HTTP pour servir des pages web
  • Le serveur devra répondre différemment en fonction de l'URL demandée, on a besoin d'un routeur pour attribuer aux requêtes les bonnes réponses.
  • Pour satisfaire les requêtes reçues sur le servuer et qui ont été dirigées grâce au routeur, il faudra un gestionnaire de requêtes.
  • Le routeur va aussi devoir traiter les données reçues par POST et les transmettre au gestionnaire de requête de façon appropriée, on aura besoin d'un gestionnaire de données pour cela.
  • On ne souhaite pas uniquement traiter les URL reçues, on veut aussi afficher du contenu lorque ces URL sont appelées, il faudra donc un modèle de vue qui sera utilisé par le gestionnaire de requêtes des éléments au navigateur.
  • L'utilisateur devra pouvoir transférer des images, il faudra donc un gestionnaire d'upload pour gérer cela.


Le serveur "server.js"

Node.js récupère dans une requête POST par paquets, les fonctions de rappels régaissant à différents événements, ces événements sont "data", lorsqu'un nouveau paquet est disponible et "end" lorsque toutes les données ont été reçues. On doit indiquer à Node.js quelles fonctions lorques ces événements sont déclenchés, c'est réalisé en ajoutant des écouteurs à l'objet "request" passés à la fonction de rappel onRequest, chaque fois qu'une requête HTTP est reçue. On n'a accès à l'objet "request" qu'au niveau du serveur puisqu'on ne le passe pas au routeur et donc pas au gestionnaire de requête non plus. C'est une tâche dévolue au serveur de fournir au reste de l'application les données de la requête utilie au reste du traitement. C'est pour cela qu'il est préférable que les données POST soient traitées au niveau du serveur et de passer le résultat au routeur et au gestionnaire de requêtes qui pourront décider ce qu'il faut en faire. L'idée est donc de placer les fonctions de rappel liées à "data" et "end" au niveau du serveur. On utilise "data" pour réunir les paquets de données et "end" pour transmettre les données collectées au gestionnaire de requêtes en passant par le routeur. On fait principalement 3 choses. D'abord, on précise qu'on attend des données au format utf-8, ensuite on ajoute un écouteur pour l'événement "data" qui remplit au fur et à mesure la variable "postData" avec les paquets reçus, on déplace l'appel au routeur au niveau de la fonction de rappel de l'écouteur de l' événment "end" pour être sûr qu'il ne sera appelé que lorsque toutes les données auront été reçues. On en profite aussi pour transmettre les données POST au routeur puisque on en aura besoin dans le gestionnaire de requêtes. Ajouter une inscription dans la console n'est pas nécessairement opportun mais cela est utile pour voir ce qu'il se passe.


client

La gestion de transfert de fichier dans le fichier "requestHandlers"

L'objectif est de permettre à l'utilisateur d'uploader une image puis d'afficher cette image dans le navigateur. On va pour cela utiliser un module externe de Node.js, on utilisera "node-formidable" qui permet de se passer de tous les détails pénibles liés à la réception de fichiers. Recevoir des fichiers revient presque au même que de recevoir des données POST mais les détails deviennent trop pénible, il vaut mieux se servir d'une solutions clés en main.

Utilisation du module "formidable

Pour pouvoir ce servir du module "formidable", Node.js incorpore un gestionnaire de paquetage appelé NPM qui permet d'installer des modules externes de façon très simple, il faut juste de taper la commande : "npm install formidable". Le module sera ensuite disponible dans le code, il suffira de l'importe en écrivant : "var formidable = require("formidable");". Ce module rend tous les éléments de formulaire reçus depuis une requête HTTP de type POST facilement accessibles depuis Node.js. Il reste à créer un objet "incomingForm" qui est une réprésentation du formulaire reçu et qui peut être parcouru depuis l'objet "request" du serveur HTTP, autant pour les champs du formulaire que pour les fichier. On doit aussi trouver comment renvoyer l'image récupérée, qui est sauvegardée dans le répertoire "/tmp", au navigateur. On doit désormais : ajouter un champ de formulaire de type fichier sur la page "/start", intégrer "node-formidable" au gestionnaire upload pour sauvegarder le fichier reçu à l'emplacement "/tmp/test.png" et renvoyer l'image dans le contenu HTML de "/upload". La première étape est simple : on créer un formulaire d'upload d'image. Ensuite, on veut gérer la récupération de l'image dans le gestionnaire upload, on doit donc passer l'objet "request" à la méthode "form.parse" de "node-formidable". On va donc devoir passer l'objet "request" du serveur au routeur puis au gestionnaire de requêtes.

client client

Le routeur "router.js"

L'objet "request" est disponible pour le gestionnaire "upload", c'est "node-formidable" qui se charge de sauvegarder le fichier reçu dans le répertoire local "/tmp" mais on doit se charger de le renommer en "test.png", on simplifie fortement en considérant que seuls les fichiers PNG seront transmis. Sous Windows, Node.js n'est pas capable d'écraser un fichier existants, dans ce cas si le renommage soulève une erreur, on doit d'abord supprimer le fichier déjà présent avaznt de renommer le nouveau. Ce travail sera cependant réalisé dans le fichier "requestHandlers.js".

client

Le point de départ de l'application "index.js"

On transmet la liste des gestionnaires à utiliser sous forme d'objet et pour pouvoir avoir une couplage faible, on tranmset cet objet par "route()". Il est simple d'utiliser le même gestionnaire pour des URL différentes, en précisant le chemin "/" associé à requestHandlers.start, on peut indiquer que la requête "/start" et la requête "/" doivent être traitées par le gestionnaire "start". Après avoir défini l'objet, on le transmet au serveur comme paramètre supplémentaire. On a ajouté le paramètre "handle" à la fonction "start()" et on a transmis l'objet "handle" à la fonction de rappel "route()" comme premier paramètre.

client

Code
gabriele cassano

Gabriele Cassano

Rue Saint-Alphonse, 84
7110 Strépy-Bracquegnies
  0497/62.10.10
  gabriel_cassano@hotmail.com

Invoking Demons Home Sweet Home Design