Ce support 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. La maîtrise du langage JavaScript 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 algorithmique puis explique les bases du langage JavaScript en détail. Les différents concepts, principes ou fonctionnalités sont mis en œuvre au travers d'exemples concrets facilement réutilisables.

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.

Des chapitres proposent de découvrir les principaux frameworks JavaScript tels que Svelte et React qui facilitent le développement d’applications web. Le framework React Native (déclinaison de React) permettant de développer aisément des applications pour mobiles en approche hybride, déployables sur plateformes Android et iOS (iPhone et iPad) est aussi présenté.

Dans cette cinquième édition, une partie sur Vue3.js vient compléter la liste des frameworks JavaScript orientés web. Un chapitre est dédié à des librairies logicielles JavaScript disponibles dans le domaine de l’Intelligence artificielle telles que Math.js et TensorFlow.js.

Tous les chapitres du support 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.

Téléchargements

• Des fichiers complémentaires (352 855 Ko)

Présentation du langage JavaScript

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

Développement à partir d’algorithmes

1. Présentation de la notion d'algorithme
2. Notion de variable
   1. 1. Présentation des notions de variable et detype
   2. 2. Types de base et opérations associées
   3. 3. Intérêt des types
   4. 4. Utilisation des variables dans des expressions
   5. 5. Tableau récapitulatif des opérateurs
3. Manipulation des variables
   1. 1. Nommage des variables
   2. 2. Affectation
   3. 3. Exercice n°1 : Inversion du contenude deux variables mémoire
   4. 4. Affichage des résultats
   5. 5. Exercice n°2 : Surfaces de cercles
   6. 6. Saisie au clavier
   7. 7. Exercice n°3 : Surface et volumed’une sphère
4. Fonctions prédéfinies
   1. 1. Exercice n°4 : Affichage de la longueurd’un nom
   2. 2. Exercice n°5 : Déterminationdes initiales
5. Traitements conditionnés
   1. 1. Exercice n°6 : Polynômedu second degré
   2. 2. Exercice n°7 : Libellé du mois enclair
   3. 3. Exercice n°8 : Libellé dumois en clair (Suivant ... Finsuivant)
6. Structures itératives
   1. 1. Principe des itérations
   2. 2. Structures itératives de base
   3. 3. Exercice n°9 : Moyenne de 10 nombres
   4. 4. Exercice n°10 : Moyenne d’une sériede n nombres
   5. 5. Exercice n°11 : Plus Grand CommunDiviseur par la méthode des divisions successives
   6. 6. Structure itérative Pour
   7. 7. Exercice n°12 : Calcul de la moyennede 10 nombres
   8. 8. Exercice n°13 : Décomptedu nombre de voyelles dans un mot
7. Tableaux à dimension unique
   1. 1. Exercice n°14 : Décomptedes nombres pairs dans un tableau
8. Tableaux à dimensions multiples
   1. 1. Exercice n°15 : Mini-tableur
9. Procédures, fonctions et passage de paramètres
   1. 1. Les objectifs
   2. 2. Les procédures
   3. 3. Exercice n°16 : Appel d’une procédureavec passage de paramètres
   4. 4. Les fonctions
   5. 5. Exercice n°17 : Appel d’une fonctionavec passage de paramètres

Bases du langage JavaScript

1. Méthodologie d'apprentissage
2. Variables (déclaration et typage)
   1. 1. Exercice n°2 : Surfaces de cercles
   2. 2. Exercice n°3 : Surface et volumed’une sphère
   3. 3. Exercice n°4 : Nombre de lettresd’un mot
   4. 4. Exercice n°5 : Déterminationdes initiales

Conditionnement des traitements

1. Présentation de la syntaxe
2. Exemples
   1. 1. Exercice n°6 : Polynôme du second degré
   2. 2. Exercice n°8 : Impression du libellé d’unmois

Traitements itératifs (boucles)

1. Présentation de la syntaxe des boucles
2. Boucle while
   1. 1. Syntaxe
   2. 2. Exercice n°9 : Moyenne de 10 nombressaisis au clavier
   3. 3. Exercice n°10 : Moyenne d’une sériede n nombres saisis au clavier
3. Boucle do while
   1. 1. Syntaxe
   2. 2. Exercice n°11 : Moyenne d’une sériede n nombres saisis au clavier
4. Boucle for
   1. 1. Syntaxe
   2. 2. Exercice n°12 : Moyenne d’une sériede 10 nombres saisis au clavier
   3. 3. Exercice n°13 : Décomptedu nombre de voyelles dans un mot

Tableaux

1. Tableaux à dimension unique
   1. 1. Syntaxe
   2. 2. Exercice n°14 : Décomptedes nombres pairs dans un tableau
2. Tableaux à dimensions multiples
   1. 1. Syntaxe
   2. 2. Exercice n°15 : Mini-tableur

Procédures et fonctions

1. Les procédures
   1. 1. Syntaxe
   2. 2. Exercice n°16 : Appel d’une procédureavec passage de paramètres
2. Les fonctions
   1. 1. Syntaxe
   2. 2. Exercice n°17 : Appel d’une fonctionavec passage de paramètres

Approche "objet" en JavaScript

1. Introduction
2. Programmation orientée objet au travers d’exemples
   1. 1. Séquence 1 : Déclarationdes objets JavaScript en méthode "Inline"
   2. 2. Séquence 2 : Créationdes objets JavaScript par constructeur
   3. 3. Séquence 3 : Variablesprivées dans une instance d’objet
   4. 4. Séquence 4 : Passage deparamètre(s) à un constructeur
   5. 5. Séquence 5 : Non-partagedes méthodes par les instances d’objets
   6. 6. Séquence 6 : Notion deprototype
   7. 7. Séquence 7 : Surcharged’une méthode
   8. 8. Séquence 8 : Extensiond’un prototype
   9. 9. Séquence 9 : Mécanismede l’héritage
   10. 10. Séquence 10 : Limite del’héritage de la séquence n°9
   11. 11. Séquence 11 : Une secondelimite à notre héritage

Objets de base de JavaScript

1. Présentation
2. Les objets de base
   1. 1. Objet Array
   2. 2. Objet Date
   3. 3. Objet Math
   4. 4. Objet window
   5. 5. Objet navigator
   6. 6. Objet String

Les nouveautés d’EcmaScript 6

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

Saisie de données via des formulaires

1. Pilotage des contrôles de saisie via JavaScript
   1. 1. Contrôle de saisie sur un champ texte
   2. 2. Contrôle de numéricité d’unesaisie dans un champ texte
   3. 3. Contrôle de caractères alphabétiquesd’une saisie dans un champ texte
   4. 4. Contrôle de caractères alphabétiqueset numériques d’une saisie dans un champ texte
   5. 5. Contrôle de longueur d’une saisie dans unchamp texte
   6. 6. Contrôle de saisie sur une adresse e-mail
   7. 7. Contrôle d’un choix dans une liste déroulante(version simplifiée)
   8. 8. Contrôle d’un choix dans une liste déroulante(version étendue)
   9. 9. Contrôle d’un choix par bouton radio
   10. 10. Contrôle d’un choix par case à cocher

Modèle DOM

1. Introduction
   1. 1. Définition de DOM
   2. 2. Définition de l’arborescence
2. Apprentissage du modèle DOM
   1. 1. Script "Hello World!"
   2. 2. Différence entre write et writeln
   3. 3. Gestion des liens hypertextes
   4. 4. Gestion des images
   5. 5. Gestion des formulaires et de leurs balises
   6. 6. Gestion des ancres
   7. 7. Gestion de la navigation entre pages web
   8. 8. Affichage de caractéristiques généralesdu document
   9. 9. Gestion des boutons dans les formulaires
   10. 10. Gestion des tableaux (balise HTML table)

Exploration de flux XML via DOM

1. Notion de flux XML
2. Exemples
   1. 1. Exemple 1 : Affichage d’un contenud’e-mail codé en XML
   2. 2. Exemple 2 : Liste des marques desvoitures (fichier voitures.xml)
   3. 3. Exemple 3 : Liste des marques desvoitures avec une boucle
   4. 4. Exemple 4 : Liste des nœudsrattachés à la racine
   5. 5. Exemple 5 : Liste des champs (nœuds)de chaque voiture
   6. 6. Exemple 6 : Remplacement d’une valeurde nœud
   7. 7. Exemple 7 : Accès aux attributs
   8. 8. Exemple 8 : Accès à unnœud parent
   9. 9. Exemple 9 : Parcours arrièredes nœuds
   10. 10. Exemple 10 : Remplacement systématiqued’une valeur d’attribut
   11. 11. Exemple 11 : Conversion XML en HTML
   12. 12. Exemple 12 : Suppression d’un nœuddans un flux XML

Gestion des cookies en JavaScript

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

Stockage local de données

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

Stockage distant (Ajax - PHP - MySQL - XML)

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

Stockage distant (Ajax - PHP - MySQL - JSON)

1. Présentation générale de la solution
2. Mise en œuvre du stockage distant au travers d'exemples
   1. 1. Exemple 1 : Présentationdu système de notation JSON
   2. 2. Exemple 2 : Lecture d’un fichierJSON via XMLHttpRequest
   3. 3. Exemple 3 : Lecture d’un fichierJSON via XMLHttpRequest et un script serveur en PHP
   4. 4. Exemple 4 : Lecture d’une tableMySQL via XMLHttpRequest (serveur PHP et flux JSON)
   5. 5. Exemple 5 : Recodage de l’exemple4 avec une liste déroulante

Géolocalisation

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

Dessin (HTML5 CANVAS)

1. Présentation de l'API HTML5 CANVAS
2. Exemples d'applications de l'élément <canvas></canvas>
   1. 1. Exemple 1 : Tracé d’unsimple carré
   2. 2. Exemple 2 : Tracé d’unegrille de TicTacToe
   3. 3. Améliorations possibles sur le jeu du TicTacToe

Graphiques de gestion

1. Différentes solutions de conception de graphiques de gestion
2. Exemples d'utilisation des API Google Charts
   1. 1. Exemple 1 : Tracé d’unhistogramme
   2. 2. Exemple 2 : Tracé d’ungraphique en secteurs
   3. 3. Exemple 3 : Tracé d’unecarte

Positionnement des frameworks JavaScript

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

Installation de Node.js

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

Framework Svelte

1. Présentation du framework Svelte
2. Site svelte.dev
3. Création locale d’un projet Svelte
4. Installation de Microsoft Visual Studio Code
5. Projets Svelte
   1. 1. « eni_svelte_01 » -Première application
   2. 2. « eni_svelte_02 » -Importance des commentaires
   3. 3. « eni_svelte_03 » -Mise en place d’une image
   4. 4. « eni_svelte_04 » -Intégration de balises HTML
   5. 5. « eni_svelte_05 » -Un premier bouton
   6. 6. « eni_svelte_06 » -Le rôle du $ dans les formules
   7. 7. « eni_svelte_07 » -Champs de saisie
   8. 8. « eni_svelte_08 » -Saisie avec curseur
   9. 9. « eni_svelte_09 » -Cases à cocher
   10. 10. « eni_svelte_10 » -Boutons « radio »
   11. 11. « eni_svelte_11 » -Liste
   12. 12. « eni_svelte_12 » -Liste et boutons « radio »
   13. 13. « eni_svelte_13 » -Boutons Svelte Materialify
   14. 14. « eni_svelte_14 » -Liste déroulante Svelte Materialify
   15. 15. « eni_svelte_15 » -Switches Svelte Materialify

Framework React

1. Présentation de React
2. Création locale d’un projet React
3. Projets React basiques
   1. 1. « eni_react_bases_01 »
   2. 2. « eni_react_bases_02 »
   3. 3. « eni_react_bases_03 »
   4. 4. « eni_react_bases_04 »
   5. 5. « eni_react_bases_05 »
   6. 6. « eni_react_bases_06 »
4. Les props React
   1. 1. « eni_react_props_01 »
   2. 2. « eni_react_props_02 »
   3. 3. « eni_react_props_03 »
5. Les librairies tierces pour React
   1. 1. « eni_react_material-ui_table_01 »
   2. 2. « eni_react_material-ui_table_02 »
   3. 3. « eni_react_material-ui_table_03 »
   4. 4. « eni_react_recharts_01 »
   5. 5. « eni_react_recharts_02 »
   6. 6. « eni_react_recharts_03 »
6. Lecture de fichiers JSON sous React
   1. 1. Différents types de flux JSON
   2. 2. « eni_react_lecture_json_local »
7. Interactions avec un serveur PHP-MySQL
   1. 1. « eni_react_php_mysql_01 »
   2. 2. « eni_react_php_mysql_02 »
   3. 3. « eni_react_php_mysql_03 »
   4. 4. « eni_react_php_mysql_04 »
   5. 5. « eni_react_php_mysql_05 »
8. La navigation sous React (routage)

Framework React Native

1. Approches de développement pour périphériques mobiles
   1. 1. Développements web, natif et hybride
      1. a. Applications web
      2. b. Applications natives
      3. c. Applications hybrides
   2. 2. Les trois principales plateformes
      1. a. Apple iOS
      2. b. Android
      3. c. Windows Phone, Windows 10 Mobile
2. Présentation du framework React Native
3. Projets React Native
   1. 1. Application « eni_react_native_helloworld »
   2. 2. Application « eni_react_native_list_view »
   3. 3. Application « eni_react_native_input_text »
   4. 4. Application « eni_react_native_picker_basique »
   5. 5. Application « eni_react_native_hook »
   6. 6. Application « eni_react_native_php_mysql »
   7. 7. Présentation d’une application CRUDPHP-MySQL complète
   8. 8. Application « eni_react_native_villes_ajout »
   9. 9. Application « eni_react_native_villes_liste »
   10. 10. Application «eni_react_native_villes_modification»
   11. 11. Application « eni_react_native_villes_suppression »

Framework Vue3.js

1. Présentation de Vue3.js
   1. 1. Points communs entre React.js et Vue3.js
   2. 2. Les points forts de Vue3.js
   3. 3. Les points faibles de Vue3.js
2. Applications basiques Vue3.js
   1. 1. Application « eni_vue3js_liste_voitures_01.html »
   2. 2. Application « eni_vue3js_liste_voitures_02.html »
   3. 3. Application « eni_vue3js_liste_voitures_03.html »
   4. 4. Application « eni_vue3js_liste_voitures_04.html »
   5. 5. Application « eni_vue3js_liste_voitures_05.html »
   6. 6. Application « eni_vue3js_liste_voitures_06.html »
   7. 7. Application « eni_vue3js_liste_voitures_07.html »
   8. 8. Application « eni_vue3js_liste_voitures_08.html »
   9. 9. Application « eni_vue3js_liste_voitures_09.html »
3. Applications Vue3.js couplées avec MySQL
   1. 1. Content Delivery Network (CDN)
   2. 2. Node.js Package Manager (NPM)
   3. 3. Interface en ligne de commandes (CLI)
   4. 4. Application « eni_vue3js_voitures_mysql_1 »
      1. a. Création de l’application dans un sous-répertoire
      2. b. Lancement de l’application
      3. c. Modifier les scripts générés(squelette) par le template
   5. 5. Application « eni_vue3js_voitures_mysql_2 »
   6. 6. Application « eni_vue3js_voitures_mysql_3 » 
   7. 7. Application « eni_vue3js_voitures_mysql_4 »

Mise en œuvre de la librairie Math.js

1. Introduction
2. Application « eni_mathjs_01.html » - Statistiques basiques sur une matrice 3*3
3. Application « eni_mathjs_02.html » - Statistiques Iris (échantillon partiel)
4. Application « eni_mathjs_03.html » - Statistiques Iris (échantillon complet)
5. Application « eni_mathjs_04.html » - Régression linéaire Iris (échantillon partiel)

Mise en œuvre de la librairie TensorFlow.js

1. Algorithme de classification automatique
2. Application « eni_classification_iris.html »