Ce livre s'adresse à toute personne qui débute la programmation ainsi qu'à des développeurs déjà expérimentés dans d'autres domaines et désireux de découvrir la programmation web. Il a pour objectif de donner les connaissances nécessaires pour dynamiser et enrichir des pages web et applications dites "clients légers" en utilisant la puissance du langage JavaScript et de la bibliothèque jQuery.

Ce livre se divise en 3 parties. Dans la première, l'auteur commence par présenter les instructions et techniques de base de JavaScript (variables, opérateurs, structures de contrôle) avant d'étudier des notions plus avancées (tableaux, évènements, données distantes…) pour se rendre compte des possibilités offertes par le langage.

La deuxième partie traite des fonctionnalités de la bibliothèque jQuery. Le lecteur découvre ainsi jQuery à travers son fonctionnement, les fonctions callback ou encore l'interaction avec le DOM. Il poursuit avec l'étude des interactions utilisateurs et la manipulation de données. Cette partie se termine par un chapitre de bonnes pratiques pour le développement avec JavaScript et jQuery.

Pour finir, la troisième partie, plus pratique, propose d'exploiter l'utilisation de ces instructions et techniques par la réalisation complète de projets concrets. Ils s'inspirent de cahiers des charges d'applications réelles et sont de complexité croissante.

Le premier est un jeu de casse-briques dans lequel il s'agit de gérer le déplacement d'une balle et d'une raquette et de détecter des collisions pour supprimer les briques touchées. Le second est un jeu d'aiguilleur du ciel permettant de gérer des avions dans un espace aérien selon des ordres donnés. Ces deux projets familiarisent le lecteur avec les manipulations de base des éléments d'une page web hôte et leur animation à l'écran.

Le troisième projet est un projet de développement d'une d'application de gestion de collections. Il s'agit de créer et paramétrer des collections de manière dynamique et de proposer des écrans permettant de renseigner les fiches des objets collectionnés. Il permet au lecteur d'avoir un aperçu des techniques Ajax de communication avec un serveur de données distant et de se rendre compte des processus à mettre en place pour créer des interfaces homme-machine dynamiques et performantes.

Fort de ces découvertes le lecteur sera armé pour développer ses propres pages et applications web dynamiques avec JavaScript et jQuery.

Des éléments complémentaires sont en téléchargement sur le site www.editions-eni.fr.


Les chapitres du livre :
Avant-propos – Partie JavaScript : Présentation de JavaScript – Les bases de JavaScript – Les structures de contrôle en JavaScript – JavaScript en profondeur – Aller plus loin en JavaScript – Partie jQuery : Présentation de jQuery – Les interactions utilisateurs avec jQuery – jQuery et les données – Aller plus loin avec jQuery – Les bonnes pratiques en JavaScript et jQuery – Partie Projets exemples : Les outils nécessaires aux projets exemples – Création d'un jeu de casse-briques – Finalisation du jeu de casse-briques – Création d'un jeu d'aiguilleur du ciel – Terminer le jeu d'aiguilleur du ciel – Création d'une gestion de collections – Améliorer de la gestion de collections – Finaliser la gestion de collections

Téléchargements

• Des fichiers complémentaires (5,20 Mo)

Avant-propos

1. Introduction

Présentation de JavaScript

1. Qu'est-ce que JavaScript ?
   1. 1. Un peu d’histoire
   2. 2. L’état des lieux
   3. 3. JavaScript, pour quoi faire ?
2. Fonctionnement de JavaScript
   1. 1. Les outils de développement des navigateurs
   2. 2. Intégrer un script JavaScript dans une pageweb
   3. 3. Les outils pour créer un script
3. Les notions élémentaires
   1. 1. La casse
   2. 2. Les commentaires
   3. 3. Les expressions littérales
   4. 4. Le caractère d’échappement
   5. 5. Le caractère de fin de ligne
   6. 6. La syntaxe dite "à points"
   7. 7. Les valeurs spéciales
   8. 8. Le mode strict
   9. 9. Les blocs de code

Les bases de JavaScript

1. Introduction
2. Les variables
   1. 1. Les types de valeurs
   2. 2. Instancier une variable
   3. 3. Les mots réservés
   4. 4. Expérimentation : premiers testsavec les variables
   5. 5. Les conversions implicites
   6. 6. Les variables numériques
   7. 7. Les variables textuelles
   8. 8. Les fonctions
   9. 9. Les variables tableaux
   10. 10. Les variables objets
   11. 11. Les variables représentant des dates
   12. 12. Les expressions régulières
   13. 13. L’objet Math
   14. 14. L’objet Error
3. Les opérateurs
   1. 1. Les opérateurs arithmétiques
   2. 2. Les opérateurs de comparaison
   3. 3. Les opérateurs logiques
   4. 4. Les opérateurs spéciaux
   5. 5. La précédence des opérateurs

Les structures de contrôle en JavaScript

1. Introduction
2. La portée des variables et des fonctions
   1. 1. Le contexte global
   2. 2. Les contextes privatifs hérités
3. Les conditions
   1. 1. L’instruction if...
   2. 2. L’instruction if… else…
   3. 3. L’instruction switch
4. Les boucles
   1. 1. La boucle for… next
   2. 2. La boucle do… while…
   3. 3. La boucle while ()…
   4. 4. Les boucles for… in... et for… of…
5. Gérer les erreurs
   1. 1. Le bloc try… catch()... finally
   2. 2. L’instruction throw…

JavaScript en profondeur

1. Introduction
2. Les méthodes avancées des tableaux
3. Explorer une page web avec JavaScript
   1. 1. Parcourir le DOM en JavaScript
   2. 2. Modifier des éléments de la pageen JavaScript
   3. 3. Injecter des éléments dans le DOMen JavaScript
4. Répondre aux évènements en JavaScript
   1. 1. Qu’est-ce qu’un évènement ?
   2. 2. Poser des écouteurs sur des évènements
5. Le prototypage
   1. 1. Comment fonctionne le modèle objet de JavaScript ?
   2. 2. Ajouter de nouvelles méthodes à unobjet JavaScript
6. Obtenir des données distantes avec JavaScript
   1. 1. Les fichiers exemples
   2. 2. Les principes généraux d’AJAX
   3. 3. Implémenter des appels AJAX

Aller plus loin en JavaScript

1. JSON
   1. 1. Le format JSON
   2. 2. Le prototype JSON
2. Les fonctionnalités avancées de JavaScript
   1. 1. Les closures
   2. 2. Les promesses
   3. 3. Les sockets
   4. 4. Les Web Workers
3. Le Web Storage : le stockage local des données
   1. 1. Gérer les cookies
   2. 2. Les autres systèmes de stockage :sessionStorage et localStorage

Présentation de jQuery

1. Qu'est-ce que jQuery ?
   1. 1. Un peu d’histoire
   2. 2. Les apports de jQuery à JavaScript
   3. 3. Intégrer jQuery dans une page web
   4. 4. Les fichiers exemples
2. Les bases de jQuery
   1. 1. Fonctionnement de jQuery
   2. 2. Les fonctions "callback"
   3. 3. Prévenir les conflits avec d’autres bibliothèques
   4. 4. Évolution de la bibliothèque jQuery
3. Interagir avec le DOM en jQuery
   1. 1. Les sélecteurs et pseudo-sélecteursde jQuery
   2. 2. Modifier le DOM à partir d’un sélecteuren jQuery
   3. 3. Manipuler les attributs des élémentsdu DOM
   4. 4. Déplacer, copier, supprimer des élémentsdu DOM
   5. 5. Injecter de nouveaux éléments HTMLdans le DOM
   6. 6. Les méthodes utilitaires de jQuery

Les interactions utilisateurs avec jQuery

1. Les évènements avec jQuery
   1. 1. Les fichiers exemples
   2. 2. Réagir à des évènements
   3. 3. Travailler avec les délégations
   4. 4. Déclencher des évènementspersonnalisés
2. Les effets et animations en jQuery
   1. 1. Les effets jQuery
   2. 2. Gérer la file d’attente des effets

jQuery et les données

1. Les fichiers exemples
2. La méthode .data()
3. AJAX et le mode asynchrone de récupération de données

Aller plus loin avec jQuery

1. Introduction
2. Écrire un plug-in basique
   1. 1. Concevoir un plug-in un peu plus complexe
   2. 2. Les plug-ins existants

Les bonnes pratiques en JavaScript et jQuery

1. Les techniques à favoriser et les écueils à éviter
   1. 1. De l’importance du nommage en programmation
   2. 2. Quelques pièges à éviter
2. Quelques recommandations pour bien organiser son code JavaScript et jQuery

Les outils nécessaires aux projets exemples

1. Préambule
2. Installer un serveur PHP gratuit (XAMPP)
   1. 1. Se procurer XAMPP
   2. 2. Installer et configurer XAMPP
   3. 3. Démarrer les serveurs
   4. 4. Configurer les serveurs
3. Concevoir une base de données MySQL
   1. 1. Fonctionnement d’une base de données
   2. 2. phpMyAdmin
   3. 3. Créer des tables selon des besoins précis
   4. 4. Insérer des données dans une table
   5. 5. Écrire des requêtes permettant lalecture de données
4. Concevoir des services de données
   1. 1. Écrire un service de fourniture de données
   2. 2. Écrire un service de sauvegarde de données
   3. 3. Exemples de services écrits en PHP
5. Sécuriser l’accès aux données
   1. 1. La sécurité informatique sur unserveur web
   2. 2. Définition d’un véritableservice web

Création d'un jeu de casse-briques

1. Présentation du projet
   1. 1. Description du projet
   2. 2. Les compétences acquises au cours du projet
   3. 3. La structure du projet
2. Gérer une balle
   1. 1. Afficher une balle dans la page web
   2. 2. Implémenter le déplacement de laballe
   3. 3. Restreindre le parcours de la balle à unezone délimitée de la page
   4. 4. Exercices
   5. 5. Corrigés
3. Dessiner le niveau courant
   1. 1. Concevoir un système de configuration deniveaux
   2. 2. Dessiner et injecter des briques dans l’airede jeu en fonction de la configuration du niveau en cours
   3. 3. Exercices
   4. 4. Corrigés
4. Gérer les collisions de la balle avec les briques
   1. 1. Attendre la fin des animations des briques pour lancerla balle
   2. 2. Calculer une position de départ correctepour la balle
   3. 3. Détecter la présence des briquesdans le parcours de la balle
   4. 4. Exercice
   5. 5. Corrigé
5. Ajouter une raquette et gérer ses déplacements
   1. 1. Insérer une raquette dans l’aire de jeu
   2. 2. Gérer les déplacements de la raquetteen fonction de la position de la souris
6. Gérer les collisions de la balle avec la raquette
7. Améliorer le code de la fonction drawBalls()

Finalisation du jeu de casse-briques

1. Gérer un écran de début de partie
   1. 1. Présenter le jeu au joueur et attendre quecelui-ci déclenche la partie
   2. 2. Exercices
   3. 3. Corrigés
2. Affiner la détection des collisions avec les briques
   1. 1. Prendre en compte le sens de déplacementde la balle
3. Gérer le score du joueur
   1. 1. Animer le déplacement d’un score lorsqu’unebrique est touchée
   2. 2. Calculer et afficher le score du joueur
   3. 3. Exercices
   4. 4. Corrigés
4. Gérer la perte de balle
   1. 1. L’utilisateur perd la dernière balle en jeu
   2. 2. Exercice
   3. 3. Corrigé
5. Gérer le passage au niveau suivant
   1. 1. Préparer la gestion multiniveau
   2. 2. Afficher et gérer le passage au niveau suivantlorsque toutes les briques du niveau ont été touchées
6. Gérer des bonus/malus
   1. 1. Des objets tombent lorsque certaines briques sonttouchées
   2. 2. Si un objet est ramassé par la raquette,un bonus/malus est dû
   3. 3. Exercice
   4. 4. Corrigé
7. Gérer le Game Over
8. Quelques idées pour améliorer le jeu

Création d'un jeu d'aiguilleur du ciel

1. Présentation du projet
   1. 1. Description du projet
   2. 2. Les compétences acquises au cours du projet
   3. 3. La structure du projet
2. Présenter le jeu à l'utilisateur
   1. 1. Présenter un écran d’accueil
   2. 2. Exercices
   3. 3. Corrigés
3. Préparer et afficher les composants du jeu
   1. 1. Initialiser une partie
   2. 2. Exercice
   3. 3. Corrigé
4. Organiser les éléments techniques du jeu
   1. 1. Définir les propriétésd’un objet personnalisé représentant un vol
   2. 2. Afficher un appareil à l’écran
   3. 3. Exercice
   4. 4. Corrigé
5. Générer du contenu
   1. 1. Exercice
   2. 2. Corrigé
6. Animer le jeu
   1. 1. Orienter l’appareil selon son cap et animer son déplacement
   2. 2. Exercice
   3. 3. Corrigé
7. Programmer des interactions utilisateurs
   1. 1. Interagir avec les avions et leur donner des directivesde vol
   2. 2. Exercice
   3. 3. Corrigé

Terminer le jeu d'aiguilleur du ciel

1. Finaliser le projet
   1. 1. Gérer des trajectoires multiples pour unappareil
   2. 2. Exercices
   3. 3. Corrigés
2. Améliorer les interactions
   1. 1. Interagir avec les paramètres d’un vol
3. Flairer les dangers
   1. 1. Détecter et afficher les risques de collisions
4. Game Over
   1. 1. Gérer la fin de partie
   2. 2. Exercice
   3. 3. Corrigé
5. Quelques pistes de réflexion pour améliorer le jeu

Création d'une gestion de collections

1. Présentation du projet
   1. 1. Description du projet
   2. 2. Les compétences acquises au cours du projet
   3. 3. La structure du projet
2. Gérer des collections
   1. 1. Définir une collection
   2. 2. Concevoir le système de stockage des informations
   3. 3. Créer un service d’accès aux données
   4. 4. Interroger le service depuis le client et exploiterles données reçues
   5. 5. Créer une nouvelle collection
   6. 6. Modifier les propriétés d’une collection
   7. 7. Exercice
   8. 8. Corrigé

Améliorer la gestion de collections

1. Paramétrer la fiche d'une collection
   1. 1. Définir les champs de la fiche d’une collection
   2. 2. Permettre la saisie des champs d’une fiche
   3. 3. Récapituler l’ensemble des champs de la collection
   4. 4. Exercice
   5. 5. Corrigé
2. Créer un éditeur graphique
   1. 1. Organiser les champs sur la fiche d’une collection
   2. 2. Gérer le glissé-déposé deschamps vers la fiche
   3. 3. Enregistrer les données d’organisation surle serveur et les restituer
   4. 4. Exercices
   5. 5. Corrigés

Finaliser la gestion de collections

1. Exploiter les collections
   1. 1. Le processus d’accès aux collections
   2. 2. Afficher l’écran principal de manipulationd’une collection
   3. 3. Créer un élément d’unecollection
   4. 4. Enregistrer un élément d’une collection
   5. 5. Afficher l’ensemble des élémentsd’une collection
   6. 6. Filtrer les éléments d’unecollection selon différents critères
   7. 7. Modifier les données d’un élémentcollectionné existant
   8. 8. Exercices
   9. 9. Corrigés
2. Quelques pistes de réflexion pour améliorer l’application