A propos

Ce site est destiné à vous faire découvrir le JavaScript et apprécié ce langage.

Il reprend la plupart des fonctionnalités que j'ai apprises en JavaScript.

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écuteé 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 scripts 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

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


Afficher 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.

bob marleyNom de l'artiste : Bob Marley

Afficher un texte


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.

"document.write('message');"

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

Afficher une message avant une redirection


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

  Ouvrir la Pop-Up
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".

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

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.

1. 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


2. 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

3. 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


4. 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

5. 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é


Code

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é.


fonction xmlhttprequest



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".

// Voir la fonction getXMLHttpRequest() définie dans la partie précédente
var xhr = getXMLHttpRequest();
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.

passage variable

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

spécification_variable

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".

protection_caractères



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.

onreadystatechange

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

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.


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).


ecriture_cookie



La fonction setCookie

setcookie



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

lecture_cookie_analyse_normale

Avec une expression régulière

lecture_cookie_expression_reguliere

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

Un système d'auto-complétion

En partant d'un formulaire dans lequel on a inséré une liste de choix, cette liste force l'utilisateur à choisir une des valeurs qu'on lui propose. Mais ce qui peut être intéressant, c'est d'aider l'utilisateur en lui proposant une liste de choix, tout en lui permettant d'effectuer une saisie libre. C'est ce que l'on appelle le principe de l'auto-complétion : dès que l'utilisateur tape un caractère dans le champ, une recherche est immédiatement effectuée et retournée au navigateur, il affiche les résultats dans un petit cadre situé sous le champ de recherche, les résultats peuvent alors être parcourus, soit par le biais des touches fléchées du clavier, soit par le biais du curseur de la souris. Si on choit un des résultats listés, il est alors automatiquement écrit dans le champ de recherche en lieu et place de ce qui avait été écrit par l'utisateur et il ne reste plus qu'à lancer la recherche. Cela permet de gagner du temps, la recherche peut s'effecteur en tapant seulement quelques caractères.

On a besoin d'un champ de texte pour écrire les mots-clé mais le navigateur enregistrement généralement ce qui a été écrit dans les champs de texte pour le reproposer plus tard sous forme d'auto-complétion, il est possible de désactiver cela en utilisant l'attribut autocomplete dans la champ "input". Il faut ajouter un élément capable d'englober les suggestions de recherche, ce sera une balise "div" contenant autant de "div" que de résultats. Il suffit ensuite d'effectuer une requête à chaque caractère afin de proposer une liste de suggestions, il faudra une fonction liée à l'événement "keyup" du champ de recherche, qui sera chargée d'effectuer une nouvelle requête à chaque caractère tapé mais avec les multiples requêtes, on aura des suggestions qui ne seront plus en accord avec les caractères tapés dans le champ de recherche. Il faut donc utiliser la méthode abort() sur la précédente requête effectuée si elle n'est pas terminée, ainsi cela ne risque pas de renvoyer des informations dépassées par la suite.

On peut donc faire un script de recherche baisque en PHP dont le principe consiste à rechercher les villes, par exemple, qui correspondent aux lettres entrées dans le champ de recherche. Le nom des villes se trouvent dans un tableau PHP contenant les plus grandes villes de France. Il faudra donc récupérer les données du fichier contenant ce talbeau grâce à la fonction "unserialize()", le tableau doit être parcouru à la recherche de résultats en cohérence avec les caractères tapés par l'utilisateur dans le champ de recherche. On aura donc besoin d'une boucle ainsi que de la fonction count() pour obtenir le nombre d'éléments contenus dans le tableau. Pour vérifier si un indexu de tableau correspond à la recherche il faudra utiliser la fonction "stripos()" qui permet de vérifier si une chaîne de caractères contient certains caractères et ce sans tenir compte de la casse. Si on trouve un résultat en cohérence avec la recherche, on l'ajoute à un tableau préalablement créé, grâce à la fonction "array_push()". Une fois le tableau parcouru, il faut trier les résultats avec la fonction "sort()" puis renvoyer les données au client. Comme on ne renvoit que le nom de la ville, ici, on va devoir choisir le caractère de séparation "/", jamais utilisé dans le nom d'une ville. On utilisera ensuite la fonction "implode()" de PHP pour concaténer toues les valeurs d'un tableau dans une chaîne de caractère avec un ou plusieurs caractère de séparation. Et ensuite, il ne reste plus qu'à retourner le tout au client en PHP.


Essayer

Code

Chargement de fichiers

On peut créer une page qui va s'occuper de charger le contenu de deux autres fichiers selon le choix de l'utilisateur.


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.

Premier exemple


exercice 1


Essayer
  • 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


exercice 1


Essayer

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

exercice 3


Essayer

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".

ng-show/ng-hide


Essayer

La balise input et la directive ng-model

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".


exercice 5


Essayer

Mini projet

Mise en place d'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.



Essayer

Code

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 .

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

Conditions générales d'utilisation

Ce site applique :

  • - La Loi n° 2004-575 du 21 juin 2004 pour la confiance dans l’économie numérique et notamment l’article 6.
  • - La Loi n° 78-17 du 6 janvier 1978 relative à l’informatique, aux fichiers et aux libertés pour les questions de traitement de données à caractère personnel.

La structure générale du site, ainsi que les textes, images, sont la propriété de l’éditeur ou de ses partenaires. Toute représentation, reproduction et/ou reproduction et/ou exploitation partielle ou totale des contenus et services proposés par le site, par quelque procédé que ce soit, sans l’autorisation préalable et par écrit de Cassano Gabriele est strictement interdite et serait susceptible de constituer une contrefaçon.

Tous les éléments de ces site, y compris les documents téléchargeables, sont libres de droit. La reproduction des pages ne peuvent être utilisées à des fins commerciales, y compris l’utilisation du logo.

Le site peut contenir des liens hypertextes vers d’autres sites présents sur le réseau internet, les liens vers ces autres ressources vous font quitter le site. Il est possible de créer un lien vers la page de présentation de ce site sans autorisation expresse de l’éditeur.

L’éditeur se réserve le droit de demander la suppression d’un lien qu’il estime non conforme à l’objet du site.

Les informations et/ou documents figurant sur ce site sont susceptibles de contenir des inexactitudes techniques et des erreurs typographiques. L’éditeur se réserve le droit de les corriger, dès que ces erreurs sont portées à sa connaissance.

Les informations et/ou documents disponibles sur ce site sont susceptibles d’être modifiées à tout moment, et peuvent avoir fait l’objet de mises à jour. En particulier, ils peuvent avoir fait l’objet d’une mise à jour entre le moment de leur téléchargement et celui ou l’utilisateur en prend connaissance.

L’utilisation des informations et/ou documents disponibles sur ce site se fait sous l’entière et seule responsabilité de l’utilisateur, qui assume la totalité des conséquences pouvant en découler, sans que l’éditeur puisse être recherché à ce titre, et sans recours contre ce dernier.

L’éditeur ne pourra en aucun cas être tenu responsable de tout dommage de quelque nature qu’il soit résultant de l’ interprétation ou de l’utilisation des informations et/ou documents disponibles sur ce site.

L’éditeur s’efforce de permettre l’accès au site 24 heures sur 24, 7 jours sur 7, sauf en cas de force majeure ou d’un événement hors du contrôle de l’éditeur, et sous réserve des éventuelles pannes et interventions de maintenance nécessaires au bon fonctionnement du site et des services.

Par conséquent, l’éditeur ne peut garantir une disponibilité du site et/ou des services, une fiabilité des transmissions et des performances en terme de temps de réponse ou de qualité. Il n’est prévu aucune assistance technique vis à vis de l’utilisateur que ce soit par des moyens électronique ou téléphonique.

La responsabilité de l’éditeur ne saurait être engagée en cas d’impossibilité d’accès à ce site et/ou d’utilisation des services. Par ailleurs, l’éditeur peut être amené à interrompre le site ou une partie des services, à tout moment sans préavis, le tout sans droit à indemnités. L’utilisateur reconnaît et accepte que l’EDITEUR ne soit pas responsable des interruptions, et des conséquences qui peuvent en découler pour l’utilisateur ou tout tiers.

L’utilisateur déclare accepter les caractéristiques et les limites d’Internet, et notamment reconnaît que :

  • - L’éditeur n’assume aucune responsabilité sur les services accessibles par Internet et n’exerce aucun contrôle de quelque forme que ce soit sur la nature et les caractéristiques des données qui pourraient transiter par l’intermédiaire de son centre serveur.
  • - L’utilisateur reconnaît que les données circulant sur Internet ne sont pas protégées notamment contre les détournements éventuels. La présence du logo de Secret Faces institue une présomption simple de validité. La communication de toute information jugée par l’utilisateur de nature sensible ou confidentielle se fait à ses risques et périls.
  • - L’utilisateur reconnaît que les données circulant sur Internet peuvent être réglementées en termes d’usage ou être protégées par un droit de propriété.
  • - L’utilisateur reconnaît que l’EDITEUR ne dispose d’aucun moyen de contrôle sur le contenu des services accessibles sur Internet

Mentions légales

Je me réserve le droit de modifier les mentions légales de ce site en fonction d’éléments nouveaux concernant cette activité.Le site est édité et mis à jour par :

  • Cassano Gabriele
  • Domicilié à l’adresse suivante : Rue Saint-Alphonse, n°180, 7110 Strépy-Bracquegnies (Belgique).
  • Téléphone: 0497/62.10.10
  • Adresse e-mail: gabriel_cassano@hotmail.com

Ce site est hébergé par :

Kimsufi

Dont le siège est situé à l’adresse suivante : 2 rue Kellermann – 59100 Roubaix (France).

Accessibilité


Le site est par principe accessible aux utilisateurs 24/24h et 7/7j, sauf interruption, programmée ou non, pour des besoins de maintenance ou en cas de force majeure.

Données de propriétés intelectuelles


Le contenu de ce site web est ses pages sont protégés par les droits d’auteur applicables, les droit de marque et/ou tout autre droit de propriété intellectuelle. Aucun de ces droits ne peut être transféré à l’utilisateur de ce site internet.Vous pouvez utiliser ce site internet pour bénéficier des services offerts à des fins personnelles non-commerciales.

Aucune autre utilisation, comme par exemple et sans limitation, la modification, la copie, la reproduction, la redistribution ou la circulation n’est permise sur un support qu’il soit électronique ou autre, sans notre accord préalable et écrit de Cassano Gabriele.

Tous les droits de reproduction sont donc réservés, ce inclut le logo, les documents téléchargeables, les textes et tout autre représentation graphique et textuelle.

Toute reproduction pour laquelle une autorisation aura été délivrée devra inclure la source suivante: http://ilovejs.gabriel-cassano.be.

Liens


Les sites reliés directement ou indirectement au site I Love JavaScript sont relatifs au ce projet. En cas d’un lien externe vers un site non développé pour le projet, le groupe n’est pas responsable quant aux informations publiées sur ces sites.

Responsabilités


Vous acceptez que votre accès et l’utilisation de ce site internet et des pages se font à votre propre risque. Les informations fournies sur ce site internet et sur les pages ne peuvent être utilisées à des fins de commercialisation.

Je fournirais des efforts raisonnables pour donner des informations exactes sur ce site Internet et sur les pages et pouvons les modifier et les mettre à jour de temps en temps sans préavis. Je ne supporte aucune responsabilité et n’assurons aucune garantie explicite ou implicite en ce qui concerne l’absence d’erreur, de virus ou de fonctionnement défectueux de ces sites internet et des pages et/ou sur le caractère correct, raisonnable, à jour et complet du contenu de ce site et des pages et je rejette explicitement toute responsabilité pour tout dommage direct ou indirect dans le sens le plus large, qui surviendrait de ou serait lié à l’usage de ce site internet ou de ses pages.

Cassano Gabriele

Rue Saint-Alphonse, 180.
7110 Strépy-Bracquegnies

gabriel_cassano@hotmail.com

0497/62.10.10

Icyber-Corp.