JavaScript pour l'intégrateur web Créer des sites web dynamiques et interactifs

Présentation

JavaScript fait partie des trois langages fondateurs du web avec l'HTML (Hypertext Markup Language) pour déterminer la structure des pages et les CSS (Cascading Style Sheets) pour concevoir la mise en forme et la mise en page. Il permet de concevoir des sites dynamiques et interactifs ; il possède l’avantage d’être reconnu nativement par tous les navigateurs web et d’être rapide à interpréter.

Ce livre est destiné aux intégrateurs web qui connaissent déjà l'HTML et les CSS et qui veulent optimiser le dynamisme et l’interactivité de leur site à l’aide du langage JavaScript.

Les premiers chapitres sont consacrés aux bases du langage JavaScript. Vous y apprendrez à insérer du JavaScript dans vos pages et vous découvrirez les règles de la syntaxe. Vous apprendrez à utiliser les données, les variables, les fonctions, les tableaux et aborderez la notion d'objets JavaScript.

Vous découvrirez ensuite le concept de DOM (Document Object Model) et vous apprendrez à l'utiliser pour accéder aux éléments constitutifs de vos pages que vous pourrez rendre interactifs grâce aux événements de souris, par exemple. Avec toutes ces notions, vous serez en mesure d’exploiter les CSS avec le JavaScript en créant de l’interactivité pour les visiteurs du site.

Un chapitre est consacré à des librairies JavaScript qui seront une aide précieuse pour rendre dynamiques et interactives vos pages web, dans les domaines du design, de l'animation mais aussi des formulaires.

Un chapitre aborde l'apprentissage de deux moteurs de rendu JavaScript, Mustache et Handlebars, qui permettent de créer des templates JavaScript pour afficher des données formatées en JSON (JavaScript Object Notation).

Ce livre se termine par l'étude de l'API Web Storage qui permet de stocker des données saisies par l'utilisateur dans les navigateurs afin de les exploiter...

Table des matières

Chapitre 1 : Introduction
- A. Le JavaScript
  - 1. Une rapide histoire du JavaScript
  - 2. Les moteurs JavaScript des navigateurs
- B. Les objectifs du JavaScript
  - 1. Dynamiser les pages web
  - 2. Le JavaScript côté serveur et côté client
- C. Les prérequis
- D. Les logiciels de développement
- E. Les outils dans les navigateurs
Chapitre 2 : L’essentiel du JavaScript
- A. Insérer du code JavaScript
  - 1. Utiliser la bonne méthode
  - 2. Insérer un script dans la page HTML
  - 3. Associer un script à un bouton
  - 4. Lier un script à une page
- B. Appliquer des règles de syntaxe
- C. Placer le code JavaScript dans la page
- D. Utiliser la console
  - 1. Les alertes dans la console
  - 2. Calculer dans la console
  - 3. Afficher une alerte dans la console
  - 4. Les autres messages pour la console
- E. Les données dans le code JavaScript
  - 1. Définir les types de données
  - 2. Le type Number
  - 3. Le type String
  - 4. Le type Undefined
  - 5. Le type Null
  - 6. Le type Boolean
- F. Les variables
  - 1. L'objet variable
  - 2. Déclarer une variable
  - 3. Le nom des variables
  - 4. Les opérations de calcul avancées
  - 5. Les opérations de comparaison
- G. Les tests de condition
  - 1. Créer des tests
  - 2. Les tests simples avec if
  - 3. Les tests logiques avec ET et OU
  - 4. Les tests imbriqués avec else if
  - 5. Les tests multiples avec switch
- H. Les boucles
  - 1. Les objectifs
  - 2. La boucle while()
  - 3. La boucle do while()
  - 4. La boucle for()
  - 5. Les mots-clés de la boucle for()
- I. Les fonctions
  - 1. Les objectifs
  - 2. Créer une fonction
  - 3. Utiliser des paramètres
  - 4. Renvoyer les résultats
- J. La portée des variables
  - 1. Créer une variable locale
  - 2. Créer une variable globale dans une fonction
  - 3. Créer une variable globale dans le script
- K. Les objets du code JavaScript
  - 1. Définir la notion d'objet
  - 2. Créer un nouvel objet
  - 3. La méthode de création littérale
  - 4. La méthode de création avec un constructeur
  - 5. Récupérer les valeurs des propriétés
  - 6. Les méthodes des objets
- L. Les tableaux
  - 1. Utiliser les tableaux
  - 2. Créer un tableau
  - 3. Récupérer une valeur d'un tableau
  - 4. Une propriété et une méthode des tableaux
  - 5. Les propriétés et les méthodes de l'objet Array()
- M. Les chaînes de caractères
  - 1. Créer un objet de type chaîne de caractères
  - 2. Une propriété et une méthode des chaînes de caractères
  - 3. Les propriétés et les méthodes de l'objet String()
- N. Les dates
  - 1. Créer des dates
  - 2. Des méthodes de l'objet Date()
  - 3. Les propriétés et les méthodes de l'objet Date()
Chapitre 3 : Exploiter le DOM
- A. Le Document Object Model
  - 1. Utiliser le DOM
  - 2. La notion de document
  - 3. La notion d'objet et d'arbre
  - 4. La notion de modèle
  - 5. Le DOM
- B. Accéder aux éléments de la page web
  - 1. La fenêtre du navigateur
  - 2. Le document
  - 3. Accéder aux nœuds de la page par les identifiants
  - 4. Accéder aux nœuds de la page par les noms des éléments
  - 5. Accéder aux nœuds de la page par les noms de classe CSS
  - 6. Afficher les propriétés d'un nœud
  - 7. Accéder aux propriétés d'un nœud
- C. Modifier des éléments dans la page web
  - 1. Modifier un attribut HTML dans un élément
  - 2. Créer un attribut HTML dans un élément
  - 3. Les propriétés innerHTML et innerText
  - 4. Modifier le contenu d'un élément de la page
  - 5. Ajouter un contenu à un élément de la page
- D. Créer des éléments dans la page web
  - 1. La première solution
  - 2. La deuxième solution
- E. D'autres méthodes des nœuds
  - 1. Supprimer un nœud enfant
  - 2. Remplacer un nœud enfant
  - 3. Dupliquer un nœud
  - 4. Insérer un nœud avant un nœud référence
  - 5. Tester la présence de nœuds enfants
Chapitre 4 : Les événements JavaScript
- A. Comprendre les événements
- B. Utiliser un bouton déclencheur d'action
  - 1. Réagir au clic sur un bouton
  - 2. Utiliser un écouteur d'événement
- C. Utiliser d'autres événements
  - 1. Les événements à écouter
  - 2. Le pointeur "au-dessus"
  - 3. Événement lié aux formulaires
  - 4. L'événement de chargement
Chapitre 5 : Les CSS et le code JavaScript
- A. Introduction
- B. Accéder aux propriétés CSS
  - 1. Les CSS en ligne
  - 2. La syntaxe des propriétés
- C. Appliquer des styles CSS
  - 1. Appliquer des styles en ligne
  - 2. Appliquer une classe CSS
  - 3. Modifier des styles CSS
- D. Affichage dynamique dans un formulaire
Chapitre 6 : Des bibliothèques pour dynamiser les sites
- A. Les bibliothèques JavaScript
- B. La bibliothèque Anime
  - 1. Les objectifs
  - 2. Installer la bibliothèque
  - 3. Cibler les éléments à animer avec les CSS
  - 4. Cibler les éléments à animer avec le DOM
  - 5. Les animations avec des propriétés CSS
  - 6. Les animations avec des transformations CSS
- C. La bibliothèque Animate On Scroll
  - 1. Les objectifs
  - 2. Installer la bibliothèque
  - 3. Les éléments d'animation
  - 4. Les paramètres d'animation
  - 5. Le code complet de cet exemple
- D. La bibliothèque Cleave
  - 1. Les objectifs
  - 2. Installer la bibliothèque
  - 3. Le champ de saisie de la date
  - 4. Le champ de saisie du nombre
  - 5. Le champ de saisie d'un code
- E. La bibliothèque Granim
  - 1. Les objectifs
  - 2. Installer la bibliothèque
  - 3. Créer un dégradé animé avec trois teintes
  - 4. Un dégradé animé au-dessus d'une image
- F. La bibliothèque Tippy
  - 1. Les objectifs
  - 2. Installer la bibliothèque Tippy
  - 3. Ajouter une bulle d'aide textuelle simple
  - 4. Ajouter une bulle d'aide textuelle paramétrée
  - 5. Ajouter une bulle d'aide avec une image
- G. La bibliothèque Micron
  - 1. Les objectifs
  - 2. L'installation de la bibliothèque
  - 3. Insérer un bouton animé
  - 4. Animer le bouton
  - 5. Le code complet de la page
Chapitre 7 : Le moteur de rendu Mustache
- A. Présentation du moteur de rendu Mustache
- B. Les données à afficher
  - 1. La source des données
  - 2. Le format JSON
  - 3. Les objets JavaScript internes
  - 4. Le fichier JSON externe
- C. Installer le fichier mustache.js
- D. Afficher des données internes simples
  - 1. La structure de la page
  - 2. Analyse de la structure
- E. Afficher des données internes répétitives
  - 1. La structure des données JSON
  - 2. La structure de la page
- F. Afficher des données internes et un template séparé
- G. Décomposer le template en blocs
  - 1. Les objectifs
  - 2. Les templates
  - 3. Le rendu
  - 4. Le code complet de l'exemple
- H. Afficher des données extérieures et utiliser un template séparé
  - 1. Les objectifs
  - 2. Les données extérieures
  - 3. La structure de la page
  - 4. Le template
  - 5. L'importation des données JSON
  - 6. Le traitement des données
Chapitre 8 : Le moteur de rendu Handlebars
- A. Présentation du moteur de rendu Handlebars
- B. Installer Handlebars
- C. Concevoir un template avec des données répétitives
  - 1. Les données répétitives
  - 2. Le template
  - 3. Le rendu des données dans le template
  - 4. Le code complet de cet exemple
- D. Décomposer des templates
  - 1. Concevoir les templates
  - 2. Définir le nouveau template
  - 3. Le code complet
- E. Les helpers
- F. Utiliser un helper pour une mise en forme répétitive
  - 1. La répétition des données
  - 2. Définir le helper
  - 3. Appliquer le helper
  - 4. Le code complet
- G. Utiliser un helper pour une concaténation
  - 1. La concaténation des données
  - 2. Définir le helper
  - 3. Appliquer le helper
  - 4. Le code complet
- H. Utiliser un helper conditionnel
  - 1. Utiliser une condition de test
  - 2. Le code complet
- I. Utiliser un helper de contexte
  - 1. Déterminer le contexte
  - 2. Le helper with
  - 3. Le code complet
Chapitre 9 : L'API Web Storage
- A. Le stockage des données dans le navigateur
- B. Les propriétés de Web Storage
  - 1. Les interfaces
  - 2. Ajouter une donnée
  - 3. Récupérer une donnée
  - 4. Supprimer des données
- C. La source des données
  - 1. Saisir des données
  - 2. Gérer les données
  - 3. Le code complet
- Index

Auteur

Christophe AUBRYEn savoir plus

Responsable pédagogique dans un centre de formation et formateur sur les technologies Web et les Arts graphiques pendant plus de quinze ans, Christophe AUBRY est aujourd'hui dirigeant de la société netPlume spécialisée dans la formation vidéo, la rédaction technique et la création de sites internet. Auteur de nombreux livres et vidéos aux Editions ENI (HTML/CSS, RWD, WordPress, Drupal, Joomla…), il reste au fait des nouveautés concernant la conception des sites web en effectuant une veille technologique régulière.