Javascript. zUn langage de programmation ypour les pages html yCôté client yInterprété xLe code source est transformé en byte code au fur et à mesure.

Présentation au sujet: "Javascript. zUn langage de programmation ypour les pages html yCôté client yInterprété xLe code source est transformé en byte code au fur et à mesure."— Transcription de la présentation:

1 Javascript

2 zUn langage de programmation ypour les pages html yCôté client yInterprété xLe code source est transformé en byte code au fur et à mesure de son utilisation yLangage de scriptage xMoins complexes (e.g. pas de threads, de gestion de la mémoire, etc.) xNe créent pas eux-mêmes les interfaces yHaut niveau yOrienté objet zJavaScript s’exécute seulement sur les pages courantes du browser en n’importe quel temps zQuand l’usager arrête de regarder la page, tous les scripts sont immédiatement arrêtés zLa seule exception est via un cookie, qui peut être utilisé par plusieurs pages pour se transmettre de l’information, même après que la page ait été fermée.

3 Capacités de javascript zMettre du texte dynamique dans une page html zRéagir aux événements zLire et écrire des éléments html zValider des données zIdentifier et interagir avec le browser zCréer et manipuler des cookies zOuvrir des fenêtres zChanger des images zBouger du texte

4 Usage non dynamique zChanger les images lors du passage de la souris sur un lien zOuvrir une nouvelle fenêtre du browser zÉcrire du contenu dynamique zManipuler et vérifier les formulaires zConserver les variables d’une page pour être utilisées sur une autre page zObtenir des informations sur le browser

5 Dynamic HTML (DHTML) zUn ensemble de technologies utilisées ensemble pour créer des sites web interactifs et animés yUn langage de balises statiques : HTML yUn langage de scriptage côté client : JavaScript yUn langage de définition de présentation : Cascading Style Sheets, CSS y Document Object Model. z« Page web dynamique » générée ycôté client : JavaScript… ycôté serveur : PHP, Perl…

6 Usage dans un contexte DHTML zAfficher / cacher du contenu yExemples : Menu Popup, tooltips, etc. zDéplacer du contenu yexemples : animation, trace de la souris, horloge analogique… zContenu réinscriptible yExemples : remplacer une chaîne, message scroller zW3C DOM yExemples: importer des fichier de données XML, jeux, etc.

7 Intégration de code javascript dans une page ou provenant d’une librairie

8 Où placer les instructions z « body » yExécution du code JavaScript pendant le chargement de la page. z« head » yExécution lors de l’appel de la page

9

10 Conditionnelles

11

12

13

14 JavaScript Popup Boxes zalert("sometext") zconfirm("sometext") zprompt("sometext","defaultvalue")

15 fonctions

16 Boucles zfor zwhile zbreak zcontinue zfor (variable in object)

17 événements

18 L’événement onload

19 Un événement; plusieurs actions zSéparer les actions par un point-virgule zLa fonction dothis Seulement sera exécutée

20 Evénement onmousover zEvénement de la souris : onmousover zEvénement d’un formulaire : onsubmit

21 Quel bouton de la souris a été cliqué ?

22 exceptions

23 Objets de base zString zDate zArray zBoolean zMath

24 Object du navigateur

25 HTML DOM

26 L’objet Document

27 Modifier la largeur et la hauteur d’une image

28 Cookies zDonnées persistantes entre les requêtes des clients yPermanents xDans un fichier texte expires ySession xDans la mémoire du navigateur xPublic xAccessible à tous les scripts de tous les sites zFormat d’un cookie ydocument.cookie = 'mycookie=hello;expires=Fri, 17 Dec 2010 10:00:00 GMT';

29

30 Ajouter un cookie

31 Obtenir la valeur d’un cookie

32 Création d’objets à l’aide de new Object()

33 Création d’objets à l’aide de la notation littérale

34 Constructeur zUne fonction + new -- réutilisable

35 Prototype

36 Héritage

37 AJAX zAsynchronous Javascript and XML zLa page n’est pas rechargée zUtilisation yValidation par le serveur des données d’un formulaire en temps réel yAutocompletion yPréchargement à la demande. yContrôles et effets sophistiquées dans les interfaces usager sans rechargment des pages: progress bar, calendriers, arbres… yRafraîchissement des données etmode « push » par le serveur ySoumission partielle sans rechargement de la page: listes de formulaires dépendants. yMashups: obtenir et intégrer des données provenant de plusieurs sources. yPage == application qui s’approche d’une application desktop.

38

39 Propriétés de la requête

40 Méthodes de la requête

41 Post

42 Exemples zhttp://www.w3schools.com/js/js_examples_3.asphttp://www.w3schools.com/js/js_examples_3.asp

43 Références zJavascript tutorial yhttp://www.w3schools.com/js/default.asphttp://www.w3schools.com/js/default.asp yhttp://www.howtocreate.co.uk/tutorials/javascript/combine dpagehttp://www.howtocreate.co.uk/tutorials/javascript/combine dpage yhttp://www.javascriptkit.com/javatutors/http://www.javascriptkit.com/javatutors/ yhttp://www.webreference.com/js/column79/3.html