Serie 1 2 3 4 5 6 JavaScript 3 STI 2021 [PDF]

Zitiervorschau

Classes : 3ème Info

Matière : STI

Séries JavaScript 1,2,3,4,5,6 et 7

Série 1 Abdellatif M. JavaScri pt Exercice 00 : [Actions & DOM | Jeu « memory »

On veut implémenter un jeu de « memory ». Au début du jeu les cartes sont faces cachées, l'interface doit permettre d'en retourner deux. Si les deux cartes sont identiques elles restent visibles, sinon elles disparaissent après un court laps de temps. Le jeu se termine quand toutes les paires ont été découvertes. 1. Récupérer huit images de même taille et coder en HTML/CSS la disposition des seize cartes. 2. Programmer en JavaScript le mélange des cartes, par exemple en répétant une centaine de fois le processus suivant : tirer deux cartes au hasard et les échanger. Ce mélange doit avoir lieu au chargement de la page.

Page - 1 -

Mr Abdellatif Mohamed

v5-05.03.2021

Lycée Ali Belhouane - Nabeul

| 3ème STI 2020-2021

Classes : 3ème Info

Matière : STI

Séries JavaScript 1,2,3,4,5,6 et 7

3. Utiliser la CSS pour rendre les cartes invisibles. Programmer en JavaScript le retournement d'une carte quand on clique sur elle. (optionnel) Produire un joli effet visuel quand la carte apparaît. 4. Permettre de cliquer sur deux cartes cachées. Tester si les deux images dévoilées sont les mêmes. Si les images sont différentes, les faire disparaître après une seconde d'affichage. 5. Interdire le clic sur une image déjà apparente. Interdire le clic sur une troisième carte pendant que les deux cartes cliquées sont apparentes. 6. Compter le nombre de paires découvertes, compter les nombre de clics utilisés. Compléter en produisant des messages en cours de partie (découverte d'une paire, nombre de clics utilisés, message de victoire, etc.). 7. Ajouter deux boutons : l'un qui permet de commencer une nouvelle partie, l'autre qui donne la solution en découvrant toutes les cartes.

Abdellatif M.

8.



Memory



Jeu de memory















Page - 3 -

Mr Abdellatif Mohamed

v5-05.03.2021

Lycée Ali Belhouane - Nabeul

| 3ème STI 2020-2021

Classes : 3ème Info

Matière : STI

Séries JavaScript 1,2,3,4,5,6 et 7

Abdellatif M. Exercice 5 Énoncé ■ Réaliser à l'aide de HTML5, CSS et JavaScript l'équivalent de la page web suivante (5.html):

        

Le fichier HTML doit contenir deux balises div et une balise span seulement Votre page doive être "responsive" La couleur de la page body background-color :#58b1e7 ; ce trouve dans un fichier séparé css est appelé cssheureDigital.css La couleur de l’élément entête est background-color :#000 ; La couleur de l'élément horloge est background-color:#000 ; Cette page utilise une fonction prédéfinie setInterval() qui s'appelle elle-même toutes les secondes. Cette fonction commence par retrouver l'élément HTML qui est destiné à afficher l'heure. Cette fonction JavaScript se trouve dans un fichier JavaScript séparé appelé jsheureDegital.js. La date affichée est accompagnée de pm ou am. Colorer les deux points dans l'heure avec une couleur différente.

Page - 4 -

Mr Abdellatif Mohamed

v5-05.03.2021

Lycée Ali Belhouane - Nabeul

| 3ème STI 2020-2021

Classes : 3ème Info

Matière : STI

Séries JavaScript 1,2,3,4,5,6 et 7

Abdellatif M. Exercice 13 Énoncé Ecrire un script en JavaScript pour réaliser un petit jeu “Deviner un nombre”. Le principe de ce jeu est le suivant :  l’ordinateur choisit un nombre aléatoire entre 10 et 100.  Le but est de deviner ce nombre, qui sera saisit dans une zone de texte.  À chaque fois qu’on propose un nombre, on indique si le nombre à deviner est plus petit ou plus grand que celui-ci.  Le nombre d’essai autorisé est de 10, l’utilisateur est averti pour chaque essai concernant le nombre d’essai restant.  Quand l’utilisateur gagne, on affiche le nombre de coups qu’il lui a fallu.  Le schéma suivant représente le résultat souhaité :

Exercice 20 (20.html) Traduction  Créer un script JavaScript qui permet de changer le texte contenu dans un en fonction de trois langues  L’image suivant montre le résultat attendu :

Page - 5 -

Mr Abdellatif Mohamed

v5-05.03.2021

Lycée Ali Belhouane - Nabeul

| 3ème STI 2020-2021

Classes : 3ème Info

Matière : STI

Séries JavaScript 1,2,3,4,5,6 et 7

Abdellatif M.

Exercice 27 SMS Énoncé L’objectif de cet exercice est de créer une interface qui ressemble celle d’envoi d’un SMS. Créer une page HTML5 qui contient :  Une zone de texte (ou textarea) pour que l’internaute puisse y saisir un texte quelconque.  Une zone de texte en bas du textarea qui affiche le nombre de caractères restants.  Ce nombre sera automatiquement calculé à chaque modification du texte par le clavier Le schéma suivant décrit le résultat qui sera obtenu :

Correction :

Page - 6 -

Mr Abdellatif Mohamed

v5-05.03.2021

Lycée Ali Belhouane - Nabeul

| 3ème STI 2020-2021

Classes : 3ème Info

Matière : STI

Séries JavaScript 1,2,3,4,5,6 et 7

Abdellatif M.

Page - 7 -

Mr Abdellatif Mohamed

v5-05.03.2021

Lycée Ali Belhouane - Nabeul

| 3ème STI 2020-2021