• Aucun résultat trouvé

[DOC] Cours Initiation à JavaScript

N/A
N/A
Protected

Academic year: 2021

Partager "[DOC] Cours Initiation à JavaScript"

Copied!
16
0
0

Texte intégral

(1)
(2)

Sommaire

Introduction

Premiers constituants de base commentaire alert() Les constantes Les variables Opérateur de concaténation Opérateur arithmétiques L'opérateur d'affectation L'opérateur de séparation Vos propres fonctions L'objet document Propriété write Propriété title Propriété alinkColor Propriété vlinkColor Propriété linkColor Propriété URL Propriété referrer Propriété lastModified Propriété images[] Propriété forms[] Propriété applets[] Propriété links[]

(3)

Introduction

Ces leçons vous servirons à apprendre le langage internet Java Script qui n'a rien à voir avec le langage Java . Pour apprendre ce langage vous devez déjà connaître le langage HTML car les scripts Java Script s'incorporent dans des pages HTML . Ce langage ne sera pas traité dans son intégralité car il y a beaucoup de fonctions et seules les plus utilisées et les plus importantes seront traitées . Ce langage peut être intéressant car au lieu de faire travailler vos serveurs qui hébergent vos pages web pour manipuler des données (vérification de formulaires par exemple), certaines actions peuvent être directement traiter depuis l'ordinateur des internautes pour ainsi éviter de trop ralentir la vitesse de vos serveurs . Le Java Script permet également de créer des actions propres à ce langage .Si vous connaissez d'autres langages comme le PHP ou le C++, ce langage ne devrait pas trop être difficile à apprendre car ils sont assez proches malgré tout. Bon apprentissage ! Ah, une dernière chose à préciser c'est que tous les scripts sont écrit et tester sous Internet Explorer 6 alors tout ce que nous verrons ne marchera pas forcement sur tous les navigateurs internet. Je vous laisserais le soin de tester vous-même toutes les différences avec les autres navigateurs (surtout Opéra mais aussi Netscape) .

Premier constituants de base :

Dans ce premier vrai chapitre nous allons traiter quelques exemples pour voir comment les scripts Java Script s'insèrent dans des pages HTML, car comme vous le savez le Java Script "travaille" avec le HTML sur vos pages web. Nous verrons des éléments de base comme les commentaires, les variables, les constantes, quelques opérateurs, la fonction alert(), comment créer vos propres fonctions ou l'objet document.

Tout ces éléments seront détaillés plus loin lorsque l'on parlera d'eux plus en profondeur. Mais entrons directement dans le plus vif du sujet.

Les commentaires

:

Il peut paraître étrange de commencer par les commentaires pour des leçons tel qu'elles soient mais c'est un élément important pour apprendre, car voir des scripts détaillés avec des commentaires est un bon moyen pour se perfectionner dans un langage.

(4)

Il y a deux types de commentaire en Java Script qui sont identiques à ceux du célèbre langage C/C++ :

 les commentaires sur une ligne :

//voici un commentaire sur une ligne

 ou alors les commentaires sur plusieurs lignes :

/* voici un commentaire multilignes */

Premier script Java Script avec la fonction alert() :

Ce premier script a pour but de vous entrer directement dans le langage avec un exemple concret. La fonction alert() a pour but d'afficher un message dans une fenêtre spécial du browser ( navigateur internet ) où vous devrez cliquez sur ok pour la fermer . Regardez la première image çi-dessous pour voir qu'elle type de fenêtre donc je parle.

<HTML> <HEAD>

<TITLE>Exemple n°001, alert()</TITLE> <SCRIPT LANGUAGE="JavaScript">

alert("Voici à quoi sert la fonction alert()") </SCRIPT>

</HEAD> <BODY>

Regarder c'est une page HTML ! </BODY>

</HTML>

Le script çi-dessous est une simple page HTML avec 3 lignes en plus qui représentent un script Java Script . Il y a deux balises qui délimitent le script, ce sont : <SCRIPT

LANGUAGE="JavaScript"> et </SCRIPT> .

Tout ce qu'il y a entre ces deux balises c'est le script lui-même. Dans ce script il y a juste une fonction, cette fonction est la fonction alert qui a des parenthèses juste après et entre celle-çi, c'est une chaîne de caractères qui est elle-même entre guillemets. C'est cette chaîne

(5)

de caractères qui sera affiché dans la nouvelle fenêtre . Regardez bien l'endroit où est placé le script Java Script, à cette endroit il sera traiter en tout premier par le navigateur comme montré ci-dessous et ainsi le contenu de la page elle-même sera affiché après que vous ayez cliquez sur ok dans la nouvelle fenêtre.

Regardez maintenant ce script où le script Java Script a été déplacé dans la page pour ainsi d'abord afficher le contenu de la page puis la nouvelle fenêtre :

<HTML> <HEAD>

<TITLE>Exemple n°002, alert()</TITLE> </HEAD>

<BODY>

Regarder c'est une page HTML

<SCRIPT LANGUAGE="JavaScript"> alert("Voici à quoi sert la fonction alert()") </SCRIPT>

</BODY> </HTML>

(6)

Voici ce que ça donne dans une fenêtre Internet Explorer :

Les constantes :

Il y a trois "gros" types de constantes : les constantes numérique, les constantes chaînes de caractères, les constantes booléennes . Elles se déclarent toutes avec un nom et un opérateur d'affectation (=), nous verrons certains opérateurs dans la section suivant.

Ces constantes servent a affiché leur contenu avec leur nom comme démontré dans l'exemple ci-dessous.

L'opérateur + est un opérateur de concaténation qui sert à concaténer en une chaîne de caractères ce qu'il y a dans la fonctionalert(), nous verrons cette opérateur juste un peu plus loin. Voici le script :

<HTML> <HEAD>

<TITLE>Exemple n°003, alert()</TITLE> </HEAD>

<BODY>

Regarder c'est une page HTML

<SCRIPT LANGUAGE="JavaScript"> nom = "Matthieu"

age = 25 lo = true

alert("Je m'appelle "+nom+", j'ai "+age+" ans et c'est "+lo+" !") </SCRIPT>

</BODY> </HTML>

(7)

Les constantes numériques peuvent être servis pour faire des calculs comme leurs noms l'indiquent, en ajoutant 0x devant ce chiffre, on fait référence à un nombre en hexadécimal ou si on ajoute juste 0 devant ce nombre, on fait référence à un nombre octale . Les constantes chaînes de caractères servent pour traiter, afficher des chaînes de caractères et elles sont placées entre guillemets (") ou guillemet simple ('), le dernier cas si la chaîne de caractères doit contenir le caractère guillemet, enfin si vous voulez insérer un caractère guillemet, ou retour à la ligne mettez le caractère \ devant (exemple : \" ou \n pour le caractère retour à la ligne. Il y a enfin les constantes booléennes qui ne peuvent prendre que deux valeurs : true (vrai) ou false (faux), elles ne sont pas fréquemment utilisées sous cette forme, mais nous en reparlerons. Voici ce que donne le script çi-dessous :

Les variables :

Une variable, c'est un élément qui est désigné par un nom, un peu comme une constante mais elle peut être modifié, en gros elle peut prendre différentes valeurs. Le nom d'une variable peut se composer de caractères de lettres de l'alphabet, de a a z ou de Aa Z ou bien de chiffre, de 0 a 9 . Une variable se déclare avec le mot-clé var juste avant son nom . Un nom de variable ne peut commencer que par une lettre de l'alphabet et ne peut avoir le même nom qu'un mot clé du langage Java Script . Voici un exemple d'utilisation de variable :

<HTML> <HEAD>

<TITLE>Exemple n°004, alert()</TITLE> </HEAD>

<BODY>

Regarder c'est une page HTML

<SCRIPT LANGUAGE="JavaScript"> var patate = 25

alert("La variable patate vaut "+patate) patate = patate * 2

alert("Si on multiplie la variable patate par 2 on obtient "+patate) </SCRIPT>

(8)

</BODY> </HTML>

Cette exemple affiche la valeur d'une variable dans une fenêtre alerte puis cette variable est multiplié par 2 et une nouvelle fenêtre alerte est ouverte avec la nouvelle valeur de la variable . Voici ce qui est affiché à la première fenêtre alerte :

Puis voici ce qu'affiche la nouvelle fenêtre alerte après la modification de la variable :

Opérateur de concaténation

:

Comme nous l'avons dit précédemment cette opérateur a pour but de mettre bout à bout différents éléments pour n'en faire que un . En revoyant les exemples précédent la définition de cette opérateur est clair . Cette opérateur est représenté par le caractère + .

Opérateurs arithmétiques :

Ces opérateurs sont de simples opérateurs de calculs avec celui de multiplication (*), d'addition (+), de soustraction (-) et celui de division (/) .Il n'y a rien de spécial à dire sauf pour l'opérateur d'addition qu'il ne faudra pas confondre avec l'opérateur de concaténation mais selon le contexte vous reconnaîtrez largement quel opérateur il s'agit . A ces opérateurs traditionnels on peut ajouter ceux d'incrémentaion (++), de décrémentation (--), de négation

(9)

(-), l'opérateur modulo et les associations d'opérateurs mais voyons les un à un . L'opérateur d'incrémentation sert à ajouter 1 à une variable :

po = 10 ++po

La variable po vaut après cette opérations 11 . Cette opérateur équivaudrait à :

po = po +1

Mais ceci sert à gagner du temps dans l'écriture. L'opérateur de décrémentation à pour effet l'inverse c'est-à-dire qu'il enlève 1 à une variable. L'opérateur de négation sert juste à préciser qu'un nombre est négatif. L'opérateur modulo est représenter par le caractère % et il sert à afficher le reste d'une division entière, voici un exemple

po = 13 po = po%5

Après ces opérations, la variable po est égale à 3 . Les associations d'opérateurs servent eux aussi à gagner du temps et en rapidité, les voici : +=, -=, /=, *= et %=. Par exemple au lieu d'écrire :

po = po + 5

on peut écrire :

po += 5

Le système est identiques pour les autres associations d'opérateurs .

Opérateur d'affectation :

Cette opérateur, que nous avons déjà utiliser pour les variables sert à attribuer une valeur à une variable par exemple si nous mettons :

(10)

nb = 150

nb sera attribué de la valeur 150, mais cela marche aussi pour une chaîne de caractère : cara = "voilà une chaîne de caractères"

L'opérateur de séparation :

Cet opérateur est la virgule, il sert de séparateur de liste. Par exemple vous pouvez déclarer plusieurs variables en mêmes temps ou comme vous le verrais dans la section vos propres fonctions pour séparer les différents arguments d'une fonction. Voici un exemple de déclaration multiple de variables :

var nom = "Kev", age = 25

Vos propres fonctions :

Pour simplifier la lecture et l'écriture de vos scripts Java Script et bien utiliser vos fonctions personnelles. En fait, leur principale but est d'effectuer des tâches qui peuvent être répété en fonction de certaines valeurs ou pas au lieu de répéter du code inutilement . Il y a donc deux parties dans une fonction : sa déclaration et son appel . Voici une déclaration de fonction avec un appel de celle-ci :

<HTML> <HEAD>

<TITLE>Exemple n°005, vos propres fonctions</TITLE> </HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

var votreNom = "Kévin", votreAge = 29, visite = 3 function bienvenue(nom, visite, age)

{

alert("Bonjour, "+nom+" vous avez "+age+" ans et c'est votre visite n°"+visite) }

(11)

bienvenue(votreNom, visite, votreAge) </SCRIPT>

</BODY> </HTML>

Dans cette exemple vous pouvez voir une déclaration de fonction et un appel de celle-ci juste après. Une fonction se déclare avec le mot-clé function puis le nom de cette fonction juste après. Les parenthèses qui suivent sont les arguments de cette fonction, c'est-à-dire les variables dont la fonction a besoin pour être exécuté. Il y a une virgule entre chaque argument. Ainsi chaque variable dans la liste des arguments pourra être utiliser à l'intérieur du champ de la fonction. Le champ de la fonction, parlons-en, c'est le code qu'il y a entre les 2 accolades, ouvrante et fermante . Ce code ne sera exécuté qu'à l'appel de cette fonction. Une fonction peut prendre un nombre d'arguments de 0 à ce que vous voulez. Dans l'exemple ci-dessous, il y a un appel de cette fonction. L'appel de la fonction se fait par son nom, suivit de parenthèses et à l'intérieur de celle-ci les arguments de la fonction . Ce qui se passe en fait ici et dans chaque appel d'une fonction est une suite d'affectation de variable . Une variable de même nom que l'argument d'une fonction peut être passé à cette fonction comme la variable visite. Ici voici ce qui se passe :

nom = votreNom visite = visite age = votreAge

Ainsi voici ce qu'affiche l'exemple numéro 5 :

Une fonction peut faire, contrairement à l'exemple ci-dessous, renvoyer une valeur à l'aide du mot-clé return. Voici un exemple de fonction avec ce mot-clé :

<HTML> <HEAD>

(12)

<TITLE>Exemple n°006, fonctions avec return</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var chiffre = 5 function cube(nombre) { return nombre*nombre*nombre }

alert(chiffre+" au cube est égale à : "+cube(chiffre)+" . Mais chiffre est toujours égalle à : "+chiffre)

</SCRIPT> </BODY> </HTML>

Cette exemple de fonction renvoie le cube d'une variable prit en paramètre . Nous démontrons juste après que la variable de départ n'est nullement modifié. Vous pouvez voir aussi que la fonction peut être appeler un peu n'importe où dans un script Java Script. Voici ce qu'affiche l'exemple numéro 6 :

L'objet document :

Mais que signifie ce terme ? En fait, l'objet document est le contenu de la page elle-même. Grâce à lui et ses propriétés vous pourrez gérer son contenu. Commençons par la propriété la plus simple : write, elle sert à écrire du texte dans la page HTML elle-même. Comme write fait parti de l'objet document il faudra bien faire un lien entre ces deux mots-clés, et bien ce lien se fait par un point entre les deux mais pour être plus clair, voici un exemple :

(13)

<HTML> <HEAD>

<TITLE>Exemple n°007, L'objet document avec la propriété write</TITLE> </HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

document.write("Voici le contenu de la page HTML elle-même affiché via un script JavaScript !")

</SCRIPT> </BODY> </HTML>

Comme vous pouvez le voir, pour accéder à une propriété de document vous devez suivre un point puis la propriété de cette objet qui est ici write . Cette propriété est un peu comme la fonction alert() car elle est suivie de parenthèses et à l'intérieur de celle-ci il y a des guillemets qui contiennent ce qui doit être affiché à l'intérieur de la page web . On peut ajouter à l'intérieur, l'opérateur de concaténation ou des variables ... Voici ce que donne le script ci-dessus :

La propriété title renvoie le titre de la page courante, par exemple le script suivant :

<HTML> <HEAD>

<TITLE>Exemple n°008, L'objet document avec la propriété write et title</TITLE> </HEAD>

<BODY>

(14)

po = document.title document.write(po) </SCRIPT> </BODY> </HTML> va afficher :

Voici un tableau avec d'autres propriétés importantes de l'objet document :

Propriétés action

alinkColor() couleur des liens activés

vlinkColor() couleur des liens visités

linkColor couleur des liens qui ne sont pas encore visités

URL URL du document actif

referrer URL du document qui a appelé le document actif

lastModified date de la dernière modification du document

links[] tableau de toutes les balises <A>

images[] tableau de toutes les balises <IMG>

forms[] tableau de toutes les balises <FORM>

applets[] tableau de toutes les balises <APPLET>

La plupart des propriétés sont facilement compréhensible, sauf peut-être les quatre dernières, elles fonctionnent toutes sur un même système alors nous allons juste en étudier une des quatre propriétés. Celle que nous allons étudier par un exemple est la propriété links[]. Voici l'exemple qui est décortiqué en dessous !

<HTML> <HEAD>

(15)

</HEAD> <BODY>

<A HREF="a.htm">Premier lien</A><BR> <A HREF="b.htm">Second lien</A><BR>

<A HREF="c.htm">Troisième lien</A><BR><BR> <SCRIPT LANGUAGE="JavaScript">

var po0 = document.links[0].href var po1 = document.links[1].href var po2 = document.links[2].href

document.write("Le lien n°1 pointe vers : "+po0+"<BR>") document.write("Le lien n°2 pointe vers : "+po1+"<BR>") document.write("Le lien n°3 pointe vers : "+po2+"<BR><BR>") document.links[2].href = "popo.html"

po0 = document.links[0].href po1 = document.links[1].href po2 = document.links[2].href

document.write("Après l'utilisation de links le lien n°1 pointe vers : "+po0+"<BR>") document.write("Après l'utilisation de links le lien n°2 pointe vers : "+po1+"<BR>") document.write("Après l'utilisation de links le lien n°3 pointe vers : "+po2+"<BR>") </SCRIPT>

</BODY> </HTML>

Cet exemple est beaucoup plus long que ceux d'avant mais cela ne veut pas dire plus compliqué ! Vous pouvez voir dans cette page qu'il y a 3 liens hyper-text classiques, donc rien à dire. Après il y a le script Java Script où 3 variables sont déclarées et initialisées. Parlons de cette initialisation, en fait links[] permet d'accéder aux champs des balises <A> comme vous le savez; le nombre qu'il y a entre les 2 crochets représente la nème balise <A> de la page HTML . Il faut faire attention car 0, représente la première balise <A> de la page HTML, 1 la seconde balise <A> de la page HTML etc . Ainsi dans l'exemple, la variable po0accède à la première balise <A> de la page HTML. Après que cette variable accède à cette balise et bien elle accède au champhref de cette balise qui est le lien pointer par ce lien, où elle s'attribue l'adresse pointer par ce lien. Cette action se fait sur les 3 liens hyper-text et leurs adresses sont affichées ensuite. Jusque là, rien de vraiment très spécial mais après on accède au

(16)

champ href de la 3ème balise <A> pour changer son adresse. On met à jour les 3 variables pour afficher leur contenu et on voit bien que l'une des trois adresse à changer. Voici ce que le script donne :

Références

Documents relatifs

Écrire et tester une fonction de conversion d'un nombre complexe depuis sa forme algébrique vers sa forme exponentielle : ComplexeExp convertir(Complexe

détermine l’ordonnée à l’origine de la fonction. Une maison de la Culture propose 18 spectacles sur une année avec trois formules de tarifs. a) On désigne par x le nombre

Ecrire deux fonctions C, l’une utilisant un algorithme it´eratif, l’autre un algorithme r´ecursif, ´ permettant de calculer, l’entier naturel n ´etant donn´e en entr´ee, la

Pour automatiser cette recherche, souvent utile dans le cas de majoration d’erreur en interpolation ou intégration, il est plus rapide de vérifier la chose suivante :.. On suppose que f

PINEL, Site Mathemitec : http://mathemitec.free.fr/index.php Terminale STG : Cours – Fonction Logarithme népérien (ln) Vous démontrerez la propriété suivante en exercice

Rappelons que l’objectif de ce chapitre est entre autre de pouvoir dresser le tableau de variation d’une fonction sans pour autant connaître sa représentation graphique..

A l'examen clinique de D., le médecin note de nombreuses ecchymoses, aussi bien au niveau des membres qu'au niveau du ventre et du dos.. Le reste de l'examen clinique est

Fonctions déjà connues mais pas utilisées comme telles : périmètre d'un cercle en fonction de son rayon : p(r) = ………..