Introduction à JavaScript Plan Présentation La syntaxe Langage objet Les événements JavaScript - Iris - Le Mans

Présentation du langage La syntaxe Langage objet Evénements JavaScript est un langage « client », c'est-à- dire exécuté chez l'utilisateur lorsque la page Web est chargée. Il a pour but de dynamiser les sites Internet et d’en améliorer l’ergonomie. C’est un langage interprété par le navigateur. Malheureusement la compatibilité n’est assurée avec tous. JavaScript - Iris - Le Mans

Présentation suite Présentation La syntaxe Langage objet Evénements JavaScript est un langage de programmation orienté objet développé par NETSCAPE dans les années 90 puis adopté par SUN en 1995. Le JavaScript est une extension du langage HTML Il est inclus dans le code. Les balises commentaires ne sont pas interprétées en Javascript, mais évite que le code soit pris en compte par un validateur HTML. JavaScript - Iris - Le Mans

La syntaxe – structure de contrôles Présentation La syntaxe Langage objet Evénements Le code JavaScript se trouve dans un fichier ayant pour extension .js L'inclusion de ce fichier se fait généralement au début des pages HTML grâce à la balise SCRIPT : La syntaxe des structures de conditionnelles et itératives respecte celle du langage C JavaScript - Iris - Le Mans

La syntaxe – Les variables Présentation La syntaxe Langage objet Evénements JavaScript est un langage faiblement typé. Il est possible d'utiliser une variable sans l'avoir déclaré au préalable et sans en préciser son type. Il faut néanmoins les déclarer grâce au mot clef var. Portée des variables : Une variable déclarée en début de script est considérée comme étant globale. Les variables utilisées/déclarées dans une fonction restent locales à la fonction. JavaScript - Iris - Le Mans

La syntaxe – Les fonctions Présentation La syntaxe Langage objet Evénements Contrairement au langage C, on ne donne pas le type des arguments ni celui de la valeur de retour éventuelle. La définition d'une fonction est : JavaScript - Iris - Le Mans

La syntaxe – les chaînes de caractères Présentation La syntaxe Langage objet Evénements Une chaîne de caractères est délimitée par des guillemets simples ou doubles. Exemple: JavaScript - Iris - Le Mans

Langage Objet Présentation La syntaxe Langage objet Evénements Javascript est un langage objet, chaque objet possède des méthodes (ou fonctions), des propriétés et .... des objets. Exemple pour un objet voiture : des propriétés : la couleur, la marque, le numéro d'immatriculation ; des méthodes : tourner(), avancer(), reculer(), changer la couleur() ; des objets : les phares, les pneus. JavaScript - Iris - Le Mans

Exemple de création d’objet Présentation La syntaxe Langage objet Evénements Chien.js Chien.html JavaScript - Iris - Le Mans

Objet Javascript Intrinsèques Présentation La syntaxe Langage objet Evénements Quatre classes d'objets sont déjà intégrées au javascript, avec leurs propriétés et de multiples méthodes : Les chaîne de caractères : String Les tableaux : Array Les objets mathématiques : Math Les dates : Date Exemple : JavaScript - Iris - Le Mans

Objet - String Autres méthodes Présentation La syntaxe Langage objet Evénements Propriété Description length Longueur de la chaîne de caractères Méthodes big() Formate la chaîne avec <b></b> charAt() Retourne le caractère situé à une certaine position, attention le premier caractère est à la position 0 concat() Concatène deux chaînes, équivalent de "+" indexOf() Retourne la position d'un caractère dans une chaîne lastIndexOf() Retourne la dernière position d'un caractère dans une chaîne substr() Retourne une portion de chaîne Autres méthodes JavaScript - Iris - Le Mans

Objet - Array Autres méthodes Présentation La syntaxe Langage objet Evénements Propriété Description length Nombre d ’éléments du tableau Méthodes join() Converti un tableau en chaîne de caractères reverse() Inverse le classement des éléments du tableau concat() Concatène deux tableaux slice() Retourne une portion du tableau Autres méthodes JavaScript - Iris - Le Mans

Objet - Math Présentation La syntaxe Langage objet Evénements Un objet Math ne s'instancie jamais. On accède simplement à ses propriétés via Math.propriété et Math.méthode(). Propriété Description E Constante d'Euler (~2.718...) LN2 Logarithme de 2 PI Pi (3.14159...) Méthodes abs() Retourne la valeur absolue d'un nombre ceil() Retourne le plus petit entier supérieur à un nombre sin(), cos(), tan() Retourne les sinus, cosinus, tangente d'un nombre pow() Retourne un nombre à une certaine puissance JavaScript - Iris - Le Mans Autres méthodes

Objet - Date L’objet date ne possède pas de propriété Autres méthodes Présentation La syntaxe Langage objet Evénements Méthode Description getDate() Retourne le jour du mois stocké dans la date getDay() Retourne le jour de la semaine stocké dans la date getFullYear() Retourne l'année stocké dans la date getMonth() Retourne le mois stocké dans la date setDate() Remplace le jour stocké dans la date setFullYear() Remplace l'année stocké dans la date setMonth() Remplace le mois stocké dans la date toGMTString() Transforme la date avec la convention GMT L’objet date ne possède pas de propriété Autres méthodes JavaScript - Iris - Le Mans

Les objets du navigateur Présentation La syntaxe Langage objet Evénements Tous les éléments du navigateur sont susceptibles d'être modifiés visuellement aux travers de Javascript. Malheureusement, le résultat n'est pas le même pour tous les navigateurs, Il faut donc coder rigoureusement, et tester les scripts avec les différents navigateurs. JavaScript - Iris - Le Mans

Les objets du navigateur Présentation La syntaxe Langage objet Evénements Les objets du navigateur sont organisés de manière hiérarchique : JavaScript - Iris - Le Mans

Présentation La syntaxe Langage objet Evénements JavaScript - Iris - Le Mans

Pour obtenir la valeur contenue dans le champ login du formulaire : Présentation La syntaxe Langage objet Evénements Pour chaque niveau il existe des méthodes et des attributs. Pour obtenir la valeur contenue dans le champ login du formulaire : VariableLogin = window.document.forms["monForm"].login.value; JavaScript - Iris - Le Mans

Objet – window – Les propriétés Présentation La syntaxe Langage objet Evénements Propriété Description defaultStatus Message par défaut affiché dans la barre de statut status Message affiché dans la barre de statut document Document affiché dans la fenêtre frames Collection de cadres présents dans la fenêtre history Historique des pages visitées précédemment location Adresse de la page affichée name Nom de la fenêtre navigator Référence au browser utilisé parent Fenêtre supérieure dans la hiérarchie self Fenêtre en cours JavaScript - Iris - Le Mans

Objet – window – Les méthodes Présentation La syntaxe Langage objet Evénements Propriété Description alert() Affiche une fenêtre d'alerte Javascript close() Ferme la fenêtre confirm() Affiche une fenêtre de confirmation moveBy() Déplace la fenêtre d'une certaine distance moveTo() Déplace la fenêtre à un certain endroit open() Ouvre une nouvelle fenêtre print() Imprime le contenu de la fenêtre resizeBy() Redimensionne la fenêtre d'un certain facteur resizeTo() Redimensionne la fenêtre à une nouvelle taille setTimeout() Effectue une action après un lapse de temps JavaScript - Iris - Le Mans

Les événements Présentation La syntaxe Langage objet Evénements L'action sur un élément de la page se fait généralement sous la condition d'un événement particulier (clique de souris, changement de la valeur d'un champ, etc). Voici des évènements possibles pour une page WEB: Click (onClick) Load (onLoad) Unload (onUnload) MouseOver (onMouseOver) MouseOut (onMouseOut) Focus (onFocus) Blur (onBlur) Change (onChange) Select (onSelect) Submit (onSubmit) JavaScript - Iris - Le Mans

Utilisation des événements Présentation La syntaxe Langage objet Evénements Pour qu'un objet réagisse à un événement, il faut lui associer une fonction de traitement. Le fichier mesFonctions.js contient le code suivant : JavaScript - Iris - Le Mans