Scribd
Importer
6 vues7 pages

Activités Javascript

Le document décrit plusieurs activités de création de pages web en JavaScript, incluant des fonctionnalités telles que des calculatrices, le calcul de PGCD et de factoriels, ainsi que des formulaires d'inscription. Chaque activité spécifie les éléments HTML nécessaires et les fonctions JavaScript à implémenter pour valider les entrées et afficher les résultats. Les activités couvrent également des concepts comme la manipulation de dates, l'affichage dynamique, et l'interaction avec des éléments multimédias.

Transféré par

challazarai
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
6 vues7 pages

Activités Javascript

Le document décrit plusieurs activités de création de pages web en JavaScript, incluant des fonctionnalités telles que des calculatrices, le calcul de PGCD et de factoriels, ainsi que des formulaires d'inscription. Chaque activité spécifie les éléments HTML nécessaires et les fonctions JavaScript à implémenter pour valider les entrées et afficher les résultats. Les activités couvrent également des concepts comme la manipulation de dates, l'affichage dynamique, et l'interaction avec des éléments multimédias.

Transféré par

challazarai
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
Vous êtes sur la page 1/ 7

Activités JavaScript

Activité 1 : Créer une page web intitulée calculatrice.html comme décrit ci-dessous :

➢ Le clic sur le bouton Calculer permet :

✓ D’afficher le message "saisir la valeur de X" si la première zone de texte est vide ou ne contenant pas
un nombre
✓ D’afficher le message "saisir la valeur de Y" si la deuxième zone de texte est vide ou ne contenant
pas un nombre
✓ D’afficher le résultat de l’opération

Activité 2 : Créer une page web intitulée algorithmes.html comme décrit ci-dessous :

➢ Le clic sur le bouton PGCD(X,Y) permet d’afficher le PGCD de X et Y


➢ Le clic sur le bouton Factoriel(X) permet d’afficher le factoriel de X
Activité 3 : Créer une page web et un programme JavaScript qui permet de calculer et d’afficher à partir
d’une date de naissance l’Age et la saison correspondante.

Exemple :

En entrant la date
de naissance et
en sortant de
cette zone la
page affiche :

Activite3.html
<body>
<label>Date de Naissance:</label>
<input type="date" id="dn" ………………………………="Calcul_Age()"><br><br>
<label for="Age">Age : </label>
<input type="text" name="age" id="Age"><br><br>
<p> vous êtes nés en <span id="sais"></span></p>
</body>

Calcule_age.js
function Calcul_Age()
{ d=new Date(document.getElementById("dn").value); //Lire date de naissance
ann=d.getFullYear(); // l'année de la date de naissance
auj=……………………………………; // La date système
anac=…………………………………; // l'année actuelle
document.getElementById("Age").value=………………………….
mois=……………………………………….
switch (…………….)
{
case 1: case 2: case 12 :
document.getElementById("sais")………………..="…………."; break;
case ….: case …..: case …….:
document.getElementById("sais").innerHTML="printemps"; break;
case …..: case …….: case …..:
document.getElementById("sais").innerHTML="………."; break;
case …….: case …….: case …….:
document.getElementById("sais").innerHTML="………….."; break;
}
}
Activité 4 : Exécuter le code javascript ci-dessous et donnez le résultat des différents variables x1,
y1, z1, p1 et x2, y2, z2, p2

<!DOCTYPE html>
<html>
<head>
<Body>
<body>
<script >
x1=2; var y1=3; let z1=4 ; const p1=5 ;
function test()
{ x2=20; var y2=30; let z2=40 ; const p2=50 ; }

document.write("x1= " + x1 +"<br>" );document.write("y1=" + y1 + "<br>" );


document.write("z1= " + z1 +"<br>" );document.write("p1=" + p1 + "<br>" );
test();
document.write("x2= " + x2 +"<br>" );document.write("y2=" + y2+ "<br>" );
document.write("z2= " + z2 +"<br>" );document.write("p2=" + p2 + "<br>" );
</script>
</body>
</body>
</html>

Activité 5 : Créer une page web intitulée facteurs_premiers.html comme décrit ci-dessous sachant que le
clic sur le bouton Afficher les facteurs premiers permet :
✓ D’afficher le message "Veuillez saisir un entier positif" si la valeur saisie dans la première zone de
texte est vide ou n’est pas un entier positif,
✓ De chercher les facteurs premiers de l’entier saisi et de les afficher dans la deuxième zone de texte.
Pour rechercher les facteurs premiers d’un nombre, utilisez un tableau t dans lequel vous allez
stocker les facteurs premiers
Activité 6 : Créer une page web nommée design.html contenant :
➢ Liste de polices de caractères (datalist) : Permet à l'utilisateur de choisir parmi Verdana, Courier New,
et Georgia.
➢ Contrôle de plage (range) : L'utilisateur peut ajuster la taille de la police entre 12 et 48 pixels. La taille
actuelle est affichée à côté du curseur.
➢ Liste déroulante pour la couleur : L'utilisateur peut sélectionner la couleur à appliquer.
➢ Boutons radio : L'utilisateur peut choisir d'appliquer la couleur au texte ou à l'arrière-plan du champ
de texte.
➢ Zone de texte : Permet à l'utilisateur de saisir du texte.
➢ Bouton de commande nommée Transformer
Créer un script JavaScript offrant les fonctionnalités suivantes :
➢ Le clic sur le bouton Transformer permet de mettre en forme le texte saisi au sein de l’espace de texte
selon les options choisis au-dessus.
➢ Au fur et à mesure que le texte est saisi dans la zone de texte, le contenu HTML sous le bouton
"Transformer" affiche le nombre de caractères tapés.
➢ Lorsqu'on survole l'image i1.jpg avec la souris, celle-ci est remplacée par l'image i2.jpg. En revanche,
lorsque la souris quitte l'image i2.jpg, elle revient à l'image i1.jpg.

N.B : Les fichier design.html, design.css et les images ii1.jpg et i2.jpg sont enregistrés dans le dossier
ressources sur le Bureau
Activité 7 : Créez une page web nommée video.html, comme présenté ci-dessous, contenant une
séquence vidéo et trois boutons de commande Play, Stop et Mute

<!DOCTYPE html>
<script src="video.js"></script>
<link rel="stylesheet" href="video.css">
</head>
<body>
<form>
<h1>HTML5 prend-il en charge le multimédia ?</h1>
<h2>Regardez cette vidéo</h2>
<video src="video1.mp4" controls width="30%" id="video1" muted > </video>
<br>
<input type="button" value="Play" onclick="playvideo()">
<input type="button" value="Stop" onclick="pausevideo()">
<input type="button" value="Mute" onclick="silencieux()">
</form>
</body>
</html>
function playvideo(){
video2=document.getElementById("video1"); video2.play(); }
function pausevideo(){
video2=document.getElementById("video1"); video2.pause(); }
function mutevideo(){
video2=document.getElementById("video1");
if (video2.muted==true)
video2.muted=false
else
video2.muted=true;
}
Activité 8 : Créer la page "inscription.html" qui permet la saisie des données relatives à un nouveau
membre demandant une formation au domaine Robotique via le formulaire suivant :
Sachant que :
✓ Le champ de saisie relatif au libellé "Nom" est non vide et alphabétique.
✓ Le champ de saisie relatif au libellé "Date de naissance" doit être une date dont l’année est comprise
entre 2000 et 2006.
✓ Le champ de saisie relatif au libellé "Adresse email" est non vide et comportant le caractère @.
✓ La sélection de la nature de Bac est obligatoire
✓ Le choix de la deuxième langue est obligatoire
✓ Le choix de l’une des options de loisirs est obligatoire
✓ Le clic sur le bouton "Envoyer" fait appel à :
▪ Une fonction JavaScript nommée "inscription",
▪ Un fichier intitulé "inscription.php" permettant d’afficher le message suivant : Inscription effectuée avec
succès

Vous aimerez peut-être aussi