La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

TP n°3 Javascript 1.Contrôle de formulaire 2.Les tableaux : gestion de la date et de l’heure 3.Interactivité en javascript © BTS IRIS 2002 [tv] 1.Tableaux.

Présentations similaires


Présentation au sujet: "TP n°3 Javascript 1.Contrôle de formulaire 2.Les tableaux : gestion de la date et de l’heure 3.Interactivité en javascript © BTS IRIS 2002 [tv] 1.Tableaux."— Transcription de la présentation:

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

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

4 É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

5  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 )

6  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.2 : Tableaux ( Array )

7  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+" "); var i; for(i=0;i

8  Exemple : Affichage Annexe 1.4 : Tableaux ( Array )

9  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

10  Formatage HTML : insertion de balise (tag),, … 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 SNCF " Annexe 2 : Objet String (suite)

11  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); Annexe 3 : Objet Date

12  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


Télécharger ppt "TP n°3 Javascript 1.Contrôle de formulaire 2.Les tableaux : gestion de la date et de l’heure 3.Interactivité en javascript © BTS IRIS 2002 [tv] 1.Tableaux."

Présentations similaires


Annonces Google