Intégrer un code javascript à une page blanche

Version imprimable

Bonjour

Je viens d'apprendre le html et j'attaque le javascript...

C'est mon premier message dans la communauté :D

Je suis le débutant de base, tout en bas de l'échelle. :mouarf:

Je souhaite intégrer un code javascript à une page blanche pour y intégrer la date et l'heure.

Suffit-il de coller le code entre les balises "body" ? :roll:

Je viens d'essayer ce code qui affiche l'heure et la date mais l'année m'indique 109 au lieu de 2009 et je cherche à savoir pourquoi :calim2:

Voici le code que j'ai essayé sur Firefox 3.5.1
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <script type="text/javascript" language="JavaScript">  </script>

Bonjour,

Tout d'abord, cela marchera, en copiant ce code dans la balise HEAD de ton html. Voir code ci-dessous :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
<script type="text/javascript" language="JavaScript">
<!--
var d = new Date()
var j = d.getDate()
var m = d.getMonth()+1
var y = 00+d.getYear()
y = 1900 + y
if(document.layers){y=1900+d.getYear();}
var h = d.getHours()
var mn = d.getMinutes()
var mois,jour;
if (m == 1) mois = " janvier";
else if (m == 2) mois = " f&eacute;vrier";
else if (m == 3) mois = " mars";
else if (m == 4) mois = " avril";
else if (m == 5) mois = " mai";
else if (m == 6) mois = " juin";
else if (m == 7) mois = " juillet";
else if (m == 8) mois = " ao&ucirc;t";
else if (m == 9) mois = " septembre";
else if (m == 10) mois = " octobre";
else if (m == 11) mois = " novembre";
else if (m == 12) mois = " d&eacute;cembre";
if (j == 1) jour = "1er"
else jour = j;
document.write("<br>Bienvenue sur Deblokez.com !")
document.write("<br>" + jour + " " + mois + " " + y +".")
document.write("<br>" + h)
if (h < 2)
document.write(" heure ")
else document.write(" heures ")
document.write(mn)
if (mn < 2)
document.write(" minute.")
else document.write(" minutes.")
//-->
</script>
</head>
<body>
</body>
</html>

Tu peux également référencer tes fichiers jscript dans la balise HEAD de ton html. Ce fichier jscript contiendrait les fonctions que tu appelerais depuis ton html. Pour ton code, depuis le onLoad de la page par exemple.

Code:

1
2
3
4
5
6
7
<HEAD>
      <TITLE>mon test</TITLE>
      <script language="javascript" src="test.js"></script>
</HEAD>

<BODY>
...

Concernant ta seconde question, je pense que l'année commence en 1900, il te faut donc juste ajouter à ton résultat, la valeur 1900, pour obtenir l'année effective.

Cordialement,
A.

03/08/2009, 10h31
Auteur

bonjour,

La fonction getYear() retourne l'année sur 2 ou 4 chiffres selon le navigateur.
Donc à la place de getYear(), utilise getFullYear() qui retourne toujours l'année sur 4 chiffres. ;)

Puis comme tu es débutant, j'en profite pour déjà te donner un bon conseil :
oublie document.write() !!! :mrgreen:

Utilise les fonction DOM : certes c'est plus délicat à gérer que document.write() mais au moins tu n'auras pas de mauvaises surprises ;)

Bienvenue à toi ^^

Puisque tu parles de débuter en javascript, j'en profite pour attirer ton attention sur une pratique qui est considérée par la plupart des développeurs comme une "mauvaise" pratique : le document.write (mauvaise car elle cause différents problèmes, maintenant bien connus et documentés). Il vaut mieux utiliser le DOM : créer un noeud de texte et le greffer à un élément de ta page.

Exemple :
Code:

1 2 3 4 document.write("Bienvenue sur Deblokez.com !") // se remplace avantageusement par document.getElementById("idDeTonElementPourAfficher").appendChild(document.createTextNode("Bienvenue sur Deblokez.com !"));
...mais ça n'a pas grande importance ici, c'était juste une remarque... ;)

Bon dev à toi

07/08/2009, 22h57
Newbie49

Bonjour,

merci pour vos généreuses réponses...

dans un premier temps je souhaite savoir pourquoi mon code n'a pas fonctionné, alors que le code de AGAMITSUDO fonctionne.

il y a une erreur quelquepart dans mon code ?

ensuite j'aimerai bien savoir où insérer le getFullYear() dont me parle AUTEUR
et pourquoi ne pas utiliser document.write ? ou trouver de la documentation pour les débutants qui veulent apprendre les DOM ?

j'aimerai partir sur de bonnes bases dans mon apprentissage, prendre le train en route, avec toutes ses reformes intéressantes histoire de ne pas apprendre de choses inutiles ou obsolètes.

Merci à toi aussi RomainValeri et même question que pour AUTEUR:
Ou apprendre les fonctions DOM à utiliser de préférence ?

Désolé j'ai mis du temps à répondre, je répondrai plus vite à l'avenir...
08/08/2009, 01h24
RomainVALERI

Citation:

Envoyé par Newbie49

j'aimerai bien savoir où insérer le getFullYear() dont me parle AUTEUR

à la place de getYear dans ton code actuel

Citation:

Envoyé par Newbie49

ou trouver de la documentation pour les débutants qui veulent apprendre les DOM ?
...
j'aimerai partir sur de bonnes bases dans mon apprentissage, prendre le train en route, avec toutes ses reformes intéressantes histoire de ne pas apprendre de choses inutiles ou obsolètes.

Merci à toi aussi RomainValeri et même question que pour AUTEUR:
Ou apprendre les fonctions DOM à utiliser de préférence ?

je te conseille de commencer par les tutoriels de developpez.com : ils sont vraiment d'excellente qualité (dans ton cas, en commençant par html, puis javascript et css, et après tout est possible ! :mrgreen:

Citation:

Envoyé par Newbie49

Désolé j'ai mis du temps à répondre, je répondrai plus vite à l'avenir...

Pas de problème, d'ailleurs c'est bien l'intérêt des forums : l'asynchronicité ^^
08/08/2009, 02h31
Newbie49

Ok je vais m'atteler aux tutoriaux developpez.com

mais dites-moi avant M. Romainvale:mrgreen:

les scripts javascript se place toujours entre les balises head dans le code html, jamais entre les balises body ?
08/08/2009, 10h24
Auteur

Citation:

Envoyé par Newbie49

Ok je vais m'atteler aux tutoriaux developpez.com

mais dites-moi avant M. Romainvale:mrgreen:

les scripts javascript se place toujours entre les balises head dans le code html, jamais entre les balises body ?

vaut mieux les placer entre les balises head. HTML et JS étant deux langages différents, autant les séparer.

Pour le HTML :
http://j-willette.developpez.com/tut...bases-du-html/
Pour javascript :
http://javascript.developpez.com/cours/
Pour le DOM tu as ce tuto :
http://sergep.developpez.com/tutorie...n/?page=page_5

Pour document.write() voilà un exemple qui va te faire devenir dingue :mrgreen:
http://www.developpez.net/forums/d73...x/#post4277695
08/08/2009, 18h34
Newbie49

Merci pour tous ces liens AUTEUR tu m'as habillé pour l'hiver :mouarf:

Mais dis moi si je veux que par exemple un script javascript indiquant la date et l'heure soit a tel endroit de mon choix dans la page html, il faudra bien que je mette ce code dans le body de la page ?

J'ai pas bien compris l'histoire de mettre le javascript dans le head pour le séparer de l'html, tu peux me donner un chouïa + de précision ?
08/08/2009, 18h40
Newbie49

J'ai remplacé getYear par getFullYear et à la place d'avoir l'année 2009 j'ai l'année 3909 !!! :D

Je comprends pas les erreurs dans ce scripts pour avoir la date et l'heure, quelqu'un peut me le corriger ou me dire ce qui ne vas pas ?

De plus l'heure reste fixe, et il faut actualiser la page pour changer les minutes, cela n'est pas normal non plus ?

Merci encore pour votre aide, en parrallèle j'attaque les tutoriaux...
08/08/2009, 20h09
Auteur
Citation:

Envoyé par Newbie49

J'ai remplacé getYear par getFullYear et à la place d'avoir l'année 2009 j'ai l'année 3909 !!! :D

:bebe: ralalalalala jeune padawan :mrgreen:

j'ai écrit :

Citation:

Donc à la place de getYear(), utilise getFullYear() qui retourne toujours l'année sur 4 chiffres.

ensuite regarde ton code :
Code:

1 2 3 var y = 00+d.getYear() y = 1900 + y if(document.layers){y=1900+d.getYear();}
il n'y a pas un y=y+1900 qui se balade par hasard ?? :mrgreen:

donc remplace ces 3 lignes de code par :

Code:

var y = d.getFullYear();

et là, tu verras ça marchera beaucoup mieux :D

Citation:

Envoyé par Newbie49

De plus l'heure reste fixe, et il faut actualiser la page pour changer les minutes, cela n'est pas normal non plus ?

Si c'est normal ;) Tu n'as exécuté ce script qu'une seule fois :D
09/08/2009, 01h46
RomainVALERI

Citation:

Envoyé par Newbie49

Mais dis moi si je veux que par exemple un script javascript indiquant la date et l'heure soit a tel endroit de mon choix dans la page html, il faudra bien que je mette ce code dans le body de la page ?

J'ai pas bien compris l'histoire de mettre le javascript dans le head pour le séparer de l'html, tu peux me donner un chouïa + de précision ?

Non : dans le principe effectivement on évite d'inclure du "comportement" (en l'occurrence du javascript) dans le contenu (html). Dans la partie head de ta page, tu décris (entre autres) les ressources utiles pour son affichage, et c'est donc un emplacement tout à fait valide pour mentionner un ou des scripts javascript. Par contre le body ne doit comporter que le contenu : pas de scripts.

Mais alors : comment faire pour "lier" les éléments de la page avec leurs comportements associés ? :? (c'est-à-dire les fonctions liées aux clics, aux survols, à la validation des formulaires, etc.)

>>> si la page ne peut pas aller à javascript, c'est javascript qui ira à la page !!! :mrgreen: (bon, ça, ok, c'est pas clair)
Je veux dire : ton script, lui, va appliquer des "écouteurs d'événement" aux éléments concernés, et le tour est joué ^^
(mais ça sera plus détaillé et pas-à-pas dans les tutoriels, et avec des exemples c'est tellement mieux... ;))
18/08/2009, 02h31
Newbie49

OK

Vaste sujet que le Javascript. :calim2:

Je vais m'atteler aux tutoriaux car je comprends pas tout ce que vous me dites là...

Et oui, Newbie49 ça veut dire ce que ça veut dire :mouarf:

Merci d'avoir essayé de m'expliquer dans tous les cas :ccool:

PS: Le getfullyear nn plus, j'ai rien compris :aie:
18/08/2009, 19h46
Auteur
Citation:

Envoyé par Newbie49

PS: Le getfullyear nn plus, j'ai rien compris :aie:

- getFullYear() retourne toujours l'année sur 4 chiffres

- getYear() retourne l'année sur 2 chiffres ou 4 chiffres selon le navigateur, c'est pour cela que tu ajoutes 1900 à y :
Code:

1 2 3 var y = 00+d.getYear() y = 1900 + y if(document.layers){y=1900+d.getYear();}
il n'y a rien à comprendre :aie: