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]

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.

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().

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

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.

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);

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]);

Annexe 1.4 : Tableaux (Array) Exemple : Affichage

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

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("http://www.sncf.fr") Donne : "la <A HREF=’http://www.sncf.fr’>SNCF</A>"

Annexe 3 : Objet Date Référence : 1er Janvier 1970 Exemples : aujourdhui = new Date(); jour_2003_moins_1sec = new Date("December, 2002 23:59:59"); jour_an2003 = new Date("January 1, 2003 00: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);

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); }