Introduction à JavaScript Plan Présentation La syntaxe Langage objet Les événements 1JavaScript...

JavaScript - Iris - Le Mans 1

Introduction à JavaScriptPlan•Présentation• La syntaxe• Langage objet• Les événements


Présentation du langageJavaScript 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.

• Présentation• La syntaxe• Langage

objet• Evénements


Présentation suiteJavaScript 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.




La syntaxe – structure de contrôlesLe code JavaScript se trouve dans

un fichier ayant pour extension .jsL'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




La syntaxe – Les variables 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.




La syntaxe – Les fonctionsContrairement 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 :




La syntaxe – les chaînes de caractèresUne chaîne de caractères est

délimitée par des guillemets simples ou doubles.

Exemple:




Langage ObjetJavascript 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.




Exemple de création d’objetChien.js

Chien.html




Objet Javascript IntrinsèquesQuatre 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 : StringLes tableaux : ArrayLes objets mathématiques : MathLes dates : Date

Exemple :




Objet - StringPropriété Description

length Longueur de la chaîne de caractères

Méthodes Description

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



http://www.commentcamarche.net/contents/javascript/jsstring.php3


Objet - ArrayPropriété Description

length Nombre d ’éléments du tableau


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



http://www.commentcamarche.net/contents/javascript/jsarray.php3

http://www.commentcamarche.net/contents/javascript/jsarray.php3


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


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 puissanceAutres méthod

es



http://www.commentcamarche.net/contents/javascript/jsmath.php3

http://www.commentcamarche.net/contents/javascript/jsmath.php3


Objet - DateMé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



http://www.commentcamarche.net/contents/javascript/jsdate.php3

http://www.commentcamarche.net/contents/javascript/jsdate.php3


Les objets du navigateurTous 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.




Les objets du navigateurLes objets du navigateur sont

organisés de manière hiérarchique :




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;




Objet – window – Les propriétés

Propriété DescriptiondefaultStatus

Message par défaut affiché dans la barre de statut

status Message affiché dans la barre de statutdocument Document affiché dans la fenêtre

framesCollection de cadres présents dans la fenêtre

historyHistorique des pages visitées précédemment

location Adresse de la page affichéename Nom de la fenêtrenavigator Référence au browser utiliséparent Fenêtre supérieure dans la hiérarchieself Fenêtre en cours




Objet – window – Les méthodes

Propriété Descriptionalert() Affiche une fenêtre d'alerte Javascriptclose() Ferme la fenêtreconfirm() Affiche une fenêtre de confirmationmoveBy() Déplace la fenêtre d'une certaine distancemoveTo() Déplace la fenêtre à un certain endroitopen() Ouvre une nouvelle fenêtreprint() 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




Les événementsL'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)




Utilisation des événementsPour qu'un objet réagisse à un

événement, il faut lui associer une fonction de traitement.

Le fichier mesFonctions.js contient le code suivant :



Introduction à JavaScript Plan Présentation La syntaxe Langage objet Les événements 1JavaScript...

Documents

Transcript of Introduction à JavaScript Plan Présentation La syntaxe Langage objet Les événements 1JavaScript...