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

Introduction aux Web Services Partie 1. Technologies HTML- XML Cours 1.2: Eléments dynamiques.Javascript.

Présentations similaires


Présentation au sujet: "Introduction aux Web Services Partie 1. Technologies HTML- XML Cours 1.2: Eléments dynamiques.Javascript."— Transcription de la présentation:

1 Introduction aux Web Services Partie 1. Technologies HTML- XML Cours 1.2: Eléments dynamiques.Javascript

2 Javascript(1) Contenu executable : Contenu executable : Pourquoi un script : ajout des actions aux pages web statiques, création des pages dynamiques(écriture sur la sortie HTML) Pourquoi un script : ajout des actions aux pages web statiques, création des pages dynamiques(écriture sur la sortie HTML) Un script sexécute coté client Un script sexécute coté client Javascript apporte un ensemble assez complet de « fonction set » de commandes intégrées, permettant deffectuer des calculs, de manipuler les chaînes de caractères, demmètre des sons, douvrir des nouvelles fenêtres et URL, daccéder aux informations fournies par lutilisateur dans un formulaire HTML et de les vérifier. Javascript apporte un ensemble assez complet de « fonction set » de commandes intégrées, permettant deffectuer des calculs, de manipuler les chaînes de caractères, demmètre des sons, douvrir des nouvelles fenêtres et URL, daccéder aux informations fournies par lutilisateur dans un formulaire HTML et de les vérifier.

3 Javascript(2) Incorporation dans les documents HTML Incorporation dans les documents HTML ….. ….. La balise prend lattribut « LANGUAGE » La balise prend lattribut « LANGUAGE » - fichier à part - fichier à part

4 Javascript(3) La Balise Elle est utilisée dans le cas où -les utilisateurs ont désactivé Javascript dasn leurs navigateurs ou -le navigateur ne supporte pas le script sur le client

5 Javascript (3) Fonctions et objets: Fonctions et objets: Javascript est un langage –objet dérivé de Java Javascript est un langage –objet dérivé de Java Un objet est ensemble des données et de méthodes. Un objet est ensemble des données et de méthodes. Javascript opère les objets des navigateurs Web Javascript opère les objets des navigateurs Web et possède ses propres objets.

6 Objets de Javascript(1) En Javascript tout est objet : chaîne de caractères, nombre… Un objet est une colléction de données avec des propriétés et des méthodes (concéption objet classique) La création des objets propriétaires et des propriétés est aisée.

7 Objets de Javascript(2) var voiture=new Object(); voiture.puissance_fisc=4; voiture.numero_imm="MA123456"; voiture.date_imm="12/01/2012"; voiture.couleur="tungsten"; document.write("Numéro d'immatriculation" + " est " + voiture.numero_imm); Exemple Objet

8 Accès aux propriétés et méthodes nomObjet.propriétéObjet nomObjet.NomMéthode() var message= »Salut!"; var x=message.length; (x=6) var y=message.toUpperCase(); (y=SALUT!)

9 Fonctions de Javascript(1) Un efonction est un bloc de code qui sera executé quand qqn lappelle Syntaxe : function NomFonction() { code exécutable }

10 Fonctions de Javascript(2) function Greeting() { alert( »Salut!"); } Active Exemple Fonction

11 Objets HTML et Javascript(1) Javascript accède aux objets prédéfinis de HTML Document Document Form Form Applet (attention HTML5!) Applet (attention HTML5!) Argument Argument History History Image Image Link Link Option Option Plugin… Plugin…

12 Objets HTML et Javascript(2) Exemple 1 : Exemple 1 : ( Netto yer ) -objet form de HTML, méthode reset; -objet form de HTML, méthode reset; -objet document de HTML – indique le document actif. -objet document de HTML – indique le document actif. -objet « link » = balise a+attribut href -objet « link » = balise a+attribut href

13 Objets HTML : propriétés, méthodes, événements Pour chaque objet sont définis Pour chaque objet sont définis (1) Propriétés (attributs) (1) Propriétés (attributs) (2) Méthodes (2) Méthodes (3) Evénements (3) Evénements Exemple : objet Input Exemple : objet Input Propriétés : name, value, defaultValue Propriétés : name, value, defaultValue Méthodes : focus(), blur(), select(), submit() Méthodes : focus(), blur(), select(), submit()

14 Objet document Ecriture sur la sortie HTML : Exemple2Exemple2 Création des pages dynamiques "sur la sortie HTML » document.write(" Première écriture "); document.write(" Test de Javascript "); Vous ne pouvez utiliser document.write que dans la sortie HTML. Si vous l'utilisez après le chargement du document comme par exemple, dans une fonction, tout le document sera écrasé

15 Exemple(1) Source.html Source.html Source.html Source.html Source.js Source.js Source.js Source.js //Initialisation des tableaux contenant les comptes et leur libelle //Initialisation des tableaux contenant les comptes et leur libelle personnes = new Array(); personnes = new Array(); libelleComptes = new Array(); libelleComptes = new Array(); nbPersonnes= 0; nbPersonnes= 0; //Initialisation du tableau des erreurs //Initialisation du tableau des erreurs tableauErreurs = new Array( tableauErreurs = new Array( /* 0 */'Le nom doit être renseigné', /* 0 */'Le nom doit être renseigné', /* 1 */'Le prénom doit être renseigné', /* 1 */'Le prénom doit être renseigné', /* 2 */'L\'année de naissance doit être renseignée', /* 2 */'L\'année de naissance doit être renseignée', /* 3 */'L\'année de naissance ne doit comporter que des chiffres' /* 3 */'L\'année de naissance ne doit comporter que des chiffres' ); ); // Affiche le message de l erreur dont le numero est passe en argument // Affiche le message de l erreur dont le numero est passe en argument function afficheErreur(numeroErreur) function afficheErreur(numeroErreur) { alert(tableauErreurs[numeroErreur]); alert(tableauErreurs[numeroErreur]); }

16 Exemple (2):Javascript //Ajout d'une personne function ajout() {nom = document.formulaire1.nom.value; if (nom.length != 0) { prenom=document.formulaire1.prenom.value; if (prenom.length != 0) { anneeNaissance=document.formulaire1.annee.value; if (anneeNaissance.length != 0) { if ( isNaN(anneeNaissance) == false ) { personnes[nbPersonnes]=nom; nbPersonnes ++; affiche_personne(); } else { document.formulaire1.annee.value=""; afficheErreur(3); } else { afficheErreur(2); } else { afficheErreur(1); } } else { afficheErreur(0); } }

17 Exemple 3: Javascript //Affichage des personnes function affiche_personne() { texte=""; for(i=0;i


Télécharger ppt "Introduction aux Web Services Partie 1. Technologies HTML- XML Cours 1.2: Eléments dynamiques.Javascript."

Présentations similaires


Annonces Google