Bien débuter avec JavaScript E-Book

Rémy Lentzner

• Herausgeber: Remylent
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Französisch
• Veröffentlichungsjahr: 2020

Seitenzahl: 88

Beschreibung

Ce livre s’adresse aux personnes qui souhaitent apprendre à écrire du code JavaScript. Ce langage est utilisé pour contrôler les éléments des pages Web tout en s’intégrant harmonieusement avec le code HTML. Vous découvrirez la structure objet du langage et son interaction avec le DOM (Document Object Model) qu’on représente par un arbre à balises. Vous manipulerez les variables, les expressions conditionnelles, les boucles tout en vous exerçant grâce aux très nombreux exercices proposés dans ce livre. Vous étudierez les méthodes qui manipulent les textes, les nombres et les dates. JavaScript permet aussi de gérer les événements qui peuvent se produire dans la page Web, comme un clic de souris ou une sortie d’une zone de saisie. Le duo JavaScript / HTML possède de nombreux atouts qui vous aideront à mieux contrôler vos pages Internet.

À PROPOS DE L'AUTEUR

Rémy Lentzner est formateur en informatique depuis 1985. Spécialisé dans la maîtrise des outils bureautiques, il accompagne les entreprises dans la formation professionnelle de leurs salariés. Autodidacte, il a une quinzaine d'ouvrages informatiques à son actif.

Leseprobe

REMY LENTZNER

Bien débuter avec JAVASCRIPT

EDITIONS REMYLENT, Paris, 1ère édition, 2020

R.C.S. 399 397 892 Paris

25 rue de la Tour d’Auvergne - 75009 Paris

[email protected]

www.REMYLENT.FR

ISBN EPUB : 978-2-490275-34-2

Le Code de la propriété intellectuelle interdit les copies ou reproductions destinées à une utilisation collective. Toute représentation ou reproduction intégrale ou partielle faite par quelque procédé que ce soit, sans le consentement de l’auteur ou de ses ayants droit ou ayants cause, est illicite et constitue une contrefaçon, aux termes des articles L.335-2 et suivants du Code de la propriété intellectuelle.

Couverture : Anna Lentzner - www.lheuredelasieste.fr

Un très grand merci à Isabelle et Raymond pour la relecture

Un immense merci à Anna pour la couverture

INTRODUCTION

Bienvenue dans l'étude du langage JavaScript. Ce livre s'adresse à toutes les personnes qui souhaitent l'apprendre afin de mieux organiser et contrôler les éléments des pages Internet. JavaScript s'intègre dans l'organisation des balises HTML et il vaut mieux les connaître avant de pouvoir programmer des fonctions.

Vous découvrirez comment est structuré le langage à travers son organisation : ses mots-clés, les variables, les structures de contrôle comme les boucles ou les expressions conditionnelles. Parce qu'un internaute peut agir sur n'importe quelle partie d'une page Internet, le langage JavaScript est événementiel, c'est à dire qu'il écoute ce qui se passe grâce à des commandes très spécifiques que l'on programme dans le code. N'hésitez pas à reproduire les exemples du livre pour mieux vous imprégner de la syntaxe et des nombreuses expressions.

Ce livre est structuré en 4 chapitres.

Le chapitre 1 commence par rappeler quelques exemples de codage en HTML et montre que le langage JavaScript y est intimement lié. Vous découvrirez comment écrire le code à l'intérieur de fonctions simples qui s'enclenchent à un moment déterminé. Vous étudierez les objets du DOM (Document Object Model) et ses spécificités.

Le chapitre 2 s'intéresse aux structures de contrôle, c'est à dire aux commandes qui permettent de gérer le déroulement des lignes de code. Vous y apprendrez à manipuler les expressions conditionnelles et les boucles.

Le chapitre 3 détaille la gestion des événements, comme un clic de souris, une entrée ou une sortie d'une zone de saisie. Vous pourrez apprécier le gestionnaire AddEventListener qui écoute ce qui se passe au sein d'une page Web. Le bouillonnement d'événements vous montrera comment éviter les redondances d'écriture dans le code.

Le chapitre 4 expose les méthodes les plus courantes qui manipulent les textes, les nombres et les dates.

J’espère que la lecture de ce livre vous intéressera et vous permettra de mieux comprendre la structure du langage JavaScript.

N'hésitez pas à me contacter ([email protected]) si vous avez des remarques sur ce livre ou bien des questions.

Je ne manquerai pas de vous répondre.

Bonne lecture.

L’auteur

Table des matières

Chapitre 1 Les fondamentaux

1.1 Le duo efficace JavaScript/HTML

1.1.1 L'éditeur Brackets pour coder et voir le résultat

1.1.2 Une page Web sans code JavaScript

1.1.3 Un exemple avec du code JavaScript

1.2 Le DOM ou l'arbre à balises

1.2.1 Les méthodes querySelector() et getElementById()

1.2.2 Créer la page Web directement en JavaScript

1.2.3 Les commentaires

1.3 Où trouver de l'information sur JavaScript ?

1.4 Les variables

1.4.1 Déclaration et affectation

1.4.2 La portée des variables

1.4.3 Des scripts sans fonction

1.5 Les fonctions

1.5.1 Créer une fonction

1.5.2 Invocation d'une fonction

1.5.3 Passage de valeurs dans une fonction

1.5.4 Passage de variables dans une fonction

1.5.5 Les fonctions anonymes

Exemple 1 : sans fonction anonyme

Exemple 2 : avec une fonction anonyme

Chapitre 2 Les structures de contrôle

2.1 Les conditions

2.1.1 La condition if

2.1.2 La condition if ... else

2.1.3 La condition if ... else if ... else

2.1.4 La condition switch

2.2 Les opérateurs de comparaison

2.3 Les boucles

2.3.1 La boucle while

2.3.2 La boucle do ... while

2.3.3 La boucle for

2.3.4 La boucle for ...in

2.3.5 La boucle for ...of

Chapitre 3 Les événements

3.1 Les événements provoqués par l'internaute

3.1.1 Les événements de type clavier

Capturer une touche avec keypress

Colorier au moment de la saisie du texte

Ctrl, Alt, Shift et A avec keydown

Ecouter plusieurs touches en même temps

3.1.2 Les événements de type souris

Afficher deux images en fonction du clic gauche

Position de la souris sur une carte d'Europe

Une image coupée en plusieurs parties

3.2 Les événements dans les formulaires

3.2.1 Rappel sur la structure des éléments d'un formulaire

3.2.2 Les balises qui créent des éléments

3.2.3 La balise <input>

3.2.4 Un formulaire de demande d'informations

3.3 Le gestionnaire d'événements AddEventListener

3.3.1 Ecouter un clic sur 3 images

3.3.2 Contrôler la validation d'un formulaire

3.3.3 Le bouillonnement des événements

A quoi sert ce bouillonnement ?

Un exemple sans bouillonnement

Le bouillonnement évite les redondances

Chapitre 4 Les textes, les nombres et les dates

4.1 Manipulation de chaînes de caractères

4.1.1 Concaténer des bouts de chaînes

4.1.2 Concaténer des caractères spéciaux

4.1.3 La propriété length

4.1.4 Les boîtes de dialogue confirm et prompt

4.1.5 Les méthodes de manipulation de texte

4.2 Manipulation de nombres

4.2.1 Précision et arrondi

4.2.2 La méthode très importante parseFloat

4.2.3 L'objet Math

4.3 Manipuler des dates

4.3.1 Calcul de votre âge

4.3.2 Les méthodes qui agissent sur les dates

Chapitre 1 Les fondamentaux

Ce chapitre commence par rappeler quelques exemples de codage en HTML et montre que le langage JavaScript y est intimement lié, au sein des balises <html> et </html>. Vous découvrirez comment écrire du code à l'intérieur de fonctions simples qui s'enclenchent à un moment déterminé. Une page HTML est structurée en fonction d'un modèle objet de document appelé DOM. Le langage JavaScript est orienté objet et est capable d'accéder très précisément aux objets présents dans la page grâce à des expressions spécifiques comme les méthodes et les propriétés. JavaScript permet aussi de contrôler le déroulement des lignes de code en utilisant des variables.

1.1 Le duo efficace JavaScript/HTML

JavaScript est un langage de programmation qui a été créé dans les années 90 pour manipuler efficacement les informations présentes dans les pages Web. Lorsqu'on souhaite créer une page internet, on utilise le langage HTML (Hypertext Markup Language) qui est un langage à balises (marques) et qui est prévu pour afficher des informations dans n'importe quel navigateur. Ce langage HTML ne peut en aucun cas réaliser des calculs ou d'autres opérations complexes. C'est JavaScript qui va s'en charger puisqu'il va pouvoir exécuter des commandes. Quand on développe des applications pour Internet, on travaille avec le langage HTML qui aide à créer la structure des pages Web. Les balises permettent la mise en place des objets qui fournissent le gros œuvre.

On peut ainsi créer des titres, du texte, des images, des liens, des zones de saisie, des en-têtes, des pieds de page, des logos, des menus et bien d'autres objets encore.

On utilise en même temps le langage CSS (Cascading Styles Sheets ou feuilles de styles en cascade) qui organise la présentation des informations. Par exemple, on peut définir que le logo d'une page sera aligné à droite et entouré d'une bordure. De même, on précisera une police de caractères et une taille spécifique pour le texte. Le travail du langage CSS est essentiellement de gérer la présentation.

Enfin, on emploiera le langage JavaScript pour créer des fonctions qui effectueront des opérations sur les objets présents dans la page Web. Par exemple, on peut faire un calcul à partir de dates différentes, trouver un résultat issu de valeurs numériques ou encore gérer l'action des internautes lorsqu'ils emploient la souris ou le clavier.

Il existe aussi le langage PHP qui est utilisé pour la gestion des données dans un contexte client-serveur. Ce langage est préféré par les programmeurs lorsque des informations sont envoyées vers un serveur qui renvoie une réponse. On peut aussi utiliser un dérivé du langage JavaScript qui gère ces opérations client-serveur mais la programmation est complexe et sort du cadre de ce livre. Le trio HTML-CSS-JAVASCRIPT est souvent appelé langages standards du Web.

Si vous ne connaissez pas du tout les langages HTML-CSS, il faut commencer par les apprendre. Vous pouvez lire le livre Bien débuter sur HTML aux éditions REMYLENT pour vous exercer. En effet, la création des pages Web utilise une intégration complète entre les balises HTML, les commandes de présentation CSS et les fonctions JavaScript.

1.1.1 L'éditeur Brackets pour coder et voir le résultat

Une page Web contenant du code HTML/JavaScript s’écrit avec n'importe quel éditeur de texte. Tapez les lignes de code puis enregistrez l'ensemble dans un fichier avec une extension .html et ensuite dans un autre avec une extension .txt. Ouvrez ensuite votre navigateur et le fichier précédemment enregistré avec l'extension .html. Vous verrez le résultat immédiatement.

Cette solution n'est pas très pratique parce que cela vous oblige à ouvrir de nouveau le fichier .txt pour faire une modification puis à sauvegarder de nouveau ces changements en .html et en .txt. D'autre part, vous ne pouvez pas voir le résultat de votre code en direct.

Une solution (parmi beaucoup d'autres) est d'utiliser l'éditeur gratuit Brackets que j'utilise pour mes tests de programme. Cet outil vous permet d'écrire le code puis de voir le résultat immédiatement par l'option Aperçu en direct. Si vous modifiez le code, il suffit de réactualiser la page Web dans le navigateur pour voir le résultat. Vous pouvez télécharger Brackets pour Mac à l'adresse https://brackets.fr.uptodown.com/mac, mais vous pouvez aussi le télécharger pour Windows ou pour un autre système d'exploitation.

Brackets montre toujours le résultat dans le navigateur défini par défaut. Si vous souhaitez étudier un résultat dans plusieurs navigateurs, modifiez simplement celui qui est défini par défaut.

Les navigateurs n'affichent pas tous de la même façon le code HTML/CSS/JAVASCRIPT. C'est une des raisons de la difficulté de créer des pages Web qui fonctionnent correctement sur les nombreuses plateformes informatiques existantes sur le marché (ordinateur, tablettes, mobiles, objets connectés, etc). Si vous souhaitez développer des applications solides, votre code devra prendre en considération ces différences.

1.1.2 Une page Web sans code JavaScript

La figure 1.1 montre un exemple de page HTML qui affiche une liste de choix. Un menu propose de cliquer sur quatre liens qui appellent une autre page spécifique. Un titre et un logo ont été placés à des emplacements spécifiques, grâce à l'utilisation de paramètres de présentation CSS.

Figure 1.1 : Un menu dans une page HTML

Le code ci-dessous montre la manière de réaliser cette page.

Les instructions HTML sont des balises, c'est à dire des expressions entourées de signes < et >.

<!doctype html>

<! début de l'en-tête>

<head>

<! début de la définition des styles>

<style>

/* caractéristiques des objets présents dans le corps*/

body {