Premiers pas en JavaScript

1.8 Exercice - Introduction
cuy copyleft
  See You Why?  

 


JavaScript - comparatif JVS / PHP (1.6) | | Test - introduction (1.9)

Contenu


JavaScript 1 - Introduction
1.1 JS : définition
1.2 JS : historique
1.3 JS : outils indispensables
1.4 JS : connaissances préalables
1.5 JS : à tester
1.6 JS : comparaison JS / PHP
1.8 JS : exercices
1.9 JS : un test JS : introduction
JavaScript 2 - Commentaires et instructions
JavaScript 3 - Variables
JavaScript 4 - Types de variables
JavaScript 5 - Variables et chaines
JavaScript 6 - Les fonctions
JavaScript 7 - Les fonctions à paramètre unique
JavaScript 8 - Les fonctions à paramètres multiples
JavaScript 9 - L'instruction RETURN dans une fonction
JavaScript 10 - Appel d'une fonction dans une autre fonction
JavaScript 11 - Les variables locales ou globales
JavaScript 12 - Quelques opérateurs mathématiques
JavaScript 13 - ???
JavaScript 14 - L'instruction IF, pour les conditions
JavaScript 15 - L'instruction IF... ELSE..., pour les conditions à deux sorties
JavaScript 16 - Les IF imbriqués et fonction aléatoire
JavaScript 17 - Les conditions complexes
JavaScript 18 - L'instruction SWITCH, en cas de choix multiples
JavaScript 19 - La boucle FOR
JavaScript 20 - La boucle WHILE
JavaScript 21 - Les événements dans la programmation
JavaScript 22 - Quelques événements : onMouseOver onLoad etc.
JavaScript 23 - Les objets
JavaScript 24 - Créer ses propres objets
JavaScript 25 - Appliquer des méthodes à ses objets
JavaScript 26 - Les tableaux
JavaScript 27 - Différentes façons de créer des tableaux
JavaScript 28 - Propriétés et méthodes applicables aux tableaux
JavaScript 29 - Les méthodes applicables aux tableaux
JavaScript 30 - Méthodes de tris pour tableaux SORT, REVERSE et PUSH
JavaScript 31 - Ajouter des éléments à un tableau en utilisant une boucle
JavaScript 32 - Tecnique pour imprimer les éléments d'un tableau
JavaScript 33 - Lecture de bases de données
JavaScript 34 - Les objets mathématiques
JavaScript 35 - Les objets relatifs aux dates
JavaScript 36 - Les formulaires JS sont des objets
JavaScript 37 - Accès aux éléments d'un formulaire
JavaScript 38 - Validation des entrées d un formulaire
JavaScript 39 - Graphisme et JavaScript

JavaScript 50 - Calculateur d'emprunt
JavaScript 51 - Calendrier perpétuel et options diverses
JavaScript 99 - Documentation


 
 

 
Avec un peu de JavaScript,
n'oubliez pas de rendre vos pages
plus dynamiques et plus interactives.
 

 
 

 
Notre volonté est de rendre cette formation de JavaScript,
disponible le plus rapidement possible.
Le lecteur excusera l'imperfection de ce travail en cours de construction
et pourrait nous informer des défauts rencontrés.

  MERCI
 

 

 

I. Définition

voir <<< séquence précédente

 

 

 

II. Rappel historique

voir <<< séquence précédente

 

 

III. Outils nécessaires

voir <<< séquence précédente

 

 

IV. Connaissances préalables

voir <<< séquence précédente

 

 

V. À tester

voir <<< séquence précédente

 

 

VI. Comparatif JVS / PHP

voir <<< séquence précédente

 

VIII. Exercices

 

exo1a

Ce premier exercice n'est pas particulièrement un exercice de JavaScript, mais plutôt de HTML. Il nous parait cependant être un excellent rappel de notions de base pouvant être à la base d'un traitement de données futur, qui lui sera écrit en JS.
Il s'agit de créer un interface de questionnaire qui ressemble à ceci :

Vous ne voyez pas comment démarrer ? Rappelez-vous les formulaires HTML (voir ici)

 

exo1b

Cet exercice-ci n'est pas non plus du JS, mais il prépare à la future notion de manipulation de données et sera utilisé dans la suite pour une programmation plus poussée.

Il s'agit de diviser votre page en deux, verticalement, au moyen de la technique des "frames" vue en HTML. La partie de gauche occupera 40 % de la largeur de la page et son contenu sera appelé "question1" et contiendra le questionnaire de l'exo1a ci-dessus. La partie de droite, largeur 60 %, contenu appelé "rep1" dont nous fixerons le contenu plus tard.

frame de gauche
40 %
question1
frame de droite
60 %
rep1

Le contenu du cadre de droite pourrait constituer en l'affichage unique des réponses données par l'utilisateur dans le cadre de gauche... mais patience, d'abord réussir ses "premiers pas" avant de vouloir marcher... et surtout de vouloir courir.

 

exo1c

Notre but en JavaScript sera souvent de poser une ou plusieurs questions pour vérifier la bonne compréhension, voire l'attention de notre lecteur.
À partir des réponses données, on devrait pouvoir :

Cet exercice-ci n'est pas non plus du JS, mais nous initiera au questionnaire de type QCM, les uns n'acceptant qu'une seule réponse correcte par question, les autres permettant plusieurs réponses correctes possibles.

Écrire le programme HTML du formulaire « QCM » représenté par l’image ci-dessous. Le lecteur aura compris que ce questionnaire date d'avant le 21 juillet 2013.

 

 

exo1d

Créer une calculette... magnifique. Certes le JS nous permettra de créer cet outil fonctionnel. Mais avant tout, il faut créer le décor. Le HTML vous permet de créer ce décor :

Ce n'est qu'après l'apprentissage de JS que nous apprendrons à activer chacun de ces boutons.

Première amélioration proposée: affichage du calcul à effectuer dans la zone supérieure de la calculette (voir exo37g).

 

exo1e

Encore mieux, créer une calculette... scientifique magnifique. Certes le JS nous permettra de créer cet outil fonctionnel. Ici aussi, il faut créer le décor. Le HTML vous permet de créer ce décor :

Ce n'est qu'après l'apprentissage de JS que nous apprendrons à activer chacun de ces boutons.

Première amélioration proposée : affichage du calcul à effectuer dans la zone supérieure de la calculette (voir exo37???).

 

Solutions, corrigés

 

1a Créer un formulaire de type
1b Créer une page avec 2 frames verticaux
frame de gauche
40 %
question1
frame de droite
60 %
rep1

contenu à fixer plus tard
1c QCM concernant la famille royale et le protocole, les présidents américains et les codes ISO des pays.
1d Créer une calculatrice de ce type :
1e Créer une calculatrice scientifique comme celle proposée ci-dessus (voir énoncé complet).

 

 

 

IX. Test concernant l'introduction

voir suite >>>


JavaScript - comparatif JVS / PHP (1.6) | | Test - introduction (1.9)