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.
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 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).
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).
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.
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 |
Si l'utilisateur clique sur un bouton, le gestionnaire d'événements onclick détecte l'action et réalise les tâches qui lui ont été confiées. Lorsqu'on écrit un script, on à pas à anticiper toutes les actions possibles de l'utilisateur mais uniquement celles en réponse auxquelles on souhaite que quelque chose de spécial se produise. La commande onload peut être utilisée si on souhaite déclencher un script dès que la page se charge.
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
|
| Boolean |
vraie(true) ou faux(false)
|
| Null | vide et sans signification |
| Objet | toute valeur associée à un objet |
| Fonction | l'utilisateur a activé un objet |
Le mot clé var est présent pour indiquer qu'on déclare une variable, un fois qu'elle est déclarée on en a plus besoin.
var myVariable;
On assigne une valeur à une variable avec le signe "=".
myVariable = 2;
Les nombres à virgule s'écrivent avec un point.
var myVariable = 5.5;
On peut déclarer et assigner des variables sur une seule ligne.
var myVariable1, myVariable2, myVariable3;
Assigner la valeur d'une variable à une autre variable pour qu'elle aient toutes les deux la même valeur.
myVariable1 = myVariable2 = 2;
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);
var number = 3;
number = number + 5;
alert(number);
x + y (chaîne) : concatène x et y
var hi = 'Bonjour', name = 'toi', result;
result = hi + name;
alert(result);
var text = 'Bonjour';
text += ' toi';
alert(text);
var condition1, condition2, result;
condition1 = 2 > 8; // retourne "false"
condition2 = 8 > 2; // retourne "true"
result = condition1 && condition2;
alert(result);
Essayez
x++ et ++x ajoutent toutes deux une unité à x amis elles ne sont pas identiques. x++ incrémente x a près que l'attribution de sa valeur ait été effectuée, ++x le fait avant. Si x vaut 5, y = x++, positionne y à 5 et x à 6 alors que y = ++x positionne x et y à 6. L'opérateur -- focntionne de la même manière. Si on mélange des valeurs numériques et des valeurs de chaîne lorsqu'on additionne deux valeurs, le résultat obtenu est une chaîne (chat +5 donne pour résultat : chat5).
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 |
A l'exception du signe =, les autres opérateurs d'attribution servent de raccourci pour modifier la valeur des variables. x = x + 5 peut être écrit sous forme abrégée x +=5.
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 |
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.
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 :
Lorsqu'on procède de cette manière, il devient très simple d'apporter des modifications au site, même lorsqu'elles doivent affecter le site tout entier.
Ils peuvent être placés à deux endroits :
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.
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.
La balise "no script" sert pour les navigateurs qui ne supportent pas le JavaScript, un message apparaît et indique que cette page requiert le JavaScript.
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.
function initRedirect(){
window.location = 'https://openclassrooms.com/dashboard';
return false;
}
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.
window.location : renvoie un objet Location contenant des informations concerant l'url actuelle du document et fournit des méthodes pour modifier cette url.
var text = '1337', number;
number = parseInt(text);
alert(number);
var text, number1 = 4, number2 = 2;
text = number1 + '' + number2;
alert(text);
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.
Une condtion est est constituée de :
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");
}
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.");
}
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);
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);
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.
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.
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.
Nom de l'artiste : Secret Faces
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');"
A partir d'un switch case, on va afficher un message différent selon le bouton cliqué.
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 :
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().
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).
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.
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.
Utilisez donc la fonction actualiser/recharger de votre navigateur ...
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.
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 :
Il existe différentes options, certaines sont désactivées dans les navigateurs pour des raisons de sécurité :
On peut ouvrir plusieurs fenêtres popup simultanément mais au risque d'agacer l'utilisateur qui navigue sur le site.
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.
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 :
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".
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.
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 |
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.
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.
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.
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.
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.
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.
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.
Il existe 2 méthodes, focus() et blur(), permettant respectivement de donner et retirer le focus à un élément.
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.
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.
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é.
CodePour 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é.
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éé.
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.
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.
Une fois votre objet crée ou la date du jour obtenu, vous pouvez utiliser les méthodes suivantes pour manipuler l'objet.
On peut définir une date spécifique en passant une chaîne de date au constructeur.
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.
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.
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é.
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.
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
En modifiant l'exemple précédent, on peut vérifier si une date fourni appartient à une plage spécifique.
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.
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.
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.
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.
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.
span et leur mettre une bordure rougeCeci est un 1er paragraphe
Ceci est un 2ème paragraphe
Ceci est un 3ème paragraphe
Ceci est un 4ème paragraphe
id celui sélectionné par jQuery et leur mettre une bordure rougea et leur mettre une bordure rougeCeci est un 1er paragraphe
Ceci est un 2ème paragraphe
Ceci est un 3ème paragraphe
Ceci est un 4ème paragraphe
p directement précédé d'un élément ul et leur mettre une bordure rougeIl 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
});
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 :
$('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
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é.
lt(less than) : sélectionner tous les éléments à indice inférieur à l'indexgt(great than) : sélectionner tous les éléments à indice supérieur à l'indexeq : sélectionne un élément ayant un numéro d'index spécifiqueEn HTML, les attributs sont contenus dans des balises, ils définissent comment le navigateur doit interpréter un élément d'une page web.
class et leur mettre une bordure rougeCeci 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é
para et leur mettre une bordureCeci 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é
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.
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
});
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 évenements existent aussi en jQuery, comme en JavaScript : on lance un bout de code quand une action est remplie.
$(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 !');
}
});
$('#uneDiv').dbclick(function(){
alert('I like Cannibal Corpse');
});
$('#uneDiv').hover(function(){
alert('Survol de la souris');
});
$('#uneDiv').dbclick(function(){
alert('I like Cannibal Corpse');
});
$('#uneDiv').mouseenter(function(){
$('p:first', this).text('mouse enter');
});
$('#uneDiv').mouseleave(function(){
$('p:first', this).text('mouse leave');
});
$('#target').mousedown(function(){
alert('Vous avez cliqué sur un bouton de la souris');
});
$('button').on({
click : function(){
alert('Vous avez cliqué');
},
mouseup: function(){
alert('Vous avez relâché le bouton');
}
});
$('div').scroll(function(){
$('span').text(x += 1);
});
$('#target').keydown(function(){
alert('On appelle la fonction keydown');
});
$('#maDiv').keypress(function(){
alert('Vous avez pressé une touche');
});
$('document').keyup(function(touche){
var appui = touche.wich || touche.keyCode;
if(appui == 13){
alert('Vous avez appuyé sur la touche Enter');
}
});
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
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
});
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');
});
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.
$('p').on('click', function(){
alert('Ecoute événement');
});
$('p').off('click');
$('p').off();
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 :
$('p[id="anim"]').animate({
width : '150px',
fontSize : '35px',
marginTop : '50px'
});
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 :
$('p').animate({
width : '150px'
}, 'fast'); // premier exemple avec la valeur fast (200ms)
$('p').animate({
width : '150px'
}, 1000); // second exemple avec 1000ms (= 1s)
Il s'agit de l'évolution de l'animation, qui est la manière dont elle va se dérouler.
$('p').animate({
width : '150px'
}, 'linear'); // l'animation se déroulera de façon linéaire
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 !');
});
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 !');
});
Voici comment créer des effets en jQuery.
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.
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.
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.
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é.
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é.
Il faut d'abord définir les modalités d'envoie avec la méthode "open" et on l'enverra ensuite avec la méthode "send".
var xhr = getXMLHttpRequest();
xhr.open("GET", "handlingData.php", true);
xhr.send(null);
open s'utilise de cette façon : open(sMethod, sUrl, bAsync).
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.
Pour POST, il faut spécifier les variables dans l'argument de "send".
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".
Quand on envoie une requête HTTP via XMLHTTPRequest, elle passe par plusieurs état différents.
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.
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.
Il suffit d'utiliser deux propriétés disponibles :
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.
On lira simplement le contenu d'un fichier XML.
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.
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 :
Pour charger l'objet statique JSON, on va utiliser la fonction "callback", il suffira ensuite de traiter les données et de les afficher.
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.
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.
Pour charger un fichier dans un iframe, il y a 3 façons :
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.
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.
Elle est assez simple : maintenant qu'on sait accéder à l'iframe, il n'y a plus qu'à ajouter quelques points supplémentaires.
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);
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).
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.
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.
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.
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.
"body" jusqu'à la balise "/body".
"$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.
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.
ng-repeat est la direction qui permet de dupliquer du code HTML automatiquement et intelligemment.
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.
Les objets peuvent aussi contenir des URL, notamment des URL d'images.
La balise image "img" avec l'attribut classique "src" classique ne fonctionnera pas, il faut systèmatiquement utiliser "ng-src" à la place de "src".
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.
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".
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".
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.
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.
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 .
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 :
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.
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 :
Si on veut émettre des événements, il faut inclure le module EventEmitter et créer un objet basé sur EventEmitter.
Pour émettre un événement dans le code, il faut faire appel à "emit()" depuis l'objet basé sur EventEmitter et indiquer :
Ce code se contente d'émettre un événement, les événements seront émis depuis des fonctions imbriquées dans d'autres fonctions.
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.
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');
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;.
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.
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.
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.
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.
Pour aller plus vite, on peut utiliser un framework, pour installer le framework Express.js, il faut taper la commande : npm install express.
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.
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.
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.
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.
Cela se fait avec la commande : npm install socket.io.
Le code fait 2 choses :
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.
Le client est connecté, on peut échanger des messages entre le client et le serveur, il y deux possiblités :
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".
Lorsqu'on détecte une connexion, on émet un message au client avec socket.emit(), la fonction prend 2 paramètres :
On va écouter l'arrivée de messages de type "message".
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).
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 :
Son code doit contenir :
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.
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.
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.
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".
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.
Ce site applique :
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 :
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 :
Ce site est hébergé par :
Kimsufi
Dont le siège est situé à l’adresse suivante : 2 rue Kellermann – 59100 Roubaix (France).
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.
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.
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.
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.