Download
1 / 17
170 likes | 249 Views
Introduction aux Web Services Partie 1. Technologies HTML-XML. Cours 1.2: Eléments dynamiques. Javascript. Javascript(1). Contenu executable : <script > Pourquoi un script : ajout des actions aux pages web statiques, création des pages dynamiques(écriture sur la sortie HTML)
E N D
Introduction aux Web ServicesPartie 1. Technologies HTML-XML Cours 1.2: Eléments dynamiques. Javascript
Javascript(1) • Contenu executable : <script> • Pourquoi un script : ajout des actions aux pages web statiques, création des pages dynamiques(écriture sur la sortie HTML) • Un script s’exécute coté client • Javascript apporte un ensemble assez complet de « fonction set » de commandes intégrées, permettant d’effectuer des calculs, de manipuler les chaînes de caractères, d’emmètre des sons, d’ouvrir des nouvelles fenêtres et URL, d’accéder aux informations fournies par l’utilisateur dans un formulaire HTML et de les vérifier.
Javascript(2) • Incorporation dans les documents HTML <SCRIPT> ….. </SCRIPT> • La balise <SCRIPT> prend l’attribut « LANGUAGE » • <SCRIPT LANGUAGE=« JavaScript »></SCRIPT> • <SCRIPT LANGUAGE="JavaScript" SRC="fichierSource.js"></SCRIPT> - fichier à part
Javascript(3) • La Balise <noscript> • Elle est utilisée dans le cas où • -les utilisateurs ont désactivé Javascriptdasn leurs navigateurs ou • -le navigateur ne supporte pas le script sur le client
Javascript (3) • Fonctions et objets: • Javascript est un langage –objet dérivé de Java • Un objet est ensemble des données et de méthodes. • Javascript opère les objets des navigateurs Web et possède ses propres objets.
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 .
Objets de Javascript(2) • <!DOCTYPE html> • <html> • <body> • <script> • 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); • </script> • </body> • </html> • Exemple Objet
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!)
Fonctions de Javascript(1) • Un efonction est un bloc de code qui sera executé quand qqn l’appelle • Syntaxe : • functionNomFonction() • { • code exécutable • }
Fonctions de Javascript(2) • <!DOCTYPE html><html><head><script>functionGreeting(){alert( »Salut!");}</script></head><body><buttononclick= "Greeting()">Active</button></body></html> • Exemple Fonction
Objets HTML et Javascript(1) Javascript accède aux objets prédéfinis de HTML • Document • Form • Applet (attention HTML5!) • Argument • History • Image • Link • Option • Plugin…
Objets HTML et Javascript(2) • Exemple 1 : <form action="" class="cadre" name="formulaire1"> (<a href="#" onClick="document.formulaire1.reset();">Nettoyer</a>) • -objet form de HTML, méthode reset; • -objet document de HTML – indique le document actif. • -objet « link » = balise a+attributhref
Objets HTML : propriétés, méthodes, événements • Pour chaque objet sont définis • (1) Propriétés (attributs) • (2) Méthodes • (3) Evénements • Exemple : objet Input • Propriétés : name, value, defaultValue • Méthodes : focus(), blur(), select(), submit()
Objet document Ecriture sur la sortie HTML : Exemple2 <!DOCTYPE html> <html> <body> <p>Création des pages dynamiques "sur la sortie HTML »</p> <script> document.write("<h1> Première écriture </h1>"); document.write("<p>Test de Javascript</p>"); </script> <p> Vous ne pouvez utiliser <strong>document.write</strong> 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é </p> </body> </html>
Exemple(1) • Source .html • Source .js • //Initialisation des tableaux contenant les comptes et leur libelle • personnes = new Array(); • libelleComptes = new Array(); • nbPersonnes= 0; • //Initialisation du tableau des erreurs • tableauErreurs = new Array( • /* 0 */ 'Le nom doit être renseigné', • /* 1 */ 'Le prénom doit être renseigné', • /* 2 */ 'L\'année de naissance doit être renseignée', • /* 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 • function afficheErreur(numeroErreur) • { • alert(tableauErreurs[numeroErreur]); • }
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); } }
Exemple 3: Javascript //Affichage des personnes function affiche_personne() { texte=""; for(i=0;i<nbPersonnes;i++) { //Ajout d une nouvelle ligne dans le texte texte += personnes[i]+"\n"; } //Affichage du texte document.formulaire1.listePersonnes.value=texte; } /**************************************************************** //Verification du code postal //code retour: // 0 : OK // 3 : presence de lettres dans le code postal // 4 : le code postal fait moins de 5 chiffres function verification_code_postal() { retour = 0; valeur =document.formulaire1.code.value; if ( valeur.length != 5 ) { document.formulaire1.code.value=""; retour = 4; } if ( isNaN(valeur) == true ) { document.formulaire1.code.value=""; retour = 3; } afficheErreur(retour); return retour; }
