Scribd
Importer
14 vues40 pages

Activitéjs

Transféré par

yjdonutmusic
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
14 vues40 pages

Activitéjs

Transféré par

yjdonutmusic
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/ 40

Module 1

Système, technologie et Internet

JAVASCRIPT
Les fonctions de conversion
Mise en forme avec JS
Les fonctions de Date
Les évènements
La portée des variables
Activité 1 :
Créer une page web qui permet de :
Solution Résultat

Saisir une valeur dans n=prompt('saisir une


une boite de dialogue. valeur')

Convertir la valeur
Nb=Number(n) Nb=101
saisie en nombre.
Convertir la valeur B1= parseInt(n) 101
saisie en entier puis
B1= parseInt(n,2) 5
entier dans la base 2.
Activité 1 :
Créer une page web qui permet de :
Solution Résultat
pf1=parseFloat("9") 9
Convertir une valeur
pf2=parseFloat("9.2n"); 9.2
saisie en réel
pf3=parseFloat("B9.2n"); NaN
Convertir le nombre
en chaîne de Ch=String(9.2) "9.2"
caractère.

La fonction parseInt() analyse une chaîne de caractère fournie en argument et


renvoie un entier exprimé dans une base donnée.
Activité 1 :
Créer une page web qui permet de :
Solution Résultat
pf1=parseFloat("9") 9
Convertir une valeur
pf2=parseFloat("9.2n"); 9.2
saisie en réel
pf3=parseFloat("B9.2n"); NaN

parseInt()/parseFloat () : Analyse la chaîne et renvoie un entier/réel .


- Si le premier caractère ne peut pas être convertie, elle renvoie NaN.
- Les caractères d'espacement au début et à la fin de la chaîne sont
ignorés.
- Seule la première partie qui peut être convertie sera retournée.
Activité 1 : Les fonctions Mathématiques

Solution Résultat
Calculer la racine
Sqrt=Math.sqrt(25) 5
carrée
Calculer l’arrondie ar=Math.round(9.2); 9
ar= Math.round(9.8); 10
Calculer la partie
pe=Math.trunc(9.2) 9
entière
Calculer la valeur
Abs=Math.abs(-25) 25
absolu
Nombre aléatoire Alea=Math.random() 0,2545
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 :
Une image contenant texte

Description générée automatiquement

En entrant la date de
naissance et en sortant de
cette zone la page affiche :
➢ Ajouter l’évènement qui permet d’appeler la fonction Calcul_Age()
en quittant la zone de texte (perdre le focus)
➢ Modifier le code pour que l'âge s’affiche lorsque la zone de texte Age
reçoit le focus

L’évènement onfocus
Onfocus Se déclenche au moment où l’élément obtient le focus(clique

sur l’élément).

Exemple d’appel : <input id= "…." onfocus=" myFunction()">

onblur Se déclenche au moment ou l’élément perd le focus.

Exemple d’appel : <input id= "…." onblur=" myFunction()">


Activité 4 :
Exécuter le code javascript ci-dessous et donner le résultat des
différents variables x1, z1, p1 et x2, z2, p2.
Activité 4 :
Activité 5 :

1- 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
10 et 36 pixels.
•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.
➢ lorsque le pointeur de la souris sort de l’élément on appelle la fonction
changecouleur() qui permet de réinitialiser la couleur de l’arrière plan du
textarea en blanc → onMouseOut
➢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. → oninput
Se déclenche lorsque le pointeur de la souris survole
l’élément
Exemple d’appel :
onmouseover <p onmouseover=" myFunctio()">
<input onmouseover =" myFunctio()">
<div onmouseover =" myFunctio()">
<h1 onmouseover =" myFunctio()">
Se déclenche lorsque le pointeur de la souris sort de
onmouseout l’élément
Exemple d’appel : <p onmouseout=" myFunctio()">
Se déclenche dès que la valeur d’un élément a changé.
Exemple d’appel :
Oninput
<input id= "…." oninput=" myFunctio()">
<textarea id= "…." oninput=" myFunctio()">
Se déclenche lorsque la valeur d’un élément est modifiée
(changer l’option d’une liste, par exemple).
Exemple d’appel :
<select name='options' onchange="chg()">
onchange
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
➢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.
❑ Changer le style d’un élément HTML.

element.style.propriété = valeur
❑ Change le style d’un élément HTML.
element.style.propriété = valeur
❑ Change le style d’un élément HTML.
❑ Change le style d’un élément HTML.(couleur text/arrière-plan)
❑ Change le style d’un élément HTML.

➢ lorsque le pointeur de la souris sort de l’élément on appelle la fonction


changecouleur() qui permet de réinitialiser la couleur de l’arrière plan du
textarea en blanc
❑ Change le style d’un élément HTML.
➢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.
Activité 6 :

Créer 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
❑ Effectue une action sur un élément HTML
element.méthode()
❑ Changer la valeur de l’attribut d’un élément HTML.

element.attribut = valeur

Autre exemple d’attribut: value, checked, disabled, readonly, src, muted.


1- Ouvrir la page web intitulée algorithmes.html présentée ci-dessous :

2- Créer un script JavaScript qui permet :


•lors de la clique sur le bouton PGCD(X,Y) permet d’afficher le PGCD de X
et Y
- lors de la clique sur le bouton Factoriel(X) permet de :
•Masquer la zone de texte Y
• D’afficher le factoriel de X
1- Ouvrir la page web intitulée algorithmes.html présentée ci-dessous :

2- Créer un script JavaScript qui permet :


•lors de la clique sur le bouton PGCD(X,Y) permet d’afficher le PGCD de X
et Y.(X et Y doivent être des entiers positifs)
1- Ouvrir la page web intitulée algorithmes.html présentée ci-dessous :

- lors de la clique sur le bouton Factoriel(X) permet de :


•Masquer la zone de texte Y
• D’afficher le factoriel de X

Vous aimerez peut-être aussi