Scribd
Importer
660 vues6 pages

Exercices Javascript

Cet ensemble d'exercices propose de manipuler des éléments HTML et des styles CSS en JavaScript. Les exercices incluent l'affichage de boucles, la modification dynamique de styles, la génération de tables de multiplication et de tableaux dynamiques.

Transféré par

AICHA FAROUK
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
660 vues6 pages

Exercices Javascript

Cet ensemble d'exercices propose de manipuler des éléments HTML et des styles CSS en JavaScript. Les exercices incluent l'affichage de boucles, la modification dynamique de styles, la génération de tables de multiplication et de tableaux dynamiques.

Transféré par

AICHA FAROUK
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/ 6

Exercices en Javascript

Exercice 1 :
1 - Ecrivez une fonction JavaScript permettant, à l’aide d’une boucle for,
d’afficher tous les nombres de 1 à 10.
2 - Ecrivez une fonction JavaScript comprenant deux boucles imbriquées for,
une gérant les lignes et une gérant les colonnes, permettant l’affichage dans
une page WEB d’un tableau de 10 lignes sur 10 colonnes. Chaque cellule du
tableau contiendra le numéro de ligne de la case ainsi que son numéro de
colonne.

Exercice 2 :
Modifier dynamiquement les styles
Manipuler les styles des éléments html en JavaScript.
Soit le document html suivant :

<!doctype html>

<html>

<head>

<title>styles</title>

<meta charset="utf-8">

</head>

<body>

<p id="parag1">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei


usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mi
nim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.

</p>

<button onclick="changer_style()">Changer Style</button>

</body>

</html>

1. Ecrire la fonction changer_style qui permet de styler le paragraphe au clic du


bouton par :

 une couleur blanche.


 un background noir.
 une bordure noire pointillée de 1px.
 un retrait de 5px.
2. Définir les propriétés précédentes dans une classe "active"
et modifier la fonction changer_style de telle façon qu'elle ajoute la classe
"active" au paragraphe.

Exercice 3 :
Table de multiplication
1. Ecrire une page multiplication.html permettant d’afficher la table de
multiplication pour un nombre donné par l’utilisateur.
2. Changez la fonction écrite dans la question 1, pour qu’elle renvoie Entrer une
valeur valable lorsque la valeur entrée n’est pas un entier.

3. Enlevez le bouton et faites de sorte que le textearea affiche la table de


multiplication une fois il a le focus

Exercice 4 :
Modifier les styles avec un input de type range
1 -Créer un document html contenant des champs de type range et un titre dans un
tableau html (voir l'exemple sur la figure ci-dessous) :

2. Créer le script qui permet de changer les propriétés (background, padding, height,
width, radius, rotation) du titre en milieu en changeant leurs valeurs via les inputs de
type range.
Exercice 5 :
Dessiner un tableau dynamiquement en utilisant JavaScript
1 – générer un tableau dynamiquement en utilisant deux zones de texte (rows, cols)
dans lequel l’utilisateur va spécifier le nombre de lignes et de colonnes du tableau a
générer une fois le bouton dessiner va être cliquer.

Remarque : créer une fonction JavaScript dessiner() cette dernière contient elle-
même une autre fonction makeTable(r, c), avec r le nombre lignes (rows) et c le
nombre de colonnes (cols).
1 – créer une palette au-dessous de 5 couleurs (vert, bleu, rouge, jaune, gris) une fois
l’utilisateur clique sur une couleur puis passe la souris sur le tableau il peut dessiner
avec la couleur sélectionner sur la palette, utiliser l’évènement onclick sur les
éléments de la palette et l’évènement onmouseover pour dessiner sur les cellules du
tableau.

Vous aimerez peut-être aussi