Cours de Javascript n°1

 

Le javascript est un langage de programmation interprété qui fournis une extension au HTML permettant d'executer des commandes. Ce langage est interprété et executer du coté client, aucune connexion internet n'est necessaire au fonctionnement de ce langage. Ce langage de programmation possède la même syntaxe que le C/C++, les programmateurs dans ce langage ne seront donc pas perdu. On retrouve la même écriture des boucles et conditions. Il faut savoir que cette syntaxe est beaucoup plus souple que celle du C/C++, un oublie en fin de ligne de point-virgule n'entraînnera pas forcément une erreur.

Avant de continuer, je vous invite à prendre connaissance des cours de HTML présent sur le site qui vous permettrons d'avoir les bases de conceptions de page HTML et ainsi vous permettrons d'utiliser au mieux le javascript.

Les seuls programmes qui vous serrons utilise pour suivre ce cours seront : un simple éditeur de texte (comme bloc-note ou Wordpad) et votre navigateur internet (Internet explorer, Mozilla firefox, Netscape...).

Inclure du javascript dans une page HTML :

Pour ajouter du code javascript dans une page HTML nous allons nous servir des balises <SCRIPT></SCRIPT> qui indiquerons au navigateur que ce qui est entre ces balises devra être interprété.On indiquera dans l'option language "javascript" et dans l'otion type "text/javascript" pour des raison de validité XHTML 11.Pour des raison de compatibilité avec le javascript on inserera notre code entre <!-- et //--> . Cette ajout permet aux navigateurs ne supportant pas le javascript d'ignorer le code et ainsi de ne pas bloquer l'accès à la page.

Voici un exemple de javascript dans une page HTML :

Ouvrez votre éditeur de texte et collez ce code sur une nouvelle page, puis enregistrez sous interface.htm. Ouvrez ensuite interface.htm.

Comment ça marche ? C'est simple entrez ce que vous voulez dans le premier champs et cliquez sur le bouton transfert. Et comme par magie le Javascript vous répond la même chose !

Dans cet exemple, le code javascript est insérer entre les balises <HEAD></HEAD> mais vous pouvez l'insérer où bon vous semble.

Vous pourvez aussi inclure du code javascript en provenance d'un fichier *.js. Les fichier *.js peuvent être éditer eux aussi avec un éditeur de texte. il suffira d'enregistrer avec l'extension *.js au lieu de *.txt..

La syntaxe

Le langage de programmation qu'est le JavaScript utilise une syntaxe dont voici les principales écriture . (Syntaxe commune au C/C++)

Chaque instruction se fini par un point virgule ";"

Les opérateurs

Signe
Signification
+
plus
-
moins
*
multiplication
/
division
==
égal à ?
=
devient égal à
!=
different à ?
%
modulo
^
XOR logique
&&
ET logique
||
OU logique
<
inféreur à ?
>
supérier à ?
<=
inférieur ou égal à ?
>=
supérieur ou égal à ?

Les contractions

x++
x=x+1
y=x++
y=x puis x=x+1
y=++x
x=x+1 puis y=x
x--
x=x-1
y=x--
y=x puis x=x-1
y=--x
x=x-1 puis y=x
y+=x
y=y+x
y-=x
y=y-x

La notion d'objet

Le javascript utilise pour dialoguer avec la page HTML des objets. Un objet est un élément de la page classé en hierarchie pour une précision de l'élément visé.

Par exemple dans l'exemple donné plus haut on avait deux objets :

  • L'interface d'entrée : document.interface.input.value.
  • L'interface de sortie : document.interface.output.value

Ces deux objets sont composé ainsi :

document(indique que l'on est sur cette page).interface(indique que l'on parle du formulaire "interface").input(désigne la premiere zone de texte que l'on a nommé input).value(désigne que l'on parle de sa valeur à cette zone de texte)

document(ici aussi on vise la même page).interface(cet objet est aussi sur le formulaire "interface").output(désigne la deuxieme zone de texte que l'on a nommé output).value(désigne que l'on parle de sa valeur à cette zone de texte)

La fonction tranfert() affecte donc la valeur de la zone de texte nommée "input" situer dans le formulaire "interface" qui ce trouve sur la page à la valeur de la zone de texte nommée "output" situer dans le formulaire "interface" qui ce trouve lui aussi sur cette page.

"document" est un objet javascript à part entiere, vous ne pouvez pas changer son nom car il indique à l'interpréteur de quoi on parle. On reviendra par la suite sur cet objet trés intéressant.

L'appel de fonction

Dans l'exemple donné ci-dessus on appelle la fonction tranfert() par l'évément onclick du bouton nommé "bouton" comme ceci :

<INPUT type="BUTTON" name="bouton" onclick="tranfert()" value="Transfert">

On appelle donc les fonctions que l'on créer en javascript par l'intermédiaire du HTML et ici par un bouton qui se trouve dans le formulaire "interface".

Lorsque l'on appelle une fonction on doit préçiser les variables que l'on veux lui fournir entre les parenthéses. Ici nous avons une fonction transfert() où les parenthéses sont vide ce qui veux dire que l'on n'envois pas à la fonction une donnée extérieur à celle ci.

Nous renviendrons plus tard sur ces appels.

Les fonctions comme en C/C++ possède cette syntaxe :

Les instructions sont inclus entre les accolades "{" et "}".

Ceci qui va clore ce premier cours qui n'avait que pour seul but de planter le décor pour les cours suivant.