Initiation JavaScript

Commencez. C'est gratuit
ou s'inscrire avec votre adresse courriel
Rocket clouds
Initiation JavaScript par Mind Map: Initiation JavaScript

1. Les opérations de bases

1.1. Affectation

1.1.1. Possible de créer la variable

1.1.2. Puis d'affecter

1.2. Addition

1.2.1. Entre nombres

1.2.2. Entre chaînes (concaténation)

1.2.3. Entre un tableau et un nombre

1.2.4. Entre un symbol et un nombre

1.2.5. Entre undefined et un nombre

1.2.6. Entre null et un nombre

1.3. Soustraction

1.3.1. NaN : Diviser deux lettres

1.4. Multiplication

1.5. Division

1.5.1. Infinity : Diviser par 0

1.6. Modulo : Reste d'une division euclidienne (sans virgule)

1.7. Puissance **

2. Introduction

2.1. Une petite présentation

2.1.1. Fabien DELIANCOURT

2.1.2. 30 ans

2.1.3. Ingénieur informatique depuis 6 ans

2.1.4. J'ai travaillé pour plusieurs gros clients

2.1.4.1. Carrefour

2.1.4.2. Safran

2.1.4.3. Amadeus

2.1.4.4. ArcelorMittal

2.1.5. Pour en savoir plus...

2.1.5.1. Vous pouvez me contacter après le cours

2.1.5.2. Ou aller voir mon LinkedIn

2.2. Genèse rapide du JavaScript

2.2.1. On ne vas pas rentrer dans les détails 😉

2.2.2. Création

2.2.2.1. En 1995

2.2.2.2. Par Brendan Eich

2.2.3. Il y a 10 ans...

2.2.3.1. Boudé des développeurs

2.2.3.1.1. Performance

2.2.3.1.2. Sécurité

2.2.3.1.3. Pas activité sur tous les navigateurs

2.2.3.2. Anecdote

2.2.3.2.1. Mon premier professeur de web ne voulait pas qu'on l'utilise

2.2.3.2.2. Au profit du PHP

2.2.3.3. C'est important de le savoir...

2.2.3.3.1. Car il garde parfois cette mauvaise réputation chez certains "vieux développeurs"

2.2.4. Et depuis ...

2.2.4.1. JavaScript a beaucoup évolué facilitant son utilisation

2.2.4.2. Et les navigateurs l'utilisent de façon beaucoup plus performante

2.2.4.3. Et la communauté a su l'enrichir

2.2.4.3.1. 2006 - JQuery

2.2.4.3.2. 2009 - NodeJS

2.2.4.3.3. 2011 - Bootstrap

2.2.4.3.4. 2013 - ReactJS

2.2.4.3.5. 2014 - Material Design

2.2.4.3.6. 2016 - Angular

2.2.4.3.7. Et bien d'autres...

2.3. C'est bien tout ça, mais à quoi il sert ? 🤷‍♂️

2.3.1. C'est un langage de programmation

2.3.2. Pour dynamiser les sites web

2.3.2.1. Mais côté client

3. Les variables

3.1. Il y a plusieurs types de variables en JS

3.1.1. Mais nous allons commencer tranquillement avec une seule

3.1.2. Le temps de vous familiariser

3.2. Qu'est-ce qu'une variable ?

3.2.1. C'est une zone mémoire de l'ordinateur

3.2.2. Pour stocker des informations

3.2.2.1. Afin de les réutiliser plus tard

3.2.3. Il faut voir ça comme une boîte dans laquelle on peut mettre

3.2.3.1. Des nombres

3.2.3.2. Du texte

3.2.3.3. Ou même des oranges

3.2.3.4. Afin d'en servir quand on en a besoin

3.2.3.5. Mais avant d'utiliser des oranges, il va d'abord falloir comprendre les bases

3.3. Déclarer une variable let

3.4. Choisir un nom explicite

3.4.1. mais concis

3.4.2. de préférence en anglais

3.5. Les types primitifs

3.5.1. Number

3.5.1.1. Entier

3.5.1.2. Réel

3.5.2. Booléen

3.5.3. String

3.5.3.1. Caractère

3.5.3.2. Chaîne

3.5.4. Symbol

3.5.4.1. valeur unique

3.5.4.1.1. Symbole(1) != Symbole(1)

3.5.4.2. inchangeable

3.5.5. undefined

3.5.6. null

3.6. Les types plus avancés

3.6.1. Les tableaux

3.6.2. Les fonctions

3.6.3. Les objets

4. Les conditions

4.1. if

4.1.1. if

4.1.2. else

4.1.3. else if

4.1.4. else if else if

4.2. switch

4.2.1. case

4.2.1.1. accepte les types primitifs

4.2.1.2. test comme un ===

4.2.1.3. les cases peuvent ne pas avoir le même type

4.2.1.3.1. ce que je déconseille dans une certaine mesure

4.2.1.3.2. car cela voudrait dire que l'on ne maîtrise pas ce que l'on fait

4.2.2. break

4.2.2.1. pour ne pas passer au case suivant

4.2.3. default

4.2.3.1. très important

4.2.3.1.1. toujours prévoir le cas où cela ne se passe pas comment on veut

4.2.3.1.2. on ne maîtrise pas toujours comment son code va être utilisé

4.3. 1 == 1 ? :

5. Les boucles

5.1. for

5.2. while

5.3. do while ;

5.4. foreach

5.4.1. Lié à un tableau

5.4.2. Pour parcourir ses éléments

5.4.2.1. array.forEach(element => { console.log(element) });

6. Les bases des commentaires

6.1. Primordiale

6.1.1. Pour se faire comprendre des autres

6.1.2. Pour se rappeler soi-même de ce que l'on a voulu faire après un long weekend

6.1.3. Ou un changement de projet de 6 mois

6.2. Dans un livre cela correspondrait aux chapitres, des sous-chapitres et des notes

6.3. //

6.3.1. Commente tout ce qui se trouve à droite

6.3.1.1. Sur une ligne seule

6.3.1.2. Tout à droite d'une ligne

6.3.2. Fais pour du mono ligne

6.3.3. Permets aussi de désactiver du code

6.4. /* */

6.4.1. Commente tout ce qui se trouve entre le début et la fin

6.4.1.1. Sur une ligne

6.4.1.2. Sur plusieurs lignes

6.4.1.3. Tout à droite

6.4.1.4. A gauche

6.4.1.5. Au milieu

6.4.2. Sert également à faire des commentaires plus évolués

6.4.2.1. Pour mieux se faire comprendre

6.4.2.2. Pour de la documentation

6.4.2.3. Pour se faire aider par son éditeur de texte

6.4.2.3.1. /** * @description Ne fait absolument rien * @param {string} [nb] Un nombre */ function nothing (nb) {}

6.4.2.4. A voir en détail lorsque l'on abordera les fonctions

7. Afficher du contenu

7.1. document.write('J'écris dans le HTML');

7.2. Ne pas oublier le ;

7.2.1. Signale la fin d'une instruction

7.2.2. Comme dans beaucoup de langage

7.2.3. Pas obligatoire en js mais on doit considérer que c'est le cas

7.2.4. Il faut le voir comme le . d'une phrase

7.2.4.1. On peut décider de ne pas en mettre

7.2.4.2. Mais cela peut causer des problèmes d'interprétation

7.2.4.3. Donc il faut toujours le mettre

7.2.4.4. Pour être sûr que le code sera toujours compris par l'interpréteur javascript

7.2.5. Permet de minifier

7.3. alert('Attention')

7.4. console.log('Tout est OK')

7.5. '' ou "" ou ``

7.5.1. vous pouvez utiliser ce que vous préférez

7.5.2. dans la mesure où ce choix reste constant

7.5.3. autrement dit, ne pas changer toutes les 5min

7.6. échappement en JS \

8. Les opérateurs d'affectation

8.1. Ou de "feignants"

8.1.1. Car on peut faire la même chose en écrivant moins

8.1.2. En tant que développeur on cherchera toujours à gagner en productivité

8.1.3. Mais attention à la lisibilité

8.1.3.1. Il faut pouvoir comprendre rapidement ce qu'on lit

8.1.3.2. Et que cela reste maintenable

8.2. ++ et --

8.2.1. Expliquer x++ et x--

8.2.1.1. let x = 13; x++; console.log(x);

8.2.2. Montrer problème priorité d'affectation

8.2.2.1. let x = 13; let result = x++; console.log(result); // result => 13

8.2.3. Expliquer ++x et --x

8.3. += et -=

8.4. *= et /=

8.5. %=

8.6. **=

9. Les opérateurs de comparaison

9.1. Egalité

9.1.1. 1 == 1

9.1.2. '1' == 1

9.1.3. 1 === 1

9.1.4. '1' === 1

9.2. Différence

9.2.1. 1 != 1

9.2.2. '1' != 1

9.2.3. 1 !== 1

9.2.4. '1' !== 1

9.3. Inférieur

9.3.1. <

9.3.2. <=

9.3.3. <== ne marche pas

9.4. Supérieur

9.4.1. >

9.4.2. >=

9.4.3. >== ne marche pas

10. Les opérateurs de logiques

10.1. Et

10.1.1. true && true

10.1.2. true && false

10.1.3. false && true

10.1.4. false && false

10.2. Ou

10.2.1. true || true

10.2.2. true || false

10.2.3. false || true

10.2.4. false || false

10.3. Not

10.3.1. !true

10.3.2. !false

11. Avancé

11.1. Des fonctions simples

11.1.1. Changer le type

11.1.1.1. parseInt

11.1.1.2. parseFloat

11.1.1.3. toString

11.1.2. Manipuler les chaînes

11.1.2.1. length

11.1.2.2. indexOf

11.1.2.3. replace

11.1.2.4. substr

11.1.2.5. splits

11.2. Créer son premier fichier JavaScript

11.2.1. Créer script.js

11.2.2. Le charger src="script.js"

11.2.3. console.log('Hello Script')

11.3. Créer ses propres fonctions

11.3.1. déclaration

11.3.2. exécution

11.3.2.1. On peut exécuter plusieurs fois

11.3.3. function nommé sans param

11.3.4. function avec param

11.3.5. function avec retour

11.3.6. function anonyme

11.3.7. Les commentaires avancées

11.3.7.1. sans param et return

11.3.7.2. avec param

11.3.7.3. avec return

11.4. Les différents types de variables

11.4.1. scope / la portée

11.4.2. bloc { }

11.4.3. let

11.4.3.1. bloc et sous block

11.4.4. const

11.4.4.1. bloc et sous bloc

11.4.4.2. non modifiable / lecture seule

11.4.5. global

11.4.5.1. dispo partout à partir de - sa déclaration - son ordre de chargement de fichier

11.4.6. var

11.4.6.1. n'est plus recommandé depuis la création de let/const

11.4.6.2. dispo partout dans une fonction à partir de sa déclaration

11.4.6.2.1. function test (){ if (1 == 1){ var t = '1234'; } console.log(t); }

11.5. Diviser les fichiers pour mieux régner

11.6. Les prototypes d'extension

11.7. Modifier les éléments du DOM

11.7.1. Rappel : Qu'est-ce que le DOM ?

11.8. Créer une classe