1- Bases et introduction à JavaScript
2- Insertion du code JavaScript
3- Utilisation des constantes, variables et opérateurs
4- Contrôler les scripts avec les structures de contrôles
5- Fonctions et évènements
6- Initiation à la Programmation Orienté Objet et JavaScript 7à Les formulaires
8- Les principaux objets JavaScript en détail
Qu'est-ce que le Javascript?
Le Javascript est un langage de script incorporé dans un document HTML.
Historiquement il s'agit même du premier langage de script pour le Web. Ce langage est un langage de programmation qui permet d'apporter des améliorations au langage HTML en permettant d'exécuter des commandes du côté client, c'est-à-dire au niveau du navigateur et non du serveur web.
Javascript est donc une extension du code Html des pages Web. Les scripts, qui s'ajoutent aux balises Html, peuvent en quelque sorte être comparés aux macros d'un traitement de texte.
Ces scripts vont être gérés et exécutés par le browser lui-même sans devoir faire appel aux ressources du serveur. Ces instructions seront donc traitées en direct et surtout sans retard par le navigateur.
Ainsi le langage Javascript est fortement dépendant du navigateur appelant la page web dans laquelle le script est incorporé, mais en contrepartie il ne nécessite pas de compilateur, contrairement au langage Java, avec lequel il a longtemps été confondu.
Javascript a été initialement développé par Netscape et s'appelait alors LiveScript. Adopté à la fin de l'année 1995, par la firme Sun (qui a aussi développé Java), il prit alors son nom de Javascript.
Javascript n'est donc pas propre aux navigateurs de Netscape (bien que cette firme en soit un fervent défenseur). Microsoft l'a d'ailleurs aussi adopté à partir de son Internet Explorer 3. On le retrouve, de façon améliorée, dans Explorer 4.
Les versions de Javascript se sont succédées avec les différentes versions de Netscape :
Javascript pour Netscape 2, Javascript 1.1 pour Netscape 3 et Javascript 1.2 pour Netscape 4. Ce qui n'est pas sans poser certains problèmes de compatibilité, selon le browser utilisé, des pages comportant du code Javascript. Mais consolons nous en constatant qu'avec MSIE 3.0 ou 4.0 et la famille Netscape, une très large majorité d'internautes pourra lire les pages comprenant du Javascript.
L'avenir de Javascript est entre les mains des deux grands navigateurs du Web et en partie lié à la guerre que se livrent Microsoft et Netscape. On s'accorde à prédire un avenir prometteur à ce langage surtout de par son indépendance vis à vis des ressources du serveur.
Il importe de savoir que Javascript est totalement différent de
Java. Bien que les deux soient utilisés pour créer des pages Web évoluées, bien que les deux reprennent le terme Java , nous avons là deux outils informatiques bien différents.
Le Javascript est case sensitive (en français sensible à la casse)
comme en langage C, chaque instruction se termine par un point-virgule (;).
Javascript : Code intégré dans la page Html
Java: Module (applet) distinct de la page Html
Javascript : Code interprété par le browser au moment de l'exécution
Java: Code source compilé avant son exécution
Javascript : Codes de programmation simples
Java : Langage de programmation beaucoup plus complexe Limites et avantage de java script
JavaScript est assez simple à comprendre et il est possible de réaliser rapidement de petits scripts impressionnants. De plus, c'est un langage très riche et qui offre beaucoup de possibilités.
Le principal avantage de Javascript réside dans la sécurité. En effet, les concepteurs ont interdit toutes les opérations qui pouvaient porter atteinte à la sécurité du visiteur. Le vol d'information, la destruction de fichiers sont impossibles.
Ce qui peut paraître une faiblesse : il est impossible de créer un fichier, d'accéder à une base de données en JavaScript
un gros atout : PRATIQUEMENT TOUS LES VISITEURS ACCEPTENT LE JAVASCRIPT.
Le véritable inconvénient de JavaScript est sa compatibilité très limitée entre navigateurs Internet Explorer et Netscape ont parfois des visions très différentes du JavaScript. Cela oblige souvent à coder 2 scripts pour la même action.
Outil de conception:
Les outils permettant d’insérer du code JavaScript sont nombreux cela va du simple logiciel éditeur de texte, comme Word Pad de Windows à l’outil spécifique Aptana Studio, on passant par les éditeurs de code HTML tels Dreamweaver ou Frontpage. Avec les quels il est possible d’insérer des blocs Javascreapt.
Paramétrage:
Rappelle:
Une page HTML se divise en deux grandes parties:
-La partie head dans laquelle se situent les informations correspondant a la description du contenue;
- La partie body ou figure le code permettant la construction Des objets dans la page (Champs de formulaire , zone de texte, image,……).
Un script est une portion de code qui vient s'insérer dans une page HTML.
Le code du script n'est toutefois pas visible dans la fenêtre du navigateur car il est compris entre des balises (ou tags) spécifiques qui signalent au navigateur qu'il s'agit d'un script écrit µ en langage JavaScript.
Les balises annonçant un code Javascript sont les suivantes :
Le code HTML sert généralement de conteneur au bloc d’instruction JavaScript, suite au chargement du code HTML Le navigateur exécute les bloc d’instructions JavaScript.
Type d’exécution du code JavaScript:
-JavaScript Interne. ( Entre deux balise debt /fin)
- JavaScript externe.(Fichier javascreapt en mode .js
1er Programme utilisant JavaScript
script simple qui doit vous saluer en écrivant votre nom à l’écran. N’oublions pas que JavaScript est toujours inséré dans une Page HTML .
Créons une Page HTML ( la plus simple possible , ou presque..!)
Mon 1er Programme en JavaScript
à La balise
Cette possibilité se révèle utile lorsqu'on a des portions de code qui se répètent souvent.
Différents types d'expressions
Nous avons utilisé l'instruction document.write pour afficher une expression écrite entre guillemets. Celles-ci indiquent que ce qu'elles entourent est du code HTML que le navigateur va interpréter. Il est aussi
possible d'utiliser des expressions sans guillemets. Dans ce cas JavaScript va essayer de les interpréter directement avant de les transmettre au navigateur. Les expressions mathématiques permettent de comprendre ce processus.
L'instruction document.write("2+5*3"); provoque l'affichage du texte 2+5*3. Par contre, l'instruction document.write(2+5*3); provoque l'affichage du texte 17. Dans le 1er cas JavaScript a interprété "2+5*3" comme un texte quelconque envoyé sans changement au navigateur. Dans le 2ème cas JavaScript a interptété 2+5*3 comme un calcul à effectuer, c'est le résultat de ce calcul qui a été envoyé au navigateur.
Pour programmer on est souvent amené à utiliser un autre type d'expression appelé expression booléenne. Celle-ci ne peut prendre que deux valeurs, true (vrai) ou false (faux) Insérez le script suivant et observez:
document.write("5*4=12 ?? "); document.write(5*4==12); document.write("5*4=20?? "); document.write(5*4==20);
l'instruction document.write permet d'afficher différents types d'expressions :
des chaînes de caractères : elles sont écrites entre guillemets et transmises directement au navigateur des expressions mathématiques : ce sont des calculs numériques, c'est le résultat qui est transmis au navigateur des expressions booléennes : ce sont des expressions dont la valeur est true ou false
L'instruction document.write() peut contenir plusieurs arguments qui seront affichés les uns derrière les autres.
Lisibilité du code
Il est très important d'avoir un code lisible : ça permet de s'y retrouver, et donc d'éviter bon nombre d'erreurs.
De plus, si vous commettez une erreur il est beaucoup plus facile de la localiser dans un code bien organisé que dans un code illisible .C'est donc un point à ne pas négliger...
Les commentaires:
Il existe deux manières d'écrire des commentaires en JS : en fin de ligne, après // n'importe o๠(peut s'étendre sur plusieurs lignes), entre /* et */.
Remarque:
Leur rôle est de rendre la page plus facilement lisible. Mais noyer le code entre des commentaires n'est pas forcément mieux que de ne pas le commenter.
Il faut donc qu'ils soient clairs, et utilisés là o๠ils sont nécessaires.
On utilise des variables pour inscrire des informations dans la mémoire de l'ordinateur et pouvoir facilement les retrouver et les modifier (les faire "varier"). Chaque variable est donc caractérisée par un nom qui permet de la désigner et par un contenu qui est ce qui est inscrit dans la mémoire.
On peut classer les variables selon le type de leur contenu :
chaîne de caractères à valeur numérique
à valeur booléenne
à objet
Pour utiliser une variable, il est conseillé de la déclarer et de lui donner un contenu initial. Cela se fait en utilisant le mot var et le signe =.
Par exemple :
var v1=« karim "; La variable nommée v1 contient la chaîne de caractères « karim". var v2=13; La variable nommée v2 contient la valeur numérique 13.
var v3=true; La variable nommée v3 contient la valeur booléenne true.
à Nous verrons plus tard comment utiliser des variables contenant des objets.
Lorsqu'une variable est interprétée dans une instruction JavaScript, elle est automatiquement remplacée par son contenu. Ainsi, l'instruction document.write(v1) provoquera l'affichage du mot karim. Attention, l'instruction document.write("v1") provoquera l'affichage du mot v1 et non Henri entre guillemets, dans ce cas JavaScript considère qu'il faut afficher une chaîne de caratères et n'essaie pas d'interpréter son contenu.
Opérations sur les variables
Les variables numériques peuvent être utilisées dans des expressions mathématiques faisant intervenir les quatre opérations élémentaires.
Les variables contenant des chaînes de caractères peuvent être ajoutées, cette opération se nomme la concaténation, elle consiste à construire une nouvelle chaîne de caractères en en assemblant deux. Ainsi, si v1="bonjour " et v2= "karim ", alors v1+v2 est la chaîne de caractères contenant "bonjour karim".
Les variables booléennes peuvent être combinées à l'aide des opérations logiques non, et, ou respectivement notées !, &&, ||.
Inserez le script suivant et observez:
Il arrive souvent que l'on doive interpréter une chaîne de caractères (par exemple une saisie de l'utilisateur) comme étant une valeur numérique. JavaScript permet de réaliser cette opération avec la fonction eval.
Observons l'effet du script suivant.
La fonction eval de JavaScript est très puissante, elle permet aussi d'évaluer des chaînes de caractères contenant des opérations. Par exemple eval("12à8") fournira 4 comme résultat.
Il arrive souvent que le contenu d'une variable doive être choisi par l'utilisateur du programme, et non par le programmeur. La fonction prompt() fournit une façon de réaliser cette opération avec JavaScript. Elle attend en paramètre deux chaînes de caractères: la première servira de message d'invite et la seconde de réponse proposée par défaut.
Mon premier programme en js
Exercice 1:
Calculette
Utiliser les fonctions eval et prompt pour écrire une petite calculatrice.
l>
Ma calculette JavaScript
null = null
Affichage du resultat d’une adition de deux variable dans une boite de dialogue:
Mon premier programme en js
Exercice 2:
Affichez le résultat d’un calcul de cout du trajet d’un véhicule.
L’utilisateur doit renseigner plusieurs boites de dialogue
La marque
Le cout du litre de carburant Le kilométrage du véhicule
En utilisant la formule suivante:
cout_total=nb_kilometres/100*consommation*prix_litre;
En utilisant les fonctions
Prompt et alert
