Scribd
Importer
19 vues15 pages

Introduction à JavaScript

Le document présente JavaScript, un langage de script essentiel pour créer des sites web interactifs, en expliquant ses usages, sa syntaxe, et ses structures de contrôle. Il aborde les concepts de variables, d'opérateurs, de conditions, et de boucles, tout en fournissant des exemples de code. L'accent est mis sur l'importance de JavaScript dans l'amélioration de l'ergonomie des sites web et l'interaction avec les utilisateurs.

Transféré par

ayoubqwert010910
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
19 vues15 pages

Introduction à JavaScript

Le document présente JavaScript, un langage de script essentiel pour créer des sites web interactifs, en expliquant ses usages, sa syntaxe, et ses structures de contrôle. Il aborde les concepts de variables, d'opérateurs, de conditions, et de boucles, tout en fournissant des exemples de code. L'accent est mis sur l'importance de JavaScript dans l'amélioration de l'ergonomie des sites web et l'interaction avec les utilisateurs.

Transféré par

ayoubqwert010910
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Création d'un site web interactif

JavaScript
 C’est quoi le JavaScript ?
Le JavaScript est un langage de script qui offre de nombreuses possibilités. Sa présence croissante
sur le web permet de naviguer sur des sites de plus en plus interactifs et rapides.
Il permet, entre autres, d'introduire sur une page web ou HTML des petites animations ou des
effets. Le langage JavaScript se distingue des langages serveurs par le fait que l'exécution des tâches
est opérée par le navigateur lui-même, sur l'ordinateur de l'utilisateur, et non sur le serveur web. Il
s'active donc généralement sur le poste client plutôt que côté serveur.

 Quels sont les principaux usages de JavaScript ?


Le langage JavaScript est principalement employé pour améliorer l'ergonomie d'un site Internet
et/ou d'une interface applicative utilisateur. Il sert également à :

 Stocker des valeurs utiles dans des variables.


 Faire des opérations sur des chaines de texte.
 Écouter les événements (comme un clic et mouvement de la souris)
 Modifiez le HTML et le CSS de votre page après le chargement de la page
 Bouger les choses sur l'écran de manière interactive.
 Créez des jeux géniaux qui fonctionnent dans le navigateur
 Communiquer des données entre le serveur et le navigateur
 Permet d'interagir avec une webcam, un microphone et d'autres appareils

 Ordre d’exécution du JavaScript !


Quand le navigateur rencontre un bloc de JavaScript, il l’exécute généralement dans l’ordre, de
haut en bas.

 Comment ajouter du JavaScript à votre page ?


Le JavaScript est appliqué à la page HTML un peu comme le CSS. Les éléments <link> permettent
d'appliquer des feuilles de style externes au HTML, le CSS internes utilise l’élément <style>. Pour
le JavaScript il y a une seule façon, avec l’élément <script>.

 JavaScript externe :
Généralement, un script est écrit dans un fichier « .js » à part. Pour exécuter un script
depuis un fichier dans la page web, il suffira d'utiliser <script> avec un
attribut « src » pointant vers le fichier du script en utilisant l'URL du fichier

3ème info STI


Page 1
<script src="chemin/vers/le/[Link]"></script>

 JavaScript interne :
Il est également possible d'insérer du code JavaScript directement dans la
balise <script> sans fournir d'attribut « src » .
Exemple
<script>
[Link]('load', function () {
[Link]('Cette fonction est exécutée une fois
quand la page est chargée.');
});
</script>

Pour éviter des problèmes de chargement sur les pages, il est conseillé de placer les
éléments <script> juste avant la fermeture de l’élément <body>.

 La boîte de dialogue alert()


alert() est une instruction simple, appelée fonction, qui permet
d'afficher une boîtez de dialogue contenant un message. Ce message
est placé entre apostrophes, elles-mêmes placées entre les
parenthèses de la fonction.
 La syntaxe Javascript
La syntaxe du Javascript n'est pas compliquée. De manière générale, les instructions doivent
être séparées par un point-virgule que l'on place à la fin de chaque instruction :

<script> <script>

// la fonction affiche une boîte de


myFunction(); dialogue avec "Bonjour"
</script> </script>

 Les commentaires
<script>
instruction_1; // Ceci est ma première instruction
instruction_2;
/* La troisième instruction ci-dessous,
avec un commentaire sur deux lignes */
instruction_3;
</script>

 Les variables en JavaScript
Une variable consiste en un espace de stockage, qui permet de garder en mémoire tout type
de données. La variable est ensuite utilisée dans les scripts. Une variable contient seulement
des caractères alphanumériques, le $ (dollar) et le _ (underscore) ; elle ne peut pas commencer
3ème info STI
Page 2
par un chiffre ni prendre le nom d'une fonction existante de Javascript. On crée la variable et
on lui affecte (ou attribue) une valeur :

<script> <script>
var myVariable; var myVariable = 2;
ou
myVariable = 2; </script>

</script>

 Les types de variables


Une variable peut être de type numérique, une chaîne de caractères ou booléen.
<script>
var text = 'J\'écris mon texte ici';
/* Avec des apostrophes, le \ sert à échapper une apostrophe
intégrée dans le texte, pour ne pas que Javascript pense
que le texte s'arrête là.*/
</script>

 Les opérateurs arithmétiquesypes de variables


On peut utiliser 5 opérateurs arithmétiques : l'addition (+), la soustraction (-), la multiplication
(*), la division (/) et le modulo (%).
 La concaténation
Une concaténation consiste à ajouter une chaîne de caractères à la fin d'une autre, comme
dans cet exemple :
<script> <script>
var hi = 'Bonjour ', name ='toi', var text = 'Bonjour ';
result; text += 'toi';
result = hi + name; alert(text);
alert(result); // Affiche « Bonjour toi ».
// Affiche : « Bonjour toi » </script>
</script>

On peut convertir un nombre en chaîne de caractères avec l'astuce suivante :


<script>
var text, number1 = 4, number2 = 2;
text = number1 + '' + number2;
/* on ajoute une chaîne de caractères vide entre les
deux nombres pour permettre une concaténation sans
calcul */
alert(text); // Affiche : « 42 »
</script>

3ème info STI


Page 3
 La fonction prompt(), avec concaténation et calcul
La boîte de dialogue prompt() permet d’afficher un message, un champ à remplir (imput de type
texte) et un bouton « OK ». Cette fonction retourne la valeur qui a été entré dans le champ par
l’utilisateur.

<script>
var userName = prompt('Entrez votre prénom :');
alert(userName);
// Affiche le prénom entré par l'utilisateur
</script>

On peut aussi se servir de la fonction prompt() pour un calcul

<script>
var first, second, result;
first = prompt('Entrez le premier chiffre :');
second = prompt('Entrez le second chiffre :');
result = parseInt(first) + parseInt(second);
/* la fonction parseInt()transforme la chaîne de
caractères en nombre */
alert(result);
</script>

 La boîte de dialogue confirm()


La boîte de dialogue confirm() permet d’afficher un message et deux boutons : un bouton
« OK » et un bouton « Annuler ». Cette fonction retourne une valeur booléenne qui vaut
« true » si c’est le bouton OK qui est cliqué et retourne « false » si c’est le bouton
« Annuler » qui est cliqué.

if ( confirm( "Message à afficher" ) ) {

// Code à éxécuter si le l'utilisateur clique sur "OK"

} else {

// Code à éxécuter si l'utilisateur clique sur "Annuler"

3ème info STI


Page 4
Module 1

Création d'un site web interactif


Fiche n°8 JavaScript
Notion de base
 Quels sont les opérateurs de comparaison a utilisés ?
== égal à > supérieur à
!= différent de >= supérieur ou égal à
=== contenu et type de variable égal à < inférieur à
!== contenu ou type de variable différent de <= inférieur ou égal à
<script>
var number1 = 2, number2 = 2, number3 = 4, result ;
result = number1 == number2; /* la variable result
reçoit le résultat de comparaison de contenu de deux
varibales */
alert(result); /* la condition est donc vérifiée car
les deux variables contiennent bien la même valeur*/
result = number1 == number3;
alert(result); // la condition n'est pas vérifiée car
2 est différent de 4
result = number1 < number3;
alert(result); // la condition est vérifiée car 2 est
bien inférieur à 4
</script>

 Quels sont les opérateurs logiques a utilisés ?


 && : qui signifie ET avec par exemple : var1 && var2. Cet opérateur vérifie la condition
lorsque toutes les variables (type booléen) qui lui sont passées valent vrai (true).
 || : qui signifie OU avec par exemple : var1 || var2. Cet opérateur est plus souple car il
renvoie vrai (true) si une variable qui lui est soumise contient vrai (true), qu'importent
les autres variable.
 ! : qui signifie NON avec par exemple : !var .Cet opérateur se différencie des deux
autres car il ne prend qu'une seule valeur à la fois. S'il se nomme « NON » c'est parce
que sa fonction est d'inverser la valeur qui lui est passée, ainsi true deviendra false et
inversement.
Nb : var de type booléen ou un résultat d’une fonction qui renvoie vrai ou faux ou toute
une instruction de comparaison
<script>
var number1 = 2, number2 = 2, number3 = 4, result;
result = (number1 < number2) && (number1==number2);
alert(result);
result = (number1 == number3) || !(number1==number2 );
alert(result);
</script>

Prof Mme D.S 3ème info STI


Page 1
 La structure « if.. else »
La condition if est une structure conditionnelle limitée par définition puisqu’elle ne
nous permet d’exécuter un bloc de code que dans le cas où le résultat d’un test est
évalué à true mais elle ne nous offre aucun support dans le cas contraire.

<script>
var a = 1,b=2; <script>
if (a > b) { if (confirm('Voulez-vous exécuter le
result = 'a est le plus grand'’; code Javascript de cette page ?')) {
} alert('Le code a bien été exécuté !');
alert(result); }
/* La fonction alert n'affiche rien car </script>
la condition non vérifiée*/
</script>

La structure conditionnelle if…else (« si… sinon » en français) va être plus complète que
la condition if puisqu’elle va nous permettre d’exécuter un premier bloc de code si un
test renvoie true ou un autre bloc de code dans le cas contraire.

<script> <script>
var a = 1,b=2; if (confirm('Pour accéder à ce site vous
if (a > b) { devez être une fille, cliquez sur
result = 'a est le plus grand'; "OK" si c\'est le cas.')) {
} alert('Vous allez être redirigé vers le
else site.');
{ }
result = 'b est le plus grand'; else {
} alert("Désolé, vous n'avez pas accès à
alert(result); ce site.");
// la fonction alert affiche "condition }
pas verifiéé" </script>
</script>

La condition if…else if…else (« si…sinon si…sinon ») est une structure conditionnelle


encore plus complète que la condition if…else puisqu’elle va nous permettre cette fois-
ci de générer et de prendre en charge autant de cas que l’on souhaite

<script> <script>
var a = 1,b=2; var etage = parseInt(prompt("Entrez l'étage
if (a > b) { où l'ascenseur doit se rendre (de -2 à 30)
result = 'a est le plus grand'; :"));
} if (etage == 0) {
else if (a<b) alert('Vous vous trouvez déjà au rez-de-
{ chaussée.');
result = 'b est le plus grand'; } else if (-2 <= etage && etage <= 30)
} {
else alert("Direction l'étage n°"+etage+' !');
{ }
result = 'a et b sont egaux'; else {
} alert("L'étage spécifié n'existe pas.");
alert(result); }
// la fonction alert affiche "b le </script>
plus grand"
</script>

Prof Mme D.S 3ème info STI


Page 2
 La structure « switch »
La structure switch commence par évaluer l'expression fournie (cette évaluation ne se produit qu'une fois).
Si une correspondance est trouvée, le programme exécutera les instructions associées. Si plusieurs cas de
figure correspondent, le premier sera sélectionné (même si les cas sont différents les uns des autres).

switch (expression) {
case valeur1: switch (fruit=prompt('donner le nom de
// Instructions à exécuter lorsque le résultat
fruit que vous vouler'))
// de l'expression correspond à valeur1
{
instructions1;
[break;] case "Oranges":
case valeur2: alert ("Oranges : 2 Dt le kilo.");
// Instructions à exécuter lorsque le résultat break;
// de l'expression correspond à valeur2 case "Pommes":
instructions 2; alert("Pommes : 3,5 DT le kilo.");
[break;]
break;
...
case "Bananes":
case valeurN:
// Instructions à exécuter lorsque le résultat case "Cerises":
// de l'expression à valeurN alert ("Bananes et Cerises : 9,5 Dt le
instructionsN; kilo.");
[break;] break;
[default:] default:
// Instructions à exécuter lorsqu'aucune des
alert("Désolé, nous n'avons plus de " +
valeurs
fruit + ".");
} }

 Les ternaires
L'opérateur ternaire conditionnel est le seul opérateur JavaScript qui comporte trois opérandes. Cet
opérateur est fréquemment utilisé comme raccourci pour la déclaration de l’instructions /if...else.

Condition ? exprSiVrai : exprSiFaux

var age=parseInt(prompt('donner votre age'));


age > 19 ? alert('vous etes majeur') :alert('vous n\'etes pas
majeur');

Prof Mme D.S 3ème info STI


Page 3
Module 1

Création d'un site web interactif


Fiche n°9 JavaScript
Les structures répétitives
Une boucle est une structure analogue aux structures conditionnelles sauf qu'ici il s'agit de
répéter une série d'instructions. La répétition se fait jusqu'à ce qu'on dise à la boucle de s'arrêter.
À chaque fois que la boucle se répète on parle d'itération (répétition).
On utilise un itérateur qui modifie la valeur de départ de la boucle à chaque nouveau passage
jusqu’au moment où la condition de sortie est vérifiée. Bien souvent, on incrémentera ou
décrémentera la valeur de départ à l’aide des opérateurs d’incrémentation et décrémentation.

 Les opérateurs d’incrémentation et décrémentation


Les opérations d’incrémentation et de décrémentation vont principalement être utilisées avec les
boucles en JavaScript .L'incrémentation permet d'ajouter une unité à un nombre au moyen d'une
syntaxe courte. À l'inverse, la décrémentation permet de soustraire une unité.

<script> <script>
var nbr = 0; var nbr = 0;
Exemple

nbr = nbr + 1; ++nbr;


alert(nbr) ; alert(nbr) ;
nbr = nbr -1 ; nbr-- ;
alert(nbr) ; alert(nbr) ;
</script> </script>

 La boucle POUR « for »


Une boucle for contient trois « phases » à l’intérieur du couple de parenthèses : une phase
d’initialisation, une phase de test (condition de sortie) et une phase d’itération (généralement une
incrémentation). Chaque phase est séparée des autres par un point-virgule.

<script> <script>
for(initialisation; condition; incrémentation) var i=0;
Exemple
Syntaxe

{ for (i=0;i<=6;i++)
instruction_1; {
instruction_2;
[Link] ("le nbr est:"+ i);
instruction_3;
} }}
</script> </script>

<script>
for (var prenoms = '', prenom; true;) { / *ici sans incrémentation nécessaire
Exemple

mais avec un point-virgule obligatoire après la condition true */


prenom = prompt('Entrez un prénom :');
if (prenom) { prenoms += prenom + ' '; }
else { break; } }
alert(prenoms);
</script>
3ème info STI
Page 1
On peut se servir de l'incrémentation pour compter le nombre de prénoms :
<script>
Exemple for (var i = 0, prenoms = '', prenom; true; i++) {
prenom = prompt('Entrez un prénom :');
if (prenom) { prenoms += prenom + ' '; }
else { break; } }
alert('Il y a ' + i + ' prénoms :\n\n' + prenoms);
// Les \n servent à faire des sauts de ligne
</script>

 La boucle TANT QUE «while »


L'instruction while permet de créer une boucle qui s'exécute tant qu'une condition de test est
vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.

<script> <script>
while (condition) { var nbr = 1;

Exemple
Syntaxe

instruction_1; while (nbr < 10) {


instruction_2;
nbr++;
instruction_3;
}
}
</script> alert(nbr); // Affiche : « 10 »
</script>

<script>
var pseudos = '', pseudo,
continuer=confirm ('vous devez saisir un pseudo ') ;
while (continuer) {
pseudo = prompt('Entrez un pseudo :');
if (pseudo) {
pseudos += pseudo + ' ';
Exemple

/* concatination de nouveau pseudo et un espace avec l'ancienne


valeur pseudos */
} else {
continuer = false;
// Aucun pseudo n'a été saisi, donc la boucle se termine
// On peut utiliser break pour quitter la boucle
}
}
alert(pseudos); // Affiche tous les pseudos
</script>

 La boucle répéter..jusqu’à « do. . while »


L'instruction do...while crée une boucle qui exécute une instruction jusqu'à ce qu'une condition
de test ne soit plus vérifiée. La condition est testée après que l'instruction soit exécutée, le bloc
d'instructions défini dans la boucle est donc exécuté au moins une fois.
<script> <script>
do { var i = 0;
Exemple
Syntaxe

instruction_1;
do {
instruction_2;
instruction_3; i += 1;
} [Link](i);
While (condition) } while (i < 5); // 5 sera afficher
</script> </script>
3ème info STI
Page 2
<script>
let somme = 0;
let nbr = 0;
/* L'instruction let permet de déclarer une variable dont la portée est celle

Exemple
du bloc courant, éventuellement en initialisant sa valeur */
do {
somme += nbr;
nbr = parseInt(prompt('Entrer un nombre: '));
} while(nbr >= 0);
alert('la somme est ' + somme);
</script>

TP
Utilisons la boucle do-while pour développer un jeu de devinettes simple. Le script génère un
entier aléatoire entre 1 et 12. Vous devez deviner le nombre en faisant des suppositions jusqu'à
ce que le nombre que vous choisissez corresponde au nombre choisi par le script.
<script>
// Génération de nombre secret entre deux valeurs MIN et MAX
const MIN = 1;
const MAX = 12;
let nombresecret = [Link]([Link]() * (MAX - MIN + 1)) + MIN;

/* Déclaration et initialisation d'un nombre secret


La fonction [Link](x) renvoie le plus grand entier qui est inférieur ou égal à un
nombre x
La fonction [Link]() renvoie un nombre flottant pseudo-aléatoire compris dans l'intervalle [0, 1[ (ce qui
signifie que 0 est compris dans l'intervalle mais que 1 en est exclu) selon une distribution approximativement
uniforme sur cet intervalle. Ce nombre peut ensuite être multiplié afin de couvrir un autre intervalle */

let supposition = 0; // Enregistrement de nombre de suppositions


let indice = ' '; // Enregistrement d'indice
let nbr = 0;
do {
// Valeur introduite par l'utilisateur
let val = prompt('Svp entrer un nombre entre '+ MIN + ' et '+ MAX +indice);
nbr=parseInt(val);
// Incrémentation de nombre de supposition
supposition++;
// Vérification avec le nombre secret
if (nbr > nombresecret) {
indice = ', plus petit que ' + nbr;
} else if (nbr < nombresecret) {
indice = ', plus grand que ' + nbr;
} else if(nbr == nombresecret) {
alert('Bravo! vous avez réussi après ' + supposition + ' suppositions.');
}
} while (nbr != nombresecret);
</script>

3ème info STI


Page 3
Module 1

Création d'un site web interactif


Fiche n°10 JavaScript
Fonctions et évènements
 C’est qui une fonction?
 Une fonction est un ensemble d'instructions effectuant une tâche ou calculant une valeur.
Afin d'utiliser une fonction, il est nécessaire de l'avoir auparavant définie au sein de la
portée dans laquelle on souhaite l'appeler.
 Il y a les fonctions ou variables natives (déjà existantes), mais on peut aussi en créer de
nouvelles, selon la structure suivante
<Script>
// Le terme "function" est obligatoire pour déclarer une fonction
Syntaxe

function nom_fonction(arguments) {
// Le code que la fonction va devoir exécuter

</Script>

<script>
function Multiplier_par_deux() {
Exemple

var result = parseInt(prompt('Donnez le nombre à multiplier par 2 :'));


alert(result * 2); }
Multiplier_par_deux(); // On appelle la fonction créée
`
alert('Vous avez déjà appelé la fonction une fois !');
Multiplier_par_deux(); // Et appelle de nouveau la fonction </script>

 Les variables locales et globales


Toute variable déclarée dans une fonction n'est utilisable que dans cette même fonction.
Ces variables spécifiques à une seule fonction ont un nom : les variables locales. Déclarées
en dehors des fonctions, on parle de variables globales.
<script>
<script>
var message = 'Ici la variable globale !';
Exemple

function showMsg() {
var message = 'Ici la variable locale !';
alert(message);

showMsg(); // On affiche la variable locale


alert(message); // Puis la variable globale
</script>

 Les arguments
Les paramètres donnés lors de l'appel d'une fonction sont appelés les arguments de la
fonction. Les arguments sont passés par valeur (by value en anglais). Si la fonction modifie
la valeur d'un argument, ce changement ne se répercute pas en dehors de la fonction.

3ème info STI


Page 1
<script>
var message = 'Ici la variable globale !';
function showMsg() {

Exemple
var message = 'Ici la variable locale !';
alert(message);

showMsg(); // On affiche la variable locale


alert(message); // Puis la variable globale
</script>

TP
<!DOCTYPE>
<html lang="fr-FR">
<head>
<title>getElementById example</title>
</head>
<body>
<script>
TP1

function changeColor(newColor) {
var element = [Link]('para');
[Link] = newColor; }
</script>
<p id="para">Paragraphe à colorier</p>
<button onclick="changeColor('blue');">bleu</button>
<button onclick="changeColor('red');">rouge</button>
</body>
</html>

<!DOCTYPE>
<html lang="fr-FR"><head></head>
<body>
<div style="text-align:center">Cliquer sur les boutons dans le bon
ordre.<br>
<input type="button" id="btn1" onClick="ajouter(this)" value="est">
<input type="button" id="btn2" onClick="ajouter(this)" value="soleil">
<input type="button" id="btn3" onClick="ajouter(this)" value="chaud">
<input type="button" id="btn4" onClick="ajouter(this)" value="le"><br>
<input type="text" id="text" size="60" readonly="true" style="background-
color:#FFFFFF; border:#FFFFFF none 0px; text-align:center; color:#006600;
font-weight:bold">
<br><br>
<input type="button" value="Recommencer" onClick="raz()"></div>
<script>
TP2

function ajouter(objet) {
[Link]("text").value+=[Link];
[Link]("text").value+=' ';
[Link]=true;
if ([Link]('text').value == "le soleil est chaud ") {
[Link]('text').value="Le soleil est chaud."
alert('BRAVO !!!');} }
function raz() {
[Link]('text').value="";
[Link]('btn1').disabled=false;
[Link]('btn2').disabled=false;
[Link]('btn3').disabled=false;
[Link]('btn4').disabled=false;
}
</script> </body> </html>

3ème info STI


Page 2
Module 1

Création d'un site web interactif


JavaScript
La gestion du temps
 C’est quoi La gestion du temps?
 Il s'agit en fait, en Javascript, du nombre de millisecondes écoulées depuis le 1er janvier 1970 à
minuit. Cette manière d'enregistrer la date est très fortement inspirée du système d'horodatage
utilisé par les systèmes Unix. La seule différence entre le système Unix et le système du Javascript,
c'est que ce dernier stocke le nombre de millisecondes, tandis que le premier stocke le nombre de
secondes. Dans les deux cas, ce nombre s'appelle un timestamp.

 Ce nombre ne nous sert vraiment qu'à peu de choses à nous, développeurs, car nous allons utiliser
l'objet Date qui va s'occuper de faire tous les calculs nécessaires pour obtenir la date ou l'heure à
partir de n'importe quel timestamp.

 L'objet Date ?
L'objet Date nous fournit un grand nombre de méthodes pour lire ou écrire une date.
 Le constructeur : Commençons par le constructeur ! Ce dernier prend en paramètre de
nombreux arguments et s'utilise de différentes manières. Voici les quatre manières de l'utiliser :

Instancie un objet Date dont la date est fixée à


new Date( ) ;
celle de l'instant même de l'instanciation.
Permet de spécifier le timestamp à utiliser pour
new Date( timestamp );
notre instanciation.
Prend une chaîne de caractères qui doit être
new Date(dateString);
interprétable par la méthode parse().
new Date(année, mois, jour [, he Permet de spécifier manuellement chaque
ure, minutes, secondes, millise composant qui constitue une date.
condes ]);

 Les méthodes de l'objet Date: Étant donné que l'objet Date ne possède aucune propriété
standard, nous allons directement nous intéresser à ses méthodes qui sont très nombreuses

getFullYear( ); Renvoie l'année sur 4 chiffres ;


getMonth( ) ; Renvoie le mois (0 à 11) ;
getDate( ); Renvoie le jour du mois (1 à 31) ;
Renvoie le jour de la semaine (0 à 6, la semaine
getDay( );
commence le dimanche) ;
getHours( ); Renvoie l'heure (0 à 23) ;
getMinutes( ); Renvoie les minutes (0 à 59) ;
getSeconds( ); Renvoie les secondes (0 à 59) ;
getMilliseconds( ); Renvoie les millisecondes (0 à 999).
getTime (); Renvoie le timestamp de la date de votre objet ;
Permet de modifier la date de votre objet en lui
setTime( );
passant en unique paramètre un timestamp.

Prof : Mme [Link] 3ème info1 STI


Page 1
<script>
//Afficher l’heure actuelle du système
var d = new Date();
var heure = [Link]() + ":" + [Link]() + ":" + [Link]();
alert(heur);
</script>

<script>
// Exemple d'affichage de gestion d'un timestamp
var myDate = new Date('Sat, 04 May 1991 [Link] GMT+02:00');
//Creation d'un objet date avec timestamp comme argument
alert([Link]()); // Affiche : 4
// Faites attention les mois commencent par 0
alert([Link]()); // Affiche le mois : 4
alert([Link]()); // Affiche le jour : 6
</script>


 Tp : Création widget horloge avec javascript
<html>
<head>
<script>
function rafrachir(){
var t = 1000; // rafraîchissement en millisecondes
setTimeout('Affichehorloge()',t)
//setTimeout: déclenche des actions après un intervalle de temps donné
//On doit déclencher Affichehorloge() de nouveau après 1000 ms
//1 Millisecondes = 0.001 Secondes
}
TP (Horloge numérique)

function Affichehorloge()
{var date = new
Date()
//Création de l’objet date
var h = [Link]();
//Extraire l'heure de l'objet date
var m = [Link]();
//Extraire les minutes de l'objet date
var s = [Link]();
//Extraire les secondes de l'objet date
if( h < 10 ){ h = '0' + h; }
if( m < 10 ){ m = '0' + m; }
if( s < 10 ){ s = '0' + s; }
var time = h + ':' + m + ':' + s
[Link]('horloge').innerHTML = time;
//mise à jour du span horloge avec innerHTML
rafrachir();
//appel de la fonction pour le rafraîchissement des variables de nouveau
}
</script>
</head>
<body onload=Affichehorloge();>
<span id='horloge' style="background-color:black
;color:silver;font-size:100px;"></span>
</body>
</html>

innerHTML est une propriété de tout élément HTML qui désigne le contenu qui se trouve entre
la balise entrante et la balise fermante. On l'utilise pour lire pour insérer dynamiquement un
contenu.

Prof : Mme [Link] 3ème info1 STI


Page 2
Soit l'élément suivant: On peut obtenir le contenu du paragraphe avec ce code:

<p id="parag"> var x = [Link]("parag");


un texte. </p> alert([Link]);

On peut remplacer dynamiquement le contenu du paragraphe :


var x = [Link]("parag");
[Link] = "un autre texte";

Prof : Mme [Link] 3ème info1 STI


Page 3

Vous aimerez peut-être aussi