Javascript, l'acteur du Web

Présentation

Apparu au milieu des années 1990, désormais Javascript est devenu incontournable dans le développement de sites Web. C'est par l'utilisation de ce langage qu'il est possible de donner des comportements aux pages Web.
Des applications comme GoogleMaps et gmail en sont la preuve, l'intégration du javascript rendant transparents les accès clients/serveur.

Au cours de cette formation vous apprendrez à utiliser le langage javascript en manipulant les éléments HTML constituant les pages Web (modification du Document Object Model) et ainsi réaliser tout type de transformations d'un document : insérer des éléments, modifier leur style, réagir aux actions de l'utilisateur, réaliser des applets HTML5 par l'utilisation de l'élément canvas...
Pour finir vous réaliserez des requêtes HTTP, et exploiterez les données fournies en retour : Technique de programmation AJAX.

Contenu

  • Rappel sur les technologies standardisées du Web
  • La structure du langage JavaScript
  • Les types de données
  • La gestion des événements
  • Le javascript dans les formulaires HTML
  • Javascript et HTML5, le cas des canvas
  • Manipulation du DOM XML
  • Ajax avec XMLHttpRequest()

Participants

Ce stage concerne les développeurs web et les informaticiens ayant déjà une culture HLTML ou XML et désirant exploiter Javascript afin de rendre les pages plus interactives.

Pré-requis

Bonnes connaissances du HTML ou du XML. Connaissances d'un autre langage de programmation C, PHP, Shell...

Travaux pratiques

Écriture de nombreux scripts.

Mise en application de la gestion de l'interactivité (clavier souris) et génération de requêtes ajax via XMLHttpRequest.

Réalisation d'une applet javascript avec un élément canvas (HTML5).

Programme de la formation

  • Les technologies normalisées du Web
    • Les rôles respectifs de HTTP, HTML, CSS et javascript
    • Comment séparer les comportements de la structure des pages HTML.
    • Les soucis de compatibilité des navigateurs vis-à-vis des versions de JavaScript
    • Javascript sans nuire à l'accessibilité ni au référencement
    • Le Web 2.0 et le XML. Intérêt du xHTML avec Javascript
  • La structure du langage JavaScript
    • Les structures de contrôle : for, while...
    • La déclaration et la portée des variables
    • Les Types de données (Number, Boolean, Date, Math, String, Array). Méthodes de conversion de type. Détection de type avec typeof()
    • Les opérateurs logiques et arithmétiques
    • Création de fonctions et déclaration dans closure
    • Utiliser les exceptions
    • La programmation orientée objet en JavaScript
      • Création de classes (méthodes, propriétés)
      • Appel du constructeur, surcharge de méthode
      • Les mots réservés prototype, this
      • Extension des objets prédéfinis
    • Les objets prédéfinis du langage : Array, Date, Math, String, Regexp...
    • Le format JSON (JavaScript Object Notation).
    • Comment déboguer un script.
  • Programmation événementielle
    • Les événements et la norme du W3C. Comportements des navigateurs en fonction des versions de DOM
    • Utilisation de l'objet Event
    • Comment placer des triggers sur des éléments HTML. Les bonnes pratiques à adopter
    • Comment détruire des trigger
    • Le traitement des événements clavier, souris
    • La gestion des formulaires, les apports en HTML5
    • Les objets du DOM : window, document, location
    • Gestion des cookies avec document.cookie
  • Interaction avec les feuilles de style en cascade
    • Équivalence entre les noms des propriétés CSS et Javascript
    • Modifier les propriétés CSS des objets du DOM
    • Modifier le media associé à une CSS : illustration sur le media projection
  • Manipulation du DOM d'un document XML
    • Rappel sur le langage XML (éléments, attributs, espace de nommage)
    • Manipulation complète des objets du DOM : lecture, insertion, suppression, modification de nœuds et d'attributs)
    • Travail sur plusieurs espaces de nommage (xmlns)
  • Les nouvelles possibilités du HTML5 : les canvas
    • Dessiner dans un canvas
    • Placer des images dans un canvas
    • Produire des distorsions sur des images
  • Ajax
    • Présentation de l'objet XMLHttpRequest
    • Le mode synchrone et le mode asynchrone
    • Les bibliothèques disponibles : Jquery