Formation Applications Web

JavaScript : les bases

JavaScript est le langage qui permet de manipuler le HTML et CSS dans une page Web pour obtenir des interfaces plus conviviales, plus réactives, plus fluides.

La maîtrise de JavaScript est un préalable indispensable avant d'aborder
le développement d'applications Web avec Ajax (Asynchronous JavaScript ans XML) et les fonctionnalités avancées des nouveaux navigateurs : Drag n Drop, gélocalisation, communication, application cache...

Objectifs

Acquérir les bases JavaScript nécessaires pour développer des interfaces (pages Web) plus conviviales et interactives.

Durée : 3 jours
Public : Personnes souhaitant créer ou mettre à jour un site Web avec des interfaces interactives et conviviales.

Personnes souhaitant connaître JavaScript avant d'utiliser un framework.
Pré-requis : Pratiquer couramment les outils informatiques et savoir naviguer sur le Web, connaître le HTML et le CSS, quelques notions d'anglais.

Afficher le détail

Programme

Introduction

  • JavaScript : Pourquoi faire ?
  • Les différentes versions, la compatibilité avec les navigateurs
  • Les outils
    présentation de l'éditeur Aptana, FireFox avec Firebug
  • Insérer un script dans un document XHTML ou HTML5

JavaScript : Le cœur du langage

  • La syntaxe
  • Les variables
  • Les fonctions globales
  • Les opérateurs
  • Les structures de contrôle
  • Les exceptions
  • Les fonctions
    Définition, arguments fonctions littérales, fermeture
  • Les objets
    Définition, objets littéraux, prototype
  • Les objets du langage
    Array, Date, Math, RegExp, String...
    Manipuler les tableaux , les dates, les chaînes de caractères...
  • Ateliers
    Créer un convertisseur Euros vers Francs
    Afficher une date et un compte à rebours
    Contrôler la syntaxe d'une adresse email

Les objets du navigateur

  • Introduction
  • Window, Les cookies, Document, Location
  • Frames, Navigator, Form, History, Image, Screen
  • Ateliers
    Créer un diaporama "simple" et automatique
    Mémoriser les préférences de l'utilisateur

Le DOM (Document Object Model)

  • Rappel sur le HTML
  • Modélisation d'un document
  • Les interfaces
  • Manipuler les nœuds, les attributs
  • Créer et insérer de nouveaux éléments
  • Modifier les attributs d'un élément
  • Modifier le contenu d'un élément,
    insérer dynamiquement une chaîne de caractères, du HTML
  • Ateliers
    Insérer un message avec innerHTML
    Insérer un message avec le DOM

L'API JavaScript HTML5

Introduction
  • Les évolutions JavaScript
  • Les équipements, les navigateurs
Présentation des nouvelles fonctionnalités
  • Drag and Drop
  • Geo localisation
  • Server Sent Events
  • Web Messaging, channel messaging
  • Web Storage : sessionStorage, localStorage, base de données
  • Application Cache
  • Web Worker

Les styles CSS

  • Rappel sur les styles CSS
  • Manipuler les styles CSS avec JavaScript,
    ajouter une classe, appliquer un style...
  • Ateliers
    Afficher/masquer un élément
    Créer une fonction pour ajouter une classe à un élément
    Créer une fonction pour retirer une classe à un élément

La gestion des événements

  • JavaScript dans une URL
  • Modèle "DOM 0"
  • Modèle Microsoft Internet Explorer (MSIE)
  • Modèle DOM 2
  • Compatibilité MSIE et DOM 2
  • Ateliers
    Créer un menu extensible
    Afficher une infobulle au survol d'un élément
    Créer une fonction "universelle" pour gérer les événements

Les formulaires

  • Les différents éléments d'un formulaire
  • Valider et soumettre le formulaire
  • Atelier : Créer un formulaire
    Afficher le nombre de caractères d'un champ
    Valider la syntaxe d'une adresse email ou d'une donnée
    Installer un calendrier (plugin jQuery)
    Soumettre le formulaire

Aller plus loin

  • Les bonnes pratiques
  • Réorganiser le code
  • Rendre le JavaScipt discret "Unobtrusive JavaScript"
  • Avoir des pages accessibles
  • Les bibliothèques et frameworks
    • Présentation de jQuery
    • Présentation de Dojo
  • Présentation d'Ajax Asynchronous JavaScript And XML

Les ateliers

Les ateliers illustrent par des exemples concrets les sujets abordés, apportant ainsi aux participants une première expérience en JavaScript.

  • La formation peut se dérouler avec l'éditeur dont vous disposez, cela peut être Eclipse, Aptana, DreamWeaver... Si vous ne disposez pas d'éditeur la formation pourra se dérouler avec Eclipse Aptana.

Financement

Financement possible au titre de la formation continue.
Consultez votre OPCA (Organisme Paritaire Collecteur Agréé) ou contactez-nous.

Retour vers le haut de page