TP n°3 Javascript Contrôle de formulaire

Présentation au sujet: "TP n°3 Javascript Contrôle de formulaire"— Transcription de la présentation:

1 TP n°3 Javascript Contrôle de formulaire
Les tableaux : gestion de la date et de l’heure Interactivité en javascript Annexes : Tableaux (Array) Objet String Objet Date Objet Math © BTS IRIS 2002 [tv]

2 Exercice n°1: Contrôle de formulaire
Reprendre le formulaire réalisé dans le TP HTML et assurer son contrôle en javascript (on n’accepte pas les champs non remplis ou les choix ou options non renseignés). Une fois contrôlé (toutes les informations sont présentes), réaliser son envoi par mail sous forme d’un texte simple.

3 Exercice n°2: Les tableaux Gestion de la date et de l’heure
Réaliser un script js qui permet d’afficher en temps réel la date et l’heure dans la barre status de la fenêtre. Vous utiliserez les tableaux pour faire une transcription des jours de la semaine (Lundi, Mardi, …) et des mois (Janvier, Février, …). L’affichage sera le suivant : Remarque : il existe, depuis la version 1.3 de javascript, une méthode qui permet d’obtenir les 4 chiffres pour l’année au lieu de 2 (bug de l’an 2000) : getFullYear() au lieu de getYear().

4 Exercice n°3: Interactivité en javascript
Écrire un script js qui permet :  de Déplacer un bloc à l’écran en fonction des touches flèches du clavier et en tenant compte de la vitesse de déplacement indiquée dans les zones de saisies pour chaque axe;  d’indiquer le sens de déplacement ;  d’afficher dans la barre d’état :  l’événement et les coordonnées de la souris  le code touche (Scan code) et le caractère ASCII correspondant à la touche appuyée

5 Annexe 1.1 : Tableaux (Array)
L'objet Array (ou tableau) est une liste d'éléments indexés dans lesquels on pourra ranger (écrire) des données ou aller les reprendre (lire). Pour faire un tableau, il faut procéder en deux étapes : · déclarer le tableau. A ce stade, les éléments du tableau sont vides. · affecter des valeurs dans les cases du tableau. On commence par déclarer le tableau : nom_du_tableau = new Array (x); où x est le nombre d'élément du tableau (En Javascript, on n’est pas obligé de donner une valeur à x). Ensuite, on va alimenter la structure ainsi définie : nom_du_tableau[i] = "valeur"; où i est un nombre compris entre 0 et x-1.

6 Annexe 1.2 : Tableaux (Array)
Propriétés et méthodes length : retourne le nombre d'éléments du tableau. join() : regroupe tous les éléments du tableau dans une seule chaîne. Les différents éléments sont séparés par une caractère séparateur spécifié en argument. Par défaut, ce séparateur est une virgule. reverse() : inverse l'ordre des éléments (ne les trie pas). sort() : retourne les éléments par ordre alphabétique (à condition qu'ils soient de même nature) Tableau à deux dimensions On peut créer des tableaux à deux dimensions (et plus encore) : On déclare d'abord un tableau à 1 dimension de façon classique : nom_du_tableau = new Array (x); Ensuite, on déclare chaque élément du tableau comme un tableau à 1 dimension : nom_du_tableau[i] = new Array(y);

7 Annexe 1.3 : Tableaux (Array)
Exemple : marque = new Array(10); marque[0] = "Renault"; marque[1] = "Peugeot"; marque[2] = "Citroen"; marque[10] = "Ford"; marque.length++; document.write("Longueur du tableau marque = "+marque.length+"<BR><BR>"); var i; for(i=0;i <marque.length;i++) { document.write(i + " = " + marque[i] + "<BR>"); } document.write("<HR>"); for(i in marque) choix = window.prompt("Donner un numéro :", "0"); document.write("La marque n° " + choix + " est : " + marque[choix]);

8 Annexe 1.4 : Tableaux (Array)
Exemple : Affichage

9 Annexe 2 : Objet String Création d’un objet sur affectation :
objstr = "Le nouveau monde !"; Manipulation : les caractères sont indicés de 0 à objstr.length-1 "Le nouveau monde !".charAt(1) // "e" "Le nouveau monde !".indexOf("e") // 1 "Le nouveau monde !".indexOf("e",2) // 7 "Le nouveau monde !".lastIndexOf("e") // 15 "Le nouveau monde !".substring(3,7) // "nouveau" "Le Nouveau Monde !".toLowerCase() // "le nouveau monde !" "Le Nouveau Monde !".toUpperCase() // "LE NOUVEAU MONDE !«  Autres méthodes : charCodeAt, concat,fromCharCode, match, search, slice, split

10 Annexe 2 : Objet String (suite)
Formatage HTML : insertion de balise (tag) <BIG>,<BLINK>, <B> … big(), blink(), bold(), fixed(), fontsize(), fontcolor(), italics(), link(URL) ou anchor(URL), small(), strike(), sub(), sup(), … Exemple : "la " + "SNCF".anchor(" Donne : "la <A HREF=’

11 Annexe 3 : Objet Date Référence : 1er Janvier 1970 Exemples :
aujourdhui = new Date(); jour_2003_moins_1sec = new Date("December, :59:59"); jour_an2003 = new Date("January 1, :00:00"); jour_an2003 = new Date("January 1, 2003"); msParJour = 24*60*60*1000; nbjour_avant_an2003 = new Date(); nbjour_avant_an2003 = Math.round((jour_an2003.getTime()-aujourdhui.getTime())/msParJour);

12 Annexe 4 : Objet Math Constantes mathématiques : PI,…,
Fonctions mathématiques : sin(x),cos(x),abs(x),random()... Exemples : circonference = Math.PI * rayon * rayon; abscisse = r * Math.sin(angle); ordonnee = r * Math.cos(angle); with(Math) { circonference = PI * rayon * rayon; abscisse = r * sin(angle); ordonnee = r * cos(angle); }