|
|
|
||
|
|
|||
Techbull.com est hébergé chez Hébergement-web-québec.com
|
|
|
||
|
|
|||
Échange de bannières Québécoises
Chapitre 36 :
JavaScript - IntroductionAlors que Java fut proposé par SUN et ensuite adopté par Netscape 2.0 , Javascript n'est compris que par Netscape et par Internet Explorer V3.0.
A la fin de l'année 1995, Netscape représentait 80% du marché des navigateurs, à la fin de l'année 1996 cette part sera vraisemblablement de 50%, mais sur PC on peut penser que 90% des navigateurs comprendront JavaScript. UNGI ne pouvait pas ne pas mettre son grain de sel dans JavaScript avec un commenttaire à la clé : utilisons JavaScript pour ce qui est simple, Java pour ce qui est simple ou compliqué.
Pour passer des considérations marketing aux considérations techniques, revenons sur le fait que JavaScript est interprété là où Java est compilé. Ceci a plusieurs implications :
Plusieurs lignes peuvent être mises en commentaire si elles sont encadrées par les symboles /* ..*/.
Ajoutons enfin que le langage JavaScript fait la différence entre les majuscules et les minuscules.
JavaScript convertit automatiquement les entiers en chaînes de caractères, ce qui vous permet de concaténer des entiers avec des chaînes de caractères pour donner finalement une chaîne.
Par exemple
y = 50 + "FHT"
La déclaration
var nom = valeur
var chaine = "Bonjour vous!"
Par exemple :
La date est le temps écoulé en milliseconde depuis le 1 er janvier 1970 et la création d'une nouvelle date se fait par une déclaration du type :
Nom = new Date(parametres)
Pour leurs valeurs numériques, les secondes et les minutes vont de 0 à 59, les heures de 0 à 23, les jours de la semaine de 0 à 6; les jours du mois de 1 à 31, les mois de 0 à 11 et les années sont décomptées depuis 1900.
Les noms en minuscule ou en majuscule sont différents.
Exemple : message = ( fin = true ) ? "bonjour" : "au revoir"
+ (adition), - (soustraction) , * (multiplication) , ++ (incrément) , -- (décrément) , / (division), % (modulo), & (ET bit à bit), | (OU bit à bit), ^ (XOR bit à bit), << (décalage de bits vers la gauche), >> (décalage de bits vers la droite),>>> (idem mais en mettant les nouveaux digits à 0), && (ET logique entre deux booléens), || (OU logique entre deux booléens), ! ( négation d'un booléen). Les comparaisons sont faites par les opérateurs :
==, >, >=, <, <=, !=
Les opérateurs peuvent être assignés à l'affectation :
x += 4 équivaut à x = x + 4
Les opérateurs sur les chaînes de caractères :
+ concatène deux chaînes += ajoute la chaîne de droite à la chaîne de gauche. La précédence des opérateurs est celle du langage C à savoir :
Ceci se fait en mettant le caractère & devant l'expression et en la terminant par un ;. L'expression ainsi évaluée peut être mis entre accolades pour s'assurer de la portée des opérateurs.
Par exemple, "&{100*10};" vaudra 1000. Ces expressions évaluées peuvent être utilisées à droite d'un test de condition avec les opérateurs ==, < ou >.
for ([expression initiale]; [condition]; [expression finale]) {
instructions
}
for (var i = 0; i < 255; i++) {
fonction(n)
}
for (var in obj )in {
instructions
}
L'instruction continue termine le bloc en cours pour se positionner sur l'itération suivante.
La partie else qui est optionnelle permer d'effectuer la séquence suivante si la condition est fausse.
Syntaxe
if (condition) {
instructions
} [else {
instructions
}]
if ( prix == 0 ) {
x++
} else {
result = result + prix
}
Syntaxe :
while (condition) {
instructions ;
}
La fonction est définie sous la forme : nom ( param1, param2,...;) { ...}
Il est de bon ton de définir toutes les fonctions à l'intérieur du couple de balises <HEAD> </HEAD>
La fonction sera donc déclarée entre un couple de balise <SCRIPT> </SCRIPT> par un appel du genre nom (param1, param2).
Une fonction peut appeler des arguments de tout type, ainsi que des fonctions et pour les fous de l'algorythmique les fonctions peuvent être appelées récursivement.
Une fonction retourne une valeur quand elle rencontre le mot clé return suivie de la valeur retournée qui peut être de tout type. Les fonctions suivantes permettent de manipuler les chaînes de caractères :
Certains objets sont pré-définis mais vous pouvez créer un arsenal de nouveaux objets dérivés avec leur propres méthodes.
Si un objet se nomme Objet, une propriété de cet objet sera notée Objet.propriete
Une propriété a un type et peut donc être manipulée selon ce type comme le serait un entier ou une chaîne de caractères.
Ainsi femme.jambe designera la (sublime) propriété jambe d'un objet femme (qui n'a rien à voir avec une femme objet).
Les méthodes sont des fonctions qui ont une portée locale sur un objet et non pas génarale sur toute une page HTML.
Une méthode se définit comme une fonction : object.nom = nomfontion
Le mot this comme dans tous les langages orientés objets permet de référencer l'objet courant.
Pour créer un nouvel objet, il suffit de :
function homme(jambe, bras, tete ) {
this.jambe
this.bras
this.tete
}
adam = new homme (1.20,0.70,0.50)
adam.bras = .90
adam.torse=0.70
this.creerHomme = creerFemme ;
homme.creerHomme ()
<SCRIPT LANGAGE="JavaScript"> code </SCRIPT>
Le code placé à l'intérieur d'un couple de balises SCRIPT est évalué après le chargement de la page.
Les fonctions sont définies dans les couples de balises SCRIPT dans la partie entête (HEAD) de la page HTML ou même dans le corps de la page, ce qui n'est cependant pas conseillé.
La balise SCRIPT peut prendre un arguement : LANGAGE="JavaScript1.1" qui indique que le code JAVASCRIPT est de version 1.1, actuellement compris par les version de Netscape 3.x et supérieures.
Pour utiliser dans une page un code JavaScript à la fois compatible 1.0 et 1.1 il suffit de déclarer les procédures deux fois comme le montre l'exemple suivant :
<SCRIPT
LANGUAGE="JavaScript">
code
</SCRIPT>
<SCRIPT
LANGUAGE="JavaScript1.1">
</SCRIPT>
Ceci peut être obtenu également par l'astuce suivante
<SCRIPT
LANGUAGE="JavaScript1.1">
location.replace("URL de
la page HTML version
1.1")
</SCRIPT>
code compatible
1.0
Ceci peut se décliner par des variantes du style
<SCRIPT LANGUAGE="JavaScript">
if
(navigator.userAgent.indexOf("3.0") != -1)
jsVersion =
"1.1" else jsVersion =
"1.0"
</SCRIPT>
La variable jsVersion servira alors tout au long des programmes à établir un code compatible avec la version du navigateur.
Notons que le couple de balises <NOSCRIPT> </NOSCRIPT> permettent d'encadrer le texte qui sera affiché si JavaScript n'est pas compris par le navigateur.
La syntaxe de ces événements est :
<balise eventHandler="code JavaScript">
Par exemple, pour utiliser la fonction exemple quand un utilisateur appuie sur un bouton, l'instruction suivante
<INPUT TYPE=BUTTON VALUE=Essai onClick="exemple(this.form)">
Bien évidemment, il est plus intéressant d'utiliser une procédure, lorsque le code employé est utilisé plusieurs fois.
Voici la liste des événements disponibles, vous pouvez en tester le résultat en exécutant l'action proposée.
Chaque événement est codé sous une des deux formes :
<FORM>
<INPUT VALUE=événement
événement=alert("événement")>
texte explicatif sur l'événement
[mode d'emploi]
</FORM>
<A HREF=#EX événement=alert("événement")>événement</A>Ceci vous montrera une fenêtre d'alarme avec l'évenement ayant provoqué l'action.
<SCRIPT LANGAGE=JavaScript SRC=source.js> </SCRIPT>
Mais cette option, outre le fait qu'elle n'est supportée que par les version 3 de Netscape nécessite que le serveur HTTP, soit configuré avec un type MIME "application/x-javascript" en regard des fichiers d'extension js.
Avec le choix JavaScript vous avez et nous le verrons plus loin, la possibilité de fabriquer du texte HTML, qui ne sera pas forcément bien formaté par le navigateur, il vous faudra pour cela forcer un ré-affichage de la page. Il vous faut savoir également que JavaScript ne produit pas de de documents imprimables jusqu'à la version 3 de Nestcape; gardez cela présent à l'esprit car les pages HTML finissent souvent - et vous savez combien c'est vrai - sur le coin de votre imprimante.
Utilisez les simples quotes dans les portions de code JavaScript, pour réserver les doubles quotes pour les parties purement HTML.
Définissez des fonctions dans la partie entête de votre document.
Le schéma suivant, que l'on retrouve souvent dans la littérature, illustre la hiérarchie de toutes les classes présentes dans le Navigateur :
window | + --parent, frames, self, top | + --location | + --historique | + --document | + --formulaire (FORM) | | | éléments (text fields, textarea, checkbox, password | radio, select, button, submit, reset) + --links | + -- URL
<FORM NAME="nom"> <INPUT TYPE="text" NAME="ungi" onChange="..."> ; </FORM>
La valeur du texte entré est accessible par la valeur document.nom.ungi.value
Le formulaire dans un document est stocké dans un tableau appelé forms, le premier formulaire est noté forms[0], la deuxième est forms[1] etc..
Ainsi la valeur du texte entré qui était document.nom.ungi.value peut être aussi appelé document.form[0].ungi.value.
Ce mécanisme se répète pour tous les éléments comme les radios boutons, les champs texte etc .. L'objet window est un objet important dans le langage JavaScript, il permet l'ouverture et la fermeture de pages dans un nouveau navigateur, d'émettre des fenêtres Popup ou des fenêtres de confirmation.
A l'instar des formulaires rangés en tableau form[], les frames sont rangées dans un tableau frames[0], ... frames[n]. Ainsi la première frame d'une page composée est window.frame[0].
|
|
|---|
|
|
|---|
 |
|
|
Accueil - Techbull.com? - Nous contacter - Ajouter Un bon lien(s) |
|
|
|
| Copyright © 2000 Les Technologies Bulldog |