PLB CONSULTANT : 03. Javascript - Fondamentaux

Introduction aux techniques http, aux navigateurs et leurs DOM

Les principes de base des technologies clients serveurs

Présentation des différentes possibilités avec illustration par des exemples complexes et concrets

Mode d'appels des scripts depuis les pages HTML

Comment créer une zone de saisie ?

Les différents modes de saisie HTML

La mise en page avec le CSS

Introduction aux navigateurs, au JavaScript et au DOM

Les principes d'utilisation des DOM, les différences principales entre les navigateurs et les conseils d'utilisation

L'interpréteur JavaScript: entrées/sorties des programmes

Présentation de la console

Travaux pratiques

Objectif : Prendre en main son environnement

Description : Manipulation depuis la console  pour suivre le comportement d’un premier script simple

Le langage JavaScript

Introduction au langage JavaScript, présentation d'exemples simples, les versions de JavaScript, JavaScript embarqué dans les pages HTML

La grammaire du langage, les variables, les types de données, les opérateurs, les instructions, les structures de programmation, la définition et l'utilisation de fonctions

Les objets et leurs utilisations en JavaScript, les dialogues avec l'utilisateur, les tableaux, la gestion des événements et les différences selon les navigateurs, les objets prédéfinis

Les pièges classiques en JavaScript

Travaux pratiques

Création d’un premier script permettant de saisir des nombres et d’afficher en temps-réel la moyenne, le plus grand, le plus petit, etc.

Les objets du langage JavaScript

Gestion des chaînes de caractères à travers l'objet String

Les principales fonctions mathématiques dans l'objet Math

Manipulation des dates via l'objet Date

Manipulation des tableaux via l'objet Array

Les expressions régulières dans le JavaScript

Travaux pratiques 

Objectif : Se familiariser avec la richesse des bibliothèques d’objets Javascript

Description : Extraction de la date locale d’un visiteur pour effectuer des calculs sur les minutes et les jours. (getDate, getDay, getHours, etc. ) afin de présenter un compteur qui affiche des informations sur le temps passé sur une page (échéance de validation d’un caddie)

Javascript : Les objets de la page HTML

L'objet Windows : gestion des fenêtres et de leur communication. Les popups

L'objet Document : le fonctionnement de l'objet Document. Interactivité, contrôle et transformation des pages HTML

L'objet Form : contrôle des données saisies dans un formulaire, gestion des contenus des champs de saisie. Formulaire dynamique

Travaux pratiques 

Objectif : Savoir gérer les objets JavaScript et les objets HTML

Description : Création de formulaire et de panier d’achat

Manipulation de la page (DOM)

Sélection d'éléments

Modification du contenu HTML

Modification du graphisme CSS

Travaux pratiques

On manipule le panier d’achat sous forme de tableau HTML géré via le DOM. On propose d’implémenter le Drag and Drop avec dans la fenêtre de gauche les titres des livres et dans la fenêtre de droite la panier d’achat. Si l’objet est mal centré lors du « drop » il retourne sur la fenêtre de gauche.

AJAX : dialoguer avec le serveur

Pourquoi AJAX (Asynchronous Javascript And Xml ) ?

XMLHttpRequest

Méthodes et en-têtes http

Récupération de contenus HTML, XML ou JSON

Consommer un web Service en Javascript

Travaux pratiques

Objectif : Dialoguer avec le serveur sans recharger la page

Description : On alimente les titres des couvertures du TP précédent par un appel à un Web Service

Responsive Design

Les requêtes de média (Media Queries)

Comment gérer les différences de taille des écrans ?

Les grilles fluides

Des images adaptatives

Créer du design adaptatif

Présentation de Bootstrap

CSS et Responsive Design

Travaux pratiques

Objectif : Savoir mettre en œuvre un site responsive

Description : Passage de notre application Web en responsive