Introduction à JavaScript

Présentation au sujet: "Introduction à JavaScript"— Transcription de la présentation:

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

2 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

3 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

4 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

5 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

6 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

7 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

8 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

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

10 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

11 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

12 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

13 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 (~ ) LN2 Logarithme de 2 PI Pi ( ) 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

14 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

15 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

16 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

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

18 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

19 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

20 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

21 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

22 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