TP n°3 Javascript

1. Contrôle de formulaire2. Les tableaux : gestion de la date et de l’heure3. Interactivité en javascript

© BTS IRIS 2002 [tv]

1. Tableaux (Array)2. Objet String3. Objet Date4. Objet Math

Annexes :

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.

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 :

Exercice n°2: Les tableaux Gestion de la date et de l’heure

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

É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

Exercice n°3: Interactivité en javascript

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.1 : Tableaux (Array)

Propriétés et méthodeslength : 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 dimensionsOn 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.2 : 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){

document.write(i + " = " + marque[i] + "<BR>");}document.write("<HR>");choix = window.prompt("Donner un numéro :", "0");document.write("La marque n° " + choix + " est : " + marque[choix]);

Annexe 1.3 : Tableaux (Array)

Exemple : Affichage

Annexe 1.4 : Tableaux (Array)

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

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 2 : Objet String (suite)

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 3 : Objet Date

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

}

Annexe 4 : Objet Math