Ce livre sur l'apprentissage du langage JavaScript s'adresse à des lecteurs qui souhaitent maîtriser cette brique incontournable et omniprésente dans le développement de sites web (intranet, extranet, internet) et dans celui d’applications hybrides pour smartphones et tablettes.
En effet, même si des solutions logicielles existent pour contourner la connaissance du langage JavaScript, sa maîtrise est un atout essentiel pour acquérir une expertise dans le domaine des technologies du Web 2.0.

En prenant le parti que le lecteur n'a que des connaissances minimales en programmation, l'auteur débute par des rappels ou des apports en algorithmie. Il explique ensuite les bases du langage JavaScript. Les différents concepts, principes ou fonctionnalités sont mis en œuvre au travers d'exemples concrets facilement réutilisables ensuite dans d'autres développements.

Dans la mesure où le langage JavaScript interagit avec d'autres technologies web (ou langages) comme l'incontournable HTML, les feuilles de styles CSS, les langages de script orientés serveurs comme PHP, ce livre vous permettra aussi de faire vos premiers pas sur ces différentes technologies.

Dans cette quatrième édition, le livre intègre des chapitres supplémentaires relatifs aux principaux frameworks JavaScript tels que Svelte et React facilitant le développement d’applications web.
Le dernier chapitre présente React Native (déclinaison de React) qui permet de développer aisément des applications pour mobiles avec une approche hybride, c’est-à-dire avec un même code déployable sur plateformes Android et iOS (iPhone et iPad).

Tous les chapitres du livre intègrent de nombreux exemples largement commentés et en progression logique. Des éléments complémentaires sont en téléchargement sur le site www.editions-eni.fr. Vous y trouverez aussi des applications « bonus », non décrites dans le livre.



Quizinclus dans
la version en ligne !

• Testez vos connaissances à l'issue de chaque chapitre
• Validez vos acquis

Téléchargements

• Des fichiers complémentaires (1 Ko)

Présentation du langage JavaScript

1. 1. Définition et rapide historique
2. 2. Prérequis pour un apprentissage aisé du langage
3. 3. Outillage nécessaire
4. 4. Positionnement du JavaScript face à d’autres technologies de développement web (HTML, CSS, PHP...)

Développement à partir d’algorithmes

1. 1. Présentation de la notion d'algorithme
2. 2. Notion de variable
   1. 2.1 Présentation des notions de variable et de type
   2. 2.2 Types de base et opérations associées
   3. 2.3 Intérêt des types
   4. 2.4 Utilisation des variables dans des expressions
   5. 2.5 Tableau récapitulatif des opérateurs
3. 3. Manipulation des variables
   1. 3.1 Nommage des variables
   2. 3.2 Affectation
   3. 3.3 Exercice n°1 : Inversion du contenu de deux variables mémoire
   4. 3.4 Affichage des résultats
   5. 3.5 Exercice n°2 : Surfaces de cercles
   6. 3.6 Saisie au clavier
   7. 3.7 Exercice n°3 : Surface et volume d'une sphère
4. 4. Fonctions prédéfinies
   1. 4.1 Exercice n°4 : Affichage de la longueur d'un nom
   2. 4.2 Exercice n°5 : Détermination des initiales
5. 5. Traitements conditionnés
   1. 5.1 Exercice n°6 : Polynôme du second degré
   2. 5.2 Exercice n°7 : Libellé du mois en clair
   3. 5.3 Exercice n°8 : Libellé du mois en clair (Suivant ... Finsuivant)
6. 6. Structures itératives
   1. 6.1 Principe des itérations
   2. 6.2 Structures itératives de base
   3. 6.3 Exercice n°9 : Moyenne de 10 nombres
   4. 6.4 Exercice n°10 : Moyenne d'une série de n nombres
   5. 6.5 Exercice n°11 : Plus Grand Commun Diviseur par la méthode des divisions successives
   6. 6.6 Structure itérative Pour
   7. 6.7 Exercice n°12 : Calcul de la moyenne de 10 nombres
   8. 6.8 Exercice n°13 : Décompte du nombre de voyelles dans un mot
7. 7. Tableaux à dimension unique
   1. 7.1 Exercice n°14 : Décompte des nombres pairs dans un tableau
8. 8. Tableaux à dimensions multiples
   1. 8.1 Exercice n°15 : Mini-tableur
9. 9. Procédures, fonctions et passage de paramètres
   1. 9.1 Les objectifs
   2. 9.2 Les procédures
   3. 9.3 Exercice n°16 : Appel d'une procédure avec passage de paramètres
   4. 9.4 Les fonctions
   5. 9.5 Exercice n°17 : Appel d'une fonction avec passage de paramètres

Bases du langage JavaScript

1. 1. Méthodologie d'apprentissage
2. 2. Variables (déclaration et typage)
   1. 2.1 Exercice n°2 : Surfaces de cercles
   2. 2.2 Exercice n°3 : Surface et volume d'une sphère
   3. 2.3 Exercice n°4 : Nombre de lettres d'un mot
   4. 2.4 Exercice n°5 : Détermination des initiales

Conditionnement des traitements

1. 1. Présentation de la syntaxe
2. 2. Exemples
   1. 2.1 Exercice n°6 : Polynôme du second degré
   2. 2.2 Exercice n°8 : Impression du libellé d'un mois

Traitements itératifs (boucles)

1. 1. Présentation de la syntaxe des boucles
2. 2. Boucle while
   1. 2.1 Syntaxe
   2. 2.2 Exercice n°9 : Moyenne de 10 nombres saisis au clavier
   3. 2.3 Exercice n°10 : Moyenne d'une série de n nombres saisis au clavier
3. 3. Boucle do while
   1. 3.1 Syntaxe
   2. 3.2 Exercice n°11 : Moyenne d'une série de n nombres saisis au clavier
4. 4. Boucle for
   1. 4.1 Syntaxe
   2. 4.2 Exercice n°12 : Moyenne d'une série de 10 nombres saisis au clavier
   3. 4.3 Exercice n°13 : Décompte du nombre de voyelles dans un mot

Tableaux

1. 1. Tableaux à dimension unique
   1. 1.1 Syntaxe
   2. 1.2 Exercice n°14 : Décompte des nombres pairs dans un tableau
2. 2. Tableaux à dimensions multiples
   1. 2.1 Syntaxe
   2. 2.2 Exercice n°15 : Mini-tableur

Procédures et fonctions

1. 1. Les procédures
   1. 1.1 Syntaxe
   2. 1.2 Exercice n°16 : Appel d'une procédure avec passage de paramètres
2. 2. Les fonctions
   1. 2.1 Syntaxe
   2. 2.2 Exercice n°17 : Appel d'une fonction avec passage de paramètres

Approche "objet" en JavaScript

1. 1. Introduction
2. 2. Programmation orientée objet au travers d’exemples
   1. 2.1 Séquence 1 : Déclaration des objets JavaScript en méthode "Inline"
   2. 2.2 Séquence 2 : Création des objets JavaScript par constructeur
   3. 2.3 Séquence 3 : Variables privées dans une instance d'objet
   4. 2.4 Séquence 4 : Passage de paramètre(s) à un constructeur
   5. 2.5 Séquence 5 : Non-partage des méthodes par les instances d'objets
   6. 2.6 Séquence 6 : Notion de prototype
   7. 2.7 Séquence 7 : Surcharge d'une méthode
   8. 2.8 Séquence 8 : Extension d'un prototype
   9. 2.9 Séquence 9 : Mécanisme de l'héritage
   10. 2.10 Séquence 10 : Limite de l'héritage de la séquence n°9
   11. 2.11 Séquence 11 : Une seconde limite à notre héritage

Objets de base de JavaScript

1. 1. Présentation
2. 2. Les objets de base
   1. 2.1 Objet Array
   2. 2.2 Objet Date
   3. 2.3 Objet Math
   4. 2.4 Objet window
   5. 2.5 Objet navigator
   6. 2.6 Objet String

Les nouveautés d’EcmaScript

1. 1. Présentation générale
2. 2. Apports au niveau de la Programmation Orientée Objet
   1. 2.1 Notion de prototype
   2. 2.2 Surcharge d’une méthode
   3. 2.3 Extension de prototype
   4. 2.4 Héritage
   5. 2.5 Premier exemple POO en EcmaScript 6
   6. 2.6 Héritage en EcmaScript
   7. 2.7 Méthodes getter, setter et static en EcmaScript 6
3. 3. Fonctions fléchées (arrow functions)
   1. 3.1 Avantages des fonctions fléchées
   2. 3.2 Exemple
4. 4. Structures Map, Set et boucle for of
   1. 4.1 Présentation générale
   2. 4.2 Exemple
5. 5. Portée des variables (var ou let)
   1. 5.1 Présentation générale
   2. 5.2 Exemple
6. 6. Promesses (promise)
   1. 6.1 Présentation générale
   2. 6.2 Exemple
7. 7. Déstructuration
   1. 7.1 Présentation générale
   2. 7.2 Exemple

Saisie de données via des formulaires

1. 1. Pilotage des contrôles de saisie via JavaScript
   1. 1.1 Contrôle de saisie sur un champ texte
   2. 1.2 Contrôle de numéricité d'une saisie dans un champ texte
   3. 1.3 Contrôle de caractères alphabétiques d'une saisie dans un champ texte
   4. 1.4 Contrôle de caractères alphabétiques et numériques d'une saisie dans un champ texte
   5. 1.5 Contrôle de longueur d'une saisie dans un champ texte
   6. 1.6 Contrôle de saisie sur une adresse e-mail
   7. 1.7 Contrôle d'un choix dans une liste déroulante (version simplifiée)
   8. 1.8 Contrôle d'un choix dans une liste déroulante (version étendue)
   9. 1.9 Contrôle d'un choix par bouton radio
   10. 1.10 Contrôle d'un choix par case à cocher

Modèle DOM

1. 1. Introduction
   1. 1.1 Définition de DOM
   2. 1.2 Définition de l'arborescence
2. 2. Apprentissage du modèle DOM
   1. 2.1 Script "Hello World!"
   2. 2.2 Différence entre write et writeln
   3. 2.3 Gestion des liens hypertextes
   4. 2.4 Gestion des images
   5. 2.5 Gestion des formulaires et de leurs balises
   6. 2.6 Gestion des ancres
   7. 2.7 Gestion de la navigation entre pages web
   8. 2.8 Affichage de caractéristiques générales du document
   9. 2.9 Gestion des boutons dans les formulaires
   10. 2.10 Gestion des tableaux (balise HTML table)

Exploration de flux XML via DOM

1. 1. Notion de flux XML
2. 2. Exemples
   1. 2.1 Exemple 1 : Affichage d'un contenu d’e-mail codé en XML
   2. 2.2 Exemple 2 : Liste des marques des voitures (fichier voitures.xml)
   3. 2.3 Exemple 3 : Liste des marques des voitures avec une boucle
   4. 2.4 Exemple 4 : Liste des nœuds rattachés à la racine
   5. 2.5 Exemple 5 : Liste des champs (nœuds) de chaque voiture
   6. 2.6 Exemple 6 : Remplacement d'une valeur de nœud
   7. 2.7 Exemple 7 : Accès aux attributs
   8. 2.8 Exemple 8 : Accès à un nœud parent
   9. 2.9 Exemple 9 : Parcours arrière des nœuds
   10. 2.10 Exemple 10 : Remplacement systématique d'une valeur d'attribut
   11. 2.11 Exemple 11 : Conversion XML en HTML
   12. 2.12 Exemple 12 : Suppression d'un nœud dans un flux XML

Gestion des cookies en JavaScript

1. 1. Notion de cookie
2. 2. Écriture d'un cookie
3. 3. Lecture d'un cookie
4. 4. Suppression d'un cookie

Stockage local de données

1. 1. Présentation générale des solutions
   1. 1.1 Stockage par sessionStorage
   2. 1.2 Stockage par localStorage
2. 2. Mise en œuvre du Web Storage au travers d'exemples
   1. 2.1 Exemple 1 : Stockage par localStorage de chaînes de caractères
   2. 2.2 Exemple 2 : Stockage dans le localStorage d'un objet JavaScript

Stockage distant (Ajax - PHP - MySQL - XML)

1. 1. Présentation générale de la solution
2. 2. Mise en œuvre du stockage distant au travers d'exemples
   1. 2.1 Exemple 1 : Accès Ajax sur BDD MySQL (liste de l'ensemble des voitures)
   2. 2.2 Exemple 2 : Accès MySQL via Ajax

Stockage distant (Ajax - PHP - MySQL - JSON)

1. 1. Présentation générale de la solution
2. 2. Mise en œuvre du stockage distant au travers d'exemples
   1. 2.1 Exemple 1 : Présentation du système de notation JSON
   2. 2.2 Exemple 2 : Lecture d'un fichier JSON via XMLHttpRequest
   3. 2.3 Exemple 3 : Lecture d'un fichier JSON via XMLHttpRequest et un script serveur en PHP
   4. 2.4 Exemple 4 : Lecture d'une table MySQL via XMLHttpRequest (serveur PHP et flux JSON)
   5. 2.5 Exemple 5 : Recodage de l'exemple 4 avec une liste déroulante

Géolocalisation

1. 1. Principe de la géolocalisation
2. 2. Exemples d'applications de géolocalisation
   1. 2.1 Exemple 1 : Affichage de la carte de l'Ouest de la France
   2. 2.2 Exemple 2 : Affichage de la carte de l’Ouest de la France (marqueur)
   3. 2.3 Exemple 3 : Affichage de la carte de l’Ouest de la France (marqueur et cercles de population)
   4. 2.4 Exemple 4 : Affichage de la carte de l'Ouest de la France (informations météorologiques)
   5. 2.5 Exemple 5 : Affichage de la carte de Rennes Centre-Sud (avec photo des sites importants)
   6. 2.6 Exemple 6 : Affichage de la carte de Rennes (Street View)

Dessin (HTML5 CANVAS)

1. 1. Présentation de l'API HTML5 CANVAS
2. 2. Exemples d'applications de l'élément <canvas>
   1. 2.1 Exemple 1 : Tracé d'un simple carré
   2. 2.2 Exemple 2 : Tracé d'une grille de TicTacToe
   3. 2.3 Améliorations possibles sur le jeu du TicTacToe

Graphiques de gestion

1. 1. Différentes solutions de conception de graphiques de gestion
2. 2. Exemples d'utilisation des API Google Charts
   1. 2.1 Exemple 1 : Tracé d'un histogramme
   2. 2.2 Exemple 2 : Tracé d'un graphique en secteurs
   3. 2.3 Exemple 3 : Tracé d'une carte

Positionnement des frameworks JavaScript

1. 1. Présentation générale des frameworks JavaScript
   1. 1.1 Frameworks « front-end »
   2. 1.2 Frameworks « back-end »
   3. 1.3 Solutions de développement « hybride »
2. 2. Les frameworks Node.js, Svelte, React et React Native

Installation de Node.js

1. 1. Présentation du framework Node.js
2. 2. Installation du framework Node.js

Framework Svelte

1. 1. Présentation du framework Svelte
2. 2. Site svelte.dev
3. 3. Création locale d’un projet Svelte
4. 4. Installation de Microsoft Visual Studio Code
5. 5. Projets Svelte
   1. 5.1 « eni_svelte_01 » - Première application
   2. 5.2 « eni_svelte_02 » - Importance des commentaires
   3. 5.3 « eni_svelte_03 » - Mise en place d’une image
   4. 5.4 « eni_svelte_04 » - Intégration de balises HTML
   5. 5.5 « eni_svelte_05 » - Un premier bouton
   6. 5.6 « eni_svelte_06 » - Le rôle du $ dans les formules
   7. 5.7 « eni_svelte_07 » - Champs de saisie
   8. 5.8 « eni_svelte_08 » - Saisie avec curseur
   9. 5.9 « eni_svelte_09 » - Cases à cocher
   10. 5.10 « eni_svelte_10 » - Boutons « radio »
   11. 5.11 « eni_svelte_11 » - Liste
   12. 5.12 « eni_svelte_12 » - Liste et boutons « radio »
   13. 5.13 « eni_svelte_13 » - Boutons Svelte Materialify
   14. 5.14 « eni_svelte_14 » - Liste déroulante Svelte Materialify
   15. 5.15 « eni_svelte_15 » - Switches Svelte Materialify
   16. 5.16 « eni_svelte_16 » - Première application Sapper-MySQL
   17. 5.17 « eni_svelte_17 » - Liste déroulante Sapper-MySQL
   18. 5.18 « eni_svelte_18 » - Ajout d’un sport via Sapper-MySQL
   19. 5.19 « eni_svelte_19 » - Mise à jour Sapper-MySQL
   20. 5.20 « eni_svelte_20 » - Suppression Sapper-MySQL

Framework React

1. 1. Présentation de React
2. 2. Création locale d’un projet React
3. 3. Projets React basiques
   1. 3.1 « eni_react_bases_01 »
   2. 3.2 « eni_react_bases_02 »
   3. 3.3 « eni_react_bases_03 »
   4. 3.4 « eni_react_bases_04 »
   5. 3.5 « eni_react_bases_05 »
   6. 3.6 « eni_react_bases_06 »
4. 4. Les props React
   1. 4.1 « eni_react_props_01 »
   2. 4.2 « eni_react_props_02 »
   3. 4.3 « eni_react_props_03 »
5. 5. Les librairies tierces pour React
   1. 5.1 « eni_react_material-ui_table_01 »
   2. 5.2 « eni_react_material-ui_table_02 »
   3. 5.3 « eni_react_material-ui_table_03 »
   4. 5.4 « eni_react_recharts_01 »
   5. 5.5 « eni_react_recharts_02 »
   6. 5.6 « eni_react_recharts_03 »
6. 6. Lecture de fichiers JSON sous React
   1. 6.1 Différents types de flux JSON
   2. 6.2 « eni_react_lecture_json_local »
7. 7. Interactions avec un serveur PHP-MySQL
   1. 7.1 « eni_react_php_mysql_01 »
   2. 7.2 « eni_react_php_mysql_02 »
   3. 7.3 « eni_react_php_mysql_03 »
   4. 7.4 « eni_react_php_mysql_04 »
   5. 7.5 « eni_react_php_mysql_05 »
8. 8. La navigation sous React (routage)

Framework React Native

1. 1. Approches de développement pour périphériques mobiles
   1. 1.1 Développements web, natif et hybride
      1. 1.1.1 Applications web
      2. 1.1.2 Applications natives
      3. 1.1.3 Applications hybrides
   2. 1.2 Les trois principales plateformes
      1. 1.2.1 Apple iOS
      2. 1.2.2 Android
      3. 1.2.3 Windows Phone, Windows 10 Mobile
2. 2. Présentation du framework React Native
3. 3. Projets React Native
   1. 3.1 Application « eni_react_native_helloworld »
   2. 3.2 Application « eni_react_native_list_view »
   3. 3.3 Application « eni_react_native_input_text »
   4. 3.4 Application « eni_react_native_picker_basique »
   5. 3.5 Application « eni_react_native_hook »
   6. 3.6 Application « eni_react_native_php_mysql »
   11. Index