<SCRIPT LANGUAGE="JavaScript">
<!--
var reponse = prompt("Entrez une ligne de code html ou du texte
pur...","");
//Nous définissons la variable locale reponse,
//et nous mettons la réponse de l'utilisateur grâce à la fonction
prompt.
document.write(reponse);
// fin du script -->
</SCRIPT>
| l
Dans les premiers guillemets, on place la question, puis séparé par
une virgule, la réponse par défaut (ici, il n'y en a pas...)
Go:LIEN
Voilà! Avec un peu d'imagination, vous allez être désormais capable
de faire des scripts peu compliqués, mais qui donnent à l'utilisateur
l'impression d'être important :-D...
La souris est la cible d'une multitude de fonctions. Nous allons
faire un petit topo sur chacune d'elles:
| Evênements: | La (les) cibles | Action à l'origine: | Exemple: |
| OnBlur | Zone texte de formulaire | Dessélection de lacible | LIEN |
| OnClick | Formulaires, liens | Click gauche sur la cible | Exemple |
| OnChange | Zone texte de formulaire | Modif du contenu | LIEN |
| OnFocus | Formulaires | Sélection de la cible | LIEN |
| OnLoad | Tag | Au chargement de la page | LIEN |
| OnMouseOver | Liens | La souris passe sur la cible | Exemple |
| OnMouseOut | Liens | La souris quitte la cible | Exemple |
| OnSubmit | Formulaires | Envoie du formulaire | LIEN |
| OnSelect | Zone texte de formulaire | Sélection de la cible | LIEN |
| OnUnLoad | Tag | Quitte la page | LIEN |
Les formulaires peuvent servir comme panneau d'affichage sur les
pages Web, comme le montre ce petit exemple... LIENPour
y faire appel, dans un script, vous devez déjà avoir un formulaire sur votre
page. Créez donc votre formulaire avec les balises et
définissez un champ de texte:
<form name="toto">
<INPUT TYPE="text" NAME="champ1" SIZE="40" MAXLENGTH="80"VALUE="">
</INPUT>
</form>
| l |
Amusons nous maintenant à "améliorer"
notre dernier script:
<SCRIPT LANGUAGE="JavaScript">
<!--
var reponse = prompt("Entrez une ligne de code html ou du texte
pur...","");
document.toto.champ1.value="reponse";
// fin du script -->
</SCRIPT>
| l |
tout en prenant bien soin d'avoir déclaré le
formulaire avant, comme vu ci-dessus...
Essayer ce script->LIEN
Iy a plein d'applications ce script, mais attention à ne pas trop
empiéter sur l'anonymat des visiteurs de vos pages... C'est vilain
d'espionner!
| >Recupérer une adresse mail |
Ce script utilise les formulaires pour l'espionnage sur le web.
Comme je sais que c'est le genre d'astuces qui branche tous les
webmestres du monde, autant vous la donner de suite ;).
Il y tout de même des restrictions, ce script ne marche
parfaitement qu'avec MSIE, connu pour sa sécurité inviolable :) ... Si
vous visiteurs utilisent netscape, cela ratera à 95% !
De plus, si le navigateur n'a pas de logiciel ou d'intégré mail
bien configuré, le mail sera perdu...
Vous vous demandez peut être à quoi sert ce script alors... Bien
c'est très simple: à continuer votre apprentissage de Javascript...
Allez, si vous êtes sage, je vous dirai la prochaine fois comment faire un
programme Java (tout court) qui envoie un mail! Non, l'espionnage n'est
pas impossible!
Commencez par créer votre formulaire:
<form NAME="trust" ENCTYPE="text/plain"
ACTION="mailto:vous@hote.domaine?subject=Trust" METHOD="POST">
<INPUT TYPE="hidden" NAME="mess" value="">#inf/INPUT#sup
<INPUT TYPE="SUBMIT" NAME="submit" Value="Bonjour (soyons discrets
:-D)">
</form>
| l |
Puis écrivons le script. Il nous faut une variable texte pour
constituer le corps du message, ici juste un "Bonjour!" dénué
d'intérêt...
<SCRIPT LANGUAGE="JavaScript">
<!--
message = "Bonjour!, c'est moi!";
// fin du script -->
</SCRIPT>
| l |
Esuite, donnons cette valeur à l'entrée nommée mess du formulaire
trust...
<SCRIPT LANGUAGE="JavaScript">
<!--
message = "Bonjour!, c'est moi!";
document.trust.mess.value=message;
// fin du script -->
</SCRIPT>
| l |
Enfin, envoyons le message...
<SCRIPT LANGUAGE="JavaScript">
<!--
message = "Bonjour!, c'est moi!";
document.trust.mess.value=message;
document.trust.submit();
// fin du script -->
</SCRIPT>
| l |
Essayer ce script!->LIEN
Commençons par les maths (désolé, je sais que 100% des gens normaux
détestent -comme moi- les Maths, mais ils sont de partout! On est
encerclés!) Il y a cinq opérateurs mathématiques en Javascript.
1.Le plus simple consiste à changer le signe de la variable:
Là, m prend la valeur -4...
2.Puis voilà le premier opérateur dit d'incrémentation:
Là, n prend la valeur 5 et m la valeur 4...
3.Et voilà le second opérateur d'incrémentation:
Là, n prend la valeur 5 et m la valeur 5...
4.Ensuite voilà le premier opérateur décrémentation:
var n = 4;
m = --n;
// c'est m = - -n(deux fois moins l'un à côté de l'autre)...
| l |
Là, n prend la valeur 3 et m la valeur 3...
5.Et voilà le second opérateur d'incrémentation:
var n = 4;
m = n--
// c'est m = n- - (deux fois moins l'un à côté de l'autre)...
| l |
Là, n prend la valeur 3 et m la valeur 4...
Il y a aussi les 4 opérations fondamentales, auxquelles on ajoute
le modulo (%).
var n = 4;
var m = 17;
var c=0;
c = n+m; // c=21
c = n/m; // c= 0,2352941176471
c = n*m; // c=68
c = n-m; // c=-13
c = m%n; // c=1
| l |
Jusque là, rien de terrible, mais c'est dur de programmer sans tous
ça...
Et ensuite, il y a les opérateurs logiques. Ils portent sur des
variable booléenes.
Voici le premier opérateur logique, celui de conjonction. Il
correspond au "and" de la plupart des languages:
(pincemi && pincemoi)
// et vrai seulement si pincemi et pincemoi (AÏE!) sont vrais...
| l |
Vérifie la valeur logique 1 et la valeur logique 2. Les deux
doivent être vraies.
Voici le premier opérateur logique de la disjonction. Il correspond
au "or" de pas mal d'autres languages:
(pincemi || pincemoi)
// et vrai si pincemi ou pincemoi sont vrais...
| l |
Vérifie la valeur logique 1 et la valeur logique 2. Une seule
valeur TRUE est nécessaire.
Enfin, l'opérateur de la négation, qui correspond au "not" des
autres... oui, des autres langages, merci de suivre ;) ...
(!pincemi)
// et vrai seulement si et seulement si pincemi est fausse
| l |
Vérifie une valeur FALSE dans l'opérande.
N'oublions pas l'opérateur de concaténation:
var texte = "Mangez"+ " "+"des"+ " "+"pommes!";
// Ajoute à la queue le leu tout le texte dans la même variable.
| l |
Et bien sûr, il y a les opérateurs de comparaison:
| Opérateur: | Descriptif: |
| Opérande1 == opérande2 | Envoie le résultat TRUE si les opérandes sont égales |
| Opérande1 != opérande2 | Envoie le résultat TRUE si les opérandes sont différentes |
| Opérande1 > opérande2 | Envoie le résultat TRUE si opérande1 est plus grande que opérande2... |
| Opérande1 < opérande2 | Envoie le résultat TRUE si opérande2 est plus grande que opérande1... |
| Opérande1 >= opérande2 | Envoie le résultat TRUE si opérande1 est plus grande que opérande2 ou si elles sont égales... |
| Opérande1 <= opérande2 | Envoie résultat TRUE si opérande2 est plus grande ou égale à opérande1... |
Essayons de taper ce script là: (quel démarrage au quart de tour!)
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Bijour!<br>");
document.write("C ma Page Maison!<br>");
document.write("Bijour!<br>");
document.write("C ma Page Maison!<br>");
document.write("Bijour!<br>");
document.write("C ma Page Maison!<br>");
// fin du script -->
</SCRIPT>
| l |
Essayer ce script!->LIEN
Il va simplement écrire le message "bijour" et "c ma page maison",
trois fois de suite. Mais le code est lourd, non? C'est donc là
qu'interviennent les fonctions.
Ahh! je vois que la dame avec le T-shirt "Free" ne comprend pas...
Ben voilà, une fonction repose sur le même principe que les procédures
dans le Pascal ou Delphi. Vous ne voyez toujours pas? Rien ne vaut un
exemple:
<SCRIPT LANGUAGE="JavaScript">
<!--
function nomdemafonction( )
{
//Les "{" servent à débuter la fonction... (c'est le "begin" des languages Borland)
//commandes effectuées par la fonction
//les "( )" servent à donner des paramètres à une fonction lors
//de son appel. Nous reverrons cette possibilité plus loin...
}
// les "}" terminent la fonction (c'est le "end;" des languages Borland)
// fin du script -->
</SCRIPT>
| l |
Voici un autre exemple -plus concret- de fonction:
<SCRIPT LANGUAGE="JavaScript">
<!--
function hello( )
{
document.write("Saluuuuut, nounou!");
document.write("C ma Page Maison!");
}
// fin du script -->
</SCRIPT>
| l |
Essayer ce script!->LIEN (la fonction sera
appelée par la commande " OnLoad='hello();' ")
Adaptons notre code d'origine avec une fonction:
<SCRIPT LANGUAGE="JavaScript">
<!--
function myFunction()
{
document.write("Bijour!<br>");
document.write("C ma Page Maison!<br>");
}
myFunction();
myFunction();
myFunction();
// fin du script -->
</SCRIPT>
l |
Essayer ce script!->LIEN
Bon, maintenant que les présentations sont faites, ça vous dirait
pas d'un peu mixer tout ce que l'on a appris depuis le début de ce cours?
Non? Ben tant, pis je le fais quand même! ;-)
Je vais vous amener à créer une calculette. Alors, que nous
faut-il?
Un formulaire avec plein de boutons et des fonctions associées,
Des tas de fonctions,
Un clavier. (mais je suppose que vous en possédez déjà un...)
Commençons par mettre en place le formalaire avec les boutons dont
nous avons besoin. Je ne vais pas vous faire le détail, un autre article
de progr@zine traite du code HTML, allez le lire pour plus d'info...
<FORM NAME="CALCUL">
<TABLE noborder>
<TR>
<TD COLSPAN=6 ALIGN="Center">#infINPUT TYPE="TEXT" NAME="ECRAN" SIZE=17
MAXLENGTH=17></TD#sup
</TR>
<TR>
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 7 "#sup#inf/TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 8 "#sup#inf/TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 9 "#sup#inf/TD#sup
</TR>#infTR#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 4 "#sup#inf/TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 5 "#sup#inf/TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 6 "#sup#inf/TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" % "#sup#inf/TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" / "#sup#inf/TD#sup
</TR>#infTR#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 1 "#sup#inf/TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 2 "#sup#inf/TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 3 "#sup#inf/TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" + "#sup#inf/TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" - "#sup#inf/TD#sup
</TR>#infTR#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 0 "#sup#inf/TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" . "#sup#inf/TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" = "#sup#inf/TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" C "#sup#inf/TD#sup
</TR>#infTR#sup
</form>
| l |
Ajoutons les appels aux futures fonctions avec OnClick...
<FORM NAME="CALCUL">
<TABLE noborder>
<TR>
<TD COLSPAN=6 ALIGN="Center">#infINPUT TYPE="TEXT" NAME="ECRAN" SIZE=17
MAXLENGTH=17></TD#sup
</TR>
<TR>
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 7 "
onClick="AddNumber('7');"></TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 8 "
onClick="AddNumber('8');"></TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 9 "
onClick="AddNumber('9');"></TD#sup
</TR>#infTR#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 4 "
onClick="AddNumber('4');"></TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 5 "
onClick="AddNumber('5');"></TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 6 "
onClick="AddNumber('6');"></TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" % "
onClick="AddSign('%');"></TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" / "
onClick="AddSign('/');"></TD#sup
</TR>#infTR#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 1 "
onClick="AddNumber('1');"></TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 2 "
onClick="AddNumber('2');"></TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 3 "
onClick="AddNumber('3');"></TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" + "
onClick="AddSign('+');"></TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" - "
onClick="AddSign('-');"></TD#sup
</TR>#infTR#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" 0 "
onClick="AddNumber('0');"></TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" . "
onClick="AddPoint();"></TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" = "
onClick="Calculate();"></TD#sup
<TD ALIGN="Center">#infINPUT TYPE="BUTTON" VALUE=" C "
onClick="Clear();"></TD#sup
</TR>#infTR#sup
</form>
| l |
Ouf! Reste la partie JavaScript à écrire... Comme ce script n'est
qu'une application des notions déjà vues, je vais vous balancer très
rapidement toutes les fonctions. Les commentaires sont en bleu
J'aime bien le bleu moi... C'est vrai, c'est une couleur reposante,
puis c'est le couleur du ciel et puis... Comment ça vous vous en foutez
!?!
<SCRIPT LANGUAGE="JavaScript">
<!--
var Signs = "*/+-"; //Je défini tous
les signes utilisés
var Nombres = "0123456789"; //Je défini tous les nombres
utilisés
var calcul = "";
var IsSign = false;
var Point = false;
var Done = false;
//Je défini diverses variables pour plus tard...
function AddSign(s) {
if ( (Signs.indexOf(s) != -1) && (IsSign) )
//Vérifie si il n'y a pas déjà un signe
calcul = calcul.substring(0,(calcul.length-1));
//renvoie les caractères de calcul du premier a l'avant
dernier
calcul += s;
Point = false;
Done = false;
IsSign = true;
}
function AddPoint() {
if (!Point) {
Point = true;
calcul +=".";
document.CALCUL.ECRAN.value += ".";
//Écrit dans le cadre de texte
}
}
function AddNumber(n) {
if (IsSign)
document.CALCUL.ECRAN.value = "";
if (Done) {
document.CALCUL.ECRAN.value = "";
calcul = "";
Done = false;
}
document.CALCUL.ECRAN.value += n;
calcul += n;
IsSign = false;
}
function Calculate() {
if (IsSign) {
window.alert("Dites, z'avez pas l'impression d'oublier un truc?");
}
else {
v = eval(calcul);
document.CALCUL.ECRAN.value = v;
calcul = "(" + calcul + ")";
Done = true;
}
}
function Clear() {
document.CALCUL.ECRAN.value = "";
calcul = "";
IsSign = false;
Point = false;
}
// fin du script -->
</SCRIPT>
| l |
Essayer ce script!->LIEN
Dans ce script, j'utilise la commande eval(). Elle permet d'évaluer
dynamiquement le code. Pour être simple, elle interprète ce que l'on lui
donne et ... Bah, un exemple sera plus parlant:
<SCRIPT LANGUAGE="JavaScript">
<!--
document.writeln("15 + 15" +<br> );
document.writeln(eval("15 + 15") + <br> );
// fin du script -->
</SCRIPT>
| l |
Essayer ce script!->LIEN
Comme vous le remarquez, la première ligne renvoie la chaine "15 +
15", alors que dans la seconde, eval interprête les 15 comme des nombres
et le "+" comme un opérateur et nous renvoie la valeur 30.
Vous avez déjà du remarquer que les exemples de cet article
s'ouvrent dans de nouvelles fenêtres, et je pense que celà intéresse de
nombreuses personnes... Je vais vous donner quelques infos sur les fenêtres
dans Javascript...
Tout d'abord, voyons la hiérarchie des objets window:
navigator
window
parent, frames, self, top
location
history
document
forms
éléments de formulaire (checkbox, text, liste...)
links
anchors
| l |
Zoomons un petit moment sur l'objet WINDOW. Il possède une
multitude de méthodes et de propriétés qui lui sont propres, et qui sont
listées ici:
frames : Tableau listant toutes les divisions de la fenêtre du navigateur en cours
length : Nombre de frames présentes
name : Donne le nom de la fenêtre
parent : Cette propriété renvoie à la fenêtre parent
self : Cette propriété renvoie à la fenêtre active
| l |
| >Ses méthodes de modification: |
clear : Efface le contenu de la fenêtre
open : Ouvre une fenêtre de navigateur sur le système client
close : Ferme une fenêtre de navigateur sur le système client
| l |
| >Ses méthodes d' intéraction: |
alert : Ouvre une fenêtre où s'inscrit un message
confirm : Crée une fenêtre modale où l'utilisateur fait un choix.
prompt : Demande à l'utilsateur de répondre à une question
| l |
Pour ouvrir une nouvelle fenêtre du navigateur, on déclare un
nouvel objet window, en lui attribuant un nom, des options (!!pas
d'espace entre elles!!), et l'url de la page à afficher. Par exemple, voici le
code que j'utilise sur cette page:
<SCRIPT LANGUAGE="JavaScript">
<!--
function Win(page)
{
var options = "toolbar=no,location=no,directories=no,status=no,"
+ "menubar=yes,scrollbars=yes,resizable=yes,copyhistory=no,"
+ "width=400,height=150";
Exemple = window.open(page,"Exemple",options);
Exemple.document.close();
}
// fin du script -->
</SCRIPT>
| l |
Essayer ce script!->LIEN
Ouvrir une nouvelle fenêtre est une des fonctionnalités les plus
intéressantes de JavaScript. Vous pouvez aussi bien charger un document
dedans (html, vrml, image...) que créer un nouveau document à l'intérieur
(création dite on-the-fly). Nous allons tout d'abord voir comment ouvrir
une nouvelle fenêtre avec un script.
<SCRIPT LANGUAGE="JavaScript">
<!--
function openWin() {
myWin= open("calc.html");
}
// fin du script -->
</SCRIPT>
| l |
N'oublions pas de créer un bouton pour lancer la fonction...
<form>
<INPUT TYPE="button" VALUE="Ouvrir une fenêtre"
OnClick='openWin();'>
</INPUT>
</form>
| l |
Essayer ce script!->LIEN
Vous pouvez spécifier des options pour votre nouvelle fenêtre,
comme la présence ou non d'une barre de status, des menus, sa taille...
Voici une liste récapitulative des options applicables. Vous ne devez surtout
pas mettre d'espace entre les options! Cliquez sur les options pour avoir
leur signification.
| Options: | Valeurs applicables: |
| directories | yes|no |
| height | nombre de pixels |
| location | yes|no |
| menubar | yes|no |
| resizable | yes|no |
| scrollbars | yes|no |
| status | yes|no |
| toolbar | yes|no |
| width | nombre de pixels |
Vous vez puet-être remarqué qu'il y a trois agurments dans la commande open. Le premier est, nous l'avons vu, l'Url du
document. Le troisième contient les options (SANS ESPACES! j'insiste!). Le deuxième contient le nom de la fenêtre.
<SCRIPT LANGUAGE="JavaScript">
<!--
function Win(page)
{
var options = "toolbar=no,location=no,directories=no,status=no,"
+ "menubar=yes,scrollbars=yes,resizable=yes,copyhistory=no,"
+ "width=400,height=150";
Exemple = window.open(page,"Exemple",options);
Exemple.document.close();
}
// fin du script -->
</SCRIPT>
| l |
Il sera dans ce script possible d'ouvrir un document dans cette fenêtre avec un hyperlien auquel on ajoute l'argument
"target=nomdelacible". Si la fenêtre, ou la division, n'existe pas, elle sera crée. Essayons
<a href="about:mozilla" target="Exemple">#inf/a#sup
, ou encore
<a href="about:logo" target="Exemple">#inf/a#sup, ce qui aura pour effet de créer une fenêtre
de taille maximum si "Exemple" n'existe pas encore...
Enfin, il vous reste un détail à savoir sur les fenêtres: comment les fermer. Ouais, je sais, vous pouvez faire les malins en
double-cliquant en haut à gauche de la fenêtre ou en "killant" le processus de la fenêtre! Moi je vous parle de la fermer en
JavaScript!
Il suffit d'utiliser une des propriétés de l'objet fenêtre, self, et voilà c'est fermé!
<SCRIPT LANGUAGE="JavaScript">
<!--
function Fermela()
{
self.close(); }
// fin du script -->
</SCRIPT>
| l |
Essayer ce script!->LIEN
Contrairement aux autres objet prédéfinis de JavaScript, pour créer une nouvelle instance de date on doit faire appel au
mot clé new. Voici quelques exemples de déclarations:
<SCRIPT LANGUAGE="JavaScript">
<!--
dateDuJour= new Date(); //Laissez les parenthèses vides donnent la date actuelle
madatedenaissance= new Date (80,11,18,09,12,00); //Format année-mois-jour
// fin du script -->
</SCRIPT>
| l |
Comme vous le voyez, la forme de déclaration est new date(liste de paramètres);... Voici la liste des paramètres que vous
pouvez mettre:
une chaine vide //Pour avoir la date actuelle
une chaine au format "Mois Jour, Année Heure: Minute: Secondes" //avec "mois" en anglais (genre July)
une liste de 6 entiers : année, mois, jours, heure, minutes, seconde
une liste de 3 entiers : année, mois, jour
| l |
N'oubliez pas que les heures sont des entiers contenus dans l'intervalle [0;23], que les minutes et les secondes sont des
entiers contenus dans l'intervalle [0;59], que les jours de la semaine sont contenus dans [0 dimanche ; 6 samedi], que les
mois vont de 0 (janvier) à 11 décembre, et que les années gérées par Javascript sont contenues entre 1970 et 2038, avant et
après, rien n'existe plus pour Javascript, vous ne pourrez donc pas connaitre l'age exacte de votre grand mère Ferdinande...
Mais vous allez vous en remettre!
Aller, amusons nous à tester new date ();... et aussi ma date de naissance (notez la bien, c'est un scoop pour votre album
de fan!)
<SCRIPT LANGUAGE="JavaScript">
<!--
dateDuJour= new Date();
alert(dateDuJour);
madatedenaissance= new Date (80,11,18,09,12,00);
alert(madatedenaissance);
// fin du script -->
</SCRIPT>
| l |
Essayer ce script!->LIEN
Maintenant, je vous vous lister TOUTES les méthodes des objet date... Accrochez vous, il y en a un paquet!
| >Ses méthodes pour accéder au contenu: |
getDate : renvoie le jour du mois //madatedenaissance.getDate(); renvoie 18
getDay : renvoie de jour de la semaine //madatedenaissance.getDay(); renvoie 4
getHours : renvoie l'heure de l'objet date //madatedenaissance.getHours(); renvoie 9
getMinutes : renvoie les minutes de l'objet date // madatedenaissance.getMinutes(); renvoie 12
getMonth : renvoie le mois [0;11] de l'objet date // madatedenaissance.getMonth(); renvoie 11
getSeconds : renvoie les secondes [0;11] de l'objet date // madatedenaissance.getSeconds(); renvoie 0
getTime : renvoie le nombre de millisecondes depuis le 1/01/1970 (heure de référence de l'horloge javascript)
getTimezoneOffset : permet d'obtenir la différence en minutes entre l'heure GMT et locale
getYear : renvoie l'année de l'objet date // madatedenaissance.getYear(); renvoie 80
| >Ses méthodes pour initialiser le contenu: |
setDate : affecte un jours du mois à l'objet date en cours
setHours : affecte une heure à l'objet date en cours
setMinutes : affecte un nombre de minutes à l'objet date en cours
setMonth : affecte un mois à l'objet date en cours... // dateDuJour.setMonth(7); nous envoie en plein mois d'Aôut!
Vive la plage (et les bikinis :-D) !!!
setSeconds : affecte un nombre de secondes à l'objet date en cours
setTime : affecte un nombre de millisecondes écoulée depuis la date de référence à l'objet date en cours
setYear : affecte une année à l'objet date en cours
| >Ses méthodes, euh... inclassables ailleurs?: |
parse : ressemble un peu à eval... convertit une chaine de caractères en une variable Date.
// madate.setTime(Date.parse("December 25, 1996")); fixera madate au noël 96
UTC : ressemble un peu à parse... convertit une liste de 3 ou 6 entiers en une variable Date.
// madate.setTime(Date.parse("96,11,25")); fixera madate au noël 96
toGMTString : Convertit une Date à l'horaire GMT
toLocaleString : Convertit une Date à l'horaire local...
Maintant que vous savez tout, on va se faire une petite horloge...
Bon, je fais comme pour la calculette, je vous balance le code, je rajoute quelques commentaires en bleu (vous ai-je déjà
dit que j'aimais le bleu? Oui, ah bon.)... Encore une fois, nous avons vu TOUS les éléments de ce Script
précédement, et vous devriez comprendre sans trop d'efforts...
<SCRIPT LANGUAGE="JavaScript">
<!--
var Mois = new Array(12); //Array(x); déclare un tableau à x entrées
var Jours = new Array(7);
Mois[0] = 'Janvier';
Mois[1] = 'Février';
Mois[2] = 'Mars';
Mois[3] = 'Avril';
Mois[4] = 'Mai';
Mois[5] = 'Juin';
Mois[6] = 'Juillet';
Mois[7] = 'Aout';
Mois[8] = 'Septembre';
Mois[9] = 'Octobre';
Mois[10] = 'Novembre';
Mois[11] = 'Décembre';
Jours[0] = 'Dimanche';
Jours[1] = 'Lundi';
Jours[2] = 'Mardi';
Jours[3] = 'Mercredi';
Jours[4] = 'Jeudi';
Jours[5] = 'Vendredi';
Jours[6] = 'Samedi';
function DateHeure(cible,Fonction) {
this.Target = cible; //this permet de désigner un objet en cours de définition
this.fonction = Fonction + '.Affiche()'; // Nom de l'objet JavaScript
this.timeout = null;
this.Affiche = Affichage;
this.Stop = StopAll;
this.Affiche();
}
function Affichage() {
var out;
var D= new Date();
var H = D.getHours();
var M = D.getMinutes();
var S = D.getSeconds();
var NJ = D.getDay();
var Jo = D.getDate();
var Mo = D.getMonth();
var An = D.getYear();
if (H < 10) {
out = '0' + H + ':';
}
else {
out = H + ':';
}
if (M < 10) {
out = out + '0' + M + ':';
}
else {
out = out + M + ':';
}
if (S < 10) {
out = out + '0' + S;
}
else {
out = out + S;
}
out = out + ' -- ' + Jours[NJ] + ' ' + Jo + ' ' + Mois[Mo] + ' 19' + An;
if (this.Target == "") {
window.status = out;
}
else {
this.Target.value = out;
}
this.timeout = window.setTimeout(this.fonction,1000);
}
// Fonction Arret
function StopAll() {
clearTimeout(this.timeout);
this.timeout = null;
}
// fin du script -->
</SCRIPT>
| l
Pour que ce script fonctionne, on déclare un formulaire qui affichera la date et l'heure:
<form name="JSCLOCK">
<input name="CLOCK" size=40 value="champ 1">
</form>
| l |
Et bien sûr il faut lancer l'horloge, et pour ce coup ci, c'est OnLoad qui convient le mieux. A y être, on va arrêter la fonction
avec OnUnLoad...
<BODY
onLoad = 'LeClock = new DateHeure(document.JSCLOCK.CLOCK,"LeClock");
LeClock2 = new DateHeure("","LeClock2");'
onUnload = 'LeClock.Stop();
LeClock2.Stop();'
>
| l |
Ah! C'est fini! Essayez un peu, pour voir!->LIEN
Je suppose que vous trouvez Javascript de plus en plus amusant... Alors, je suppose aussi que les cookies vous
interressent... Nous allons voir en détail comment en établir un.
Mais tout d'abord quelques règles à connaitre:
1.Un serveur ne peut pas placer plus de 20 cookies par client
2.Un cookies ne doit pas avoir une taille supérieure à 4 Ko
3.Seul le serveur à l'origine d'un cookies peut le mettre à jour et le supprimer
| l |
Pourquoi gérer un cookies? Principalement pour diminuer le nombre de requêtes sur le serveur en donnant le maximum de
boulot à faire au nvigateur client.
Un cookies a 5 attributs:
nomDuCookie
OBLIGATOIRE. Variable donnée pour identifier le cookie. Pas de blanc, de virgule, de points. Sous peine de
mort!
expires
Date au format GMT à laquelle le cookies sera effacé par le navigateur. Sans cet attribut, le cookie et
effacé en fin de session
path
Chemin du document ayant créé le cookie.
domain
Domaine du document ayant créé le cookie.
secure
Doit être inséré si la liasion client-serveur est sécurisée...
| l |
Nous allons écrire un script générant un cookie compteur de passage...
Commençons par écrire une fonction qui va écrire le cookie.
<SCRIPT LANGUAGE="JavaScript">
<!--
function CompterLesPassages();
{
n = Search ("Compteur"); //Nous écrirons la fonction Search() plus loin
n = eval(n) + 1;
alert ('Vous avez déjà chargé '+ n +' fois cette page!');
document.cookies = "Compteur" + n;
}
// fin du script -->
</SCRIPT>
| l |
Maintant nous allons écrire la fonction Search(); qui renvoie la valeur du cookie placé en argument, ou zéro si il n'existe
pas...
<SCRIPT LANGUAGE="JavaScript">
<!--
function CompterLesPassages();
{
mort = new Date(99,00,01); //Date d'expiration (1/01/99)
n = Search ("Compteur"); //Nous écrirons la fonction Search() plus loin
n = eval(n) + 1;
alert ('Vous avez déjà chargé '+ n +' fois cette page!');
document.cookies = "Compteur" + n + " ;expires=" + mort.toLocaleString();
}
function Search (unArgument) {
var chaine = document.cookie ; //Affectons document.cookie à la chaine chaine
unArgument = unArgument + "=";
var longueur = unArgument.length ;
var result; //Permet de renvoyer le résultat de la recherche
if(chaine.length > 0) {
debut = chaine.indexOf( unArgument , 0 ); //Permet de conserver l'indice de départ de la sous-chaine recherchée
if (debut >= 0)
{
fin = chaine.indexOf( ";" , debut+longueur ); //Permet de conserver le point virgule qui suit le cookie. Deux cas:
// Celui que l'on veut est le dernier de chaine, alors il n'y a plus de point virgule,
// soit ce n'est pas le cas et un point virgule le sépare du cookie suivant.
if (fin >= 0)
{
result = unescape(chaine.substring(debut+longueur,fin));
}
else result = unescape(chaine.substring(debut+longueur,chaine.length));
}
else result = 0;
}
else result = 0;
return result;
}
// fin du script -->
</SCRIPT>
| l |
Et enfin, nous faisons lancer la fonction CompterLesPassages() au lancement de la page. Ah! C'est fini! Essayez, pour voir!
Le mien est encore plus beau... T'es zaloux, hein?
Voilà, c'est fini pour ce numéro de Progr@zine. Alors, vous travaillez ça chez vous pour la prochaine fois. Sous peine de
mort!
Jiphy alias Jiphy
Pour tout problème de compréhension: n'hésitez pas à m'écrire (et attendez pendant une semaine la
réponse...)
Si vous vous aimez les Cranberries, venez sur ma page
Ce document est la propriété de jiphy.
La rédaction ainsi que l'auteur déclinent toutes résponsabilité vis-â-vis des conséquences que pourrait
entrainer le contenu de cet article. |
|
